Quelles sont les balises rares en HTML ?-tutoriel HTML-php.cn

Les balises rarement utilisées en HTML incluent : pre, figure, figcaption, em, strong, del, ins, sub, sup, ruby, bdo, vedio, audio, track, optgroup, output, progress, meter, etc.

Quelles sont les balises rares en HTML ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.

<strong>balises html rares

<strong>1. balise pré

L'élément HTML <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> représente un texte formaté prédéfini. Le texte de cet élément est généralement affiché dans une police à largeur fixe selon le format du fichier d'origine, et les caractères d'espacement (tels que les espaces et les sauts de ligne) dans le texte seront affichés. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。

例如：

<pre class="brush:php;toolbar:false">
    < Hello World >                          我      就是   想
      ---------------------------                    乱    七   
            \   ^__^                            八       遭
              \  (oo)\_______
                (__)\       )\/\        的                     定位  写
                    ||----w |
                    ||     ||                      出来 ~

Copier après la connexion

<strong>效果图：

<strong>2、figure 与 figcaption

HTML <figure> 元素代表一段独立的内容, 经常与说明（caption）<figcaption>配合使用, 并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等.

<figure>
	<img    style="max-width:90%" src="img/2.jpg"  alt="Quelles sont les balises rares en HTML ?" >
	<figcaption>美丽的海景~</figcaption>
</figure>

Copier après la connexion

<strong>效果图：

Quelles sont les balises rares en HTML ?

<strong>3、em 标签与 strong 标签

HTML 着重元素 (<em>) 标记出需要用户着重阅读的内容， <em> 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读,一般显示为 <strong>" <em>倾斜字体 "。

Strong 元素 (<strong>)表示文本十分重要，一般用<strong>粗体显示。

<strong>4、del 标签与 ins 标签

HTML的 <del> 标签表示一些被从文档中<strong>删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。

<p><del>这段文本已被删除。 </del>, 请浏览其它部分</p>

Copier après la connexion

<strong>效果图：

HTML <ins> 元素定义已经被插入文档中的文本。

<ins>这一段文本是新插入至文档的。</ins>

Copier après la connexion

<strong>效果图：

<strong>5、sub 标签与 sup 标签

HTML <sub> 元素定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更低并且更小。

<p>水的化学公式: H<sub>2</sub>O</p>

Copier après la connexion

<strong>效果图：

HTML <sup> 元素定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更低并且更小。

<p>2 + 3<sup>2</sup>= 11</p>

Copier après la connexion

<strong>效果图：

<strong>6、ruby 标签

HTML <ruby> 元素被用来展示东亚文字注音或字符注释。

<ruby>
  曲 <rp>(</rp><rt>qu</rt><rp>)</rp>
  小 <rp>(</rp><rt>xiao</rt><rp>)</rp>
  强 <rp>(</rp><rt>qiang</rt><rp>)</rp>
</ruby>

Copier après la connexion

<strong>效果图：

<strong>7、bdo 标签

指定子元素的文本方向，显式地覆盖默认的文本方向。

<bdo> 元素 ( HTML双向覆盖元素 )用于覆盖当前文本的朝向，它使得字符按给定的方向排列。

<p>这段文本是从左到右的</p>
<p><bdo dir="rtl">这段文本是从右到左的</bdo></p>

Copier après la connexion

<strong>效果图：

当你用css 写大量的样式的时候，有没有想过，有一个标签可以代替大量的样式属性呢。

<strong>8、vedio、audio 和 track

vedio、audio 和 track 三者都是 HTML5 的产物，相信很多小伙伴，都肯定使用过<video>和<audio> ，因为比较常用，这里就不介绍<video>和<audio>了，今天说一下<track>。

HTML <track> 元素被当作媒体元素 <audio> 和<video>

Par exemple : 🎜

<video controls width="250" src="xxx.mp4">
    <track default kind="captions"
       srclang="en"
       src="xxxxx.vtt"/>
Sorry, your browser doesn&#39;t support embedded videos.
</video>

Copier après la connexion

🎜🎜Rendu : 🎜🎜🎜

🎜🎜🎜2. figure et figcaption🎜🎜🎜L'élément HTML <figure> représente un élément de contenu indépendant et est souvent utilisé en conjonction avec la description (légende)

<figcaption>< /code> , et comme unité de référence indépendante. Lorsqu'il appartient au flux de contenu principal (flux principal), sa position est indépendante du corps. Cette balise est souvent constituée d'images, d'illustrations, de tableaux, d'extraits de code, etc. cités dans le texte principal 🎜<select>
    <optgroup label="Group 1">
      <option>Option 1.1</option>
    </optgroup> 
    <optgroup label="Group 2">
      <option>Option 2.1</option>
      <option>Option 2.2</option>
    </optgroup>
    <optgroup label="Group 3" disabled>
      <option>Option 3.1</option>
      <option>Option 3.2</option>
    </optgroup>
 </select>
Copier après la connexion
Copier après la connexion
🎜🎜Rendu : 🎜🎜🎜🎜🎜🎜3. balise em et balise forte🎜🎜🎜Élément d'emphase HTML (<em>< /code>) marque le contenu qui nécessite que les utilisateurs se concentrent sur la lecture. Les éléments <em> peuvent être imbriqués. Plus le niveau d'imbrication est profond, plus le contenu qu'il contient est généralement considéré comme important. affiché sous la forme 🎜" <em>Police italique "🎜. 🎜🎜L'élément fort (<strong>) indique que le texte est très important et est généralement affiché en 🎜boldface🎜. 🎜🎜🎜4. balise del et balise ins 🎜🎜🎜La balise <del> de HTML représente du contenu textuel qui a été 🎜supprimé🎜 du document. Par exemple, vous pouvez utiliser cette balise lorsque vous devez afficher des enregistrements de modifications ou des différences dans le code source. 🎜<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" name="b" value="40" /> +
  <input type="number" name="a" value="10" /> =
  <output name="result"></output>
</form>
Copier après la connexion
Copier après la connexion
🎜🎜Rendu : 🎜
🎜 🎜 L'élément HTML <ins> définit le texte qui a été inséré dans le document. 🎜进度条：<progress value="70" max="100">70 %</progress> <br />
进度条：<progress></progress>
Copier après la connexion
Copier après la connexion
🎜🎜Rendu : 🎜🎜🎜<sub> définit une zone de texte, pour des raisons de typographie, elle doit être affichée plus basse et plus petite que le texte principal. 🎜<p>显示度量值：</p>
<meter value="3" min="0" max="10">3/10</meter><br>
<meter value="0.6">60%</meter>
Copier après la connexion
Copier après la connexion
🎜🎜Rendu : 🎜🎜🎜🎜🎜HTML Le L'élément <sup> définit une zone de texte qui, pour des raisons typographiques, doit être affichée plus bas et plus petite que le texte principal. 🎜<details>
  <summary>点击展开</summary>
  <p>世间万物，为我所用，非我所得。</p>
</details>
Copier après la connexion
Copier après la connexion
🎜🎜Rendu : 🎜
🎜 🎜 🎜6. balise ruby 🎜🎜🎜L'élément HTML <ruby> est utilisé pour afficher les notations phonétiques ou les annotations de caractères d'Asie de l'Est. 🎜rrreee🎜🎜Rendu : 🎜
🎜 🎜 🎜7. La balise bdo 🎜🎜🎜 spécifie la direction du texte de l'élément enfant et remplace explicitement la direction du texte par défaut. L'élément 🎜🎜<bdo> ( HTML Bidirectionnel Overlay Element ) est utilisé pour remplacer l'orientation du texte actuel, ce qui provoque la disposition des caractères dans une direction donnée. . 🎜rrreee🎜🎜Rendu : 🎜🎜🎜🎜🎜Dang When vous utilisez css pour écrire un grand nombre de styles, avez-vous déjà pensé qu'une balise pouvait remplacer un grand nombre d'attributs de style ? 🎜🎜🎜8, vidéo, audio et piste🎜🎜🎜vedio, audio et piste sont tous des produits de HTML5 Je pense que de nombreux amis ont dû utiliser <video>< /code> et. <audio>, car ils sont plus couramment utilisés, <video> et <audio> ne seront pas présentés ici. parler de <track>. 🎜🎜L'élément HTML <track> est utilisé comme élément enfant des éléments multimédias <audio> et <video>. Il permet de spécifier des sous-titres chronométrés (ou données temporelles), par exemple pour traiter automatiquement les sous-titres. 🎜track 给媒体元素添加的数据的类型在 kind 属性中设置，属性值可以是 subtitles, captions, descriptions, chapters 或 metadata。该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件。
一个media 元素的任意两个 track 子元素不能有相同的 kind, srclang, 和 label属性。
<video controls width="250" src="xxx.mp4">
    <track default kind="captions"
       srclang="en"
       src="xxxxx.vtt"/>
Sorry, your browser doesn&#39;t support embedded videos.
</video>
Copier après la connexion
Copier après la connexion
<strong>效果图：
<strong>9、optgroup 标签
<optgroup> 标签定义选项组。
optgroup 元素用于组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。
<select>
    <optgroup label="Group 1">
      <option>Option 1.1</option>
    </optgroup> 
    <optgroup label="Group 2">
      <option>Option 2.1</option>
      <option>Option 2.2</option>
    </optgroup>
    <optgroup label="Group 3" disabled>
      <option>Option 3.1</option>
      <option>Option 3.2</option>
    </optgroup>
 </select>
Copier après la connexion
Copier après la connexion
<strong>效果图：
简单的介绍这个功能，大多数的时候，我们所选择的框架开发，都会集成这种效果，可维护性也比较好，这里权当认识一下这个标签，不要遗忘了它~
<strong>10、output
HTML <output> 标签是HTML 5 中的新标签，表示计算或用户操作的结果,执行计算然后在 <output> 元素中显示结果。
<strong>注释：Internet Explorer 不支持 标签。
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" name="b" value="40" /> +
  <input type="number" name="a" value="10" /> =
  <output name="result"></output>
</form>
Copier après la connexion
Copier après la connexion
<strong>效果图：
<strong>11、progress 标签
HTML中的progress (<progress>) 元素用来显示一项任务的完成进度.
进度条：<progress value="70" max="100">70 %</progress> <br />
进度条：<progress></progress>
Copier après la connexion
Copier après la connexion
<strong>效果图：
<strong>提示：请结合 <progress> 标签与 JavaScript 一同使用，来显示任务的进度。
不过一般会用到进度条的地方，都是组件，框架自带之类的，这个算是鸡肋的了,不过了解一下还是没有坏处的，哦对了，这个标签Internet Explorer 9 以及更早的版本不支持。
<strong>12、meter 标签
同progress 相比 meter 元素来度量给定范围（gauge）内的数据：
<p>显示度量值：</p>
<meter value="3" min="0" max="10">3/10</meter><br>
<meter value="0.6">60%</meter>
Copier après la connexion
Copier après la connexion
<strong>效果图：
<strong>13、details 标签
HTML <details>元素可创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。<summary> 元素可为该部件提供概要或者标签。
<details>
  <summary>点击展开</summary>
  <p>世间万物，为我所用，非我所得。</p>
</details>
Copier après la connexion
Copier après la connexion
<strong>效果图：

注意： 目前只有 Chrome 和 Safari 6 支持 <details> 标签。
相关推荐：《html视频教程》
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!