CSS必知必會集錦（一）：HTML標記與文件結構

編者注：本集錦摘編自圖靈新書《CSS設計師指南（第3版）》各章的“側邊欄”，是作者從相關主題中提煉出來的短小精悍的提示和法則。其中，既包含業界公認的CSS最佳實踐，又不乏作者獨到的一家之言，還有很多有價值的參考資料。理解這些CSS知識點，對夯實基礎，開闊視野是至關重要的。

關閉標籤

XHTML標準嚴格規定所有標籤都必須關閉，但HTML5標準在這方面則要寬鬆得多。換句話說，在HTML5網頁裡，某些閉標籤是可以省略不寫的。要了解HTML5語法，可以參考這個連結http://dev.w3.org/html5/html-author/#syntactic-overview。

即使你在標記段落時只寫了一個段落的開標籤，沒有寫與之對應的閉標籤，仍然可以通過HTML5標準驗證。不過，我個人習慣於關閉所有標籤，因為這樣可以更清楚地知道自己標記的結構，同時也能保證不讓自己忘了關閉那些應該關閉的標籤。我建議讀者也這樣做，本書中的程式碼示例也會關閉所有標籤。

對於非閉合標籤，XHTML要求必須這樣寫：

<img src="images/cisco.jpg" alt="My dog Cisco" />

而在HTML5中，可以省略最後那個表示關閉的斜槓，寫成：

<img src="images/cisco.jpg" alt="My dog Cisco" >

不過，我還是習慣於給非閉合標籤的末尾也加上一個空格和斜槓。HTML5會忽略這個斜槓，而我在檢查程式碼結構時，通過它一眼就能知道這個標籤已經關閉了，所以它不包含後面的標籤。

視障使用者使用的螢幕閱讀器會大聲讀出alt屬性的內容，因此一定要給<img>標籤的這個alt屬性新增讓人一聽（或一看）就能明白的內容。

要想了解所有HTML標籤和屬性，可以參考HTML Dog網站：http://htmldog.com/reference/htmltags。

HTML5標準推出之後，HTML文件的結構一下子得到了極大簡化。就算你的Web開發經驗不多，估計都會對之前HTML和XHTML複雜的文件型別（doctype），包括過渡型和嚴格型，以及那些後設資料標籤（<meta>）記憶猶新。所有這些，在HTML5中都已經被更簡單的語法取代，而且雖然語法簡單但卻能夠與之前的HTML版本相容。

使用HTML註釋標籤，可以為你自己或者其他將來可能會修改這個頁面的人寫一些備註。HTML註釋以<!--開頭，以-->結尾，註釋內容就寫在它們中間。瀏覽器在載入頁面時，會忽略註釋，不會顯示其中的內容。

關於<title>標籤

搜尋引擎會給<title>標籤中的文字內容賦予很高的權重。而且這些文字也會作為網頁標題出現在搜尋結果列表中。為此，千萬不要讓那些“歡迎光臨我的網頁！”之類的廢話佔據你的<title>標籤。一定要讓這些文字簡潔明確，而且包含目標讀者在搜尋你的網頁內容時會使用的關鍵詞。

標記中的兩個<img>標籤雖然分別位於兩行，但這並不影響圖片在瀏覽器中顯示時的效果。圖片是行內元素，所以它們顯示的時候就會並列出現在一行上。而且，標籤之間的空白（包括製表、回車和空格）都會被瀏覽器忽略。因此，為了讓程式碼的版式佈局一目瞭然，你可以隨意在標籤之間新增換行和空格。一般推薦的做法都是子標籤相對於父標籤要有一個縮排。

HTML實體

HTML實體常用於生成那些鍵盤上沒有的印刷字元，比如^TM、†、©，等等。HTML實體以一個和號（&）開頭，一個分號（;）結尾，二者之間是表示實體的字串。在前面的例子中，兩個實體的名字分別是“left-double-quote”（左雙引號）和“right-double-quote”（右雙引號）的簡寫。

Peachpit另一位作者Elizabeth Castro（她的書非常贊，在此強烈向大家推薦）在自己的一個網頁中列出了常用的HTML實體：http://www.elizabethcastro.com/html/extras/entities.html。

要注意的是，由於和號表示實體開頭，所以在要顯示和號的時候不能直接寫和號，而要在HTML標籤包含的文字中使用& 實體，這樣才能顯示出&來。比如，寫成Johnson & Johnson，才會顯示成：Johnson & Johnson。