语义化你的HTML标签和属性(2)

原作者:admin 添加时间:2007-05-20 原文发表:2007-05-20 人气:7

本文章共7098字，分5页，当前第2页，快速翻页：

-----------------------------------------------------------------------------------------------------------------------------------------------

本文提示：《语义化你的HTML标签和属性(2)》是本站编辑们为广大网友精选的实用文章，本文阐述了关于文章的相关理论，相对来说专业性强，但是本文只是针对于某个问题提出的见解与论述，未必能辐射到相关问题的方方面面，所以本文处理问题的方法仅仅为您提供一些参考。更多问题请查阅学习中国网其他栏目哦.

-----------------------------------------------------------------------------------------------------------------------------------------------

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

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

具体挠镆搴陀猛驹冢琗HTML1.0 TAG 参考中都已经说明，这里将一些容易遗忘或者混淆的TAGS和属性予以补充。

<Hx>

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

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

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

<p>

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

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