分離結構與表現的另一個重要面向是使用語意化的標記來建構文件內容。一個 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> 登入後複製
、、 、< caption >、 summary
XHTML中的表格不应用来布局。然而如果是为了标记列表的数据，就应该使用表格了。
为表格标题，属性summar为摘要，标签为首部说明， 标签为表格头部， 标签为表格主体内容， 标签为表格尾部。<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属性显示提示，但是会忽略标签。
<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之外的所有标签。但是并不是必须的。
<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
作者最新文章
2023-03-14 15:58:02
1970-01-01 08:00:00
2023-03-15 07:38:01
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
