您的位置: 首页 > 技术文档 > 网站建设 > 语义化你的HTML标签和属性
!important和(空格)/**/:的组合 回到列表 闭合浮动元素
 语义化你的HTML标签和属性

作者:greengnn 时间: 2006-07-17 文档类型:原创 来自:蓝色理想

第 1 页 语义化你的HTML标签和属性 [1]
第 2 页 语义化你的HTML标签和属性 [2]
第 3 页 语义化你的HTML标签和属性 [3]
第 4 页 语义化你的HTML标签和属性 [4]

语义化你的HTML标签和属性

分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个 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>是最高的等级。
例如:

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三大搜索引擎中以简体汉字关键词"网站设计与开发”搜索排名均为第一,现在蓝色理想已发展成为国内影响最大的网站设计、开发的专业网站之一。<

<ul>、<ol>、<li>

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

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

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

<dl>、<dt>、<dd>

dl就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。
例如:

CODE:
<dl>
<dt>Dog</dt>
<dd>A carnivorous mammal of the family Canidae.</dd>
</dl>

CODE:
<dl>
    <dt>上海滩</dt>
    <dd>这部拍摄于1980年的《上海滩》堪称是香港电视史上最成功、最经典的剧集。
    当年在香港播出以后,产生了巨大的轰动效应。</dd>
    <dt>周润发</dt>
    <dd>和所有伟大的影星一样,周润发印证了一个时代,一个香港电影的黄金时代。
风衣墨镜、冷血双枪、阳光微笑,都封存胶片之中,当我们回首寻望的时候,发哥已被刻为一个时代的坐标。</dd>
</dl>

出处:蓝色理想
责任编辑:moby

上一页 语义化你的HTML标签和属性 [1] 下一页 语义化你的HTML标签和属性 [3]

◎进入论坛网站综合网页制作版块参加讨论

相关文章 更多相关链接
hta应用—代码统计工具
标签for属性与对应的id之关系
HTML Validator For Firefox
扩展DW:自定义第三方标签解析
正确认识html与body
作者文章 更多作者文章
CSS中的行为——expression
web标准实现高效开发系列之二
CSS中的行为——HTC
用css制作星级评分
条件注释理论及实践
关键字搜索 常规搜索 推荐文档
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule
>> 分页 首页 前页 后页 尾页 页次:2/41个记录/页 转到 页 共4个记录

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2