一、網頁的組成
網頁可以分爲三大部分——HTML，CSS 和 JavaScript
1、HTML
HTML：一種用來描述網頁的語言——超文本標記語言（Hyper Text Markup Language）。網頁包括了文字，土圖片，視頻和按鈕等複雜的元素，其中基礎框架就是HTML。不同的元素通過不同的標籤來表示，例如：圖片img，視頻video，段落p，一級標題h1 等。他們之間的分佈通常又由 div 嵌套組合而成，通過標籤的排序和嵌套才形成了網頁框架。
2、CSS
CSS：一個網頁排版工具——層疊樣式表（Cascading Style Sheets）。即當在HTML中引用了數個樣式（文字大小，顏色，元素間距，排列等格式）文件並且發生衝突時，瀏覽器能依據層疊順序進行處理。以下給出一個CSS例子：
#head_wrapper.s-ps-islite .s-p-top{
position: absolute;
bottom:40px;
width:100%;
height:181px;
}
其中大括號前是一個CSS選擇器。意思爲：選中 id 爲 head_wrapper 且 class 爲 s-ps-islite 的節點。大括號下的就是一條條樣式規則，例如：position 指定了元素的佈局方式爲“絕對佈局”，bottom 指定元素的下邊距爲“40像素”，width 指定了寬度爲“100%佔滿父元素“，height 指定了指定了元素的高度。即我們將這樣的樣式配置寫成這樣的格式，然後用大括號括起來，在開頭加上CSS選擇器，這就代表這個樣式對CSS選擇器選中的元素生效。
在網頁中一般會統一定義整個網頁樣式規則，並寫入CSS文件中（後綴爲css）。在HTML中，只需要 link 標籤即可引入寫好的CSS文件。
3、JavaScpit
JavaScipt：一種腳本語言。如果一個網頁中只有 HTML 和 CSS 配合使用，那麼這個網頁能提供給用戶的只有一種靜態信息，缺乏交互性。而我們平常在網頁中看到的一些交互和動畫效果（下載進度條，提示框，輪播圖等），通常都是JavaScipt的功勞，它實現了一種實態、動態、互交的頁面功能。
JavaScipt通常也是以單獨文件形式加載的，後綴爲 js ，在HTML中通過 scipt 標籤即可引入，例：
<scipt src="jquery-2.1.0.js"></scipt>
二、網頁的結構
我們先自己寫一個例子，再分析HTML的基本結構。先創建一個 txt 文件（名字自取），寫入以下這串代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> This is a Demo</title>
</head>
<body>
<div id="container">
<div class="wrapper">
<h1 class="title">Hello World(這是一級標題)</h1>
<h2 class="title">Hello World(這是二級標題)</h2>
<p class="text">Hello, this is a paragraph.(這是段落)</p>
</div>
</div>
</body>
</html>
寫好後將 txt 文件的後綴改爲：.html 並雙擊打開。
這是一個最簡單的HTML例子。開頭用 DOCTYPE定義了文檔的類型，其次是 html 標籤，還有最後的結束標籤表示閉合，內部是 head（網頁頭） 和 body（網頁體） 標籤，同樣也有結束標籤。其中 head 中定義了一些網頁的配置和引用，例：
<meta charset="utf-8">
指定了網頁的編碼爲UTF-8。
- title 標籤定義了網頁的標題，顯示在網頁的選項卡中（不顯示在正文）；
- body 標籤內則是網頁正文中的內容；
- div 標籤定義了網頁中的區塊，其中它的 id 是 container，這是一個非常常用的屬性，且 id 的內容在網頁中是唯一的，我們可以通過它來獲得這個區塊；
- 在 id 區塊下還有一個 div 標籤，它的 class 爲 wrapper，這也是一個非常常用的屬性，通常與CSS配合使用來定義樣式；
- h1 標籤爲：一級標題；
- h2 標籤爲：二級標題；
- p 標籤爲：段落（一個 p 標籤表示一個段落）；
一般網頁標準形式就是如此，html 標籤內嵌套 head 和 body 標籤，head 內定義網頁的配置和引用，body 標籤內定義網頁的正文。
三、節點樹及節點間的關係
在HTML中，所有標籤定義的內容都是節點，他們構成了HTML DOM樹。那麼什麼是DOM？
DOM（Document Object Model） 是 W3C（萬維網聯盟）的標準，即文檔對象模型。它定義了訪問 HTML 和 XML 文檔的標準（W3C 文檔對象模型（DOM）是中立於平臺和語言的接口，它允許程序和腳本動態的訪問和更新文檔內容、結構和樣式）。
1、W3C DOM標準被分爲3個不同的部分：
- 核心 DOM：針對任何結構化文檔的標準模型；
- XML DOM：針對 XML 文檔的標準模型；
- HTML DOM：針對 HTML 文檔的標準模型；
根據 W3C 的 HTML DOM 標準，HTML文檔中的所有內容都是節點
- 整個文檔是一個文檔的節點；
- 每個 HTML 元素是元素節點；
- HTML 元素內的文本時文本節點；
- 每個 HTML 屬性是屬性節點；
- 註釋是註釋節點；
2、HTML DOM 節點樹
HTML DOM 將 HTML 文檔視作樹結構。這種結構被稱爲節點樹，通過 HTML DOM，樹中的所有節點均可通過 JavaScript 進行訪問。所有 HTML 元素（節點）均可被修改，也可以創建或刪除節點。
3、節點父、子和同胞
節點樹中的節點彼此擁有層級關係：父（parent）、子（child）和同胞（sibling）等術語用於描述這些關係。父節點擁有子節點。同級的子節點被稱爲同胞（兄弟或姐妹）。
- 在節點樹中，頂端節點被稱爲根（root）
- 每個節點都有父節點、除了根（它沒有父節點）
- 一個節點可擁有任意數量的子
- 同胞是擁有相同父節點的節點
下面的圖片展示了節點樹的一部分，以及節點之間的關係：
本段參考 W3SCHOOL，鏈接：https://www.w3school.com.cn/htmldom/dom_nodes.asp
四、選擇器
現在我們已經知道網頁是由許多節點組成的，CSS選擇器會根據不同的節點設置不同的樣式規則，那麼如何定義節點？
以我們自己寫的實例爲例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> This is a Demo</title>
</head>
<body>
<div id="container">
<div class="wrapper">
<h1 class="title">Hello World(這是一級標題)</h1>
<h2 class="title">Hello World(這是二級標題)</h2>
<p class="text">Hello, this is a paragraph.(這是段落)</p>
</div>
</div>
</body>
</html>
三種常見的選擇方式：
- 根據 id 進行篩選：在 div 節點中的 id 爲container，那麼就可以表示爲 #contairner，其中 #開頭表示選擇 id，其後緊跟 id 的名稱；
- 根據 class 進行篩選：如果我們想選擇 class 爲 wrapper 的節點，就可以使用 .wrapper，這裏的（.）開頭代表選擇 class，其後緊跟 class 的名稱；
- 根據標籤名篩：想要選擇二級標題，直接用 h2 即可；
- 另外CSS選擇器還支持嵌套選擇，各個選擇器之間加上空格分隔便可以代表嵌套關係，例：
#container .wrapper p
代表先選擇 id 爲 container 的節點，然後選中其內部的 class 爲 wrapper 的節點，然後再選擇內部的 p 節點。
- 如果不加空格則表示並列關係，如：
div#container .wrapper p.text
代表先選擇 id 爲 container 的 div 節點，然後選中其內部的 class 爲 wrapper 的節點，再進一步選中中內部的 class 爲 text 的 p 節點。
下面附上CSS選擇器的部分語法：
| 選擇器 | 例子 | 例子描述 |
|---|---|---|
| .class | .intro | 選擇 class=“intro” 的所有節點 |
| #id | #firstname | 選擇 id=“firstname”的所有節點 |
| * | * | 選擇所有節點 |
| element | p | 選擇所有 p 節點 |
| element , element | div , p | 選擇所有 div 節點和所有 p 節點 |
| element element | div p | 選擇 div 節點內的所有 p 節點 |
| element>element | div>p | 選擇父節點爲 div 節點的所有 p 節點 |
| element+element | div+p | 選擇緊接在 div 節點之後的所有 p 節點 |
| [ attribute ] | [ target ] | 選擇帶有 target 屬性的所有節點 |
| [ attribute=value ] | [ target=blank ] | 選擇帶有 target=“blank” 的所有節點 |
| [ attrubute~=value ] | [ title~=flower ] | 選擇 title 屬性包含單詞 flower 的所有節點 |
| : link | a : link | 選擇所有未被訪問的鏈接 |
| : visited | a : visited | 選擇所有已被訪問的鏈接 |
| : active | a : active | 選擇活動鏈接 |
| : hover | a : hover | 選擇鼠標指針位於其上的鏈接 |
| : focus | input : focus | 選擇獲得焦點的 input 節點 |
| : first-letter | p : first-letter | 選擇每個 p 節點的首字母 |
| : first-line | p : first-line | 選擇每個 p 節點的首行 |
| : first-child | p : first-child | 選擇屬於父節點的第一個子節點的所有 p 節點 |
| : before | p : before | 在每個 p 節點的內容之前插入內容 |
| : after | p : after | 在每個 p 節點的內容之後插入內容 |
| : lang(language) | p : lang | 選擇帶有 it 開頭的 lang 屬性值的所有 p 節點 |
| element1~element2 | p~ul | 選擇前面有 p 節點的所有 ul 節點 |
| [ attribute^=value ] | a[ src^=“https” ] | 選擇其 src 屬性值以 https 開頭的所有 a 節點 |
| [ attribute$=value ] | a[ src$=“.pdf” ] | 選擇其 src 屬性以 .pdf 結尾的所有 a 節點 |
| [ attribute*=value ] | a[ src8=“abc” ] | 選擇其 src 屬性中包含 abc 字串的所有 a 節點 |
| : first-of-type | p : first-of-type | 選擇屬於其父節點的首個 p 節點的所有 p 節點 |
| : last-of-type | p : last-of-type | 選擇屬於其父節點的最後 p 節點的所有 p 節點 |
| : only-of-type | p : only-of-type | 選擇屬於其父節點唯一的 p 節點的所有 p 節點 |
| : only-child | p : only-child | 選擇屬於其父節點的唯一子節點的所有 p 節點 |
| : nth-child(n) | p : nth-child | 選擇屬於其父節點的第二個子節點的所有 p 節點 |
| : nth-last-child(n) | p : nth-last-child | 同上，從最後一個子節點開始計數 |
| : nth-of-type(n) | p : nth-of-type | 選擇屬於其父節點第二個 p 節點的所有 p 節點 |
| : nth-last-of-type | p : nth-last-of-type | 同上，但是從最後一個子節點開始計數 |
| : last-child | p : last-child | 選擇屬於其父節點最後一個子節點的所有 p 節點 |
| : root | : root | 選擇文檔的根節點 |
| : empty | p : empty | 選擇沒有子節點的所有 p 節點（包括文本節點） |
| : target | #new : target | 選擇當前活動的 #new 節點 |
| : enabled | input : enabled | 選擇每個啓用的 input 節點 |
| : disabled | input : disabled | 選擇每個禁用的 input 節點 |
| : checked | input : checked | 選擇每個被選中的 input 節點 |
| : not(selector) | : not | 選擇非 p 節點的所有節點 |
| : : selection | : : selection | 選擇被用戶選取的節點部分 |
所有內容全部引自《python3 網絡爬蟲開發實戰（人民郵電出版社）》，此筆記僅用於學習。