语义化HTML标签和属性

语义化HTML标签和属性，在我看来，这是一个前端必须掌握的一个技能！

一个网页就像是人的身体一样，HTML就是躯体，而CSS就是衣服，来美化我们的身体！CSS如果没有了HTML，那就没有了实际的价值。CSS完全依靠引用它的(X)HTML文档。如果你想使CSS的能力发挥到极致，提供一个用既干净又有结构的HTML是非常必要的。

一个 XHTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义，没有理由使用其他的标记。换句话说，不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素。

就语义化HTML标签和属性来说，优点有很多：首先就是对搜索引擎友好，又了良好的结构和语义你的网页内容自然容易被搜索引擎抓取，你网站的推广便可以省下不少的功夫。其次即便样式丢失的时候,也能让页面呈现清晰的结构，增强页面的可读性。最后就是在团队中大家都遵循同一个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。

这里将一些容易遗忘或者混淆的TAGS和属性予以补充。

<Hx>
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题使用，并且依据重要性递减。<h1>是最高的等级。而不要使用<div>文档标题</div>，或者<span>文档标题</span>.很明显搜索引擎对于后者是不会认为他是标题的。

HTML
  1. <h1>文档标题</h1>  
  2. <h2>次级标题</h2>  

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

HTNL
  1. <p>闲云野鹤夫妻博客是用Wordpress博客系统搭建的，里面记录着我们的甜言蜜语。这个博客从2009年底搭建的，不过中间由于国内网络被迫搬家到国外主机，造成一些数据的丢失，很是可惜！   
  2. </p>  
  3. <p>这个夫妻博客，代码通过了W3C的验证！兼容 IE6-IE9 | Firefox | Chrome | Opera 等常用浏览器，浏览效果肯定是 IE 最杯具了，所以用什么浏览器，你自己看着办吧！   
  4. </p>  

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

HTML
  1. <ul>  
  2.     <li>项目一</li>  
  3.     <li>项目二</li>  
  4.     <li>项目三</li>  
  5. </ul>  
  6. <ol>  
  7.     <li>第一章</li>  
  8.     <li>第二章</li>  
  9.     <li>第三章</li>  
  10. </ol>  

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

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

<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属性了。

HTML
  1. <p> <cite>孔子</cite>曰：<q>学而不思则罔，思而不学则殆</q>.</p>  
HTML
  1. <blockquote cite=“http://www.w3cn.org/”>  
  2. <p>“我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的”浏览器大战”，为了兼容 Netscape 和 IE，网站不得不为这两种浏览器写不同的代码。同样的，每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，例如支持手机上网的 WAP 技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；针对某种浏览器的 DHTML 特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。这是一种恶性循环，是一种巨大的浪费。”</p>  
  3. </blockquote>  

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

HTML
  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 用于定义表头单元格中的缩写名，如果没有定义该属性，则将默认单元格内容为节略形式。

HTML
  1. <table id=“mytable” cellspacing=“0″ summary=“The technical specifications of the Apple PowerMac G5 series”>  
  2. <caption>Table 1: Power Mac G5 tech specs </caption>  
  3.   <tr>  
  4.     <th scope=“col” abbr=“Configurations” class=“nobg”>Configurations</th>  
  5.     <th scope=“col” abbr=“Dual 1.8″>Dual 1.8GHz</th>  
  6.     <th scope=“col” abbr=“Dual 2″>Dual 2GHz</th>  
  7.     <th scope=“col” abbr=“Dual 2.5″>Dual 2.5GHz</th>  
  8.   </tr>  
  9.   <tr>  
  10.     <th scope=“row” abbr=“Model” class=“spec”>Model</th>  
  11.     <td>M9454LL/A</td>  
  12.     <td>M9455LL/A</td>  
  13.     <td>M9457LL/A</td>  
  14.   </tr>  
  15.   <tr>  
  16.     <th scope=“row” abbr=“G5 Processor” class=“specalt”>G5 Processor</th>  
  17.     <td class=“alt”>Dual 1.8GHz PowerPC G5</td>  
  18.     <td class=“alt”>Dual 2GHz PowerPC G5</td>  
  19.     <td class=“alt”>Dual 2.5GHz PowerPC G5</td>  
  20.   </tr>  
  21.   <tr>  
  22.     <th scope=“row” abbr=“Frontside bus” class=“spec”>Frontside bus</th>  
  23.     <td>900MHz per processor</td>  
  24.     <td>1GHz per processor</td>  
  25.     <td>1.25GHz per processor</td>  
  26.   </tr>  
  27.   <tr>  
  28.     <th scope=“row” abbr=“L2 Cache” class=“specalt”>Level2 Cache</th>  
  29.     <td class=“alt”>512K per processor</td>  
  30.     <td class=“alt”>512K per processor</td>  
  31.     <td class=“alt”>512K per processor</td>  
  32.   </tr>  
  33. </table>  

<ins>, <del>
知道del，就不要再用<s>做删除线了，用del显然更具有语义化。而且del还带有cite和datetime来表明删除的原因以及删除的时间。ins是表示插入，也有这样的属性。

HTML
  1. <p>It really was <ins cite=“rarara.html” datetime=“20031024″>very</ins> good.</p>  

<code>
表示是计算机代码。而默认样式为打字体。技术论坛和blog中经常遇到。

HTML
  1. <code>p{margin:2px 0;}</code>  

alt属性和title属性
title属性用来为元素提供额外说明信息title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。但是并不是必须的。
alt属性为不能显示图像、窗体或applets的用户代理（UA），指定替换文字。替换文字的语言由lang属性指定。

HTML
  1. <img src=“logo.gif” width=“90″ height=“27″ alt=“logo”>  
  2. <a href=“http://blog.xianyunyehe.net” title=“闲云野鹤夫妻博客”>闲云野鹤夫妻博客</a>  

本文部分参考经典论坛

支付宝担保交易购买 博客新手计划：域名+空间=100元

本文写于2011-06-08，采用 【BY-NC-SA】 进行授权。Tags : , ,


14 次评论 (访客:8 次, 博主:6 次)

  1. avatar西门

    可以理解HTML里不多的标签，并且合理运用，就非常牛逼了！

    2011年06月8日 13:44 | 回复  1楼 
  2. avatar言冬

    hx 是个另类，一定要知道他表示的不仅仅是文字格式不一样，呵呵

    2011年06月8日 18:43 | 回复  2楼 
  3. avatar邓肯

    讲得这么专业 我对HTML只会点皮毛

    2011年06月8日 21:47 | 回复  3楼 
  4. avatarlowstz

    发现我用得很乱很糟糕= =

    2011年06月9日 15:52 | 回复  4楼 
  5. avatarzwwooooo

    这样解析比较容易记住吧，哈

    2011年06月9日 17:12 | 回复  5楼 
  6. avatar水晶首饰

    收藏了，坐下来慢慢研究。。。

    2011年06月10日 14:08 | 回复  6楼 

:?: :razz: :!: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :idea: :arrow: :neutral: :cry: :mrgreen: :smile: :evil: