爬虫利器 Beautiful Soup 之遍历文档

eautiful Soup 简介

Beautiful Soup 是一个可以从 HTML 或 XML 文件中提取数据的 Python 库，它提供了一些简单的操作方式来帮助你处理文档导航，查找，修改文档等繁琐的工作。因为使用简单，所以 Beautiful Soup 会帮你节省不少的工作时间。

Beautiful Soup 安装

你可以使用如下命令安装 Beautiful Soup。二选一即可。

$ easy_install beautifulsoup4

$ pip install beautifulsoup4

Beautiful Soup 不仅支持 Python 标准库中的 HTML 解析器，还支持很多第三方的解析器，比如 lxml，html5lib 等。初始化 Beautiful Soup 对象时如果不指定解析器，那么 Beautiful Soup 将会选择最合适的解析器（前提是你的机器安装了该解析器）来解析文档，当然你也可以手动指定解析器。这里推荐大家使用 lxml 解析器，功能强大，方便快捷，而且该解析器是唯一支持 XML 的解析器。

你可以使用如下命令来安装 lxml 解析器。二选一即可。

$ easy_install lxml

$ pip install lxml

Beautiful Soup 小试牛刀

Beautiful Soup 使用来起来非常简单，你只需要传入一个文件操作符或者一段文本即可得到一个构建完成的文档对象，有了该对象之后，就可以对该文档做一些我们想做的操作了。而传入的文本大都是通过爬虫爬取过来的，所以 Beautiful Soup 和 requests 库结合使用体验更佳。

# demo 1
from bs4 import BeautifulSoup
# soup=BeautifulSoup(open("index.html"))
soup=BeautifulSoup("<html><head><title>index</title></head><body>content</body></html>", "lxml") # 指定解析器
print(soup.head)

# 输出结果
<head><title>index</title></head>

Beautiful Soup 将复杂的 HTML 文档转换成一个复杂的树形结构，每个节点都是 Python 对象，所有对象可以归纳为 4 种: Tag，NavigableString，BeautifulSoup，Comment。

Tag 就是 HTML 的一个标签，比如 div，p 标签等，也是我们用的最多的一个对象。

NavigableString 指标签内部的文字，直译就是可遍历的字符串。

BeautifulSoup 指一个文档的全部内容，可以当成一个 Tag 来处理。

Comment 是一个特殊的 NavigableString，其输出内容不包括注视内容。

为了故事的顺利发展，我们先定义一串 HTML 文本，下文的所有例子都是基于这段文本的。

html_doc="""
<html><head><title>index</title></head>
<body>
<p class="title"><b>首页</b></p>
<p class="main">我常用的网站
<a href="https://www.google.com" class="website" id="google">Google</a>
<a href="https://www.baidu.com" class="website" id="baidu">Baidu</a>
<a href="https://cn.bing.com" class="website" id="bing">Bing</a>
</p>
<div><!--这是注释内容--></div>
<p class="content1">...</p>
<p class="content2">...</p>
</body>
"""

子节点

Tag 有两个很重要的属性，name 和 attributes。期中 name 就是标签的名字，attributes 是标签属性。标签的名字和属性是可以被修改的，注意，这种修改会直接改变 BeautifulSoup 对象。

# demo 2
soup=BeautifulSoup(html_doc, "lxml");
p_tag=soup.p
print(p_tag.name)
print(p_tag["class"])
print(p_tag.attrs)

p_tag.name="myTag" # attrs 同样可被修改，操作同字典
print(p_tag)

#输出结果
p
['title']
{'class': ['title']}
<myTag class="title"><b>首页</b></myTag>

由以上例子我么可以看出，可以直接通过点属性的方法来获取 Tag，但是这种方法只能获取第一个标签。同时我们可以多次调用点属性这个方法，来获取更深层次的标签。

# demo 3
soup=BeautifulSoup(html_doc, "lxml");
print(soup.p.b)

#输出结果
<b>首页</b>

如果想获得所有的某个名字的标签，则可以使用 find_all(tag_name) 函数。

# demo 4
soup=BeautifulSoup(html_doc, "lxml");
a_tags=soup.find_all("a")
print(a_tags)

#输出结果
[<a class="website" href="https://www.google.com" id="google">Google</a>, <a class="website" href="https://www.baidu.com" id="baidu">Baidu</a>, <a class="website" href="https://cn.bing.com" id="bing">Bing</a>]

我们可以使用 .contents 将 tag 以列表方式输出，即将 tag 的子节点格式化为列表，这很有用，意味着可以通过下标进行访问指定节点。同时我们还可以通过 .children 生成器对节点的子节点进行遍历。

# demo 5
soup=BeautifulSoup(html_doc, "lxml");
head_tag=soup.head
print(head_tag)
print(head_tag.contents)

for child in head_tag.children:
	print("child is : ", child)

#输出结果
<head><title>index</title></head>
[<title>index</title>]
child is :  <title>index</title>

.children 只可以获取 tag 的直接节点，而获取不到子孙节点，.descendants 可以满足你。

# demo 6
soup=BeautifulSoup(html_doc, "lxml");
head_tag=soup.head
for child in head_tag.descendants:
	print("child is : ", child)

# 输出结果
child is :  <title>index</title>
child is :  index

父节点

通过 .parent 属性获取标签的父亲节点。 title 的父标签是 head，html 的父标签是 BeautifulSoup 对象，而 BeautifulSoup 对象的父标签是 None。

# demo 7
soup=BeautifulSoup(html_doc, "lxml");
title_tag=soup.title

print(title_tag.parent)
print(type(soup.html.parent))
print(soup.parent)

# 输出结果
<head><title>index</title></head>
<class 'bs4.BeautifulSoup'>
None

同时，我们可以通过 parents 得到指定标签的所有父亲标签。

# demo 8
soup=BeautifulSoup(html_doc, "lxml");
a_tag=soup.a

for parent in a_tag.parents:
    print(parent.name)

# 输出结果
p
body
html
[document]

兄弟节点

通过 .next_sibling 和 .previous_sibling 来获取下一个标签和上一个标签。

# demo 9
soup=BeautifulSoup(html_doc, "lxml");
div_tag=soup.div

print(div_tag.next_sibling)
print(div_tag.next_sibling.next_sibling)

# 输出结果

<p class="content1">...</p>

你可能会纳闷，调用了两次 next_sibling 怎么只有一个输出呢，这方法是不是有 bug 啊。事实上是 div 的第一个 next_sibling 是div 和 p 之间的换行符。这个规则对于 previous_sibling 同样适用。

另外，我们可以通过 .next_siblings 和 .previous_siblings 属性可以对当前节点的兄弟节点迭代输出。在该例子中，我们在每次输出前加了前缀，这样就可以更直观的看到 dib 的第一个 previous_sibling 是换行符了。

# demo 10
soup=BeautifulSoup(html_doc, "lxml");
div_tag=soup.div

for pre_tag in div_tag.previous_siblings:
	print("pre_tag is : ", pre_tag)

# 输出结果
pre_tag is :  

pre_tag is :  <p class="main">我常用的网站
<a class="website" href="https://www.google.com" id="google">Google</a>
<a class="website" href="https://www.baidu.com" id="baidu">Baidu</a>
<a class="website" href="https://cn.bing.com" id="bing">Bing</a>
</p>
pre_tag is :  

pre_tag is :  <p class="title"><b>首页</b></p>
pre_tag is :

前进和后退

通过 .next_element 和 .previous_element 获取指定标签的前一个或者后一个被解析的对象，注意这个和兄弟节点是有所不同的，兄弟节点是指有相同父亲节点的子节点，而这个前一个或者后一个是按照文档的解析顺序来计算的。

比如在我们的文本 html_doc 中，head 的兄弟节点是 body（不考虑换行符），因为他们具有共同的父节点 html，但是 head 的下一个节点是 title。即soup.head.next_sibling=title soup.head.next_element=title

# demo 11
soup=BeautifulSoup(html_doc, "lxml");

head_tag=soup.head
print(head_tag.next_element)

title_tag=soup.title
print(title_tag.next_element)

# 输出结果
<title>index</title>
index

同时这里还需要注意的是 title 下一个解析的标签不是 body，而是 title 标签内的内容，因为 html 的解析顺序是打开 title 标签，然后解析内容，最后关闭 title 标签。

另外，我们同样可以通过 .next_elements 和 .previous_elements 来迭代文档树。由遗下例子我们可以看出，换行符同样会占用解析顺序，与迭代兄弟节点效果一致。

# demo 12
soup=BeautifulSoup(html_doc, "lxml");
div_tag=soup.div
for next_element in div_tag.next_elements:
	print("next_element is : ", next_element)

# 输出结果
next_element is :  这是注释内容
next_element is :  

next_element is :  <p class="content1">...</p>
next_element is :  ...
next_element is :  

next_element is :  <p class="content2">...</p>
next_element is :  ...
next_element is :  

next_element is :

Beautiful Soup 总结

本章节介绍了 Beautiful Soup 的使用场景以及操作文档树节点的基本操作，看似很多东西其实是有规律可循的，比如函数的命名，兄弟节点或者下一个节点的迭代函数都是获取单个节点函数的复数形式。

同时由于 HTML 或者 XML 这种循环嵌套的复杂文档结构，致使操作起来甚是麻烦，掌握了本文对节点的基本操作，将有助于提高你写爬虫程序的效率。

用html标签使用介绍

本文主要记录常用的html标签使用说明，用起来的时候偶尔查查。

常用html标签列表

标签	英文全拼	作用	特点
?<html></html>??	html	网页的根标签	所有的标签都要写在这一对根标签里面
??<head></head>??	head	网页的头标签	包括完档的属性和信息
??<body></body>??	body	网页的主题	包含文档的所有内容
??<div></div>??	division	定义一个区域	浏览器通常会在??<div>??前后放置一个换行符
??<!-- 注释 -->??	-	注释	单标签
??<br>或<br/>??	break	换行	单标签，不会在其前后创建空白行
??<hr>或<hr/>??	horizontal rule	添加水平线	单标签
??<img src="">??	image	添加图片	单标签
??<embed src="">??	embed	嵌入外部应用	单标签
??<meta>??	meta	提供有关页面的元信息	单标签，??<meta>???标签通常位于??<head>??区域内
??<link>??	link	定义文档与外部资源的关系	单标签，??<link>???标签只能存在于??<head>??区域内，不过它可出现任何次数。
??<p></p>??	paragraph	定义段落	自动在其前后创建空白行
??<h1> to <h6>??	Header 1 to Header 6	定义标题	h1在一个页面里只能出现一次
??<strong></strong>??	strong	文本加粗	加粗标记该文本
??<b></b>??	bold	文本加粗	加粗显示文本，不推荐使用
??<em></em>??	emphasize	文本倾斜	倾斜标记文本
??<i></i>??	italic	文本倾斜	倾斜显示文本，不推荐使用
??<del></del>??	delete	文本添加删除线	-
??<s></s>??	strike	文本添加删除线	不推荐使用
??<ins></ins>??	insert	文本添加下划线	-
??<u></u>??	underline	文本添加下划线	不推荐使用
??<a href="">填写内容</a>??	anchor	添加超链接	最好使用CSS来改变链接的样式
??<ul></ul>??	unordered list	定义无序列表	通常与??<li>??标签一起使用
??<ol></ol>??	ordered list	定义有序列表	通常与??<li>??标签一起使用
??<li></li>??	list item	创建列表项	可与各种列表定义标签一起使用
??<dl></dl>??	definition list	定义描述列表	通常与??<dt>???和??<dd>??一起使用
??<dt></dt>??	definition term	定义条目	定义描述列表的项目
??<dd></dd>??	definition description	定义描述	对描述列表中的项目进行描述
??<table></table>??	table	定义HTML表格	尽可能通过样式改变表格外观
??<tr></tr>??	table row	定义表格的行	一个??<tr>???标签包含一个或多个??<th>???或??<td>??标签
??<th></th>??	table headline	定义表格每一列的标题	该标签的文本通常呈现为粗体且居中
??<td></td>??	table data	定义表格中的单元格数据	该标签的文本呈现为普通且左对齐
??<caption>表格标题</caption>??	caption	定义整个表格的标题	??<caption>???标签必须直接放在??<table>??标签后
??<input type="">??	input	定义输入控件	输入字段可通过多种方式改变，取决于type属性
??select??	select	定义下拉列表	??<select>???中的??<option>??标签定义了列表中的可用选项
??<option></option>??	option	定义下拉列表中的可用项	??<option>??标签不可自由定义宽高
??<optgroup></optgroup>??	options group	定义选项组	??<optgroup>??标签用于把相关的选项组合在一起
??<textarea></textarea>??	textarea	定义多行的文本输入控件	文本的默认字体是等宽字体
??<form></form>??	form	定义表单	??<form>??可以包含多个元素
??<fieldset></fieldset>??	field set	定义围绕表单中元素的边框	??<legend>???为??<fieldset>??定义标题
??<legend></legend>??	legend	为??<fieldset>??定义标题	??<legend>??通过css设定样式
??<progress></progress>??	progress	定义运行中的任务进度	??<progress>???是HTML5中的新标签，??<progress>??标签不适合用来表示度量衡
??<meter></meter>??	meter	度量衡	??<meter>???是HTML5的新标签，??<meter>??标签不适合用来表示进度条
??<audio></audio>??	audio	添加音频	??<audio>??标签是HTML5的新标签
??<video></video>??	video	添加视频	??<video>??标签是HTML5的新标签
??<source>??	source	定义媒介资源	??<source>??标签是HTML5中的新标签

常用标签使用说明

常用写法：??<img src="" alt="" title=""width="" height=""??>
src：图片的来源（必写属性）
alt：图像不显示时的替代文本
title：鼠标在移动到元素上的文本提示
width/height：图片宽高，没有定义宽高的时候，图片按照百分之百比例显示，更改图片的宽度或者高度，图片等比例缩放

普通用法

常用写法：??<a href="" title="" target="">填写内容</a>??
href：去往的路径（必写属性）
title：鼠标在移动到元素上的文本提示
target：规定在何处打开路径

_blank：新页面打开
_parent：在父窗口中打开链接
_self：当前页面跳转（默认值）
_top：在当前窗体打开链接，并替换当前的整个窗体

当href的值为javascript：void(0); 或 javascript：; ，表示超链接不做任何事情，不做任何跳转
当href的值为#，表示超链接为空链接，点击此链接时会跳转到页首的位置

锚点链接

锚点链接通过点击超链接，自动跳转到我们设置锚点的位置，类似于word的目录导航。建立锚点的元素必须要有id或name属性，最好两个都有。这里只跳转本页面元素，其他页面跳转自行搜索。
具体做法如下：

给目标元素设置id值，如??<p id="id1"></p>??
设置锚点超链接，锚点的超链接路径一定包含"#"，后面紧跟元素的id或者name，如??<a href="#id1"></a>??

示例如下。为了显示效果，通过使用lorem自动生成随机文本（具体使用方法搜索，一般直接输入就行），lorem*50表示重复lorem15次。

<a href="#id2">a</a>

  <p id="id1">
    (lorem*15)
  </p>

     (lorem*15)

  <p id="id2">
     (lorem*15)
  </p>

超链接全局设置

在页面head中写入代码可以设置超链接的全局跳转设置

<head>
  <!-- 让页面所有的超链接新页面打开 -->
  <base target="_blank">  
</head>

charset编码

常用写法： ??<meta charset="UTF-8">??
charset：定义文档的字符编码

ASCII/ANSI/Unicode：英语
GBK：亚洲通用字符集
GB2312：中文简体
Big5：台澳港繁体
UTF-8：世界通用字符集

name

关键字

常用写法： ??<meta name="keywords" content="">??
描述：告诉搜索引擎网页的关键字，尽量将重要的关键词放在前面

网页描述

常用写法： ??<meta name="keywords" content="">??
描述：告诉搜索引擎网页的主要内容

作者

常用写法： ??<meta name="author" content="">??
描述：告诉搜索引擎网页的作者

文件检索

常用写法： ??<meta name="robots" content="all | none | index | noindex | follow | nofollow">??
描述：有时候会有一些站点内容，不希望被ROBOTS抓取而公开。为了解决这个问题，ROBOTS开发界提供了两个办法：一个是robots.txt，另一个是The Robots META标签。
content: 文件检索方式

all：文件将被检索，且页面上的链接可以被查询（默认值）
none：文件将不被检索，且页面上的链接不可以被查询
index：文件将被检索；
noindex：文件将不被检索，但页面上的链接可以被查询
follow：页面上的链接可以被查询
nofollow：文件将不被检索，页面上的链接可以被查询

网页自动跳转

常用写法： ??<meta http-equiv="Refresh" content="3;url=http://www.baidu.com" />??
描述：网页5秒后自动跳转到谷歌主页
url：为空则刷新本页
常用写法：
描述：规定当前文档与被链接文档/资源之间的关系
rel：定义当前文档与被链接文档之间的关系。rel 是 relationship的英文缩写（必写属性）
type：规定被链接文档的类型
href：链接的文件路径
示例：

链接外部样式表：??<link rel="stylesheet" type="text/css" href="a.css">??
设置网页icon图标：??<link rel="icon" href="a.ico">??

列表

无序列表

无序列表使用粗体圆点进行标记。简单示例如下。

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        ...
    </ul>

有序列表

有序列表使用数字进行标记，我们可以通过整数值start指定列表编号的起始值。简单示例如下。

<ol start="2">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        ...
    </ol>

描述列表

通过描述列表自定义列表，列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。简单示例如下。

<dl>
        <dt>A</dt> <!-- 小标题 -->
            <dd>A1</dd> <!-- 解释标题 -->
            <dd>A2</dd> <!-- 解释标题 -->
        <dt>B</dt> <!-- 小标题 -->
            <dd>B1</dd> <!-- 解释标题 -->
            <dd>B2</dd> <!-- 解释标题 -->
    </dl>

表格

基础表格

常用写法：??<table width="" height="" border="" cellspacing="" cellpadding=""></table>??
width：表格宽度
height：表格高度
border：边框宽度
cellspacing：单元格间距
cellpadding：内容与边框间距

简单示例如下。

<table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
<caption>表格标题</caption> <!-- 定义表格标题 -->

<tr>
    <!-- 定义表格的行 -->
    <td>A1</td> <!-- 定义表格该行第一列中的数据 -->
    <td>B1</td>
    <td>C1</td>
</tr>
<tr>
    <!-- 定义表格的行 -->
    <th>A</th> <!-- 定义表格每一列的标题 -->
    <th>B</th>
    <th>C</th>
</tr>
<tr>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
</tr>
</table>

单元格合并

常用写法：??<td colspan=“” rowspan=“”></td>??
描述：告诉表格该单元格可以横跨colspan列，纵跨rowspan行

简单示例如下。

<table border="2" cellspacing="1px" width="400px" height="100px">
<caption><strong>表格标题</strong></caption> <!-- 定义表格标题 -->
<tr height="100">
    <!-- 定义表格的行 -->
    <td colspan="2">A1</td> <!-- 定义该行可以横跨两列 -->
    <td>B1</td>
</tr>

<tr height="100">
    <td>A2</td>
    <td>B2</td>
    <td rowspan="2">C</td> <!-- 定义该行可以横跨两行 -->
</tr>

<tr height="100">
    <td>A3</td>
    <td>B3</td>
</tr>
</table>

对于??<input>??不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

文本输入框

常用写法：??<input type="text" name="" maxlength="" readonly="" disabled="" value="">??
type：规定输入字段的类型
name：输入框的名字
maxlength：输入文本长度
readonly：输入框是否只读
disabled：输入框是否未激活
value：输入框默认值

简单示例如下。

<input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用户名">

密码输入框

常用写法：??<input type="password" name="">??
type：规定输入字段的类型
name：输入框的名字
密码输入框的其他参数和文本输入框一样

简单示例如下。

<input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密码">

单选框

常用写法：??<input type="radio" name="" checked="checked">??
type：规定输入字段的类型
name：输入框的名字
checked：设定该输入框被预先选定
想要多个单选框只能有一个被选中，设置所有单选框的name值相同即可实现

示例一，两个单选框都可以被选中

<div>
    <input type="radio" name="man" checked="checked">男
</div>
<div>
    <input type="radio" name="woman">女
</div>

示例二，两个单选框只能有一个被选中

<div>
    <input type="radio" name="gender" checked="checked">男
  </div>
  <div>
    <input type="radio" name="gender">女
  </div>

下拉列表

??<select>??

常用写法：??<select multiple=""></select>??
multiple：当该属性为true时，可选择多个选项。

??<optgroup>??

常用写法：??<optgroup label=""></optgroup>??
label：设定选项组的描述。

??<option>??

常用写法：??<option value="" selected="">选项值</option>??
value：定义送往服务器的选项值。
selected：当该属性为true时，该选项被默认选择。

示例一，单选下拉列表

<select>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c" selected='selected'>c</option>  <!-- 默认选中 -->
  </select>

示例二，带组合的单选下拉列表

<select>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1">b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

示例三，带组合的多选下拉列表

<select multiple=”multiple”>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1" selected='selected'>b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

多选框

常用写法：??<input type="checkbox" checked="">??
type：规定输入字段的类型
checked：设定该输入框被预先选定

简单示例如下。

<input type="checkbox"  checked="checked">A
  <input type="checkbox">B

文本框

常用写法：??<textarea cols="" rows="" placeholder=""></textarea>??
cols：控制可见文本的列数
rows：控制可见文本的行数
placeholder：提示字符

简单示例如下。

<textarea cols="5" rows="2" placeholder="text"></textarea>

文本上传控件

常用写法：??<input type="file" accept=""/>??
accept：规定提交的文件的类型

简单示例如下。

<input type="file" accept="image/gif, image/jpeg"/>

其他类型按钮

<input type="submit">文件提交按钮
  <input type="button" value="">普通按钮
  <input type="image" src="">图片按钮
  <input type="reset">重置按钮
  <input type="url">网址控件
  <input type="date">日期控件 
  <input type="time">时间控件
  <!--email提供了邮箱的完整验证，必须包含@和后缀，如果不满足验证，会阻止表单提交-->
  <input type="email">邮件控件
  <input type="number" step="3">数字控件
  <input type="range" step="100">滑块控件
  <input type="color">颜色控件

表单

示例一，普通表单

<form>
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="提交">
  </form>

示例二，带分组信息表单

<form>
    <fieldset>
      <legend>Personalia:</legend>
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="提交">
    </fieldset>

    First nameA: <input type="text" name="fname"><br>
    Last nameB: <input type="text" name="lname"><br>
  </form>

与

??<progress>???与??<meter>??主要区别和用法见??HTML5 progress和meter控件??

??<progress>??

常用写法：??<progress value="" max=""></progress>??
value：规定进程的当前值
max：规定需要完成的值

简单示例如下。

<progress value="60" max="100"></progress>

??<meter>??

常用写法：??<meter min="" low="" high="" max="" value="" optimum=""></meter>??
value：规定度量的当前值
max：规定被界定为高的值的范围
min：规定被界定为低的值的范围
low：规定被界定为低的值的范围
high：规定被界定为高的值的范围
optimum：规定度量的最优值
具体使用见meter标签改变颜色规则

简单示例如下

<meter min="0" low="40" high="90" max="100" value="91"></meter>
<meter min="0" low="40" high="90" max="100" value="90"></meter>

多媒体资源

??<audio>??

常用写法：??<audio src="" controls autoplay loop></audio>??
src：规定音频文件的url
controls：如果出现该属性，显示音频播放器的控制面板（比如播放/暂停按钮）
autoplay：如果出现该属性，自动播放音频
loop：如果出现该属性，循环播放音频

简单示例如下

<audio src="demo.mp3" controls autoplay></audio>

??<video>??

常用写法：??<video src="" width="" height="" poster="" controls autoplay loop></video>??
src：规定视频文件的url
width：设置视频播放器的宽度（pixels）
height：设置视频播放器的高度（pixels）
poster：设置视频未播放时展示的画面
controls：如果出现该属性，显示音频播放器的控制面板（比如播放/暂停按钮）
autoplay：如果出现该属性，自动播放音频
loop：如果出现该属性，循环播放音频

简单示例如下

<video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>

??<source>??

常用写法：??<source src="" type="">??
src：规定媒体文件的url
type：规定媒体文件的类型
因为不同浏览器支持的媒体格式不同，当添加媒体文件时，需要考虑浏览器是否支持它们。我们可以准备多种不同格式的媒体文件，然后使用source 标签，让浏览器从上到下选择支持的媒体格式

简单示例如下

<video controls>
    <source src="demo.mp3" type="audio/mp3">
    <source src="demo.mp4" type="video/mp4">
    您的浏览器不支持video元素。
  </video>

特殊字符

??HTML特殊字符编码对照表??

参考

??HTML基础??
??HTML 参考手册??
HTML中标签对应的英文
meter标签改变颜色规则
HTML5 progress和meter控件

一篇文章讲解“模型-输出替换”，本篇文章讲解“模板-内置标签之循环标签”。

循环标签

1. foreach标签

foreach标签的用法和PHP语法非常接近，用于循环输出数组或者对象的属性，用法如下：

1）基本使用——数据源通过模板变量赋值

①新建Index控制器，并新建index方法，在方法中获取数据并赋值到模板中

②在index.html模板中用foreach循环输出数据

预览：

2）使用函数或者方法获取数据源

①使用方法获取数据源

在index.html模板中使用函数或方法获取数据源，为了区分，换一个表查询，但注意此表要创建模型

预览：

②使用函数获取数据源

在公共函数文件common.php文件中，新建getData函数，返回数据。

在index.html模板中使用函数获取数据源，并循环输出：

预览：

2. volist标签

volist标签通常用于查询数据集或者二维数组的结果输出。

1）基本使用

①在Index控制器中，新建voshow方法，在方法中对模板进行赋值

②在index.html模板中进行volist循环展示

预览：

2）函数设定数据集

可以直接使用函数设定数据集，而不需要在控制器中给模板变量赋值传入数据集变量，如：

在index.html模板中使用函数设定数据集：

访问Index控制器的voshow方法，预览：

3）输出部分数据——属性offset和length

支持输出查询结果中的部分数据，例如输出其中的第5～15条记录。

在index.html模板中使用属性offset与length输出部分数据

数据库中数据的ID不是连续的。预览：

注意：
1. offset为偏移量，从第几条数据开始；length输出的数据条数，两者功能类似于SQL语句中的limit。

4）输出偶数记录——属性mod

在index.html中，输出偶数记录：

预览：

mod属性还用于控制一定记录的换行，例如：

在index.html模板中使用mod属性控制换行。

预览：

注意：
1. mod属性为取模，即取余数，在volist中mod是行数（下标）除以mod取余数，行数从0开始。

5）数据源为空输出提示——empty

①在Index控制器中新建emshow方法，为index.html模板分配空数据

②在index.html模板中，使用empty属性，输出为空提示

预览：

empty属性还支持变量输出：

①在Index控制器的emshow方法中赋值给模板变量

②在index.html模板中输出

预览：

6）输出循环变量——key

在index.html模板中输出循环变量：

访问voshow方法，预览：

注意：
1. 如果没有指定key属性的话，默认使用循环变量i。
2. 循环变量值从1开始。

如果要输出数组的索引，可以直接使用key变量，和循环变量不同的是，这个key是由数据本身决定，而不是循环控制的。

在index.html模板中，输出数组索引key：

预览：

3. for标签

①在Index控制器中，新建forshow方法：

②在index.html模板中循环

解析后的代码为：

预览：

③测试for循环的其他属性

预览：

?ThinkPHP5连载为卓象程序员原创，转载请联系卓象程序员

关注卓象程序员，定期发布技术文章

下一篇讲解“模板-内置标签之比较标签”

在线咨询

上一篇：HTML5 – 支持WORD上传的富文本编辑器
下一篇：微软雅黑的“文字陷阱”，看完还敢乱用吗？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

爬虫利器 Beautiful Soup 之遍历文档

eautiful Soup 简介

Beautiful Soup 安装

Beautiful Soup 小试牛刀

子节点

父节点

兄弟节点

前进和后退

Beautiful Soup 总结

用html标签使用介绍

常用html标签列表

常用标签使用说明

列表

表格

与

多媒体资源

特殊字符

参考

循环标签

1. foreach标签

2. volist标签

3. for标签

?ThinkPHP5连载为卓象程序员原创，转载请联系卓象程序员

您的项目需求