Heim  >  Artikel  >  Web-Frontend  >  Zusammenfassende Details zu allgemeinen HTML5-Tags

Zusammenfassende Details zu allgemeinen HTML5-Tags

黄舟
黄舟Original
2017-03-20 16:13:362310Durchsuche

1. Hauptstruktur

header 页面头部,不同与
aside 边栏
nav 外部链接集合
section 章节或段落
article 类似文章、摘要或留言POST等形式的记录(一般搭配内嵌头部、尾部、底部结构使用)
hggroup 类似子标题,标题信息、可选标题、TAG标签这样的数据,还是英文更好理解一些,heading of a section
address 联系信息,一般用在article或body锚元素周围
footer 页脚

2. Übersichtstabelle der HTML 5-Element-Tags

文档类型宣告
根元素元素 html
META元素 head、 title、base、link、meta、style
部件元素 body、section、nav、article、aside、h1、 h2、 h3、h4、 h5、 h6、hgroup、header、footer、address
分组内容元素 p、hr、br、pre、blockquote、ol、ul、li、dl、dt、dd、figure、figcaption、p
文本层次语义元素 a、em、strong、small、cite、q、dfn、abbr、time、code、var、samp、kbd、sub、sups、i、b、mark、ruby、rt、rp、bdo、span
编辑元素 ins、del
嵌入内容元素 img、iframe、embed、object、param、video、audio、source、canvasmap、area
表格元素 table、caption、colgroup、col、tbody、thread、tfoot、tr、td、th
表单元素 form、fieldset、legend、label、button、select、datalist、optgroup、option、textarea、keygen、output、progress、meter
互动元素 details、summary、command、menu
脚本元素 script、noscript

3. Allgemeine Attribute und Ereignishandler von HTML 5-Elementen

HTML5元素通用属性表 accesskey、class、contenteditable、contextmenu、dir、 draggable、hidden、id、lang、spellcheck、style、tabindex、title
HTML5元素事件句柄属性 onabort、onblur*、oncanplay、oncanplaythrough、onchange、 onclick、 oncontextmenu、ondblclick、ondrag、ondragend、ondragenter、ondragleave、 ondragover、ondragstart、ondrop、ondurationchange、onemptied、onended、 onerror*、onfocus*、onformchange、onforminput、oninput、oninvalid、onkeydown、 onkeypress、onkeyup、onload*、onloadeddata、onloadedmetadata、onloadstart、 onmousedown、onmousemove、onmouseout、onmouseover、onmouseup、onmousewheel、 onpause、onplay、onplaying、onprogress、onratechange、onreadystatechange、 onscroll、onseeked、onseeking、onselect、onshow、onstalled、onsubmit、 onsuspend、ontimeupdate、onvolumechange、onwaiting。

4. HTML5-Element-Tag-Interpretation

Tag Typ Bedeutung Einführung
Datei-Tags
Root-Datei-Tag Dem Browser mitteilen, dass es sich um eine HTML-Datei handelt
META-Tag
beginnt stellt allgemeine Dateiinformationen bereit
</td> <td>●</td> <td>Titel</td> <td>Definieren Sie den Dateititel, der oben im Browser angezeigt wird</td> </tr> <tr> < ;link><td></td>o<td></td>Externe Ressourcenverbindung<td></td>muss eine rel-Attributbeschreibung tragen<td></td> </tr> <tr>< meta><td></td>o<td></td> <td>Andere</td>META-Daten<td></td>META-Daten, die nicht durch Titel, Basis, Link, Stil und Skriptelemente beschrieben werden können</tr> <tr> <td> </td><style><td></td>●<td><a href="http://www.php.cn/html5/html5-3-mip-normal.html" target="_blank">Eingebettete Dokumentstilinformationen</a></td> <td></td> </tr> <tr> <td>Widget-Markierung</td> <td></td> <td></td><body><td></td>●</tr> <tr>Dokumentkörper beginnt<td colspan="4"><strong>Dokumentinhaltscontainer</strong></td> </tr> <tr> <td> ></td>●<td></td> <td>Navigation</td>Links<td></td>Externer Link oder Dokument-interner Link</tr> <tr> <td></td><article><td> </td>●<td></td>Seitenmodul<td></td>Aufzeichnungen in Form von Artikeln, Zusammenfassungen oder Nachrichten POST usw. </tr> <tr> <td></td><aside><td></td>●<td><a href="http://www.php.cn/code/9303.html" target="_blank">Isolierte Module</a></td> werden im Allgemeinen als Seitenleistenanzeigen, Beschreibungen, <td>Zitate</td>, Navigation, usw. Der Nebeneingrenzungsteil ist im Allgemeinen weniger mit dem Haupttext verknüpft</tr> <tr> <td></td><h1><td></td>●<td></td>Titel-Tag<td></td>Darüber hinaus gibt es h2, h3, h4, h5, h6</tr> <tr> <td></td><hgroup><td></td>●<td></td>Gruppentitel<td><a href="http://www.php.cn/wiki/231.html" target="_blank"> wird verwendet, wenn eine Reihe von Elementen wie h1-h6 zur Unterscheidung von Haupt- und Untertiteln verwendet wird? ?</a></td> </tr> <tr> <td><header></td> <td>●</td> <td>Gruppenbeschreibung oder Gruppennavigation </td> <td> kann auch als Headertitel </td> bezeichnet werden </tr> <tr> <td><footer></td> <td>●</td> <td>Fußzeilentitel</td> <td>Der Bereich bezieht sich auf das nächstgelegene Widget-Element</td> </tr> <tr> <td><Adresse></td> <td>●</td> <td>Adress- oder Kontaktinformationen</td> <td> </td> </tr> <tr> <td><strong>Inhalts-Tags gruppieren </strong></td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td><p></td> <td>●</td> <td> Absatzmarke </td> <td> </td> </tr> <tr> <td><hr></td> <td>o</td> <td>Horizontale Trennlinie</td> <td> </td> </tr> <tr> <td><br></td> <td>o</td> <td>Zeilenumbruch</td> <td> </td> </tr> <tr> <td><pre class="brush:php;toolbar:false"></td> <td>●</td> <td>Vorformatierte Unterblöcke</td> <td> </td> </tr> <tr> <td><blockquote></td> <td>●</td> <td>Blockzitat</td> <td> ></td> </tr><ul><tr> <td>●</td> <td>Projektliste</td> <td> </td> <td></td> </tr><li><tr> <td>●</td> <td>Listenelement</td> <td> </td> <td></td> </tr><dl><tr> <td>●</td> <td>Definitionsliste </td> <td> </td> <td></td> </tr><dt><tr> <td>●</td> <td>Namen definieren</td> <td> </td> <td></td> </tr><dd><tr> <td>●</td> <td>Definitionsbeschreibung</td> <td> </td> <td></td> </tr><figure><tr> <td>●</td> <td>Beschreibung des Stream-Inhaltsblocks</td> <td>Wird in Kombination mit figcaption verwendet</td> <td></td> </tr><figcaption> ;<tr> <td>●</td> <td>Abbildungsinhaltsattribut</td> <td> </td> <td></td> </tr><p><tr> <td>●</td> <td>Positionierungs-Tag</td> <td>Keine Tatsächliche Bedeutung </td> <td></td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td></td> </tr> <tr>Semantik-Tags auf Textebene <td></td> <td></td> <td><a></td> <td>●</td> </tr>Link-Tags<tr> <td colspan="4"> <strong></strong> </td> </tr><em><tr> <td>●</td> <td>Hervorhebungszeichen</td> <td> </td> <td></td> </tr><strong><tr> <td> ●</td> <td>Hervorhebungszeichen</td> <td> </td> <td></td> </tr><small><tr> <td>●</td> <td>Schrift reduziert</td> <td> </td> <td></td> </tr><cite><tr> <td>●</td> <td>Kursivschrift</td> <td> </td> <td></td> </tr><q><tr> <td>●</td> <td>Inhalt in Anführungszeichen</td> <td>Der Originaltext besteht aus Phrasierungsinhalten, es ist nicht klar, wie um es noch zu übersetzen</td> <td></td> </tr>< ;dfn> <tr>Abkürzung<td></td> <td></td> <td></td><time><td></td>●</tr> <tr>Datum Uhrzeit<td></td> <td></td> <td></td><code><td></td>●</tr> <tr>Programmcode<td></td> <td></td> <td></td><var> ;<td></td>●</tr><tr><td>Variable</td><td></td> <td></td><td></td><samp></tr> <tr>● <td></td>Beispiel<td></td> <td></td> <td></td><kbd></tr> <tr>●<td></td>Tastaturwort<td></td> <td><a href="http://www.php.cn/wiki/70.html" target="_blank"></a></td><sub><sups><td></td>●</tr> <tr>Hochgestellt/tiefgestellt<td></td> <td></td> <td></td><i><td></td>●</tr> <tr>Kursivschrift<td></td> <td></td> <td></td><b><td></td>●</tr> <tr>Fettmarkierung<td></td> <td></td> <td></td><markierung> ;<td></td>●</tr><tr>Markieren oder hervorheben <td></td> <td></td><td></td><ruby><td></td>●</tr> <tr>Anmerkungszeichen<td></td> <td> <rt> Tian</rt>Yuan<rt>Yuan</rt></ruby></td> <td></td> <td>< rp></td> </tr>●<tr> <td>Ruby-Unterelement </td> <td> wird im Allgemeinen als RT-Element </td> Kommentar <td> mit </td> <td></td><bdo></tr> <tr>●<td></td> <td></td> <td></td> <td></td><span></tr> <tr>●<td> </td>Benutzerdefiniertes Tag<td></td> <td></td> <td></td> </tr>Bearbeitungsmarkierung<tr> <td></td> <td></td><ins><td> </td>●<td><a href="http://www.php.cn/code/8105.html" target="_blank"> </a></td> </tr> <tr> <td></td><del><td></td>●<td></td> <td></td> </tr> <tr> <td></td> <td>Tag für eingebettete Inhalte </td> <td></td> <td></td><img></tr> <tr>●<td colspan="4"> <strong></strong>Bild</td> Tag </tr> <tr> <td> </td> <td></td><iframe><td></td>●<td></td> </tr>Rahmen<tr>Tag<td></td> <td></td> <td></td><embed><td></td>●</tr> <tr>Tag einbetten<td colspan="4"><strong> </strong></td> </tr> <tr><object><td></td>● <td></td> <td>Objekt<a href="http://www.php.cn/css/css-rwd-images.html" target="_blank">Tags </a> </td> <td> </td> </tr> <tr> <td><param></td> <td>●</td> <td>Parameter-Tags</td> <td> </td> </tr> < ;audio><tr> <td>●</td> <td></td>Audio<td> tag<a href="http://www.php.cn/code/6707.html" target="_blank"></a> </td> <td></td> </tr><source><tr> <td>●</td> <td>Quellen-Tag</td> <td> <a href="http://www.php.cn/code/6093.html" target="_blank"></a> </td> <td><canvas></td> </tr>●<tr> <td>Kartografie-Tag</td> <td> </td> <td></td> <td><map></td> </tr>●<tr> <td></td>Karte<td>Markieren</td> <td> </td> <td></td> </tr><area><tr> <td>●</td> <td>Bereichsmarkierung</td> <td> <a href="http://www.php.cn/code/7891.html" target="_blank"></a> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td></td> <td></td>Tabellenmarke</tr> <tr> <td></td> <td><Tabelle> ; </td><td>●</td><td>Tabellen-Tag</td></tr>Legen Sie die Parameter der Tabelle fest<tr><td colspan="4"><strong></strong><caption></td> </tr> ●<tr> <td>Tabellentitel</td> <td>In ein Dutzend Spalten unterteilt, um den Tabellentitel auszufüllen</td> <td></td> <td><colgroup></td> </tr>●<tr> <td> </td> <td> </td> <td></td> <td><col></td> </tr>●<tr> <td> </td> <td> </td> <td></td> <td><tbody></td> </tr>●<tr> <td> </td> <td> </td> <td></td> <td><thread></td> </tr>●<tr> <td> </td> <td> </td> <td></td> <td><tfoot> > </td> </tr> <tr> <td><tr></td> <td>●</td> <td>Tabellenspalten</td> <td>Legen Sie die Spalten der Tabelle fest</td> </tr> < ;th><tr> <td>●</td> <td> Tabellenkopf</td> <td> entspricht <TD>, aber die Textschrift darin wird fetter sein</td> <td></td> </tr> <tr>Formular-Tag<td></td> <td> </td> <td><form></td> <td>●</td> </tr>Formular-Tag<tr> <td>bestimmt den Formular-Betriebsmodus</td> <td></td> <td>< fieldset></td> <td>●</td> </tr> <tr> <td> </td> <td></td> <td> <legend></td> <td>●</td> </tr> <tr><td colspan="4"> <strong></strong> </td></tr><input><tr> <td>●</td> <td>Beschriftung eingeben</td> <td> </td> <td></td> </tr><label><tr> <td>●</td> <td> </td> <td> </td> <td></td> </tr><button><tr> <td> ●</td> <td></td>Schaltfläche<td></td> <td> </td> </tr> <tr> <td>< ;select> </td> <td></td> <td></td> <td></td><optgroup></tr> <tr>●<td></td> <td></td> <td></td> <td></td><option></tr> <tr>●<td></td>Option<td></td> <td><a href="http://www.php.cn/code/5991.html" target="_blank"></a></td><textarea><td></td>●</tr> <tr> <td></td> <td></td> <td></td>< keygen> <td></td> </tr> <tr><Ausgabe><td></td>●<td></td> <td></td> <td></td> </tr> <tr><progress> ;<td></td>●<td></td> <td></td> <td></td></tr><tr>< ;meter><td></td>●<td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td> </td>Interaktive Elemente<td></td> <td></td> <td></td><details></tr> <tr> ●<td></td> <td></td> <td></td> <td></td><summary></tr> <tr>●<td></td> <td></td> <td></td> <td></td><command></tr> <tr>●<td></td> <td></td> <td></td> <td></td><menu> > </tr> <tr> <td></td> <td>Andere Tags</td> <td></td> <td></td><script></tr> <tr>●<td colspan="4"><p> <strong></strong> </p></td> </tr> <tr><noscript><td></td>●<td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td>Bemerkungen: <td></td> <td> 1 . ● gibt an, dass die Markierung eine Eindämmungsmarkierung ist und mit der Markierung </mark> enden muss. </td> <td>2. o bedeutet, dass das Tag ein leeres Tag ist und kein End-Tag erfordert. </td> </tr> </tbody></table><p>Das obige ist der detaillierte Inhalt vonZusammenfassende Details zu allgemeinen HTML5-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme:</span><div>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</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel:<a class="dBlack" title="HTML5-WebWorkers-Beispielcodefreigabe, um zu verhindern, dass der Browser die Animation anhält" href="https://m.php.cn/de/faq/357701.html">HTML5-WebWorkers-Beispielcodefreigabe, um zu verhindern, dass der Browser die Animation anhält</a></span><span>Nächster Artikel:<a class="dBlack" title="HTML5-WebWorkers-Beispielcodefreigabe, um zu verhindern, dass der Browser die Animation anhält" href="https://m.php.cn/de/faq/357705.html">HTML5-WebWorkers-Beispielcodefreigabe, um zu verhindern, dass der Browser die Animation anhält</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="https://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/de/faq/348281.html" title="Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite" class="aBlack">Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348372.html" title="Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)" class="aBlack">Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348373.html" title="Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9" class="aBlack">Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348374.html" title="Reguläre Ausdrücke und neue HTML5-Elemente" class="aBlack">Reguläre Ausdrücke und neue HTML5-Elemente</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/348469.html" title="So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen" class="aBlack">So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!</p></div><div class="footermid"><a href="https://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://m.php.cn/de/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>