那些不熟悉但有趣的html元素大搜罗--源自W3School

柔光的暖阳◎ 2022-06-17 05:39 377阅读 0赞

## a系列 ##

**abbr**：缩写

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

效果示例：[http://www.w3school.com.cn/tiy/t.asp?f=html\_abbr][http_www.w3school.com.cn_tiy_t.asp_f_html_abbr]

**acronym**：首字母缩写

**area**：带有可点击区域的图像映射，和图像上的位置相对应。  
注意：area 元素总是嵌套在 map 标签中。  
img 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
    
    <map name="planetmap" id="planetmap">
      <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
      <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
      <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
    </map>这里写代码片

栗子：[http://www.w3school.com.cn/tiy/t.asp?f=html\_areamap][http_www.w3school.com.cn_tiy_t.asp_f_html_areamap]

## b系列 ##

**base**

<head>
    <base href="http://www.w3school.com.cn/i/" />
    <base target="_blank" />
    </head>
    
    <body>
    <img src="eg_smile.gif" />
    <a href="http://www.w3school.com.cn">W3School</a>
    </body>

base标签为页面上的所有链接规定默认地址或默认目标。因此在上面这个例子中，img的真正获取地址为：[http://www.w3school.com.cn/i/eg\_smile.gif][http_www.w3school.com.cn_i_eg_smile.gif]，而链接会以新窗口的方式打开（因为base规定了target=”\_blank”）

**bdo**：文字方向

如下这段文字将是从右向左书写

**blockquote**：标记长引用，它是一个块级元素，标签之内的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。

**br**：换行

<p>
    To break<br />lines<br />in a<br />paragraph,<br />use the br tag.
    </p>

## c系列 ##

**caption**：为表格定义标题

<table border="1">
      <caption>Monthly savings</caption>
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
    </table>

**code**：它是一个短语元素，定义了计算机代码文本。  
同样也是短语元素的标签包括：em strong dfn samp kbd var cite  
这些短语元素会在显示时呈现特殊的样式，并且，都具有各自确切的语意。  
em：把文本定义为强调的内容。  
strong：把文本定义为语气更强的强调的内容。  
dfn：定义一个定义项目。标记那些对特殊术语或短语的定义。  
code：定义计算机代码文本。  
samp：定义样本文本。  
kbd：定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。  
var：定义变量。您可以将此标签与 pre及 code 标签配合使用。  
cite：定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。

## d系列 ##

**datalist**：为input提供可选值

注意，Internet Explorer 和 Safari不支持datalist。

**dl/dt/dd**  
定义列表／定义列表条目的标题／定义列表条目的具体定义

<dl>
       <dt>计算机</dt>
       <dd>用来计算的仪器 ... ...</dd>
       <dt>显示器</dt>
       <dd>以视觉方式显示信息的装置 ... ...</dd>
    </dl>

**del**：被划去的文字

a dozen is <del>20</del> 12 pieces

可以和ins标签配合使用，ins标签标示新插入的部分。

a dozen is <del>20</del> <ins>12</ins> pieces

## e系列 ##

**embed**：定义嵌入的内容，比如插件。

## f系列 ##

**fieldset**：可将表单内的相关元素分组

当一组表单元素放到 fieldset 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

<form>
      <fieldset>
        <legend>person information</legend>
        name: <input type="text" />
        sex: <input type="text" />
      </fieldset>
      <fieldset>
        <legend>health information</legend>
        height: <input type="text" />
        weight: <input type="text" />
      </fieldset>
    </form>

**figure/figcaption**  
文档中的图片／图片的标题  
注意：”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

<figure>
      <figcaption>黄浦江上的的卢浦大桥</figcaption>
      <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
    </figure>

## h系列 ##

**hr**：水平分割线

<p>hr 标签定义水平线：</p>
    <hr />
    <p>段落1</p>
    <hr />
    <p>段落2</p>
    <hr />
    <p>段落3</p>

## k系列 ##

**keygen**：表单元素，规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。

Internet Explorer 和 Safari不支持keygen。

## l系列 ##

**label**：为input标签定义标注。  
abel 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

演示：[http://www.w3school.com.cn/tiy/t.asp?f=html\_label][http_www.w3school.com.cn_tiy_t.asp_f_html_label]

## m系列 ##

**mark**：高亮显示文本

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

**meter**：进度条

<meter value="3" min="0" max="10">十分之三</meter>
    <meter value="0.6">60%</meter> 这里写代码片

演示：[http://www.w3school.com.cn/tiy/t.asp?f=html5\_meter][http_www.w3school.com.cn_tiy_t.asp_f_html5_meter]

## n系列 ##

**noframes/noscript**  
用于提示用户浏览器不支持frame/script

## o系列 ##

**optgroup**

将相关的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>

演示：[http://www.w3school.com.cn/tiy/t.asp?f=html\_optgroup][http_www.w3school.com.cn_tiy_t.asp_f_html_optgroup]

**output**

执行input中数字的计算，然后显示结果

注意：Internet Explorer 不支持该标签  
演示：[http://www.w3school.com.cn/tiy/t.asp?f=html5\_output][http_www.w3school.com.cn_tiy_t.asp_f_html5_output]

## p系列 ##

**progress**：进度条

## s系列 ##

**source**：为音频定义源文件，浏览器会选择它所支持的那一个

<audio controls>
       <source src="horse.ogg" type="audio/ogg">
       <source src="horse.mp3" type="audio/mpeg">
     Your browser does not support the audio element.
    </audio>

**sub/sup**

上标和下标

**summary**

与details配合使用，用以显示详细信息；只有Chrome和Safari 6支持。

<details>
    <summary>HTML 5</summary>
    This document teaches you everything you have to learn about HTML 5.
    </details>

## t系列 ##

**thead/tbody/tfoot**

<table border="1">
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
    
      <tfoot>
        <tr>
          <td>Sum</td>
          <td>$180</td>
        </tr>
      </tfoot>
    
      <tbody>
        <tr>
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>February</td>
          <td>$80</td>
        </tr>
      </tbody>
    </table>

## u系列 ##

**u**：为文本添加下划线

## w系列 ##

**wbr**：定义一段带有 Word Break Opportunity 的文本。Word Break Opportunity规定在文本中的何处适合添加换行符。  
应用：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 wbr 元素来添加 Word Break Opportunity（单词换行时机）。

演示：[http://www.w3school.com.cn/tiy/t.asp?f=html5\_wbr][http_www.w3school.com.cn_tiy_t.asp_f_html5_wbr]

[http_www.w3school.com.cn_tiy_t.asp_f_html_abbr]: http://www.w3school.com.cn/tiy/t.asp?f=html_abbr
[http_www.w3school.com.cn_tiy_t.asp_f_html_areamap]: http://www.w3school.com.cn/tiy/t.asp?f=html_areamap
[http_www.w3school.com.cn_i_eg_smile.gif]: http://www.w3school.com.cn/i/eg_smile.gif
[http_www.w3school.com.cn_tiy_t.asp_f_html_label]: http://www.w3school.com.cn/tiy/t.asp?f=html_label
[http_www.w3school.com.cn_tiy_t.asp_f_html5_meter]: http://www.w3school.com.cn/tiy/t.asp?f=html5_meter
[http_www.w3school.com.cn_tiy_t.asp_f_html_optgroup]: http://www.w3school.com.cn/tiy/t.asp?f=html_optgroup
[http_www.w3school.com.cn_tiy_t.asp_f_html5_output]: http://www.w3school.com.cn/tiy/t.asp?f=html5_output
[http_www.w3school.com.cn_tiy_t.asp_f_html5_wbr]: http://www.w3school.com.cn/tiy/t.asp?f=html5_wbr