省略資源文件的協議
建議省略掉圖片, 媒體文件, 樣式和腳本 URL 中的協議部分 (http:, https:), 省略掉協議部分後, 資源文件將繼承頁面 URL 的協議. 不但可以防止內容混用的問題, 還可以減小頁面的尺寸. 比如: 引用一個 JavaScript 文件可以用下面建議的方式來寫.
為什麼 h4, h5, h6 標簽很少用到?
標題標簽包括 h1 到 h6, 我們常用 h1, h2, h3, 但極少用到 h4, h5 和 h6.
在一個合理語義化, 敢於裸奔 (不使用 CSS 進行布局) 的網站裡面, 標題標簽除了語義化, 還帶有一些樣式作用. 但在 CSS 普及的今天, 用 h1 和 h6 其實沒有太大區別, 反正外觀也能隨便套.
作為標題標簽, 有更牛逼的功能, 標題元素意味著頁面上高權值的關鍵詞, 所以 h1, h2 和 h3 被頻繁利用來為關鍵詞加權. 而 h4, h5 和 h6 的權值並不高, 甚至比不上 strong 和 em, 所以很少被用到. 估計他們權限層次如下:
h1 > h2 > h3 > strong > em > h4 > h5 > h6
什麼時候使用 thead, tbody 或 tfoot?
我本來認為 thead 作為表頭用來放表格標題單元, 如 th; 而 tbody 是放表格內容, tfoot 是表格說明. 其實我的理解不太正確, 這幾個標簽其實是可有可無的.
因為浏覽器一般需要整個表格下載完才開始顯示, 在以 table 為布局的時代影響用戶閱讀. 所以這幾個標簽是用來將表格劃分成多個表格部分, 下載完成部分即可顯示. 另外, 也為了打印長表格時的時候表頭和表尾可以在每一頁出現.
省略掉可選的標簽
用過 Dreamwave 的同學應該有印象, 當你創建一個 HTML 文件, 默認有代碼如下.
XML/HTML Code復制內容到剪貼板- <html>
- <head>
- </head>
- <body>
- </body>
- </html>
我們會將 title, 外部 CSS 和 JavaScript 引用放在 head 區域, 在頁面上展示的內容放在 body 裡面, 但其實 html, head 和 body 都是可省略的標簽.
將這些可選標簽刪除之後, 看起來很怪, 但頁面顯示正常, W3C 檢測也能通過. 我已經在博客上這樣處理了. 但有一點需要注意的, 如果你希望用 XHTML 編寫頁面, 那麼請保留 html 標簽, 因為你仍需要下面這句代碼作為聲明.
XML/HTML Code復制內容到剪貼板- <html xmlns="http://www.w3.org/1999/xhtml">
b 標簽和 i 標簽
很多人以為 b 標簽和 i 標簽的命運和 u 標簽一樣, 被 W3C 歸類為 "不推薦使用標簽". 但 HTML5 規范中, 這兩個標簽還是推薦使用的. 這一點我一直清楚, 還跟朋友為這事爭執過. 但我一直不明白 HTML5 中如何定義它們.
hr 標簽
hr 是一根線, 分割內容的橫線. 我一直認為 hr 是個蹩腳的東西, 畫出來的線用 CSS 好不好處理, 毫無用處. 其實 hr 在語義上是文章的分割線, 將文章上下文完全劃分開, 讓它們毫無關系.
其作用就像很多日志類博客文章裡面出現的下圖的分割線, 只不過 hr 在語義上也是如此, 爬蟲也能理解.
為什麼我們習慣用 a 標簽做按鈕?
不是 input type="button" 可以理解, 因為低版本的 IE 上看不到 hover 效果. 但為什麼或者 span, 而是 a 標簽? a 標簽做成按鈕, 不帶 href, 這種做法是對的嗎? 我還沒想好, 以前這麼做就像是條件反射一樣.
後話
Google 的 HTML/CSS 代碼風格指南是一個短小精悍的建議性代碼編寫手冊, 很有用, 但請不要迷信. 像裡面有一項, 建議使用兩個空格作為縮進, 在很多團隊可能不具有可行性, 我們團隊現在用的還是 tab.
該手冊中很多 HTML 建議都是針對 HTML5 的, 但這裡是用 HTML 風格而非 XHTML 風格, 很多地方為了省略代碼實際上削弱了代碼的可讀性, 大家應該對其取捨有所判斷.