Quelles sont les nouvelles balises en html5

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

• code html :

  <header>
      <p>这是一个header部分</p>
      <nav>    <!--导航链接标签-->
          <ul>    <!--配合ul使用-->
              <li>首页</li>
              <li>关于</li>
              <li>产品</li>
              <li>联系</li>
          </ul>
      </nav>
  </header>

  code css :

  /*定义nav的高和颜色*/ 
  nav{
      height:30px;
      background-color:#F33;
      margin-top:100px;}
  /*正常设置li的样式*/
  li{
      list-style:none;
      float:left;
      width:100px;
      height:30px;
  }

  . peut réaliser la disposition du menu que vous n'avez utilisée que p auparavant

  

  (2) Définissez la balise d'article

  Vous pouvez utiliser la balise de bloc d'article pour écrire un article, utilisez cette balise pour écrire un article dans la section section, qui peut être utilisé avec

  code html :

  <article><!--文章块p-->
  　　<h2>文章标题</h2><!--标题-->
  　　<p>文章内容文章内容文章内容文章内容文章内容文章内容
  　　<br>
  　　文章内容文章内容文章内容文章内容文章内容文章内容<br>
  　　文章内容文章内容文章内容</p>
  </article>　

  style css :

  article{
  	background-color:#F33;
  	width:500px;
  	text-align:center;  /*水平居中*/  
  	margin:0px auto;
  }

  De cette façon, vous pouvez écrire un article

  

  (3) Définir le regroupement des contenus multimédias et leurs titres

  A. Cette balise peut être utilisée conjointement avec la balise correspondante

  , mais écrivez le titre

  <figure>
      <figcaption>标题</figcaption><!--配套-->
      <p>标题内容</p>
  </figure>

  B au milieu de

  . Il peut également être utilisé conjointement avec

  , où

  est utilisé pour écrire des titres, tandis que

  est utilisé pour écrire du contenu. de l'effet de prise en charge de l'utilisation

  <figure>
      <dt>标题1</dt>
      <dd>标题内容</dd>
  </figure>

  (4) Définir une boîte de dialogue ou une fenêtre

  Vous pouvez également utiliser les balises dd et dt dans cette balise Le titre et le contenu de la boîte de dialogue. box a un attribut open. La compatibilité de cette balise n'est pas très bonne

  <dialog open>
            <dt>1问题</dt>
            <dd>1答案</dd>
            <dt>2问题</dt>
            <dd>2答案</dd>
  </dialog>

  　

  

  (5) Définir une liste ou un menu de commandes

  A. Cette balise peut être utilisée avec li

  <menu>
           <li>定义列表</li>
           <li>定义列表</li>
           <li>定义列表</li>
  </menu>

  B. Vous pouvez ajouter votre propre contenu en cliquant avec le bouton droit (seul Firefox est compatible)

  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(&#39;这是菜单一&#39;)" icon="右键单击显示的图片"></menuitem>
                     
  </menu>

  <span contextmenu="cai">单击我试试</span>

  L'élément souhaité apparaît après un clic droit Cliquez sur l'élément de menu souhaité

  , et le contenu apparaîtra

  

  (6) Groupe de titres

  Vous pouvez écrire des combinaisons de titres < h3> pour un usage courant

  <hgroup><!--标题组-->
          <h3>标题</h3>
          <h3>标题1</h3>
          <h3>标题2</h3>
          <h3>标题3</h3>
  </hgroup>

  

  (7) Définir un petit texte

  Cette balise est en fait similaire à d'autres balises en gras

  <small>法律条文</small>
  <small>联系我们</small>
  <small>客户意见</small>

  

  (8) Définir les détails de l'élément< détails>

  Le contenu à l'intérieur peut être utilisé avec les balises de titre et de contenu

  <details>
          <dt>问题</dt>
          <dd>解答</dd>
          <dt>问题</dt>
          <dd>解答</dd>
          <dt>问题</dt>
          <dd>解答</dd>
  </details>　　

  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是进行这是的内容-->

  (10) Définissez la mesure dans la plage prédéfinie

  Il existe plusieurs valeurs d'attribut, min="" max="" value="" low="" high="", où low et high sont des plages. Lorsque la plage de valeurs dépasse, différents effets seront affichés

  <meter min="0" max="10" value="4" low="2" high="7">

  .

  La valeur dépasse Une fois la plage déterminée

  <meter min="0" max="10" value="8" low="2" high="7">

  

  (11) L'étiquette de la barre de progression

  <progress id="jindu" max="100" value="0"></progress>进度条

  La valeur maximale est la longueur de la barre de progression et la valeur la valeur est la progression affichée. Utilisez-la pour créer une barre de progression dynamique

  <progress id="jindu" max="100" value="0"></progress>进度条
  <script>
      var pro = document.getElementById("jindu");
      setInterval(function(){ pro.value+=1;},1000);    //间隔1秒它的值加1
  </script>

  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!