经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › 语义化你的HTML标签和属性

查看: 17460|回复: 40

[教程] 语义化你的HTML标签和属性 [复制链接]

greengnn　楼主

酒酣几度

荣誉管理 

帖子: 1367
体力: 3521
威望: 127

发表于 2006-7-16 12:33:10 |显示全部楼层

分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个 XHTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义，没有理由使用其他的标记。换句话说，不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素，比如用<div>来代替<p>标记标题。

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

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

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

<Hx>

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

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

复制代码

而不要使用
<div class="title">文档标题</div>，或者<span class="title">文档标题</span>.很明显搜索引擎对于后者是不会认为他是标题的。

<p>

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

<p>蓝色理想 www.blueidea.com 诞生于1999年的10月。从成立之初，蓝色理想就以建设网站设计与开发人员之家为宗旨，以介绍网络开发技术与网站创作设计交流为主要内容。其网站内容制作精良，每天都会有会员精心制作的教程发布，无私地对网友进行帮助，而且还举办过不少设计比赛并开发了很多目前仍被许多网站应用的相关程序。而所发布的作品与点评受到了多家媒体关注及行家的好评，同时也从中确立了自己的社会地位，于是一批又一批的网络同仁加盟了蓝色理想，成为国内最大的设计类站点之一。
</p>
<p>多年来，蓝色理想的内容不断充实，先后被国内一些知名网站、传统媒体重点推介过，并陆续被Google、百度、雅虎、搜狐、新浪、Excite等各大搜索站点收藏，并在Google、百度、Yahoo三大搜索引擎中以简体汉字关键词"网站设计与开发”搜索排名均为第一，现在蓝色理想已发展成为国内影响最大的网站设计、开发的专业网站之一。</p>

复制代码

<ul>、<ol>、<li>

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

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

复制代码

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

复制代码

<dl>、<dt>、<dd>

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>

复制代码

<cite>、cite 、<q>、 <blockquote>

论坛和blog经常会用到引用别人的话，用<q>来标记简短的单行引用。Web浏览器会自动识别在<q> 之间的内容。不幸的是，IE不能识别，并且有些时候， <q>会引起一些可访问性(Accessibility)的问题。正因为如此，一些人建议尽量不要使用 <q>,手动的插入引用标记。在一个包含适当的类的 <span>中加入单行的引用内容，那么就可以用CSS来给引用设计样式了，但是这个没有语义上的意义。您可以读读Mark Pilgrim写的The Q tag (http://diveintomark.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 elements
depends on the user agent.</q>.</p>

复制代码

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

复制代码

<em>、 <strong>

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

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

复制代码

<table>、<td>、<th>、< caption >、 summary

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>
<tr>
<th scope="col" abbr="Configurations" class="nobg">Configurations</th>
<th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th>
<th scope="col" abbr="Dual 2">Dual 2GHz</th>
<th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th>
</tr>
<tr>
<th scope="row" abbr="Model" class="spec">Model</th>
<td>M9454LL/A</td>
<td>M9455LL/A</td>
<td>M9457LL/A</td>
</tr>
<tr>
<th scope="row" abbr="G5 Processor" class="specalt">G5 Processor</th>
<td class="alt">Dual 1.8GHz PowerPC G5</td>
<td class="alt">Dual 2GHz PowerPC G5</td>
<td class="alt">Dual 2.5GHz PowerPC G5</td>
</tr>
<tr>
<th scope="row" abbr="Frontside bus" class="spec">Frontside bus</th>
<td>900MHz per processor</td>
<td>1GHz per processor</td>
<td>1.25GHz per processor</td>
</tr>
<tr>
<th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache</th>
<td class="alt">512K per processor</td>
<td class="alt">512K per processor</td>
<td class="alt">512K per processor</td>
</tr>
</table>

复制代码

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

<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中经常遇到。
例如：

<code>p{margin:2px 0;}</code>

复制代码

<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>

复制代码

参考资料:
默认样式：
http://www.w3cn.org/article/tips/2005/116.html
http://www.w3.org/TR/CSS21/sample.html
语义化:
http://www.456bereastreet.com/lab/developing_with_web_standards/zh
http://www.456bereastreet.com/lab/developing_with_web_standards
http://www.w3cn.org/article/translate/2005/114.html
http://www.w3cn.org/article/translate/2005/114.html
http://www.junchenwu.com/2005/11/html_tags.html
http://brainstormsandraves.com/articles/semantics/structure/
http://www.w3.org/TR/html401/struct/text.htm
http://www.simplebits.com/bits/simplequiz/

资源链接：
Bad Tags：
http://www.htmldog.com/guides/htmlintermediate/badtags/
The Q tag
http://diveintomark.org/archives/2002/05/04/the_q_tag
HTML, XHTML, semantics and the future of the web
http://www.westciv.com/style_master/house/good_oil/xhtml/index.html

[ 本帖最后由 greengnn 于 2006-7-17 17:37 编辑 ]

blog Web标准化交流会 WEB标准群：23783439

		自动登录	找回密码
密码			注册

[教程] 语义化你的HTML标签和属性 [复制链接]

浏览过的帖子

浏览过的版块