其他分享
首页 > 其他分享> > html标签补充

html标签补充

作者：互联网

html中有很多标签在平常操作中总是用到，还有一部分不怎么用，甚至不知道还有这个标签？为了实现标签的效果用了好多css样式，最后也得不偿失，下面说一说都有哪些标签且现在H5可以用的：

1.<sup>代表上标。上标文本将会显示在当前文本流中字符高度的一半为基准线的上方，但是与当前文本流中文字的字体和字号都是一样的。上标文本能用来添加脚注，比如 WWW[1]。

<p>这个文本包含 <sup>上标</sup> 文本。</p>

效果：这个文本包含 上标 文本。

2.<sub> 标签定义下标文本。下标文本将会显示在当前文本流中字符高度的一半为基准线的下方，但是与当前文本流中文字的字体和字号都是一样的。下标文本能用来表示化学公式，比如 H2O。

<p>这个文本包含 <sub>下标</sub>文本。</p>

效果：这个文本包含 下标文本。

3.<wbr> (Word Break Opportunity) 标签规定在文本中的何处适合添加换行符。

提示：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 <wbr> 元素来添加 Word Break Opportunity（单词换行时机）。

4.<details> 标签

  1. 规定了用户可见的或者隐藏的需求的补充细节。
  2. 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。
  3. 元素的内容对用户是不可见的，除非设置了 open 属性。

提示：与 <summary> 标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。

<details>
<summary>点开我即可展示</summary>
<p> 展示的第一个.</p>
<p>展示的第二个</p>
</details>

效果：

 

 

5.<small> 标签定义小型文本（和旁注）。

<p> runoob.com - the world's largest web development site.</p>
<p><small> Copyright 1999-2050 by Refsnes Data.</small></p>

效果：

runoob.com - the world's largest web development site.

Copyright 1999-2050 by Refsnes Data.

6.<select> 元素用来创建下拉列表。元素中的 <option> 标签定义了列表中的可用选项。

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

效果：

 

 

 

 7.<ruby> 标签定义 ruby 注释（中文注音或字符）。将 <ruby> 标签与 <rt> 和 <rp> 标签一起使用：<ruby> 元素由一个或多个需要解释/发音的字符和一个提供该信息的 <rt> 元素组成，还包括可选的 <rp> 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。

<ruby>
  隶 <rp>(</rp><rt>Li</rt><rp>)</rp>
  书 <rp>(</rp><rt>shu</rt><rp>)</rp>
</ruby>

效果：

8.<q> 标签定义一个短的引用。浏览器经常会在这种引用的周围插入引号。

<p>WWF's goal is to: 
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

效果：WWF's goal is to: Build a future where people live in harmony with nature. We hope they succeed.

9.<progress> 标签定义运行中的任务进度（进程）。

提示：请将 <progress> 标签与 JavaScript 一起使用来显示任务的进度。

注释：<progress> 标签不适合用来表示度量衡（例如，磁盘空间使用情况或相关的查询结果）。表示度量衡，请使用 <meter> 标签代替。

下载进度：<progress value="22" max="100"></progress>

效果：

10.<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。比如：磁盘使用情况，查询结果的相关性等。

<p>展示给定的数据范围：</p>
<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>

效果：

 11.<pre> 标签可定义预格式化的文本。被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre>
此例演示如何使用 pre 标签
对空行和    空格
进行控制
</pre>

效果：

此例演示如何使用 pre 标签
对空行和    空格
进行控制

 12.<object> 元素在 HTML 加入 Flash 文件：

 13.<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签。

<p>Do not forget to buy <mark>milk</mark> today.</p>

效果：Do not forget to buy milk today.

14. <ins>一段带有新插入部分的文本：

<p>My favorite color is  <ins>red</ins>!</p>

效果：My favorite color is  red!

15.<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。<figure> 元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。

<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>

<figure>
  <img src="img_pulpit.jpg" tppabs="http://w3schools.com/tags/img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>

效果：

 

 

 16.<figcaption> 标签为 <figure> 元素定义标题。<figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置。

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>

效果：

 

 

 17.<fieldset> 标签可以将表单内的相关元素分组。<fieldset> 标签会在相关表单元素周围绘制边框。

提示：<legend> 标签为 <fieldset> 元素定义标题。

<form>
 <fieldset>
  <legend>Personalia:</legend>
  Name: <input type="text"><br>
  Email: <input type="text"><br>
  Date of birth: <input type="text">
 </fieldset>
</form>

效果：

 

 

 18.<del> 标签定义文档中已删除的文本。

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

效果：My favorite color is blue red!

19.<datalist> 标签规定了 <input> 元素可能的选项列表。<datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。请使用 <input> 元素的 list 属性来绑定 <datalist> 元素。

<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

效果：

20.<bdo> 标签用来覆盖默认的文本方向。有两个值：ltr和rtl

<p>该段落文字从左到右显示。</p>  
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>

效果：

 

 21.<map>和<area>

<map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。

<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。

area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

<area> 标签定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）。

<area> 元素始终嵌套在 <map> 标签内部。

注释： <img> 标签中的 usemap 属性与 <map> 元素中的 name 相关联，以创建图像与映射之间的关系。

 

标签：定义,效果,补充,标签,元素,html,图像,文本
来源： https://www.cnblogs.com/heibaiqi/p/16649778.html