Résumer les nouveautés de html5 (indispensable pour les entretiens)-Tutoriel H5-php.cn

Le HTML5 doit être familier à tout le monde, car trop de médias parlent de cette technologie. Ainsi, lorsque nous passons un entretien pour un travail frontal, il n'est pas surprenant de rencontrer des questions liées au HTML5. Vous voulez réussir l'entretien frontal en douceur ? L'article suivant partagera avec vous des informations pertinentes sur les nouvelles fonctionnalités de HTML5 essentielles pour les entretiens front-end. Les amis dans le besoin peuvent s'y référer.

Avant-propos

Qu'est-ce que HTML5 : HTML5 est la prochaine génération de HTML et deviendra le nouveau standard pour HTML, XHTML et HTML DOM. Aujourd'hui, parlons d'une question qui est posée presque à chaque fois lors d'un entretien frontal, à savoir les nouvelles fonctionnalités de HTML5. C’est la connaissance de base qu’il faut maîtriser pour apprendre le front-end.

Nouveaux éléments

html5 a ajouté de nouveaux éléments de balise avec une meilleure sémantique.

Élément structurel

élément article, qui représente un élément de contenu indépendant sur la page qui n'est pas lié à le contexte, comme un blog ou un article dans .
L'élément de côté représente le contenu autre que le contenu de l'article et les informations auxiliaires. L'élément
header représente un bloc de contenu dans la page ou l'en-tête de la page entière.
L'élément hgroup est utilisé pour regrouper le titre d'un bloc ou la page entière dans la page. L'élément
footer représente le pied de page d'un bloc de contenu dans la page ou dans la page entière.
élément figure, qui représente le regroupement des contenus multimédias et leurs titres. L'élément
section représente un bloc de contenu sur la page, tel qu'un chapitre.
L'élément nav représente le lien de navigation dans la page.

Autres éléments

élément vidéo, utilisé pour définir des vidéos.
élément audio, utilisé pour définir l'audio. L'élément
canvas est utilisé pour afficher des graphiques. L'élément lui-même n'a aucun comportement et fournit uniquement un canevas.
l'élément embed est utilisé pour insérer divers multimédias, le format peut être Midi, Wav, AIFF, AU, MP3, etc.
élément de marque, utilisé pour afficher le texte en surbrillance.
élément de progression, utilisé pour afficher la progression de tout type de tâche.
élément mètre, représentant des poids et mesures, définissant une mesure dans une plage prédéfinie.
élément time, utilisé pour afficher la date ou l'heure.
élément de commande, représentant un bouton de commande. L'élément
détails est utilisé pour afficher les informations détaillées dont les utilisateurs ont besoin et peuvent obtenir.
élément de résumé, utilisé pour définir le titre visible de l'élément de détails. L'élément
datalist est utilisé pour afficher une liste de données facultative. Utilisé en conjonction avec l'élément d'entrée, une liste déroulante de valeurs d'entrée peut être créée. L'élément
datagrid est également utilisé pour afficher des listes de données facultatives sous la forme d'une liste arborescente. L'élément
keygen représente la génération d'une clé.
élément de sortie, représentant différents types de sortie.
l'élément source définit les ressources multimédias pour les éléments multimédias.
élément de menu, représentant une liste de menus. L'élément
ruby représente les commentaires ruby et l'élément rt représente l'interprétation ou la prononciation des caractères. L'élément rp est utilisé dans les commentaires Ruby pour définir ce qui est affiché par les navigateurs qui ne prennent pas en charge les éléments Ruby.
élément wbr, représentant un saut de ligne doux. La différence avec l'élément br est que l'élément br signifie qu'un saut de ligne doit être effectué ici, tandis que l'élément wbr signifie que la largeur de la fenêtre du navigateur ou de l'élément parent est suffisamment large. Aucun retour à la ligne n'est effectué et lorsque la largeur n'est pas suffisante, le retour à la ligne est automatiquement effectué ici.
élément bdi, définit la direction du texte, le rendant indépendant du réglage de la direction du texte environnant.
élément de dialogue, représentant une boîte de dialogue ou une fenêtre.

Éléments obsolètes

Certains éléments purement expressifs ont été obsolètes en HTML5 et ne sont pris en charge que par certains navigateurs. sont également des éléments qui peuvent avoir un impact négatif sur la convivialité.

Éléments purement performants

Les éléments purement performants sont les éléments qui peuvent être remplacés par CSS. Les fonctions d'éléments tels que basefont, big, center, font, s, strike, tt et u sont uniquement destinées à l'affichage des pages. Les partisans de HTML5 placent les fonctions d'affichage des pages dans la feuille de style CSS pour un traitement unifié, donc ces éléments sont désactivés et remplacés par. style css.

Éléments qui ont un impact négatif sur la convivialité

Pour les éléments frameset, les éléments frame et les éléments noframes, les frames frame ont un impact négatif sur le Web convivialité de la page, frame frame n'est plus pris en charge en HTML5, seul le cadre iframe est pris en charge En HTML5, les trois éléments frameset, frame et noframes sont supprimés en même temps.

Éléments pris en charge uniquement par certains navigateurs

Pour les éléments tels que applet, bgsound, clignotant et marquee, ils ne sont pris en charge que par certains navigateurs, notamment l'élément bgsound et l'élément marquee, qui ne sont pris en charge que par IE, ils sont donc supprimés en HTML5. L'élément applet peut être remplacé par un élément embed ou un élément object, l'élément bgsound peut être remplacé par un élément audio et le chapiteau peut être remplacé par une programmation JavaScript.

Nouvelle API

API Canvas

Ci-dessus L'élément canvas mentionné peut fournir un canevas pour que la page affiche des graphiques. Combiné avec l'API Canvas, divers graphiques, graphiques, images et animations peuvent être générés et affichés dynamiquement sur ce canevas. Canvas est essentiellement un canevas bitmap et ne peut pas être mis à l'échelle. Les objets dessinés n'appartiennent pas à la structure DOM de la page ni à aucun espace de noms. Il n'est pas nécessaire de stocker chaque primitive en tant qu'objet et les performances d'exécution sont très bonnes.

Pour utiliser l'API Canvas pour dessiner, vous devez d'abord obtenir le contexte de l'élément canvas, puis utiliser les différentes fonctions de dessin encapsulées dans le contexte pour dessiner.

<canvas id="canvas">替代内容</canvas>
<script>
    var canvas = document.getElementById(&#39;canvas&#39;);
    var context =canvas.getContext("2d"); // 获取上下文
    //设置纯色
    context.fillStyle = "red";
    context.strokeStyle = "blue";
    // 实践表明在不设置fillStyle下的默认fillStyle为black
    context.fillRect(0, 0, 100, 100);
    // 实践表明在不设置strokeStyle下的默认strokeStyle为black
    context.strokeRect(120, 0, 100, 100);
</script>

Copier après la connexion

SVG

SVG est une autre fonctionnalité graphique de HTML5. C'est un graphique vectoriel standard. format avec sa propre API. HTML5 introduit le SVG en ligne, permettant aux éléments SVG d'apparaître directement dans le balisage HTML.

<svg height=100 width=100><circle cx=50 cy=50 r=50 /></svg>

Copier après la connexion

Audio et vidéo

L'émergence des éléments audio et vidéo a donné aux applications multimédias HTML5 de nouvelles options, développement Personnes vous n'avez pas besoin d'utiliser de plug-ins pour lire de l'audio et de la vidéo. Pour ces deux éléments, la spécification HTML5 fournit une API de contrôle commune, complète et scriptable.
Avant la sortie de la spécification HTML5, la manière habituelle de lire des vidéos sur une page consistait à utiliser des plug-ins Flash, QuickTime ou Windows Media pour intégrer de l'audio et de la vidéo dans HTML. Par rapport à cette méthode, l'utilisation de balises multimédia HTML5 comporte deux. avantages majeurs.

En tant que fonction supportée nativement par le navigateur, les nouveaux éléments audio et vidéo n'ont pas besoin d'être installés.
Les éléments multimédias fournissent une API de contrôle commune, intégrée et scriptable pour les pages Web.

<video src="video.webm" controls>
    <object data="videoplayer.swf" type="application/x-shockwave-flash">
        <param name="movie" value="video.swf" />
    </object>
    Your browser does not support HTML5 video.
</video>

Copier après la connexion

Détection de prise en charge du navigateur

Détection du navigateur si l'élément audio ou la vidéo est pris en charge Le plus simple La façon d'utiliser un élément est de le créer dynamiquement avec un script, puis de détecter si une fonction spécifique existe.

var hasVideo = !!(document.createElement(&#39;video&#39;).canPlayType);

Copier après la connexion

API de géolocalisation

API de géolocalisation html5 (API de géolocalisation), vous pouvez demander aux utilisateurs partager leur emplacement. Il est très simple à utiliser et, si l'utilisateur est d'accord, le navigateur renvoie des informations de localisation, qui sont fournies au navigateur via l'appareil sous-jacent (tel qu'un ordinateur portable ou un téléphone mobile) prenant en charge les capacités de géolocalisation HTML5. Les informations de localisation comprennent les coordonnées de latitude, de longitude et quelques autres métadonnées.

D'où proviennent les informations de localisation

L'API de géolocalisation ne précise pas la technologie sous-jacente utilisée par l'appareil pour localiser l'utilisateur de l'application. Au lieu de cela, il s'agit simplement d'une API permettant de récupérer des informations de localisation, et les données récupérées via cette API ne le sont qu'avec un certain degré de précision et il n'y a aucune garantie que l'emplacement renvoyé par l'appareil soit exact. Les appareils peuvent utiliser les sources de données suivantes :

Adresse IP
Coordonnées tridimensionnelles
GPS
Adresse MAC de RFID, WiFi et Bluetooth vers WiFi
ID du téléphone GSM ou CDMA
Données définies par l'utilisateur

Comment utiliser

// 一次更新
navigator.geolocation.getCurrentPosition(updateLocation, handleLocationEror);
function updateLocation(position) {
    var latitude = position.coords.latitude;     // 纬度
    var longitude = position.coords.longitude;   // 经度
    var accuracy = position.coords.accuracy;     // 准确度
    var timestamp = position.coords.timestamp;   // 时间戳
}
// 错误处理函数
function handleLocationEror(error) {
    ....
}
// 重复更新
navigator.geolocation.watchPosition(updateLocation, handleLocationEror);
// 不再接受位置更新
navigator.geolocation.clearWatch(watchId);

Copier après la connexion

API de communication

Messagerie interdocuments

En raison de problèmes de sécurité, la communication entre les cadres, les onglets et les fenêtres exécutés dans le même navigateur a toujours été strictement contrôlée. Cependant, il existe certains besoins légitimes pour que le contenu de différents sites interagisse au sein du navigateur. Dans ce cas, si un mécanisme de communication directe peut être prévu au sein du navigateur, ces applications pourront être mieux organisées.

HTML5 introduit une nouvelle fonctionnalité, la communication de messages entre documents, qui peut garantir une communication inter-sources sécurisée entre les iframes, les onglets et les fenêtres. L'API postMessage est un moyen standard d'envoyer des messages. L'envoi d'un message est très simple :

window.postMessage(&#39;Hello, world&#39;, &#39;http://www.example.com/&#39;);

Copier après la connexion

Lors de la réception d'un message, il vous suffit d'ajouter un gestionnaire d'événements à. la page. Lorsqu'un message arrive, la source du message est vérifiée pour déterminer s'il faut traiter le message.

window.addEventListener("message", messageHandler, true);
function messageHandler(e) {
    switch(e.origin) {
        case "friend.example.com":
        // 处理消息
        processMessage(e.data);
        break;
    default: 
        // 消息来源无法识别
        // 消息被忽略
    }
}

Copier après la connexion

L'événement message est un événement DOM avec des attributs de données et d'origine. L'attribut data est le message réel délivré par l'expéditeur et l'attribut origin est la source d'envoi.

XMLHttpRequest Level2

L'API XMLHttpRequest rend la technologie Ajax possible. En tant que version améliorée de XMLHttpRequest, XMLHttpRequest Level2 a considérablement amélioré ses fonctionnalités. . Principalement deux aspects :

XMLHttpRequest d'origine croisée
Événement de progression

Cross SourceXMLHttpRequest

过去，XMLHttpRequest仅限于同源通信，XMLHttpRequest Level2通过CORS实现了跨源XMLHttpRequest。跨源HTTP请求包含一个Origin头部，它为服务器提供HTTP请求的源信息。

WebSockets API

WebSockets是html5中最强大的通信功能，它定义了一个全双工通信信道，仅通过Web上的一个Socket即可进行通信。

WebSockets握手

为了建立WebSockets通信，客户端和服务器在初始握手时，将HTTP协议升级到WebSocket协议。一旦连接建立成功，就可以在全双工模式下在客户端和服务器之间来回传递WebSocket消息。

WebSockets接口

除了对WebSockets协议定义外，该规范还同时定义了用于JavaScript应用程序的WebSocket接口。WebSockets接口的使用很简单。要连接远程主机，只需要新建一个WebSocket实例，提供希望连接的对端URL。

Forms API

新表单元素

tel元素，表示电话号码。
email元素，表示电子邮件地址文本框。
url元素，表示网页的url。
search元素，用于搜索引擎，比如在站点顶部显示的搜索框。
range元素，特定值范围内的数值选择器，典型的显示方式是滑动条。
number元素，只包含数值的字段。

未来的表单元素

color元素，颜色选择器，基于调色盘或者取色板进行选择。
datetime元素，显示完整的日期和时间，包括时区。
datetime-local，显示日期和时间。
time元素，不含时区的时间选择器和指示器。
date元素，日期选择器。
week元素，某年中的周选择器。
month元素，某年中的月选择器。

新的表单特性和函数

placeholder

当用户还没输入值的时候，输入型控件可以通过placeholder特性向用户显示描述性说明或者提示信息。

<input name="name" placeholder="First and last name">

Copier après la connexion

autocomplete

浏览器通过autocomplete特性能够知晓是否应该保存输入值以备将来使用。

autofocus

通过autofocus特性可以指定某个表单元素获得输入焦点，每个页面上只允许出现一个autofocus特性，如果设置了多个，则相当于未指定此行为。

spellcheck

可对带有文本内容的输入控件和textarea空间控制spellcheck属性。设置完后，会询问浏览器是否应该给出拼写检查结果反馈。spellcheck属性需要赋值。

list特性和datalist元素

通过组合使用list特性和datalist元素，开发人员能够为某个输入型控件构造一张选值列表。

<datalist id="contactList">
    <option value="a@qq.com"></option>
    <option value="b@qq.com"></option>
</datalist>
<input type="email" id="contatcs" list="contactList">

Copier après la connexion

min和max

通过设置min和max特性，可以将range输入框的数值输入范围限定在最低值和最高值之间。可以只设置一个，也可以两个都设置，也可以都不设置。

step

对于输入型控件，设置其step特性能够指定输入值递增或者递减的粒度。

required

一旦为某输入型控件设置了required特性，那么此项必填，否则无法提交表单。

拖放API

draggable属性

如果网页元素的draggable元素为true，这个元素就是可以拖动的。

<p draggable="true">Draggable p</p>

Copier après la connexion

拖放事件

拖动过程会触发很多事件，主要有下面这些：

dragstart：网页元素开始拖动时触发。
drag：被拖动的元素在拖动过程中持续触发。
dragenter：被拖动的元素进入目标元素时触发，应在目标元素监听该事件。
dragleave：被拖动的元素离开目标元素时触发，应在目标元素监听该事件。
dragover：被拖动元素停留在目标元素之中时持续触发，应在目标元素监听该事件。
drap：被拖动元素或从文件系统选中的文件，拖放落下时触发。
dragend：网页元素拖动结束时触发。

draggableElement.addEventListener(&#39;dragstart&#39;, function(e) {
    console.log(&#39;拖动开始！&#39;);
});

Copier après la connexion

dataTransfer对象

拖动过程中，回调函数接受的事件参数，有一个dataTransfer属性，指向一个对象，包含与拖动相关的各种信息。

draggableElement.addEventListener(&#39;dragstart&#39;, function(event) {
    event.dataTransfer.setData(&#39;text&#39;, &#39;Hello World!&#39;);
});

Copier après la connexion

dataTransfer对象的属性有：

dropEffect：拖放的操作类型，决定了浏览器如何显示鼠标形状，可能的值为copy、move、link和none。
effectAllowed：指定所允许的操作，可能的值为copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized（默认值，等同于all，即允许一切操作）。
files：包含一个FileList对象，表示拖放所涉及的文件，主要用于处理从文件系统拖入浏览器的文件。
types：储存在DataTransfer对象的数据的类型。

dataTransfer对象的方法有：

setData(format, data)：在dataTransfer对象上储存数据。第一个参数format用来指定储存的数据类型，比如text、url、text/html等。
getData(format)：从dataTransfer对象取出数据。
clearData(format)：清除dataTransfer对象所储存的数据。如果指定了format参数，则只清除该格式的数据，否则清除所有数据。
setDragImage(imgElement, x, y)：指定拖动过程中显示的图像。默认情况下，许多浏览器显示一个被拖动元素的半透明版本。参数imgElement必须是一个图像元素，而不是指向图像的路径，参数x和y表示图像相对于鼠标的位置。

Web Workers API

Javascript是单线程的。因此，持续时间较长的计算，回阻塞UI线程，进而导致无法在文本框中填入文本，单击按钮等，并且在大多数浏览器中，除非控制权返回，否则无法打开新的标签页。该问题的解决方案是Web Workers，可以让Web应用程序具备后台处理能力，对多线程的支持性非常好。

但是在Web Workers中执行的脚本不能访问该页面的window对象，也就是Web Workers不能直接访问Web页面和DOM API。虽然Web Workers不会导致浏览器UI停止响应，但是仍然会消耗CPU周期，导致系统反应速度变慢。

Web Storage API

Web Storage是html5引入的一个非常重要的功能，可以在客户端本地存储数据，类似html4的cookie，但可实现功能要比cookie强大的多。

sessionStorage

sessionStorage将数据保存在session中，浏览器关闭数据就消失。

localStorage

localStorage则一直将数据保存在客户端本地，除非手动删除，否则一直保存。

不管是sessionStorage，还是localStorage，可使用的API相同，常用的有如下几个（以localStorage为例）：