整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中文網(html.cn)</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>解析
|
HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。
HTML 標簽是由尖括號包圍的關鍵詞，比如 <html>
HTML 標簽通常是成對出現的，比如 <b> 和 </b>
標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽
開始和結束標簽也被稱為開放標簽和閉合標簽
<標簽>內容</標簽>
“HTML 標簽” 和 “HTML 元素” 通常都是描述同樣的意思.
但是嚴格來講, 一個 HTML 元素包含了開始標簽與結束標簽，如下實例:
HTML 元素:
<p>這是一個段落。</p>
頭部元素包含關于文檔的概要信息，也稱為元信息（meta-information）。Meta 意為“關于某方面的信息”。
可以這么說，元數據（meta-data）是關于數據的信息，而元信息是關于信息的信息。
<head> 元素包含了所有的頭部標簽元素。在 元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。
可以添加在頭部區域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
<title> 標簽定義了不同文檔的標題。
<title> 在 HTML/XHTML 文檔中是必須的。
<title> 元素：
1.定義了瀏覽器工具欄的標題
2.當網頁添加到收藏夾時，顯示在收藏夾中的標題
3.顯示在搜索引擎結果頁面的標題
<base> 標簽描述了基本的鏈接地址/鏈接目標，該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:
|
<link> 標簽定義了文檔與外部資源之間的關系。
<link> 標簽通常用于鏈接到樣式表:
|
<style> 標簽定義了HTML文檔的樣式文件引用地址.
在<style> 元素中你也可以直接添加樣式來渲染 HTML 文檔:
|
meta標簽描述了一些基本的元數據。
<meta> 標簽提供了元數據.元數據也不顯示在頁面上，但會被瀏覽器解析。
META 元素通常用于指定網頁的描述，關鍵詞，文件的最后修改時間，作者，和其他元數據。
元數據可以使用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他Web服務。
<meta> 一般放置于 <head> 區域
<script>標簽用于加載腳本文件，如： JavaScript。
<script> 元素在以后的章節中會詳細描述。
HTML head 元素
標簽 | 描述 |
<head> | 定義了文檔的信息 |
<title> | 定義了文檔的標題 |
<base> | 定義了頁面鏈接標簽的默認鏈接地址 |
<link> | 定義了一個文檔和外部資源之間的關系 |
<meta> | 定義了HTML文檔中的元數據 |
<script> | 定義了客戶端的腳本文件 |
<style> | 定義了HTML文檔的樣式文件 |
開始標簽 | 元素內容 | 結束標簽 |
<p> | 這是一個段落 | </p> |
<a href="default.html"> | 這是一個鏈接 | </a> |
<br> | 換行 |
HTML注釋標簽<!--...-->用來在源文檔中插入注釋。注釋不會在瀏覽器中顯示。可使用注釋對您的代碼進行解釋，這樣做有助于您在以后的時間對代碼的編輯。特別是代碼量很大的情況下很有用
<script type="text/javascript">
<!--
function displayMsg()
{
alert("Hello World!")
}
//-->
</script><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML教程(html.cn)</title>
</head>
<body>
<b>加粗文本</b><br><br>
<i>斜體文本</i><br><br>
<code>電腦自動輸出</code><br><br>
這是 <sub> 下標</sub> 和 <sup> 上標</sup>
</body>
</html>HTML 文本格式化標簽
標簽 | 描述 |
<b> | 定義粗體文本 |
<em> | 定義著重文字 |
<i> | 定義斜體字 |
<small> | 定義小號字 |
<strong> | 定義加重語氣 |
<sub> | 定義下標字 |
<sup> | 定義上標字 |
<ins> | 定義插入字 |
<del> | 定義刪除字 |
HTML”計算機輸出”標簽
標簽 | 描述 |
<kbd> | 定義鍵盤碼 |
<samp> | 定義計算機代碼樣本 |
<var> | 定義變量 |
<pre> | 定義預格式文本 |
<code> | 定義計算機代碼 |
HTML 引文，引用，及標簽定義
標簽 | 描述 |
<abbr> | 定義縮寫 |
<address> | 定義地址 |
<bdo> | 定義文字方向 |
<blockquote> | 定義長的引用 |
<q> | 定義短的引用語 |
<cite> | 定義引用、引證 |
<dfn> | 定義一個定義項目 |
HTML 區塊元素
可以通過 <div> 和 <span> 將 HTML 元素組合起來
HTML塊級元素
塊級元素在瀏覽器顯示時，通常會以新行來開始和結束 - 例：<h1>, <p>, <ul>, <table>
HTML內聯元素
內聯元素在顯示時通常不會以新行開始 - 例：<b>, <td>, <a>, <img>
HTML <div> 元素
HTML <div> 元素是塊級元素，瀏覽器會在其前后顯示折行 - 如果與 CSS 一同使用，<div> 元素可用于對大的內容塊設置樣式屬性。 - <div> 元素的另一個常見的用途是文檔布局
HTML <span> 元素
HTML <span> 元素是內聯元素，可用作文本的容器 - 與 CSS 一同使用時，<span> 元素可用于為部分文本設置樣式屬性
HTML 實體
在 HTML 中，某些字符是預留的。
比如在 HTML 中不能使用小于號（<）和大于號（>）因為瀏覽器會誤認為它們是標簽，所以希望能正確地顯示預留字符，我們必須在 HTML 源代碼中使用字符實體（character entities）。
字符實體類似這樣&entity_name;
或
&#entity_number;
HTML 字符實體
不間斷空格
HTML 中的常用字符實體是不間斷空格( )
瀏覽器總是會截短 HTML 頁面中的空格，如果需要在頁面中增加空格的數量，需要使用 字符實體
有用的字符實體
顯示結果 | 描述 | 實體名稱 | 實體編碼 |
空格 | |||
< | 小于號 | < | < |
> | 大于號 | > | > |
& | 和號 | & | & |
“ | 引號 | " | " |
‘ | 撇號 | ' (IE不支持) | ' |
￠ | 分 | ￠ | ￠ |
￡ | 鎊 | ￡ | ￡ |
￥ | 元 | ￥ | ￥ |
€ | 歐元 | € | € |
§ | 小節 | § | § |
? | 版權 | ? | ? |
? | 注冊商標 | ? | ? |
? | 商標 | ? | ? |
× | 乘號 | × | × |
÷ | 除號 | ÷ | ÷ |
歡迎大家提議、分享、交流、共同學習進步
．HTML5是什么？
HTML5是HTML經過第五次重大修改，用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 標準的 HTML標準版本。
HTML標準自1999年12月發布的HTML4.01后，后繼的HTML5和其它標準被束之高閣，為了推動Web標準化運動的發展，一些公司聯合起來，成立了一個Web超文本應用技術工作組 （Web Hypertext Application Technology Working Group-WHATWG）的組織。WHATWG 致力于 Web 表單和應用程序，而W3C（World Wide Web Consortium，萬維網聯盟） 專注于XHTML2.0。在 2006 年，雙方決定進行合作，來創建一個新版本的 HTML。
HTML5草案的前身名為 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的 HTML 工作團隊。
HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍處于完善之中。然而，大部分現代瀏覽器已經具備了某些 HTML5 支持。
2012年12月17日，萬維網聯盟（W3C）正式宣布HTML5規范正式定稿。根據W3C的發言稿稱：“HTML5是開放的Web網絡平臺的奠基石。”
2013年5月6日， HTML 5.1正式草案公布。該規范定義了第五次重大版本，第一次要修訂萬維網的核心語言：超文本標記語言（HTML）。在這個版本中，新功能不斷推出，以幫助Web應用程序的作者，努力提高新元素互操作性。
2014年10月29日，萬維網聯盟宣布，經過近8年的艱辛努力，HTML5標準規范終于最終制定完成了，并公開發布。
2．HTML5的八大特點：
1）語義特性：HTML5賦予網頁更好的意義和結構。更加豐富的標簽將隨著對RDFa的，微數據與微格式等方面的支持，構建對程序、對用戶都更有價值的數據驅動的Web。
2）本地存儲特性：基于HTML5開發的網頁APP擁有更短的啟動時間，更快的聯網速度，這些全得益于HTML5 APP Cache，以及本地存儲功能。Indexed DB（html5本地存儲最重要的技術之一）和API說明文檔。
3）設備兼容特性：從Geolocation功能的API文檔公開以來，HTML5為網頁應用開發者們提供了更多功能上的優化選擇，帶來了更多體驗功能的優勢。HTML5提供了前所未有的數據與應用接入開放接口。使外部應用可以直接與瀏覽器內部的數據直接相連，例如視頻影音可直接與microphones及攝像頭相聯。
4）連接特性：更有效的連接工作效率，使得基于頁面的實時聊天，更快速的網頁游戲體驗，更優化的在線交流得到了實現。HTML5擁有更有效的服務器推送技術，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特性能夠幫助我們實現服務器將數據“推送”到客戶端的功能。
5）網頁多媒體特性：支持網頁端的Audio、Video等多媒體功能， 與網站自帶的APPS，攝像頭，影音功能相得益彰。
6）三維、圖形及特效特性：基于SVG、Canvas、WebGL及CSS3的3D功能，用戶會驚嘆于在瀏覽器中，所呈現的驚人視覺效果。
7）性能與集成特性：沒有用戶會永遠等待你的Loading——HTML5會通過XMLHttpRequest2等技術，幫助您的Web應用和網站在多樣化的環境中更快速的工作。
8）CSS3特性：在不犧牲性能和語義結構的前提下，CSS3中提供了更多的風格和更強的效果。此外，較之以前的Web排版，Web的開放字體格式（WOFF）也提供了更高的靈活性和控制性。
希望這點東西能夠給你一點幫助吧！
介概述：
使用特定引擎解析網頁里面得數據，根據規則提取入庫
常見的技術：
正則、xpath、pyquery、Beautiful Soup4
開源測試工具 http://tool.oschina.net/regex/
官網：https://docs.python.org/zh-cn/3/library/re.html
. | 匹配除 "\n" 之外的任何單個字符。要匹配包括 '\n' 在內的任何字符，請使用象 '[.\n]' 的模式。 |
\d | 匹配一個數字字符。等價于 [0-9]。 |
\D | 匹配一個非數字字符。等價于 [^0-9]。 |
\s | 匹配任何空白字符，包括空格、制表符、換頁符等等。等價于 [ \f\n\r\t\v]。 |
\S | 匹配任何非空白字符。等價于 [^ \f\n\r\t\v]。 |
\w | 匹配包括下劃線的任何單詞字符。等價于'[A-Za-z0-9_]'。 |
\W | 匹配任何非單詞字符。等價于 '[^A-Za-z0-9_]'。 |
1、match
用法： 提取關鍵參數 比如 token sign 后端返回得簽名信息 算法
import re
content = 'Hello 123 456 welcome to world'
print(len(content))
result = re.match('^Hello\s\d\d\d\s\d{3}\s\w{7}', content)
print(result)
print(result.group())
print(result.span())方法 | 說明 |
group(num=0) | 匹配的整個表達式的字符串，group() 可以一次輸入多個組號，在這種情況下它將返回一個包含那些組所對應值的元組 |
groups() | 返回一個包含所有小組字符串的元組，從 1 到 所含的小組號 |
1）匹配數字
import re
content = 'Hello 123456 welcome to world'
result = re.match('^Hello\s(\d+)\swelcome', content)
print(result)
print(result.group(1))
print(result.span())2）通用匹配
import re
content = 'Hello 123 456 welcome to world'
# 匹配所有數據
result = re.match('^Hello.*ng$', content)
# 匹配某某開始到某某結束
result = re.match('^Hello(.*)ng$', content).group(1)
print(result)
print(result.group())
print(result.span())3）貪婪和非貪婪
import re
content1 = 'http://xxxxx.com/yyds/baidu'
result2 = re.match('http.*com/(.*?)s', content1)
result2 = re.match('http.*?com/(.*)s', content1)
print('result1', result1.group())
print('result2', result2.group())4）修飾符
re.I | 使匹配對大小寫不敏感 |
re.L | 做本地化識別（locale-aware）匹配 |
re.M | 多行匹配，影響 ^ 和 $ |
re.S | 使 . 匹配包括換行在內的所有字符 |
re.U | 根據Unicode字符集解析字符。這個標志影響 \w, \W, \b, \B. |
re.X | 該標志通過給予你更靈活的格式以便你將正則表達式寫得更易于理解。 |
import re
# 這個修飾符的作用是匹配包括換行符在內的所有字符。
content = '''Hello 1234567 World_This
is a Regex Demo
'''
result = re.match('^He.*?(\d+).*?Demo$', content)
result = re.match('^He.*?(\d+).*?Demo$', content,re.S)
print(result.group())2、search
用法： 提取數據
re模塊中的search函數對整個字符串進行掃描并返回第一個匹配的結果。從左到右進行掃描
1）匹配數據
text = '人生苦短，我用pythons'
res1 = re.search('python',text)
data = 'result:{"name":"王五","age":"20"}'
res3 = re.search("{.*?}",data)2）正則提取案例
地址：https://finance.ifeng.com/c/8HzIujEasuH
url = 'https://finance.ifeng.com/c/8HzIujEasuH'
from utils.base import Spider
res = Spider().fetch(url)
import re
# 不帶符號
# text = re.findall('var allData = {(.*)};',res.text)
# 帶符號
# text = re.findall('var allData\s=\s(.*);',res.text)3）匹配中文
[\u4e00-\u9fa5]
s = '大家晚上好asdasdsad'
aa = re.findall('[\u4e00-\u9fa5]+',s)環境安裝
pip install pyquery利用它，我們可以直接解析 DOM 節點的結構，并通過 DOM 節點的一些屬性快速進行內容提取。
html = '''
<div id="cont">
<ul class="slist">
<li class="item-0">web開發</li>
<li class="item-1"><a href="link2.html">爬蟲開發</a></li>
<li class="item-0 active"><a href="link3.html"><span class="bold">數據分析</span></a></li>
<li class="item-1 active"><a href="link4.html">深度學習</a></li>
<li class="item-0"><a href="link5.html">機器學習</a></li>
</ul>
</div>
'''1、實例演示
from pyquery import PyQuery as pq
doc = pq(html)
print(doc('li'))2、css選擇器
doc = pq(html)
print(doc('#cont .slist li'))
print(type(doc('#cont .slist li')))3、提取內容
for item in doc('#cont .slist li').items():
print(item.text())4、子節點
from pyquery import PyQuery as pq
doc = pq(html)
items = doc('.slist')
print(type(items))
print(items) # 提取節點所有內容
lis = items.find('li') # 獲取符合條件的li標簽
print(type(lis))
print(lis)5、 屬性獲取
from pyquery import PyQuery as pq
doc = pq(html)
a = doc('.item-0.active a')
print(a, type(a))
print(a.attr('href'))6、遍歷提取
doc = pq(html)
a = doc('a')
for s in a.items():
print(s.attr('href')) # 屬性獲取
print(s.text()) # 值獲取插件下載：https://chrome.zzzmh.cn/index#/search
XPath 的選擇功能十分強大，它提供了非常簡潔明了的路徑選擇表達式。另外，它還提供了超過 100 個內建函數，用于字符串、數值、時間的匹配以及節點、序列的處理等。幾乎所有我們想要定位的節點，都可以用 XPath 來選擇。
官網：https://www.w3.org/TR/xpath/
安裝xpath解析庫：
pip install lxml表 3-1 XPath 常用規則
表 達 式 | 描 述 |
nodename | 選取此節點的所有子節點 |
/ | 從當前節點選取直接子節點 |
// | 從當前節點選取子孫節點 |
. | 選取當前節點 |
.. | 選取當前節點的父節點 |
@ | 選取屬性 |
案例演示
text = '''
<div>
<ul>
<li class="item-0"><a href="link1.html">first item</a></li>
<li class="item-1"><a href="link2.html">second item</a></li>
<li class="item-inactive"><a href="link3.html">third item</a></li>
<li class="item-1"><a href="link4.html">fourth item</a></li>
<li class="item-0"><a href="link5.html">fifth item</a>
</ul>
</div>
'''1、解析
from lxml import etree
html = etree.HTML(text)
result = etree.tostring(html)
print(result.decode('utf-8'))2、節點操作
我們一般會用 // 開頭的 XPath 規則來選取所有符合要求的節點。這里以前面的 HTML 文本為例，如果要選取所有節點，可以這樣實現：
這里使用 * 代表匹配所有節點，也就是整個 HTML 文本中的所有節點都會被獲取?？梢钥吹剑祷匦问绞且粋€列表，每個元素是 Element 類型，其后跟了節點的名稱，如 html、body、div、ul、li、a 等，所有節點都包含在列表中了。
result = html.xpath('//*')3、子節點
result = html.xpath('//li/a')
result = html.xpath('//li/a/text()') # 提取數據
result = html.xpath('//li/a/@href') # 屬性值4、指定節點獲取
result = html.xpath('//li[@class="item-0"]/a/text()')
print(result)
# ['first item', 'fifth item']5、匹配翻頁元素
# 最后一個
//div[@class="page"]/a[last()-1]
# 下一頁
//div[@class="page"]/a[text()="下一頁>"]/@href6、案例演示
? 說明：提取當前網站的首頁標題信息，要求使用xpath解析器
from lxml import etree
url1= 'https://www.icswb.com/channel-list-channel-162.html'
res4 = Spider().fetch(url=url1)
html = etree.HTML(res4.text)
li = html.xpath('//ul[@id="NewsListContainer"]/li')
for i in li:
href = i.xpath('./h3/a/text()')
print(href)簡單來說，BeautifulSoup 就是 Python 的一個 HTML 或 XML 的解析庫，我們可以用它來方便地從網頁中提取數據，官方的解釋如下：
BeautifulSoup 提供一些簡單的、Python 式的函數用來處理導航、搜索、修改分析樹等功能。它是一個工具箱，通過解析文檔為用戶提供需要抓取的數據，因為簡單，所以不需要多少代碼就可以寫出一個完整的應用程序。
BeautifulSoup 自動將輸入文檔轉換為 Unicode 編碼，輸出文檔轉換為 utf-8 編碼。你不需要考慮編碼方式，除非文檔沒有指定一個編碼方式，這時你僅僅需要說明一下原始編碼方式就可以了。
BeautifulSoup 已成為和 lxml、html5lib 一樣出色的 Python 解釋器，為用戶靈活地提供不同的解析策略或強勁的速度。
表 4-1 Beautiful Soup 支持的解析器
解析器 | 使用方法 | 優勢 | 劣勢 |
Python 標準庫 | BeautifulSoup(markup, "html.parser") | Python 的內置標準庫、執行速度適中 、文檔容錯能力強 | Python 2.7.3 or 3.2.2) 前的版本中文容錯能力差 |
LXML HTML 解析器 | BeautifulSoup(markup, "lxml") | 速度快、文檔容錯能力強 | 需要安裝 C 語言庫 |
LXML XML 解析器 | BeautifulSoup(markup, "xml") | 速度快、唯一支持 XML 的解析器 | 需要安裝 C 語言庫 |
html5lib | BeautifulSoup(markup, "html5lib") | 最好的容錯性、以瀏覽器的方式解析文檔、生成 HTML5 格式的文檔 | 速度慢、不依賴外部擴展 |
通過以上對比可以看出，lxml 解析器有解析 HTML 和 XML 的功能，而且速度快，容錯能力強，所以推薦
1、安裝
pip install beautifulsoup42、demo
from bs4 import BeautifulSoup
# 2個參數 html 文本 解析引擎
soup = BeautifulSoup('<p>Hello world</p>', 'lxml')
print(soup.p.string)3、節點選擇器
直接調用節點的名稱就可以選擇節點元素，再調用 string 屬性就可以得到節點內的文本了，這種選擇方式速度非常快。如果單個節點結構層次非常清晰，可以選用這種方式來解析。
下面再用一個例子詳細說明選擇元素的方法：
html = """
<html><head><title>The Dormouse's story</title></head>
<body>
<p class="title" name="dromouse"><b>The Dormouse's story</b></p>
<p class="story">Once upon a time there were three little sisters; and their names were
<a href="http://example.com/elsie" class="sister" id="link1"><!-- Elsie --></a>,
<a href="http://example.com/lacie" class="sister" id="link2">Lacie</a> and
<a href="http://example.com/tillie" class="sister" id="link3">Tillie</a>;
and they lived at the bottom of a well.</p>
<p class="story">...</p>
"""
from bs4 import BeautifulSoup
soup = BeautifulSoup(html, 'lxml')
print(soup.title)
print(type(soup.title))
print(soup.title.string)
print(soup.head)
print(soup.p)4、獲取屬性
每個節點可能有多個屬性，比如 id 和 class 等，選擇這個節點元素后，可以調用 attrs 獲取所有屬性：
print(soup.p.attrs)
print(soup.p.attrs['name'])5、嵌套選擇
html = """
<html><head><title>The Dormouse's story</title></head>
<body>
"""
from bs4 import BeautifulSoup
soup = BeautifulSoup(html, 'lxml')
print(soup.head.title)
print(type(soup.head.title))
print(soup.head.title.string)6、select（根據選擇器選取指定內容）
標簽選擇器（a），類選擇器（.dudu），id選擇器（#lala），組合選擇器（a, .dudu, #lala, .meme），層級選擇器（div.dudu#lala.meme.xixi 表示下面好多級和 div>p>a>.lala 只能是下面一級 ），偽類選擇器（不常用），屬性選擇器 （input[name=‘lala’]）
1）樣例
htmls = """
<html>
<head>
<title>The Dormouse's story</title>
</head>
<body>
<p class="story">
Once upon a time there were three little sisters; and their names were
<a href="http://example.com/elsie" class="sister" id="link1" title="xl">
<span>Elsie</span>
</a>
<a href="http://example.com/lacie" class="sister" id="link2">Lacie</a>
and
<a href="http://example.com/tillie" class="sister" id="link3" rel="noopener noreferrer ">Tillie</a>
and they lived at the bottom of a well.
</p>
<p class="story">...</p>
"""2）層級選擇器
soup.select('.story > a > span')[0].text3）id選擇器
print(soup.select('#link1'))4）提取屬性
soup.select('#link1')[0].attrs['href']5）屬性選擇器
print(soup.select("input[type='password']"))6）提取實際數據
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
