What are the uncommon tags in html?

htmlUncommonly used tags include: pre, figure, figcaption, em, strong, del, ins, sub, sup, ruby, bdo, vedio, audio, track, optgroup, output, progress, meter, etc. .

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

htmlUncommonly used tags

1. pre tag

HTML <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">Copy after login</div></div> Element represents predefined formatted text. The text in this element is usually displayed in a fixed-width font according to the format in the original file, and whitespace characters (such as spaces and line breaks) in the text will be displayed.

For example:

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

Copy after login

Rendering:

##2, figure and figcaption

HTML

The element represents an independent piece of content, often used in conjunction with the description (caption)

, and as an independent reference unit . When it belongs to the main content flow (main flow), its position is independent of the body. This tag is often used to refer to pictures, illustrations, tables, code snippets, etc. in the main text.

<figure>
	<img  src="/static/imghw/default1.png"  data-src="img/2.jpg"  class="lazy"    style="max-width:90%"   alt="What are the uncommon tags in html?" >
	<figcaption>美丽的海景~</figcaption>
</figure>

Copy after login

Rendering:

##3. em tag and strong tag

HTML emphasis element (

) marks the content that users need to focus on reading, <em&gt ; elements can be nested. The deeper the nesting level, the more important the content it contains needs to be read. It is generally displayed as " Italic font ". The Strong element (

) indicates that the text is very important and is generally displayed in bold.

4. The del tag and the ins tag

HTML's

tag indicates that something has been deleted from the document## The text content of #. For example, you can use this tag when you need to display modification records or source code differences.

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

Copy after login

Rendering:

HTML

The element defines text that has been inserted into the document.

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

Copy after login

Rendering:

##5. Sub tag and sup tag

The HTML element defines a text area that, for typographical reasons, should be displayed lower and smaller than the main text.

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

Copy after login

Rendering:

HTML

^{element defines a text area, out of For typographical reasons, it should be displayed lower and smaller than the main text.}

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

Copy after login

Rendering:

6, ruby ​​tag

HTML < The ruby> element is used to display East Asian phonetic phonetic or character annotations.

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

Copy after login

Rendering:

7, bdo tag

Specifies the text direction of the child element , to explicitly override the default text direction. The

element (

HTML Bidirectional Overlay Element

) is used to override the orientation of the current text, which causes the characters to be arranged in a given direction.

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

Copy after login

Rendering:

When you use

css to write a large number of styles, is there any I thought about it, there is a tag that can replace a large number of style attributes.

8, vedio, audio and track

vedio, audio and track are all products of HTML5. I believe many friends are. I must have used

<video>

and <audio>. Because they are more commonly used, <video> and <audio&gt will not be introduced here. ;, let’s talk about <track> today. The HTML <track> element is used as a child element of the media elements

<audio>

and <video>. It allows specifying timed subtitles (or time-based data), for example to automatically process subtitles. <p><code>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>

Copy after login

效果图：

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>

Copy after login

效果图：

简单的介绍这个功能，大多数的时候，我们所选择的框架开发，都会集成这种效果，可维护性也比较好，这里权当认识一下这个标签，不要遗忘了它~

10、output

HTML <output> 标签是HTML 5 中的新标签，表示计算或用户操作的结果,执行计算然后在 <output> 元素中显示结果。

注释：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>

Copy after login

效果图：

11、progress 标签

HTML中的progress (<progress>) 元素用来显示一项任务的完成进度.

进度条：<progress value="70" max="100">70 %</progress> <br />
进度条：<progress></progress>

Copy after login

效果图：

提示：请结合 <progress> 标签与 JavaScript 一同使用，来显示任务的进度。

不过一般会用到进度条的地方，都是组件，框架自带之类的，这个算是鸡肋的了,不过了解一下还是没有坏处的，哦对了，这个标签Internet Explorer 9 以及更早的版本不支持。

12、meter 标签

同progress 相比 meter 元素来度量给定范围（gauge）内的数据：

<p>显示度量值：</p>
<meter value="3" min="0" max="10">3/10</meter><br>
<meter value="0.6">60%</meter>

Copy after login

效果图：

13、details 标签

HTML <details>元素可创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。<summary> 元素可为该部件提供概要或者标签。

<details>
  <summary>点击展开</summary>
  <p>世间万物，为我所用，非我所得。</p>
</details>

Copy after login

效果图：

注意： 目前只有 Chrome 和 Safari 6 支持 <details> 标签。

相关推荐：《html视频教程》

The above is the detailed content of What are the uncommon tags in html?. For more information, please follow other related articles on the PHP Chinese website!