- Python網(wǎng)絡爬蟲入門到實戰(zhàn)
- 楊涵文 周培源 陳姍姍
- 3055字
- 2024-03-04 17:25:53
1.3 HTML基礎
HTML作為網(wǎng)頁中最基礎的內容，大多數(shù)爬蟲書籍忽略了網(wǎng)頁基本知識的講解，這也有可能是相關作者默認讀者已經(jīng)掌握了這些知識。然而從筆者所接觸的大部分讀者來看，并沒有系統(tǒng)學習網(wǎng)站的基本知識，就直接開始學習爬蟲了，從而導致學習過程比較辛苦。
HTML、CSS、JS為網(wǎng)站搭建的三件套，下面開始學習HTML架構。
1.3.1 基本架構
正如開始創(chuàng)建一個HTML一樣，這是一個最基本的HTML模板，如下所示。
我們來分析一下這個架構：
1）<!DOCTYPE html>：文檔類型，這一行是必須寫的聲明。
2）<html></html>:<html>元素，其包含一個網(wǎng)頁頁面的所有元素。
3）<head></head>:<head>元素，相當于頁面內容的一個容器。
4）＜meta charset=＂UTF-8＂＞：設置默認編碼方式為UTF-8，否則容易亂碼。
5）<title></title>：<title>元素，用于設置頁面的標題。
6）<body></body>:<body>元素，這里包含網(wǎng)頁的所有內容（如文本、圖像、視頻、音頻）。
補充：注釋快捷鍵為<Ctrl+/>。
1.3.2 標題和段落標簽
1.標題標簽
注意：n的取值范圍為1~6的整數(shù)。
作用：通常在網(wǎng)頁中表示標題，數(shù)值越大，標題越小，例如下面的內容。
將其添加在<body>與</body>標簽之間，如圖1-14所示。
單擊瀏覽器按鈕，運行結果如圖1-15所示。
?圖1-14 代碼界面
?圖1-15 運行結果
2.文本段落標簽
<p>元素用于包含文本段落。p標簽一般也放到body之間，比如下面的小段落。
完整的代碼如圖1-16所示（寫完記得保存，否則網(wǎng)頁不會更新，這是初學者常犯的錯誤）。
直接刷新網(wǎng)頁，瀏覽界面如圖1-17所示。
?圖1-16 代碼界面
?圖1-17 瀏覽界面
<p>標簽還有一些別的方法，比如：
1）注明版權。
2）使用空格符。
3）使用引號符。
運行或者刷新之前的頁面，運行結果如圖1-18所示。
?圖1-18 運行結果
1.3.3 文字標簽
如果想要設置字體樣式，就要用到＜font＞＜/front＞設置文字的樣式（外觀）。它的常用屬性如下。
1）color：設置顏色，用英語單詞表示，比如red、blue、green等。也可以傳入rgb，具體可以查看rgb表，比如rgb（0，250，125）。也可以傳入十六進制，比如#ff0000（紅色），#000000（黑色）等。
2）size：設置字體大小，取值范圍為1～7，如果超出了最大值，使用默認最大值。
以下是對上述方法的實踐。
代碼界面如圖1-19所示。
?圖1-19 代碼界面
保存后刷新頁面，即可看到運行結果，如圖1-20所示。
?圖1-20 運行結果
1.3.4 圖像標簽
圖像標簽：<img/>，它有以下幾個主要參數(shù)：
1）src設置圖片的路徑。
2）width設置圖片的寬度。
3）height設置圖片的高度。
4）alt設置圖片的替換文本，如果圖片資源加載不出來，可顯示文本。
5）title設置鼠標懸浮標題。
默認情況下，使用圖片默認寬高，比如＜img src=＂1.png＂/＞。
使用width和height，設置寬和高：＜img src=＂1.png＂width=＂300px＂height=＂300px＂/＞。
如果圖片加載不出來，替換文本：＜img src=＂1.png＂alt=＂努力奮斗＂//＞。
鼠標懸浮標題：＜img src=＂1.png＂title=＂奮斗＂width='200px'height='200px'/＞。
保存刷新（或者運行）瀏覽器，運行結果如圖1-21所示。
?圖1-21 運行結果
注意：路徑一定要讀取到圖片，與Python中的絕對路徑和相對路徑是相同的，下面兩點是需要讀者注意的。
1）如果圖片和HTML文件在同級目錄，可以直接讀取，如＜img src=＂pic.jpg＂/＞。
2）如果圖片文件夾img和HTML文件在同級目錄，則書寫格式為：＜img src=＂img/pic3.jpg＂/＞。
1.3.5 超鏈接標簽
如果想通過單擊跳轉到另一個網(wǎng)址，可以設置鏈接標簽，這里只需要使用＜a/＞標簽即可。它的屬性有href參數(shù)，在href中傳入的是鏈接。比如文字超鏈接：＜a href=＂https://cn.bing.com/＂＞我愛學習＜/a＞，標簽依然在body之間。還可以用href做彈出框，比如＜a href=＂javascript：void（0）＂onclick=＂alert（'你敢點我嗎？'）＂＞彈出框＜/a＞。
完整代碼如圖1-22所示。
?圖1-22 完整代碼
超鏈接標簽運行結果如圖1-23所示。
?圖1-23 超鏈接標簽運行結果
1.3.6 塊標簽
一般有以下這幾種分塊標簽，它們主要用于內容排版：
1）<p></p>：內容會自動換行，一般作為段落。
2）<div></div>：內容會自動換行，一般作為網(wǎng)頁不同區(qū)域劃分。
3）<span></span>：內容不會換行，同一行顯示，比如“登錄”和“注冊”按鈕。
來看一下這個例子，文件名為4.html。
運行結果如圖1-24所示。
?圖1-24 運行結果
1.3.7 列表標簽
列表標簽相信讀者是很熟悉的，比如隨便打開一個圖片網(wǎng)站，單擊鼠標右鍵，選擇菜單欄中的“檢查網(wǎng)頁”命令，如圖1-25所示。
?圖1-25 列表標簽
每張圖片都在一個<div></div>標簽中，所有div標簽又是同級的，它們有一個共同的父標簽，這樣的標簽叫作列表標簽。列表標簽常用的標簽有以下兩種：
1）有序列表：<ol></ol>表示有序標簽的父標簽。
2）無序列表：<ul></ul>表示無序列表的父標簽。
現(xiàn)在來創(chuàng)建一個文件名為6.html的文件。
如上使用的是無序列表，ul中type參數(shù)的屬性值為：square（表示方框）、circle（表示空心圓）、disc（表示實心圓）。無序列表運行結果如圖1-26所示。
?圖1-26 無序列表運行結果
下面創(chuàng)建一個名為7.html的文件，案例代碼如下。
有序列表運行結果如圖1-27所示。
?圖1-27 有序列表運行結果
1.3.8 音頻視頻標簽
音頻使用標簽<audio></audio>，視頻使用標簽<video></video>，它們的屬性如下：
1）src需要加載資源的路徑。
2）autoplay自動播放。
3）controls顯示進度控制條。
4）loop循環(huán)播放。
首先下載一個音頻和視頻，并放在與HTML文件同級的目錄下，下面創(chuàng)建一個名為5.html的文件，案例代碼如下。
運行結果如圖1-28所示，單擊播放按鈕即可播放（IE瀏覽器支持自動播放，其他瀏覽器需要手動點擊播放）。
?圖1-28 音頻和視頻標簽
1.3.9 表格標簽
表格標簽為<table></table>，它的內部基本屬性有如下幾個。
1）<tr></tr>子標簽：表示表格里面的行。
2）<td></td>子標簽：表示表格里面的列。
3）<caption></caption>：設置表格的標題。
4）Border：設置表格的邊框。
5）borderColor：設置邊框的顏色。
6）cellspaing：設置單元格的間隔。
7）width：設置表格的寬度。
8）height：設置表格的高度。
9）lign：設置文本內容的對齊方式（left：左對齊；right：右對齊；center：居中對齊）。
案例：制作一個學生信息表格，要求包含姓名、性別、學號（文件名：8.html），案例代碼如下。
運行結果如圖1-29所示。
?圖1-29 學生信息表格
1.3.10 表單標簽
表單標簽的作用是提交不同的數(shù)據(jù)到后臺服務器。在實際生活中，常常會遇到填寫問卷調查、賬號注冊等，需要錄入個人信息，這些都是表單。下面來學習如何制作簡單的表單標簽。表單標簽一般使用：<from></from>，表單提交屬性一般有以下兩種。
1）action：提交到服務器的地址。
2）method：提交采用的方式 如get或post。post相對比較安全。
<input/>一般叫作輸入標簽，它的內部可以傳入type參數(shù)。type表示輸入內容的類型，一般有以下的選項：
1）普通輸入項：type=＂text＂。
2）密碼輸入項：type=＂password＂。
3）單項輸入項：type=＂radio＂。
4）多項輸入項：type=＂checkbox＂。
5）文件輸入項：type=＂file＂。
6）郵箱輸入項：type=＂email＂。
7）重置按鈕：type=＂reset＂。
8）提交按鈕：type=＂submit＂。
9）普通按鈕：type=＂button＂。
下拉框一般使用＜select＞＜/select＞標簽，比如選擇城市、年份等信息。子標簽為＜option＞＜/option＞，它可以傳的值有name：名稱、value、selected=＂selected＂。名稱（name）和值（value）是自定義的。為了更好地理解表單標簽，可以通過實戰(zhàn)來學習一下，比如制作個人信息表單，如圖1-30所示，收集姓名、性別、愛好、郵箱、照片等信息，需要填寫個人登錄密碼，確保填寫為本人。
分析：可以將表單需要填寫的內容放在一個表格中。只需要在中間填寫需要的信息即可。例如下面的幾個例子：
?圖1-30 個人信息表單
1）填寫密碼。
2）填寫郵箱。
3）圖片上傳（圖片也是文件）。
上述例子幾乎只修改一下type的形式即可，完整文件以及其他類型的代碼見隨書資源中的9.html文件，讀者可以自行下載獲取。
1.3.11 框架標簽
我們也可以使用框架標簽<frameset></frameset>，將多個HTML合并到一起，它的屬性如下：
1）rows：按照行進行劃分，根據(jù)填寫的百分比進行劃分。
2）cols：按照列進行劃分，根據(jù)填寫的百分比進行劃分。
它的子標簽為<frame/>，用于顯示具體的頁面。案例：將前面案例中部分的HTML合并到一起。如果按照行劃分，則案例代碼如下所示。
按行劃分的運行結果如圖1-31所示。
?圖1-31 按行劃分的運行結果
如果按照列劃分，案例代碼如下所示。
按列劃分的運行結果如圖1-32所示。
?圖1-32 按列劃分的運行結果
同樣也可以混合起來使用，案例代碼如下所示。
混合使用的運行結果如圖1-33所示。
?圖1-33 混合使用的運行結果