Was sind die neuen Tags in HTML5?

HTML5 neue Tags: Canvas, Audio, Video, Quelle, Einbettung, Spur, Datenliste, Keygen, Ausgabe, Artikel, Seite, BDI, Navigation, Mark, RT, RP, Ruby, Zeit, WBR usw. Das Canvas-Tag kann Grafiken definieren, das Audio-Tag kann Audioinhalte definieren, Video kann Video definieren, Quelle kann Multimedia-Ressourcen definieren und Embed kann eingebettete Inhalte definieren usw.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.

HTML5 ist die neueste Version von HTML, die 2014 vom W3C an den Standard angepasst wurde. Verbesserte native Browserfunktionen reduzieren die Anzahl der Browser-Plug-in-Anwendungen (z. B. Flash), verbessern die Zufriedenheit der Benutzer und machen die Entwicklung komfortabler. HTML hat von 1.0 bis 5.0 enorme Veränderungen erfahren, von einer einzelnen Textanzeigefunktion zu einer Multimedia-Anzeigefunktion mit Bildern und Texten. Nach vielen Jahren der Verbesserung haben sich viele Funktionen zu einer sehr wichtigen Auszeichnungssprache entwickelt.

Neue Tags in HTML5

HTML5 fügt einige neue Struktur-Tags, Multimedia-Tags und Formular-Tags hinzu. Lassen Sie mich es Ihnen unten vorstellen.

5ba626b379994d53f7acf72a64f9b697 Neues Element

Tag	Beschreibung
5ba626b379994d53f7acf72a64f9b697	Tags definieren Grafiken, wie Diagramme und andere Bilder. Dieses Tag basiert auf der Zeichen-API von JavaScript.

Neues Multimedia-Element.

e26e9bceaa3cecafde05584c3fef9fba Definition Video (Video oder Film)e02da388656c3265154666b7c71a8ddcMultimedia-Ressourcen definieren e26e9bceaa3cecafde05584c3fef9fba und 4218491fec31d29458f32c3ffee1002bd8e2720730be5ddc9c2a3782839e8eb6Eingebettete Inhalte wie Plug-ins definieren. 9bf7cbf2c39baa37076a22499de2f6edGibt eine externe Textspur für Medien wie e26e9bceaa3cecafde05584c3fef9fba an. Neues Formularelement Beschriftung Beschreibung

Tag

fc86e7b705049fc9d4fccc89a2e80ee3

Definieren Sie die Optionsliste. Verwenden Sie dieses Element in Verbindung mit einem Eingabeelement, um die möglichen Werte der Eingabe zu definieren. aa983b9eb8086376f1f6481364a02e5aGibt das Schlüsselpaargeneratorfeld an, das für das Formular verwendet werden soll. be6d67dae90cc1ad6469079e163d0939Definieren Sie verschiedene Arten der Ausgabe, z. B. die Skriptausgabe.

Neue semantische und strukturelle Elemente

Tags	Beschreibung
23c3de37f2f9ebcb477c4a90aac6fffd	definieren unabhängige Inhaltsbereiche der Seite.
15221ee8cba27fc1d7a26c47a001eb9b	Definieren Sie den Inhalt der Seitenleiste der Seite.
af4e6c3c591431c4583becd75d1c3582	Ermöglicht Ihnen, einen Text unabhängig von der Textrichtungseinstellung seines übergeordneten Elements festzulegen.
e2b9f03cad787b9644e1f51fd23b7dac	Befehlsschaltflächen definieren, z. B. Optionsfelder, Kontrollkästchen oder Schaltflächen
a5e9d42b316b6d06c62de0deffc36939	Wird verwendet, um die Details eines Dokuments oder eines Teils eines Dokuments zu beschreiben
< ;dialog>	Definieren Sie ein Dialogfeld, z. B. ein Eingabeaufforderungsfeld
631fb227578dfffda61e1fa4d04b7d25	Das Tag enthält den Titel des Detailelements
24203f2f45e6606542ba09fd2181843a	Gibt unabhängige Flussinhalte an (Bilder, Diagramme, Fotos, Code usw.).
614eb9dc63b3fb809437a716aa228d24	Definieren Sie den Titel des 24203f2f45e6606542ba09fd2181843a-Elements
c37f8231a37e88427e62669260f0074d	Definieren Sie die Fußzeile des Abschnitts oder Dokuments.
1aa9e5d373740b65a0cc8f0a02150c53	definiert den Kopfbereich des Dokuments
f920514e6447cf1d171079d1371f007f	definiert Text mit Markierungen.
49c6123c49c6be380cb91db06cd3bfa9	Definition von Gewichten und Maßen. Nur für Messungen mit bekannten Maximal- und Minimalwerten verwenden.
c787b9a589a3ece771e842a6176cf8e9	Definieren Sie den Teil des Navigationslinks.
6ecb87e5318a36c03c59e25d55f43372	Definieren Sie den Fortschritt jeder Art von Aufgabe.
ec41f2147470148e85ad0337a362103e	Ruby-Kommentare definieren (chinesische Lautschrift oder Zeichen).
7240f116d85a7ee375466871bc33670a	Definition der Interpretation oder Aussprache eines Zeichens (chinesische Lautschrift oder Schriftzeichen).
515718f19dfe6612658be14be18aa0ec	wird in Ruby-Kommentaren verwendet, um den Inhalt zu definieren, der von Browsern angezeigt wird, die Ruby-Elemente nicht unterstützen.
c0aa3cf4895f74092c771fac967496a8	Definieren Sie den Abschnitt (Abschnitt, Abschnitt) im Dokument.
46dd80ba616c57a652514755c74c4211	Datum oder Uhrzeit festlegen.
37fcc81822f151c26d66e5caf9953670	Gibt an, wo im Text Zeilenumbrüche eingefügt werden sollten.

Beispiele für die Verwendung von HTML5-Tags

(1) Definieren Sie den Navigationslink c787b9a589a3ece771e842a6176cf8e944f9630a3d507ae7532760da37622b0f

Es ist auch ein aussagekräftiges Tag, es bedeutet nicht, dass dieses Tag irgendwo hinzugefügt wird. Es ist nur ein Sinnvoll p. Fügen Sie den Menü-Tag c787b9a589a3ece771e842a6176cf8e9 zum ff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6 hinzu kann das Menülayout realisieren, das Sie zuvor nur p verwendet haben

(2) Definieren Sie das Artikel-Tag 23c3de37f2f9ebcb477c4a90aac6fffd7618f95bdc39e398f223d37049478af1

Sie können das Artikelblock-Tag zum Schreiben von Artikeln verwenden. Verwenden Sie dieses Tag um einen Artikel im Abschnittsabschnitt zu schreiben, der mit 4a249f0d628e2318394fd9b75b4636b1e388a4556c0f65e1904146cc1a846bee kombiniert werden kann

(3) Definieren Sie die Gruppierung von Medieninhalten und deren Titel24203f2f45e6606542ba09fd2181843a

A. Dieses Tag kann in Verbindung mit dem passenden Tag 614eb9dc63b3fb809437a716aa228d24 verwendet werden, aber schreiben Sie den Titel

<header>
    <p>这是一个header部分</p>
    <nav>    <!--导航链接标签-->
        <ul>    <!--配合ul使用-->
            <li>首页</li>
            <li>关于</li>
            <li>产品</li>
            <li>联系</li>
        </ul>
    </nav>
</header>

B in die Mitte von 614eb9dc63b3fb809437a716aa228d24c03477f35900935b9be6780eb373f61c. Es kann auch in Verbindung mit 73de882deff7a050a357292d0a1fca9467bc4f89d416b0b8236eaa5f43dee742 verwendet werden, wobei 73de882deff7a050a357292d0a1fca94c72c1af5e0e7f90179c047c5ef85885e zum Schreiben von Inhalten verwendet wird. Der Anzeigeeffekt ist ebenfalls unterschiedlich aus dem Effekt der unterstützenden Verwendung

/*定义nav的高和颜色*/ 
nav{
    height:30px;
    background-color:#F33;
    margin-top:100px;}
/*正常设置li的样式*/
li{
    list-style:none;
    float:left;
    width:100px;
    height:30px;
}

(4) Definieren Sie ein Dialogfeld oder Fenster a38fd2622755924ad24c0fc5f0b4d412

Sie können in diesem Tag auch die Tags dd und dt verwenden. Der Titel und der Inhalt des Dialogfelds Das Feld hat das Attribut „offen“. Die Kompatibilität dieses Tags ist nicht sehr gut. Dieses Tag kann zusammen mit li

<article><!--文章块p-->
　　<h2>文章标题</h2><!--标题-->
　　<p>文章内容文章内容文章内容文章内容文章内容文章内容
　　<br>
　　文章内容文章内容文章内容文章内容文章内容文章内容<br>
　　文章内容文章内容文章内容</p>
</article>　

B verwendet werden. Sie können Ihren eigenen Inhalt per Rechtsklick hinzufügen (nur Firefox ist kompatibel)

Union (Befehle/Menüelemente definieren, die der Benutzer aus dem Popup-Menü aufrufen kann) 9b8d7b889acba92c978f783c55ba01dc mit

article{
	background-color:#F33;
	width:500px;
	text-align:center;  /*水平居中*/  
	margin:0px auto;
}

<figure>
    <figcaption>标题</figcaption><!--配套-->
    <p>标题内容</p>
</figure>

Das gewünschte Element markieren erscheint nach einem Rechtsklick. Klicken Sie auf den gewünschten Menüpunkt

, und der Inhalt wird angezeigt

(6) Titelgruppe d8eccd9ed644b68a6460a2bb84548c82

Sie können einige Kombinationen von Titeln 82c0ada3be88e713321ade088bfac5e6 für den allgemeinen Gebrauch

<figure>
    <dt>标题1</dt>
    <dd>标题内容</dd>
</figure>

(7) Definieren Sie kleinen Textd015d241ae6d34c34210679b5204fe85

Dieses Tag ähnelt tatsächlich anderen Fett-Tags

<dialog open>
          <dt>1问题</dt>
          <dd>1答案</dd>
          <dt>2问题</dt>
          <dd>2答案</dd>
</dialog>

(8) Definieren Sie die Details des Elements3c141d9c5fa45f6d36e604fa93408b43

Der darin enthaltene Inhalt kann mit den Titel- und Inhalts-Tags verwendet werden

<menu>
         <li>定义列表</li>
         <li>定义列表</li>
         <li>定义列表</li>
</menu>

Klicken Sie auf die Details, um den Titel und den Inhalt anzuzeigen

(9) Definieren Sie einen Ruby-Kommentar 3f09a7c357b2a9989593d1f345737696

Ich erkenne es nicht. Sie können dies verwenden, um Pinyin für Zeichen zu kommentieren, aber die Kompatibilität ist nicht sehr gut. Sie können es ändern, wenn es soweit ist.

<menu type="context" id="cai">
            <!--label是右键后显示的菜单项，onclick是选中菜单后执行的代码--> 
            <menuitem label="菜单一" onclick="alert(&#39;这是菜单一&#39;)" icon="右键单击显示的图片"></menuitem>
                   
</menu>

(10) Definieren Sie die Messung innerhalb des vordefinierten Bereichs58bcdfed9b88595a2e33978fc991a317

Es gibt mehrere Attributwerte, min="" max="" value="" low="" high="", wobei low und high Bereiche sind, die überschritten werden, werden unterschiedliche Effekte angezeigt

<span contextmenu="cai">单击我试试</span>

Der Wert überschreitet Nachdem der Bereich bestimmt wurde

<hgroup><!--标题组-->
        <h3>标题</h3>
        <h3>标题1</h3>
        <h3>标题2</h3>
        <h3>标题3</h3>
</hgroup>

(11) Die Bezeichnung des Fortschrittsbalkens 71d6e58a5efafcc435fa9e6ae0aacc69

<small>法律条文</small>
<small>联系我们</small>
<small>客户意见</small>

Der Maximalwert ist die Länge des Fortschrittsbalkens und der Wert Der Wert ist der angezeigte Fortschritt. Verwenden Sie ihn, um einen dynamischen Fortschrittsbalken zu erstellen. Der Fortschrittsbalken kann auf diese Weise vervollständigt werden, als nur in js zu schreiben

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmieren lernen! !

Das obige ist der detaillierte Inhalt vonWas sind die neuen Tags in HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!