如果想學(xué)會(huì)爬蟲(chóng)，熟悉HTML代碼是必須的，如果不會(huì)HTML代碼我們就沒(méi)有辦法分析頁(yè)面結(jié)構(gòu)，也就沒(méi)有辦法更好的做解析了。
1. html工作原理
• 原理
• html是hypertext markup lanaguage縮寫(xiě) 超文本標(biāo)記語(yǔ)言，是一種解釋性語(yǔ)言，不需要編譯，由瀏覽器解釋執(zhí)行
• html組成
– html 負(fù)責(zé)數(shù)據(jù)展示
– css 負(fù)責(zé)美化頁(yè)面
– js 頁(yè)面的動(dòng)態(tài)效果
2. 認(rèn)識(shí)標(biāo)簽
marquee標(biāo)簽的引入，學(xué)習(xí)標(biāo)簽應(yīng)該：
• 記住功能
• 標(biāo)簽寫(xiě)法
– 可分為：?jiǎn)螛?biāo)簽和對(duì)標(biāo)簽
<!--單標(biāo)簽 -->
<標(biāo)簽名 屬性1='屬性值' 屬性2="屬性值" 屬性3=屬性值>
<!--對(duì)標(biāo)簽 -->
<標(biāo)簽名 屬性1='屬性值' 屬性2="屬性值" 屬性3=屬性值>內(nèi)容
• 注意事項(xiàng)
– 標(biāo)簽不能創(chuàng)造
– 書(shū)寫(xiě)標(biāo)簽的時(shí)候應(yīng)該用英文半角
– 屬性值可以單引號(hào)、雙引號(hào)引起來(lái)，也可以不寫(xiě)引號(hào)，推薦使用單引號(hào)括起來(lái)
– 屬性必須寫(xiě)在開(kāi)始標(biāo)簽里
– 標(biāo)簽可以嵌套，一個(gè)標(biāo)簽要完全嵌套到另外一個(gè)標(biāo)簽里
3. 全局架構(gòu)標(biāo)簽(重點(diǎn))
<!doctype html> 文檔類(lèi)型，html表名是html5的文檔
<html> 根標(biāo)簽
<head> 頭部
<meta charset="UTF-8"> 告訴瀏覽器用utf-8編碼格式解釋文檔
<title>Document</title> 文檔標(biāo)題
</head>
<body>
</body>
</html>
3.1 title標(biāo)簽
<title>Document</title>
設(shè)置文檔標(biāo)題，顯示窗口的標(biāo)題欄
3.2 設(shè)置字符集
字符集是告訴瀏覽器用那種編碼格式解讀html文檔，注意html文檔本身有一個(gè)編碼格式，這兩個(gè)編碼格式必須一致，不一致就亂碼
3.3 body
(了解)內(nèi)容顯示區(qū)，有些常用屬性：
• topmargin 上外邊距
• leftmargin 左外邊距
• text 文字顏色
• bgcolor 背景顏色
• background 背景圖片，和bgcolor沖突，設(shè)置了背景圖片，背景顏色就是不顯示
3.4 全局屬性
每一個(gè)標(biāo)簽都有的屬性，常用的有id、class、name、style
4 html常用標(biāo)簽
• html文件顯示特點(diǎn)：多個(gè)空格、換行、tab鍵用一個(gè)空格代替;如果英文字符間沒(méi)有空格，會(huì)看成一個(gè)單詞，不會(huì)自動(dòng)折行
4.1 常用標(biāo)簽
• h1~h6 標(biāo)題，一般一個(gè)頁(yè)面只設(shè)置一個(gè)h1標(biāo)題
• hr (單標(biāo)簽) 水平分割線
– width 可以使用絕對(duì)值，300，不帶單位，也可以使用百分比 50%
– align 對(duì)齊方式：left center(默認(rèn)) right
• p 段落標(biāo)簽，有段前間距和段后間距
• br (單標(biāo)簽) 換行
• nobr (雙標(biāo)簽) 不換行，所修飾內(nèi)容無(wú)論多長(zhǎng)，不會(huì)自動(dòng)換行，顯示不下，會(huì)有滾動(dòng)條
• pre 保持原來(lái)的樣式，無(wú)論空格還是換行都會(huì)正常顯示
• b(strong) 加粗
• i(cite,em) 斜體
• u 下劃線
• sub/sup 下標(biāo)/上標(biāo)，看圈在那邊，在下邊就是下標(biāo)
• font (face/color/size) 字體
– face 字體名稱(chēng)，到window目錄下font子目錄下查看
– color 字體顏色
– size 值取1~7,7最大
• blockquote 引用，會(huì)從正常的文本中分離，留有左右邊距
4.2 注釋和實(shí)體引用
• 注釋
<!--我是注釋 -->
注釋的作用：
1 提高代碼的可讀性，主要給其他團(tuán)隊(duì)成員看的，方便維護(hù)
2 方便調(diào)試
• 實(shí)體引用
空格
< <
> >
& &
" "
' '
5. 列表
5.1 有序列表(ol/li)
• type: 數(shù)字，a ,A,I ,i
• start 開(kāi)始標(biāo)號(hào)，默認(rèn)從1開(kāi)始
5.2 無(wú)序列表(ul/li)
• type 項(xiàng)目符號(hào)：
– disc 默認(rèn) 實(shí)心圓圈
– square 實(shí)心方塊
– circle 空心圓圈
5.3 自定義列表(dl/dt/dd)
6. 超級(jí)連接(重點(diǎn))
• 超鏈接的寫(xiě)法
- 超鏈接的寫(xiě)法
<a >百度</a>
• url 統(tǒng)一資源定位符
https://baike.baidu.com：80/item/%E6%9D%A8%E5%B9%82/149851?fr=aladdin#4
第一部分： 協(xié)議 http https ftp news magnet(磁力鏈接)
第二部分：主機(jī)，服務(wù)器地址 可以是域名或ip地址
第三部分：冒號(hào)后面的數(shù)字，端口 http 80(默認(rèn)) https :443 ftp:21 mysql：3306
端口編號(hào)從0~65535 其中0~1023歸操作系統(tǒng)使用
第四部分：從端口后的斜線到?，中間這部分叫路徑，請(qǐng)求文件的路徑
第五部分：從?到#中間這部分，是請(qǐng)求參數(shù)，query string ;寫(xiě)法： 鍵=值&鍵2=值
第六部分：錨點(diǎn) 也就是同一個(gè)頁(yè)面內(nèi)的跳轉(zhuǎn)，必須用#開(kāi)頭
• href 所請(qǐng)求的url，注意url必須寫(xiě)協(xié)議
• title 鼠標(biāo)放到超鏈接上時(shí)顯示的提示
• target
– _blank 新窗口打開(kāi)
– _self 當(dāng)前窗口打開(kāi)，默認(rèn)
7. img標(biāo)簽(單標(biāo)簽)
img是單標(biāo)簽，
• 絕對(duì)路徑和相對(duì)路徑
本機(jī)絕對(duì)路徑：file:///C:/python/web/1/ym.jpg
網(wǎng)絡(luò)絕對(duì)路徑：https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=32ceb0ef04d79123f4ed9c26cc5d32e7/7c1ed21b0ef41bd55520081359da81cb38db3de2.jpg
網(wǎng)站絕對(duì)路徑(了解)： /代表網(wǎng)站根目錄
相對(duì)路徑：相對(duì)于html文檔所在目錄 ../上級(jí)目錄 ./當(dāng)前目錄 ./3/index.html ../1.html
• src 圖片來(lái)源，可以是相對(duì)路徑也可以是絕對(duì)路徑
• title 圖片提示文字
• alt 圖片不顯示的時(shí)候的提示文字
• border 圖片邊框大小，一般默認(rèn)為0
• width/height 一般只設(shè)置一個(gè)，另外一個(gè)等比例縮放
8. 表格
• table 表
– border 表格線
– cellspacing：?jiǎn)卧竦拈g距
– cellpadding：?jiǎn)卧竦絻?nèi)容距離
– align：水平對(duì)齊 left、center、right
– height可以不用設(shè)置，自動(dòng)撐開(kāi)
• tr 行
– align :水平對(duì)齊 left center right
– valign：垂直對(duì)齊 top middle bottom
– 注意：如果沒(méi)有給該表格設(shè)置高度，那么設(shè)置valign無(wú)效,在以后布局頁(yè)面的時(shí)候，一般不使用valign，只有一種情況使用到，就是圖片和文字并排排放的時(shí)候，需要設(shè)置圖片的valign為middle
• td 單元格
– colspan 跨列 向右合并
– rowspan 跨行 向下合并
– width/height
• th
– 就是表格的表頭，內(nèi)容會(huì)加粗，和td用法相同
• caption 表格標(biāo)題，跟隨表格移動(dòng)
<table border=1 width=100>
<tr align='left'>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
<tr align='left'>
<td>B</td>
<td>B</td>
<td>B</td>
</tr>
</table>
9. 表單(重要)
• 用途：收集用戶(hù)信息，提交給服務(wù)器
• 基本使用
– 不是所有的標(biāo)簽都可以提交，能夠向服務(wù)器提交信息的表單項(xiàng)，只有表單項(xiàng)：input、select、textarea才可以向服務(wù)器提交信息
– 表單項(xiàng)必須放到form標(biāo)簽中才可以提交信息
– action：提交地址，一般是服務(wù)器的頁(yè)面
– method：提交方式，最重要的兩種為get方式和post方式，默認(rèn)是get提交
get和post的區(qū)別：
1.get用于向服務(wù)器請(qǐng)求數(shù)據(jù)，post一般用于向服務(wù)器提交數(shù)據(jù)
2. get請(qǐng)求通過(guò)url傳遞數(shù)據(jù)，數(shù)據(jù)會(huì)暴露在瀏覽器地址欄里，不安全;
post請(qǐng)求數(shù)據(jù)在請(qǐng)求體中，不會(huì)在瀏覽器地址欄里出現(xiàn)，相對(duì)安全
3. get傳參，數(shù)據(jù)大小受url限制，一般幾k大小
post傳參理論上無(wú)限制
– enctype：用于文件上傳，值為：multipart/form-data，現(xiàn)在了解
• input框
– 公有屬性：type、name、value、readonly、disabled、size
• type 類(lèi)型：?jiǎn)涡形谋究?text)、密碼框(password)、復(fù)選框(checkbox)、單選框(radio)、文件上傳(file)、按鈕(button)、重置按鈕(reset)、提交(submit)
• name： 名稱(chēng)，要提交，必須設(shè)置name
• value 默認(rèn)值
• readonly 只讀
• disabled 不可用
• size
– 單行文本框
• type： text
• placeholder：占位符，一般用于提示用戶(hù)，當(dāng)用戶(hù)輸入時(shí)，會(huì)自動(dòng)消失
• maxlength： 最大字符數(shù)
<input type='text' value='重置' />
– 提交按鈕
• type：submit
• value：提交按鈕的標(biāo)題
<input type='submit' value='提交' />
– 重置按鈕
• 清空用戶(hù)輸入
• type：reset
<input type='reset' value='重置' />
– 密碼框
• type：password
<input type='password' name='password' />
– 單選框
一般用于多選一，name相同是一組，一組中只能選一個(gè)
• type：radio
• checked：是否選中
• value： 一般用0或1表示，必須設(shè)置，否則服務(wù)器無(wú)法區(qū)別選中是哪一個(gè)
<input type='radio' name='ball1' checked value ='basketball'/> 籃球
– 復(fù)選框
一般name值相同
• type：checkbox
• value：必須設(shè)置
• checked: 是否選中
<input type='checkbox' name='ball1' checked/> 籃球
<input type='checkbox' name='ball2' checked/> 足球
– 文件上傳
• type：file
<input type='file' name='upload' enctype=''/>
– 隱藏按鈕
一般用于提交無(wú)需用戶(hù)輸入的數(shù)據(jù)
• type：hidden
• name和value值必須設(shè)置
<input type='hidden' name='a' value='123'/>
– button 一般配合js代碼使用.
<button>按鈕</button>
• 下拉框(select)
– name 必須設(shè)置
– size：顯示的行數(shù)，如果設(shè)置這個(gè)屬性，下拉框會(huì)變成列表框
– multiple：是否可以選擇多行
– 下拉框選項(xiàng)(option)
• selected：是否選中
• value 需要設(shè)置，否則值就是option中間的文字
<select name=''>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
• 多行文本(textarea)
– cols：列數(shù)
– rows：行數(shù)
– 注意textarea標(biāo)簽的內(nèi)容不能有任何值，否則便會(huì)顯示
<textarea cols=10 rows=6> </textarea>
• label標(biāo)簽
– 配合radio、checkbox使用，方便用戶(hù)選中
<input type='radio' name='sex' value='男' checked id='man'> <label for='man'>男</label>
10. 開(kāi)發(fā)者工具的使用
當(dāng)然一個(gè)標(biāo)準(zhǔn)的網(wǎng)頁(yè)中CSS和JavaScript也是必不可少的。我們?nèi)绾畏治鲆粋€(gè)網(wǎng)頁(yè)呢?以chrome為例
我們?cè)L問(wèn)：https://movie.douban.com/
每一個(gè)頁(yè)面的元素定位都是按照如下的步驟完成的。
下面我們?cè)賮?lái)看看Network的使用。
此時(shí)的Network是空白的，我們需要再次刷新一下頁(yè)面。
接下來(lái)查看請(qǐng)求和相應(yīng)內(nèi)容
通過(guò)這些的查看可以設(shè)置爬蟲(chóng)的請(qǐng)求頭等信息。
京公網(wǎng)安備 11010802030320號(hào)