語意化你的HTML標籤和屬性

分離結構與表現的另一個重要面向是使用語意化的標記來建構文件內容。一個 XHTML 元素的存在就意味著被標記內容的那部分有相應的結構化的意義，沒有理由使用其他的標記。換句話說，不要讓 CSS 使一個 HTML 元素看起來像另一個 HTML 元素，例如用

來取代

標記標題。

首先是關於語意（Semantics）和預設樣式的差別，預設樣式是瀏覽器設定的一些常用tag的表現形式，個人認為他的主要目的就是讓大家直觀的認識標籤(markup)和屬性(attribute)的用途和作用，很明顯Hx系列看起來很像標題，因為擁有粗體和較大的字號。 ,用來區別於其他文字，起到了強調的作用。至於清單和表格很明顯的告訴你他們是做什麼的。

其次，語意化的網頁的好處，最主要的就是對搜尋引擎友好，又了良好的結構和語義你的網頁內容自然容易被搜尋引擎抓取，你網站的推廣便可以省下不少的功夫。

#

、

、

、

、

、

,作為標題使用，並且依據重要性遞減。

是最高的等級。例如:

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

而不要使用

文檔標題

，或文檔標題.很明顯搜尋引擎對於後者不會認為他是標題的。

段落標記，知道了

作為段落，你就不會再使用
來換行了，而且不需要

來區分段落與段落。

中的文字會自動換行，而且換行的效果優於
。段落與段落之間的空隙也可以利用CSS來控制，很容易且清楚的區分出段落與段落。在利用行高(line-height)很容易的定義出行間距，再定義首字下沉等效果，那就挺完美了。例如：

<p>Admin10000.com 是WEB开发者学习交流的网站,这里提供大量实用的技术文档及相关资源下载，是网页设计、网络编程人员及其爱好者必备网站。</p>
<p>希望大家能在这里学到WEB开发知识，启发灵感，提高自己的WEB开发水平。</p>

、
、

#

無序列表，很常見的到了大家廣泛的使用，
有序列表也挺常用。在web標準化過程中，
還被更多的用於導航條，本來導航條就是個列表，這樣做是完全正確的，而且當你的瀏覽器不支援CSS的時候，導航連結仍然很好使，就是美觀方面差了一點。例如：

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

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

、

、

# 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 、、

論壇和blog常常會用到引用別人的話，用來標記簡短的單行引用。 Web瀏覽器會自動辨識在 之間的內容。不幸的是，IE不能識別，而且有些時候， 會引起一些可訪問性(Accessibility)的問題。正因為如此，有些人建議盡量不要使用 ,手動的插入引用標記。在一個包含適當的類別的 中加入單行的引用內容，那麼就可以用CSS來給引用設計樣式了，但是這個沒有語意上的意義。 您可以讀讀Mark Pilgrim寫的The Q tag  (http://peintomark.org/archives/2002/05/04/the_q_tag )關於處理相關問題的看法。對於那些一段或好幾段的長篇引用，就該使用

了。 CSS可以用來定義引用的樣式。注意，一段文章是不可以直接放在

中的，引用的內容也必須包含在一個元素中，通常是

。屬性cite既可以與 一起使用，也可以與

一起使用，用來提供引用內容的來源位址。要注意的是，如果你使用 來代替 標記引用內容,那麼你就不能使用 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>

、

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

<p><em>强调</em> 的文本通常用斜体显示，
然而，<strong>特别强调</strong> 的文本通常以粗体显示。</p>

、标签为表格头部，标签为表格主体内容，标签为表格尾部。
其中还可以使用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>

<p><dfn title="Microsoft web browser">Internet Explorer</dfn> is the most popular browser used underwater.</p>

 

,

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

<p>It really was <ins cite="rarara.html" datetime="20031024">very</ins> good.</p>

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

、

标签是表示web页面上的简称，标签为取首字母缩写。（注：这里把简称和缩写分开而论，简称范围比缩写大，取首字母的缩写用标签）Windows的IE6.0以下的浏览器暂不支持标签。 在IE里，你可以应用CSS给但是不能应用给标签，IE会为标签的title属性显示提示，但是会忽略标签。
解决方法见: 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" width="90" height="27" alt="bluediea.com">

<a href="http://www.jluvip.com/blog/article.asp?id=260" title="js获取单选按钮的数据">js获取单选按钮的数据</a>

以上是語意化你的HTML標籤和屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：LI 標籤中讓文章標題左對齊，日期右對齊的方法下一篇：LI 標籤中讓文章標題左對齊，日期右對齊的方法

相關文章

看更多

• Html小知識總結
• 如何快速學習HTML
• html xhtml xml的區別
• src與href屬性的差別
• 關於HTML5和CSS替換使用



公益線上PHP培訓，幫助PHP學習者快速成長！

關於我們免責聲明Sitemap

© php.cn All rights reserved

标签为首部说明，

、	、< caption >、 summary XHTML中的表格不应用来布局。然而如果是为了标记列表的数据，就应该使用表格了。	为表格标题，属性summar为摘要，