语义化你的HTML标签和属性

首先是关于语义（Semantics）和默认样式的区别，默认样式是浏览器设定的一些常用tag的表现形式，个人认为他的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用，很明显Hx系列看起来很像标题，因为拥有粗体和较大的字号。 strong , em 用来区别于其他文字，起到了强调的作用。至于列表和表格很明显的告诉你他们是做什么的。

其次，语义化的网页的好处，最主要的就是对搜索引擎友好，又了良好的结构和语义你的网页内容自然容易被搜索引擎抓取，你网站的推广便可以省下不少的功夫。

h1 、 h2 、 h3 、 h4 、 h5 、 h6 ,作为标题使用，并且依据重要性递减。 h1 是最高的等级。例如:

 h1 文档标题 /h1  h2 次级标题 /h2 

而不要使用 p > p

段落标记，知道了 p 作为段落，你就不会再使用 br/ 来换行了，而且不需要 br/ br/ 来区分段落与段落。 p /p 中的文字会自动换行，而且换行的效果优于 br 。段落与段落之间的空隙也可以利用CSS来控制，很容易而且清晰的区分出段落与段落。在利用行高(line-height)很容易的定义出行间距，再定义首字下沉等效果，那就挺完美了。例如：

 p Admin10000.com 是WEB开发者学习交流的网站,这里提供大量实用的技术文档及相关资源下载，是网页设计、网络编程人员及其爱好者必备网站。 /p  p 希望大家能在这里学到WEB开发知识，启发灵感，提高自己的WEB开发水平。 /p 

ul html' target='_blank'>无序列表，很常见的到了大家广泛的使用， ol 有序列表也挺常用。在web标准化过程中， ul 还被更多的用于导航条，本来导航条就是个列表，这样做是完全正确的，而且当你的浏览器不支持CSS的时候，导航链接仍然很好使，就是美观方面差了一点。例如：

 ul  li 项目一 /li  li 项目二 /li  li 项目三 /li  /ul 

 ol  li 第一章 /li  li 第二章 /li  li 第三章 /li  /ol 

dl就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。例如：

 dl  dt Dog /dt  dd A carnivorous mammal of the family Canidae. /dd  /dl 

 dl  dt 上海滩 /dt  dd 这部拍摄于1980年的《上海滩》堪称是香港电视史上最成功、最经典的剧集。 当年在香港播出以后，产生了巨大的轰动效应。 /dd  dt 周润发 /dt  dd 和所有伟大的影星一样，周润发印证了一个时代，一个香港电影的黄金时代。风衣墨镜、冷血双枪、阳光微笑，都封存胶片之中，当我们回首寻望的时候，发哥已被刻为一个时代的坐标。 /dd  /dl 

论坛和blog经常会用到引用别人的话，用 q 来标记简短的单行引用。Web浏览器会自动识别在 q 之间的内容。不幸的是，IE不能识别，并且有些时候， q 会引起一些可访问性(Accessibility)的问题。正因为如此，一些人建议尽量不要使用 q ,手动的插入引用标记。在一个包含适当的类的 span 中加入单行的引用内容，那么就可以用CSS来给引用设计样式了，但是这个没有语义上的意义。 您可以读读Mark Pilgrim写的The Q tag (http://peintomark.org/archives/2002/05/04/the_q_tag )关于处理 q 相关问题的看法。对于那些一段或者好几段的长篇引用，就应当使用 blockquote 了。CSS可以用来定义引用的样式。注意，一段文章是不可以直接放在 blockquote 中的，引用的内容还必须包含在一个元素中，通常是 p 。属性cite既可以与 q 一起用，也可以与 blockquote 一起用，用来提供引用内容的来源地址。需要注意的是，如果你使用 span 来代替 q 标记引用内容,那么你就不能使用 cite属性了。例如:

 cite Designing with Web Standards /cite is an excellent book by Jeffrey Zeldman.

 p cite 孔子 /cite 曰： q 学而不思则罔，思而不学则殆 /q . /p 

 p The W3C says that q cite= http://www.w3.org/TR/REC-html40/struct/text.html#h-9.2.1 The presentation of phrase elementsdepends on the user agent. /q . /p 

 blockquote cite= http://www.w3cn.org/  p “我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的 浏览器大战 ，为了兼容 Netscape 和 IE，网站不得不为这两种浏览器写不同的代码。同样的，每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，例如支持手机上网的 WAP 技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；针对某种浏览器的 DHTML 特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。这是一种恶性循环，是一种巨大的浪费。” /p  /blockquote 

em 是用作强调的， strong 是用作重点强调的。 大部分浏览器用斜体显示强调的内容，用粗体来显示重点强调的内容，然而，这是没有必要的，如果是为了确定强调内容的显示方式，最好的方法就是使用CSS来定义他们的表现。当你想要的只是视觉上的效果时，就不要使用强调了。而且如果你想要强调但是还觉得粗体或者斜体不视觉效果没那么好，特别是斜体对于中文来说，那么你完全可以定义一些其他的比较醒目的样式达到强调的效果。例如:

 p em 强调 /em 的文本通常用斜体显示，然而， strong 特别强调 /strong 的文本通常以粗体显示。 /p 

XHTML中的表格不应用来布局。然而如果是为了标记列表的数据，就应该使用表格了。 th 为表格标题，属性summar为摘要， caption 标签为首部说明， thead 标签为表格头部， tbody 标签为表格主体内容， tfoot 标签为表格尾部。
其中还可以使用scope 可用于取代headers属性，标记含有表头信息的单元格，其中各数值的内容如下：
row 指示当前单元格，为包含当前单元格的行提供相关的表头信息。
col 指示当前单元格，为根据当前单元格指定的列提供相应的表头信息。
rowgroup 指示当前单元格，为包含当前单元格的其余行组提供相关的表头信息。
colgroup 指示当前单元格，为根据当前单元格指定的其余列组提供相应的表头信息。
abbr 用于定义表头单元格中的缩写名，如果没有定义该属性，则将默认单元格内容为节略形式。
例如:

 table id= mytable cellspacing= 0 summary= The technical specifications of the Apple PowerMac G5 series  caption Table 1: Power Mac G5 tech specs /caption  th scope= col abbr= Configurations > dfn 
 p dfn title= Microsoft web browser Internet Explorer /dfn is the most popular browser used underwater. /p 
 
 ins , del 
 知道del，就不要再用 s 做删除线了，用del显然更具有语义化。而且del还带有cite和datetime来表明删除的原因以及删除的时间。ins是表示插入，也有这样的属性。例如：
 p It really was ins cite= rarara.html datetime= 20031024 very /ins good. /p 
 code 
 表示是计算机代码。而默认样式为打字体。技术论坛和blog中经常遇到。例如：
 abbr 、 acronym 
 abbr 标签是表示web页面上的简称， acronym 标签为取首字母缩写。（注：这里把简称和缩写分开而论，简称范围比缩写大，取首字母的缩写用 acronym 标签）Windows的IE6.0以下的浏览器暂不支持 abbr 标签。 在IE里，你可以应用CSS给 acronym 但是不能应用给 abbr 标签，IE会为 acronym 标签的title属性显示提示，但是会忽略 abbr 标签。
 解决方法见: http://www.w3cn.org/article/translate/2005/115.html
 例如:
 abbr title= Cascading Style Sheets CSS /abbr 
 acronym title= Cascading Style Sheets CSS /acronym 
 alt属性和title属性
 title属性用来为元素提供额外说明信息title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。但是并不是必须的。
 alt属性为不能显示图像、窗体或applets的用户代理（UA），指定替换文字。替换文字的语言由lang属性指定。
 
 img src= /img/common/logo.gif width= 90 height= 27 alt= bluediea.com 
 a href= http://www.jluvip.com/blog/article.asp?id=260 title= js获取单选按钮的数据 js获取单选按钮的数据 /a 
以上就是语义化你的HTML标签和属性的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。