第一節(jié) 瀏覽器知識
什么是瀏覽器
- 瀏覽器是網(wǎng)頁運(yùn)行的平臺榨惰，常用的瀏覽器有IE、360静汤、火狐（Firefox）琅催、谷歌（Chrome）、Safari和Opera等虫给。
什么是內(nèi)核
- 瀏覽器最重要或者說核心的部分是“Rendering Engine”藤抡，可大概譯為“渲染引擎”，不過我們一般習(xí)慣將之稱為“瀏覽器內(nèi)核”抹估。負(fù)責(zé)對網(wǎng)頁語法的解釋（如標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用HTML缠黍、JavaScript）并渲染（顯示）網(wǎng)頁。 所以药蜻，通常所謂的瀏覽器內(nèi)核也就是瀏覽器所采用的渲染引擎瓷式，渲染引擎決定了瀏覽器如何顯示網(wǎng)頁的內(nèi)容以及頁面的格式信息。不同的瀏覽器內(nèi)核對網(wǎng)頁編寫語法的解釋也有不同语泽，因此同一網(wǎng)頁在不同的內(nèi)核的瀏覽器里的渲染（顯示）效果也可能不同贸典，這也是網(wǎng)頁編寫者需要在不同內(nèi)核的瀏覽器中測試網(wǎng)頁顯示效果的原因。
| chrome | firefox | safari | IE | opera | |
|---|---|---|---|---|---|
| 排版引擎 | blink | Gecko | webkit | Trident | blink |
| Javascript引擎 | V8 | Spidermonkey | Nitro | Chakra | carakan |
參考:http://www.reibang.com/p/74b6117f1022
網(wǎng)頁的定義
- 網(wǎng)頁主要由文字踱卵、圖像和超鏈接等元素構(gòu)成廊驼。當(dāng)然，除了這些元素惋砂，網(wǎng)頁中還可以包含音頻妒挎、視頻以及Flash等。
網(wǎng)頁的形成：特殊的符號和文本經(jīng)過瀏覽器的渲染生成圖文并茂的頁面班利。
網(wǎng)頁的組成：
HTML：頁面結(jié)構(gòu)
CSS：頁面樣式表現(xiàn)
JavaScript：交互行為
網(wǎng)頁亂碼的產(chǎn)生及解決途徑
網(wǎng)頁亂碼的產(chǎn)生
- 世界上存在著多種編碼方式，同一個(gè)二進(jìn)制數(shù)字可以被解釋成不同的符號榨呆。因此罗标，當(dāng)瀏覽器解析時(shí)的解碼方式和你文檔保存時(shí)所用的編碼方式不一致庸队，你打開的文檔就會(huì)是亂碼。
解決亂碼的途徑
- 當(dāng)你在編寫文檔時(shí)闯割，應(yīng)該html的head 里用mata標(biāo)簽注明你使用的是什么編碼方式彻消。這樣瀏覽器就會(huì)以你的編碼方式解碼。
第二節(jié) html基礎(chǔ)
HTML簡介
- HTML（英文Hyper Text Markup Language的縮寫）中文譯為“超文本標(biāo)記語言”宙拉，主要是通過HTML標(biāo)記對網(wǎng)頁中的文本宾尚、圖片、聲音等內(nèi)容進(jìn)行描述谢澈。
HTML之所以稱為超文本標(biāo)記語言煌贴，不僅是因?yàn)樗ㄟ^標(biāo)記描述網(wǎng)頁內(nèi)容，同時(shí)也由于文本中包含了所謂的“超級鏈接”點(diǎn)锥忿。通過超鏈接將網(wǎng)站與網(wǎng)頁以及各種網(wǎng)頁元素鏈接起來牛郑，構(gòu)成了豐富多彩的Web頁面。
HTML的結(jié)構(gòu)
HTML的結(jié)構(gòu)包括：
<html> 表示html文檔
<head></head> html的頭部部分
<body>
內(nèi)容
</body> html的身體部分
</html>
- 特點(diǎn)：成對出現(xiàn)敬鬓，有開有閉合淹朋。
- 語法：<標(biāo)簽名> 標(biāo)簽內(nèi)容</標(biāo)簽名>
第一：標(biāo)簽成對出現(xiàn)。
第二：結(jié)束標(biāo)簽內(nèi)部用/開頭钉答。
第三：標(biāo)簽可以嵌套础芍。
第四：標(biāo)簽名之后如果有屬性的話，加空格然后是屬性名=""数尿。
第五：如果有多個(gè)屬性仑性，屬性間用一個(gè)或多個(gè)空格隔開。
HTML的頭部標(biāo)簽
- Doctype標(biāo)簽砌创，文檔協(xié)議聲明標(biāo)簽
<!DOCTYPE> 聲明不是 HTML 標(biāo)簽虏缸；它是指示 web 瀏覽器關(guān)于頁面使用哪個(gè) HTML 版本進(jìn)行編寫的指令。 - head標(biāo)簽
標(biāo)簽用于定義HTML文檔的頭部信息嫩实，主要用來封裝其他位于文檔頭部的標(biāo)記刽辙，例如、<meta>甲献、<link>及<style>等宰缤，用來描述文檔的標(biāo)題、作者以及和其他文檔的關(guān)系等晃洒。 - meta標(biāo)簽
meta是html語言head區(qū)的一個(gè)輔助性標(biāo)簽慨灭。
<meta> 元素可提供有關(guān)頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關(guān)鍵詞球及。
meta屬性：
1.content：定義與 http-equiv 或 name 屬性相關(guān)的元信息氧骤。
2.http-equiv:把 content 屬性關(guān)聯(lián)到 HTTP 頭部。它可以向?yàn)g覽器傳回一些有用的信息吃引，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容筹陵。
3.name:把 content 屬性關(guān)聯(lián)到一個(gè)名稱刽锤，主要用于描述網(wǎng)頁。
4.scheme：定義用于翻譯 content 屬性值的格式朦佩。
參考：w3school
HTML 2種路徑的寫法：相對路徑和絕對路徑
HTML相對路徑
- 同一個(gè)目錄的文件引用如果源文件和引用文件在同一個(gè)目錄里并思，直接寫引用文件名即可。
我們現(xiàn)在建一個(gè)源文件info.html语稠，在info.html里要引用index.html文件作為超鏈接宋彼。假設(shè)info.html路徑是：
C:/Users/asus/Desktop/Untitled-1.html
假設(shè)index.html路徑是：
C:/Users/asus/Desktop/Untitled-2.html
在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：
<a href = "index.html">index.html</a>
如何表示上級目錄
../表示源文件所在目錄的上一級目錄，
../../表示源文件所在目錄的上上級目錄仙畦，以此類推输涕。
- 假設(shè)info.html路徑是：
C:/Users/asus/Desktop/Untitled-1.html
假設(shè)index.html路徑是：
C:/Users/asus/Untitled-2.html
在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：
<a href = "../index.html">index.html</a> - 假設(shè)info.html路徑是：
C:/Users/asus/Desktop/Untitled-1.html
假設(shè)index.html路徑是：
C:/Users/Untitled-2.html
在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：
<a href = "../../index.html">index.html</a> - 假設(shè)info.html路徑是：
C:/Users/asus/Desktop/Untitled-1.html
假設(shè)index.html路徑是：
C:/Users/asus/babala/Untitled-2.html
在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：
<a href = "../babala/index.html">index.html</a>
如何表示下級目錄
引用下級目錄的文件，直接寫下級目錄文件的路徑即可议泵。
- 假設(shè)info.html路徑是：C:/Users/asus/Desktop/Untitled-1.html
假設(shè)index.html路徑是：C:/Users/asus/Desktop/html/Untitled-2.html
在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：
<a href = "html/index.html">index.html</a> - 假設(shè)info.html路徑是：C:/Users/asus/Desktop/Untitled-1.html
假設(shè)index.html路徑是：C:/Users/asus/Desktop/html\tutorials\index.html
在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：
<a href = "html/tutorials/index.html">index.html</a>
HTML絕對路徑(Absolute Path)
- HTML絕對路徑(absolute path)指帶域名的文件的完整路徑占贫。假設(shè)你注冊了域名www.admin5.com/html，并申請了虛擬主機(jī)先口，你的虛擬主機(jī)提供商會(huì)給你一個(gè)目錄型奥，比如www，這個(gè)www就是你網(wǎng)站的根目錄碉京。假設(shè)你在www根目錄下放了一個(gè)文件index.html厢汹，這個(gè)文件的絕對路徑就是：http://www.admin5.com/html。假設(shè)你在www根目錄下建了一個(gè)目錄叫html_tutorials谐宙，然后在該目錄下放了一個(gè)文件index.html烫葬，這個(gè)文件的絕對路徑就是http://www.admin5.com/html/html_tutorials/index.html。
參考：寫給技術(shù)小白的HTML初級教程
顏色的幾種表達(dá)方式
顏色有幾種寫法：
|顏色名| HEX |RGB|HSL|
|:-|:-|
|紅色| #ff0000| rgb(255,0,0)| hsl(0,100%,50%)|
|綠色| #00ff00| rgb(0,255,0)| hsl(120,100%,50%)|
|藍(lán)色| #0000ff| rgb(0,0,255)| hsl(240,100%,50%)|
|白色| #ffffff|rgb(255,255,255)| hsl(0,0%,100%)|
|黑色| #000000| rgb(0,0,0) | hsl(0,0%,0%)|
- 透明黑色如何表示：
在CSS3中凡蜻，加入了Alpha透明通道,所以黑色透明就是rgba(0,0,0,0.5),其實(shí)最后一個(gè)alpha的值為0~1搭综，0表示完全透明，1表示不透明划栓。
參考：HTML顏色
其他
對<meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1">的解析：
以上代碼告訴IE瀏覽器兑巾，IE8/9及以后的版本都會(huì)以最高版本IE來渲染頁面，chrome=1則可以激活Chrome Frame忠荞。
X-UA-Compatible是自從IE8新加的一個(gè)設(shè)置蒋歌，對于IE8以下的瀏覽器是不識別的。 通過在meta中設(shè)置X-UA-Compatible的值委煤，可以指定網(wǎng)頁的兼容性模式設(shè)置堂油。
參考：
X-UA-compatible
IE兼容模式及客戶端兼容模式、服務(wù)器端兼容模式設(shè)置嚴(yán)格模式和混雜模式
當(dāng)瀏覽器廠商開始創(chuàng)建與標(biāo)準(zhǔn)兼容的瀏覽器時(shí)碧绞，他們希望確保向后兼容性府框。為了實(shí)現(xiàn)這一點(diǎn)，他們創(chuàng)建了兩種呈現(xiàn)模式：標(biāo)準(zhǔn)模式和混雜模式
- 在標(biāo)準(zhǔn)模式中讥邻，瀏覽器以其支持的最高標(biāo)準(zhǔn)呈現(xiàn)頁面迫靖；
- 在混雜模式中癣诱，頁面以一種比較寬松的向后兼容的方式顯示⊥嘞悖混雜模式通常模擬老式瀏覽器的行為以防止老站點(diǎn)無法工作。
