HTML&CSS 大綱
對Web標準的理解、瀏覽器核心差異、相容性、hack、CSS基本功：佈局、盒子模型、選擇器優先順序、
HTML5、CSS3、Flexbox
doctype
- <!doctype>宣告必須處於HTML文件的頭部，在<html>標籤之前，HTML5中不區分大小寫
- <!doctype>宣告不是一個HTML標籤，是一個用於告訴瀏覽器當前HTML版本的指令
- 現代瀏覽器的html佈局引擎通過檢查doctype決定使用相容模式還是標準模式對文件進行渲染，一些瀏覽器有一個接近標準模型。
- 在HTML4.01中<!doctype>宣告指向一個DTD，由於HTML4.01基於SGML，所以DTD指定了標記規則以保證瀏覽器正確渲染內容
- HTML5不基於SGML，所以不用指定DTD
常見dotype：
- HTML4.01 strict：不允許使用表現性、廢棄元素（如font）以及frameset。宣告：<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
- HTML4.01 Transitional:允許使用表現性、廢棄元素（如font），不允許使用frameset。宣告：<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
- HTML4.01 Frameset:允許表現性元素，廢氣元素以及frameset。宣告：<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
- XHTML1.0 Strict:不使用允許表現性、廢棄元素以及frameset。文件必須是結構良好的XML文件。宣告：<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
- XHTML1.0 Transitional:允許使用表現性、廢棄元素，不允許frameset，文件必須是結構良好的XMl文件。宣告： <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
- XHTML 1.0 Frameset:允許使用表現性、廢棄元素以及frameset，文件必須是結構良好的XML文件。宣告：<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
HTML 5: <!doctype html>
html 語義話
我下面詳細的列舉一下我對一些標籤的語義的理解：
p br
先說個最簡單的。分段要用p標籤而不是用br（甚至連續兩個
）。這個似乎不用多說。但是有時候我們不得不放棄這個原則。一個常見的例子是論壇發帖，如果我想分段，便打回車。而如此傳輸到後臺並顯示出來的，顯然就是用
分段的。
table th
由於大力宣揚div+css的結果，似乎現在誰用table佈局誰就是未開化的土著。但我認為這種觀點是不正確的。table的含義是表格，因此凡是應該以表格形式出現的資料，仍然應該用table佈局。簡單的例子是班級同學的花名冊，包括姓名學號性別等等，這明顯是一個表格形式的資料，因此應該用table佈局。另一個比較值得探討的例子是，blog裡面的日曆導航。我曾經有見過一個blog程式，它的日曆導航裡的各個日期，從1號到30號全用div套好，再使用float:left樣式7個一排的排出當月的日曆。當我取消瀏覽器的CSS顯示之後，日曆的那部分則從1號到30號一豎排下來。我認為這是不對的。因為日曆應該是一個表格形式的資料，因此仍然應該用table佈局。當取消css之後，應該仍然按照一排7個的樣子歸成一個表格。
th則是另一個會被忽視的標籤。由於CSS的萬能，所有的表格單元都可以用td加一個class屬性搞定。但是從語義上講，一些表格單元應該用th標籤。比如上文說到的日曆表格，裡面的“MON TUE WED… SUN”這些標識星期的單元，就應該用th而不是td。
h1-h6
對於h1-h6標籤，從語義上講，它們應該適用於所有標題文字。因此，一些如<div class=”diary-title>的寫法都是多餘的，直接寫成<h1>，然後直接對h1而不是.diary-title定義CSS，不是一樣的效果麼？當然，這個規矩我也不能定得太死，因為有時候標題部分的結構元素並不能簡單的用一個h1就能解決的。但我最多用類似<h1><span></span></h1>的方法將標題的結構巢狀得更復雜，以滿足表現的需要。
但這裡會出現一個語義上的分歧。h1究竟該理解為一級標題呢還是理解為1號字型大小的標題。我通常理解為一級標題，一級標題下再有小標題就用h2。但是事實上回顧HTML設計之初，h1-h6後面的數字更多的被理解為控制標題文字大小的。用h3或許只是為了使用三號大小的字型，而並非它就是三級標題。否則一級標題全用h1，個個都是斗大的字，又不得不用CSS來控制字號，感覺很累贅。所以，這是一個待商榷的問題。
ul ol
凡是需要羅列條款的，都應該用ul或者ol，而不是用p。比如招聘廣告裡的職位需求，比如注意事項，比如操作步驟說明。此外一個流行的用法是網頁的導航選單也用ul li來列舉，然後再用CSS控制其排列方式。
應該要補充的是，別忘了li裡面還可以再用ul或ol，形成第二級列表。
dl dt dd
這是一組幾乎被人忘記的標籤，但Jeffrey Zeldman在《網站重構》中大力推崇對它們的使用。dl應該是“defining list（或是definition list？有知道的朋友請告訴我）”的全稱，一個典型的用法是字典的詞條。單詞的名字放在dt裡面，單詞的解釋放在dd裡面。而alistapart.com網站更加高明的，將右側欄整個定義為dl，每個單元的標題用dt，而該單元的內容則用dd。
一定要記住每個標籤標示什麼，就是英語原意是什麼？比如
- dl 就是definition list， 定義列表；
- dt 就是definition title，定義標題；
- dd就是definition description，定義描述
img
img標籤本身也沒啥好說的。只是想老生常談一個，即只有當確實這個元素是內容裡必須的圖片的時候才使用img，否則應該用CSS定義為樣式。如插圖，頭像，表情圖示，這些是內容裡必須出現的圖片，用img。而其他的比如標題的背景圖，列表項前面的小icon，這些都不應該用img標籤。
span
span如今大有和div並駕齊驅的風頭。但是事實上我認為我們還是應該遵從它最初的使用。我個人的理解，span最初就是用來帶class或者style屬性的。它本身不具有明確的語義。因此在文字流中，我們需要對某些文字做樣式上的改變，就用span括起來。比如有些字需要加紅，我就用<span class=”red”>。
但是值得注意的是，這樣又有可能犯之前h1裡面提到的問題。因為有些文字的樣式其實是有現成的標籤的，比如 strong 標籤 sub標籤 等，我們也應該適當的給它們一些機會。
a
a是控制超連線的標籤。但有些特殊的情況，我們不一定喜歡用它。比如需要彈出一個小視窗。我沒怎麼留心，但我想有些設計師會將onclick直接定義到“播放”小圖示的<img>標籤裡。我個人認為還是應該在img外面加一個a，然後將onclick定義到a裡面，並記住在js函式最後寫上return false。如果可以，該a標籤的href屬性也應該寫上彈出視窗的URL,保證使用者在禁止JS的情況下仍能夠有效的開啟頁面。
我暫時就列出這麼多。
最後再總結一下遵循HTML標籤語義的重要性。Web標準的其中一個要求是低配置的相容性：當使用者禁用圖片、禁用CSS或禁用JS的時候，我們仍能夠讓他有效的瀏覽網頁內容。眾所周知強制alt屬性就是為禁用圖片時的相容性作考慮。而正確的遵循HTML標籤的語義，則是保證禁用CSS時的相容性。只有當正確使用了HTML標籤，我們的網頁在“CSS裸奔”的時候，才會仍然讓人看得出哪裡是導航選單，哪裡是文章標題，日曆表格也不會分崩離析。
行內元素和塊級元素的具體區別是什麼？行內元素的padding和margin可設定嗎？
CSS規範規定: 每個元素都有display屬性，確定該元素的型別，每個元素都有預設的display值，如div的display預設值為“block”，則為“塊級”元素；span預設display屬性值為“inline”，是“行內”元素。
（1）行內元素有：a b span img input select strong（強調的語氣）
（2）塊級元素有：div ul ol li dl dt dd h1-h6 p
（3）常見的空元素：
<br> <hr> <img> <input> <link> <meta>
鮮為人知的是：
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
區別一：
塊級：塊級元素會獨佔一行，預設情況下寬度自動填滿其父元素寬度
行內：行內元素不會獨佔一行，相鄰的行內元素會排在同一行。其寬度隨內容的變化而變化。
區別二：
塊級：塊級元素可以設定寬高
行內：行內元素不可以設定寬高
區別三：
塊級：塊級元素可以設定margin，padding
行內：行內元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是豎直方向的margin-bottom; margin-top; padding-top; padding-bottom;卻不能生效。
區別四：
塊級：display:block;
行內：display:inline;
可以通過修改display屬性來切換塊級元素和行內元素
https://jeffjade.com/2015/06/…
那麼問題來了，瀏覽器還有預設的天生inline-block元素（擁有內在尺寸，可設定高寬，但不會自動換行），有哪些？
答案：<input> 、<img> 、<button> 、<texterea> 、<label>。
不同瀏覽器（版本）、HTML4（5）、CSS2等實際略有差異
參考: http://stackoverflow.com/ques…
什麼是外邊距重疊？重疊的結果是什麼？
答案：
外邊距重疊就是margin-collapse。
在CSS當中，相鄰的兩個盒子（可能是兄弟關係也可能是祖先關係）的外邊距可以結合成一個單獨的外邊距。這種合併外邊距的方式被稱為摺疊，並且因而所結合成的外邊距稱為摺疊外邊距。
摺疊結果遵循下列計算規則：
- 兩個相鄰的外邊距都是正數時，摺疊結果是它們兩者之間較大的值。
- 兩個相鄰的外邊距都是負數時，摺疊結果是兩者絕對值的較大值。
- 兩個外邊距一正一負時，摺疊結果是兩者的相加的和。