那些不熟悉的 HTML 标签

记录一些 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="http://kayosite.com/unfamilia-html-tags.html" datetime="20121002T153000+08:00"> 1:00 </del><ins cite="http://kayosite.com/unfamilia-html-tags.html" datetime="20121002T153000+8:00"> 15:30 </ins></p>

效果如下:

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

本文由 Kayo Lee 发表,本文链接:http://kayosite.com/unfamilia-html-tags.html

评论列表

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail
:wink: :roll: :oops: :mrgreen: :idea: :cry: :?: :-| :-o :-P :-? :) :( 8-O