Maison > Article > interface Web > Quelles sont les balises rares en HTML ?
Quelles sont les balises rares en HTML ?
- 青灯夜游original
- 2021-12-23 16:27:563633parcourir
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.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.
balises html rares
1. balise pré
L'élément HTML <pre class="brush:php;toolbar:false"></pre> 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. <pre class="brush:php;toolbar:false"></pre> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。
例如：
<pre class="brush:php;toolbar:false">
< Hello World > 我 就是 想
--------------------------- 乱 七
\ ^__^ 八 遭
\ (oo)\_______
(__)\ )\/\ 的 定位 写
||----w |
|| || 出来 ~
效果图：
2、figure 与 figcaption
HTML <figure></figure> 元素代表一段独立的内容, 经常与说明（caption）<figcaption></figcaption>配合使用, 并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等.
<figure> <img style="max-width:90%" src="img/2.jpg" alt="Quelles sont les balises rares en HTML ?" > <figcaption>美丽的海景~</figcaption> </figure>
效果图：
3、em 标签 与 strong 标签
HTML 着重元素 (<em></em>) 标记出需要用户着重阅读的内容， <em></em> 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读,一般显示为 " 倾斜字体 "。
Strong 元素 (<strong></strong>)表示文本十分重要，一般用粗体显示。
4、del 标签 与 ins 标签
HTML的 <del></del> 标签表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。
<p><del>这段文本已被删除。 </del>, 请浏览其它部分</p>
效果图：
HTML <ins></ins> 元素定义已经被插入文档中的文本。
<ins>这一段文本是新插入至文档的。</ins>
效果图：
5、sub 标签 与 sup 标签
HTML <sub></sub> 元素定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更低并且更小。
<p>水的化学公式: H<sub>2</sub>O</p>
效果图：
HTML <sup></sup> 元素定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更低并且更小。
<p>2 + 3<sup>2</sup>= 11</p>
效果图：
6、ruby 标签
HTML <ruby></ruby> 元素 被用来展示东亚文字注音或字符注释。
<ruby> 曲 <rp>(</rp><rt>qu</rt><rp>)</rp> 小 <rp>(</rp><rt>xiao</rt><rp>)</rp> 强 <rp>(</rp><rt>qiang</rt><rp>)</rp> </ruby>
效果图：
7、bdo 标签
指定子元素的文本方向 ，显式地覆盖默认的文本方向。
<bdo></bdo> 元素 ( HTML双向覆盖元素 )用于覆盖当前文本的朝向，它使得字符按给定的方向排列。
<p>这段文本是从左到右的</p> <p><bdo dir="rtl">这段文本是从右到左的</bdo></p>
效果图：
当你用css 写大量的样式的时候，有没有想过，有一个标签可以代替大量的样式属性呢。
8、vedio、audio 和 track
vedio、audio 和 track 三者都是 HTML5 的产物，相信很多小伙伴，都肯定使用过<video></video>和<audio></audio> ，因为比较常用，这里就不介绍<video></video>和<audio></audio>了，今天说一下<track></track>。
HTML <track></track> 元素 被当作媒体元素 <audio></audio> 和<video></video>
<video controls width="250" src="xxx.mp4">
<track default kind="captions"
srclang="en"
src="xxxxx.vtt"/>
Sorry, your browser doesn't support embedded videos.
</video>🎜🎜Rendu : 🎜🎜🎜🎜🎜🎜2. figure et figcaption🎜🎜🎜L'élément HTML <figure></figure> représente un élément de contenu indépendant et est souvent utilisé en conjonction avec la description (légende) , 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>🎜🎜Rendu : 🎜🎜🎜
🎜🎜🎜3. balise em et balise forte🎜🎜🎜Élément d'emphase HTML () marque le contenu qui nécessite que les utilisateurs se concentrent sur la lecture. Les éléments <em></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 🎜" Police italique "🎜. 🎜🎜L'élément fort (<strong></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></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>
🎜🎜Rendu : 🎜
🎜 🎜 L'élément HTML <ins></ins> définit le texte qui a été inséré dans le document. 🎜进度条：<progress value="70" max="100">70 %</progress> <br />
进度条：<progress></progress>
🎜🎜Rendu : 🎜🎜🎜<sub></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>
🎜🎜Rendu : 🎜🎜🎜🎜🎜HTML Le L'élément <sup></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>
🎜🎜Rendu : 🎜
🎜 🎜 🎜6. balise ruby 🎜🎜🎜L'élément HTML <ruby></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></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 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!