整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
多朋友想学一下网页制作，上网一看，只要涉及到网页制作，都离不开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小时内与您取得联系。
