Sublime的常用插件及功能
- AutoFileName：自動補全文件路徑及名稱的插件。如插入圖片。
- Bracket Highlighter：高亮效果。如定位括號，當選中開始括號，高亮標出結束括號。
- Browser Refresh：修改代碼頁后保存，瀏覽器的最后一個tab頁面會自動刷新。
- Css Format：自動規整css格式，包括自動壓縮css使其變得不可讀，或解壓縮css使其變得可讀。
- DocBlockr：自動生成注釋。
- Html Beautify:讓html變得美觀。
- Js Format:格式化js代碼。
- jshintify:js校驗，如分號寫成了中文符號。
- Emmet:使用仿CSS選擇器的語法來生成代碼，大大提高HTML/CSS代碼編寫的速度。
- Git:代碼管理，創建和連接GitHub上的項目。
- Pretty JSON:漂亮格式化json。
- Sublime Tmpl：創建模版，包括html,css等。
小貼士：安裝插件的方法
- command+shift+p(啟動命令模式的快捷鍵)
- 搜索命令 Package Control:Install Package并啟動
- 在搜索相關插件關鍵詞，安裝
Html的基礎要素即說明
<!DOCTYPE html> <!--文檔聲明，告知瀏覽器以html5的標準渲染頁面-->
<html>
<head> <!--內放和頁面內容相關的信息、js或樣式表的文件地址等-->
<meta charset="utf-8"/> <!--告知瀏覽器解碼方式是utf-8-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--告知瀏覽器以最新內核渲染頁面，因最新內核肯定兼容最好-->
<title>blog test</title>
<style>
</style>
</head>
<body> <!--內放html代碼和script-->
<h1>標題</h1>
<p>段落</p>
<script>
alert(1);
</script>
</body>
</html>
嚴格模式vs怪異模式
出現嚴格模式和怪異模式的起因，源于當年Netscape 4和IE4實現css機制時，未完全遵守W3C提出的標準，其缺陷主要來自于盒模型。當時的網頁開發者為了保證自己的頁面可以在不同的瀏覽器正確顯示，不得不按照各瀏覽器自身的規范來使用css。但越來越符合W3C標準是發展趨勢，各瀏覽器如果直接更改其渲染模式，必然使得一些遵從原規則的老網站不能正確顯示，于是就出現了按照混雜模式渲染和按照嚴格模式渲染的問題。
怪異模式又稱混雜模式，即文檔開頭不加文檔聲明<!DOCTYPE html>，在不加入文檔聲明時，頁面以一種比較寬松的向后兼容的方式顯示。混雜模式通常模擬老式瀏覽器的行為以防止老站點無法工作。此時，各瀏覽器會按照自己的標準對頁面進行渲染，不同瀏覽器就會出現不同的渲染結果，因此稱為怪異模式或混雜模式。
嚴格模式又稱標準模式，是指在文檔開頭對文檔進行了聲明，<!DOCTYPE html>告知瀏覽器要以html5的標準渲染頁面，此時瀏覽器會嚴格按照該標準對頁面進行渲染。
utf-8和gbk
- gbk的文字編碼都是雙字節的，即不論中英文均使用雙字節表示。gbk包含全部漢字字符，由于使用gbk編碼的網頁在國外沒有gbk解碼方式的電腦上無法正常顯示，因此其主要用于國內網站的開發。
- utf-8是一種國際通用的字符編碼方式，包含全世界多個國家的語言文字。它對英文使用1個字節編碼，中文使用2個字節編碼。因此對于英文字符較多的網站，應采用utf-8進行編碼，可比gbk編碼方式節省50%的存儲空間。同時，中文但用于國際使用的網站，也應采用utf-8對網站進行編碼。
注意：
文件保存時用什么標準方式給文件進行編碼，在瀏覽器解碼時就要用什么標準解碼，即meta設置的解析方式要與保存時的編碼方式相同，否則頁面亂碼。
那么如何選擇保存時的編碼方式呢？Sublime編輯器File>Save with Encoding
詳解<meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
X-UA-Compatible是IE8的一個專有<meta>屬性，它告訴IE8采用何種IE版本去渲染網頁。在IE8剛推出的時候，很多網頁由于重構的問題，無法適應較高級的瀏覽器，所以使用X-UA-Compatible標簽強制IE8采用低版本方式渲染。如<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />規定IE以IE7的方式渲染。
但現在，<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">對文檔兼容模式的定義是：Edge 模式告訴 IE 以最高級模式渲染文檔，也就是任何 IE 版本都以當前版本所支持的最高級標準模式渲染，避免版本升級造成的影響。或者換句話說，就是什么版本 IE 就用什么版本的標準模式渲染。
而chrome=1用于激活Chrome Frame，Chrome Frame是谷歌出版的一個瀏覽器內嵌框架，內嵌于IE瀏覽器，簡稱GCF。用戶進行瀏覽時，表面是用IE 瀏覽器進行瀏覽，但實際卻是用的GCF內核。由于很多用戶并沒有安裝GCF,所以<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">的具體含義是：如果安裝了GCF，則使用GCF來渲染頁面「"chrome=1"」，如果沒有安裝GCF，則使用最高版本的IE內核進行渲染「"IE=edge"」。
不設置X-UA-Compatible是不是一樣？不是的。有些因素會自動觸發兼容性文檔視圖，這個時候設置X-UA-Compatible就可以防止這個自動觸發的行為。 比較有意思的是，在設定X-UA-Compatible后，即使不聲明DOCTYPE，在IE7和IE8下也不會出現怪異模式。
常見的瀏覽器&這些瀏覽器的內核
瀏覽器：
IE,Safari,Chrome,Firefox,Opera, 以及其他各種如360瀏覽器、QQ瀏覽器、獵豹瀏覽器、搜狗瀏覽器等。
瀏覽器內核：
在詳述各瀏覽器的內核前，首先先了解下瀏覽器內核到底是個什么東西？“內核”只是一個通俗的說法，實際指的是“排版引擎”或“頁面渲染引擎”。它決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息。不同的瀏覽器內核對網頁編寫語法的解釋也有不同，因此同一網頁在不同的內核的瀏覽器里的渲染效果也可能不同，這也就使得網頁編寫者需要在不同內核的瀏覽器中測試網頁顯示效果。
Trident內核：IE
Trident是一個軟件模塊，具有相當成熟的接口內核設計，因此涌現出許多采用IE內核而非IE的瀏覽器。
因早起IE市場份額較大，所以該內核一度非常流行。但其實它有兩個缺點，一是對W3C制定的標準支持不是很好，二是存在許多bug。這使得很多用戶轉向其他瀏覽器，Opera和Firefox就是這時興起的。同時，Trident只能用于Windows平臺。
Gecko內核：Firefox,Flock
該內核是套開放原始碼的、以C++編寫的網頁排版引擎。該內核的優點是功能強大、豐富，可以支持很多復雜網頁效果和瀏覽器擴展接口，但其缺點是比較消耗內存，在發展過程中變得異常龐大，結構十分復雜。不過，Gecko可以在Windows、BSD、Linux和Mac OS X多個平臺中使用。
Presto內核：Opera7.0及以上
Presto是一個動態內核，其特點是渲染速度的優化達到了極致。它是目前公認的網頁瀏覽速度最快的瀏覽器內核，根據同等條件下的測試，Presto內核執行同等JavaScript所需的時間僅有Trident和Gecko內核的約1/3。不過渲染速度極致優化的代價是犧牲了網頁的兼容性。
Webkit內核：Safari,Chrome
WebKit 是一個開放源代碼的瀏覽器引擎，其優點是源碼結構清晰、渲染速度快，該渲染速度雖不及 Presto ，但也快于 Gecko 和 Trident。WebKit 的缺點是對于網頁代碼的容錯性不高，對網頁代碼的兼容性較低，會使一些編寫不標準的網頁無法正確顯示。
什么是雙核瀏覽器？
雙核瀏覽器，就是有兩個內核的瀏覽器。但并不是每個網頁都采用兩個內核進行渲染，而是不同網頁用不同內核渲染。
由于IE瀏覽器在國內的普及率非常高，很多網站只考慮了對IE的兼容，并不符合W3C的標準。這種情況在網銀、在線支付系統等網站尤為明顯，甚至出現在非IE瀏覽器下無法交易的情況。而WebKit等其他內核的非IE瀏覽器以更高的性能和更好的用戶體驗在國際上擁有了越來越多的用戶。于是為了讓用戶能夠享受到新技術帶來的瀏覽體驗，瀏覽器廠商發明了“雙核”這一瀏覽器模式。
代表：搜狗瀏覽器、獵豹瀏覽器、QQ瀏覽器等。
為什么style放在html頭，script放在html尾？
js放后原因一：瀏覽器的渲染順序是html文件從上到下依次渲染，js一般用于處理頁面上dom元素，假如將script放在頭部，則先渲染出js效果，然而其作用元素dom還未渲染出來，所以可能會報錯。
js放后原因二：js文件通常較大，會有幾百k。同時，瀏覽器在下載腳本文件時，不會啟動其他任何下載進程。因此，將js放在前面會阻滯渲染進程。
js特殊情況：引入別人的js庫或js代碼量少時，script可放在文件頭部。
css放前原因：讓頁面可以根據CSS樣式逐步渲染。如果放在底部，要全部加載完成，才能渲染頁面，最終會出現閃屏效果。
Style的三種設置方法
首先，在設置樣式以前，我們要清楚每個標簽都有瀏覽器的缺省樣式，即瀏覽器默認樣式。我們在給標簽設置css樣式前，各標簽按瀏覽器缺省樣式進行渲染。
1.外部樣式表
<link rel="stylesheet" type="test/css" href="./index.css">
rel="stylesheet"意思：描述該link和當前文件的關系，它是當前文件的一個樣式表。
路徑設置規則
href="./index.css",即調用當前html文件所在文件夾下，名為index的css文件（index.css和html文件在同一文件夾內）,該路徑可省略為href="index.css"。
href="../index.css",即調用與當前html文件所在文件夾的同級路徑下，名為index的css文件（index.css和“html文件所在的文件夾”在同一文件夾內）。
href="../../index.css", 即調用與當前html文件所在文件夾的上一級路徑下，名為index的css文件（html文件上兩級文件目錄下的index.css文件）。
@import url和link的區別
1.link是XHTML標簽，除了加載CSS外，還可以定義RSS(一種站點用來和其他站點之間共享內容的簡易方式，通常用于新聞和其他按順序排列的網站，例如Blog。 )等其他事務；@import屬于CSS范疇，只能加載CSS。
2.link引用CSS時，在頁面載入時同時加載；@import需要頁面網頁完全載入以后加載。
3.link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
4.link支持使用Javascript控制DOM去改變樣式；而@import不支持。
結論：推薦使用link引入外部樣式表
2.內部樣式表
<style>
.p{
color:white;
}
#h1{
font-size:2em;
}
</style>```
在設置內部樣式表時，“.”和“＃”的區別是“.”為class設置樣式，“＃”為id設置樣式。
**3.內聯樣式**
`<p style="border:1px solid #fff;border-radius:4px;">示意段落</p>`
該樣式意為為p標簽設置一個1像素粗，線型，顏色為＃fff的邊框，同時該邊框圓角為4px。若想設置點狀邊框，可將solid改為dotted。
>**各種樣式的使用情況及好處**
通常，為了樣式可以被更好的重復利用，使用外部樣式表對css進行設置，即整個網站的通用樣式使用外部樣式表。內部樣式表通常用于只該頁面特有的樣式，而內聯樣式用于單一標簽的樣式設置。當一個標簽同時擁有外部樣式表、內部樣式表和內聯樣式時，各樣式設置方法的最終顯示優先級為“內聯樣式>內部樣式表>外部樣式表”。
不過，當設置樣式時未采用外部樣式表時，頁面將減少網絡請求次數，加載速度增快。
###色彩的三種表示方法
**1.色彩英文單詞**
color: white
僅支持16種顏色的英文單詞。
**2.16進制色號**
color:#ffffff
共6位，兩位為一單元，從前到后共三個單元，分別代表rgb的三個數值。每種顏色的最小數值為#00，最大數值為#ff。
**3.rgb數值**
color:rgb(255,255,255)
每種顏色的最小數值為0，最大數值為255。
>**如何使用chrome瀏覽器的拾色器？**
1. 任意選取一個element；
2. 給該element隨意設置一個color值，如color:red；
3. 點擊color和色號間的色彩示意小方塊；
4. 吸管吸取頁面上的顏色即可。
#問題延展和補充
***
#####href,src和url的異同和使用場景
url是統一資源定位符，是對可以從互聯網上得到的資源的位置和訪問方法的一種簡潔的表示，是互聯網上標準資源的地址。
href 屬性規定被鏈接文檔的位置(url)。href 是指向網絡資源所在位置，建立和當前元素或當前文檔之間的鏈接，用于超鏈接。
src屬性規定在框架中顯示的文檔的url。src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應用到文檔內，代替自己本身的內容。
總結來說，url代表的是地址，而href是轉向地址，src是引入地址的資源并替換自身。
> 使用場景：
url: @import ，background-image , behavior
href: a , link ,
src：script , img , iframe
#####設置頁面字體
<style>
body{
font-family:"Microsoft YaHei","Arial","字體三","字體四","字體…","字體n";
}
</style>
該樣式用于設置網頁內的所有文字字體。首先，字體庫分為瀏覽器里的字體庫和電腦本機里的字體庫，當瀏覽器加載網頁字體時，它從font-family屬性值從前到后依次尋找字體庫，當字體一的庫可被找到時，網頁字體呈現字體一，若不能則順延尋找字體二，若字體二還不能找到就依順序尋找字體三、字體四，并依次類推。若所有設置字體均未找到庫，字體最終就按瀏覽器缺省樣式顯示。
#####px,pt,em,rem對比
**px：**相對單位，表示pixel，像素，是屏幕上顯示數據的最基本的點。“點”可大可小，當“點”很小時，屏幕顯示清晰，即屏幕分辨率高；當“點”很大時，屏幕顯示模糊，即屏幕分辨率低。因此，px是一個相對屏幕分辨率而言的相對單位大小。
>chrome瀏覽器內最小字體為12px，當設置的文字大小<12px時，瀏覽器默認顯示12px大小。
**pt：**絕對單位，全稱point，不過其中文翻譯名詞是“磅”，是一個專用的印刷名詞，大小為1/72英寸。它是一個自然界標準的長度單位，是一個絕對單位大小。
**em：**相對單位，其值并不是默認不變的，會繼承父級元素的字體大小。任意瀏覽器的默認字體高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。
>若想簡化font-size的換算，可在css的body選擇器中聲明font-size=62.5%；這樣1em=10px，方便換算。
**rem:**相對單位，其值會繼承html根節點的字體大小。比較好控制，所以用途比em更加廣泛。
#####什么是SEO
SEO意為搜索引擎優化，是指通過對網站內部調整優化及站外優化，使網站滿足搜索引擎收錄排名需求，在搜索引擎中關鍵詞排名提高，從而把精準用戶帶到網站，獲得免費流量，產生直接銷售或品牌推廣。
如何做到SEO? SEO的優化有很多方面，不過對meta標簽進行優化顯得簡單而重要，如對keywords,discription等進行優化。
`<meta name="keywords" content="關鍵字" />`
`<meta name="description" content="網頁描述" />`
#####alert()和console.log()的區別和優點
首先先了解下alert()和console.log()分別是干什么用的。
alert()用于彈出消息對話框，并且alert消息對話框通常用于一些對用戶的提示信息。消息對話框是排它的，也就是在用戶點擊對話框的按鈕前，不能進行任何其它操作，通常可用于調試程序。
console.log()用于在瀏覽器調試工具的控制臺中打印信息，多用于對JavaScript程序進行調試。
相比于alert()，console.log()的優點是：
* alert()函數會阻斷JavaScript程序的執行，從而造成副作用；而console.log()僅在控制臺中打印相關信息，不會阻斷js程序執行。
* console.log()可以看到結構化的信息，如淡化一個對象，alert()僅能顯示它是一個對象，而console.log()卻能看到它的具體信息。
#課堂小案例
***
題：在設計圖上有一確定按鈕，要求高60px，同時“確定”兩字垂直水平居中
答：文字行高與按鈕高度相等即可。具體代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
p{
text-align: center;
line-height: 60px;
border:1px solid black;
width:100px;
}
</style>
</head>
<body>
<p>確定</p>
</body>
</html>
#心得
***
在終于重新扒完上次的上課視頻，惡補了若干個自己不清楚的知識點后，我可終于把這篇持續了好幾天的超長博文總結完了！感覺腦袋已臃腫了好幾個維度…也總算趕在晚上上課前把上節課的東西搞定了～表示上課的內容扒一扒可真是不少！繼續加油！Fighting！
#參考
***
http://www.jirengu.com/app/video/619
http://www.jirengu.com/app/video/620
http://www.jirengu.com/app/video/621
http://www.cnblogs.com/lxin/archive/2013/02/18/2915344.html
http://zccst.iteye.com/blog/2162187
http://www.jb51.net/css/138683.html
http://www.zhihu.com/question/20193935
http://tools.yesky.com/19/34456519.shtml
http://baike.baidu.com/link?url=U_6xi8Sjqxc9lzc6Nt57t5P89f9lJzxNRhpHSniJRPTmRIw6udBlaIOFkFfO9k9sOnKEAJnqlwoVUvHMF5hBKq
http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html
http://www.cnblogs.com/leejersey/p/3662612.html
http://www.douban.com/note/155032221/
http://www.jikexueyuan.com/blog/236.html
http://bbs.jirengu.com/?qa=25/src和href區別
http://www.jb51.net/css/37554.html
http://www.w3school.com.cn/html/html_colors.asp