Heim >Web-Frontend >HTML-Tutorial >Welche neuen Tag-Elemente werden zu HTML5 hinzugefügt?
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 FormularsDie Breite und Höhe des Eingabeelements vom Bildtypheight:width:list: Das Attribut gibt die Datenliste des Eingabefelds anErklärung: Die zugehörige Option input-à ist einer Dropdown-Liste zugeordnet. datalist list=“val“ =è datalist id=“val“ Datenliste Alle Optionen müssen Optionen seinLabel-EingabeaufforderungWert Der Wert, der in der Dropdown-Liste angezeigt wirderforderliches 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; }
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>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:
So verwenden Sie das 1aa9e5d373740b65a0cc8f0a02150c53-Tag von HTML
So verwenden Sie das c37f8231a37e88427e62669260f0074d-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!