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天时间整理了这篇文章,自己也是受益良多,希望对各位也有帮助。转载请参看我博客的版权声明,谢谢。