语义化的网页XHTML语义化标记_HTML/Xhtml_网页制作

标记标题。

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

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

具体的语义和用途在，XHTML1.0 TAG 参考中都已经说明，这里将一些容易遗忘或者混淆的TAGS和属性予以补充。

、

、

、

、

、

,作为标题使用，并且依据重要性递减。

是最高的等级。
例如:

作为段落，你就不会再使用
来换行了，而且不需要

来区分段落与段落。

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


• 项目一


• 项目二


• 项目三


复制内容到剪贴板
代码:


1. 第一章


2. 第二章


3. 第三章



、

、



dl就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。
例如：
复制内容到剪贴板

代码:




Dog




A carnivorous mammal of the family Canidae.




复制内容到剪贴板

代码:




上海滩




这部拍摄于1980年的《上海滩》堪称是香港电视史上最成功、最经典的剧集。
当年在香港播出以后，产生了巨大的轰动效应。




周润发




和所有伟大的影星一样，周润发印证了一个时代，一个香港电影的黄金时代。
风衣墨镜、冷血双枪、阳光微笑，都封存胶片之中，当我们回首寻望的时候，发哥已被刻为一个时代的坐标。




、cite 、、


论坛和blog经常会用到引用别人的话，用来标记简短的单行引用。Web浏览器会自动识别在 之间的内容。不幸的是，IE不能识别，并且有些时候， 会引起一些可访问性(Accessibility)的问题。正因为如此，一些人建议尽量不要使用 ,手动的插入引用标记。在一个包含适当的类的 中加入单行的引用内容，那么就可以用CSS来给引用设计样式了，但是这个没有语义上的意义。 您可以读读Mark Pilgrim写的The Q tag (http://diveintomark.org/archives/2002/05/04/the_q_tag )关于处理相关问题的看法。
对于那些一段或者好几段的长篇引用，就应当使用

了。CSS可以用来定义引用的样式。注意，一段文章是不可以直接放在

中的，引用的内容还必须包含在一个元素中，通常是

。属性cite既可以与 一起用，也可以与

一起用，用来提供引用内容的来源地址。需要注意的是，如果你使用 来代替 标记引用内容,那么你就不能使用 cite属性了。

例如:

复制内容到剪贴板

代码:

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

复制内容到剪贴板

代码:

孔子曰：学而不思则罔，思而不学则殆.

复制内容到剪贴板

代码:

The W3C says that The presentation of phrase elements
depends on the user agent..

复制内容到剪贴板

代码:




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




、

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

复制内容到剪贴板

代码:

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

、

、	、< caption >、 summary



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

复制内容到剪贴板

代码:



































Table 1: Power Mac G5 tech specs

Configurations	Dual 1.8GHz	Dual 2GHz	Dual 2.5GHz
Model	M9454LL/A	M9455LL/A	M9457LL/A
G5 Processor	Dual 1.8GHz PowerPC G5	Dual 2GHz PowerPC G5	Dual 2.5GHz PowerPC G5
Frontside bus	900MHz per processor	1GHz per processor	1.25GHz per processor
Level2 Cache	512K per processor	512K per processor	512K per processor

效果察看：http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm



复制内容到剪贴板

代码:

Internet Explorer is the most popular browser used underwater.

,

知道del，就不要再用做删除线了，用del显然更具有语义化。而且del还带有cite和datetime来表明删除的原因以及删除的时间。ins是表示插入，也有这样的属性。
例如：

复制内容到剪贴板

代码:

It really was very good.



表示是计算机代码。而默认样式为打字体。技术论坛和blog中经常遇到。
例如：

复制内容到剪贴板

代码:

p{margin:2px 0;}