《python 爬蟲開發與實戰》html基礎詳解

ghostwritten發表於2020-09-08
Python爬蟲HTML

前端背景

網頁主要由三部分組成：結 構 （Structure）、表現 （Presentation）和行為 （Behavior）。。對應的標準 也分三方面：結構化標準語言主要包括XHTML和XML，表現標準語言主要包括CSS， 行為標準主要包括物件模型（如W3C DOM）、ECMAScript等。本節我們主要講解 HTML、CSS、JavaScript、Xpath和JSON等5個部分。

html

什麼是HTML標記語言？HTML不是程式語言，是一種表示網頁資訊的符號標記語 言。標記語言是一套標記，HTML使用標記來描述網頁。Web瀏覽器的作用是讀取 HTML文件，並以網頁的形式顯示出它們。瀏覽器不會顯示HTML標記，而是使用標記 來解釋頁面的內容。HTML語言的特點包括：

  • ·可以設定文字的格式，比如標題、字號、文字顏色、段落，等等。
  • ·可以建立列表。
  • ·可以插入影像和媒體。
  • ·可以建立表格。
  • ·超連結，可以使用滑鼠點選超連結來實現頁面之間的跳轉。

1.HTML的基本結構

下面從HTML的基本結構、文件設定標記、影像標記、表格和超連結五個方面講
解。
在這裡插入圖片描述

從谷歌首頁的原始碼中可以分析出HTML的基本結構：

·<html>內容</html>：HTML文件是由<html></html>包裹，這是HTML文件的 文件標記，也稱為HTML開始標記。這對標記分別位於網頁的最前端和最後端， <html>在最前端表示網頁的開始，</html>在最後端表示網頁的結束。
·<head>內容</head>：HTML檔案頭標記，也稱為HTML頭資訊開始標記。用來包 含檔案的基本資訊，比如網頁的標題、關鍵字，在<head></head>內可以放 <title></title>、<meta></meta>、<style></style>等標記。注意：在 <head></head>標記內的內容不會在瀏覽器中顯示。

·<title>內容</title>：HTML檔案標題標記。網頁的“主題”，顯示在瀏覽器的視窗的左上邊。
·<body>內容</body>：<body>...</body>是網頁的主體部分，在此標記之間 可以包含如<p></p>、<h1></h1>、<br>、<hr>等等標記，正是由這些內容組成了 我們所看見的網頁。
·<meta>內容</meta>：頁面的元資訊（meta-information）。提供有關頁面 的元資訊，比如針對搜尋引擎和更新頻度的描述和關鍵詞。注意meta標記必須放在 head元素裡面。

2.文件設定標記

文件設定標記分為格式標記和文字標記。下面通過一個標準的HTML文件對格式 標記進行講解，文件如下所示：

  <html>     
  <head>        
  <title>Python爬蟲開發與專案實戰</title>        
  <meta charset="UTF-8">     
  </head>    
   <body>     文件設定標記<br>     
   <p>這是段落。</p>     
   <p>這是段落。</p>     
   <p>這是段落。</p>     
   <hr>     
   <center>居中標記1</center>     
   <center>居中標記2</center>    
    <hr>     
    <pre>     [00:00](music)     [00:28]你我皆凡人，生在人世間；     [00:35]終日奔波苦，一刻不得閒；     [00:43]既然不是仙，難免有雜念；
     </pre>     
     <hr>     
     <p>     [00:00](music)     [00:28]你我皆凡人，生在人世間；     [00:35]終日奔波苦，一刻不得閒；     [00:43]既然不是仙，難免有雜念；     
     </p>     
     <hr>     
     <br>     
     <ul>     
     <li>Coffee</li>     
     <li>Milk</li>     
     </ul>     
     <ol type="A">     
     <li>Coffee</li>     
     <li>Milk</li>     
     </ol>        
     <dl>        
     <dt>計算機</dt>        
     <dd>用來計算的儀器 ... ...</dd>        
     <dt>顯示器</dt>        
     <dd>以視覺方式顯示資訊的裝置 ... ...</dd>        
     </dl>        
     <div >                
     <h3>這是標題</h3>                
     <p>這是段落。</p>     
     </div>     
     </body>    
     </html>

執行效果圖

在這裡插入圖片描述
格式標記包括：

·<br>：強制換行標記。讓後面的文字、圖片、表格等等，顯示在下一行。
·<p>：換段落標記。換段落，由於多個空格和回車在HTML中會被等效為一個空 格，所以HTML中要換段落就要用<p>，<p>段落中也可以包含<p>段落。例如： <p>This is a paragraph.</p>。
·<center>：居中對齊標記。讓段落或者是文字相對於父標記居中顯示。
·<pre>：預格式化標記。保留預先編排好的格式，常用來定義計算機原始碼。
和<p>進行一下對比，就可以理解。
·<li>：列表專案標記。每一個列表使用一個<li>標記，可用在有序列表 （<ol>）和無序列表（<ul>）中。
·<ul>：無序列表標記。<ul>宣告這個列表沒有序號。
·<ol>：有序列表標記。可以顯示特定的一些順序。有序列表的type屬性 值“1”表示阿拉伯數字1.2.3等等；預設type屬性值“A”表示大小字母A、B、C等 等；上面的程式使用屬性“a”，這表示小寫字母a、b、c等等；“Ⅰ”表示大寫羅 馬數字Ⅰ、Ⅱ、Ⅲ、Ⅳ等等；“ⅰ”表示小寫羅馬數字ⅰ、ⅱ、ⅲ、ⅳ等等。注 意：列表可以進行巢狀。
·<dl><dt><dd>：定義型列表。對列表條目進行簡短說明。
·<hr>：水平分割線標記。可以用作段落之間的分割線。
·<div>：分割槽顯示標記，也稱為層標記。常用來編排一大段的HTML段落，也可 以用於將表格式化，和<p>很相似，可以多層巢狀使用。

接下來通過一個HTML文件對文字標記進行講解，文件如下所示：

  <html>     
  <head>        
  <title>Python爬蟲開發與專案實戰</title>        
  <meta charset="UTF-8">     
  </head>     
  <body>     Hn標題標記---->>     
  <br>        
  <h1>Python爬蟲</h1>        
  <h2>Python爬蟲</h2>
    <h3>Python爬蟲</h3>        
    <h4>Python爬蟲</h4>        
    <h5>Python爬蟲</h5>        
    <h6>Python爬蟲</h6>     font標記---->>     
    <font size="1">Python爬蟲</font>     
    <font size="3">Python爬蟲</font>     
    <font size="7">Python爬蟲</font>     
    <font size="7" color="red" face="微軟雅黑">Python爬蟲</font>     
    <font size="7" color="red" face="宋體">Python爬蟲</font>     
    <font size="7" color="red" face="新細明體">Python爬蟲</font>     
    <br>     B標記加粗---->>     
    <b>Python爬蟲</b>     
    <br>     i標記斜體---->>     
    <i>Python爬蟲</i>     
    <br>     sub下標標記---->>     
    2<sub>2</sub>     
    <br>     sup上標標記---->>     
    2<sup>2</sup>     <br>     引用標記---->>     
    <cite>Python爬蟲</cite>     
    <br>     em標記表示強調，顯示為斜體---->>     
    <em>Python爬蟲</em>     
    <br>     strong標記表示強調，加粗顯示---->>     
    <strong>Python爬蟲</strong>     
    <br>     small標記，可以顯示小一號字型，可以巢狀使用---->>     
    <small>Python爬蟲</small>     
    <small><small>Python爬蟲</small></small>     
    <small><small><small>Python爬蟲</small></small></small>     
    <br>     big標記，顯示大一號的字型---->>     
    <big>Python爬蟲</big>
 <big><big>Python爬蟲</big></big>     
 <br>     u標記是顯示下劃線---->>     
 <big><big><big><u>Python爬蟲</u></big></big></big>     
 <br>     
 </body>     
 </html>
Python爬蟲開發與專案實戰 Hn標題標記---->>

Python爬蟲

Python爬蟲

Python爬蟲

Python爬蟲

Python爬蟲
Python爬蟲
font標記---->> Python爬蟲 Python爬蟲 Python爬蟲 Python爬蟲 Python爬蟲 Python爬蟲
B標記加粗---->> Python爬蟲
i標記斜體---->> Python爬蟲
sub下標標記---->> 2 2
sup上標標記---->> 2 2
引用標記---->> Python爬蟲
em標記表示強調，顯示為斜體---->> Python爬蟲
strong標記表示強調，加粗顯示---->> Python爬蟲
small標記，可以顯示小一號字型，可以巢狀使用---->> Python爬蟲 Python爬蟲 Python爬蟲
big標記，顯示大一號的字型---->> Python爬蟲 Python爬蟲
u標記是顯示下劃線---->> Python爬蟲

其中文字標記包括：

·<hn>：標題標記。共有6個級別，n的範圍為1～6，不同級別對應不同顯示大小 的標題，h1最大，h6最小。
·<font>：字型設定標記。用來設定字型的格式，一般有三個常用屬性： size（字型大小），<font size=“14px”>；color（顏色），<font color=“red”>；face（字型），<font face=“微軟雅黑”>。
·<b>：粗字型標記。
·<i>：斜字型標記。
·<sub>：文字下標字型標記。
·<sup>：文字上標字型標記。
·<tt>：印表機字型標記。
·<cite>：引用方式的字型，通常是斜體。
·<em>：表示強調，通常顯示為斜體字。
·<strong>：表示強調，通常顯示為粗體字。
·<small>：小型字型標記。
·<big>：大型字型標記。
·<u>：下劃線字型標記。

3.影像標記

<img>稱為影像標記，用來在網頁中顯示影像。使用方法為：<img src=“路
徑/檔名.圖片格式”width=“屬性值”height=“屬性值”border=“屬性 值”alt=“屬性值”>。<img>標記主要包括以下屬性：
·src屬性用來指定我們要載入的圖片的路徑、圖片的名稱以及圖片格式。
·width屬性用來指定圖片的寬度，單位為px、em、cm、mm。
·height屬性用來指定圖片的高度，單位為px、em、cm、mm。
·border屬性用來指定圖片的邊框寬度，單位為px、em、cm、mm。

·alt屬性有三個作用：

  • 1.當網頁上的圖片被載入完成後，滑鼠移動到上面去， 會顯示這個圖片指定的屬性文字；
  • 2.如果影像沒有下載或者載入失敗，會用文字來 代替影像顯示；
  • 3.搜尋引擎可以通過這個屬性的文字來抓取圖片。

我們可以在瀏覽器上訪問部落格園首頁，對部落格園首頁的圖片進行審查，就可以 看到的img標記的使用方法，如圖2-5所示。
在這裡插入圖片描述
注意：

<img>為單標記，不需要使用</img>閉合。在載入影像檔案的時 候，檔案的路徑、檔名或者檔案格式錯誤，將無法載入圖片。

表格

表格的基本結構包括<table>、<caption>、<tr>、<td>和<th>等標記。

標記的基本格式為 
<table屬性1=“屬性值1”屬性2=“屬性值 2”......>表格內容</table>

table標記有以下常見屬性：

  • width屬性：表示表格的寬度，它的值可以是畫素（px）也可以是父級元素的 百分比（%）。
  • height屬性：表示表格的高度，它的值可以是畫素（px）也可以是父級元素的 百分比（%）。
  • border屬性：表示表格外邊框的寬度。
  • align屬性用來表示表格的顯示位置。left居左顯示，center居中顯示， right居右顯示。
  • cellspacing屬性：單元格之間的間距，預設是2px，單位為畫素。
  • cellpadding屬性：單元格內容與單元格邊框的顯示距離，單位為畫素。
  • ·frame屬性：用來控制表格邊框最外層的四條線框。void（預設值）表示無邊框；above表示僅頂部有邊框；below表示僅有底部邊框；hsides表示僅有頂部邊框和底部邊框；lhs表示僅有左側邊框；rhs表示僅有右側邊框；vsides表示僅有左右 側邊框；border表示包含全部4個邊框。
  • ·rules屬性：用來控制是否顯示以及如何顯示單元格之間的分割線。屬性值none（預設值）表示無分割線；all表示包括所有分割線；rows表示僅有行分割線；clos表示僅有列分割線；groups表示僅在行組和列組之間有分割線。

<caption>標記用於在表格中使用標題。屬性的插入位置，直接位 於

屬性之後，表格行之前。 <caption>標記中align屬性可以取四個 值： 

top表示標題放在表格的上部；
bottom表示標題放在表格的下部；
left表示標 題放在表格的左部；
right表示標題放在表格的右部。

<tr>標記用來定義表格的行，對於每一個表格行，都是由一對…標 記表示，每一行標記內可以巢狀多個或者標記。標記中的常見屬 性包括：

  • ·bgcolor屬性用來設定背景顏色，格式為bgcolor=“顏色值”。

  • ·align屬性用來設定垂直方向對齊方式，格式為align=“值”。值為bottom
    時，表示靠頂端對齊；值為top時，表示靠底部對齊；值為middle時，表示居中對 齊。

  • ·valign屬性用來設定水平方向對齊方式，格式為valign=“值”。值為left
    時，表示靠左對齊；值為right時，表示靠右對齊；值為center時，表示居中對 齊。

<td>和<th>都是單元格的標記，其必須巢狀在標記內，成對出現。是 表頭標記，通常位於首行或者首列，中的文字預設會被加粗，而不會。 是資料標記，表示該單元格的具體資料。和兩者的標記屬性都是一樣 的，常用屬性如下：

·bgcolor設定單元格背景。
·align設定單元格對齊方式。
·valign設定單元格垂直對齊方式。
·width設定單元格寬度。
·height設定單元格高度。
·rowspan設定單元格所佔行數。
·colspan設定單元格所佔列數。

下面通過一個HTML文件來演示表格的使用，文件如下：

 <html>     
 <head>       
 <title>學生資訊表</title>        
 <meta charset="UTF-8">     
 </head>      
 <body>        
 <table width="960" align="center" border="1" rules="all" cellpadding="15">                
 <tr>                        
 <th>學號</th>                       
 <th>班級</th>                        
 <th>姓名</th>                        
 <th>年齡</th>
 <th>籍貫</th>                     
 </tr>                
  <tr align="center">                        
  <td>1500001</td>                        
  <td>(1)班</td>                        
   <td>張三</td>                        
   <td>16</td>                        
   <td>上海</td>                
   </tr>                
   <tr align="center">                        
   <td>1500011</td>                        
   <td>(2)班</td>                        
   <td>李四</td>                        
   <td>15</td>                        
   <td bgcolor="# ccc">浙江</td>                
   </tr>        
   </table>        
   <br/>        
   <table width="960" align="center" border="1" rules="all" cellpadding=        "15">                
   <tr bgcolor="# ccc">                        
   <th>學號</th>                        
   <th>班級</th>                        
   <th>姓名</th>                        
   <th>年齡</th>                        
   <th>籍貫</th>                
   </tr>                
   <tr align="center">                        
   <td>1500001</td>                        
   <td>(1)班</td>                        
   <td>張三</td>                        
   <td>16</td>                        
   <td bgcolor="red"><font color="white">上海</font></td>                
   </tr>                
   <tr align="center">                        
   <td>1500011</td>                        
   <td>(2)班</td>                        
   <td>李四</td>                        
   <td>15</td>
    <td>浙江</td>                
    </tr>        
    </table>
    </body>     
    </html>
學生資訊表
學號班級姓名年齡籍貫
1500001(1)班張三16上海
1500011(2)班李四15浙江

學號班級姓名年齡籍貫
1500001(1)班張三16上海
1500011(2)班李四15浙江

相關文章