「從零開始Python爬蟲」2.2 小白必備的網(wǎng)頁基

「從零開始Python爬蟲」2.2 小白必備的網(wǎng)頁基礎知識

瀏覽器訪問網(wǎng)站時，頁面各不相同，你有沒有想過它為何會呈現(xiàn)這個樣子呢？本節(jié)中，我們就來了解一下網(wǎng)頁的基本組成、結構和節(jié)點等內容。

網(wǎng)頁的組成

網(wǎng)頁可以分為三大部分——HTML、CSS和JavaScript。如果把網(wǎng)頁比作一個人的話，HTML相當于骨架，JavaScript相當于肌肉，CSS相當于皮膚，三者結合起來才能形成一個完善的網(wǎng)頁。下面我們分別來介紹一下這三部分的功能。

1. HTML

HTML是用來描述網(wǎng)頁的一種語言，其全稱叫作Hyper Text Markup Language，即超文本標記語言。網(wǎng)頁包括文字、按鈕、圖片和視頻等各種復雜的元素，其基礎架構就是HTML。不同類型的文字通過不同類型的標簽來表示，如圖片用img標簽表示，視頻用video標簽表示，段落用p標簽表示，它們之間的布局又常通過布局標簽div嵌套組合而成，各種標簽通過不同的排列和嵌套才形成了網(wǎng)頁的框架。

在Chrome瀏覽器中打開百度，右擊并選擇“檢查”項（或按F12鍵），打開開發(fā)者模式，這時在Elements選項卡中即可看到網(wǎng)頁的源代碼，如圖2-9所示。

圖2-9 源代碼

這就是HTML，整個網(wǎng)頁就是由各種標簽嵌套組合而成的。這些標簽定義的節(jié)點元素相互嵌套和組合形成了復雜的層次關系，就形成了網(wǎng)頁的架構。

2.CSS

HTML定義了網(wǎng)頁的結構，但是只有HTML頁面的布局并不美觀，可能只是簡單的節(jié)點元素的排列，為了讓網(wǎng)頁看起來更好看一些，這里借助了CSS。

CSS，全稱叫作Cascading Style Sheets，即層疊樣式表。“層疊”是指當在HTML中引用了數(shù)個樣式文件，并且樣式發(fā)生沖突時，瀏覽器能依據(jù)層疊順序處理。“樣式”指網(wǎng)頁中文字大小、顏色、元素間距、排列等格式。

CSS是目前唯一的網(wǎng)頁頁面排版樣式標準，有了它的幫助，頁面才會變得更為美觀。

圖2-9的右側即為CSS

就是一個CSS樣式。大括號前面是一個CSS選擇器，此選擇器的意思是首先選中id為head_wrapper且class為s-ps-islite的節(jié)點，然后再選中其內部的class為s-p-top的節(jié)點。大括號內部寫的就是一條條樣式規(guī)則，例如position指定了這個元素的布局方式為絕對布局，bottom指定元素的下邊距為40像素，width指定了寬度為100%占滿父元素，height則指定了元素的高度。也就是說，我們將位置、寬度、高度等樣式配置統(tǒng)一寫成這樣的形式，然后用大括號括起來，接著在開頭再加上CSS選擇器，這就代表這個樣式對CSS選擇器選中的元素生效，元素就會根據(jù)此樣式來展示了。

在網(wǎng)頁中，一般會統(tǒng)一定義整個網(wǎng)頁的樣式規(guī)則，并寫入CSS文件中（其后綴為css）。在HTML中，只需要用link標簽即可引入寫好的CSS文件，這樣整個頁面就會變得美觀、優(yōu)雅。

3. JavaScript

JavaScript，簡稱JS，是一種腳本語言。HTML和CSS配合使用，提供給用戶的只是一種靜態(tài)信息，缺乏交互性。我們在網(wǎng)頁里可能會看到一些交互和動畫效果，如下載進度條、提示框、輪播圖等，這通常就是JavaScript的功勞。它的出現(xiàn)使得用戶與信息之間不只是一種瀏覽與顯示的關系，而是實現(xiàn)了一種實時、動態(tài)、交互的頁面功能。

JavaScript通常也是以單獨的文件形式加載的，后綴為js，在HTML中通過script標簽即可引入，例如：

<script src="jquery-2.1.0.js"></script>

綜上所述，HTML定義了網(wǎng)頁的內容和結構，CSS描述了網(wǎng)頁的布局，JavaScript定義了網(wǎng)頁的行為。

網(wǎng)頁的結構

我們首先用例子來感受一下HTML的基本結構。新建一個文本文件，名稱可以自取，后綴為html，內容如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>This is a Demo</title>
    </head>
    <body>
        <div id="container">
            <div class="wrapper">
                <h2 class="title">Hello World</h2>
                <p class="text">Hello, this is a paragraph.</p>
            </div>
        </div>
    </body>
</html>

這就是一個最簡單的HTML實例。開頭用DOCTYPE定義了文檔類型，其次最外層是html標簽，最后還有對應的結束標簽來表示閉合，其內部是head標簽和body標簽，分別代表網(wǎng)頁頭和網(wǎng)頁體，它們也需要結束標簽。head標簽內定義了一些頁面的配置和引用，如：

<meta charset="UTF-8">

它指定了網(wǎng)頁的編碼為UTF-8。

title標簽則定義了網(wǎng)頁的標題，會顯示在網(wǎng)頁的選項卡中，不會顯示在正文中。body標簽內則是在網(wǎng)頁正文中顯示的內容。div標簽定義了網(wǎng)頁中的區(qū)塊，它的id是container，這是一個非常常用的屬性，且id的內容在網(wǎng)頁中是唯一的，我們可以通過它來獲取這個區(qū)塊。然后在此區(qū)塊內又有一個div標簽，它的class為wrapper，這也是一個非常常用的屬性，經(jīng)常與CSS配合使用來設定樣式。然后此區(qū)塊內部又有一個h2標簽，這代表一個二級標題。另外，還有一個p標簽，這代表一個段落。在這兩者中直接寫入相應的內容即可在網(wǎng)頁中呈現(xiàn)出來，它們也有各自的class屬性。

將代碼保存后，在瀏覽器中打開該文件，可以看到如圖2-10所示的內容。

圖2-10 運行結果

可以看到，在選項卡上顯示了This is a Demo字樣，這是我們在head中的title里定義的文字。而網(wǎng)頁正文是body標簽內部定義的各個元素生成的，可以看到這里顯示了二級標題和段落。

這個實例便是網(wǎng)頁的一般結構。一個網(wǎng)頁的標準形式是html標簽內嵌套head和body標簽，head內定義網(wǎng)頁的配置和引用，body內定義網(wǎng)頁的正文。

節(jié)點樹及節(jié)點間的關系

在HTML中，所有標簽定義的內容都是節(jié)點，它們構成了一個HTML DOM樹。

我們先看下什么是DOM，DOM是W3C（萬維網(wǎng)聯(lián)盟）的標準，其英文全稱Document Object Model，即文檔對象模型。它定義了訪問HTML和XML文檔的標準：

W3C文檔對象模型（DOM）是中立于平臺和語言的接口，它允許程序和腳本動態(tài)地訪問和更新文檔的內容、結構和樣式。

W3C DOM標準被分為3個不同的部分。

l 核心DOM：針對任何結構化文檔的標準模型。

l XML DOM：針對XML文檔的標準模型。

l HTML DOM：針對HTML文檔的標準模型。

根據(jù)W3C的HTML DOM標準，HTML文檔中的所有內容都是節(jié)點。

l 整個文檔是一個文檔節(jié)點；

l 每個HTML元素是元素節(jié)點；

l HTML元素內的文本是文本節(jié)點；

l 每個HTML屬性是屬性節(jié)點；

注釋是注釋節(jié)點。

HTML DOM將HTML文檔視作樹結構，這種結構被稱為節(jié)點樹，如圖2-11所示。

圖2-11 節(jié)點樹

通過HTML DOM，樹中的所有節(jié)點均可通過JavaScript訪問，所有HTML節(jié)點元素均可被修改，也可以被創(chuàng)建或刪除。

節(jié)點樹中的節(jié)點彼此擁有層級關系。我們常用父（parent）、子（child）和兄弟（sibling）等術語描述這些關系。父節(jié)點擁有子節(jié)點，同級的子節(jié)點被稱為兄弟節(jié)點。

在節(jié)點樹中，頂端節(jié)點稱為根（root）。除了根節(jié)點之外，每個節(jié)點都有父節(jié)點，同時可擁有任意數(shù)量的子節(jié)點或兄弟節(jié)點。圖2-12展示了節(jié)點樹以及節(jié)點之間的關系。

圖2-12 節(jié)點樹及節(jié)點間的關系

本段參考W3SCHOOL，鏈接：http://www.w3school.com.cn/htmldom/dom_nodes.asp。

選擇器

我們知道網(wǎng)頁由一個個節(jié)點組成，CSS選擇器會根據(jù)不同的節(jié)點設置不同的樣式規(guī)則，那么怎樣來定位節(jié)點呢？

在CSS中，我們使用CSS選擇器來定位節(jié)點。例如，上例中div節(jié)點的id為container，那么就可以表示為#container，其中#開頭代表選擇id，其后緊跟id的名稱。另外，如果我們想選擇class為wrapper的節(jié)點，便可以使用.wrapper，這里以點（.）開頭代表選擇class，其后緊跟class的名稱。另外，還有一種選擇方式，那就是根據(jù)標簽名篩選，例如想選擇二級標題，直接用h2即可。這是最常用的3種表示，分別是根據(jù)id、class、標簽名篩選，請牢記它們的寫法。

另外，CSS選擇器還支持嵌套選擇，各個選擇器之間加上空格分隔開便可以代表嵌套關系，如#container .wrapper p則代表先選擇id為container的節(jié)點，然后選中其內部的class為wrapper的節(jié)點，然后再進一步選中其內部的p節(jié)點。另外，如果不加空格，則代表并列關系，如div#container .wrapper p.text代表先選擇id為container的div節(jié)點，然后選中其內部的class為wrapper的節(jié)點，再進一步選中其內部的class為text的p節(jié)點。這就是CSS選擇器，其篩選功能還是非常強大的。

另外，CSS選擇器還有一些其他語法規(guī)則，具體如表2-4所示。

表2-4 CSS選擇器的其他語法規(guī)則

另外，還有一種比較常用的選擇器是XPath，這種選擇方式后面會詳細介紹。

本節(jié)介紹了網(wǎng)頁的基本結構和節(jié)點間的關系，了解了這些內容，我們才有更加清晰的思路去解析和提取網(wǎng)頁內容。

S Code 的常用快捷鍵和插件

一、vs code 的常用快捷鍵

1、注釋：

a) 單行注釋：[ctrl+k,ctrl+c] 或 ctrl+/

b) 取消單行注釋：[ctrl+k,ctrl+u] (按下ctrl不放，再按k + u)

c) 多行注釋：[alt+shift+A]

d) 多行注釋：/**

2、移動行：alt+up/down

3、顯示/隱藏左側目錄欄 ctrl + b

4、復制當前行：shift + alt +up/down

5、刪除當前行：shift + ctrl + k

6、控制臺終端顯示與隱藏：ctrl + ~

7、查找文件/安裝vs code 插件地址：ctrl + p

8、代碼格式化：shift + alt +f

9、新建一個窗口 : ctrl + shift + n

10、行增加縮進: ctrl + [

11、行減少縮進: ctrl + ]

12、裁剪尾隨空格(去掉一行的末尾那些沒用的空格) : ctrl + shift + x

13、字體放大/縮小: ctrl + ( + 或 - )

14、拆分編輯器 : ctrl + 1/2/3

15、切換窗口 : ctrl + shift + left/right

16、關閉編輯器窗口 : ctrl + w

17、關閉所有窗口 : ctrl + k + w

18、切換全屏 : F11

19、自動換行 : alt + z

20、顯示git : ctrl + shift + g

21、全局查找文件：ctrl + shift + f

22、顯示相關插件的命令(如：git log)：ctrl + shift + p

23、選中文字：shift + left / right / up / down

24、折疊代碼： ctrl + k + 0-9 (0是完全折疊)

25、展開代碼： ctrl + k + j (完全展開代碼)

26、刪除行 ： ctrl + shift + k

27、快速切換主題：ctrl + k / ctrl + t

28、快速回到頂部 ： ctrl + home

29、快速回到底部 : ctrl + end

30、格式化選定代碼 ：ctrl + k / ctrl +f

31、選中代碼： shift + 鼠標左鍵

32、多行同時添加內容（光標）：ctrl + alt + up/down

33、全局替換：ctrl + shift + h

34、當前文件替換：ctrl + h

35、打開最近打開的文件：ctrl + r

36、打開新的命令窗：ctrl + shift + c

二、vs code 的常用插件

1、Auto Rename Tag 修改html標簽，自動幫你完成尾部閉合標簽的同步修改，和webstorm一樣。

2、Auto Close Tag 自動閉合HTML標簽

4、Beautiful 格式化代碼的工具

5、Dash Dash是MacOS的API文檔瀏覽器和代碼段管理器

6、Ejs Snippets ejs 代碼提示

7、ESLint 檢查javascript語法錯誤與提示

8、File Navigator 快速查找文件

9、Git History(git log) 查看git log

10、Gulp Snippets 寫gulp時用到，gulp語法提示。

11、HTML CSS Support 在HTML標簽上寫class智能提示當前項目所支持的樣式

12、HTML Snippets 超級好用且初級的H5代碼片段以及提示

13、Debug for Chrome 讓vs code映射chrome的debug功能，靜態(tài)頁面都可以用vscode來打斷點調試、配飾稍微復雜一點

14、Document this Js的注釋模板

15、jQuery Code Snippets jquery提示工具

16、Html2jade html模板轉pug模板

17、JS-CSS-HTML Formatter 格式化

18、Npm intellisense require 時的包提示工具

19、Open in browser 打開默認瀏覽器

20、One Dark Theme 一個vs code的主題

21、Path Intellisense 自動路徑補全、默認不帶這個功能

22、Project Manager 多個項目之間快速切換的工具

23、Pug(Jade) snippets pug語法提示

24、React Components 根據(jù)文件名創(chuàng)建反應組件代碼。

25、React Native Tools reactNative工具類為React Native項目提供了開發(fā)環(huán)境。

26、Stylelint css/sass代碼審查

27、Typings auto installer 安裝vscode 的代碼提示依賴庫，基于typtings的

28、View In Browser 默認瀏覽器查看HTML文件（快捷鍵Ctrl+F1可以修改）

29、Vscode-icons 讓vscode資源目錄加上圖標、必備

30、VueHelper Vue2代碼段（包括Vue2 api、vue-router2、vuex2）

31、Vue 2 Snippets vue必備vue代碼提示

32、Vue-color vue語法高亮主題

33、Auto-Open Markdown Preview markdown文件自動開啟預覽

34、EverMonkey 印象筆記

35、atom one dark atom的一個高亮主題(個人推薦)

三、常用的電腦快捷鍵

1、ctrl + shift + delete 快速清除瀏覽器緩存

2、ctrl + alt + delete 快速進入任務管理器頁面

3、window + L 快速鎖定電腦

4、window + d 所有窗口最小化

5、 window + e 打開我的資源管理器(我的電腦)

6、 window + f 快速打開搜索窗口

7、 alt + tab 快速查看打開的應用與窗口

數(shù)字程序代碼

TML（HyperText Markup Language）是一種用于創(chuàng)建網(wǎng)頁的標記語言。它由一系列的標簽組成，這些標簽用于描述網(wǎng)頁的結構和內容。HTML標簽通常由尖括號包圍，例如<tag>。

HTML標簽可以分為兩類：塊級元素和內聯(lián)元素。塊級元素用于組織網(wǎng)頁的結構，例如段落、標題、列表等。內聯(lián)元素用于標記文本中的特定部分，例如鏈接、強調文本等。

HTML標簽可以包含屬性，屬性提供了有關標簽的額外信息。例如，<a>標簽用于創(chuàng)建鏈接，可以使用href屬性指定鏈接的目標URL。

除了標簽和屬性，HTML還支持一些特殊字符實體，用于表示特殊字符，例如小于號（<）、大于號（>）等。

HTML可以與CSS（層疊樣式表）和JavaScript一起使用，以增強網(wǎng)頁的外觀和功能。CSS用于控制網(wǎng)頁的樣式，例如顏色、字體、布局等。JavaScript用于實現(xiàn)交互性和動態(tài)效果，例如表單驗證、動畫等。

通過使用HTML，開發(fā)人員可以創(chuàng)建具有結構良好、易于理解和導航的網(wǎng)頁。它是構建互聯(lián)網(wǎng)的基礎之一，被廣泛應用于網(wǎng)站開發(fā)和內容管理系統(tǒng)。

HTML的語法由標簽、屬性和內容組成。下面是HTML的基本語法規(guī)則：

標簽：HTML標簽用于定義網(wǎng)頁的結構和內容。標簽通常由尖括號包圍，例如<tag>。標簽可以是成對出現(xiàn)的，其中包含一個開標簽和一個閉標簽，例如<tag>content</tag>。也可以是自閉合標簽，即只有一個標簽，沒有內容，例如<tag />。
屬性：HTML標簽可以包含屬性，屬性提供了有關標簽的額外信息。屬性通常以鍵值對的形式出現(xiàn)，例如<tag attribute="value">。屬性的值可以是字符串或布爾值。常見的屬性包括class、id、src、href等。
內容：HTML標簽可以包含文本內容或其他標簽。文本內容直接放置在標簽的開閉標簽之間，例如<p>這是一個段落。</p>。標簽可以嵌套在其他標簽中，形成標簽的層次結構。
注釋：HTML注釋用于在代碼中添加注釋，不會在網(wǎng)頁中顯示。注釋以結尾，例如。

下面是一個簡單的HTML示例：

<!DOCTYPE html>
<html>
<head>
  <title>我的網(wǎng)頁</title>
</head>
<body>
  <h1>歡迎來到我的網(wǎng)頁</h1>
  <p>這是一個段落。</p>
  <a href="https://www.example.com">點擊這里</a>訪問示例網(wǎng)站。
</body>
</html>

在這個示例中，<!DOCTYPE html>聲明了文檔類型為HTML5。<html>標簽是HTML文檔的根元素。<head>標簽用于定義文檔的頭部信息，例如標題和樣式表。<title>標簽定義了網(wǎng)頁的標題，將顯示在瀏覽器的標題欄中。<body>標簽用于定義文檔的主體內容。<h1>標簽定義了一個一級標題，<p>標簽定義了一個段落，<a>標簽定義了一個鏈接。

在線咨詢

上一篇：快捷指令進階用法-一鍵打開全國各地健康碼、乘車碼
下一篇：css垂直居中方法，純干貨，總有一種你想不到

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。