首頁 > 文章 > web前端 > 語意化的網頁 XHTML語意化標籤_HTML/Xhtml_網頁製作

語意化的網頁 XHTML語意化標籤_HTML/Xhtml_網頁製作

WBOY原創: 2016-05-16 16:42:081250瀏覽

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

來取代

標記標題。

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

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

具體的語意和用途在，XHTML1.0 TAG 參考中都已經說明，這裡將一些容易遺忘或混淆的TAGS和屬性予以補充。

、
、
、
、
、
,作為標題使用，並且依據重要性遞減。
是最高的等級。
例如:

複製內容到剪貼簿

代碼:

<font face="NSimsun"><h1>文件標題</h1>
<code><font face="NSimsun"><h1>文档标题</h1><br><h2>次级标题</h2></font>

次級標題

而不要使用

文件標題

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

段落標記，知道了

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

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

複製內容到剪貼簿

代碼:

<font face="NSimsun"><p>藍色理想 www.blueidea.com 誕生於1999年的10月。從成立之初，藍色理想就以建立網站設計與開發人員之家為宗旨，以介紹網頁開發技術與網站創作設計交流為主要內容。其網站內容製作精良，每天都會有會員精心製作的教程發布，無私地對網友進行幫助，而且還舉辦過不少設計比賽並開發了很多目前仍被許多網站應用的相關程序。而所發布的作品與點評受到了多家媒體關注及行家的好評，同時也從中確立了自己的社會地位，於是一批又一批的網絡同仁加盟了藍色理想，成為國內最大的設計類站點之一。 <code><font face="NSimsun"><p>蓝色理想 www.blueidea.com 诞生于1999年的10月。从成立之初，蓝色理想就以建设网站设计与开发人员之家为宗旨，以介绍网络开发技术与网站创作设计交流为主要内容。其网站内容制作精良，每天都会有会员精心制作的教程发布，无私地对网友进行帮助，而且还举办过不少设计比赛并开发了很多目前仍被许多网站应用的相关程序。而所发布的作品与点评受到了多家媒体关注及行家的好评，同时也从中确立了自己的社会地位，于是一批又一批的网络同仁加盟了蓝色理想，成为国内最大的设计类站点之一。 <br></p><br><p>多年来，蓝色理想的内容不断充实，先后被国内一些知名网站、传统媒体重点推介过，并陆续被Google、百度、雅虎、搜狐、新浪、Excite等各大搜索站点收藏，并在Google、百度、Yahoo三大搜索引擎中以简体汉字关键词"网站设计与开发”搜索排名均为第一，现在蓝色理想已发展成为国内影响最大的网站设计、开发的专业网站之一。</p></font>

多年來，藍色理想的內容不斷充實，先後被國內一些知名網站、傳統媒體重點推介過，並陸續被Google、百度、雅虎、搜狐、新浪、 Excite等各大搜尋網站收藏，並在Google、百度、Yahoo三大搜尋引擎中以簡體漢字關鍵字"網站設計與開發」搜尋排名均為第一，現在藍色理想已發展成為國內影響最大的網站設計、開發的專業網站之一。

、

無序列表，很常見的到了大家廣泛的使用，

有序列表也挺常用。在web標準化過程中，

例如: 複製內容到剪貼簿

代碼:<ul> <li>项目一</li> <li>项目二</li> <li>项目三</li> </ul> <ul></ul>

專案一
專案二
專案三

複製內容到剪貼簿

代碼:

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

、
、

dl就是「定義清單」。比如說字典裡面的字的解釋、定義就可以用這種列表。
例如：

複製內容到剪貼簿

代碼:

<font face="NSimsun"><dl>
<code><font face="NSimsun"><dl><br><dt>Dog</dt><br><dd>A carnivorous mammal of the family Canidae.</dd><br></dl> </font>

Dog

A carnivorous mammal of the family Canidae.

複製內容到剪貼簿

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

代碼:

<font face="NSimsun"><dl>
<strong><dt>上海灘</dt></strong><dd>這部拍攝於1980年的《上海灘》堪稱是香港電視史上最成功、最經典的劇集。 <br>當年在香港播出以後，產生了巨大的轟動效應。 </dd>
<br><dt>週潤發</dt>
<br><dd>和所有偉大的影星一樣，週潤發印證了一個時代，一個香港電影的黃金時代。 <br>風衣墨鏡、冷血雙槍、陽光微笑，都封存膠片之中，當我們回首尋望的時候，發哥已被刻為一個時代的坐標。 </dd>
<br>
</dl></font>

、cite 、、

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

了。 CSS可以用來定義引用的樣式。注意，一段文章是不可以直接放在
中的，引用的內容也必須包含在一個元素中，通常是
。屬性cite既可以與一起用，也可以與
一起用，用來提供引用內容的來源位址。要注意的是，如果你使用來代替標記引用內容,那麼你就不能使用 cite屬性了。

例如: 複製內容到剪貼簿

代碼: <cite>孔子</cite>曰：<q>学而不思则罔，思而不学则殆</q>.

複製內容到剪貼簿

代碼:

<font face="NSimsun"><p>The W3C says that <q cite="http://www.w3.org/TR/REC-html40/<br />struct/text.html#h-9.2.1">The presentation of phrase elements<br>depends on the user agent.</q>.</p></font>

複製內容到剪貼簿代碼:

<font face="NSimsun"><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 elementsdepends on the user agent.</q>.</p></font>

複製內容到剪貼簿

代碼:

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

、

是用來強調的，是用來當重點強調的。大部分瀏覽器用斜體顯示強調的內容，用粗體來顯示重點強調的內容，然而，這是沒有必要的，如果是為了確定強調內容的顯示方式，最好的方法就是使用CSS來定義他們的表現。當你想要的只是視覺上的效果時，就不要使用強調了。而且如果你想要強調但是還覺得粗體或斜體不視覺效果沒那麼好，特別是斜體對於中文來說，那麼你完全可以定義一些其他的比較醒目的樣式達到強調的效果。
例如:
複製內容到剪貼簿
代碼:
強調 的文字通常以斜體顯示，<code>强调 的文本通常用斜体显示， 然而， 特别强调 的文本通常以粗体显示。然而， 特別強調 的文字通常以粗體顯示。

、標籤為表格頭部，標籤為表格主體內容，標籤為表格尾端。
其中也可以使用scope 可用於取代headers屬性，標記含有表頭資訊的單元格，其中各數值的內容如下：
　row 指示當前單元格，為包含當前單元格的行提供相關的表頭資訊。
　col 指示目前儲存格，為根據目前儲存格指定的資料列提供對應的表頭資訊。
　rowgroup 指示目前儲存格，為包含目前儲存格的其餘行組提供相關的表頭資訊。
　colgroup 指示目前儲存格，為根據目前儲存格指定的其餘列組提供對應的表頭資訊。
abbr 用於定義表頭單元格中的縮寫名，如果沒有定義該屬性，則將預設單元格內容為節略形式。
例如:
複製內容到剪貼簿
代碼:
<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series"> <code><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 title="Microsoft web browser">Internet Explorer</dfn> is the most popular browser used underwater.




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

XHTML中的表格不應用來佈局。然而如果是為了標記列表的數據，就應該使用表格了。為表格標題，屬性summar為摘要，
標籤為首部說明，

Table 1: Power Mac G5 tech specs
Configurations Dual 1.8GHz Dual 2GHz Dual 2.5GHz

Model M9454LL/A M9455LL/A M9457LL/A

G5 Processor Dual 1.8GHz PowerPC G5 Dual 2GHz PowerPC G5 Dual 2.5GHz PowerPC G5

Frontside bus 900MHz per processor 1GHz per processor 1.25GHz per processor
Level2 Cache 512K per processor 512K per processor 512K per processor

效果檢查：http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm 複製內容到剪貼簿代碼: , 知道del，就不要再用做刪除線了，用del顯然更有語意化。而del還帶有cite和datetime來表示刪除的原因以及刪除的時間。 ins是表示插入，也有這樣的屬性。例如：複製內容到剪貼簿代碼:

表示是電腦程式碼。而預設樣式為打字體。技術論壇和blog中經常遇到。
例如：
複製內容到剪貼簿
代碼:
<code>p{margin:2px 0;}
、

標籤是表示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>
參考資料:
預設樣式：
http://www.w3cn.org/article/tips/2005/116.html
http://www.w3.org/ TR/CSS21/sample.html
語意化:
http://www.456bereastreet.com/lab/developing_with_web_standards/zh
http://www.456bereastreet.com/lab/devstanping_with_web🎜>http://www.456bereastreet.com/lab/devstanping_with_web🎜>http://www.w3cn.org/article/translate/2005/114.html
http://www. junchenwu.com/2005/11/html_tags.html
http://brainstormsandraves.com/articles/semantics/structure/
http://www.w3.org/TR/html401/struct/text.htm
http://www.simplebits.com/bits/simplequiz/

資源連結：Bad Tags：
http://www.htmldog.com /guides/htmlintermediate/badtags/
The Q tag
http://diveintomark.org/archives/2002/05/04/the_q_tag
HTML, XHTML, semantics and the future of the web
HTML, XHTML, semantics and the future of the web
HTML, XHTML, semantics and the future of the webHTML, XHTML, semantics and the future of the webHTML, XHTML, semantics and the future of the webHTML, XHTML, semantics and the future of the web http://www.westciv.com/style_master/house/good_oil/xhtml/index.html

標籤為首部說明，
、	、、 summary XHTML中的表格不應用來佈局。然而如果是為了標記列表的數據，就應該使用表格了。	為表格標題，屬性summar為摘要，
Configurations	Dual 1.8GHz	Dual 2GHz	Dual 2.5GHz
Model	M9454LL/A	M9455LL/A	M9457LL/A
G5 Processor	Dual 1.8GHz PowerPC G5	Dual 2GHz PowerPC G5	Dual 2.5GHz PowerPC G5
Frontside bus	900MHz per processor	1GHz per processor	1.25GHz per processor
Level2 Cache	512K per processor	512K per processor	512K per processor

陳述：

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

上一篇：讓IE8啟動IE7相容模式的程式碼_HTML/Xhtml_網頁製作下一篇：讓IE8啟動IE7相容模式的程式碼_HTML/Xhtml_網頁製作

看更多

語意化的網頁 XHTML語意化標籤_HTML/Xhtml_網頁製作

、、、、、,作為標題使用，並且依據重要性遞減。 是最高的等級。 例如:

、

、

、

、

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

是最高的等級。 例如:

代碼:

次級標題

代碼:

代碼:

代碼:

複製內容到剪貼簿

代碼:

代碼:

代碼:

代碼:

代碼:

代碼:

代碼:

代碼:

相關文章

、
、
、
、
、
,作為標題使用，並且依據重要性遞減。
是最高的等級。
例如:

是最高的等級。
例如: