筆記說明 《CSS3實戰手冊第3版(影印版)》可以消除Web設計工作的痛苦，並且帶給你：HTML——重新入門。如果你是HTML新手，你會學到如何以CSS友好的方式進行基本頁面構造。若你是HTML高手，你將學會如何像CSS設計者那樣思考。 全書共18章，五大部分600來頁。 可能是出版方認為本書英文很 ...
筆記說明
《CSS3實戰手冊第3版(影印版)》可以消除Web設計工作的痛苦，並且帶給你：HTML——重新入門。如果你是HTML新手，你會學到如何以CSS友好的方式進行基本頁面構造。若你是HTML高手，你將學會如何像CSS設計者那樣思考。
全書共18章，五大部分600來頁。
可能是出版方認為本書英文很好懂，所以就不找譯者翻譯了。本來為作為一個行外人及英語渣，看這書會是很艱難的過程。但讀過之後發現，相比一些拙劣的中文翻譯書，居然覺得輕鬆了很多。
不同於一般CSS書枯燥的“選擇器-盒模型-文字效果-其它屬性”這樣羅列一大堆類似說明手冊的文字，”本書從編寫良好的html結構開始說起，講述了CSS3基本規則，佈局排版，進展，手把手教讀者做出符合h5規範的網頁。作者本職是做網路出版物，因此，他的設計風格帶有鮮明的出版物特性。
似乎瞭解css用法的人再讀這書有點浪費時間。但是其中大量的tips，擴展閱讀穿插其中，篇幅容納不下的話還給出了文章鏈接。讓你明白很多平時不知其所以然的操作。實例主要用於讓讀者去實踐本書的思想，而不是講述操作。我覺得，上過幾堂速成課，只知道用法，做出貌似不錯的效果，並不能算入門。真正入門，應該研究一兩本類似這樣的書。讀完之後少能夠辨別出初學者，或者學藝不精者寫的代碼。就算達到目的了。
## 第一章 編寫可供CSS調用的html
### 開頭都會說的html的黑歷史——過去與現在：
語義標簽如h1等早在html語言誕生之初就有了，對Web文檔有初步的的支持——但是，設計者通常用標簽的自帶效果來作效果，因為展示內容的需要，出現了亂用的情況。另一方面table佈局的不合理性，讓開發者不得不直接切圖這種落後的方式做網頁。——而到現在，html終於被公認應該執行網頁骨架的職能，而不是拿去乾其他事情。所有需要擔心的樣式問題，用CSS去解決吧。
### html
思考結構：邏輯關係主次架構，不要在行間加無謂的東西。
簡化的html結構對搜索引擎是友好的。搜索引擎遍歷整個頁面才能簡歷索引，當結構過於複雜，爬蟲可能沒興趣再讀下去。
註意兩個標簽的作用：——div和span
div和span是萬能的行級標簽。你可以用它設計你想的任何效果（如果可以實現的話）。前者用於包裝塊狀元素，後者則常用於包裝文本。
除了萬能容器標簽以外，H5提供了多種語義化方案。懂得它們將大大提升網頁的內涵。比如h1就是用於網頁中最主體的內容。其它舉例如下：
- 一組相關的元素都可以用
<section>包裹。 - 側邊欄可以用
<aside> <footer>定義一組通常放在網頁尾部的元素<nav>一般用來做主導航。<figure>是用來包裹圖片元素的容器。作為圖片描述內容，應該使用<figcaption>
......
相對於萬能標簽來說，h5標簽的大大增強了語義。對谷歌來說，更喜歡開發者使用這些標簽，然而，IE8及以前的瀏覽器都不能完全支持它們。解決方案是：引入js插件讓他們支持。
<!--[if lt IE 9]>
<script src="scripts/html5.min.js"></script>
<script src="scripts/respond.min.js"></script>
<![endif]-->### 規劃好你的頁面
比如最簡單一個兩列式佈局，相似的內容合併在一個模塊。頭部——header，主體——article，邊欄——aside/section，尾部——footer，最後再把上述的內容用一個section包起來
### 廢棄的標簽
<font>已經過時。後面會講到。<b>和<i>儘量用<strong>和<em>代替。儘管html4嘗試廢棄這兩個標簽，但h5又把他們撿回來了。對於只是讓它外觀看上去是這樣，但不是實質性強調的內容，還是可以用。對於出版物標題上的斜體，用<cite>就再好不過了。<table>不是沒有用，但表格本來不是專門作頁面佈局的。- 儘量避免在
<body>上做文章。 - 用margin，不濫用
<br>：因為瀏覽器可以自動給你的標記間插入其它空格（space），如果還不滿意，就用margin去調整它吧。
作為總結就是：不要亂用——對於不適應設計要求的標簽，儘可能用CSS去控制它們。而不是再建新的標簽嘗試控制樣式。
### 驗證你的網頁:
xhtml要求所有元素必須被閉合，基本的元素必須放在指定的標簽——比如說title必須放head標記內，而h5放鬆了這方面的語法要求，實際上，如果開發者忘掉這些規則。甚至導致網頁不能如預期顯示，甚至導致CSS停止工作。為此，可以去http://validator.w3.org/ 驗證你的網頁是否規範。
### 幾個提示
如果你對於html結構還是不得要領，可以嘗試這些做法：
- 重要的內容儘可能放到h標記里去——重要事情說三遍。同級內容放一塊。高級標題不要放到低級標題里。
- 文本段落放到p標記里
- 諸如標題組，導航欄放到ul-li裡面去。
- 諸如目錄這樣的內容，用有序列表oi-li去控制
- 對於引用，獨立成段的用
<blocquote>，段內引用使用<q> - 類似版權聲明，作者聯繫等，用
<adress>就再好不過了 - 所有用標記，標記屬性實現的樣式，CSS全部都能做到
- 對於可能被識別的代碼，又不想用code標記的，用div或span包裝，再做樣式化處理。別亂用其它的標記（作者建議）
- div也不是濫用的：能用語義化的就用語義化標簽。
- 對於非自閉合標簽，強烈建議閉合。而少數自閉合標記，建議不予閉合。（如
<br>、<img>等） - 最後一點，做完之後拿去網上check一下。
### 論Doctype的重要性
HTML的行為是由公開聲明決定的——即所謂的DTD。DTD控制了你的代碼如何被解釋，被哪個版本的語言解釋。
事實上這和CSS緊密相關。如果你拋開不顧doctype聲明不顧，瀏覽器就會進入quirk模式。簡單地說，瀏覽器會按遠古時代的的網頁方式（譬如IE5）去解釋你的代碼。
所幸h5的doctype聲明簡單多了
<!doctype html>### 讓IE8只是IE8
IE8解釋網頁的行為總體來說比較詭異。可能回退到IE7甚至更早的版本——比如用戶的不當操作，quirk模式等等——為了阻止這種詭異行為，讓IE8始終在正常模式下工作——應該在header標簽內加上：
<!--低版本瀏覽器模擬渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">IE6、7或8？這是個問題
結論就是看情況.一個是國家，一個是用戶群體。至少，IE8還是不能忽略的。
跨瀏覽器測試
根據客戶來選擇瀏覽器版本。
ie可以裝個多版本測試工具，同時再裝若幹主流瀏覽器，safari可以找下windows版，或者在chrome下簡單模擬一下。
基礎HTML知識講到這裡就結束了。
