那些不熟悉的 HTML 标签

时间：2012年10月2日分类：前端开发标签：HTML‚ HTML 标签评论：15

记录一些 Kayo 不熟悉的 HTML 标签，提醒自己。

<acronym>

定义首字母缩写词，通过 title 属性为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。

如：

<acronym title="World Wide Web">WWW</acronym>

亦可以作解释或注释之用。

所有主流浏览器均支持，但 HTML5 并不支持该标签，建议用 <abbr> 代替。

<cite>

定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。

如：Example

该标签内的文本会以斜体字体显示，但如果只需要字体斜体的效果，Kayo 建议使用 CSS font-style: italic 与普通标签代替。

<thead> & <tfoot>

thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

<thead> & <tfoot> 内部必须拥有 <tr> 标签！

如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。

<q>

该标签定义一个短的引用，并使用 cite 属性为标签内的内容加入注释。值得注意的是，浏览器经常会在这种引用的周围插入引号，若不习惯这种额外增加的引号，可以在网站的 css reset 中加入 blockquote, q {quotes: none; } 这一条规则，清除这些引号。

如：

<p>jQuery's goal is <q cite="http://jquery.com/">write less,do more</q>.</p>

效果：

jQuery's goal is write less,do more.

<map> & <area>

该标签用于定义客户端图像映射。图像映射指的是带有可点击区域的图像。
name 属性在 map 元素中是必需的。该属性与 <img> 标签的 usemap 属性相关联，以创建图像与映射之间的关系。

map 元素包含若干 area 元素，定义图像映射中的可点击区域，用于定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）。

很凌乱的定义是吧！或许再看看实际的例子：

<img src="./html5-css3.jpg" usemap="#html-css" alt="html5 css3" />

<map name="html-css" id="html-css">
	<area shape="rect" coords="46,31,99,120" href ="./css3.html" alt="Css3" />
	<area shape="rect" coords="198,31,250,120" href ="./html5.html" alt="Html5" />
</map>

效果 Demo

说明：map 标签中的 "map"指的是定义一张"图片地图"，它可以在图片某个区域创建一个可以点击区域，如同 a 标签的链接效果。上例中，创建了两个矩形区域，并划分了范围，分别链接到两个网页，从而实现点击小图查看大图的效果。

map 标签的属性只有 name ，而 area 标签则有多个属性，可以参见 w3school 。

<ins>

该标签用于描述文档中的更新和修正。通常与 del 标签配合使用。另外，浏览器经常会在为标签的内容添加下划线，因此，如同上面的 q 标签，若不习惯这种额外的下划线，可以在 css reset 中加入 ins {text-decoration: none; }

ins 标签有两个属性 cite 与 datatime 。cite 属性值是一个文档或者信息资源的 URI ，它指出为什么改变这个文档的解释信息，而 datetime 则指出更新发生的日期和时间。

例如一篇文章在发表后发现发表时间错了，可以这样修改相关内容：

<p>这篇文章发表于10月2号<del cite="https://kayosite.com/unfamilia-html-tags.html" datetime="20121002T153000+08:00"> 1:00 </del><ins cite="https://kayosite.com/unfamilia-html-tags.html" datetime="20121002T153000+8:00"> 15:30 </ins></p>

效果如下：

这篇文章发表于10月2号 ~~1:00~~ 15:30

本文由 Kayo Lee 发表，本文链接：https://kayosite.com/unfamilia-html-tags.html

评论列表

傅小黑
2012-10-02 16:48 回复

不熟悉很大程度上说明，没有用
- Kayo
  2012-10-02 18:19 回复
  
  @傅小黑平时基本不用，不过先了解下这些标签一旦用起来就有所准备了！
小白
2012-10-02 17:38 回复

我才知道原来还有这么多奇怪的html标签
- Kayo
  2012-10-02 18:20 回复
  
  @小白哈哈，奇怪的标签还有很多呢！
  - 小白
    2012-10-02 19:51 回复
    
    @Kayo 好像还有 label dd dt dl这些…
班森
2012-10-04 4:54 回复

不熟悉的也不會常用吧?
- Kayo
  2012-10-10 20:23 回复
  
  @班森基本很久才用一次了，写这篇文章也是为要用到的时候提前准备一下。
软件小品
2012-10-04 15:12 回复

是很少见，但常见的我也不熟悉，呵呵
- Kayo
  2012-10-10 20:24 回复
  
  @软件小品其实标签网上都有详细列出，只是熟悉的话开发时效率高点了
向日葵媒体设计
2012-10-08 15:20 回复

有些标签对应不同的html声明，不然w3c检查会报错的
- Kayo
  2012-10-10 20:33 回复
  
  @向日葵媒体设计嗯，DTD声明对一些HTML标签的作用有很大影响，所以写个HTML其实很也要注意很多方面呢！
肌肤问题
2012-10-08 23:25 回复

博客不错。不过好像速度有点慢。
你这个你也可能喜欢用的是什么插件？
似乎不是无觅。
- Kayo
  2012-10-10 20:39 回复
  
  @肌肤问题这个是自写的代码了，不大喜欢依赖插件。有兴趣的可以看看这篇介绍文章 https://kayosite.com/imitate-wumi-related-articles.html
杜小白
2012-10-15 12:03 回复

我连常用的都还不熟悉··· ·· 这就是差距，哈哈。
- Kayo
  2012-10-15 15:42 回复
  
  @杜小白其实标签这些不用纠结了，用多了就会的，给点时间自己！

那些不熟悉的 HTML 标签

你可能也喜欢

评论列表

回复