Heim > Artikel > Web-Frontend > Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (3) – Vergleich zwischen HTML5 und HTML4

Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (3) – Vergleich zwischen HTML5 und HTML4

黄舟Original: 2017-01-22 10:29:091191Durchsuche

Im vorherigen Abschnitt haben wir die neuen Funktionen von HTML5 vorgestellt, die Verwendung neuer Tags, intelligentes Formulardesign, die Einführung von Multimedia-Objekten, Canvas-Objekte für Ihre Leinwand, erweiterte Grafik-Tags, geografische Anwendungen in HTML5, unabhängige Datenspeicherung , und neue Netzwerkverbindungen.

HTML 5 ist der größte Fortschritt bei Webentwicklungsstandards im letzten Jahrzehnt. Im Gegensatz zu früheren Versionen wird HTML 5 nicht nur zur Darstellung von Webinhalten verwendet. Seine neue Mission besteht darin, das Web zu einer ausgereiften Anwendungsplattform zu machen. Auf der HTML 5-Plattform sind Video, Audio, Bilder, Animationen und computerbasierte Interaktionen standardisiert . (HTML5 hat auch ein eigenes Logo.) Das Erlernen von HTML5 erfordert die Beherrschung der folgenden Wissensaspekte.

1. Grundlegende HTML-Kenntnisse

2. CSS-Stilkenntnisse

Viele Freunde, die zuvor HTML 4.0 gelernt haben, verstehen mich vielleicht Fühlen Sie sich sehr verwirrt. Was ist der Unterschied zwischen HTML 4.0 und HTML5? Der größte Unterschied zwischen HTML5 und HTML4 besteht beispielsweise darin, dass HTML5 mehr auf Inhalt und Struktur als auf Leistung achtet :

Wie die vielen oben genannten Tags in HTML5 können wir stattdessen das dc6dce4a544fdca2df29d5ac0ea9906b-Tag im vorherigen HTML4 verwenden. Warum gibt es also so viele ungenutzte Tags, was tatsächlich die Anzahl der Tags erhöht? Wie schwer ist es, sich zu erinnern? Tatsächlich ist dies nicht der Fall. Diese Tags mit spezifischen Namen erleichtern die Unterscheidung ihrer jeweiligen Funktionen. Sie können beispielsweise sowohl in PC-Browsern als auch in mobilen Browsern erkannt und angezeigt werden Layout.

<body>   
  
<header>  
<hgroup>导航相关数据</hgroup>  
</header>   
  
<nav>菜单</nav>   
  
<article>  
<h1>标题:HTML5专题</h1>  
发布日期:<time>19:00</time>  
<time datetime="2013-2-14">情人节</time>  
<p>测试相关内容</p>  
</article>  
  
<footer>   
<address>CSDN-大碗干拌的博客</address>  
</footer>   
  
</body>

Ein weiterer Unterschied besteht darin, dass HTML5 mehr Deklarationen und Tags vereinfacht, außerdem detaillierte Bestimmungen zur Kompatibilität getroffen, einige Elemente abgeschafft und einige Elemente hinzugefügt hat, beispielsweise die folgende Deklaration:

HTML4-Deklaration:

HTML5-Deklaration:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0   
Transitonal//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t......  
<html xmlns="http://www.w3.org/1999/xhtml">  
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

beim Einführen von JavaScript- oder CSS-Dateien. Derzeit ist die Schreibmethode in HTML4 wie folgt :

<!DOCTYPE html>  
<meta charset=utf-8/>

wird in HTML5 noch einfacher:

<script src="js/juery-1.6.2.js" type="text/javascript"></script>

Darüber hinaus akzeptiert HTML5 eine lockerere Syntax, wie zum Beispiel ae55229155ae708652405bb263ea55c1Verwenden Sie gemischte Groß- und Kleinschreibung.

<script src="js/juery-1.6.2.js"></script>

Wie oben zu sehen ist, vereinfacht HTML5 Tags basierend auf der Entwicklung früherer Browser. Darüber hinaus werden Tags in HTML5 auch grammatikalisch klassifiziert:

(1) Tags, die keine Endzeichen zulassen: Area, Basebr, Col, Command, Embed, HR, IMG, Input, Keygen, Link, Meta, param, source, Track, wbr

(2) Tags mit Terminatoren können weggelassen werden: li, dt, dd, p, rt, optgroup, option, colgroup, thread, tbody, tr, td, th

(3) Tags, die komplett weggelassen werden können: html, head, body, colgroup, tbody

Auf Basis von html4 fügt html5 auch viele neue Tags hinzu:

Der zum Erstellen der Kopfnavigation der Webseite verwendete Code lautet wie folgt:

<article>  标记定义一篇文章  
<aside>  标记定义页面内容部分的侧边栏  
<audio>  标记定义音频内容  
<canvas>   标记定义图片  
<command>  标记定义一个命令按钮  
<datalist>  标记定义一个下拉列表  
<details>   标记定义一个元素的详细内容  
<dialog>   标记定义一个对话框(会话框)  
<embed>   标记定义外部的可交互的内容或插件  
<figure>   标记定义一组媒体内容以及它们的标题<footer> 标记定义一个页面或一个区域的底部  
<header>   标记定义一个页面或一个区域的头部  
<hgroup>   标记定义文件中一个区块的相关信息  
<keygen>   标记定义表单里一个生成的键值  
<mark>   标记定义有标记的文本  
<meter>   标记定义 measurementwithin apredefinedrange  
<nav>   标记定义导航链接  
<output>   标记定义一些输出类型  
<progress>   标记定义任务的过程  
<rp>   标记是用在Rubyannotations 告诉那些不支持Ruby元素的浏览器如何去显示  
<rt>   标记定义对rubyannotations的解释  
<ruby>   标记定义 rubyannotations.  
<section>   标记定义一个区域  
<source>   标记定义媒体资源  
<time>   标记定义一个日期/时间  
<video>   标记定义一个视频

Die Implementierung mit HTML5 ist wie folgt:

<div class="header">  
    <div class="navigation">  
        <ul class="nav_list">  
            <li><a href="#" title="Home">Home</li>  
            <li><a href="#" title="About">About</li>  
        </ul>  
    </div><!--导航标签结束-->  
</div><!--头部结束-->

Einige Freunde fragen vielleicht: Gibt es irgendwelche Vorteile beim Schreiben? Verwenden Sie in HTML5 unabhängige Tags, um bestimmte Funktionen darzustellen, z. B. 1aa9e5d373740b65a0cc8f0a02150c53 für Kopfzeilen und c787b9a589a3ece771e842a6176cf8e9. Auf diese Weise wird der Code sehr semantisch und leicht verständlich (keine Notwendigkeit, zusätzliche Kommentare wie oben hinzuzufügen). . Für Suchmaschinen ist es einfacher zu finden.

<header>  
    <nav>  
        <ul id="nav-list">  
            <li><a href="#" title="Home">Home</a></li>  
            <li><a href="#" title="About">About</a></li>  
        </ul>  
    </nav>  
</header>

Das Obige ist Xiaoqiangs mobiler HTML5-Entwicklungsweg (3) – der Vergleich zwischen HTML5 und HTML4. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

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：Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (2) – neue Funktionen von HTML5Nächster Artikel：Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (2) – neue Funktionen von HTML5

In Verbindung stehende Artikel

Mehr sehen