词义化的网页页面 XHTML词义化标识

分离出来构造与主要表现的另外一个关键层面是应用词义化的标识来结构文本文档內容。1个 XHTML 元素的存在就意味被标识內容的那一部分有相应的构造化的实际意义,沒有理由应用别的的标识。换句话说,不必让 CSS 使1个 HTML 元素看起来就像另外一个 HTML 元素,例如用<div>来替代<p>标识题目。

最先是有关词义(Semantics)和默认设置款式的差别,默认设置款式是访问器设置的1些常见tag的主要表现方式,本人觉得他的关键目地便是让大伙儿直观的了解标识(markup)和特性(attribute)的主要用途和功效,很显著Hx系列看起来很像题目,由于有着粗体和较大的字号。<strong>,<em>用来差别于别的文本,起到了强调的功效。至于目录和报表很显著的告知你她们是做甚么的。

其次,词义化的网页页面的益处,最关键的便是对检索模块友善,又了优良的构造和词义你的网页页面內容当然非常容易被检索模块抓取,你网站的营销推广即可以省下很多的时间。

实际的词义和主要用途在,XHTML1.0 TAG 参照中都早已表明,这里将1些非常容易忘却或搞混的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月。从创立之初,蓝色理想化就以基本建设网站制作与开发设计人员之家为服务宗旨,以详细介绍互联网开发设计技术性与网站创作设计方案沟通交流为关键內容。其网站內容制做精良,每日都会有会员用心制做的实例教程公布,不求回报地对网友开展协助,并且还举行过很多设计方案赛事并开发设计了许多现阶段仍被很多网站运用的有关程序流程。而所公布的著作与评价遭受了多家新闻媒体关心及行家的好评,另外也从中确立了自身的社会发展影响力,因而1批又1批的互联网同仁加盟了蓝色理想化,变成中国最大的设计方案类站点之1。
</p>
<p>多年来,蓝色理想化的內容持续丰富,前后被中国1些著名网站、传统式新闻媒体关键推介过,并陆续被Google、百度搜索、yahoo、搜狐、新浪、Excite等各大检索站点个人收藏,并在Google、百度搜索、Yahoo3大检索模块中以简体中国汉字重要词"网站制作与开发设计”检索排名均为第1,如今蓝色理想化已发展趋势变成中国危害最大的网站制作、开发设计的技术专业网站之1。</p>
<ul>、<ol>、<li>

<ul>无编码序列表,很普遍的到了大伙儿普遍的应用,<ol>井然有序目录也挺常见。在web规范化全过程中,<ul>还被更多的用于导航栏条,原本导航栏条便是个目录,这样做是彻底正确的,并且当你的访问器不适用CSS的情况下,导航栏连接依然很好使,便是美观大方层面差了1点。
比如:
拷贝內容到剪贴板
编码:
<ul>
<li>新项目1</li>
<li>新项目2</li>
<li>新项目3</li>
</ul>
拷贝內容到剪贴板
编码:
<ol>
<li>第1章</li>
<li>第2章</li>
<li>第3章</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>和全部杰出的影星1样,周润发印证了1个时期,1个中国香港电影的金子时期。
风衣墨镜、冷血双枪、阳光笑容,都封存胶片当中,当大家回望寻望的情况下,发哥已被刻为1个时期的座标。</dd>
</dl>
<cite>、cite 、<q>、 <blockquote>

论坛和blog常常会用到引入他人的话,用<q>来标识简洁明了的单行引入。Web访问器会全自动鉴别在<q> 之间的內容。悲剧的是,IE不可以鉴别,而且一些情况下, <q>会引发1些可浏览性(Accessibility)的难题。正由于这般,1些人提议尽可能不必应用 <q>,手动式的插进引入标识。在1个包括适度的类的 <span>中添加单行的引入內容,那末便可以用CSS来给引入设计方案款式了,可是这个沒有词义上的实际意义。 您能够读读Mark Pilgrim写的The Q tag   (http://diveintomark.org/archives/2002/05/04/the_q_tag )有关解决<q>有关难题的观点。
针对那些1段或好几段的长篇引入,就理应应用 <blockquote>了。CSS能够用来界定引入的款式。留意,1段文章内容是不能以立即放在<blockquote>中的,引入的內容还务必包括在1个元素中,一般是<p>。特性cite既能够与<q> 1起用,还可以与<blockquote>1起用,用来出示引入內容的来源于详细地址。必须留意的是,假如你应用 <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⑼.2.1">The presentation of phrase elements
depends on the user agent.</q>.</p>
拷贝內容到剪贴板
编码:
<blockquote cite="http://www.w3cn.org/">
<p>“大家绝大多数人都有刻骨铭心体验,每当流行访问器版本号的升級,大家刚创建的网站便可能变得落伍,
     大家就必须升級或再次修建1遍网站。比如1996⑴999年典型的"访问器对决",
     以便适配 Netscape 和 IE,网站迫不得已为这两种访问器写不一样的编码。一样的,
     每当新的互联网技术性和互动机器设备的出現,大家也必须制做1个新版本号来适用这类新技术应用或新机器设备,
     比如适用手机上上网的 WAP 技术性。相近的难题不胜枚举:网站编码臃肿、复杂消耗了大家很多的带宽;
     对于某种访问器的 DHTML 殊效,屏蔽了一部分潜伏的顾客;不容易用的编码,残障人员没法访问网站这些。
     这是1种恶变循环系统,是1种极大的消耗。”</p>
</blockquote>
<em>、 <strong>

<em> 是用作强调的,<strong>是用作关键强调的。 绝大多数访问器用斜体显示信息强调的內容,用粗体来显示信息关键强调的內容,但是,这是沒有必要的,假如是以便明确强调內容的显示信息方法,最好是的方式便是应用CSS来界定她们的主要表现。当你要想的只是视觉效果上的实际效果时,就不必应用强调了。并且假如你要想强调可是还感觉粗体或斜体不视觉效果实际效果没那末好,非常是斜体针对汉语来讲,那末你彻底能够界定1些别的的较为醒目地款式做到强调的实际效果。
比如:
拷贝內容到剪贴板
编码:
<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