如果把整個(gè)絢麗的網(wǎng)頁看成一個(gè)人的話裹唆，那么html就是這個(gè)人的骨肉瓤摧，css則是好看的外表，JS則能讓這個(gè)人成長(zhǎng)挂滓，移動(dòng)苦银，甚至是放大縮小啸胧。
所以這節(jié)讓我們一起探索這個(gè)“人”組成的奇妙之處。
我在網(wǎng)上找了個(gè)html網(wǎng)頁作為示范(這是個(gè)保留彩蛋)
看起來短短4行字符幔虏，但是它的源代碼卻遠(yuǎn)超過顯示出來的字符：
<html>
<head>
<title>The Dormouse's story</title></head>
<meta charset="UTF-8">
<link rel="stylesheet" >
<script src="http://www.xxx.com/xxx.js"></script>
</head>
<body>
<p class="title"><b>The Dormouse's story</b></p>
<p class="story">Once upon a time there were three little sisters; and their names were
<a class="sister" id="link1">Elsie</a>,
<a class="sister" id="link2">Lacie</a> and
<a class="sister" id="link3">Tillie</a>
;and they lived at the bottom of a well.
</p>
<p class="story">...</p>
</body>
</html>
源代碼由最外層的<html>標(biāo)簽包裹纺念，<html>內(nèi)部是<head>、<body>想括。
head標(biāo)簽：里面一般會(huì)存放這個(gè)網(wǎng)頁的一些設(shè)置陷谱、CSS 和 JS 文件，設(shè)置比如字符集<meta charset="UTF-8">是告訴瀏覽器瑟蜈，網(wǎng)頁的編碼按照UTF-8來解析烟逊，以免出現(xiàn)亂碼。
body就是我們看到的內(nèi)容了铺根，一般在body的結(jié)尾或者</body>后面有一些js文件的引入或者代碼宪躯。
CSS文件引入代碼:
<link rel="stylesheet" >
JS文件引入代碼:
<script src="http://www.xxx.com/xxx.js"></script>
簡(jiǎn)介完成，下面詳細(xì)介紹：
1. HTML
超文本標(biāo)記語言位迂，標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用访雪。
超文本標(biāo)記語言的結(jié)構(gòu)包括“頭”部分（英語：Head）泻帮、和“主體”部分（英語：Body）精置，其中“頭”部提供關(guān)于網(wǎng)頁的信息，“主體”部分提供網(wǎng)頁的具體內(nèi)容锣杂。
我們看到的整個(gè)源代碼就是一個(gè)HTML文件脂倦，這個(gè)文件是我們發(fā)起請(qǐng)求，然后服務(wù)器返回給我們的響應(yīng)的一部分蹲堂。
瀏覽器收到響應(yīng)后狼讨，開始解析html文件，采用從上到下的流程柒竞，逐步渲染頁面。把內(nèi)容顯示出來播聪。所以加載網(wǎng)頁是有一個(gè)過程的朽基，并不是迅速就能出現(xiàn)的。
html標(biāo)簽由很多個(gè)節(jié)點(diǎn)(Tag离陶、Node)組成稼虎。比如 head 、 body 招刨、 p 霎俩、 a 。這些節(jié)點(diǎn)之間的關(guān)系有父子關(guān)系、兄弟關(guān)系打却。
父子關(guān)系：子節(jié)點(diǎn)被包括在父節(jié)點(diǎn)中杉适。比如body內(nèi)的所有標(biāo)簽，都是body的子節(jié)點(diǎn)柳击。
兄弟關(guān)系：兩個(gè)節(jié)點(diǎn)位于同一層級(jí)猿推，比如我們的所有的p標(biāo)簽。他們的直接父節(jié)點(diǎn)都是body捌肴。
其中每個(gè)節(jié)點(diǎn)都可以有自己的一些屬性蹬叭，比如：class、href状知，src秽五，id。這些屬性決定了他們的特點(diǎn)：
class：通常情況下饥悴，我們用class為節(jié)點(diǎn)加上樣式坦喘。
href：這是一個(gè)錨點(diǎn)，如果href的值是一個(gè)互聯(lián)網(wǎng)地址铺坞，那么它就會(huì)呈現(xiàn)一個(gè)鏈接的樣式起宽。
src：一般我們?cè)?img 和 script 標(biāo)簽中使用，用來引用圖片或者js文件济榨，它的值就是文件的地址坯沪。
id：id 通常在一個(gè)網(wǎng)頁是唯一的，為了便于給它加上一個(gè)特別的樣式或者便于js找到它擒滑。
2. CSS
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言况鸣。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動(dòng)態(tài)地對(duì)網(wǎng)頁各元素進(jìn)行格式化隧魄。 [1]
CSS 能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級(jí)精確控制茫孔，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁對(duì)象和模型樣式編輯的能力库车。
?
css長(zhǎng)這樣：
.pull-right {
float: right;
}
.pull-left {
float: left;
}
.pull-right就是設(shè)置 class 為 pull-right 的節(jié)點(diǎn)的樣式巨柒。float: right則是設(shè)置樣式為向右浮動(dòng)。CSS的作用是巨大的柠衍，我們看到的顏色洋满、點(diǎn)擊效果、背景顏色等等珍坊，都是由CSS設(shè)置的牺勾。
但是呢，在寫爬蟲的時(shí)候阵漏，我們基本上不必管css驻民。因?yàn)閏ss里面只有外觀樣式翻具，并沒有對(duì)我們有利的信息。
3. JS
JavaScript一種直譯式腳本語言回还，是一種動(dòng)態(tài)類型裆泳、弱類型、基于原型的語言懦趋，內(nèi)置支持類型晾虑。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分仅叫，廣泛用于客戶端的腳本語言帜篇，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動(dòng)態(tài)功能诫咱。
?
首先要聲明的一點(diǎn)：javascript 和 java 除了都是編程語言之外笙隙，沒有任何關(guān)系，沒有任何關(guān)系竟痰，沒有任何關(guān)系~！
JS是可以在瀏覽器里面運(yùn)行的編程語言掏呼。它的特點(diǎn)：
① JS可以在瀏覽器端進(jìn)行運(yùn)算
??比如在你輸入密碼的時(shí)候坏快，當(dāng)你密碼不合格，比如少于6位的時(shí)候憎夷，網(wǎng)頁會(huì)出現(xiàn)密碼過短的提示莽鸿。這就是JS獲取到了你輸入的密碼，然后計(jì)算出位數(shù)過少拾给，然后控制提示出現(xiàn)祥得。
題外話：最近出現(xiàn)的JS挖礦程序也是屬于這個(gè)范圍。當(dāng)你打開某個(gè)網(wǎng)頁之后蒋得，發(fā)現(xiàn)突然電腦變卡了级及，那就打開資源管理器，看看是不是瀏覽器占用了你大量的CPU資源额衙，如果是饮焦，那就可能遇到了讓你為別人挖礦的網(wǎng)頁了。
② JS可以發(fā)起請(qǐng)求并更新網(wǎng)頁 (敲黑板窍侧！劃重點(diǎn)追驴！)
??JS可以在不刷新網(wǎng)頁的前提下，向后臺(tái)發(fā)起請(qǐng)求疏之，然后單獨(dú)更新(增刪改)某一段網(wǎng)頁。我們稱之為 AJAX暇咆。我們常見的點(diǎn)擊加載更多锋爪、頁面劃到頁面底端自動(dòng)加載更多丙曙、點(diǎn)擊刪除某個(gè)節(jié)點(diǎn)、點(diǎn)擊刷新其骄，都屬于AJAX操作亏镰。這是爬蟲常見的障礙之一。
?
傳送門：
下一章:
爬蟲入門教程⑤— 安裝Python
所有的章節(jié):
- 爬蟲入門教程①— 爬蟲簡(jiǎn)介
- 爬蟲入門教程②— 必備知識(shí)基礎(chǔ)(一)反爬蟲簡(jiǎn)介
- 爬蟲入門教程③— 必備知識(shí)基礎(chǔ)(二)HTTP請(qǐng)求簡(jiǎn)介
- [爬蟲入門教程④— 必備知識(shí)基礎(chǔ)(三)網(wǎng)頁的構(gòu)成]
- 爬蟲入門教程⑤— 安裝Python
- 爬蟲入門教程⑥— 安裝爬蟲常用工具包
- 爬蟲入門教程⑦— jupyter與requests的初步使用
- 爬蟲入門教程⑧— BeautifulSoup解析豆瓣即將上映的電影信息
- 爬蟲入門教程⑨— 用html和csv文件保存爬取到的數(shù)據(jù)
- 爬蟲入門教程⑩— 用漂亮的圖表展示爬取到的數(shù)據(jù)
