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

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

php中世界最好的语言
php中世界最好的语言Original
2017-11-23 15:50:092122Durchsuche

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;    
}
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:

HTML-Dropdown-Menücode

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!

Stellungnahme:
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