Verstehen Sie HTML5 in 20 Minuten und sehen Sie, welche neuen Funktionen H5 bietet

Was ist HTML?

HTML (Hyper Text Mark-up Language). Hypertext-Auszeichnungssprache. HTML-Text ist beschreibender Text, der aus HTML-Befehlen besteht. HTML-Befehle können Text, Grafiken, Animationen, Sounds, Tabellen, Links usw. beschreiben. Die Struktur von HTML besteht aus zwei Teilen: Kopf und Körper. Der Kopf beschreibt die vom Browser benötigten Informationen und der Körper enthält den spezifischen Inhalt, der erklärt werden soll. (HTML-Video-Tutorial)

Was ist HTML5?

Der Effekt, den wir HTML5 nennen, ist keine isolierte aktualisierte Version von HTML, sondern die kombinierte Leistung von HTML+CSS3+JS. HTML ist nur eine Auszeichnungssprache, aber sie wurde semantisch optimiert, es wurden einige Tags hinzugefügt, die als wissenschaftlicher gelten, und auch einige Tags wurden entfernt, aber Tags sind Tags und Verhalten ist Verhalten Ohne CSS3, ohne JS, ist HTML das nicht immer nur HTML. (HTML5-Video-Tutorial)

Einfach ausgedrückt ist HTML5 semantischer und standardisierter als die Tags früherer HTML-Versionen, und es wurden einige neue Tags hinzugefügt. Bitte schauen Sie sich das Bild unten an:

Dies ist das HTML-Formular der vorherigen Webseite. Das neue HTML sieht so aus:

Offensichtlich wird HTML5 nicht mehr wie zuvor von DIV dominiert und es wurden neue semantische Tags hinzugefügt. Dies erleichtert möglicherweise die Teamarbeit für Front-End-Ingenieure, da es einen einheitlichen neuen Standard gibt.

Um es ins rechte Licht zu rücken: Es handelt sich um ein Warenhauslager. Der Verwalter Lao Wang kommt, um das Lager aufzuräumen, packt alle Arten von Kleidung, Hüten, Schuhen und Kaufhäusern in verschiedene Kisten und klebt Etiketten auf die Kisten und schreibt seinen Namen. Überlege dir einen passenden Namen. Wir können diese Felder als DIVs verstehen und die Namen auf den Etiketten sind Klasse und ID.

Okay, hier kommt die Frage. Lao Wang kam von der Arbeit nach Hause und Lao Li begann zu fluchen, nachdem er gesehen hatte, was Lao Wang tat, weil er die Etiketten, die Lao Wang auf die Schachteln schrieb, nicht verstehen konnte, was dazu führte, dass er jede einzelne öffnen musste Schauen Sie sich die einzelnen Kartons genau an. Dies verringert die Arbeitseffizienz erheblich.

Jetzt gibt HTML5 die markierte Box einfach direkt an Lao Wang. Er kann verschiedene Kleidungsstücke, Hüte und Schuhe in verschiedene Boxen legen, sodass es bei Lao Zhang viel sein wird bequemer, wenn ich meine Schicht übernehme. Darüber hinaus bietet HTML5 mehr Tags, sodass Lao Zhang und Lao Wang einige zuvor komplexe Arbeiten unabhängig voneinander erledigen können, ohne andere Kollegen belästigen zu müssen.

Was genau hat HTML5?

Mehr semantische Tags (Entwickler können eleganter sein und Browser können es besser verstehen)

Suchmaschinensuche, warum wird nach dem Titel und nicht nach „Einleitung“ gesucht? wegen der unterschiedlichen Struktur. Die Benennungsgewohnheiten jeder Klasse sind jedoch unterschiedlich und können nicht standardisiert werden. Daher ist es besser, neue Tags zu erstellen.

In einigen Browsern niedrigerer Versionen ist das h5-Tag inkompatibel und wird als p betrachtet, was keine Auswirkungen auf unsere Funktionen hat. Sie können dem Skript auch eine neue Codezeile document.createElement("header") hinzufügen, aber da viele Tags verwendet werden, müssen Sie ebenso viele Zeilen document.createElement("") schreiben, also gibt es eine dritte Zeile. Party-Plug-in html5shiv.js

Verwendung:

<!--[if lt IE 9]><script type="text/javascript"  src="http://www.ijquery.cn/js/html5shiv.js"></script><![endif]-->

Hinweis: Der Aufruf der Html5.js-Datei auf der Seite muss innerhalb des Head-Elements des hinzugefügt werden Seite, da der IE-Browser das Element analysieren muss, bevor dieses Element bekannt ist, sodass diese js-Datei nicht am Ende der Seite aufgerufen werden kann.

Anwendungs-Tag

Datenliste

Fortschritt

Attribute

Link-Beziehungsbeschreibung

Welche Beziehung besteht zwischen dem verlinkten Ort und dem aktuellen Dokument?

<a href="01-sementic-tags.html" rel="pre"></a><a href="02-application-tags.html" rel="next"></a>

rel erscheint auch an anderen Orten,

<link rel="stylesheet" href="css.css">

Link selbst wird nicht angefordert die Datei, Stattdessen wird rel="stylesheet" die Datei anfordern

Derzeit in China nicht beliebt

Strukturdaten-Markup

<p itemscope itemtype="www.baidu.com">        <p itemprop="主人">主人</p>
        <p itemprop="小狗">小狗一</p>
        <p itemprop="小狗">小狗二</p>    </p>

kann Suchmaschinenfokus erleichtern Cracking

ist fortgeschritten, aber nur Google unterstützt

ARIA

Accessible Rich Internet Applications

<label for="myinput">请输入您的名字</label>
<input type="text" id="myinput">

Warum muss es gekennzeichnet werden?

ist für Suchmaschinen verständlich.

Benutzerdefinierte Attribute

Das heißt, Attribute wie data-* haben keine Funktionalität, sie dienen nur dazu Speichern Sie stark verwandte Daten von Dom-Knoten.

<ul id="list"></ul>
    <p id="info"></p>
    <script>        var data={            01:{
                name:"张三",
                age:18
            },            02:{
                name:"李四",
                age:19
            },            03:{
                name:"王五",
                age:20
            }
        };        for (var X in data) {            var item=data[X];            var oli=document.createElement("li");            var olist=document.getElementById("list");
            oli.appendChild(document.createTextNode(item.name));
            olist.appendChild(oli);
            oli.setAttribute("data-name",item.name);
            oli.setAttribute("data-age",item.age );
            oli.addEventListener("click", function () {                var name=this.getAttribute("data-name");                var age=this.getAttribute("data-age");
                alert(age+name)
            })
        }
    </script>

上面的代码用 setattribue 方法来定义了自定义属性，然后用getattribute又获取到了自定义属性。js也针对自定义属性出了新的api,也就是 dataset['string'] ,使用这个api可以代替 getAttribute 的方法：

oli.addEventListener("click",function(){    console.log(this.dataset["name"]);
})

智能表单

新的表单类型

<input type="date">
<input type="color">
<input type="range">

但是尽量不要在pc端使用，用户体验较差，不能自定义样式。主要适配在移动端。

虚拟键盘适配

<input type="text" name="txt_text" id="txt_text">
<input type="number" name="txt_number" id="txt_number">
<input type="email" name="txt_email" id="txt_email">
<input type="tel" name="txt_tel" id="txt_tel">
<input type="url" name="txt_url" id="txt_url">

上面的代码在pc端上没有用处，主要是用在移动端可以根据不同的input的 type 来唤出不同的键盘。

虽然 input type="email" 看似可以验证表单，但是真是太弱了，只是验证有没有 @ ，真的要验证的话，还是要自己写正则表达式

页面多媒体

音频

<audio src="A Moment of Reflection.mp3" controls="controls"></audio>

但是默认的播放器太丑了，我们一般是自己写一个button，然后为这个button添加一个事件：

<script>        var btn=document.getElementById("btn");        var btn1=document.getElementById("btn1");        var audio=document.getElementsByTagName("audio")[0];
        btn.addEventListener("click", function () {
            audio.play();
        })
        btn1.addEventListener("click",function (argument) {
            audio.pause();
        })
</script>

视频

<video src="A Moment of Reflection.mp4" controls="controls"></video>

但是我们一般不是这样用的，因为视频有版权，有些浏览器只能支持一两个，我们一般是source：

<video controls="controls"><source src="下午03-网页多媒体.web.mp4"><source src="下午03-网页多媒体.web.ogg"><p>您的浏览器不支持</p></video>

还有一个插件，是可以帮我们做兼容的，是html5media.info/的组件，ie7以上都可以兼容。

以下是多媒体的属性;

[image_1b2cut34s130mfufars1a6m6va9.png-66.1kB][1]

字幕

兼容性不是很好，现在还没有人用

canvas

2d

3d

svg

优势：体积小，质量高，效果好，可控程度高。

相关推荐：

成为一名优秀的前端工程师需要学什么？

web前端学习路线:WEB前端开发快速入门