省略資源文件的協(xié)議

建議省略掉圖片, 媒體文件, 樣式和腳本 URL 中的協(xié)議部分 (http:, https:), 省略掉協(xié)議部分后, 資源文件將繼承頁(yè)面 URL 的協(xié)議. 不但可以防止內(nèi)容混用的問(wèn)題, 還可以減小頁(yè)面的尺寸. 比如: 引用一個(gè) JavaScript 文件可以用下面建議的方式來(lái)寫.

為什么 h4, h5, h6 標(biāo)簽很少用到?

標(biāo)題標(biāo)簽包括 h1 到 h6, 我們常用 h1, h2, h3, 但極少用到 h4, h5 和 h6.

在一個(gè)合理語(yǔ)義化, 敢于裸奔 (不使用 CSS 進(jìn)行布局) 的網(wǎng)站里面, 標(biāo)題標(biāo)簽除了語(yǔ)義化, 還帶有一些樣式作用. 但在 CSS 普及的今天, 用 h1 和 h6 其實(shí)沒(méi)有太大區(qū)別, 反正外觀也能隨便套.

作為標(biāo)題標(biāo)簽, 有更牛逼的功能, 標(biāo)題元素意味著頁(yè)面上高權(quán)值的關(guān)鍵詞, 所以 h1, h2 和 h3 被頻繁利用來(lái)為關(guān)鍵詞加權(quán). 而 h4, h5 和 h6 的權(quán)值并不高, 甚至比不上 strong 和 em, 所以很少被用到. 估計(jì)他們權(quán)限層次如下:

h1 > h2 > h3 > strong > em > h4 > h5 > h6

什么時(shí)候使用 thead, tbody 或 tfoot?

我本來(lái)認(rèn)為 thead 作為表頭用來(lái)放表格標(biāo)題單元, 如 th; 而 tbody 是放表格內(nèi)容, tfoot 是表格說(shuō)明. 其實(shí)我的理解不太正確, 這幾個(gè)標(biāo)簽其實(shí)是可有可無(wú)的.

因?yàn)闉g覽器一般需要整個(gè)表格下載完才開(kāi)始顯示, 在以 table 為布局的時(shí)代影響用戶閱讀. 所以這幾個(gè)標(biāo)簽是用來(lái)將表格劃分成多個(gè)表格部分, 下載完成部分即可顯示. 另外, 也為了打印長(zhǎng)表格時(shí)的時(shí)候表頭和表尾可以在每一頁(yè)出現(xiàn).

省略掉可選的標(biāo)簽

用過(guò) Dreamwave 的同學(xué)應(yīng)該有印象, 當(dāng)你創(chuàng)建一個(gè) HTML 文件, 默認(rèn)有代碼如下.

我們會(huì)將 title, 外部 CSS 和 JavaScript 引用放在 head 區(qū)域, 在頁(yè)面上展示的內(nèi)容放在 body 里面, 但其實(shí) html, head 和 body 都是可省略的標(biāo)簽.

將這些可選標(biāo)簽刪除之后, 看起來(lái)很怪, 但頁(yè)面顯示正常, W3C 檢測(cè)也能通過(guò). 我已經(jīng)在博客上這樣處理了. 但有一點(diǎn)需要注意的, 如果你希望用 XHTML 編寫頁(yè)面, 那么請(qǐng)保留 html 標(biāo)簽, 因?yàn)槟闳孕枰旅孢@句代碼作為聲明.

b 標(biāo)簽和 i 標(biāo)簽

很多人以為 b 標(biāo)簽和 i 標(biāo)簽的命運(yùn)和 u 標(biāo)簽一樣, 被 W3C 歸類為 "不推薦使用標(biāo)簽". 但 HTML5 規(guī)范中, 這兩個(gè)標(biāo)簽還是推薦使用的. 這一點(diǎn)我一直清楚, 還跟朋友為這事?tīng)?zhēng)執(zhí)過(guò). 但我一直不明白 HTML5 中如何定義它們.

hr 標(biāo)簽

hr 是一根線, 分割內(nèi)容的橫線. 我一直認(rèn)為 hr 是個(gè)蹩腳的東西, 畫出來(lái)的線用 CSS 好不好處理, 毫無(wú)用處. 其實(shí) hr 在語(yǔ)義上是文章的分割線, 將文章上下文完全劃分開(kāi), 讓它們毫無(wú)關(guān)系.

其作用就像很多日志類博客文章里面出現(xiàn)的下圖的分割線, 只不過(guò) hr 在語(yǔ)義上也是如此, 爬蟲(chóng)也能理解.

為什么我們習(xí)慣用 a 標(biāo)簽做按鈕?

不是 input type="button" 可以理解, 因?yàn)榈桶姹镜?IE 上看不到 hover 效果. 但為什么或者 span, 而是 a 標(biāo)簽? a 標(biāo)簽做成按鈕, 不帶 href, 這種做法是對(duì)的嗎? 我還沒(méi)想好, 以前這么做就像是條件反射一樣.

后話

Google 的 HTML/CSS 代碼風(fēng)格指南是一個(gè)短小精悍的建議性代碼編寫手冊(cè), 很有用, 但請(qǐng)不要迷信. 像里面有一項(xiàng), 建議使用兩個(gè)空格作為縮進(jìn), 在很多團(tuán)隊(duì)可能不具有可行性, 我們團(tuán)隊(duì)現(xiàn)在用的還是 tab.

該手冊(cè)中很多 HTML 建議都是針對(duì) HTML5 的, 但這里是用 HTML 風(fēng)格而非 XHTML 風(fēng)格, 很多地方為了省略代碼實(shí)際上削弱了代碼的可讀性, 大家應(yīng)該對(duì)其取舍有所判斷.