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

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

展開全文

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

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

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

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

HTML

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

<!DOCTYPE html> 聲明為 HTML5 文檔
<html>..</html> 是網(wǎng)頁(yè)的根元素
<head>..</head> 元素包含了文檔的元（meta）數(shù)據(jù)，如 <meta charset="utf-8"> 定義網(wǎng)頁(yè)編碼格式為 utf-8。
<title>..<title> 元素描述了文檔的標(biāo)題
<body>..</body> 表示用戶可見的內(nèi)容
<div>..</div> 表示框架
<p>..</p> 表示段落
<ul>..</ul> 定義無(wú)序列表
<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)頁(yè)結(jié)構(gòu)</p>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</div>
</body>
</html>

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

圖1：HTML網(wǎng)頁(yè)結(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)頁(yè)結(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 屬性來(lái)書寫 CSS 代碼。注意，每一個(gè) HTML 元素，都有 style，class，id，name，title 屬性。

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

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

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

JavaScript

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

簡(jiǎ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í)間

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

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

轉(zhuǎn)藏 分享

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

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

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

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