Introduction au HTML5

À quoi ressemble HTML5 et comment l'utiliser ? En fait, dans le premier chapitre de notre tutoriel HTML, les codes utilisés dans les exemples que nous vous avons donnés étaient tous écrits en HTML. Regardons de plus près HTML5

Introduction à HTML5

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

HTML5的设计目的是为了在移动设备上支持多媒体。

HTML5 简单易学。

HTML5 est la dernière version révisée de HTML. La norme a été complétée par le World Wide Web Consortium (W3C) en octobre 2014. <🎜><🎜>HTML5 est conçu pour prendre en charge le multimédia sur les appareils mobiles. <🎜><🎜>HTML5 est facile à apprendre. <🎜>

Qu'est-ce que HTML5 ?

HTML5 est le standard HTML de nouvelle génération.

HTML, la version précédente de HTML 4.01 est née en 1999. Depuis, le monde du Web a radicalement changé.

HTML5 est toujours un travail en cours. Cependant, la plupart des navigateurs modernes prennent déjà en charge HTML5.

Comment le HTML5 a-t-il démarré ?

HTML5 est le résultat de la coopération entre le W3C et le WHATWG, qui fait référence au Web Hypertext Application Technology Working Group. .

Le WHATWG travaille sur les formulaires et applications Web, tandis que le W3C se concentre sur XHTML 2.0. En 2006, les deux parties décident de collaborer pour créer une nouvelle version du HTML.

Quelques nouvelles fonctionnalités intéressantes en HTML5 :

élément de toile pour le dessin

éléments vidéo et audio pour la lecture multimédia

natif Meilleure prise en charge du stockage hors ligne

Nouveaux éléments de contenu spéciaux, tels que l'article, le pied de page, l'en-tête, la navigation, la section

Nouveaux contrôles de formulaire, tels que le calendrier, la date, l'heure, l'e-mail, l'URL , recherchez

HTML5 <!DOCTYPE>

<! La déclaration doctype> première ligne du document HTML5 C'est très simple à utiliser :

<!DOCTYPE html>

Vous pouvez voir si notre exemple de premier chapitre commence par <!DOCTYPE>

Le plus petit document HTML5

Le Voici un simple document HTML5 :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>

Remarque : Pour les pages Web chinoises, vous devez utiliser <meta charset="utf-8"> pour déclarer l'encodage, sinon des caractères tronqués apparaîtront.

Améliorations HTML5

Nouveaux éléments
Nouveau propriétés
Prise en charge complète de CSS3
Vidéo et audio
Graphiques 2D/3D
Stockage local
Données SQL locales
Application Web

Multimédia HTML5

En utilisant HTML5, vous pouvez simplement lire de la vidéo et de l'audio sur des pages Web. HTML5

Applications

En utilisant HTML5, vous pouvez simplement développer des applications

Stockage de données locales

Accéder aux fichiers locaux

Données SQL locales

Référence du cache
Javascript Worker
Dessinez des graphiques :
en utilisant l'élément <canvas>
en utilisant le SVG en ligne
en utilisant CSS3 2D/3D

HTML5 utilisant CSS3

Nouveau sélecteur
Nouvelles propriétés
Animation
Conversion 2D/3D
Coins arrondis
Effet d'ombre
Polices téléchargeables

Veuillez en savoir plus sur CSS3 Consultez ce site Tutoriel CSS3.

Éléments sémantiques

HTML5 ajoute de nombreux éléments sémantiques comme suit :

标签	描述
<article>	定义页面独立的内容区域。
<aside>	定义页面的侧边栏内容。
<bdi>	允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command>	定义命令按钮，比如单选按钮、复选框或按钮

Tag<🎜><🎜>

Description<🎜>

Définissez une zone de contenu indépendante sur la page.

< apart>

Définir le contenu de la barre latérale de la page .

< bdi>

Vous permet de définir une section de text afin qu'il s'éloigne du paramètre de direction du texte de son élément parent.

< command>

Définir des boutons de commande, tels que la radio sélections Bouton, case à cocher ou bouton

<details>	用于描述文档或文档某个部分的细节
<dialog>	定义对话框，比如提示框
<summary>	标签包含 details 元素的标题
<figure>	规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>	定义 <figure> 元素的标题

<footer>	定义 section 或 document 的页脚。
<header>	定义了文档的头部区域
<mark>	定义带有记号的文本。
<meter>	定义度量衡。仅用于已知最大和最小值的度量。
<nav>	定义导航链接的部分。

<progress>	定义任何类型的任务的进度。
<ruby>	定义 ruby 注释（中文注音或字符）。
<rt>	定义字符（中文注音或字符）的解释或发音。
<rp>	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section>	定义文档中的节（section、区段）。

<time>	定义日期或时间。
<wbr>	规定在文本中的何处适合添加换行符。

Formulaire HTML5

Nouveaux éléments de formulaire, nouveaux attributs, nouveaux types de saisie, validation automatique.

Élément supprimé

Les éléments HTML 4.01 suivants ont été supprimés dans HTML5 :

<acronyme>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>

Exemple

L'exemple suivant vous montre comment lire une vidéo sur une page Web

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文档标题</title>
</head>
<body>
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    你的浏览器不支持 video 标签。
</video>
</body>
</html>

Vous Vous peut trouver une vidéo localement et mettre l'emplacement et le nom de la vidéo dans src Essayez-le

Le navigateur HTML5 prend en charge

Les dernières versions de Safari, Chrome, Firefox et Opera prennent en charge certaines fonctionnalités HTML5. Internet Explorer 9 prendra en charge certaines fonctionnalités HTML5.

Vous pouvez faire en sorte que certains navigateurs plus anciens (qui ne prennent pas en charge HTML5) prennent en charge HTML5.

Les navigateurs modernes prennent en charge HTML5.

De plus, tous les navigateurs, anciens et nouveaux, traiteront automatiquement les éléments non reconnus comme des éléments en ligne.

Pour cette raison, vous pouvez "apprendre à " le navigateur à gérer les éléments HTML "Inconnu".

Vous pouvez même apprendre au navigateur IE6 (Windows XP 2001) à gérer les éléments HTML inconnus.

Définit les éléments HTML5 comme éléments de bloc

HTML5 définit 8 nouveaux éléments sémantiques HTML. Tous ces éléments sont des éléments de niveau bloc.

Afin de permettre aux anciennes versions des navigateurs d'afficher correctement ces éléments, vous pouvez définir la valeur de l'attribut d'affichage CSS sur bloquer :

en-tête , section, pied de page, à côté, nav, principal, article, figure {
display: block
}

Ajouter de nouveaux éléments au HTML

Vous pouvez ajouter de nouveaux éléments au HTML.

Cet exemple ajoute un nouvel élément au HTML et définit un style pour l'élément. L'élément est nommé <myHero> :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
    <meta charset="utf-8">
    <title>为 HTML 添加新元素</title>
    <script>document.createElement("myHero")</script>
    <style>
        myHero {
            display: block;
            background-color: #9dddd7;
            padding:40px;
            font-size: 30px;
        }
    </style>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
<myHero>我的第一个新元素</myHero>
</body>
</html>

Exécutez le programme pour voir

L'instruction JavaScript document.createElement("myHero") consiste à ajouter un nouvel élément au navigateur IE.

Problèmes du navigateur Internet Explorer

Vous pouvez utiliser la méthode ci-dessus pour ajouter des éléments HTML5 pour le navigateur IE, mais :

Internet Explorer 8 et les navigateurs IE antérieurs ne prennent pas en charge la méthode ci-dessus.

Nous pouvons résoudre ce problème en utilisant "HTML5 Enabling JavaScript", " shiv" créé par Sjoerd Visscher :

Le code ci-dessus est un commentaire, qui est utilisé pour lire le fichier html5.js lorsque la version du navigateur IE est inférieure à IE9 et analysez-le.

Remarque : Les utilisateurs nationaux doivent utiliser la bibliothèque de ressources statiques Baidu (la bibliothèque de ressources Google est instable en Chine) :

html5shiv est une meilleure solution pour le navigateur IE. html5shiv résout principalement le problème selon lequel les nouveaux éléments proposés par HTML5 ne sont pas reconnus par IE6-8. Ces nouveaux éléments ne peuvent pas être utilisés comme nœuds parents pour envelopper des éléments enfants et les styles CSS ne peuvent pas être appliqués.

Solution Shiv parfaite

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
    <meta charset="utf-8">
    <title>渲染 HTML5</title>
    <!--[if lt IE 9]>
    <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
</head>
<body>
<h1>学习HTML就到PHP中文网</h1>
<article>
    php中文网 ——  php中文网！！
</article>
</body>
</html>

Le code de référence html5shiv.js doit être placé dans l'élément <head> doit d'abord charger ce fichier lors de l'analyse de nouveaux éléments HTML5.

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</title> <meta charset="utf-8"> <title>为 HTML 添加新元素</title> <script>document.createElement("myHero")</script> <style> myHero { display: block; background-color: #9dddd7; padding:40px; font-size: 30px; } </style> </head> <body> <h1>我的第一个标题</h1> <p>我的第一个段落。</p> <myHero>我的第一个新元素</myHero> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Introduction au HTML5

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]