Heim > Artikel > Web-Frontend > Ein Beispiel für den Unterschied zwischen HTML5-Tags und HTML4-Tags

Ein Beispiel für den Unterschied zwischen HTML5-Tags und HTML4-Tags

PHP中文网Original: 2017-03-25 14:36:431724Durchsuche

1. Konzeptänderungen:
HTML5 konzentriert sich auf Inhalt und Struktur, aber nicht auf Leistung
1aa9e5d373740b65a0cc8f0a02150c53
d8eccd9ed644b68a6460a2bb84548c82Navigationsbezogene Daten2b9b65466aa358c6a3083474850bf7b3
c787b9a589a3ece771e842a6176cf8e9Menu44f9630a3d507ae7532760da37622b0f
23c3de37f2f9ebcb477c4a90aac6fffd
4a249f0d628e2318394fd9b75b4636b1

2 . Deklarationen und Tags: HTML5 hat weitere Deklarationen und Tags vereinfacht, außerdem detaillierte Bestimmungen zur Kompatibilität getroffen, einige Elemente abgeschafft und einige Elemente hinzugefügt.
Einführung in die HTML5-Tag-Syntax und neue Tags

3. Grammatik-Tags: (1) Tags, die keine Endzeichen schreiben dürfen: Bereich, Basebr, Col, Befehl, Einbetten, hr, img, input, keygen, link, meta, param, source, Track, wbr
(2) Das Endzeichen-Tag kann weggelassen werden: li, dt, dd, p, rt, optgroup, option, Colgroup, thread , tbody, tr, td, th
(3) Tags, die vollständig weggelassen werden können: html, head, body, colgroup, tbody

4. Neue Tags: 721aa4b4015095b63b5635c7441e1bcb Markup definiert die Seitenleiste des Seiteninhalts
5ba626b379994d53f7acf72a64f9b697 Markup definiert ein Bild
e2b9f03cad787b9644e1f51fd23b7dac Markup Definieren Sie eine Befehlsschaltfläche
fc86e7b705049fc9d4fccc89a2e80ee3-Tag definiert eine Dropdown-Liste
a5e9d42b316b6d06c62de0deffc36939-Tag definiert die Details eines Elements
a38fd2622755924ad24c0fc5f0b4d412-Tag definiert ein Dialogfeld (Konversationsfeld)
< ;embed>-Tag definiert externe interaktive Inhalte oder Plug-ins
24203f2f45e6606542ba09fd2181843a-Tag definiert eine Reihe von Medieninhalten und deren Kopfzeilen c37f8231a37e88427e62669260f0074d definiert den unteren Rand einer Seite oder eines Bereichs
48522e8b0d91f36e26c4513bf1195c6d Mark definiert den Header einer Seite oder eines Bereichs
d8eccd9ed644b68a6460a2bb84548c82 Zugehörige Informationen eines Blocks in der Markendefinitionsdatei
aa983b9eb8086376f1f6481364a02e5a mark> Markierungsdefinitionstext mit Markierung
49c6123c49c6be380cb91db06cd3bfa9 Markierungsdefinitions-Navigationslink
be6d67dae90cc1ad6469079e163d0939 Markierungsdefinition Aufgabe Der Prozess des
515718f19dfe6612658be14be18aa0ec-Tags wird in Rubyannotations verwendet, um Browsern mitzuteilen, die keine Ruby-Elemente unterstützen, wie
7240f116d85a7ee375466871bc33670a-Tags Definitionen von Rubyannotations anzeigen sollen.
2f8332c8dcfd5c7dec030a070bf652c3-Tag definiert eine Region
e02da388656c3265154666b7c71a8ddc-Tag definiert eine Medienressource
46dd80ba616c57a652514755c74c4211-Tag definiert ein Video

5.HTML5 einfaches Beispiel

Verwandte Artikel:
Definition und Vorschriften jedes Tags in HTML5: Header

<!DOCTYPE html> 
<head> 
<meta charset=utf-8> 
<title>PHP100中文网HTML5专题</title> 
<style type="text/css" rel="stylesheet"> 
header,nav,article,footer {border:solid 1px #666;padding:5px} 
header{width:500px} 
nav{float:left;width:60px;height:200px} 
article{float:left;width:428px;height:200px} 
footer{clear:both;width:500px} 
</style> 
<script type="text/javascript"> 
document.createElement(&#39;article&#39;); 
document.createElement(&#39;nav&#39;); 
document.createElement(&#39;header&#39;); 
</script> 
</head> 
<body> 
<header> 
<hgroup>导航相关数据</hgroup> 
</header> 
<nav>菜单</nav> 
<article> 
<h1>HTML5专题视频教程</h1> 
发布日期:<time>09:00</time> 
<time datetime="2013-2-10">春节</time> 
<p>测试相关内容</p> 
</article> 
<footer> 
<address>地址</address> 
</footer> 
</body> 
</html>

Ausführliche Erklärung zur Verwendung von HTML5-Tags

Umfassende Liste von HTML5-Tags

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

Vorheriger Artikel：Beispiel für die Verwendung von HTML5-Textschatteneffekt-Textschatten_HTML5-Tutorial-FähigkeitenNächster Artikel：Beispiel für die Verwendung von HTML5-Textschatteneffekt-Textschatten_HTML5-Tutorial-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen