HTML5/CSS簡介
首先來說一說什么是HTML5，HTML5可以認為是字面上的意義，也就是HTML的第五代產品，當然從另一個角度來說它是一種新的富客戶端解決方案。
HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標准。
HTML 的上一個版本誕生於 1999 年。自從那以后，Web 世界已經經歷了巨變。
HTML5 仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些 HTML5 支持。
HTML：超文本標記語言。標記可以稱為標簽，節點，元素等。
HTML的核心是它的語義，也就是標簽本身的含義。我們再寫結構的時候只需要注重標簽的語義而無需考慮標簽的樣式。
再寫頁面的時候，HTML、CSS、JS各有各的用處，HTML負責網頁的結構，CSS負責網頁的美化渲染，JavaScript負責用戶與網頁的交互。
寫頁面之前，主體結構一定要了解。
CSS
層疊樣式表，它的核心是層疊，我們看到的最終效果往往不是一個CSS就能搞定的，它都是很多的CSS樣式疊加才形成了用戶最終看到的界面。
CSS的使用方式：
內聯樣式：直接寫在行內，以style屬性將樣式直接寫在元素上。
內部樣式：寫在<style>標簽中的樣式，通過選擇器選擇頁面上的元素進行樣式的添加。
外部樣式：寫在CSS文件中，通過link標簽進行調用。
三種方式中，內聯樣式的優先級是最高的，另外兩只優先級相同。寫在頁面中，優先級相同則寫在后面的會覆蓋前面的樣式。（建議使用外部樣式，寫頁面的時候要盡量做到結構與樣式相分離，也就是頁面結構，CSS樣式最好不要放到一起）
網頁的主體結構
<!DOCTYPE html> 文檔聲明頭，主要是用來聲明代碼是H5的，如果不寫的話，代碼會被瀏覽器降級處理。
<html> 網頁的全部
<head> 用來寫對當前網頁的一些設置信息，這些內容是用戶看不到的
<meta charset="utf=8"> 設置網頁的字符集
<body> 網頁的主體，再頁面上顯示的內容基本上都在這里
HTML5 兼容性
支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等；國內的 遨游瀏覽器（Maxthon），以及基於IE或Chromium（Chrome的工程版或稱實驗版）所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等國產瀏覽器同樣具備支持HTML5的能力。
需要注意的是，雖然很多瀏覽器目前已經能夠支持HTML5，但是顯示效果仍舊存在差異性。這時，我們如果從樣式的角度出發，可以采用下面的幾種css方案。
CSS Reset
每種瀏覽器都有一套默認的樣式表，即user agent stylesheet，網頁在沒有指定的樣式時，按瀏覽器內置的樣式表來渲染。這是合理的，像word中也有一些預留樣式，可以讓我們的排版更美觀整齊。不同瀏覽器甚至同一瀏覽器不同版本的默認樣式是不同的。但這樣會有很多兼容問題，CSSReset可以將所有瀏覽器默認樣式設置成一樣。
CSS Reset 下載地址: https://meyerweb.com/eric/tools/css/reset/
Normalize(號稱是CSS reset的替代方案，保留了一些內置的樣式，並不是清除所有)。
CSS Hack
由於不同廠商的流覽器或某瀏覽器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對CSS的支持、解析不一樣，導致在不同瀏覽器的環境中呈現出不一致的頁面展現效果。這時，我們為了獲得統一的頁面效果，就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式，我們把這個針對不同的瀏覽器/不同版本寫相應的CSS code的過程，叫做CSS hack!
分類:
CSS Hack大致有3種表現形式，CSS屬性前綴法、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現差異而引入的。
- 屬性前綴法(即類內部Hack)：例如 IE6能識別下划線
"_"和星號" * "，IE7能識別星號" * "，但不能識別下划線"_"，IE6~IE10都認識"\9"，但firefox前述三個都不能認識。 - 選擇器前綴法(即選擇器Hack)：例如
IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。 - IE條件注釋法(即HTML條件注釋Hack)：針對所有IE(注：IE10+已經不再支持條件注釋)： ，針對IE6及以下版本： 。這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效。
關於IE的條件注釋可以參考https://www.cnblogs.com/liujunhang/articles/10667109.html.
CSS hack書寫順序，一般是將適用范圍廣、被識別能力強的CSS定義在前面。
屬性前綴法:
屬性前綴法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack前綴，以達到預期的頁面展現效果。
IE瀏覽器各版本 CSS hack 對照表
| hack | 寫法 | 實例 | IE6(S) | IE6(Q) | IE7(S) | IE7(Q) | IE8(S) | IE8(Q) | IE9(S) | IE9(Q) | IE10(S) | IE10(Q) |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| * | *color | 青色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| + | +color | 綠色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| - | -color | 黃色 | Y | Y | N | N | N | N | N | N | N | N |
| _ | _color | 藍色 | Y | Y | N | Y | N | Y | N | Y | N | N |
| # | #color | 紫色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| \0 | color:red\0 | 紅色 | N | N | N | N | Y | N | Y | N | Y | N |
| \9\0 | color:red\9\0 | 粉色 | N | N | N | N | N | N | Y | N | Y | N |
| !important | color:blue !important;color:green; | 棕色 | N | N | Y | N | Y | N | Y | N | Y | Y |
說明：在標准模式中
- “-″減號是IE6專有的hack
- “\9″ IE6/IE7/IE8/IE9/IE10都生效
- “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
- “\9\0″ 只對IE9/IE10生效，是IE9/10的hack
選擇器前綴法:
選擇器前綴法是針對一些頁面表現不一致或者需要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行hack。
目前最常見的是
*html *前綴只對IE6生效 *+html *+前綴只對IE7生效 @media screen\9{...}只對IE6/7生效 @media \0screen {body { background: red; }}只對IE8有效 @media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效 @media screen\0 {body { background: green; }} 只對IE8/9/10有效 @media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效 等等
CSS Hack利弊：
一般情況下，我們盡量避免使用CSS hack，但是有些情況為了顧及用戶體驗實現向下兼容，不得已才使用hack。比如由於IE8及以下版本不支持CSS3,而我們的項目頁面使用了大量CSS3新屬性在IE9/Firefox/Chrome下正常渲染，這種情況下如果不使用css3pie或htc或條件注釋等方法時,可能就得讓IE8-的專屬hack出馬了。使用hack雖然對頁面表現的一致性有好處，但過多的濫用會造成html文檔混亂不堪，增加管理和維護的負擔。
優雅降級和漸進增強:
由於低級瀏覽器不支持 CSS3，但是 CSS3 特效太優秀不忍放棄，所以在高級瀏覽器中使用CSS3，而在低級瀏覽器只保證最基本的功能。二者的目的都是關注不同瀏覽器下的不同體驗，但是它們側重點不同，所以導致了工作流程上的不同。
漸進增強（Progressive Enhancement）：一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，然后再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。
優雅降級（Graceful Degradation）：一開始就構建站點的完整功能，然后針對瀏覽器測試和修復。比如一開始使用 CSS3 的特性構建了一個應用，然后逐步針對各大瀏覽器進行 hack 使其可以在低版本瀏覽器上正常瀏覽。
第三方插件:
關於兼容性問題，除了上述的解決方案外，還可以通過使用第三方的插件來解決兼容性問題。
個人筆記
關於一些標簽的使用我們可以通過一些網站進行查詢，可以去國內較為完善的W3cschool進行了解。
下面是一些零碎的知識點：
get和post的區別（get和post都是表單的屬性method的屬性值，method是表單提交數據的方式）：
1、get的傳輸方式的傳輸速度快，而post的傳輸速度就比較慢。
2、get的安全程度低，post的安全程度則是相對較高。
3、get的傳輸數據小，post可以傳輸的數據比較大。
百度的搜索內容一般就是用get的方式提交，而一些比較隱私的，例如賬號登錄時的數據提交用的是post。get和post本質沒有什么區別，只不過get傳輸時是直接傳輸過去，而post則是先發起請求，等待響應返回之后才會開始傳輸數據，所以才有了以上的區別。
選擇器生效的一些注意點：
權重的比較方式：ID選擇器的權重最高，類選擇器其次，元素選擇器最低。
對比時，兩個選擇器，一個有ID選擇器，一個沒有，則不管后面有多少個類或者元素都沒有ID選擇器的高。
在直接選中的情況下，權重的生效，權重相同則是后面的會覆蓋前面的樣式；
在兩個選擇器都沒有選中的情況下，哪一個更精確，那個就能生效；
兩個都沒選中而且精確度也是同樣的情況下，還是比較權重。
在CSS中標簽的等級大致分類：
塊級元素：
1、獨占一行；
2、可以設置其寬高；
3、不設置寬度，寬度則默認是100%；
4、可以當做容器使用。
行內元素：
可以和其他行內元素並排顯示；
不能設置寬高，內容寬度為其寬度，行高為其高度。
行內塊元素：
其既可以設置寬高，又可以和其他元素並列一行（非塊元素）。ps:表單中的input是行內塊元素
標准文檔流：
瀏覽器的解析方式，從上到下、從左到右。
文本流：
網頁中的文本內容。
脫離標准文檔流的方式：
浮動，絕對定位，固定定位等。
元素浮動后會形成字圍效果，是因為其只是脫離了標准文檔流，但是沒脫離文本流。
子元素全部浮動之后父元素的高度會變成零。
我們一般用有以下幾種方法解決：
1、.clearfix{*zoom=1;}.clearfix:before,.clearfix:after{context:" ";display:table;}.clearfix:after{clear:both}（給父元素一個.clearfix的類名，將其放入樣式中可以解決浮動的問題）
2、直接設置父元素的高度
3、父元素設置樣式：overflow:hidder;
4、隔牆法：再浮動的元素父元素后面寫一個div，給這個div加上clear：both的屬性，也就是浮動效果清除的屬性