Was sind die ungewöhnlichen Tags in HTML?-HTML-Tutorial-php.cn

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.

Was sind die ungewöhnlichen Tags in HTML?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.

<strong>HTML-ungewöhnliche Tags

<strong>1. Pre-Tag

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">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div>-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. <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">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。

例如：

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

Nach dem Login kopieren

<strong>效果图：

<strong>2、figure 与 figcaption

HTML <figure> 元素代表一段独立的内容, 经常与说明（caption）<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>

Nach dem Login kopieren

<strong>效果图：

Was sind die ungewöhnlichen Tags in HTML?

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

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

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

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

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

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

Nach dem Login kopieren

<strong>效果图：

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

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

Nach dem Login kopieren

<strong>效果图：

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

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

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

Nach dem Login kopieren

<strong>效果图：

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

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

Nach dem Login kopieren

<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>

Nach dem Login kopieren

<strong>效果图：

<strong>7、bdo 标签

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

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

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

Nach dem Login kopieren

<strong>效果图：

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

<strong>8、vedio、audio 和 track

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

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

Zum Beispiel: 🎜

<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>

Nach dem Login kopieren

🎜🎜Rendering: 🎜🎜🎜

🎜🎜🎜2. Figure und figcaption🎜🎜🎜HTML <figure> stellt einen unabhängigen Inhalt dar und wird häufig in Verbindung mit der Beschreibung (caption)

<figcaption>< verwendet /code> 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 (< em>< /code>) markiert Inhalte, die Benutzer auf das Lesen konzentrieren müssen. <em>-Elemente können verschachtelt werden Wird im Allgemeinen als 🎜" <em>Kursivschrift "🎜 angezeigt. 🎜🎜Strong-Element (<strong>) gibt an, dass der Text sehr wichtig ist und im Allgemeinen in 🎜Fettschrift🎜 angezeigt wird. 🎜🎜🎜4. del-Tag und ins-Tag 🎜🎜🎜HTMLs <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>
Nach dem Login kopieren
Nach dem Login kopieren
🎜🎜Rendering: 🎜
🎜 🎜 Das HTML-Element <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>
Nach dem Login kopieren
Nach dem Login kopieren
🎜🎜Rendering: 🎜🎜🎜🎜🎜🎜 5 . Sub-Tag und Sup-Tag 🎜🎜🎜HTML <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>
Nach dem Login kopieren
Nach dem Login kopieren
🎜🎜Rendering: 🎜🎜🎜🎜🎜HTML The Das <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>
Nach dem Login kopieren
Nach dem Login kopieren
🎜🎜Rendering: 🎜
🎜 🎜 🎜6. Ruby-Tag🎜🎜🎜HTML <ruby>-Element wird verwendet, um ostasiatische phonetische Phonetik- oder Zeichenanmerkungen anzuzeigen. 🎜<details>
  <summary>点击展开</summary>
  <p>世间万物，为我所用，非我所得。</p>
</details>
Nach dem Login kopieren
Nach dem Login kopieren
🎜🎜Rendering: 🎜
🎜 🎜 🎜7. Das bdo-Tag 🎜🎜🎜 gibt die Textrichtung des untergeordneten Elements an und überschreibt explizit die Standardtextrichtung. Das 🎜🎜<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 <video>< /code> verwendet haben <audio>, da sie häufiger verwendet werden, werden <video> und <audio> hier nicht vorgestellt Sprechen Sie über <track>. 🎜🎜HTML-Element <track> wird als untergeordnetes Element der Medienelemente <audio> und <video> verwendet. Es ermöglicht die Angabe zeitgesteuerter Untertitel (oder zeitbasierter Daten), um beispielsweise Untertitel automatisch zu verarbeiten. 🎜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>
Nach dem Login kopieren
Nach dem Login kopieren
<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>
Nach dem Login kopieren
Nach dem Login kopieren
<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>
Nach dem Login kopieren
Nach dem Login kopieren
<strong>效果图：
<strong>11、progress 标签
HTML中的progress (<progress>) 元素用来显示一项任务的完成进度.
进度条：<progress value="70" max="100">70 %</progress> <br />
进度条：<progress></progress>
Nach dem Login kopieren
Nach dem Login kopieren
<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>
Nach dem Login kopieren
Nach dem Login kopieren
<strong>效果图：
<strong>13、details 标签
HTML <details>元素可创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。<summary> 元素可为该部件提供概要或者标签。
<details>
  <summary>点击展开</summary>
  <p>世间万物，为我所用，非我所得。</p>
</details>
Nach dem Login kopieren
Nach dem Login kopieren
<strong>效果图：

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