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
|
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
première ligne du document HTML5 C'est très simple à utiliser :
Vous pouvez voir si notre exemple de premier chapitre commence par
Le plus petit document HTML5
Le Voici un simple document HTML5 :
文档标题 文档内容......
Remarque: Pour les pages Web chinoises, vous devez utiliser 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
ApplicationsEn 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
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 :
|
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 元素的标题 | |
规定独立的流内容(图像、图表、照片、代码等等)。 | |
定义 |
定义 section 或 document 的页脚。 | |
定义了文档的头部区域 | |
定义带有记号的文本。 | |
定义度量衡。仅用于已知最大和最小值的度量。 | |
定义导航链接的部分。 |
定义任何类型的任务的进度。 | |
定义 ruby 注释(中文注音或字符)。 | |
定义字符(中文注音或字符)的解释或发音。 | |
在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。 | |
定义文档中的节(section、区段)。 |
定义日期或时间。 | |
规定在文本中的何处适合添加换行符。 |
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 :
Exemple
L'exemple suivant vous montre comment lire une vidéo sur une page Web
文档标题
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é
php中文网(php.cn) 为 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
php中文网(php.cn) 渲染 HTML5 学习HTML就到PHP中文网
php中文网 —— php中文网!!
Le code de référence html5shiv.js doit être placé dans l'élément
doit d'abord charger ce fichier lors de l'analyse de nouveaux éléments HTML5.