Tutoriel 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
pour la lecture multimédia d'éléments vidéo et audio
Meilleure prise en charge du stockage local 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, la recherche
HTML5 <!DOCTYPE>
<!doctype> La déclaration doit être située sur la première ligne du document HTML5 C'est très simple à utiliser :
<!DOCTYPE html>
Le plus petit document HTML5
ci-dessous C'est un. document HTML5 simple :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> 文档内容...... </body> </html>
Remarque : Pour les pages Web en chinois, vous devez utiliser <meta charset="utf-8"> pour déclarez l'encodage, sinon des caractères tronqués apparaîtront.
Améliorations HTML5
Nouveaux éléments
Nouveaux attributs
Prend entièrement en charge 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 <vidéo>
HTML5 <audio>
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
XHTMLHttpRequest 2
Graphiques HTML5
En utilisant HTML5, vous pouvez simplement dessiner des graphiques :
Utilisez l'élément <
en utilisant le SVG en ligne
en utilisant CSS3 2D/3D
HTML5 en utilisant CSS3
Nouveau sélecteur
Nouvel attribut
Animation
-
Conversion 2D/3D
Coins arrondis
Effet d'ombre
Polices téléchargeables
Pour en savoir plus sur CSS3, veuillez consulter le tutoriel CSS3 sur ce site.
Éléments sémantiques
HTML5 ajoute de nombreux éléments sémantiques comme suit :
| 标签 | 描述 |
|---|---|
| <article> | 定义页面独立的内容区域。 |
| <aside> | 定义页面的侧边栏内容。 |
| <bdi> | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
| <command> | 定义命令按钮，比如单选按钮、复选框或按钮 |
| <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éments supprimés
Les éléments HTML 4.01 suivants ont été supprimés dans HTML5 :
<acronyme>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
-
<strike>
Exemples dans chaque chapitre
Avec notre éditeur HTML, vous pouvez modifier le HTML, puis cliquer sur le bouton pour afficher les résultats.
Instance
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <meta charset="utf-8"> </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>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Cliquez sur le bouton "Essayer" pour afficher les résultats en ligne.
Prise en charge du navigateur HTML5
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.
La méthode pour que les navigateurs inférieurs à IE9 soient compatibles avec HTML5 consiste à utiliser le package html5shiv de ressources statiques Baidu :
<!--[if lt IE9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]-->
Après le chargement, initialisez le CSS de la nouvelle balise :
/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}Manuel de référence HTML5
Dans ce site, vous pouvez trouver des balises et des descriptions d'attributs sur HTML5. Pour plus de détails, veuillez cliquer sur Manuel de référence HTML5.
