【转载】html标签语义化
1 语义化你的HTML标签和属性
1.1 <Hx>
1.2 <p>
1.3 <ul>、<ol>、<li>
1.4 <dl>、<dt>、<dd>
1.5 <cite>、cite 、<q>、 <blockquote>
1.6 <em>、 <strong>
1.7 <table>、<td>、<th>、< caption >、 summary
1.8 <dfn>
1.9 <ins>, <del>
1.10 <code>
1.11 <abbr>、<acronym>
1.12 alt属性和title属性
分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个 XHTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义,没有理由使用其他的标记。换句话说,不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素,比如用<div>来代替<p>标记标题。
首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,个人认为他的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用,很明显Hx系列看起来很像标题,因为拥有粗体和较大的字号。<strong>,<em>用来区别于其他文字,起到了强调的作用。至于列表和表格很明显的告诉你他们是做什么的。
其次,语义化的网页的好处,最主要的就是对搜索引擎友好,又了良好的结构和语义你的网页内容自然容易被搜索引擎抓取,你网站的推广便可以省下不少的功夫。
<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月。从成立之初,蓝色理想就以建设网站设计与开发人员之家为宗旨,以介绍网络开发技术与网站创作设计交流为主要内容。其网站内容制作精良,每天都会有会员精心制作的教程发布,无私地对网友进行帮助,而且还举办过不少设计比赛并开发了很多目前仍被许多网站应用的相关程序。而所发布的作品与点评受到了多家媒体关注及行家的好评,同时也从中确立了自己的社会地位,于是一批又一批的网络同仁加盟了蓝色理想,成为国内最大的设计类站点之一。</p> < p>多年来,蓝色理想的内容不断充实,先后被国内一些知名网站、传统媒体重点推介过,并陆续被Google、百度、雅虎、搜狐、新浪、Excite等各大搜索站点收藏,并在Google、百度、Yahoo三大搜索引擎中以简体汉字关键词"网站设计与开发”搜索排名均为第一,现在蓝色理想已发展成为国内影响最大的网站设计、开发的专业网站之一。</p>
<ul>、<ol>、<li>
<ul>无序列表,很常见的到了大家广泛的使用,<ol>有序列表也挺常用。在web标准化过程中,<ul>还被更多的用于导航条,本来导航条就是个列表,这样做是完全正确的,而且当你的浏览器不支持CSS的时候,导航链接仍然很好使,就是美观方面差了一点。 例如:

<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<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>
<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>标记引用内容,那么你就不能使用 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-9.2.1">The presentation of phrase elements
depends on the user agent.</q>.</p>
<blockquote cite="http://www.w3cn.org/">
<p>“我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,
我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战",
为了兼容 Netscape 和 IE,网站不得不为这两种浏览器写不同的代码。同样的,
每当新的网络技术和交互设备的出现,我们也需要制作一个新版本来支持这种新技术或新设备,
例如支持手机上网的 WAP 技术。类似的问题举不胜举:网站代码臃肿、繁杂浪费了我们大量的带宽;
针对某种浏览器的 DHTML 特效,屏蔽了部分潜在的客户;不易用的代码,残障人士无法浏览网站等等。
这是一种恶性循环,是一种巨大的浪费。” </p>
</blockquote>

<em>、 <strong>
<em> 是用作强调的,<strong>是用作重点强调的。 大部分浏览器用斜体显示强调的内容,用粗体来显示重点强调的内容,然而,这是没有必要的,如果是为了确定强调内容的显示方式,最好的方法就是使用CSS来定义他们的表现。当你想要的只是视觉上的效果时,就不要使用强调了。而且如果你想要强调但是还觉得粗体或者斜体不视觉效果没那么好,特别是斜体对于中文来说,那么你完全可以定义一些其他的比较醒目的样式达到强调的效果。 例如:
<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>

<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="20131024">very</ins> good.</p>
<del>速度=s</del>
在某些老式浏览器中,继承功能可能有些问题,然而大部分现代浏览器在这方面都处理得很正确。记住上面这个列表,可以让你少写点多余的代码。当然了,如果你想看看完整的列表,还是参考 CSS 2 Property Index。
<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" mce_src="/img/common/logo.gif" width="90" height="27" alt="bluediea.com">
<a href="http://www.jluvip.com/blog/article.asp?id=260" mce_href="http://www.jluvip.com/blog/article.asp?id=260" title="js获取单选按钮的数据">js获取单选按钮的数据</a>
【转载】html标签语义化的更多相关文章
- 标签语义化之常用HTML标签
一.布局的理解误区 网络上流行管新型的布局方式叫“DIV+CSS”,其实是一个错误的理解,导致了很多人过度依赖与滥用DIV标签, HTML提供了我们一共七八十个标签,其中常用的有三十个左右,DIV不过 ...
- HTML标签语义化
标签语义化 Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解. 如果可以在合适的位置使用恰当的标签,那么写出来的页面语义明确,结构清晰,搜索引擎也可 ...
- ASP.NET动态网站制作(5)-- 标签语义化及知识补充
前言:这节课主要是讲标签语义化及一些知识点的补充 内容:参考老师的博文:http://www.cnblogs.com/ruanmou/p/4821894.html
- 谈CSS布局中HTML标签语义化
很多人都在做前端,当然这里包括很多新手,也许在新手的想法就是在做布局的时候不要用font标签之类的就算是web标准了,这样一来,造成如今网上“div泛滥”,一看源文件,霍,除了div没其他标签了. 这 ...
- 基础复习之HTML (doctype、标签语义化)
这段时间找实习看的眼花缭乱的,然后也被拒得落花流水,啊哈哈-还是写博客好玩儿-嘿嘿,下面正题 一.doctype 标准模式 (Full Standards Mode) 接近标准模式 (Almost S ...
- web标签语义化的理解_web语义化是什么意思
web语义化是什么? Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解.语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究 ...
- 灵魂代码分享HTML元素标签语义化及使用场景实用到爆
灵魂三问: 标签语义化是什么?为什么要标签语义化?标签语义化使用场景有哪些? 下面让我们跟着这三个问题来展开一下本文的内容. 一.标签语义化是什么? 标签语义化就是让元素标签做适当的事情.例如 p 标 ...
- [转载]理解HTML语义化
声明: 本文转载于:freeyiyi1993博客. 原文地址:http://www.cnblogs.com/freeyiyi1993/p/3615179.html 1.什么是HTML语义化? < ...
- HTML5--(1)兼容前缀+结构性标签+语义化标签
一.兼容前缀+兼容写法 兼容前缀 1.HTML5有部分类容兼容到IE9,IE8及以下完全不兼容的内容不再考虑. 2.部分内容需要加兼容前缀 a) -webkit- 兼容谷歌 b) -m ...
随机推荐
- POJ 2115 C Looooops(Exgcd)
[题目链接] http://poj.org/problem?id=2115 [题目大意] 求for (variable = A; variable != B; variable += C)的循环次数, ...
- 【AC自动机】【高斯消元】hdu5955 Guessing the Dice Roll
http://blog.csdn.net/viphong/article/details/53098489 我有一点不是很懂,这样算出来转移到AC自动机根节点的概率是一个远大于1的数. 按我的理解,因 ...
- 【费用流】bzoj3280 小R的烦恼
类似bzoj1221 http://www.cnblogs.com/autsky-jadek/p/4174087.html 只不过大学有多个,所以我们另开一个节点汇总所有'S->大学'的边,然后 ...
- [CF413D]2048
题目大意: 在一个长度为$n(n\le2000)$的数组中填数$2$或$4$,待所有数字全部填好后,按照类似于2048的规则向左合并.给定某些格子上的数,问在当前情况下要使得合并后的最大数超过$2^k ...
- HTML-DEV-ToolLink(常用的在线字符串编解码、代码压缩、美化、JSON格式化、正则表达式、时间转换工具、二维码生成与解码等工具,支持在线搜索和Chrome插件。)
HTML-DEV-ToolLink:https://github.com/easonjim/HTML-DEV-ToolLink 常用的在线字符串编解码.代码压缩.美化.JSON格式化.正则表达式.时间 ...
- 百度地图API的事件处理:覆盖物的如何阻止冒泡
百度地图,为了让事件使用的更方便,进行一层封装 详情可以看官方的文档 http://developer.baidu.com/map/jsdevelop-5.htm 主要的修改点: 1. 使用事件代理. ...
- sting , CSting的区别
1.string 是C++中的字符串. 字符串对象是一种特殊类型的容器,专门设计来操作的字符序列. 不像传统的c-strings,只是在数组中的一个字符序列,我们称之为字符数组,而C + +字符串对象 ...
- Android 友盟社会化组件-分享实现
本文章链接地址:http://dev.umeng.com/social/android/share/quick-integration 分享快速集成 1 产品概述 友盟社会化组件,可以让移动应用快速具 ...
- Android 多线程之IntentService 完全详解
关联文章: Android 多线程之HandlerThread 完全详解 Android 多线程之IntentService 完全详解 android多线程-AsyncTask之工作原理深入解析(上) ...
- OpenStack制作Windows 2008 KVM镜像
1.下载驱动程序 [root@linux-node1 ~]# cd /usr/local/src [root@linux-node1 src]# wget https://launchpad.net/ ...