XHTML-CSS寫作建議
- 所有的xhtml代碼小寫
- 屬性的值一定要用雙引號("")括起來，且一定要有值
- 每個標籤都要有開始和結束，且要有正確的層次
- 空元素要有結束的tag或於開始的tag後加上"/"
- 表現與結構完全分離，代碼中不涉及任何的表現元素，如style、font、bgColor、border等
- <h1>到<h5>的定義，應遵循從大到小的原則，體現文檔的結構，並有利於搜索引擎的查詢。
- 給每一個表格和表單加上一個唯一的、結構標記id
- 給重要的區塊加上註釋,如：
- 給圖片加上alt標籤
- 所有的標籤必須進行合理的嵌套
- 根元素前必須有元素，宣告使用那一種DTD
- 根元素必須有xmlns屬性來指定使用http://www.w3.org/1999/xhtml的namespace
CSS樣式表規範：
- id和class命名採用該版塊的英文單詞或組合命名，並第一個單詞小寫，第二個單詞首個字母大寫，如:newRelease（最新產品/new+Release)
- CSS樣式表各區塊用註釋說明
- 儘量使用英文命名原則
- 儘量不加中槓和下劃線
- 儘量不縮寫，除非一看就明白的單詞
CSS命名規範：
| DIV | CSS名稱 | 說明 |
|---|---|---|
| 網站公用相關 | ||
| Container div | #container | 容器 |
|
Layout
|
#layout | 佈局 |
| Header or banner div | #head, #header | 頁頭部分 |
| Footer div | #foot, #footer | 頁腳部分 |
| Navigation list | #nav | 主導航 |
| Sub-navigation list | #subNav | 二級導航 |
| Menu | #menu | 菜單 |
| Sub Menu | #submenu | 子菜單 |
| Left or right side columns | #sidebar_a, #sidebar_b | 左邊欄或右邊欄 |
| Main div | #main | 頁面主體 |
| Tag | #tag | 標籤 |
| Message | #msg #message | 提示信息 |
| Tips | #tips | 小技巧 |
| Vote | #vote | 投票 |
| Friend Link | #friendlink | 友情連接 |
| Title | #title | 標題 |
| Summary | #summary | 摘要 |
| Search input | #searchInput | 搜索輸入框 |
| Search output | #search_output | 搜索輸出和搜索結果相似 |
| Search | #search | 搜索 |
| Search bar | #searchBar | 搜索條 |
| Search results | #search_results | 搜索結果 |
| Copyright information | #copyright | 版權信息 |
| brand | #branding | 商標 |
| branding-logo | #logo | LOGO |
| Site information | #siteinfo | 網站信息 |
| Copyright information etc. | #siteinfoLegal | 法律聲明 |
| Designer or other credits | #siteinfoCredits | 信譽 |
| Join us | #joinus | 加入我們 |
| Partnership opportunities | #partner | 合作伙伴 |
| Services | #service | 服務 |
| Regsiter | #regsiter | 註冊 |
| Arrow | arr/arrow | 箭頭 |
| Little | #little | 標題 |
|
Website map
|
#sitemap | 網站地圖 |
| List | #list | 列表 |
| Home page | #homepage | 首頁 |
| Sub page | subpage | 二級頁面子頁面 |
| Toolbar | #tool, #toolbar | 工具條 |
|
Next pulls
|
#drop | 下拉 |
| Next pulls menu | #dorpmenu | 下拉菜單 |
| Status | #status | 狀態 |
| 電子貿易相關 | ||
| Products | .products | 產品 |
| Products prices | .products_prices | 產品價格 |
| Products description | .products_description | 產品描述 |
| Products review | .products_review | 產品評論 |
| Editor's review | .editor_review | 編輯評論 |
| New release | .news_release | 最新產品 |
| Publisher | .publisher | 生產商 |
| Screen shot | .screenshot | 縮略圖 |
| FAQ | .faqs | 常見問題 |
| Keyword | .keyword | 關鍵詞 |
| Blog | .blog | 博客 |
| Forum | .forum | 論壇 |
