语义化的网页:XHTML语义化标志
日期：2014-01-02 浏览次数：20597 次
网页制造aiyiweb文章简介：分离结构与表现的另一个重要方面是使用语义化的标记来结构文档内容。
分离结构与表现的另一个重要方面是使用语义化的标记来结构文档内容。一个 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>是最高的等级。
例如:
复制内容到剪贴板
<div class="title">文档标题</div>，或者<span class="title">文档标题</span>.很明显搜索引擎对于后者是不会认为他是标题的。
<p>
段落标记，知道了<p>作为段落，你就不会再使用<br/>来换行了，而且不需求<br/><br/>来区分段落与段落。<p></p>中的文字会自动换行，而且换行的效果优于<br>。段落与段落之间的空隙也可以利用CSS来控制，很容易而且清晰的区分出段落与段落。在利用行高(line-height)很容易的定义出行间距，再定义首字下沉等效果，那就挺完满了。
例如：
代码:
<h1>文档标题</h1>
<h2>次级标题</h2>
而不要使用<div class="title">文档标题</div>，或者<span class="title">文档标题</span>.很明显搜索引擎对于后者是不会认为他是标题的。
<p>
段落标记，知道了<p>作为段落，你就不会再使用<br/>来换行了，而且不需求<br/><br/>来区分段落与段落。<p></p>中的文字会自动换行，而且换行的效果优于<br>。段落与段落之间的空隙也可以利用CSS来控制，很容易而且清晰的区分出段落与段落。在利用行高(line-height)很容易的定义出行间距，再定义首字下沉等效果，那就挺完满了。
例如：
复制内容到剪贴板
<ul>无序列表，很常见的到了大家广泛的使用，<ol>有序列表也挺常用。在web标准化过程中，<ul>还被更多的用于导航条，本来导航条就是个列表，这样做是完全正确的，而且当你的浏览器不支持CSS的时候，导航链接仍然很好使，就是美观方面差了一点。
例如:
代码:
<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>
复制内容到剪贴板
dl就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。
例如：
代码:
<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>
复制内容到剪贴板
论坛和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>标记援用内容,那么你就不能
代码:
<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>标记援用内容,那么你就不能
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
