網(wǎng)頁是怎樣構(gòu)成的

dbn9981 2022-12-06 發(fā)布于北京

展開全文

爬蟲程序之所以可以抓取數(shù)據(jù),，是因?yàn)榕老x能夠?qū)W(wǎng)頁進(jìn)行分析,，并在網(wǎng)頁中提取出想要的數(shù)據(jù),。在學(xué)習(xí) Python 爬蟲模塊前,，我們有必要先熟悉網(wǎng)頁的基本結(jié)構(gòu),，這是編寫爬蟲程序的必備知識(shí),。

如果您熟悉前端語言,，那么您可以輕松地掌握本節(jié)知識(shí)。

網(wǎng)頁一般由三部分組成,，分別是 HTML（超文本標(biāo)記語言）,、CSS（層疊樣式表）和 JavaScript（簡稱“JS”動(dòng)態(tài)腳本語言），它們?nèi)咴诰W(wǎng)頁中分別承擔(dān)著不同的任務(wù),。

HTML 負(fù)責(zé)定義網(wǎng)頁的內(nèi)容
CSS 負(fù)責(zé)描述網(wǎng)頁的布局
JavaScript 負(fù)責(zé)網(wǎng)頁的行為

HTML

HTML 是網(wǎng)頁的基本結(jié)構(gòu),，它相當(dāng)于人體的骨骼結(jié)構(gòu)。網(wǎng)頁中同時(shí)帶有“＜”,、“＞”符號(hào)的都屬于 HTML 標(biāo)簽,。常見的 HTML 標(biāo)簽如下所示：

<!DOCTYPE html> 聲明為 HTML5 文檔
<html>..</html> 是網(wǎng)頁的根元素
<head>..</head> 元素包含了文檔的元（meta）數(shù)據(jù)，如 <meta charset="utf-8"> 定義網(wǎng)頁編碼格式為 utf-8,。
<title>..<title> 元素描述了文檔的標(biāo)題
<body>..</body> 表示用戶可見的內(nèi)容
<div>..</div> 表示框架
<p>..</p> 表示段落
<ul>..</ul> 定義無序列表
<ol>..</ol>定義有序列表
<li>..</li>表示列表項(xiàng)
<img src="" alt="">表示圖片
<h1>..</h1>表示標(biāo)題
<a href="">..</a>表示超鏈接

編寫如下代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>編程幫</title>
</head>
<body>
<a href="www.biancheng.net">點(diǎn)擊訪問</a>
<h1>編程幫www.biancheng.net</h1>
<h2>Python爬蟲</h2>
<div>
<p>認(rèn)識(shí)網(wǎng)頁結(jié)構(gòu)</p>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</div>
</body>
</html>

運(yùn)行結(jié)果如下圖所示：

圖1：HTML網(wǎng)頁結(jié)構(gòu)

CSS

CSS 表示層疊樣式表,，其編寫方法有三種,，分別是行內(nèi)樣式、內(nèi)嵌樣式和外聯(lián)樣式,。CSS 代碼演示如下：

<!DOCTYPE html>
<html>
<head>
   <!-- 內(nèi)嵌樣式 -->
    <style type="text/css">
    
    body{
        background-color:yellow;
    }
    p{
        font-size: 30px;
        color: springgreen;
    }
    </style>
<meta charset="utf-8">
<title>編程幫</title>
</head>
<body>
<!-- h1標(biāo)簽使用了行內(nèi)樣式 -->
<h1 style="color: blue;">編程幫www.biancheng.net</h1>
<a href="www.biancheng.net">點(diǎn)擊訪問</a>
<h2>Python爬蟲</h2>
<div>
<p>認(rèn)識(shí)網(wǎng)頁結(jié)構(gòu)</p>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</div>
</body>
</html>

運(yùn)行結(jié)果如下圖所示：

圖2：CSS樣式表演示

如圖 2 所示內(nèi)嵌樣式通過 style 標(biāo)簽書寫樣式表：

＜style type="text/css"＞</style>

而行內(nèi)樣式則通過 HTML 元素的 style 屬性來書寫 CSS 代碼,。注意，每一個(gè) HTML 元素,，都有 style,，class，id,，name,，title 屬性。

外聯(lián)樣式表指的是將 CSS 代碼單獨(dú)保存為以 .css 結(jié)尾的文件,，并使用 <link> 引入到所需頁面：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

當(dāng)樣式需要被應(yīng)用到多個(gè)頁面的時(shí)候,，使用外聯(lián)樣式表是最佳的選擇。

JavaScript

JavaScript 負(fù)責(zé)描述網(wǎng)頁的行為,，比如,，交互的內(nèi)容和各種特效都可以使用 JavaScript 來實(shí)現(xiàn)。當(dāng)然可以通過其他方式實(shí)現(xiàn),，比如 jQuery,、還有一些前端框架( vue、React 等),，不過它們都是在“JS”的基礎(chǔ)上實(shí)現(xiàn)的,。

簡單示例：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        body{
            background-color: rgb(220, 226, 226);
        }
    </style>
<meta charset="utf-8">
<title>編程幫</title>
</head>
<body>
<h1 style="color: blue;">編程幫www.biancheng.net</h1>
<h2>Python爬蟲</h2>
<p>點(diǎn)擊下方按鈕獲取當(dāng)前時(shí)間</p>
<button onclick="DisplayDate()">點(diǎn)擊這里</button>
<p id="time" style="color: red;"></p>
<!-- script標(biāo)簽內(nèi)部編寫js代碼 -->
<script>
    function DisplayDate(){
        document.getElementById("time").innerHTML=Date()
    }
</script>
</div>
</body>
</html>

運(yùn)行結(jié)果如下：

圖3：JS獲取當(dāng)前時(shí)間

如果用人體來比喻網(wǎng)站結(jié)構(gòu)的話，那么 HTML 是人體的骨架,，它定義了人的嘴巴,、眼睛、耳朵長在什么位置,；CSS 描述了人體的外觀細(xì)節(jié),，比如嘴巴長什么樣子，眼睛是雙眼皮還是單眼,，皮膚是黑色的還是白色的等,；而 JavaScript 則表示人擁有的技能，例如唱歌,、打球,、游泳等。

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,，所有內(nèi)容均由用戶發(fā)布,，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購買等信息,，謹(jǐn)防詐騙,。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào),。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自： dbn9981 > 《我的學(xué)習(xí)》

舉報(bào)/認(rèn)領(lǐng)