Heim > Artikel > Web-Frontend > Was sind die ungewöhnlichen Tags in HTML?
Was sind die ungewöhnlichen Tags in HTML?
- 青灯夜游Original
- 2021-12-23 16:27:563633Durchsuche
Ungewöhnlich verwendete Tags in HTML sind: pre, Figure, figcaption, em, strong, del, ins, sub, sup, Ruby, BDO, Vedio, Audio, Track, Optgroup, Output, Progress, Meter usw.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.
HTML-ungewöhnliche Tags
1. Pre-Tag
HTML <pre class="brush:php;toolbar:false"></pre>-Element stellt vordefinierten formatierten Text dar. Der Text in diesem Element wird normalerweise in einer Schriftart mit fester Breite entsprechend dem Format in der Originaldatei angezeigt, und Leerzeichen (wie Leerzeichen und Zeilenumbrüche) im Text werden angezeigt. <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="Was sind die ungewöhnlichen Tags in 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>🎜🎜Rendering: 🎜🎜🎜🎜🎜🎜2. Figure und figcaption🎜🎜🎜HTML <figure></figure> stellt einen unabhängigen Inhalt dar und wird häufig in Verbindung mit der Beschreibung (caption) und als unabhängige Referenzeinheit. Wenn es zum Hauptinhaltsfluss (Hauptfluss) gehört, ist seine Position unabhängig vom Körper. Dieses Tag wird häufig verwendet, um auf Bilder, Illustrationen, Tabellen, Codeausschnitte usw. im Haupttext zu verweisen. image/520 /761/930/1640247371547878.png" title="1640247371547878.png" alt="Was sind die ungewöhnlichen Tags in HTML?"/>🎜🎜🎜3. em-Tag und starkes Tag🎜🎜🎜HTML-Hervorhebungselement () markiert Inhalte, die Benutzer auf das Lesen konzentrieren müssen. <em></em>-Elemente können verschachtelt werden Wird im Allgemeinen als 🎜" Kursivschrift "🎜 angezeigt. 🎜🎜Strong-Element (<strong></strong>) gibt an, dass der Text sehr wichtig ist und im Allgemeinen in 🎜Fettschrift🎜 angezeigt wird. 🎜🎜🎜4. del-Tag und ins-Tag 🎜🎜🎜HTMLs <del></del>-Tag stellt einen Textinhalt dar, der aus dem Dokument 🎜gelöscht🎜 wurde. Sie können dieses Tag beispielsweise verwenden, wenn Sie Änderungsdatensätze oder Quellcodeunterschiede anzeigen müssen. 🎜<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>🎜🎜Rendering: 🎜
🎜 🎜 Das HTML-Element <ins></ins> definiert Text, der in das Dokument eingefügt wurde. 🎜<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>
🎜🎜Rendering: 🎜🎜🎜🎜🎜🎜 5 . Sub-Tag und Sup-Tag 🎜🎜🎜HTML <sub></sub>-Element definiert einen Textbereich, der aus typografischen Gründen niedriger und kleiner als der Haupttext angezeigt werden soll. 🎜进度条：<progress value="70" max="100">70 %</progress> <br />
进度条：<progress></progress>
🎜🎜Rendering: 🎜🎜🎜🎜🎜HTML The Das <sup></sup>-Element definiert einen Textbereich, der aus typografischen Gründen tiefer und kleiner als der Haupttext angezeigt werden soll. 🎜<p>显示度量值：</p>
<meter value="3" min="0" max="10">3/10</meter><br>
<meter value="0.6">60%</meter>
🎜🎜Rendering: 🎜
🎜 🎜 🎜6. Ruby-Tag🎜🎜🎜HTML <ruby></ruby>-Element wird verwendet, um ostasiatische phonetische Phonetik- oder Zeichenanmerkungen anzuzeigen. 🎜<details>
<summary>点击展开</summary>
<p>世间万物，为我所用，非我所得。</p>
</details>
🎜🎜Rendering: 🎜
🎜 🎜 🎜7. Das bdo-Tag 🎜🎜🎜 gibt die Textrichtung des untergeordneten Elements an und überschreibt explizit die Standardtextrichtung. Das 🎜🎜<bdo></bdo>-Element ( HTML Bidirektionales Overlay-Element ) wird verwendet, um die Ausrichtung des aktuellen Textes zu überschreiben, wodurch die Zeichen in einer bestimmten Richtung angeordnet werden . 🎜rrreee🎜🎜Rendering: 🎜🎜🎜🎜🎜Verdammt wann Sie verwenden css, um eine große Anzahl von Stilen zu schreiben. Haben Sie jemals daran gedacht, dass ein Tag eine große Anzahl von Stilattributen ersetzen kann? 🎜🎜🎜8, Vedio, Audio und Track🎜🎜🎜Vedio, Audio und Track sind alles Produkte von HTML5. Ich glaube, viele Freunde müssen Das obige ist der detaillierte Inhalt vonWas sind die ungewöhnlichen Tags in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!