Web2.0下XHTML+CSS 設計需要注意的地方小結_經驗交流

來源:互聯網
上載者:User
注意事項:
1、除選擇DOCTYPE之外的語句必須使用小寫英文字母書寫。其中包括 Macromedia Dreamweaver 產生的滑鼠動作,如 OnMouseOver 也必須修改成 onmouseover。

2、XHTML文法規要求所有的標識都必須有開始和結束。例如和、

等,對於不成對的標識,要求在標識最後加一個空格,然後跟一個"/"。例如
寫成
、寫成,加空格的原因是避免代碼連在一起瀏覽器不識別。

3、所有的XML標記都必須合理嵌套。如:

必須修改為:

,就是說,一層一層的嵌套必須是嚴格對稱。

4、所有的屬性必須用引號""括起來。如: 必須修改為: 。特殊情況,你需要在屬性值裡使用雙引號,你可以用",單引號可以使用',例如:。

5、把所有<和&特殊符號用編碼錶示。如:任何小於符號(<),不是標籤的一部分,都必須被編碼為& l t ; ,任何大於符號(>),不是標籤的一部分,都必須被編碼為 & g t ; ,任何與號(&),不是實體的一部分的,都必須被編碼為& a m p ; 。(以上代碼字母間無空格)

6、給所有屬性賦一個值。如: 必須修改為: 。

7、不要在注釋內容中使用“--”。如: 可以用等號或者空格替換內部的虛線 。

首先是規範的檔案頭部分的寫法:

CODE:










[Copy to clipboard]



在CSS的定義方面,值得推薦的是一種通用字型設定的方案,內容如下:
CODE:
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif; }
[Copy to clipboard]


字型按照所列出的順序選用。如果使用者的電腦含有Lucida Grande字型,文檔將被指定為Lucida Grande。沒有的話,就被指定為Verdana字型,如果也沒有Verdana,就指定為Lucida字型,依此類推;

Lucida Grande字型適合Mac OS X;

Verdana字型適合所有的Windows系統;

Lucida適合UNIX使用者;

"宋體"適合中文簡體使用者;

如果所列出的字型都不能用,則預設的sans-serif字型能保證調用。


CSS中用四個偽類來定義連結的樣式,分別是: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 ;}

但是書寫的時候一定要注意順序,正確的順序是:LVHA,如果不這麼寫的話,很可能效果很你預期的不一樣。

中間部分的布局規格化和菜單的非表格實現需要實踐的引導,在這裡先不寫什麼。下面寫一點關於代碼校正的記錄。

XHTML校正常見錯誤原因對照表:
No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--未定義DOCTYPE。

No Character Encoding Found! Falling back to UTF-8.--未定義語言編碼。

end tag for "img" omitted, but OMITTAG NO was specified--圖片標籤沒有加"/"關閉。

an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--屬性值必須加引號。

element "DIV" undefined---DIV標籤不能用大寫,要改成小寫div。

required attribute "alt" not specified---圖片需要加alt屬性。

required attribute "type" not specified---JS或者CSS調用的標籤漏了type屬性。

CSS2校正常見錯誤原因對照表:
(警告)無效數字 : color909090 不是一個 color 值 : 909090 ---十六進位顏色值必須加"#"號,即#909090
(警告)無效數字 : margin-topUnknown dimension : 6pixels ---pixels不是一個單位值,正確寫法6px
(警告)屬性 scroll_bar-face-color 不存在 : #eeeeee --- 定義捲軸顏色是非標準的屬性
(警告)Line : 0 font-family: 建議你指定一個種類族科作為最後的選擇 --W3C建議字型定義的時候,最後以一個類別的字型結束,例如"sans-serif",以保證在不同作業系統下,網頁字型都能被顯示
(警告)Line : 0 can't find the warning message for otherprofile --表示在代碼中有非標準屬性或值,校正程式無法判斷和提供相應的警告資訊
  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.