一些冷门但是关键时刻很有用的html标签与属性

html的标签个数不多，大概90多个，去掉一些非标准的以及不推荐的标签，例如b,i之类的，大概剩50，60个。通常做开发的时候，用在界面上 的，都是p,div,span,table,h1-h4，加上表单元素的form,input,select,textarea。除了这些之外，有些比较 少用的标签往往都被忽略了，关键时候，这些标签跟属性比你绞尽脑汁去想办法解决好得多。这里一些有用的标签跟属性列举一番。以下按字母顺序介绍,后面都附 带w3school提供的测试使用地址。

1.a

链接标记，这个常用得不行，地球人都知道。这里要说的是href属性。说到href，地球人都笑了，a里面几乎都有href属性不是?这里要说的是 一个特殊的属性值，href="mailto:fangyuqiang@gmail.com"，比较了解html又笑了，这个就是可以打开电脑上默认的邮 件发送工具给fangyuqiang@gmail.com发送邮件，老式的网站很经常出现在联系我们的那个按钮上面的嘛。实际，更深一层的，href属性 里面甚至是可以指定要发送的邮件的标题跟正文内容，甚至抄送的人都可以指定，这个知道的人就不多了吧？

具体的使用方法：
可以使用形如"mailto: ddsd@gmail.com?cc=test@test.com&bcc=test1@test1.com&subject=一些冷门但是关键时刻很有用的html标签与属性&body=这篇文章可以看看哦" 这样的语句，在这个语句中第一个功能以"?"开头，后面的每一个功能以"&"开头。当用鼠标单击这个邮件地址时，在随后打开的邮件编辑窗口中，我 们将看到在收件人地址栏中自动填写上了ddsd@gmail.com，在抄送地址栏中自动填上了test@test.com，在暗送地址栏中自动填写上了 test1@test1.com，在主题栏中自动填写上了"'一些冷门但是关键时刻很有用的html标签与属性"，在信件的正文部分将自动出现"这篇文章 可以看看哦"这样的文字。注意，多个邮件地址可以用分号;隔开，这样就可以同时发送给多个地址。

这个有啥用呢？在有些情况下，假设你做了一个按钮，希望用户点击按钮后会给你发送邮件提建议，你就可以这么做，把标题内容体都先写好，这样用户体验会好得多。

http://www.w3school.com.cn/tiy/t.asp?f=html_mailto2

另外，mailto这样的地址也是可以出现在form的action里面的。也许更方便：

http://www.w3school.com.cn/tiy/t.asp?f=html_form_mail

此外，<a>的rel跟rev属性，虽然现在没有浏览器支持，我觉得也是值得注意的。尤其是rel，为啥呢？虽然浏览器不支持，但是SEO却有用到。有多个主流搜索引擎可以识别这个属性。目前可以用rel="canonical"来表明内容相同的网页，可以避免被搜索引擎认为是重复内容而导致被屏蔽或者删除索引。

2.abbr与acronym

这2个标记都少用，简单的说，都是定义与显示缩写的。abbr标签貌似IE6不支持。使用这2个标签主要是为了语义化与SEO。哦，对了，还可以炫耀你懂的标签比较多，比如说我的博客最下面的valid XHTML，鼠标移动上去就会显示完整含义。

http://www.w3school.com.cn/tiy/t.asp?f=html_abbracronym

3.area

这是几年前很流行的技术，图像热点链接，点击图像上面不同的部分进入不同的链接，现在使用得比较少了，也没什么人关注了。这里重提下，是因为现在这 个标签在webgame的地图上被大量运用，如果你对webgame有兴趣，或许你应该对这个标签的有深入的调研与了解。推荐使用Dreamweaver 来学习使用这个标记。

http://www.w3school.com.cn/tiy/t.asp?f=html_areamap

4.base

使用myeclipse的童鞋对这个标签应该比较熟悉，因为myeclipse自动生成的html代码会带有这个标签。它可以为页面上的所有链接规 定默认地址或默认目标。指定base元素后，页面会根据使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。有时候你需要书写大量的完整的url地址的页面上，并且这些url都是来自同一基准地址的话，就可以应用base标签来指定，后面的url就可以 放心的全部采用简单的相对地址。

http://www.w3school.com.cn/tiy/t.asp?f=html_base_test

5.button

有些人搞不清楚button跟input type=“button”，input type=“submit”的区别，对于各自的使用场景不了解。此外，由于不同的场景下不同浏览器对于button的处理也有差异，这个标签看起来简单，却也容易搞糊涂。

<button> 控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容，可控制性比较强。但是特别要注意的是：使 用button最好指定type属性，因为IE 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"，也就是说，IE下默认的button行为类似input type="button"，而其他浏览器例如firefox，行为类似input type="submit"。如果你在表单内部放了一个button标签，只是为了点击调用一个Javascript函数，IE下可能如你所愿，但是firefox下可能把你的表单都提交走了。此外，还有一点，提交表单的时候，IE 将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容。

http://www.w3school.com.cn/tiy/t.asp?f=html_button_test

6.caption

定义表格的标题，比较少用，只是为了语义化，以及可用性（针对屏幕阅读器）。

7.col与colgroup

这2个属性其实本来应该是经常写table的人的福音一样的标签的。它可以为表格中一个或多个列定义属性值。比如说你表格中所有列都是左对齐，其中 一列右对齐，不使用这个标签的话，那你就需要所有的td加上一个css的类来达到这个效果。但是用这个标签，只要一句<col align="center">就可以解决了。既然这么好，那为啥还说，本来应该是福音呢？悲剧的地方在于，这2个w3c标准标签与属性却只 有IE能完整支持，firefox等目前都做不到（可以通过一些繁琐的高级的css来hack实现）。如果你的项目不考虑浏览器兼容，那你可以爽爽的用， 或者针对firefox之类的浏览器写一个js脚本判断col，根据col动态添加对应的类到td上。

http://www.w3school.com.cn/tiy/t.asp?f=html_col_test

http://www.w3school.com.cn/tiy/t.asp?f=html_colgroup_test

8.dd,dl,dt

定义列表的3个标签。这3个标签应该说不属于冷门标签的范畴，但是本来使用范围也不广的才对。不过据说百度搜索非常偏爱这个标签，所以国内很多做SEO都大量用这个标签来做，看看dedecms的主题，几乎完全用这3个标签写的html。被滥用了。

9.del与ins

这2个标记用来显示被删除的文本以及插入的文本，一般浏览器会显示成删除线与下划线。一些blogger在更新博文的时候会经常使用这2个标记，符合语义化与SEO。如果不用这2个标记，使用css的text-decoration也能达到同样的效果。

http://www.w3school.com.cn/tiy/t.asp?f=html_delins

10.input

input标签常见得不行，但是input的属性也非常多，有几个稍微特别的属性可以介绍下。

accept属性，类型为file的文件上传框，可以指定accept，然后通过Javascript之类的，在客户端做一下判断上传的类型是否符合格式。注意，就算你在input上面指定了accept，浏览器也不会去保证上传上去的格式是符合要求的，同样还需要在服务端做判断。

disabled跟readonly属性，2个使用上区别不大。disabled范围更广一些，它可以禁止下拉框。在一些需要禁用文本框的时候，看情况选择使用这2个属性，readonly不能修改值，但是可以选中复制，可能更加友好。

size属性，相信吃过这个苦头的人也有不少吧。相同的size，在IE下，text跟password类型的input显示的宽度是不一样的，而其他浏览器却会显示一样的宽度。所以还是用css来定义input的宽度吧。

maxlength属性，这个是很好用的属性。这个限制长度的属性是基于浏览器原生的实现，不需要再用Javascript去控制避免用户输入过长的数据,这可是标准属性。

http://www.w3school.com.cn/tags/tag_input.asp

11.link的media属性

这个就是很常见的引入css的标记（虽然它本意不仅仅是用来引入css的，但是目前浏览器只支持引入css）。这里要提的是media属性。 media指定了当前的css针对的设备，如果识别到对应的设备来访问，就调用对应的css link。最常用的其实就2种，一种，就是不写，默认是screen，计算机屏幕。一种就是print，打印用。经常可以在网页上面看到一个打印的链接， 可以直接把网页打印出来。最早时候我在新浪看到它的打印的实现，是专门设计一个页面，点击打印就进到一个打印专用的页面，然后用浏览器的打印。其实完全不 需要，只要在所需要提供打印的页面，加入一个专门的media=“print”的css link，为打印的界面设计专门设计一套css，不需要再去打开新页面。

通常建议使用link而不是@import来引入css。根据yahoo提出的前端性能优化法则，css应该放在顶部，尽快被浏览器加载。但是因为IE6在处理采用@import的css的时候，会当成外部引用而放到最后去加载，对前端性能有所影响。

http://www.w3school.com.cn/tiy/t.asp?f=html_link

12.noframes与noscript

2个为了可用性实现的标记。在不支持框架与Javascript显示特别的文字。如果框架或者Javascript对于你的应用至关重要，那么你应该使用这样的标记来做一个警告提示，提示用户开启脚本。

http://www.w3school.com.cn/tiy/t.asp?f=html_noframes

http://www.w3school.com.cn/tiy/t.asp?f=html_noscript

13.object

object定义一个嵌入的对象，可以使用此元素向 XHTML 页面添加多媒体。关于object标签的具体使用我也没有具体了解过。常常只在一些提供给外部调用的时候用到，常见的地方在视频网站提供给你的插入页码的 代码。IE6下是使用embed来实现插入多媒体的，但是embed是非标准属性。呃。。很早之前，为了能完美通过html validate，狠折腾了一番embed跟object共存的方法。

14.ol的type属性

通常页面上使用ul比ol要多，用过ol的大概印象就是知道列表不是小圆点，而会显示数字顺序。但是用type属性，可以指定ol数字顺序的形式，例如罗马数字I,II，或者是字母顺序A，B，C，或者是小写字母。不过type属性是非标准属性。

http://www.w3school.com.cn/tiy/t.asp?f=html_lists_ordered

15.optgroup

我觉得这个标签是挺好用的一个标记，但是注意到的不多。optgroup用于组合选项。使用一个长的选项列表时，对相关的选项进行组合。例如出现一 个人员的下拉列表的时候，人员按部门用optgroup分组，看起来分割得很清楚。此外，还可以用Javascript来做增强显示。比如你用js写一个 弹出层，点击的时候解析select标签，列出所有部门跟人员分组供选择。如果客户禁用js，那么可以平稳退化成一个分组下拉菜单。

http://www.w3school.com.cn/tiy/t.asp?f=html_optgroup

16.script的defer属性

defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。如果脚本不会改变文档的内容的话，设置这个属性可以加快文档处理速度。因为它会到文档完全显示完再解析Javascript。目前只有IE支持这个属性。不过，通常最慢的不就是IE吗。。

17.select的multiple与size

这2个属性其实是常用属性。只是顺便提一下。这2个属性结合使用可以控制下拉多选菜单。设置了multiple属性之后，可以用ctrl来复选多个选项。size用来控制同时显示的菜单项的个数。

18.sub与sup

这2个标签可以用来显示上下标，通常用在一些计算公式上面。不过还可以经常在页面上显示一些标注标记，比如说加一个[1]表示注解1这样的。此外，经常logo附近带有alpha,beta之类的版本号，可以用上标来实现，简单，粗暴。

http://www.w3school.com.cn/tiy/t.asp?f=html_sup

19.table的cellspacing属性

table标签上经常可以看到cellspacing属性与cellpadding属性，还有border。虽然这些是控制外观的属性，但是它们是名正言顺的标准属性，可以放心用。一般都建议采用css来控制表格样式。但是有个特殊的地方，cellspacing属性是无法通过css来控制的。所以cellspacing只能在table里直接指定。

http://www.w3school.com.cn/tiy/t.asp?f=html_table_cellspacing

20.tbody

熟悉html的都知道table里面可以指定thead，tfoot，tbody。这里注意的是，thead跟tfoot只能出现一次，但是tbody是可以多次出现的。也就是说你可以采用tbody来对表格的数据进行分组显示，不同的tbody分组，采用不同的css类，来显示不同的外观。

21.textarea的wrap属性

很奇怪的是，w3上面的属性列表里面没有提到这个wrap，但是却在注释里面详细的讲解了wrap属性。在有些我们需要控制输入的换行符号的场合，wrap就能帮上你的忙了，省去手动替换换行符号的痛苦。

wrap="virtual" 将实现文本区内的自动换行，以改善对用户的显示，但在传输给服务器时，文本只在用户按下 Enter 键的地方进行换行，其他地方没有换行的效果。

wrap="physical" 将实现文本区内的自动换行，并以这种形式传送给服务器，就像用户真的那样键入的。因为文本要以用户在文本区内看到的效果传输给服务器，因为使用自动换行是非常有用的方法。

http://www.w3school.com.cn/tags/tag_textarea_prop_wrap.asp

此文请同步参考w3school的手册：HTML 4.01 / XHTML 1.0 参考手册

后记：这里列举的很多东西，使用的不多，但是还是有不小的价值的，一直以来我自己也是一知半解。也希望借此机会好好研究一番。花了2天时间整理了这篇文章，自己也是受益良多，希望对各位也有帮助。转载请参看我博客的版权声明，谢谢。

 

本文同步发表在：http://www.fangyuqiang.com/archives/548