过基本的 Python 工具获得爬取完整 HTML 网站的实践经验。

? 来源：linux.cn ? 作者：Julia Piaskowski ? 译者：Hacker ?

（本文字数：11235，阅读时长大约：14 分钟）

有很多很棒的书可以帮助你学习 Python ，但是谁真正读了这那些大部头呢？（剧透：反正不是我）。

许多人觉得教学书籍很有用，但我通常不会从头到尾地阅读一本书来学习。我是通过做一个项目，努力的弄清楚一些内容，然后再读另一本书来学习。因此，暂时丢掉书，让我们一起学习 Python。

接下来是我的第一个 Python 爬取项目的指南。它对 Python 和 HTML 的假定知识要求很低。这篇文章旨在说明如何使用 Python 的 requests 库访问网页内容，并使用 BeatifulSoup4 库以及 JSON 和 pandas 库解析网页内容。我将简要介绍 Selenium 库，但我不会深入研究如何使用该库——这个主题值得有自己的教程。最终，我希望向你展示一些技巧和小窍门，以减少网页爬取过程中遇到的问题。

安装依赖

我的 GitHub 存储库 中提供了本指南的所有资源。如果需要安装 Python3 的帮助，请查看 Linux 、 Windows 和 Mac 的教程。

$ python3 -m venv
$ source venv/bin/activate
$ pip install requests bs4 pandas

如果你喜欢使用 JupyterLab ，则可以使用 notebook 运行所有代码。 安装 JupyterLab 有很多方法，这是其中一种：

# from the same virtual environment as above, run:
$ pip install jupyterlab

为网站抓取项目设定目标

现在我们已经安装了依赖项，但是爬取网页需要做什么？

让我们退一步，确保使目标清晰。下面是成功完成网页爬取项目需求列表：

• 我们收集的信息，是值得我们花大力气去建立一个有效的网页爬取器的。
• 我们所下载的信息是可以通过网页爬取器合法和道德地收集的。
• 对如何在 HTML 代码中找到目标信息有一定的了解。
• 利用恰当的工具：在此情况下，需要使用 BeautifulSoup 库和 requests 库。
• 知道（或愿意去学习）如何解析 JSON 对象。
• 有足够的 pandas 数据处理技能。

关于 HTML 的备注：HTML 是运行在互联网上的“猛兽”，但我们最需要了解的是标签的工作方式。标签是一对由尖括号包围关键词（一般成对出现，其内容在两个标签中间）。比如，这是一个假装的标签，称为 pro-tip：

<pro-tip> All you need to know about html is how tags work </pro-tip>

我们可以通过调用标签 pro-tip 来访问其中的信息（All you need to know…）。本教程将进一步介绍如何查找和访问标签。要进一步了解 HTML 基础知识，请查看 本文 。

网站爬取项目中要找的是什么

有些数据利用网站爬取采集比利用其他方法更合适。以下是我认为合适项目的准则：

没有可用于数据（处理）的公共 API。通过 API 抓取结构化数据会容易得多，（所以没有 API ）有助于澄清收集数据的合法性和道德性。而有相当数量的结构化数据，并有规律的、可重复的格式，才能证明这种努力的合理性。网页爬取可能会很痛苦。BeautifulSoup（bs4）使操作更容易，但无法避免网站的个别特殊性，需要进行定制。数据的相同格式化不是必须的，但这确实使事情变得更容易。存在的 “边际案例”（偏离规范）越多，爬取就越复杂。

免责声明：我没有参加过法律培训；以下内容无意作为正式的法律建议。

关于合法性，访问大量有价值信息可能令人兴奋，但仅仅因为它是可能的，并不意味着应该这样做。

值得庆幸的是，有一些公共信息可以指导我们的道德规范和网页爬取工具。大多数网站都有与该网站关联的 robots.txt 文件，指出允许哪些爬取活动，哪些不被允许。它主要用于与搜索引擎（网页抓取工具的终极形态）进行交互。然而，网站上的许多信息都被视为公共信息。因此，有人将 robots.txt 文件视为一组建议，而不是具有法律约束力的文档。 robots.txt 文件并不涉及数据的道德收集和使用等主题。

在开始爬取项目之前，问自己以下问题：

• 我是否在爬取版权材料？
• 我的爬取活动会危害个人隐私吗？
• 我是否发送了大量可能会使服务器超载或损坏的请求？
• 爬取是否会泄露出我不拥有的知识产权？
• 是否有规范网站使用的服务条款，我是否遵循了这些条款？
• 我的爬取活动会减少原始数据的价值吗？（例如，我是否打算按原样重新打包数据，或者可能从原始来源中抽取网站流量）？

当我爬取一个网站时，请确保可以对所有这些问题回答 “否”。

要深入了解这些法律问题，请参阅 2018 年出版的 Krotov 和 Silva 撰写的 《Web 爬取的合法性和道德性》 和 Sellars 的 《二十年 Web 爬取和计算机欺诈与滥用法案》 。

现在开始爬取网站

经过上述评估，我想出了一个项目。我的目标是爬取爱达荷州所有 Family Dollar 商店的地址。 这些商店在农村地区规模很大，因此我想了解有多少家这样的商店。

起点是 Family Dollar 的位置页面

首先，让我们在 Python 虚拟环境中加载先决条件。此处的代码将被添加到一个 Python 文件（如果你想要个名称，则为 scraper.py）或在 JupyterLab 的单元格中运行。

import requests # for making standard html requests
from bs4 import BeautifulSoup # magical tool for parsing html data
import json # for parsing data
from pandas import DataFrame as df # premier library for data organization

接下来，我们从目标 URL 中请求数据。

page=requests.get("https://locations.familydollar.com/id/")
soup=BeautifulSoup(page.text, 'html.parser')

BeautifulSoup 将 HTML 或 XML 内容转换为复杂树对象。这是我们将使用的几种常见对象类型。

• BeautifulSoup —— 解析的内容
• Tag —— 标准 HTML 标记，这是你将遇到的 bs4 元素的主要类型
• NavigableString —— 标签内的文本字符串
• Comment —— NavigableString 的一种特殊类型

当我们查看 requests.get() 输出时，还有更多要考虑的问题。我仅使用 page.text() 将请求的页面转换为可读的内容，但是还有其他输出类型：

• page.text() 文本（最常见）
• page.content() 逐字节输出
• page.json() JSON 对象
• page.raw() 原始套接字响应（对你没啥用）

我只在使用拉丁字母的纯英语网站上操作。 requests 中的默认编码设置可以很好地解决这一问题。然而，除了纯英语网站之外，就是更大的互联网世界。为了确保 requests 正确解析内容，你可以设置文本的编码：

page=requests.get(URL)
page.encoding='ISO-885901'
soup=BeautifulSoup(page.text, 'html.parser')

仔细研究 BeautifulSoup 标签，我们看到:

• bs4 元素 tag 捕获的是一个 HTML 标记。
• 它具有名称和属性，可以像字典一样访问：tag['someAttribute']。
• 如果标签具有相同名称的多个属性，则仅访问第一个实例。
• 可通过 tag.contents 访问子标签。
• 所有标签后代都可以通过 tag.contents 访问。
• 你始终可以使用以下字符串：re.compile("your_string") 访问一个字符串的所有内容，而不是浏览 HTML 树。

确定如何提取相应内容

警告：此过程可能令人沮丧。

网站爬取过程中的提取可能是一个令人生畏的充满了误区的过程。我认为解决此问题的最佳方法是从一个有代表性的示例开始然后进行扩展（此原理对于任何编程任务都是适用的）。查看页面的 HTML 源代码至关重要。有很多方法可以做到这一点。

你可以在终端中使用 Python 查看页面的整个源代码（不建议使用）。运行此代码需要你自担风险：

print(soup.prettify())

虽然打印出页面的整个源代码可能适用于某些教程中显示的玩具示例，但大多数现代网站的页面上都有大量内容。甚至 404 页面也可能充满了页眉、页脚等代码。

通常，在你喜欢的浏览器中通过 “查看页面源代码” 来浏览源代码是最容易的（单击右键，然后选择 “查看页面源代码” ）。这是找到目标内容的最可靠方法（稍后我将解释原因）。

在这种情况下，我需要在这个巨大的 HTML 海洋中找到我的目标内容 —— 地址、城市、州和邮政编码。通常，对页面源（ctrl+F）的简单搜索就会得到目标位置所在的位置。一旦我实际看到目标内容的示例（至少一个商店的地址），便会找到将该内容与其他内容区分开的属性或标签。

首先，我需要在爱达荷州 Family Dollar 商店中收集不同城市的网址，并访问这些网站以获取地址信息。这些网址似乎都包含在 href 标记中。太棒了！我将尝试使用 find_all 命令进行搜索：

dollar_tree_list=soup.find_all('href')
dollar_tree_list

搜索 href 不会产生任何结果，该死。这可能是因为 href 嵌套在 itemlist 类中而失败。对于下一次尝试，请搜索 item_list。由于 class 是 Python 中的保留字，因此使用 class_ 来作为替代。soup.find_all() 原来是 bs4 函数的瑞士军刀。

dollar_tree_list=soup.find_all(class_='itemlist')
for i in dollar_tree_list[:2]:
  print(i)

有趣的是，我发现搜索一个特定类的方法一般是一种成功的方法。通过找出对象的类型和长度，我们可以了解更多有关对象的信息。

type(dollar_tree_list)
len(dollar_tree_list)

可以使用 .contents 从 BeautifulSoup “结果集” 中提取内容。这也是创建单个代表性示例的好时机。

example=dollar_tree_list[2] # a representative example
example_content=example.contents
print(example_content)

使用 .attr 查找该对象内容中存在的属性。注意：.contents 通常会返回一个项目的精确的列表，因此第一步是使用方括号符号为该项目建立索引。

example_content=example.contents[0]
example_content.attrs

现在，我可以看到 href 是一个属性，可以像字典项一样提取它：

example_href=example_content['href']
print(example_href)

整合网站抓取工具

所有的这些探索为我们提供了前进的路径。这是厘清上面逻辑的一个清理版本。

city_hrefs=[] # initialise empty list

for i in dollar_tree_list:
    cont=i.contents[0]
    href=cont['href']
    city_hrefs.append(href)

#  check to be sure all went well
for i in city_hrefs[:2]:
  print(i)

输出的内容是一个关于抓取爱达荷州 Family Dollar 商店 URL 的列表。

也就是说，我仍然没有获得地址信息！现在，需要抓取每个城市的 URL 以获得此信息。因此，我们使用一个具有代表性的示例重新开始该过程。

page2=requests.get(city_hrefs[2]) # again establish a representative example
soup2=BeautifulSoup(page2.text, 'html.parser')

地址信息嵌套在 type="application/ld+json" 里。经过大量的地理位置抓取之后，我开始认识到这是用于存储地址信息的一般结构。幸运的是，soup.find_all() 开启了利用 type 搜索。

arco=soup2.find_all(type="application/ld+json")
print(arco[1])

地址信息在第二个列表成员中！原来如此！

使用 .contents 提取（从第二个列表项中）内容（这是过滤后的合适的默认操作）。同样，由于输出的内容是一个列表，因此我为该列表项建立了索引：

arco_contents=arco[1].contents[0]
arco_contents

喔，看起来不错。此处提供的格式与 JSON 格式一致（而且，该类型的名称中确实包含 “json”）。 JSON 对象的行为就像是带有嵌套字典的字典。一旦你熟悉利用其去工作，它实际上是一种不错的格式（当然，它比一长串正则表达式命令更容易编程）。尽管从结构上看起来像一个 JSON 对象，但它仍然是 bs4 对象，需要通过编程方式转换为 JSON 对象才能对其进行访问：

arco_json= json.loads(arco_contents)

type(arco_json)
print(arco_json)

在该内容中，有一个被调用的 address 键，该键要求地址信息在一个比较小的嵌套字典里。可以这样检索：

arco_address=arco_json['address']
arco_address

好吧，请大家注意。现在我可以遍历存储爱达荷州 URL 的列表：

locs_dict=[] # initialise empty list

for link in city_hrefs:
  locpage=requests.get(link)   # request page info
  locsoup=BeautifulSoup(locpage.text, 'html.parser')
      # parse the page's content
  locinfo=locsoup.find_all(type="application/ld+json")
      # extract specific element
  loccont=locinfo[1].contents[0]  
      # get contents from the bs4 element set
  locjson=json.loads(loccont)  # convert to json
  locaddr=locjson['address'] # get address
  locs_dict.append(locaddr) # add address to list

用 Pandas 整理我们的网站抓取结果

我们在字典中装载了大量数据，但是还有一些额外的无用项，它们会使重用数据变得比需要的更为复杂。要执行最终的数据组织，我们需要将其转换为 Pandas 数据框架，删除不需要的列 @type 和 country，并检查前五行以确保一切正常。

locs_df=df.from_records(locs_dict)
locs_df.drop(['@type', 'addressCountry'], axis=1, inplace=True)
locs_df.head(n=5)

确保保存结果！！

df.to_csv(locs_df, "family_dollar_ID_locations.csv", sep=",", index=False)

我们做到了！所有爱达荷州 Family Dollar 商店都有一个用逗号分隔的列表。多令人兴奋。

Selenium 和数据抓取的一点说明

Selenium 是用于与网页自动交互的常用工具。为了解释为什么有时必须使用它，让我们来看一个使用 Walgreens 网站的示例。 “检查元素” 提供了浏览器显示内容的代码：

虽然 “查看页面源代码” 提供了有关 requests 将获得什么内容的代码：

如果这两个不一致，是有一些插件可以修改源代码 —— 因此，应在将页面加载到浏览器后对其进行访问。requests 不能做到这一点，但是 Selenium 可以做到。

Selenium 需要 Web 驱动程序来检索内容。实际上，它会打开 Web 浏览器，并收集此页面的内容。Selenium 功能强大 —— 它可以通过多种方式与加载的内容进行交互（请阅读文档）。使用 Selenium 获取数据后，继续像以前一样使用 BeautifulSoup：

url="https://www.walgreens.com/storelistings/storesbycity.jsp?requestType=locator&state=ID"
driver=webdriver.Firefox(executable_path='mypath/geckodriver.exe')
driver.get(url)
soup_ID=BeautifulSoup(driver.page_source, 'html.parser')
store_link_soup=soup_ID.find_all(class_='col-xl-4 col-lg-4 col-md-4')

对于 Family Dollar 这种情形，我不需要 Selenium，但是当呈现的内容与源代码不同时，我确实会保留使用 Selenium。

小结

总之，使用网站抓取来完成有意义的任务时：

• 耐心一点
• 查阅手册（它们非常有帮助）

如果你对答案感到好奇：

美国有很多 Family Dollar 商店。

完整的源代码是：

import requests
from bs4 import BeautifulSoup
import json
from pandas import DataFrame as df

page=requests.get("https://www.familydollar.com/locations/")
soup=BeautifulSoup(page.text, 'html.parser')

# find all state links
state_list=soup.find_all(class_='itemlist')

state_links=[]

for i in state_list:
    cont=i.contents[0]
    attr=cont.attrs
    hrefs=attr['href']
    state_links.append(hrefs)

# find all city links
city_links=[]

for link in state_links:
    page=requests.get(link)
    soup=BeautifulSoup(page.text, 'html.parser')
    familydollar_list=soup.find_all(class_='itemlist')
    for store in familydollar_list:
        cont=store.contents[0]
        attr=cont.attrs
        city_hrefs=attr['href']
        city_links.append(city_hrefs)
# to get individual store links
store_links=[]

for link in city_links:
    locpage=requests.get(link)
    locsoup=BeautifulSoup(locpage.text, 'html.parser')
    locinfo=locsoup.find_all(type="application/ld+json")
    for i in locinfo:
        loccont=i.contents[0]
        locjson=json.loads(loccont)
        try:
            store_url=locjson['url']
            store_links.append(store_url)
        except:
            pass

# get address and geolocation information
stores=[]

for store in store_links:
    storepage=requests.get(store)
    storesoup=BeautifulSoup(storepage.text, 'html.parser')
    storeinfo=storesoup.find_all(type="application/ld+json")
    for i in storeinfo:
        storecont=i.contents[0]
        storejson=json.loads(storecont)
        try:
            store_addr=storejson['address']
            store_addr.update(storejson['geo'])
            stores.append(store_addr)
        except:
            pass

# final data parsing
stores_df=df.from_records(stores)
stores_df.drop(['@type', 'addressCountry'], axis=1, inplace=True)
stores_df['Store']="Family Dollar"

df.to_csv(stores_df, "family_dollar_locations.csv", sep=",", index=False)

作者注释：本文改编自 2020 年 2 月 9 日在俄勒冈州波特兰的 我在 PyCascades 的演讲 。

via: opensource.com

作者： Julia Piaskowski 选题： lujun9972 译者： stevenzdg988 校对： wxy

本文由 LCTT 原创编译， Linux中国 荣誉推出

点击“了解更多”可访问文内链接

TMl 的标签可以分为单个标签和成对标签。

单个标签：html4 规定单个标签要有一个 / 表示结尾， html5 则不用

<!--单个标签-->
<meta>
<!--成对标签 -->
<div></div>

以下是HTMl中常用的一些标签

div 标签

div 标签 主要用来将相关的内容组合到一块，就像菜市场把各个蔬菜分成不同种类区分摆放是一个道理。

div 是最常见也是比较重要的标签，网页布局中经常使用的一类标签。通常布局被称为 DIV + CSS 布局

<div>
  div 就是一个分类的存储箱子
</div>

p标签

p标签表示段落， 在网页文字中应用的比较多

<!--段落和段落间会换行-->
<p>第一段</p>
<p>第二段</p>

H-标题标签

h标签分为六个

引用标题标签后，字体会加粗、字号一会变大

ul 无序标签

无序标签是没有显示顺序的列表，无序列表前面通常会有一个“小点”， 这个小点可以用type属性控制。其中有三个展示方式（不过这种方式比较固定，不够灵活和美观， 已经被CSS的效果代替），如下：

举例:

<!--ul标签内部只能放置li标签-->
<!--li标签内部可以放其他的标签-->
<ul type=">
    <li>无序列表元素1</li> <!--列表项-->
    <li>无序列表元素2</li>
</ul>




实心圆
<ul type="disc">
  <li>西红柿</li>
  <li>黄瓜</li>
</ul>
空心圆
<ul type="circle">
  <li>西红柿</li>
  <li>黄瓜</li>
</ul>
实心方框
<ul type="square">
  <li>西红柿</li>
  <li>黄瓜</li>
</ul>

ol 有序标签

• ol 前面的标签是有序的，可以是数字、字母、罗马数字等。同样控制这些样式使用的是type属性。

• 设置start属性，表示从哪个编号开始
• 加 reversed 表示倒叙排列

有序列表, 从2开始
<ol start="2">
  <li>元素1</li>
  <li>元素2</li>
</ol>


小写字母表示
<ol type="a">
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
</ol>


倒叙
<ol reversed>
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
</ol>

dl 自定义列表

dl标签表示自定义列表

dt表示数据项，dd表示数据定义， dd是dt标签的解释

<dl>
    <dt>西红柿</dt>
    <dd>红、酸</dd>
    <dt>黄瓜</dt>
    <dd>绿、涩</dd>
  </dl>

img标签

img 用来插入图片，包括但不限于以下图片格式

<!-- src(source)属性， 图片地址，可以为相对路径，也可以为绝对路径-->
<!-- alt 如果遇到图片无法加载的情况，网页上会展示 alt的 值 -->
<!-- width 和 height 表示 宽和高， 如果只设置一个， 那么另外一个就会跟着成比例缩放-->
<img src="./images/images.jpg" alt="星期一" width="120" height="20">

a 标签

用a标签来制作超级链接

<!-- href 属性 表示 其他页面的链接，支持相对路径和绝对路径，还可以链接到其它网站 -->
<!--target 属性表示 打开其他链接的方式-->
<!-- title 属性表示 链接的标题， 当鼠标移动到链接上，会展示出来-->
<a href="http://www.baidu.com" target="blank" title="文字标题">百度</a>






<!--也可以用a标签作为锚点 锚点可以是本页面的锚点，也可以是其他页面的锚点-->
<h1 id="title">头部标题</h1>
... 此处省略一些代码
<a href="#title">返回标题</a>




<!--下载链接，指向 doc， zip， zip等文件格式时，a标签将成为自动下载链接-->
<a href="./download/halou.zip">发邮件</a>
<!-- mailto:前缀的链接是邮件链接，系统将自动打开email相关软件-->
<a href="mailto:halouworld@126.com">发邮件</a>
<!-- tel: 前缀链接是电话链接，系统将自动打开拨号键-->
<a href="tel:11111111111">打开拨号键盘</a>

audio标签

audio标签用来插入音频标签

<!--添加 controls 后才会显示 播放控件-->
<!--常用音频格式 mp3 和 ogg格式-->
<!--autoplay 自动播放属性-->
<!--loop 属性表示循环播放-->
<audio controls src="./video/demo.mp3">
       您的浏览器不支持 audio标签，请升级
</audio>




<audio controls src="./video/demo.mp3" autoplay loop>
     您的浏览器不支持 audio标签，请升级
</audio>

video标签

video 标签用于插入一段视频

<!--有的视频不能播放 ，详见 https://blog.csdn.net/weixin_34272308/article/details/94614657 -->
<!-- controls 显示视频播放控件  -->
<!-- autoplay 自动播放 -->
<!-- loop 循环播放 -->
<!-- 常见的 视频格式 mp4 ogv webm 等-->
<video controls autoplay loop src="./video/5-4 RDB2.mp4" >
    您的浏览器不支持 video标签，请升级
</video>

其它区块标签

以前的区块标签只有div，现在为了更好的方便搜索引擎抓取网站，因此有了以下语义更加明确的区块标签

其他的语义标签

• span 标记文本标记区域，没有特殊效果，结合CSS使用

• b 标签 加粗文章（可以使用CSS实现同样效果）

• u 加下换线文字

• br 换行

• i 倾斜文字（可以使用CSS实现同样效果）

• strong 代表特别重要的文字

• em 需要强调的文字，有一定的倾斜，也可以用其配置CSS做表情文字

• mark 高亮文字

• figure 和 figcaption 。figure - 一段独立的内容 figcaption- figure 内部元素的说明性内容

表单

表单用来收集信息并且可以完成和后端的数据传输

表单中大致可以分为三种标签

• form标签，标识表单区域， 内部的元素都可能被表单提取信息
• input 标签， 标识输入、点击等需要和用户交互的场景
• datalist 下拉框，支持搜索，通常和input一块使用

一些表单的示例

<!--action 表示要提交到后端的网址-->
<!--method 表示表单提交的方式，通常有 get 、 post 、put、delete等-->


<form action="/save" meththo="post"></form>


<!--<form> 标签中 input 文本框 type="text" 表示文本框-->
<!-- value 表示文本框中的值 -->
<!--planceholder表示提示文字，在没任何输入值的情况下，作为提示信息-->
<!--disabled 表示禁用-->
<input type="text" value="123" planceholder="提示文字" disabled>


<!---单选按钮，name相等，表示选择了一个，另一个就不能选择了-->
<!--checked 表示默认被选中-->
<!-- value 属性表示要提交到后端服务器的值-->
<input type="radio" name="radio_group" checked>
<input type="radio"  name="radio_group">




<label>
    <input type="radio" name="sex"> 男
</label>
<label> 
    <input type="radio" name="sex"> 女
</label>




<!--html4 中的标签 通过for 属性 和 其他标签的id属性进行绑定-->


<input type="radio" name="sex" id="nan"> 
<label for="nan">男</label>


<input type="radio" name="sex"   id="nv">
<label for="nv">女</label>


<!--复选框 type="checkbox" 同一组的的复选框，name值应该相同 ，复选框也有value值， 用于向服务器提交数据-->
<input type="checkbox" name="hobby" value="soccer" > 足球
<input type="checkbox" name="hobby" value="basket" > 篮球


<!--密码框-->
<input type="password" placeholder="请输入密码">


<!-- 下拉菜单 -->
<select>
  <option value="alipay">支付宝</option>
  <option value="wxpay">微信支付</option>
</select>


<!--多文本框 rows 和  clos 分别用于设置 行数 和 列数-->
<textarea rows="3" cols="5"></textarea>


<!--三种按钮 submit 提交按钮  button 普通按钮 可以简写为  <button></button> reset 按钮 重置按钮-->
<input type="button" value="普通按钮">
    <input type="reset" value="重置按钮"> 
    <input type="submit" value="提交表单">




<!--像 email 和 url 等格式，如果点击提交按钮，不符合格式，会有提示-->
<form>
    日期空间: <input type="date">  <br/>
    时间空间: <input type="time">  <br/>
    日期时间空间 <input type="datetime-local">  <br/>


    文件:<input type="file"> <br/>  <br/>
    数字控件: <input type="number"> <br/>
    拖拽条: <input type="range"> <br/>
    搜索框: <input type="search"> <br/>
    网址控件: <input type="url"> <br/>
    邮箱控件: <input type="email" >
    <input type="submit" value="提交">
</form>




<!-- datalist 备选项示例 -->
<input type="text" list="province">
<datalist id="province">
  <option value="陕西"></option>
  <option value="山西"></option>
  <option value="河北"></option>
  <option value="山东"></option>
</datalist>

表格

可以用html渲染表格

• table 标签表示表格

• tr 表示行
• td 表示单元格
• caption 表格的标题，通常放在表格的第一行
• th 表示列标题

<!--表格示例-->
<table border="1">
  <caption>我是标题</caption>
  <tr>
      <th>第一列标题</th>
      <th>第二列标题</th>
  </tr>
  <tr>
      <td>第一行第一列</td>
      <td>第一行第二列</td>
  </tr>
  <tr>
      <td>第二行第一列</td>
      <td>第二行第二列</td>
  </tr>
</table>

• 单元格的合并, clospan 用来设置td 或者th的列跨度 ， rowspan属性用来设置td或者th的行跨度

<!--跨列示例-->
<table border="1">
    <caption>我是标题</caption>
    <tr>
        <th>第一列标题</th>
        <th>第二列标题</th>
    </tr>
    <tr>
        <td colspan="2">跨两行</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>


<!--跨行示例-->
<table border="1">
        <caption>我是标题</caption>
        <tr>
            <th>第一列标题</th>
            <th>第二列标题</th>
        </tr>
        <tr>
            <td rowspan="2">第一行第一列</td>
            <td>第一行第二列</td>
        </tr>
        <tr>
            <td>第二行第二列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
        </tr>
  </table>

• 表格的其他标签 ， thead 定义表头， tbody 定义表格的主题内容， tfoot 标签定义表格底部，通常用来汇总等

markdown中写下你的文章，并使用Python将它们转换成HTML-作者Florian Dahlitz，于2020年5月18日（15分钟）

介绍

几个月前，我想开通自己的博客，而不是使用像Medium这样的网站。这是一个非常基础的博客，所有的文章都是HTML形式的。然而，有一天，我突然产生了自己编写Markdown到HTML生成器的想法，最终这将允许我用markdown来编写文章。此外，为它添加诸如估计阅读时间之类的扩展特性会更容易。长话短说，我实现了自己的markdown到HTML生成器，我真的很喜欢它！

在本系列文章中，我想向您展示如何构建自己的markdown到HTML生成器。该系列由三部分组成：

• 第一部分（本文）介绍了整个管线的实现。

• 第二部分通过一个模块扩展了实现的管线，该模块用于计算给定文章的预计阅读时间。

• 第三部分演示如何使用管线生成自己的RSS摘要。

这三部分中使用的代码都可以在GitHub上找到。

备注：我的文章中markdown到HTML生成器的想法基于Anthony Shaw文章中的实现。

项目构建

为了遵循本文的内容，您需要安装几个软件包。我们把它们放进requirements.txt文件。

Markdown是一个包，它允许您将markdown代码转换为HTML。之后我们用Flask产生静态文件。

但在安装之前，请创建一个虚拟环境，以避免Python安装出现问题：

激活后，您可以使用pip安装requirements.txt中的依赖。

很好！让我们创建几个目录来更好地组织代码。首先，我们创建一个app目录。此目录包含我们提供博客服务的Flask应用程序。所有后续目录都将在app目录内创建。其次，我们创建一个名为posts的目录。此目录包含要转换为HTML文件的markdown文件。接下来，我们创建一个templates目录，其中包含稍后使用Flask展示的模板。在templates目录中，我们再创建两个目录：

posts包含生成的HTML文件，这些文件与应用程序根目录中posts目录中的文件相对应。

shared包含在多个文件中使用的HTML文件。

此外，我们还创建了一个名为services的目录。该目录将包含我们在Flask应用程序中使用的模块，或者为它生成某些东西。最后，创建一个名为static的目录带有两个子目录images和css。自定义CSS文件和文章的缩略图将存储在此处。

您的最终项目结构应如下所示：

令人惊叹！我们完成了一般的项目设置。我们来看看Flask的设置。

Flask设置

路由

我们在上一节安装了Flask。但是，我们仍然需要一个Python文件来定义用户可以访问的端点。在app目录中创建main.py并将以下内容复制到其中。

该文件定义了一个具有两个端点的基础版Flask应用程序。用户可以使用/route访问第一个端点返回索引页，其中列出了所有文章。

第二个端点是更通用的端点。它接受post的名称并返回相应的HTML文件。

接下来，我们通过向app目录中添加一个__init__.py，将其转换为一个Python包。此文件为空。如果您使用UNIX计算机，则可以从项目的根目录运行以下命令：

模板

现在，我们创建两个模板文件index.html以及layout.html，都存储在templates/shared目录中。这个layout.html模板将用于单个博客条目，而index.html模板用于生成索引页，从中我们可以访问每个帖子。让我们从index.html模板开始。

它是一个基本的HTML文件，其中有两个元标记、一个标题和两个样式表。注意，我们使用一个远程样式表和一个本地样式表。远程样式表用于启用Bootstrap[1]类。第二个是自定义样式。我们晚点再定义它们。

HTML文件的主体包含一个容器，其中包含Jinja2[2]逻辑，用于为每个post生成Bootstrap卡片[3]。您是否注意到我们不直接基于变量名访问这些值，而是需要将[0]添加到其中？这是因为文章中解析的元数据是列表。实际上，每个元数据元素都是由单一元素组成的列表。我们稍后再看。到目前为止，还不错。让我们看看layout.html模板。

如你所见，它比前一个短一点，简单一点。文件头与index.html文件很相似，除了我们有不同的标题。当然，我们可以共用一个模板，但是我不想让事情变得更复杂。

body中的容器仅定义一个h1标记。然后，我们提供给模板的内容被插入并呈现。

样式

正如上一节所承诺的，我们将查看自定义CSS文件style.css. 我们在static/css中找到该文件，并根据需要自定义页面。下面是我们将用于基础示例的内容：

我不喜欢Bootstrap中blockquotes的默认外观，所以我们在左侧添加了一点间距和边框。此外，blockquote段落底部的页边空白将被删除。不删除的话看起来很不自然。

最后但并非最不重要的是，左右两边的填充被删除。由于两边都有额外的填充，缩略图没有正确对齐，所以在这里删除它们。

到现在为止，一直都还不错。我们完成了关于Flask的所有工作。让我们开始写一些帖子吧！

写文章

正如标题所承诺的，你可以用markdown写文章-是的！在写文章的时候，除了保证正确的markdown格式外，没有其他需要注意的事情。

在完成本文之后，我们需要在文章中添加一些元数据。此元数据添加在文章之前，并由三个破折号分隔开来---。下面是一个示例文章（post1.md）的摘录：

注意：您可以在GitHub库的app/posts/post1.md中找到完整的示例文章。

在我们的例子中，元数据由标题、副标题、类别、发布日期和index.html中卡片对应缩略图的路径组成.

我们在HTML文件中使用了元数据，你还记得吗？元数据规范必须是有效的YAML。示例形式是键后面跟着一个冒号和值。最后，冒号后面的值是列表中的第一个也是唯一的元素。这就是我们通过模板中的索引运算符访问这些值的原因。

假设我们写完了文章。在我们可以开始转换之前，还有一件事要做：我们需要为我们的帖子生成缩略图！为了让事情更简单，只需从你的电脑或网络上随机选取一张图片，命名它为placeholder.jpg并把它放到static/images目录中。GitHub存储库中两篇文章的元数据包含一个代表图像的键值对，值是placeholder.jpg。

注意：在GitHub存储库中，您可以找到我提到的两篇示例文章。

markdown到HTML转换器

最后，我们可以开始实现markdown to HTML转换器。因此，我们使用我们在开始时安装的第三方包Markdown。我们先创建一个新模块，转换服务将在其中运行。因此，我们在service目录中创建了converter.py。我们一步一步看完整个脚本。您可以在GitHub存储库中一次查看整个脚本。

首先，我们导入所需的所有内容并创建几个常量：

ROOT指向我们项目的根。因此，它是包含app的目录。

POSTS_DIR是以markdown编写的文章的路径。

TEMPLATE_DIR分别指向对应的templates目录。

BLOG_TEMPLATE_文件存储layout.html的路径。

INDEX_TEMPLATE_FILE是index.html

BASE_URL是我们项目的默认地址，例如。https://florian-dahlitz.de.默认值（如果不是通过环境变量DOMAIN提供的话）是http://0.0.0.0：5000。

接下来，我们创建一个名为generate_entries的新函数。这是我们定义的唯一一个转换文章的函数。

在函数中，我们首先获取POSTS_DIR目录中所有markdown文件的路径。pathlib的awesome glob函数帮助我们实现它。

此外，我们定义了Markdown包需要使用的扩展。默认情况下，本文中使用的所有扩展都随它的安装一起提供。

注意：您可以在文档[4]中找到有关扩展的更多信息。

此外，我们实例化了一个新的文件加载程序，并创建了一个在转换项目时使用的环境。随后，将创建一个名为all_posts的空列表。此列表将包含我们处理后的所有帖子。现在，我们进入for循环并遍历POSTS_DIR中找到的所有文章。

我们启动for循环，并打印当前正在处理的post的路径。如果有什么东西出问题了，这尤其有用。然后我们就知道，哪个文章的转换失败了。

接下来，我们在默认url之后增加一部分。假设我们有一篇标题为“面向初学者的Python”的文章。我们将文章存储在一个名为python-for-beginners.md,的文件中，因此生成的url将是http://0.0.0.0:5000/posts/python-for-beginners。

变量url_html存储的字符串与url相同，只是我们在末尾添加了.html。我们使用此变量定义另一个称为target_file.的变量。变量指向存储相应HTML文件的位置。

最后，我们定义了一个变量md，它表示markdown.Markdown的实例，用于将markdown代码转换为HTML。您可能会问自己，为什么我们没有在for循环之前实例化这个实例，而是在内部实例化。当然，对于我们这里的小例子来说，这没有什么区别（只是执行时间稍微短一点）。但是，如果使用诸如脚注之类的扩展来使用脚注，则需要为每个帖子实例化一个新实例，因为脚注添加后就不会从此实例中删除。因此，如果您的第一篇文章使用了一些脚注，那么即使您没有明确定义它们，所有其他文章也将具有相同的脚注。

让我们转到for循环中的第一个with代码块。

实际上，with代码块打开当前post并将其内容读入变量content。之后调用_md.convert将以markdown方式写入的内容转换为HTML。随后，env环境根据提供的模板BLOG_TEMPLATE_FILE（即layout.html如果你还记得的话）渲染生成的HTML。

第二个with 代码块用于将第一个with 代码块中创建的文档写入目标文件。

以下三行代码从元数据中获取发布日期（被发布的日期），将其转换为正确的格式（RFC 2822），并将其分配回文章的元数据。此外，生成的post_dict被添加到all_posts列表中。

我们现在出了for循环，因此，我们遍历了posts目录中找到的所有posts并对其进行了处理。让我们看看generate_entries函数中剩下的三行代码。

我们按日期倒序对文章进行排序，所以首先显示最新的文章。随后，我们将文章写到模板目录一个新创建的index.html文件中。别把index.html错认为templates/shared目录中的那个。templates/shared目录中的是模板，这个是我们要使用Flask服务的生成的。

最后我们在函数generate_entries之后添加以下if语句。

这意味着如果我们通过命令行执行文件，它将调用generate_entries函数。

太棒了，我们完成了converter.py脚本！让我们从项目的根目录运行以下命令来尝试：

您应该看到一些正在转换的文件的路径。假设您编写了两篇文章或使用了GitHub存储库中的两篇文章，那么您应该在templates目录中找到三个新创建的文件。首先是index.html，它直接位于templates目录中，其次是templates/posts目录中的两个HTML文件，它们对应于markdown文件。

最后启动Flask应用程序并转到http://0.0.0.0:5000。

总结

太棒了，你完成了这个系列的第一部分！在本文中，您已经学习了如何利用Markdown包创建自己的Markdown to HTML生成器。您实现了整个管线，它是高度可扩展的，您将在接下来的文章中看到这一点。

希望你喜欢这篇文章。一定要和你的朋友和同事分享。如果你还没有，考虑在Twitter上关注我@DahlitzF或者订阅我的通知，这样你就不会错过任何即将发表的文章。保持好奇心，不断编码！

参考文献

Bootstrap （http://getbootstrap.com/）

Primer on Jinja Templating （https://realpython.com/primer-on-jinja-templating/）

Bootstrap Card （https://getbootstrap.com/docs/4.4/components/card/）

Python-Markdown Extensions （https://python-markdown.github.io/extensions/）

Tweet

英文原文：https://florian-dahlitz.de/blog/build-a-markdown-to-html-conversion-pipeline-using-python
译者：阿布铥