目錄
1.網(wǎng)頁的組成
2.HTML
（1）標簽
（2）比較重要且常用的標簽：
①列表標簽
②超鏈接標簽 （a標簽）
③img標簽：用于渲染，圖片資源的標簽
④div標簽和span標簽
（3）屬性
（4）常用的語義化標簽
（5）元素的分類及特點
①塊元素
②行內(nèi)元素
③行內(nèi)塊元素
（6）文件路徑
（7）HTML的基本結(jié)構(gòu)
（8）節(jié)點樹及節(jié)點間的關(guān)系
3.CSS
（1）引入css的方法
（2）選擇器
（3）單位
（4）css三大特性
1.網(wǎng)頁的組成
網(wǎng)頁可分為三個部分——HTML、CSS和JavaScript。如果把網(wǎng)頁比作一個人的話，HTML相當(dāng)于骨架，JavaScript相當(dāng)于肌肉，CSS相當(dāng)于皮膚，三者結(jié)合起來才能形成一個完善的網(wǎng)頁。
2.HTML
HTML是用來描述網(wǎng)頁的一種語言，全稱為超文本標記語言。網(wǎng)頁包含文字、按鈕、圖片和視頻等各種復(fù)雜的元素，其基礎(chǔ)架構(gòu)就是HTML。不同類型的文字通過不同類型的標簽來表示 ，如圖片用img標簽表示，視頻用video標簽表示，段落用p 標簽表示 ，他們之間的布局又常通過布局標簽 div 嵌套組合而戚成，各種標簽通過不同的排列和嵌套才形成了網(wǎng)頁的框架。
我們可以隨意打開一個網(wǎng)站，比如京東首頁，然后單擊鼠標右鍵選擇“檢查元素”菜單或者按 F12，即可打開瀏覽器開發(fā)者工具，接著切換到 Elements 面板，這時候呈現(xiàn)的就是京東網(wǎng)首頁對應(yīng)的 HTML，它包含了一系列標簽，瀏覽器解析這些標簽后，便會在網(wǎng)頁中將它們渲染成一個個節(jié)點，這便形成了我們平?？吹降木W(wǎng)頁。
（1）標簽
是由w3c提前制定好的一些針對于html文檔的標記符號,這些符號是具備各自的含義的。具體在html中的變現(xiàn)形式 由 < > 括起來的對象 比如: html ?head ?body
需要注意的是:
? ? ? ? ①標簽通常是成對出現(xiàn)的,但也有極少部分只有開始標簽,沒有結(jié)束標簽 ?稱作 單標簽或者空標簽 比如:meta
? ? ? ? ②標簽是允許嵌套的,但是要符合嵌套的標準
通常,我們也會將標簽稱作為元素 ，例如：根元素 ?、head元素等
（2）比較重要且常用的標簽：
①列表標簽
?1>有序列表,表示如下：
<ol>
? ? <li></li>
? ? <li></li>
? ? <li></li>
</ol>? ? ? ??2>無序列表，表示如下：
<ul>
? ? <li></li>
? ? <li></li>
? ? <li></li>
</ul>? ? ? ? ?3>定義列表，表示如下：
<dl>
? ? <dt></dt>
? ? <dd></dd>
? ? <dt></dt>
? ? <dd></dd>
</dl>注：列表之間是可以相互嵌套的
②超鏈接標簽 （a標簽）
? ? ? ? ? ? ? ? 1>可以訪問到外部網(wǎng)絡(luò)的資源
? ? ? ? ? ? ? ? ?2>可以訪問本地網(wǎng)頁資源
? ? ? ? ? ? ? ? 3>可以作為錨點，在當(dāng)前頁面指定位置進行定位跳轉(zhuǎn)
③img標簽：用于渲染，圖片資源的標簽
④div標簽和span標簽
小tip：href和src的區(qū)別：?
href和src都是指向外部資源地址或者本地資源地址
不同點：
href屬性:
? ? ? ? 1>通過該屬性去關(guān)聯(lián)另一份外部資源文件
? ? ? ? 2>如果被關(guān)聯(lián)的資源文件，在頁面渲染時需要用到該資源中的內(nèi)容時，它會下載該資源，
? ? ? ? 3>如果需要下載資源文件內(nèi)容時，并行下載的方式，不會阻塞頁面的渲染
src屬性：
? ? ? ? 1>通過該屬性去訪問到對應(yīng)的外部資源，并替換掉該標簽的內(nèi)容
? ? ? ? 2>src屬性肯定是會下載對應(yīng)路徑的資源的
? ? ? ? 3>src的下載不是并行下載，在頁面渲染時如果遇到src那么會將該資源全部下載完畢并且解析后，才會繼續(xù)渲染頁面后續(xù)的內(nèi)容（src會阻塞頁面的渲染）
（3）屬性
通常格式：key=value（注：有時候只有key沒有value，即表示邏輯值的時候）
①全局屬性：全部元素都具備（例id，class，style等等）
②局部屬性：只能某些元素使用
（4）常用的語義化標簽
標題標簽（h1-h6標簽）、段落標簽（p標簽）、i/em標簽（斜體）、b/strong標簽（粗體）、blockquote/q標簽（引用）等等。
（5）元素的分類及特點
①塊元素
? ? ? ? 1>塊元素具有布局特點,一般常用頁面的整體布局
? ? ? ? 2>塊元素獨占(其父元素)頁面的一行
? ? ? ? 3>塊元素可以嵌套任何類型的元素(除p元素以外,p元素中不能嵌套任何的塊元素)
? ? ? ? 4>塊元素可以設(shè)置寬,高 ?默認的寬度是其父元素的寬度
? ? ? ? 5>塊元素默認高度是由內(nèi)容決定的
②行內(nèi)元素
? ? ? ? 1>正常情況下,行內(nèi)元素是不會換行的
? ? ? ? 2>行內(nèi)元素會在一行排不下時進行換行
? ? ? ? 3>行內(nèi)元素不能設(shè)置寬 高 ?行內(nèi)元素的寬和高都是由其內(nèi)容決定的
? ? ? ? 4>行內(nèi)元素一般不會嵌套塊級元素,大多數(shù)是嵌套文本或者其他的行內(nèi)元素
③行內(nèi)塊元素
? ? ? ? 1.行內(nèi)塊元素不會獨占一行,在一行排列
? ? ? ? 2.可以設(shè)置寬高(默認是內(nèi)容的寬 高)
注：元素之間可以相互進行轉(zhuǎn)換，使用diaplay:block(inline/inline-block);
（6）文件路徑
①相對路徑：與當(dāng)前的文件是沒有聯(lián)系的，不是根據(jù)當(dāng)前該文件所處的位置去訪問對應(yīng)的資源。
②絕對路徑：從當(dāng)前文件出發(fā)去尋找其他的資源，當(dāng)前的位置為中心。
（7）HTML的基本結(jié)構(gòu)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>This is a Demo</title>
</head>
<body>
<div id="container">
<div class="wrapper">
<h2 class="titie">Hello Morld</h2>
<p class="text">Hello, this is a parpgtaph.</p>
</div>
</div>
</body>
</html>
（8）節(jié)點樹及節(jié)點間的關(guān)系
? 在HTML中,所有標簽定義的內(nèi)容都是節(jié)點,這些節(jié)點構(gòu)成一個 HTML節(jié)點樹,也叫HTMLDOM樹。
? 先來看一下什么是 DOM。DOM 是 W3C（萬維網(wǎng)聯(lián)盟）的標準，英文全稱是 Document Object Model，即文檔對象模型。它定義了訪問 HTML 和 XML 文檔的標準。根據(jù) W3C 的HTMLDOM 標準,HTML 文檔中的所有內(nèi)容都是節(jié)點。
- 整個網(wǎng)站文檔是一個文檔節(jié)點。
- 每個 html 標簽對應(yīng)一個根節(jié)點，即上例中的 html 標簽，它屬于一個根節(jié)點。
- 節(jié)點內(nèi)的文本是文本節(jié)點，比如 a 節(jié)點代表一個超鏈接，它內(nèi)部的文本也被認為是一個文本節(jié)點。
- 每個節(jié)點的屬性是屬性節(jié)點，比如 a 節(jié)點有一個 href 屬性，它就是一個屬性節(jié)點。
- 注釋是注釋節(jié)點，在 HTML 中有特殊的語法會被解析為注釋，它也會對應(yīng)一個節(jié)點。
因此，HTML DOM 將 HTML 文檔視作樹結(jié)構(gòu)，這種結(jié)構(gòu)被稱為節(jié)點樹，如下圖所示?？赏ㄟ^這棵樹訪問所有節(jié)點?？梢孕薷幕騽h除它們的內(nèi)容，也可以創(chuàng)建新的元素。這顆節(jié)點樹展示了節(jié)點的集合，以及它們之間的聯(lián)系。這棵樹從根節(jié)點開始，然后在樹的最低層級向文本節(jié)點長出枝條：
節(jié)點樹中的節(jié)點彼此之間都有層級關(guān)系。常用父節(jié)點、子節(jié)點和同級節(jié)點描述這種關(guān)系。父節(jié)點擁有子節(jié)點，位于相同層級上的子節(jié)點稱為同級節(jié)點（兄弟或姐妹）。
- 在節(jié)點樹中，頂端的節(jié)點稱為根節(jié)點
- 根節(jié)點之外的每個節(jié)點都有一個父節(jié)點
- 節(jié)點可以有任何數(shù)量的子節(jié)點
- 葉子是沒有子節(jié)點的節(jié)點
- 同級節(jié)點是擁有相同父節(jié)點的節(jié)點
下面的圖片展示出節(jié)點樹的一個部分，以及節(jié)點間的關(guān)系：
3.CSS
（1）引入css的方法
①行內(nèi)樣式：直接在標簽內(nèi)通過style=""設(shè)置。
②內(nèi)聯(lián)樣式：在head標簽里寫style標簽，在其編寫樣式即可。
③外聯(lián)樣式：通過link標簽引入外部的css文件。
（2）選擇器
①基礎(chǔ)選擇器：元素選擇器、id選擇器、類選擇器、通配符選擇器
②復(fù)合選擇器：交集選擇器、并集選擇器
③關(guān)系選擇器：子代選擇器、后代選擇器、兄弟選擇器
④屬性選擇器：例：[tytle="name"]
⑤偽類選擇器：
? ? ? ? 1>結(jié)構(gòu)偽類（ ?:first-of-type ?| ?:last-of-type ?| ?:nth-of-type() ?）
? ? ? ? 2>動態(tài)偽類（ ?link ?| ?hover ?| ?active ?| ?visited ?）
⑥偽元素選擇器（ ?::first-letter ?| ?::first-line ?| ?::selection ?| ?::before ?| ?::after ?）
（3）單位
①長度單位：px、em、rem、vh和vw
②比例單位：%
③顏色單位：顏色單詞、RGB格式、RGBA格式、#十六進制
（4）css三大特性
①層疊性：當(dāng)有多個相同選擇器或者同類型的選擇器選中同一個元素，并為其設(shè)置同一個樣式屬性的不同屬性值，會優(yōu)先使用靠近元素的選擇器所設(shè)置的樣式。
注意：當(dāng)選擇器權(quán)重（優(yōu)先級）不同時，無法通過層疊性解決樣式?jīng)_突
②優(yōu)先級（權(quán)重）
通配符選擇器<元素選擇器<類/偽類選擇器<id選擇器<行內(nèi)樣式<!important（無限大）文章來源：http://www.zghlxwxcb.cn/news/detail-553698.html
③繼承性：子元素（后代元素）繼承父元素（祖先元素）已經(jīng)定義過的屬性（即字體相關(guān) 、字體顏色、 列表相關(guān)的、文本相關(guān)的等）。
?文章來源地址http://www.zghlxwxcb.cn/news/detail-553698.html
到了這里，關(guān)于Python爬蟲學(xué)習(xí)筆記（一）————網(wǎng)頁基礎(chǔ)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![python爬取豆瓣電影排行前250獲取電影名稱和網(wǎng)絡(luò)鏈接[靜態(tài)網(wǎng)頁]————爬蟲實例（1）](https://imgs.yssmx.com/Uploads/2024/01/415693-1.png)
