Nouvelles balises HTML5 : canvas, audio, video, source, embed, track, datalist, keygen, output, article, apart, bdi, nav, mark, rt, rp, ruby, time, wbr, etc. La balise canvas peut définir des graphiques, la balise audio peut définir le contenu audio, la vidéo peut définir la vidéo, la source peut définir des ressources multimédia et l'intégration peut définir le contenu intégré, etc.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.
HTML5 est la dernière version de HTML, qui a été personnalisée selon la norme par le W3C en 2014. Les fonctions natives améliorées du navigateur réduisent les applications de plug-ins du navigateur (telles que Flash), améliorent la satisfaction de l'expérience utilisateur et rendent le développement plus pratique. HTML a subi d'énormes changements entre la version 1.0 et la version 5.0, passant d'une fonction d'affichage de texte unique à une fonction d'affichage multimédia avec des images et des textes. Après de nombreuses années d'amélioration, de nombreuses fonctionnalités sont devenues un langage de balisage très important.
Nouvelles balises en html5
HTML5 ajoute de nouvelles balises structurelles, balises multimédia et balises de formulaire. Laissez-moi vous le présenter ci-dessous.
Nouvel élément
balise
description
Cette balise est basée sur l'API de dessin de JavaScript. Définition Vidéo (vidéo ou film)
définir les ressources multimédias et
définir le contenu intégré, tel que les plug-ins.
Spécifie une piste de texte externe pour les médias tels que les éléments
Nouvel élément de formulaire
étiquette
description
Définir la liste des options. Utilisez cet élément en conjonction avec un élément d'entrée pour définir les valeurs possibles de l'entrée.
Spécifie le champ du générateur de paire de clés à utiliser pour le formulaire.
Définissez différents types de sortie, tels que la sortie de script.
Nouveaux éléments sémantiques et structurels
balises
description
définissent des zones de contenu indépendantes de la page.
Définissez le contenu de la barre latérale de la page.
Vous permet de définir un morceau de texte indépendant du paramètre de direction du texte de son élément parent.
Définir des boutons de commande, tels que des boutons radio, des cases à cocher ou des boutons
Utilisé pour décrire les détails d'un document ou d'une partie d'un document
Définir une boîte de dialogue, telle qu'une boîte de dialogue d'invite
La balise contient le titre de l'élément de détails
Spécifie le contenu du flux indépendant (images, graphiques, photos, code, etc.).
définir le titre de l'élément
définir le pied de page de la section ou du document.
définit la zone d'en-tête du document
définit le texte avec des marques.
Définition des poids et mesures. À utiliser uniquement pour les mesures avec des valeurs maximales et minimales connues.
Définir la partie du lien de navigation.
Définissez l'avancement de tout type de tâche.
Définissez les commentaires ruby (notation ou caractères phonétiques chinois).
Définition de l'interprétation ou de la prononciation d'un caractère (phonétique ou caractère chinois).
est utilisé dans les commentaires Ruby pour définir le contenu affiché par les navigateurs qui ne prennent pas en charge les éléments Ruby.
Définissez la section (section, section) dans le document.
Définissez la date ou l'heure.
Spécifie où dans le texte il est approprié d'ajouter des sauts de ligne.
Exemples d'utilisation des balises html5
(1) Définir le lien de navigation
C'est aussi une balise significative, cela ne signifie pas ajouter cette balise quelque part C'est juste un p significatif Ajoutez la balise de menu à l'en-tête. La balise nav peut être combinée avec la balise
<header>
<p>这是一个header部分</p>
<nav> <!--导航链接标签-->
<ul> <!--配合ul使用-->
<li>首页</li>
<li>关于</li>
<li>产品</li>
<li>联系</li>
</ul>
</nav>
</header> Copier après la connexion
code css :
/*定义nav的高和颜色*/
nav{
height:30px;
background-color:#F33;
margin-top:100px;}
/*正常设置li的样式*/
li{
list-style:none;
float:left;
width:100px;
height:30px;
} Copier après la connexion
. peut réaliser la disposition du menu que vous n'avez utilisée que p auparavant
(2) Définissez la balise d'article
code html :
<article><!--文章块p-->
<h2>文章标题</h2><!--标题-->
<p>文章内容文章内容文章内容文章内容文章内容文章内容
<br>
文章内容文章内容文章内容文章内容文章内容文章内容<br>
文章内容文章内容文章内容</p>
</article> Copier après la connexion
style css :
article{
background-color:#F33;
width:500px;
text-align:center; /*水平居中*/
margin:0px auto;
} Copier après la connexion
De cette façon, vous pouvez écrire un article
(3) Définir le regroupement des contenus multimédias et leurs titres, mais écrivez le titre
<figure>
<figcaption>标题</figcaption><!--配套-->
<p>标题内容</p>
</figure> Copier après la connexion
, où est utilisé pour écrire du contenu. de l'effet de prise en charge de l'utilisation<figure>
<dt>标题1</dt>
<dd>标题内容</dd>
</figure> Copier après la connexion
(4) Définir une boîte de dialogue ou une fenêtre
<dialog open>
<dt>1问题</dt>
<dd>1答案</dd>
<dt>2问题</dt>
<dd>2答案</dd>
</dialog> Copier après la connexion
(5) Définir une liste ou un menu de commandes
<menu>
<li>定义列表</li>
<li>定义列表</li>
<li>定义列表</li>
</menu> Copier après la connexion
Union (définir les commandes/éléments de menu que l'utilisateur peut appeler depuis le menu contextuel) avec la balise en utilisant
<menu type="context" id="cai">
<!--label是右键后显示的菜单项，onclick是选中菜单后执行的代码-->
<menuitem label="菜单一" onclick="alert('这是菜单一')" icon="右键单击显示的图片"></menuitem>
</menu> Copier après la connexion
<span contextmenu="cai">单击我试试</span> Copier après la connexion
L'élément souhaité apparaît après un clic droit Cliquez sur l'élément de menu souhaité
(6) Groupe de titres
<hgroup><!--标题组-->
<h3>标题</h3>
<h3>标题1</h3>
<h3>标题2</h3>
<h3>标题3</h3>
</hgroup> Copier après la connexion
(7) Définir un petit texte
<small>法律条文</small>
<small>联系我们</small>
<small>客户意见</small> Copier après la connexion
(8) Définir les détails de l'élément< détails>
<details>
<dt>问题</dt>
<dd>解答</dd>
<dt>问题</dt>
<dd>解答</dd>
<dt>问题</dt>
<dd>解答</dd>
</details> Copier après la connexion
Cliquez sur les détails pour voir le titre et le contenu
(9) Définir le commentaire ruby Je ne le reconnais pas Vous pouvez l'utiliser pour annoter le pinyin des caractères, mais une certaine compatibilité n'est pas très bonne Vous pouvez le modifier le moment venu
<ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>
<!--<rp>是能够兼容的时候让括号不可见，不能兼容的时候让括号可见，rt是进行这是的内容--> Copier après la connexion
(10) Définissez la mesure dans la plage prédéfinie
<meter min="0" max="10" value="4" low="2" high="7"> Copier après la connexion
<meter min="0" max="10" value="8" low="2" high="7"> Copier après la connexion
(11) L'étiquette de la barre de progression <progress id="jindu" max="100" value="0"></progress>进度条 Copier après la connexion
<progress id="jindu" max="100" value="0"></progress>进度条
<script>
var pro = document.getElementById("jindu");
setInterval(function(){ pro.value+=1;},1000); //间隔1秒它的值加1
</script> Copier après la connexion
La barre de progression peut être complétée de cette manière n'est-ce pas bien mieux que d'écrire uniquement en js ?
Pour plus de connaissances sur la programmation, veuillez visiter : Apprendre la programmation ! !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
