關于XHTML 以及 如何讓網站通過W3C 標準
1、XHTML 是什么？
XHTML 指可擴展超文本標簽語言（EXtensible HyperText Markup Language）。
XHTML 的目標是取代 HTML。
XHTML 與 HTML 4.01 幾乎是相同的。
XHTML 是更嚴格更純凈的 HTML 版本。
XHTML 是XML 的一種應用，用來重新定義HTML。
XHTML 符合W3C 標準。
2、XHTML 與HTML 的區別
XHTML 是相比較于HTML 擁有更多規則的超文本標記語言。比如：HTML 可以忽略的錯誤（如：元素不關閉）等，在XHTML 里面是不準許的，將被指出錯誤。
XHTML 是一種更規范網頁寫法的語言，如何符合W3C 規范？總結如下：
> 1、 確保所有的標簽名都使用小寫字母；
> 2、 確保所有的屬性值都放在引號里；
> 3、 XHTML 元素必須被關閉；
> 4、 確保所有成對的雙標簽出現的順序，XHTML 元素必須被正確地嵌套；
> 5、 不成對的單標簽都用“/>”結束，并且“/”和“>”之間不要有空格；
> 6、 XHTML 文檔必須擁有根元素；
3、XHTML 強制使用的標簽元素
所有XHTML 文檔必須進行文件類型聲明（DOCTYPE DECLARATION）；
所有XHTML 文檔中，必須存在html、head、body、title 標簽元素，并且title 標簽元素必須位于head 標簽元素中；
下面是一個最小化的XHTML 文件模板：
<!DOCTYPE Doctype goes here>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title goes here</title>
</head>
<body>
</body>
</html>
提示：文件類型聲明并非XHTML 文檔自身的組成部分。它并不是XHTML 元素，也沒有關閉標簽。
注意：
在XHTML 中，<html> 標簽內的xmlns 屬性是必需的。然而，當XHTML 文檔中沒有這個屬性時，w3.org 的驗證工具也不會提示錯誤。這是因為"xmlns=http://www.w3.org/1999/xhtml" 是一個固定的值，即使你沒有把它包含在代碼中，這個值也會被添加到<html> 標簽中。
4、三種文檔類型聲明
DTD 規定了使用標準通用標記語言（SGML）的網頁的語法。諸如HTML 這樣的通用標記語言，應該使用DTD 來規定應用于某種特定文檔中的標簽的規則，這些規則包括一系列的標簽元素和實體的聲明。在標準通用標記語言（SGML）的DTD（文檔類型聲明）中，XHTML 被詳細地進行了描述。XHTML DTD 使用精確的、可被計算機讀取的語言來描述合法的 XHTML 標記的語法和句法。
（1）STRICT（嚴格類型）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
（2）TRANSITIONAL（過渡類型）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
（3） FRAMESET（框架類型）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
5、驗證XHTML
CSS 是否規范？ 檢測地址：http://jigsaw.w3.org/css-validator/
XHTML & HTML 是否符合W3C 標準？ 檢測地址：http://validator.w3.org/
如何讓網站通過W3C 標準
新一代W3C，XHTML 代碼規范，希望在編寫網頁程序時，務必遵循這一規范。
這將對網站的優化、網站的推廣、搜索引擎的友好是有很大的幫助。
以下是“如何讓網站通過W3C 標準”這一問題總結出來的幾個大點，希望對大家有幫助!
1、XHTML 1.0 文件類別宣告的正確寫法 (不可小寫)
A:過度標準（Transitional）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
B:框架標準（Frameset）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
C:嚴格標準（Strict） 包含以上須注意的問題,還有其他更嚴格的標準
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2、頭文件問題
所有的網頁頭文件都一律都改為標準形式，寫法如下：
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta http-equiv="content-language" content="zh-cn" />
<meta name="keywords" content="..." />
<meta name="description" content="..."/>
<title>...</title>
</head>
3、不允許使用target="_blank"
在HTML4.01可以使用target="_blank",但XHTML1.0是不被允許的.我使用了一個HTML4.0的新屬性：rel，這個屬性用來說明鏈接和包含此鏈接頁面的關系，以及鏈接打開的目標。
原來這樣寫的代碼：<a href="document.html" target="_blank"> 打開一個新窗口</a>
現在要寫成這樣：<a href="document.html" rel="external">打開一個新窗口</a>
這是符合strict標準的方法。
當然還必須配合一個javascript才有效。javascript完整的代碼JS如下:
function externallinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute( "href") &&
anchor.getAttribute( "rel") == "external")
anchor.target = "_blank"; }
}
window.onload = externallinks;
然后把它保存成一個.js文件(比如open.js)，再通過外部聯接方法調用：
<script type="text/javascript" src="external.js"></script>
4、XHTML 1.0 要求所有的標識必須關閉
所有沒有成對的空標識必須以 /> 結尾
<p></p>和<a href="index.html"></a>這就是成對
錯誤 <br> <hr>
正確 <br /> <hr />
錯誤 <input type="text" name="name">
正確 <input type="text" name="name" />
錯誤 <meta ...>
正確 <meta ... />
錯誤 <link rel="stylesheet" type="text/css" href="style.css">
正確 <link rel="stylesheet" type="text/css" href="style.css" />
錯誤 <img src="bg.gif" border="0" alt="說明文字">
正確 <img src="bg.gif" border="0" alt="說明文字" />
5、所有標識元素名稱都使用小寫
錯誤 <HTML> <TITLE> <HEAD> <BODY>
正確 <html> <title> <head> <body>
錯誤 <IMG SRC="BG.GIF" BORDER="0" ALT="說明文字">
正確 <img src="bg.gif" border="0" alt="說明文字" />
錯誤 <UL><LI></LI></UL>
正確 <ul><li></li></ul>
以上只是舉例,是"所有"標簽元素名稱都必須是小寫
6、同一個id 選擇器不可重復使用
一個網頁中id="xx"同一個選擇器不能重復使用,若需要重復請用class="xx"
7、標識必須是成對的
<p> </p> <span></span> <div></div>
8、正確的標識順序
錯誤 <b><i>文字</b></i>
正確 <b><i>文字</i></b>
9、JS 寫法
Javascript我們通常會寫為
錯誤 <script language="javascript">
W3C標準必須為程式指定類型type=text/javascript,所以要寫為
正確 <script type="text/javascript">
或者 <script language="javascript" type="text/javascript">
載入外部.js：
正確 <script type="text/javascript" src="script.js"></script>
10、絕對不可省略雙引號或單引號
錯誤 style=font-size:9pt
正確 style="font-size:9pt"
錯誤 <img src=bg.gif width=140 height=30 alt=text />
正確 <img src="bg.gif" width="140" height="30" alt="text" />
錯誤 <a href=home>text</a>
正確 <a href="home">text</a>
11、圖片標識加上文字說明alt="圖片說明"
錯誤 <img src="bg.gif" height="50" border="0" />
正確 <img src="bg.gif" height="50" border="0" alt="說明文字" />
12、背景音樂不允許使用 bgsound 標簽
不過我們依然可以用JavaScript來解決這個問題。js代碼如下：
<!-- Begin
var MSIE=navigator.userAgent.indexOf("MSIE");
var NETS=navigator.userAgent.indexOf("Netscape");
var OPER=navigator.userAgent.indexOf("Opera");
if((MSIE>-1) || (OPER>-1)) {
document.write("<BGSOUND SRC=背景音樂地址 LOOP=INFINITE>");
} else {
document.write("<EMBED SRC=背景音樂地址 AUTOSTART=TRUE ");
document.write("HIDDEN=true VOLUME=100 LOOP=TRUE>");
}
// end -->
然后保存成.js文件(比如background_music.js)，通過外部聯接方法調用它
13、<embed> 標識的爭議
<embed>是Netscape的私有標識,W3C 從HTML3.2 HTML 4.01 到 XHTML 1.0 中都沒有這個標識,所以使用<embed>的頁面是不能通過標準測試。
W3C推薦使用 <object> 標識,用<object>插入flash影片的代碼可以寫為:
<object type="application/x-shockwave-flash" data="index.swf" width="400" height="200">
<param name="movie" value="index.swf" />
</object>
但這樣的寫法可能IE5/IE6 Win瀏覽器版本會出現問題.
<embed>標識因為廣大的受到運用,不再標準范圍引起很大的爭議,想要解決這個問題,只能等IE瀏覽器對<object>有更好的支持或者W3C愿意收錄<embed>標識。
14、不允許使用框架標簽<IFRAME>
用JavaScript解決問題了。javascript完整的代碼如下：
function ifr(url,w,h){document.write(’<iframe id="ifr" name="ifr" width="’+w+’" height="’+h+’" border="0" frameborder="0" scrolling="no" src="’+url+’"></iframe>’);}
然后把它保存成一個.js文件(比如iframe.js)，然后通過外部聯接方法調用：
<script type="text/javascript" src="ifr.js"></script>
在你需要插入框架的地方寫以下代碼即可：
<script type="text/javascript">ifr(’需插入的網頁地址’,’567’,’485’);</script>
函數ifr()使用說明：ifr(’這里寫地址’,’這里寫寬度’,’這里寫長度’,)
15、google 廣告問題
google廣告的代碼是不符合W3C標準的，我只好又把它轉成JS調用，但GOOGLE政策里是寫著不允許修改代碼的，
關于這點我們只能等待看看在以后會有什么修改了。
JS文件(google.js)代碼如下：
document.writeln("<script type=\"text\/javascript\"><!--");
document.writeln("google_ad_client = \"pub-0538745384335317\";");
document.writeln("google_ad_width = 125;");
document.writeln("google_ad_height = 125;");
document.writeln("google_ad_format = \"125x125_as\";");
document.writeln("google_ad_type = \"text_image\";");
document.writeln("\/\/2007-06-29: http://www.100byte.com/");
document.writeln("google_ad_channel = \"4751988107\";");
document.writeln("google_color_border = \"1a1a1a\";");
document.writeln("google_color_bg = \"1a1a1a\";");
document.writeln("google_color_link = \"d0eb6a\";");
document.writeln("google_color_text = \"ffffff\";");
document.writeln("google_color_url = \"8ad459\";");
document.writeln("google_ui_features = \"rc:6\";");
document.writeln("\/\/-->");
document.writeln("<\/script>");
document.writeln("<script type=\"text\/javascript\"");
document.writeln(" src=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\">");
document.writeln("<\/script>")
各位可以按照自己的情況修改，網上也有許多把HTML代碼轉為JS代碼的地方。
最后在需要掛廣告的地方放入代碼 <script type="text/javascript" src="google.js"></script>
16、解釋文字不可包含- - 符號
錯誤 <!-- index--box -->
正確 <!-- indexbox -->
小貼士：在樣式表的注釋中注意盡量避免用中文
17、正確使用CSS 樣式表
樣式表放在文件本身的時候，一定要放在<head></head>之間
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
<!--
body{font-size:9pt;}
-->
</style>
注意：錯誤：<style> 正確：<style type="text/css">
18、使用表格常犯的錯誤
在做表格通常會指定寬與高,例如:
<table border="1" width="300" height="100">
<tr><td> 內容 </td></tr>
</table>
這樣做是沒有辦法通過,可使用CSS來控制標識元素的高度.
table{ height:100px; }
<table class="table"><tr><td> TEXT </td></tr> </table>
但若使用太多表格,在CSS一一指定不同高度也不是好方法,其實很簡單,將高度height 屬性指定在單元格儲存就可以通過測試了
<table border="0" width="300">
<tr>
<td height="100"> TEXT </td>
</tr>
</table>
但這不是w3c 希望的標準, 建議多使用 div 代替不必要的 table
19、非標識的一部分符號以編碼表示(窗體內包含以下符號也必須用編碼表示)
< 以 < 表示
> 以 > 表示
& 以 & 表示
程序中的連結 & 也要改用 &
錯誤 <a href="foo.cgi chapter=1§ion=2">
正確 <a href="foo.cgi chapter=1&section=2">
20、所有屬性都必須有值
XHTML1.0 規定: 所有屬性都必須有值, 若沒有值就必須重復屬性作為其值
錯誤 <input type="radio" value="v1" checked name="s1" />
正確 <input type="radio" value="v1" checked="checked" name="s1" />
錯誤 <option selected>S1</option>
正確 <option selected="selected">S1</option>
錯誤 <td nowrap>
正確 <td nowrap="nowrap">
| 作者： XuGang 網名：鋼鋼 |
| 出處： http://xugang.cnblogs.com |
| 聲明： 本文版權歸作者和博客園共有。轉載時必須保留此段聲明，且在文章頁面明顯位置給出原文連接地址！ |
浙公網安備 33010602011771號