Web2.0下XHTML+CSS 設(shè)計(jì)需要注意的地方小結(jié)
更新時(shí)間：2007年12月20日 22:02:44 作者：
在web2.0開(kāi)發(fā)下，幾點(diǎn)需要注意的地方，我們把它整理了下，希望可以對(duì)這方面有興趣的朋友提供一些幫助
注意事項(xiàng)：
1、除選擇DOCTYPE之外的語(yǔ)句必須使用小寫(xiě)英文字母書(shū)寫(xiě)。其中包括 Macromedia Dreamweaver 生成的鼠標(biāo)動(dòng)作，如 OnMouseOver 也必須修改成 onmouseover。
2、XHTML語(yǔ)法規(guī)要求所有的標(biāo)識(shí)都必須有開(kāi)始和結(jié)束。例如<body>和</body>、<p>和</p>等，對(duì)于不成對(duì)的標(biāo)識(shí)，要求在標(biāo)識(shí)最后加一個(gè)空格，然后跟一個(gè)"/"。例如<br>寫(xiě)成<br />、<img>寫(xiě)成<img />，加空格的原因是避免代碼連在一起瀏覽器不識(shí)別。
3、所有的XML標(biāo)記都必須合理嵌套。如：<p><b></p></b> 必須修改為：<p><b></b></p> ，就是說(shuō)，一層一層的嵌套必須是嚴(yán)格對(duì)稱。
4、所有的屬性必須用引號(hào)""括起來(lái)。如： <height=80> 必須修改為：<height="80"> 。特殊情況，你需要在屬性值里使用雙引號(hào)，你可以用"，單引號(hào)可以使用'，例如：<alt="say'hello'">。
5、把所有<和&特殊符號(hào)用編碼表示。如：任何小于號(hào)（<），不是標(biāo)簽的一部分，都必須被編碼為& l t ; ，任何大于號(hào)（>），不是標(biāo)簽的一部分，都必須被編碼為 & g t ; ，任何與號(hào)（&），不是實(shí)體的一部分的，都必須被編碼為& a m p ; 。（以上代碼字母間無(wú)空格）
6、給所有屬性賦一個(gè)值。如： <td nowrap> <input type="checkbox" name="shirt" value="medium" checked> 必須修改為：<td nowrap="nowrap"> <input type="checkbox" name= "shirt" value="medium" checked="checked">。
7、不要在注釋內(nèi)容中使用“--”。如：<!--這里是注釋-----------這里是注釋--> 可以用等號(hào)或者空格替換內(nèi)部的虛線 <!--這里是注釋============這里是注釋-->。
首先是規(guī)范的文件頭部分的寫(xiě)法：
CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href=\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\" target=\"_blank\">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href=\"http://www.w3.org/1999/xhtml\" target=\"_blank\">http://www.w3.org/1999/xhtml</a>" lang="utf-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="utf-8" />
<meta content="all" name="robots" />
<meta name="author" content="siyizhu3722@msn.com,siyizhu" />
<meta name="Copyright" content="Siyizhu's SimpleLife,轉(zhuǎn)載本站文章請(qǐng)順便加上版權(quán)" />
<meta name="description" content="siyizhu" />
<meta content="siyizhu,QQ:87654080,朱聰,China,湖北,中國(guó)" name="keywords" />
[Copy to clipboard]
在CSS的定義方面，值得推薦的是一種通用字體設(shè)置的方案，內(nèi)容如下：
CODE:
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif; }
[Copy to clipboard]
字體按照所列出的順序選用。如果用戶的計(jì)算機(jī)含有Lucida Grande字體，文檔將被指定為L(zhǎng)ucida Grande。沒(méi)有的話，就被指定為Verdana字體，如果也沒(méi)有Verdana，就指定為L(zhǎng)ucida字體，依此類推；
Lucida Grande字體適合Mac OS X；
Verdana字體適合所有的Windows系統(tǒng)；
Lucida適合UNIX用戶；
"宋體"適合中文簡(jiǎn)體用戶；
如果所列出的字體都不能用，則默認(rèn)的sans-serif字體能保證調(diào)用。
CSS中用四個(gè)偽類來(lái)定義鏈接的樣式，分別是：a:link、a:visited、a:hover和a : active，例如：
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}
但是書(shū)寫(xiě)的時(shí)候一定要注意順序，正確的順序是：LVHA，如果不這么寫(xiě)的話，很可能效果很你預(yù)期的不一樣。
中間部分的布局規(guī)格化和菜單的非表格實(shí)現(xiàn)需要實(shí)踐的引導(dǎo)，在這里先不寫(xiě)什么。下面寫(xiě)一點(diǎn)關(guān)于代碼校驗(yàn)的記錄。
XHTML校驗(yàn)常見(jiàn)錯(cuò)誤原因?qū)φ毡?
No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--未定義DOCTYPE。
No Character Encoding Found! Falling back to UTF-8.--未定義語(yǔ)言編碼。
end tag for "img" omitted, but OMITTAG NO was specified--圖片標(biāo)簽沒(méi)有加"/"關(guān)閉。
an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--屬性值必須加引號(hào)。
element "DIV" undefined---DIV標(biāo)簽不能用大寫(xiě)，要改成小寫(xiě)div。
required attribute "alt" not specified---圖片需要加alt屬性。
required attribute "type" not specified---JS或者CSS調(diào)用的標(biāo)簽漏了type屬性。
CSS2校驗(yàn)常見(jiàn)錯(cuò)誤原因?qū)φ毡?
(警告)無(wú)效數(shù)字 : color909090 不是一個(gè) color 值 : 909090 ---十六進(jìn)制顏色值必須加"#"號(hào)，即#909090
(警告)無(wú)效數(shù)字 : margin-topUnknown dimension : 6pixels ---pixels不是一個(gè)單位值，正確寫(xiě)法6px
(警告)屬性 scroll_bar-face-color 不存在 : #eeeeee --- 定義滾動(dòng)條顏色是非標(biāo)準(zhǔn)的屬性
(警告)Line : 0 font-family: 建議你指定一個(gè)種類族科作為最后的選擇 --W3C建議字體定義的時(shí)候，最后以一個(gè)類別的字體結(jié)束，例如"sans-serif"，以保證在不同操作系統(tǒng)下，網(wǎng)頁(yè)字體都能被顯示
(警告)Line : 0 can't find the warning message for otherprofile --表示在代碼中有非標(biāo)準(zhǔn)屬性或值，校驗(yàn)程序無(wú)法判斷和提供相應(yīng)的警告信息
1、除選擇DOCTYPE之外的語(yǔ)句必須使用小寫(xiě)英文字母書(shū)寫(xiě)。其中包括 Macromedia Dreamweaver 生成的鼠標(biāo)動(dòng)作，如 OnMouseOver 也必須修改成 onmouseover。
2、XHTML語(yǔ)法規(guī)要求所有的標(biāo)識(shí)都必須有開(kāi)始和結(jié)束。例如<body>和</body>、<p>和</p>等，對(duì)于不成對(duì)的標(biāo)識(shí)，要求在標(biāo)識(shí)最后加一個(gè)空格，然后跟一個(gè)"/"。例如<br>寫(xiě)成<br />、<img>寫(xiě)成<img />，加空格的原因是避免代碼連在一起瀏覽器不識(shí)別。
3、所有的XML標(biāo)記都必須合理嵌套。如：<p><b></p></b> 必須修改為：<p><b></b></p> ，就是說(shuō)，一層一層的嵌套必須是嚴(yán)格對(duì)稱。
4、所有的屬性必須用引號(hào)""括起來(lái)。如： <height=80> 必須修改為：<height="80"> 。特殊情況，你需要在屬性值里使用雙引號(hào)，你可以用"，單引號(hào)可以使用'，例如：<alt="say'hello'">。
5、把所有<和&特殊符號(hào)用編碼表示。如：任何小于號(hào)（<），不是標(biāo)簽的一部分，都必須被編碼為& l t ; ，任何大于號(hào)（>），不是標(biāo)簽的一部分，都必須被編碼為 & g t ; ，任何與號(hào)（&），不是實(shí)體的一部分的，都必須被編碼為& a m p ; 。（以上代碼字母間無(wú)空格）
6、給所有屬性賦一個(gè)值。如： <td nowrap> <input type="checkbox" name="shirt" value="medium" checked> 必須修改為：<td nowrap="nowrap"> <input type="checkbox" name= "shirt" value="medium" checked="checked">。
7、不要在注釋內(nèi)容中使用“--”。如：<!--這里是注釋-----------這里是注釋--> 可以用等號(hào)或者空格替換內(nèi)部的虛線 <!--這里是注釋============這里是注釋-->。
首先是規(guī)范的文件頭部分的寫(xiě)法：
CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href=\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\" target=\"_blank\">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href=\"http://www.w3.org/1999/xhtml\" target=\"_blank\">http://www.w3.org/1999/xhtml</a>" lang="utf-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="utf-8" />
<meta content="all" name="robots" />
<meta name="author" content="siyizhu3722@msn.com,siyizhu" />
<meta name="Copyright" content="Siyizhu's SimpleLife,轉(zhuǎn)載本站文章請(qǐng)順便加上版權(quán)" />
<meta name="description" content="siyizhu" />
<meta content="siyizhu,QQ:87654080,朱聰,China,湖北,中國(guó)" name="keywords" />
[Copy to clipboard]
在CSS的定義方面，值得推薦的是一種通用字體設(shè)置的方案，內(nèi)容如下：
CODE:
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif; }
[Copy to clipboard]
字體按照所列出的順序選用。如果用戶的計(jì)算機(jī)含有Lucida Grande字體，文檔將被指定為L(zhǎng)ucida Grande。沒(méi)有的話，就被指定為Verdana字體，如果也沒(méi)有Verdana，就指定為L(zhǎng)ucida字體，依此類推；
Lucida Grande字體適合Mac OS X；
Verdana字體適合所有的Windows系統(tǒng)；
Lucida適合UNIX用戶；
"宋體"適合中文簡(jiǎn)體用戶；
如果所列出的字體都不能用，則默認(rèn)的sans-serif字體能保證調(diào)用。
CSS中用四個(gè)偽類來(lái)定義鏈接的樣式，分別是：a:link、a:visited、a:hover和a : active，例如：
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}
但是書(shū)寫(xiě)的時(shí)候一定要注意順序，正確的順序是：LVHA，如果不這么寫(xiě)的話，很可能效果很你預(yù)期的不一樣。
中間部分的布局規(guī)格化和菜單的非表格實(shí)現(xiàn)需要實(shí)踐的引導(dǎo)，在這里先不寫(xiě)什么。下面寫(xiě)一點(diǎn)關(guān)于代碼校驗(yàn)的記錄。
XHTML校驗(yàn)常見(jiàn)錯(cuò)誤原因?qū)φ毡?
No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--未定義DOCTYPE。
No Character Encoding Found! Falling back to UTF-8.--未定義語(yǔ)言編碼。
end tag for "img" omitted, but OMITTAG NO was specified--圖片標(biāo)簽沒(méi)有加"/"關(guān)閉。
an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--屬性值必須加引號(hào)。
element "DIV" undefined---DIV標(biāo)簽不能用大寫(xiě)，要改成小寫(xiě)div。
required attribute "alt" not specified---圖片需要加alt屬性。
required attribute "type" not specified---JS或者CSS調(diào)用的標(biāo)簽漏了type屬性。
CSS2校驗(yàn)常見(jiàn)錯(cuò)誤原因?qū)φ毡?
(警告)無(wú)效數(shù)字 : color909090 不是一個(gè) color 值 : 909090 ---十六進(jìn)制顏色值必須加"#"號(hào)，即#909090
(警告)無(wú)效數(shù)字 : margin-topUnknown dimension : 6pixels ---pixels不是一個(gè)單位值，正確寫(xiě)法6px
(警告)屬性 scroll_bar-face-color 不存在 : #eeeeee --- 定義滾動(dòng)條顏色是非標(biāo)準(zhǔn)的屬性
(警告)Line : 0 font-family: 建議你指定一個(gè)種類族科作為最后的選擇 --W3C建議字體定義的時(shí)候，最后以一個(gè)類別的字體結(jié)束，例如"sans-serif"，以保證在不同操作系統(tǒng)下，網(wǎng)頁(yè)字體都能被顯示
(警告)Line : 0 can't find the warning message for otherprofile --表示在代碼中有非標(biāo)準(zhǔn)屬性或值，校驗(yàn)程序無(wú)法判斷和提供相應(yīng)的警告信息
相關(guān)文章
CSS opacity - 實(shí)現(xiàn)圖片半透明效果的代碼
CSS opacity - 實(shí)現(xiàn)圖片半透明效果的代碼...2007-03-03
DIV+CSS作網(wǎng)頁(yè)容易犯的錯(cuò)誤小結(jié)
DIV+CSS作網(wǎng)頁(yè)容易犯的錯(cuò)誤小結(jié)...2007-11-11
XHTML下css+div布局總結(jié) 超強(qiáng)推薦
XHTML下css+div布局總結(jié) 超強(qiáng)推薦...2006-12-12
低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案
現(xiàn)在我們可以選擇瀏覽器非常多，所以瀏覽器的環(huán)境也是種類繁多，同一個(gè)瀏覽器也是包含各種不同的版本，不同的版本之間的渲染方法也存在差異，它們支持的 HTML5、CSS3 特性恐怕也不盡相同。這種情況于是造成Web開(kāi)發(fā)者在開(kāi)發(fā)網(wǎng)站時(shí)，要面對(duì)數(shù)量龐大的瀏覽器種類2014-03-03
ul+li及css制作韓國(guó)風(fēng)格菜單代碼
ul+li及css制作韓國(guó)風(fēng)格菜單代碼...2007-11-11
做網(wǎng)頁(yè)經(jīng)常要注意的常識(shí) 整理收集
做網(wǎng)頁(yè)經(jīng)常要注意的常識(shí) 整理收集...2007-03-03
ie中多id的調(diào)用方法...2007-03-03
讓用戶自己控制網(wǎng)頁(yè)字體的大小的css書(shū)寫(xiě)方法
讓用戶自己控制網(wǎng)頁(yè)字體的大小的css書(shū)寫(xiě)方法...2007-09-09
喜歡個(gè)性化校內(nèi)網(wǎng)網(wǎng)頁(yè)的朋友，可以用到的，感興趣可以看下，網(wǎng)頁(yè)中背景設(shè)置的一些屬性2008-09-09
IE 5.x/Win 和模型bug...2007-02-02