构建网站友好性基础语义化网站的html标签

tzlink · 发表于 2008-12-10 11:02:06

分离的结构和表现的一个作用就是可以用语义化的标签来标识文档的内容。在半结构化的xhtml代码里每个标签都有他代表的独特意义。在现实生活中人脑可以轻易的分辨出网页上文章标题和小节标题的区别，但是当下搜索引擎技术还不成。如果网页上所有文字都是用<p>做标签的话，搜索引擎可能真的很难分辨不出来文章真实的主题内容是那段文字。

关于标签的语义化的理解有方面。第一面是面向浏览者方便阅读的语义化，这个主要是在使用浏览器阅读网页的时候给予文字以特殊标识，使浏览者更容易分辨出那些是网页文字的重点内容，以便于更方便的阅读。第二方面是面向搜索引擎分析所用的语义化处理，友好的语义化标签能使搜索引擎更好的抓取和分析网页上的内容。如果说让网页能够跟搜索引擎尽可能深入交流的话，那么对网页标签进行语义化处理是再好不过了。

下面我们来讨论关于语义化的内容。
<Hx>

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

例如
<h1>主标题</h1>
<h2>次标题</h2>
而不要使用
<div class="title">主标题</div>
<div class="title">次标题</div>
搜索引擎是不能分清楚谁是主标题，谁是副标题的。

<p>

段落标记，知道了<p>作为段落，你就会放弃用<br/>来换行了，而且不需要<br/><br/>来区分段落与段落。<p></p>中的文字会自动换行，而且换行的效果优于<br/>。关于搜索引擎方面<p>代表定义主题文字，<p>内的文字会被搜索引擎认为是网页上的描述主要内容文字区。

例如
<p>HTML3.0规范是由当时刚成立的W3C于1995年3月提出，提供了很多新的特性，例如表格、文字绕排和复杂数学元素的显示。</p><p>虽然它是被设计用来兼容2.0版本的，但是实现这个标准的工作在当时过于复杂，在草案于1995年9月过期时，标准开发也因为缺乏浏览器支持而中止了。</p>

<ul>、<ol>、<li>

<ul>无序列表标签，<ol>有序列表标签也是经常使用到的。在web标准化过程中，<ul>还被更多的用于导航条，这样做是完全正确的，而且当你的浏览器不支持CSS的时候，导航链接仍然很实用。另外还有一个好处是<ul><ol>的代码相对<table>而言比较少，对网页下载十分有利。在此并无其他含义。

例如
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
例如
<ol>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ol>

<dl>、<dt>、<dd>

dl就是“定义列表”。现在来对无序列表标签和有序列表标签语义化效果进行对比。例1的语义化后代表列表的标题是dog，描述的内容是A carnivorous mammal of the family Canidae.
例2的语义化后代表列表的标题是《大话西游》剧情点评，描述的内容是我面对的，是一部痛彻心肺的喜剧.寓言篇故事已然存在，已然不可避免。在深切的郁闷中来到了二十来岁，突然就看懂了《大话西游》的开头：一位才华横溢又无法无天的青年（孙悟空），根本不喜欢世人摊派给他的大事业（西天取经）。他尤其受不了师父（唐僧）的唠唠叨叨，可世俗条规（观音）又不放过他。为让他悔悟，心甘情愿地去取经，唐僧和观音达成妥协：让他五百年后重新做人。

例如1
<dl>
<dt>Dog</dt>
<dd>A carnivorous mammal of the family Canidae.</dd>
</dl>

例如2
<dl>
<dt>《大话西游》剧情点评</dt>
<dd>我面对的，是一部痛彻心肺的喜剧.寓言篇故事已然存在，已然不可避免。 </dd>
<dd>在深切的郁闷中来到了二十来岁，突然就看懂了《大话西游》的开头：一位才华横溢又无法无天的青年（孙悟空），根本不喜欢世人摊派给他的大事业（西天取经）。他尤其受不了师父（唐僧）的唠唠叨叨，可世俗条规（观音）又不放过他。为让他悔悟，心甘情愿地去取经，唐僧和观音达成妥协：让他五百年后重新做人。</dd>
</dl>

<em>、 <strong>

<em> 是用作强调的，<strong>是用作重点强调的。大部分浏览器用斜体显示强调的内容，用粗体来显示重点强调的内容，如果是为了确定强调内容的显示方式，最好的方法就是使用CSS来定义他们的表现。当你想要的只是视觉上的效果时，就不要使用强调了。而且如果你想要强调但是还觉得粗体或者斜体不视觉效果没那么好，那么你完全可以定义一些其他的比较醒目的样式达到强调的效果。但是，要面对搜索引擎<em>和<strong>的标签就大有用处，适当使用<em>、<strong>标签可以突出网页内关键词是什么，是seo工作的首选标签。

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

tzlink · 发表于 2008-12-10 11:02:39

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

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

对于浏览者可能是永远不会看到这个标签的，但对于搜索引擎来说这些标签都是真实有用的，例如<th>语义化的含义与<hx>语义化的含义是基本相同的，<tbody>又类似<p>的作用。读者看到这里大概已经发觉了语义化的标签含义是相通的。

例如

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

<alt>< title>

title属性用来为元素提供额外说明信息title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。关于<alt>标签的用法前面的章节讨论过，一张图片上绘画的图案或者名称搜索引擎是抓取不到的，所以在图片上使用alt标签已经为图片增加一段描述的文字，在这里<alt>标签的作用就类似于<p>的作用。<Title>标签作用类似于<alt>标签。

例如
<img src="/chinaz.com/images/logo.gif" width="90" height="27" alt="中国站长站（chinaz）">
例如
<a href="http://chinaz.com/Webbiz/Exp/Index.html" title="建站经验">建站经验</a>

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

全国各地医院查询	重量转换换算	RGB颜色查询	交通标志大全	各类快递查询
简体繁体转换	黄金价格实时走势	万年历查询	实时汇率转换	列车时刻查询
在线翻译工具	CSS中文手册	HTML学习教程	MySQL中文手册	JavaScript中文手册
PHP安全基础手册	PHP5面向对象编程教程	正则表达式系统教程	SQL Server精华	Apache 2.2 中文手册
DOS命令全集指南	windows脚本技术中文版	股票行情查询	历史上的今天	邮编区号查询
长度转换换算	货币汇率转换	常用电话号码	体育彩票查询	手机位置查询
域名Whois信息查询	谷歌PR值查询	台州网站建设	台州网站开发	台州域名注册
天气预报查询	长度转换换算器	在线电子地图	车牌号码查询	中国百家姓查询

构建网站友好性基础 语义化网站的html标签

相关帖子