爬蟲之工作中的html知識
以下內容是根據我工作到目前為止的經驗將爬蟲需要了解的html知識做的一個整理,
所有內容來源與https://www.cnblogs.com/kukudelaomao/p/5729118.html,大多數內容偏向前端開發,
與實際的爬蟲工作關係不大,因此我將與爬蟲正相關的內容做了一個整合
一.html格式規範
一個HTML檔案是有自己固定的結構的。
<html>
<head>...</head>
<body>...</body>
</html>
程式碼講解:
1. <html></html>稱為根標籤,所有的網頁標籤都在<html></html>中。
2. <head> 標籤用於定義文件的頭部,它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標籤。
3. 在<body>和</body>標籤之間的內容是網頁的主要內容,如<h1>、<p>、<a>、<img>等網頁內容標籤,在這裡的標籤中的內容會在瀏覽器中顯示出來。
二.註釋符的使用
就像在Html的註釋一樣,在CSS中也有註釋語句:用/*註釋語句*/來標明(Html中使用<!--註釋語句-->)
三.換行標籤<br/>
<br/>標籤作用相當於word文件中的回車。
分割線標籤<hr/>
<hr/>標籤和<br/>標籤一樣也是一個空標籤,所以只有一個開始標籤,沒有結束標籤。
四.html特殊字元
空格:
五.無序列表標籤ul/li
ul-li是沒有前後順序的資訊列表。
舉例:
<ul>
<li>精彩少年</li>
<li>美麗突然出現</li>
<li>觸動心靈的旋律</li>
</ul>
六.div容器標籤
在網頁製作過程過中,可以把一些獨立的邏輯部分劃分出來,
放在一個<div>標籤中,這個<div>標籤的作用就相當於一個容器。
語法:
<div>…</div>
七.表格標籤table、tbody、tr、th、td
1、<table>…</table>:整個表格以<table>標記開始、</table>標記結束。
2、<tbody>…</tbody>:當表格內容非常多時,表格會下載一點顯示一點,但如果加上<tbody>標籤後,這個表格就要等表格內容全部下載完才會顯示出來。
3、<tr>…</tr>:表格的一行,所以有幾對tr 表格就有幾行。
4、<td>…</td>:表格的一個單元格,一行中包含幾對<td>...<td/>,說明一行中就有幾列。
5、<th>…</th>:表格的頭部的一個單元格,表格表頭。
八.
使用<a>標籤,連結到別一個頁面
使用<a>標籤可實現超連結。所有需要通過網路連線進入的頁面都需要這個標籤
例如:
<a href = "http://www.imooc.com">click here!</a>
九.<img>標籤,為網頁插入圖片
<img src="圖片地址" alt="下載失敗時的替換文字" title = "提示文字">
1、src:標識影象的位置;
2、alt:指定影象的描述性文字,當影象不可見時(下載不成功時),可看到該屬性指定的文字;
3、title:提供在影象可見時對影象的描述(滑鼠滑過圖片時顯示的文字);
十.表單標籤(與使用者進行互動)
表單是可以把瀏覽者輸入的資料傳送到伺服器端,這樣伺服器端程式就可以處理表單傳過來的資料。
語法:
<form method="傳送方式" action="伺服器檔案">
講解:
1.<form> :<form>標籤是成對出現的,以<form>開始,以</form>結束。
2.action :瀏覽者輸入的資料被傳送到後端進行儲存判斷響應。
3.method : 資料傳送的方式(get/post)。
十一.
<input>文字輸入框、密碼輸入框
<form>
<input type="text/password" name="名稱" value="文字" />
</form>
1、type:
當type="text"時,輸入框為文字輸入框;
當type="password"時, 輸入框為密碼輸入框。
2、name:為文字框命名
3、value:為文字輸入框設定預設值。(一般起到提示作用)
十二.單選框,複選框
語法:
<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
1、type:
當type="radio"時,控制元件為單選框
當type="checkbox"時,控制元件為複選框
2、value:提交資料到伺服器的值
3、name:為控制元件命名,以備後臺程式提取相應的值
4、checked:當設定checked="checked"時,該選項被預設選中
十三.下拉列表框,節省空間
語法:<option value="提交值">選項</option>
提交值是向伺服器提交的值,選項是顯示的值。
<form action="/save" method="post" >
<label>愛好:</label>
<select>
<option value="看書">看書</option>
<option value="旅遊" selected="selected">旅遊</option>
</select>
</form>
十四.提交按鈕
1,提交按鈕:當用戶需要提交表單資訊到伺服器時,需要用到提交按鈕。
語法:
<input type="submit" value="提交">
type:只有當type值設定為submit時,按鈕才有提交作用
value:按鈕上顯示的文字
十五.css的三種形式
1,內聯式css樣式
就是把css程式碼直接寫在現有的HTML標籤中,如下面程式碼:
<p style="color:red">這裡文字是紅色。</p>
css樣式程式碼要寫在style=""雙引號中,如果有多條css樣式程式碼設定可以寫在一起,中間用分號隔開。如下程式碼:
<p style="color:red;font-size:12px">這裡文字是紅色。</p>
2.嵌入式css樣式,
就是可以把css樣式程式碼寫在<style type="text/css"></style>標籤之間。如下面程式碼實現把三個<span>標籤中的文字設定為紅色:
<style type="text/css">
span{
color:red;
}
</style>
嵌入式css樣式必須寫在<style></style>之間,並且一般情況下嵌入式css樣式寫在<head></head>之間。
3.外部式css樣式
寫在單獨的一個檔案中
外部式css樣式(也可稱為外聯式)就是把css程式碼寫一個單獨的外部檔案中,這個css樣式檔案以“.css”為副檔名,在<head>內,使用<link>標籤將css樣式檔案連結到HTML檔案內,如下面程式碼:
<link href="base.css" rel="stylesheet" type="text/css" />
注意:
1、css樣式檔名稱以有意義的英文字母命名,如 main.css。
2、rel="stylesheet" type="text/css" 是固定寫法不可修改。
3、<link>標籤位置一般寫在<head>標籤之內。
the end