Heim Web-Frontend HTML-Tutorial Welche neuen Tag-Elemente werden zu HTML5 hinzugefügt?

Welche neuen Tag-Elemente werden zu HTML5 hinzugefügt?

Nov 23, 2017 pm 03:50 PM
h5 html5 元素

Jeder weiß, dass H5 viele neue Element-Tags hinzugefügt hat. Lassen Sie uns also für Sie zusammenfassen: Welche Tags wurden zu H5 hinzugefügt? Was bewirken diese Tags?

Eingabetyp="XXX"

E-Mail: Das Eingabeaufforderungsformat ist falsch

URL-Adresse: Adressformat: http://www.....

Zahl: Numerischer Typ

Attribute: Min. Minimum Max. Maximum

Bereich: Eingabefeld für Zahlen innerhalb des Bereichs Slider-Verständnis

Datum: Datumsauswahl

Tel: Eingabefeld für Telefonnummer

Farbe: Farbauswahl

Neues Formularattribut:

Autovervollständigungsattribut gibt Formular oder Eingabe an, die Domains haben sollten Autovervollständigung-Funktionalität. Der Wert „on“ ist eingeschaltet und „off“ ist ausgeschaltet.

Das Autofokus-Attribut des Eingabeaufforderungsfelds des Formulars gibt an, dass das Feld beim Laden der Seite automatisch den Fokus erhält. autofocus="autofocus" Es gibt nur eine

Formularaktion auf der Seite – schreiben Sie das Aktionsattribut des Formulars neu. Wenn die Formulardaten übermittelt werden, werden sie zur Datenverarbeitung übermittelt 🎜>

formmethod - umschreiben Das Methodenattribut des Formulars

Die Breite und Höhe des Eingabeelements vom Bildtyp

height:

width:

list: Das Attribut gibt die Datenliste des Eingabefelds an

Erklärung: Die zugehörige Option input-à ist einer Dropdown-Liste zugeordnet. datalist list=“val“ =è datalist id=“val“

Datenliste Alle Optionen müssen Optionen sein

Label-Eingabeaufforderung

Wert Der Wert, der in der Dropdown-Liste angezeigt wird

erforderliches Attribut legt fest, dass das Eingabefeld muss vor dem Absenden ausgefüllt werden (darf nicht leer sein). Erforderliche Felder können für alle Eingabetypelemente verwendet werden.

Fall:

Css代码
@charset "utf-8";
/* CSS Document */
*{ margin:0px;padding:0px;}
ul,li{ list-style:none;}
a{ text-decoration:none;}
header{
      border:0px solid #ff0000;
      width:90%;
      height:80px;
      margin:0 auto;
      font-size:50px;
      background-color:#E9F8FE;
      text-align:center;
      line-height:80px;
}
nav{
      width:90%;
      height:30px;
      margin:20px auto;
      border:0px solid #ff0000;
      background-color:#8CCFF0; 
}
nav ul{ padding-left:30px;}
nav ul li{
      width:80px;
      float:left;
      line-height:30px;
      font-weight:bold;    
}
nav ul li a:hover{ color:#F00;}
 
section{
      height:600px;
      width:90%;
      border:1px solid #CCC;
      margin:0 auto;  
}
aside{
     width:20%;
      float:left;
      height:600px;
      border-right:1px solid #ccc; 
}
aside ul{
      border:0px solid #00ff00;
      height:400px;   
}
aside ul li a{
      color:#000;
      line-height:40px;
      border-bottom:1px solid #ccc;
      text-align:center;
      display:block;   
}
form{
     width:75%;
      float:left;
      margin-left:10px;    
      padding-left:30px;
      padding-top:20px;
}
form p{ line-height:30px;}
 
footer{
      width:90%;
      height:100px;
      text-align:center;
      margin-top:20px;    
}
Nach dem Login kopieren
Html代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
      XXX科技有限公司出品
</header>
<nav>
      <ul>
          <li><a href="#">首    页</a></li>
          <li><a href="#">关于我们</a></li>
          <li><a href="#">产品介绍</a></li>
          <li><a href="#">联系我们</a></li>
    </ul>
</nav>
<section>
      <aside>
        <ul>
            <li><a href="#">客服中心</a></li>
            <li><a href="#">用户中心</a></li>
            <li><a href="#">产品中心</a></li>
            <li><a href="#">反馈中心</a></li>
        </ul>
    </aside>
      <form action="1.html">
          <p>用户名<input type="text" name="uName"></p>
          <p>邮箱<input type="email" name="uEmail"></p>
          <p>
              性别<input type="text" list="uSex" name="sex">
               <datalist id="uSex">
                 <option value="男"></option>
                 <option value="女"></option>
             </datalist>
        </p>
          <p>手机<input type="tel" name="uTel"></p>
          <p><input type="submit" value="注册"></p>
    </form>
</section>
<footer>
      京ICP:111111111 地址:XXXXXX
</footer>
</body>
</html>
Nach dem Login kopieren
Es gibt so viele neue Tags und Funktionen in H5. Für weitere spannende Inhalte achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website!

Verwandte Lektüre:

HTML-Dropdown-Menücode

So verwenden Sie das

-Tag von HTML

So verwenden Sie das

-Tag-Element in HTML5

Das obige ist der detaillierte Inhalt vonWelche neuen Tag-Elemente werden zu HTML5 hinzugefügt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-Eingabeplatzhalter HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

Text in HTML verschieben Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

HTML-Onclick-Button HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles