整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
多朋友想學一下網頁制作，上網一看，只要涉及到網頁制作，都離不開HTML這個詞語，HTML是HyperText Markup Language的簡稱，想學習HTML語言，先得了解一些基本知識，今天這邊內容可以作為學習HTML的菜鳥教程第一課。
HTML是什么？
一般我們說HTML是指超文本標記語言，英文名稱為HyperText Markup Language，簡稱HTML，它是目前互聯網上應用最廣泛的語言。
如何查看HTML？
拿最常見的網頁為例，如果用大家熟悉的IE瀏覽器的話，直接在網頁上點右鍵，選擇“查看源”即可查看當前網頁的HTML源碼；如果是其他瀏覽器的話，多數情況下點擊右鍵，選擇“查看源碼”或者類似“查看網頁源代碼”這樣的選項即可查看。
當然也可以通過專業的網頁制作軟件以及各種文本編輯器來查看。
HTML有什么用？
HTML語言可以方便地將網絡上存儲于不同位置的文字、圖片、聲音、視頻等內容組織起來，方便用戶瀏覽。對于我們來說，HTML是學習網頁制作的基本功，熟練掌握HTML這項基本功，可以為以后的學習和工作打下良好的基礎。
HTML如何入門？
要學習任何編程語言，都不好好高騖遠，HTML的入門很簡單，但是也要遵循學習的基本步驟，選擇一本入門書籍，循序漸進地去學習每一張的內容。一邊學習，一邊查看網頁代碼對照來學，提升入門速度。
HTML案例
下面就是最基本的HTML案例，在這個案例中，用的是HTML5，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML菜鳥教程(runoob.com)</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>如何編輯HTML?
這個就很多了 ，比如最出名的Dreamweaver，當然如果熟練之后，可以選擇任意自己喜歡的編輯器，一些小的改動或者一小段代碼的話，也可以用各種常見的文本編輯器來處理，比如我們在wodows系統上常見的記事本，總之只要自己覺得方便就好。
總結
以上是學習HTML菜鳥教程的第一課，首先保持一個良好的心態來學習，有好的心態，知識方面只要循序漸進，學會就是水到渠成的事情了 。
TML 代碼約定
很多 Web 開發人員對 HTML 的代碼規范知之甚少。
在2000年至2010年，許多Web開發人員從 HTML 轉換到 XHTML。
使用 XHTML 開發人員逐漸養成了比較好的 HTML 編寫規范。
而針對于 HTML5 ，我們應該形成比較好的代碼規范，以下提供了幾種規范的建議。
使用正確的文檔類型
文檔類型聲明位于HTML文檔的第一行：
<!DOCTYPE html>
如果你想跟其他標簽一樣使用小寫，可以使用以下代碼：
<!doctype html>
使用小寫元素名
HTML5 元素名可以使用大寫和小寫字母。
推薦使用小寫字母：
混合了大小寫的風格是非常糟糕的。
開發人員通常使用小寫 (類似 XHTML)。
小寫風格看起來更加清爽。
小寫字母容易編寫。
不推薦:
<SECTION>
<p>這是一個段落。</p>
</SECTION>
非常糟糕:
<Section>
<p>這是一個段落。</p>
</SECTION>
推薦:
<section>
<p>這是一個段落。</p>
</section>
關閉所有 HTML 元素
在 HTML5 中, 你不一定要關閉所有元素 (例如 <p> 元素)，但我們建議每個元素都要添加關閉標簽。
不推薦:
<section>
<p>這是一個段落。
<p>這是一個段落。
</section>
推薦:
<section>
<p>這是一個段落。</p>
<p>這是一個段落。</p>
</section>
關閉空的 HTML 元素
在 HTML5 中, 空的 HTML 元素也不一定要關閉：
我們可以這么寫：
<meta charset="utf-8">
也可以這么寫：
<meta charset="utf-8" />
在 XHTML 和 XML 中斜線 (/) 是必須的。
如果你期望 XML 軟件使用你的頁面，使用這種風格是非常好的。
使用小寫屬性名
HTML5 屬性名允許使用大寫和小寫字母。
我們推薦使用小寫字母屬性名:
同時使用大小寫是非常不好的習慣。
開發人員通常使用小寫 (類似 XHTML)。
小寫風格看起來更加清爽。
小寫字母容易編寫。
不推薦：
<div CLASS="menu">
推薦：
<div class="menu">
屬性值
HTML5 屬性值可以不用引號。
屬性值我們推薦使用引號:
如果屬性值含有空格需要使用引號。
混合風格不推薦的，建議統一風格。
屬性值使用引號易于閱讀。
以下實例屬性值包含空格，沒有使用引號，所以不能起作用:
<table class=table striped>
以下使用了雙引號，是正確的：
<table class="table striped">
圖片屬性
圖片通常使用 alt 屬性。 在圖片不能顯示時，它能替代圖片顯示。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
定義好圖片的尺寸，在加載時可以預留指定空間，減少閃爍。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
空格和等號
等號前后可以使用空格。
<link rel = "stylesheet" href = "styles.css">
但我們推薦少用空格:
<link rel="stylesheet" href="styles.css">
避免一行代碼過長
使用 HTML 編輯器，左右滾動代碼是不方便的。
每行代碼盡量少于 80 個字符。
空行和縮進
不要無緣無故添加空行。
為每個邏輯功能塊添加空行，這樣更易于閱讀。
縮進使用兩個空格，不建議使用 TAB。
比較短的代碼間不要使用不必要的空行和縮進。
不必要的空行和縮進:
<body>
<h1>菜鳥教程</h1>
<h2>HTML</h2>
<p>
菜鳥教程，學的不僅是技術，更是夢想。
菜鳥教程，學的不僅是技術，更是夢想。
菜鳥教程，學的不僅是技術，更是夢想,
菜鳥教程，學的不僅是技術，更是夢想。
</p>
</body>
推薦:
<body>
<h1>菜鳥教程</h1>
<h2></h2>
<p>菜鳥教程，學的不僅是技術，更是夢想。
菜鳥教程，學的不僅是技術，更是夢想。
菜鳥教程，學的不僅是技術，更是夢想。
菜鳥教程，學的不僅是技術，更是夢想。</p>
</body>
表格實例:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
列表實例:
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>
省略 <html> 和 <body>?
在標準 HTML5 中， <html> 和 <body> 標簽是可以省略的。
以下 HTML5 文檔是正確的:
實例:
<!DOCTYPE html>
<head>
<title>頁面標題</title>
</head>
<h1>這是一個標題</h1>
<p>這是一個段落。</p>
嘗試一下 ?
不推薦省略 <html> 和 <body> 標簽。
<html> 元素是文檔的根元素，用于描述頁面的語言：
<!DOCTYPE html>
<html lang="zh">
聲明語言是為了方便屏幕閱讀器及搜索引擎。
省略 <html> 或 <body> 在 DOM 和 XML 軟件中會崩潰。
省略 <body> 在舊版瀏覽器 (IE9)會發生錯誤。
省略 <head>?
在標準 HTML5 中， <head>標簽是可以省略的。
默認情況下，瀏覽器會將 <body> 之前的內容添加到一個默認的 <head> 元素上。
實例
<!DOCTYPE html>
<html>
<title>頁面標題</title>
<body>
<h1>這是一個標題</h1>
<p>這是一個段落。</p>
</body>
</html>
嘗試一下 ?
| 現在省略 head 標簽還不推薦使用。 |
元數據
HTML5 中 <title> 元素是必須的，標題名描述了頁面的主題:
<title>菜鳥教程</title>
標題和語言可以讓搜索引擎很快了解你頁面的主題:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>菜鳥教程</title>
</head>
HTML 注釋
注釋可以寫在 <!-- 和 --> 中:
<!-- 這是注釋 -->
比較長的評論可以在 <!-- 和 --> 中分行寫：
<!--
這是一個較長評論。 這是 一個較長評論。這是一個較長評論。
這是 一個較長評論 這是一個較長評論。 這是 一個較長評論。
-->
長評論第一個字符縮進兩個空格，更易于閱讀。
樣式表
樣式表使用簡潔的語法格式 ( type 屬性不是必須的):
<link rel="stylesheet" href="styles.css">
短的規則可以寫成一行:
p.into {font-family: Verdana; font-size: 16em;}
長的規則可以寫成多行:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
將左花括號與選擇器放在同一行。
左花括號與選擇器間添加以空格。
使用兩個空格來縮進。
冒號與屬性值之間添加已空格。
逗號和符號之后使用一個空格。
每個屬性與值結尾都要使用符號。
只有屬性值包含空格時才使用引號。
右花括號放在新的一行。
每行最多 80 個字符。
| 在逗號和分號后添加空格是常用的一個規則。 |
在 HTML 中載入 JavaScript
使用簡潔的語法來載入外部的腳本文件 ( type 屬性不是必須的 ):
<script src="myscript.js">
使用 JavaScript 訪問 HTML 元素
一個糟糕的 HTML 格式可能會導致 JavaScript 執行錯誤。
以下兩個 JavaScript 語句會輸出不同結果:
實例
var obj = getElementById("Demo")
var obj = getElementById("demo")
HTML 中 JavaScript 盡量使用相同的命名規則。
訪問 JavaScript 代碼規范。
使用小寫文件名
大多 Web 服務器 (Apache, Unix) 對大小寫敏感： london.jpg 不能通過 London.jpg 訪問。
其他 Web 服務器 (Microsoft, IIS) 對大小寫不敏感： london.jpg 可以通過 London.jpg 或 london.jpg 訪問。
你必須保持統一的風格，我們建議統一使用小寫的文件名。
文件擴展名
HTML 文件后綴可以是 .html (或r .htm)。
CSS 文件后綴是 .css 。
JavaScript 文件后綴是 .js 。
.htm 和 .html 的區別
.htm 和 .html 的擴展名文件本質上是沒有區別的。瀏覽器和 Web 服務器都會把它們當作 HTML 文件來處理。
區別在于：
.htm 應用在早期 DOS 系統，系統現在或者只能有三個字符。
在 Unix 系統中后綴沒有特別限制，一般用 .html。
技術上區別
如果一個 URL 沒有指定文件名 (如 http://www.runoob.com/css/), 服務器會返回默認的文件名。通常默認文件名為 index.html, index.htm, default.html, 和 default.htm。
如果服務器只配置了 "index.html" 作為默認文件，你必須將文件命名為 "index.html", 而不是 "index.htm"。
但是，通常服務器可以設置多個默認文件，你可以根據需要設置默認文件嗎。
不管怎樣，HTML 完整的后綴是 ".html"。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
程不是科學，而是一門手藝
Python 具有豐富的解析庫和簡潔的語法，所以很適合寫爬蟲。這里的爬蟲指的是爬取網頁的“蟲子”。簡而言之，爬蟲就是模擬瀏覽器訪問網頁，然后獲取內容的程序。
爬蟲工程師是個很重要的崗位。爬蟲每天爬取數以億計的網頁，供搜索引擎使用。爬蟲工程師們當然不是通過單擊鼠標右鍵并另存的方式來爬取網頁的，而會用爬蟲“偽裝”成真實用戶，去請求各個網站，爬取網頁信息。
本文選自《Python基礎視頻教程》一書，每一小節都給出了視頻講解，配合視頻微課帶你快速入門Python。
（ 正 文 ）
1、初識 HTTP ：4行代碼寫一個爬蟲
超文本傳輸協議（HyperText Transfer Protocol，HTTP）是網絡中最常見的網絡傳輸協議。常見網站的網址大都以 http 開頭或者以 https 開頭，https 在 http 基礎上做了一層加密的協議。
通常情況下，在瀏覽器里給服務器發送 http 或 https 請求，服務器拿到請求后會向瀏覽器返回相應的結果（response），瀏覽器解析、潤色后呈現給用戶。
寫爬蟲沒有那么難，下面用 4 行代碼寫一個爬蟲。在 first_spider.py 文件中寫入以下代碼：
1from urllib import request
2page = request.urlopen('http://www.yuqiaochuang.com/')
3ret = page.read()
4print(ret)
python first_spider.py 運行后，會看到屏幕上打印出了頁面的源代碼，這短短 4行就是一個爬蟲。
從本質上來說，這和打開瀏覽器、輸入網址去訪問沒有什么區別，只不過后者是借助瀏覽器獲取頁面內容，而爬蟲則是用原生的 HTTP 獲取內容。屏幕上打印的源代碼和在 Chrome 瀏覽器中單擊鼠標右鍵，然后在彈出的快捷菜單中單擊“查看網頁源代碼”是一樣的。
在此可以看到，網頁的源代碼是由很多標簽組成的。
尖括號包圍的就是一個標簽，如<head>、<body>和<div>。標簽內可以有屬性，例如<html lang="zh-CN">，有一個值為"zh-CN"的 lang 屬性，表示語言是中文。標簽通常是成對出現的，例如，<title>Python 教程 - 雨敲窗個人博客</title>。“Python 教程 - 雨敲窗個人博客”被<title>和</title>包括起來，包括起來的部分被稱為標簽的內容。
2、正則表達式
前面用 4 行代碼寫了一個爬蟲，運行成功后可以看到爬取的內容。不過，這卻是一個大塊的內容，如果想提取其中的某些字段該怎么辦？
常用的做法就是用正則表達式（Regular Expression）提取。
對初學編程的人來說，很難理解正則表達式是“何方神圣”。其實大家可以把正則表達式當作一個提取器來看，通過制定一些規則，從字符串中提取出想要的內容。
下面先看看正則表達式的幾個簡單用法。在regular_expression.py 文件中寫入以下代碼：
1import re # 正則表達式的包
2
3m = re.findall("abc", "aaaaabcccabcc")
4print(m)
5m = re.findall("\d", "abc1ab2c")
6print(m)
7m = re.findall("\d\d\d\d", "123abc1234abc")
8print(m)
9m = re.findall(r"<div>(.*)</div>", "<div>hello</div>")
10print(m)
11m = re.findall(r"<div>(.*)</div>", "<div>hello</div><div>world</div>")
12print(m)
13m = re.findall(r"<div>(.*?)</div>", "<div>hello</div><div>world</div>")
14print(m)
python regular_expression.py 的運行結果如下：
1['abc', 'abc']
2['1', '2']
3['1234']
4['hello']
5['hello</div><div>world']
6['hello', 'world']
首先，需要“import re”，以引用正則表達式模塊，這樣才能使用正則表達式庫中的方法。
之后，上述代碼中的 m = re.findall("abc", "aaaaabcccabcc") 從"aaaaabcccabcc"中提取出"abc"，返回的 m 是一個列表，里面有兩個'abc'。
m = re.findall("\d", "abc1ab2c") 從"abc1ab2c"中提取出單個數字，"\d"表示提取的目標字符是數字，返回的結果是['1', '2'] 。
m = re.findall("\d\d\d\d", "123abc1234abc")提取 4 個連續的數字，返回的結果是['1234']。
m = re.findall(r"<div>(.*)</div>", "<div>hello</div>")從"<div>hello</div>"中提取出<div>和</div>中間的內容，括號括起來就表示提取括號中的內容，“.”表示可以匹配任何字符，“*”表示可以匹配任意多個字符，返回的結果是['hello']。
m = re.findall(r"<div>(.*)</div>", "<div>hello</div><div>world</div>")從"<div> hello</div><div>world</div>" 中 提 取 div 中 的 內 容 ， 返 回 的 結 果 是 ['hello</div> <div>world']。與上一行的提取規則相同，為什么沒有單獨提取出 hello 和 world 呢？因為正則表達式默認用的是貪婪匹配，所謂貪婪匹配就是能匹配多長就匹配多長。"<div>hello</div><div>world</div>"就從頭匹配到了末尾，提取出來一個大長串。
m = re.findall(r"<div>(.*?)</div>", "<div>hello</div><div>world</div>") 在括號中加入一個“?”就表示以非貪婪匹配去提取，即能匹配多短就匹配多短，所以提取出來的結果是['hello', 'world']。
結合前面的幾個例子，可以總結出正則表達式中最常用的 findall 方法的用法。第一個參數是定義的提取語法，第二個參數是原始字符串。返回的是一個列表，列表里是符合提取規則的字符串。
關于正則表達式更詳細的語法，大家可以借助搜索引擎，搜索“菜鳥教程正則表達式”。
3、爬取靜態頁面的網站
還 記 得 前 面 寫 的 那 個 只 有 4 行 代 碼 的 爬 蟲 嗎 ？它 爬 取 了 “ http://www. yuqiaochuang.com”整個頁面的內容。在學過正則表達式之后，就可以提取想要的內容。
還是以爬取這個博客為例，提取這個博客上文章列表的標題。
在爬取一個網站前，通常要先分析一下這個網站是否是靜態頁面。靜態頁面是指，網站的源代碼里包含所有可見的內容，也就是所見即所得。常用的做法是，在瀏覽器中單擊鼠標右鍵，然后在彈出的快捷菜單中選擇“顯示網頁源代碼”，推薦使用 Chrome 瀏覽器。
類似上圖中的代碼，就是網頁的源代碼，這里能夠看到該博客中文章的標題和網址。
接下來使用正則表達式提取各標題。前面那個只有 4 行代碼的爬蟲用的是標準庫里的urllib 庫。推薦使用 requests 庫，其具有更強大、更易用的功能。使用 pip 安裝，在 PowerShell 命令行窗口中輸入以下命令：
1pip install requests
上述代碼的前兩行先將要使用的庫“import”進來，然后調用 requests 庫中的 get方法獲取頁面（page）。之后使用 re.findall 方法提取所有的標題，page.text 即頁面的源代碼內容。將頁面中以“<p><a.*>”開頭、“</a></p>”結尾的標題提取出來。
若欲了解更多與 requests 庫相關的資料，可以借助搜索引擎，搜索“python requests”查看具體用法。
4、beautifulsoup4
beautifulsoup4 也是一個 Python 的第三方庫，提供解析網頁的功能。其有些類似于正則表達式，但是比正則表達式的語法更加優雅和便利。
在 PowerShell 命令行窗口中輸入以下命令安裝 beautifulsoup4：
1pip install beautifulsoup4
還是以“http://www.yuqiaochuang.com”的網頁源代碼為例，提取這些文章的標題和鏈接。在 blog_spider_use_bs4.py 文件中寫入以下代碼：
1from bs4 import BeautifulSoup
2import requests
3page = requests.get('http://www.yuqiaochuang.com/')
4soup = BeautifulSoup(page.text, features="html.parser")
5all_title = soup.find("div", "entry-content").find_all("a")
6for title in all_title:
7 print(title["href"], title.string)
“from bs4 import BeautifulSoup ”將 BeautifulSoup 引 進 程 序 。
“ soup = BeautifulSoup(page.text, features="html.parser")”聲明了一個解析結構 soup。這里解析的是爬取的網頁源代碼 page.text；features 指定了“html.parser”這個默認的解析器。
在此可以看到，想爬取的標題都在 class 是“entry-content”的 div 塊中。“soup.find("div", "entry-content")”用于提取 class 是“entry-content”的 div 塊。緊接著調用 find_all，爬取所有標題的標簽。find_all 方法返回的是一個列表，這個列表中的元素是符合查找條件的標簽。
然后寫一個循環，把標題的標簽打印下來。通過調用 title["href"]可以獲取標簽中屬性的值—鏈接。title.string 則是獲取標簽中的內容。
5、爬取圖片
如果網站中僅有枯燥的文字，則很難吸引用戶持續觀看，所以，好的網站都是圖文并茂的。如果想將圖片也爬取下來，該怎么辦呢？爬蟲當然也可以爬取圖片，就像在用瀏覽器訪問網站時，可以在圖片上單擊鼠標右鍵，然后在彈出的快捷菜單中選擇“另存為”選項去下載圖片一樣。
利用 requests 庫也可以抓取圖片。還是以爬取“http://www.yuqiaochuang.com”為例，這次爬取網站左上角的圖片。在左上角的圖片上面單擊鼠標右鍵，接著在彈出的快捷菜單中選擇“檢查”。
在此可以看到，瀏覽器下方區域出現了一個工具欄，里面突出顯示的部分就是圖片地址的網頁源代碼。
在此可以看到，圖片是以“img”標簽開頭的。這個“img”標簽在 class 是“profile”的 div 中，因此可以使用 requests+beautifulsoup4 提取圖片的地址。
在 image_spider.py文件中寫入以下代碼：
1from bs4 import BeautifulSoup
2import requests
3
4page = requests.get('http://www.yuqiaochuang.com/')
5soup = BeautifulSoup(page.text, features="html.parser")
6img = soup.find("div", "profile").find("img")
7print(img["src"])
python image_spider.py 的運行結果如圖下。
soup.find("div", "profile").find("img") 直接提取了 img 標簽，然后打印 img 標簽中的 src 字段，在此可以看到圖片地址被提取了出來。但是，你有沒有發現這個鏈接地址似乎少了一些前綴？
沒錯，少了"http://www.yuqiaochuang.com"。有些網站的圖片會省略前綴，在爬取時補上即可。接下來正式爬取圖片，在 image_spider.py 文件中寫入以下代碼：
1from bs4 import BeautifulSoup
2import requests
3
4page = requests.get('http://www.yuqiaochuang.com/')
5soup = BeautifulSoup(page.text, features="html.parser")
6img = soup.find("div", "profile").find("img")
7
8image_url = "http://www.yuqiaochuang.com" + img["src"]
9img_data = requests.get(image_url)
10img_file = "image.png"
11
12f = open(img_file, 'wb')
13f.write(img_data.content)
14f.close()
python image_spider.py 運行后，可以看到當前文件夾下多了一個“image.png”圖片文件。
在獲取圖片地址后，調用 requests 的 get 方法，獲取圖片的請求數據，然后調用寫文件的方法，將圖片數據寫入到文件中。
前面爬取文字時，調用的是 text 字段，為什么這里變成了 content 字段呢？
這是因為 content 是最原始的數據，二進制的數據流；而 text 則是經過編碼的數據。在寫文件時，參數也不是'w'，而是'wb'。'wb'的意思是，寫入的數據是二進制數據流，而不是經過編碼的數據。爬取圖片和爬取文字的本質，都是根據網頁鏈接發送請求，然后獲取內容，只不過圖片需要用二進制的形式保存到本地文件中。
—— 完 ——
對編程充滿向往和好奇，卻不知如何上手嗎？
博文視點學院精品課程【每天5分鐘：Python基礎視頻教程（書+課）】帶你打開編程世界的大門！
今日僅需39元，你將獲得：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
