Comprenez HTML5 en 20 minutes et découvrez les nouvelles fonctionnalités du H5

Qu'est-ce que le HTML ?

HTML (Hyper Text Markup Language). Langage de balisage hypertexte. Le texte HTML est un texte descriptif composé de commandes HTML. Les commandes HTML peuvent décrire du texte, des graphiques, des animations, des sons, des tableaux, des liens, etc. La structure du HTML comprend deux parties : l'en-tête et le corps. L'en-tête décrit les informations requises par le navigateur et le corps contient le contenu spécifique à expliquer. (Tutoriel vidéo HTML)

Qu'est-ce que HTML5 ?

L'effet que nous appelons HTML5 n'est pas une version améliorée isolée de HTML, mais la performance combinée de HTML CSS3 JS. HTML n'est qu'un langage de balisage, mais il a été optimisé sémantiquement, a ajouté des balises considérées comme plus scientifiques et a supprimé certaines balises, mais les balises sont des balises et les comportements sont des comportements. Il n'y a pas de CSS3, pas de JS et HTML l'est. non C'est toujours juste du HTML. (Tutoriel vidéo HTML5)

En termes simples, HTML5 est plus sémantique et standardisé que les balises des versions HTML précédentes, et de nouvelles balises ont été ajoutées. Veuillez regarder l'image ci-dessous :

Il s'agit du formulaire HTML de la page Web précédente. Le nouveau HTML ressemble à ceci :

Évidemment, le HTML5 n'est plus dominé par le DIV comme avant, et de nouvelles balises sémantiques ont été ajoutées. Cela peut faciliter le travail d'équipe pour les ingénieurs front-end car il existe une nouvelle norme unifiée.

Pour mettre les choses en perspective, c'est un entrepôt de grand magasin. L'administrateur Lao Wang vient nettoyer l'entrepôt, met toutes sortes de vêtements, chapeaux, chaussures et grands magasins dans différentes boîtes, met des étiquettes sur les boîtes. et écrit son nom. Pensez à un nom approprié. Nous pouvons comprendre ces boîtes comme des DIV, et les noms sur les étiquettes sont la classe et l'ID.

D'accord, voici la question. Lao Wang est rentré du travail et Lao Li est venu prendre le relais. Lao Li a commencé à jurer après avoir vu ce que faisait Lao Wang, parce qu'il ne comprenait pas les étiquettes que Lao Wang avait écrites sur les boîtes, ce qui l'obligeait à les ouvrir chacune. boîte une par une pour la regarder. Qu'est-ce qu'il y a exactement à l'intérieur ? Cela réduit considérablement l'efficacité du travail.

Le HTML5 actuel consiste à remettre directement les cases marquées à Lao Wang. Il peut mettre différents vêtements, chapeaux et chaussures selon différentes boîtes, de sorte que lorsque Lao Zhang It. sera beaucoup plus pratique lorsque je viendrai reprendre mon quart de travail. Et plus encore, HTML5 fournit davantage de balises afin que Lao Zhang et Lao Wang puissent effectuer indépendamment des travaux auparavant complexes sans avoir à déranger d'autres collègues.

Que contient spécifiquement HTML5 ?

Plus de balises sémantiques (les développeurs peuvent être plus élégants et les navigateurs peuvent mieux comprendre)

Recherche dans les moteurs de recherche, pourquoi recherche-t-il le titre et non l'"Introduction" ? à cause de la différence de structure. Cependant, les habitudes de dénomination des classes de chacun dans la structure seront différentes et elles ne peuvent pas être standardisées, il est donc préférable de créer de nouvelles balises.

Dans certains navigateurs de versions inférieures, la balise h5 est incompatible et sera considérée comme p, ce qui n'affectera pas nos fonctions. Vous pouvez également ajouter une nouvelle ligne de code document.createElement("header") dans le script, mais comme de nombreuses balises sont utilisées, vous devez écrire autant de lignes de document.createElement(""), il y a donc une troisième- plug-in de fête html5shiv.js

Utilisation :

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

Remarque : L'appel du fichier Html5.js dans la page doit être ajouté dans l'élément head du page, car le navigateur IE doit analyser l'élément avant que cet élément ne soit connu, ce fichier js ne peut donc pas être appelé en bas de la page.

Balise d'application

DataList

progression

Attributs

Relation de lien Description

Quelle est la relation entre le lieu lié et le document actuel ?

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

rel apparaît également à d'autres endroits,

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

le lien lui-même ne demandera pas le fichier, Au lieu de cela, rel="stylesheet" demandera le fichier

Actuellement peu populaire en Chine

Les balises de données structurelles

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

peuvent faciliter la concentration sur les moteurs de recherche Le craquage

est avancé, mais seul Google prend en charge

ARIA

Applications Internet riches accessibles

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

Pourquoi faut-il l'étiqueter ?

est destiné aux moteurs de recherche à comprendre

Attributs personnalisés

C'est-à-dire que les attributs comme data-*, ils n'ont aucune fonctionnalité, ils sont juste pour Enregistrez les données fortement liées des nœuds dom.

<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前端开发快速入门