您的位置：首页 > Web前端 > HTML5

对HTML5中一些不常见的标签整理

2016-08-06 16:23 405 查看 
<abbr>
标签表示一个缩写形式。比如 “Inc.”、”etc.”。通过对缩写词语进行标记，您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。

HTML 5 不支持 
<acronym>
。请使用 
<abbr>
代替。

示例 (abbr 就是abbreviation(缩写)的缩写)：

<abbr title="abbreviation">abbr</abbr>


abbr

**`` 标签为文档或 section 定义联系信息。**
示例：

<address>
此文档的作者：<a href="http://www.justforuse.cn/wordpress" target="_blank">justforuse</a>
</address>


此文档的作者：justforuse

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

常见用法：

<img src ="planets.gif" alt="Planets" usemap ="#planetmap" />

<map id ="planetmap">
<area shape ="rect" coords ="0,0,82,126" href ="sun.htm" alt="Sun" />
<area shape ="circle" coords ="90,58,3" href ="mercur.htm" alt="Mercury" />
<area shape ="circle" coords ="124,58,8" href ="venus.htm" alt="Venus" />
</map>


**`` 标签规定页面中所有链接的基准 url。**

例子：
假设图像的绝对地址是：

<img src="http://www.w3school.com.cn/i/pic.gif" />


现在我们在页面中的 head 部分插入 `` 标签，规定页面中所有链接的基准 url：

<head>
<base href="http://www.w3school.com.cn/i/" />
</head>


在上例中的页面上插入图像时，我们必须规定相对的地址，浏览器会寻找文件所使用的完整 URL：

<img src="pic.gif" />


**`` 标签覆盖默认的文本方向。**
示例：

<bdo dir="rtl">it changed the direction</bdo>


it changed the direction

**`` 标签定义引用。`` 标签定义一个短的引用。**

**`` 标签定义表格标题。`` 标签必须紧随 `` 标签之后。**
示例：

<table>
<caption>This is a caption</caption>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>


This is a caption
Cell 1Cell 2
**`` 标签定义命令按钮，比如单选按钮、复选框或按钮。**

`` 标签定义一个定义列表。`` 标签定义一个定义列表中的一个项目，以及 dialog 中的角色。`` 标签定义一个定义列表中对项目的描述。

示例：

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>


Coffee
Black hot drink
Milk
White cold drink

**`` 标签定义文档中已删除的文本。`` 标签定义文档的其余部分之外的插入文本。**一同使用表示文本的更新与修正。

示例：

一打有 <del>二十</del> <ins>十二</ins> 件


一打有 二十 十二 件

**`` 标签定义对话，比如交谈。类比``**

示例：

<dialog>
<dt>老师</dt>
<dd>2+2 等于？</dd>
<dt>学生</dt>
<dd>4</dd>
<dt>老师</dt>
<dd>答对了！</dd>
</dialog>


老师
2+2 等于？
学生
4
老师
答对了！

**`` 标签定义嵌入的内容，比如插件。**

**`` 标签元素可将表单内的相关元素分组。**

示例：

<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>


**`` 标签运行中的进程。**

**`` 标签可定义下标文本。`` 可定义上标文本。**
示例：

<p>
This text contains <sub>subscript</sub>
</p>

<p>
This text contains <sup>superscript</sup>
</p>


This text contains subscript

This text contains superscript

<time>
标签定义日期或时间，或者两者。

个人感觉HTML5中新增了标签使得文档结构更加语义化，即标签类型可以一定程度反应包含内容的属性，而不仅仅是定义了一个文档区域及结构。同时，放弃支持一些老旧的标签功能转而使用CSS来实现也使得”内容元素“与“样式元素”更加具有区分度，符合模块化概念。

此文档的作者：justforuse

Github Pages：justforuse
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航