HTML作为最流行的文本标记语言，爬虫学习过程中要大量的解析HTML文档，系统的学习一下相关语法非常有必要，以下是整理的学习笔记。以下内容主要来源www.w3school.com
什么是 HTML？
-
HTML 是用来描述网页的一种语言。
-
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
-
HTML 不是一种编程语言，而是一种标记语言 (markup language)
-
标记语言是一套标记标签 (markup tag)
-
HTML 使用标记标签来描述网页
HTML 文档 = 网页
-
HTML 文档描述网页
-
HTML 文档包含 HTML 标签和纯文本
-
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容
<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
HTML 标签
-
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
-
HTML 标签是由尖括号包围的关键词，比如
-
HTML 标签通常是成对出现的，比如 和
-
标签对中的第一个标签是开始标签，第二个标签是结束标签
-
开始和结束标签也被称为开放标签和闭合标签
| 标签 | 描述 |
|---|---|
| <p> | 元素定义了 HTML 文档中的一个段落 |
| <body> | 元素定义了 HTML 文档的主体 |
| <html> | 元素定义了整个 HTML 文档 |
| <br /> | 就是没有关闭标签的空元素 |
| <table> | 定义 HTML 表格 |
| <hr /> | 标签在 HTML 页面中创建水平线 |
| <!–> | 定义注释 |
| <bdo> | 定义文本方向。 |
| <dfn> | 定义项目或缩略词的定义。 |
| <q> | 定义短的行内引用。 |
| <kbd> | 元素定义键盘输入 |
| <pre> | 定义预格式化文本 |
| <style> | 定义样式定义。 |
| <link> | 定义资源引用。 |
| <div> | 定义文档中的节或区域（块级）。 |
| <span> | 定义文档中的行内的小块或区域。 |
| <font> | 规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。 |
| <basefont> | 定义基准字体。不赞成使用。请使用样式。 |
| <center> | 对文本进行水平居中。不赞成使用。请使用样式。 |
| <a> | 定义锚。使用 Target 属性，可以定义被链接的文档在何处显示。name 属性规定锚（anchor）的名称。 |
| <img> | 定义图像。要在页面上显示图像，需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。定义图像的语法是： <img src=“url” /> URL 指存储图像的位置 |
| <map> | 定义图像地图 |
| <area> | 定义图像地图中的可点击区域 |
HTML 属性
-
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
-
属性总是以名称/值对的形式出现，比如：name=“value”。
-
属性总是在 HTML 元素的开始标签中规定。
-
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
-
适用于大多数 HTML 元素的属性：
| 属性 | 值 | 描述 |
|---|---|---|
| class | classname | 规定元素的类名（classname） |
| id | id | 规定元素的唯一 |
| style | style_definition | 规定元素的行内样式（inline style） |
| title | text | 规定元素的额外信息（可在工具提示中显示） |
更多关于标准属性的信息，请访问：HTML 标准属性参考手册
HTML 标题
-
标题（Heading）是通过<h1> - <h6> "等标签进行定义的。
-
<h1> 定义最大的标题。<h6> 定义最小的标题。
实例
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
文本格式化标签
| 标签 | 描述 | 标签 | 描述 |
|---|---|---|---|
| <b> | 定义粗体文本 | <sub> | 定义下标字 |
| <big> | 定义大号字 | <sup> | 定义上标字 |
| <em> | 定义着重文字 | <del> | 定义删除字 |
| <i> | 定义斜体字 | <s> | 不赞成使用。使用 <del> 代替 |
| <small> | 定义小号字 | <strike> | 不赞成使用。使用 <del> 代替 |
| <strong> | 定义加重语气 | <u> | 不赞成使用。使用样式（style）代替 |
计算机输出标签
| 标签 | 描述 | 标签 | 描述 |
|---|---|---|---|
| <code> | 定义计算机代码 | <kbd> | 定义键盘码 |
| <samp> | 定义计算机代码样本 | <tt> | 定义打字机代码 |
| <var> | 定义变量 | <pre> | 定义预格式文本 |
| <listing> | 不赞成使用。使用 <pre> 代替 | <xmp> | 不赞成使用。使用 <pre> 代替 |
| <plaintext> | 不赞成使用。使用 <pre> 代替 |
引用、引用和术语定义
| 标签 | 描述 | 标签 | 描述 |
|---|---|---|---|
| <abbr> | 定义缩写 | <acronym> | 定义首字母缩写 |
| <address> | 定义地址 | <bdo> | 定义文字方向 |
| <blockquote> | 定义长的引用 | <q> | 定义短的引用语 |
| <cite> | 定义引用、引证 | <\dfn> | 定义一个定义项目 |
表格标签
| 标签 | 描述 |
|---|---|
| <table> | 定义表格 |
| <caption> | 定义表格标题。 |
| <th> | 定义表格的表头。 |
| <tr> | 定义表格的行。 |
| <td> | 定义表格单元。 |
| <thead> | 定义表格的页眉。 |
| <tbody> | 定义表格的主体。 |
| <tfoot> | 定义表格的页脚。 |
| <col> | 定义用于表格列的属性。 |
| <colgroup> | 定义表格列的组。 |
列表标签
| 标签 | 描述 |
|---|---|
| <ol> | 定义有序列表。 |
| <ul> | 定义无序列表。 |
| <li> | 定义列表项。 |
| <dl> | 定义定义列表。 |
| <dt> | 定义定义项目。 |
| <dd> | 定义定义的描述。 |
| <dir> | 已废弃。使用 <ul> 代替它。 |
| <menu> | 已废弃。使用 <ul> 代替它。 |
HTML5 的网站布局
HTML5 提供的新语义元素定义了网页的不同部分：
| HTML5语义元素 | 描述 |
|---|---|
| header | 定义文档或节的页眉 |
| nav | 定义导航链接的容器 |
| section | 定义文档中的节 |
| article | 定义独立的自包含文章 |
| aside | 定义内容之外的内容（比如侧栏） |
| footer | 定义文档或节的页脚 |
| details | 定义额外的细节 |
| summary | 定义 details 元素的标题 |
HTML 脚本
JavaScript 使 HTML 页面具有更强的动态和交互性
| 标签 | 描述 |
|---|---|
| <script> | 定义客户端脚本。 |
| <noscript> | 为不支持客户端脚本的浏览器定义替代内容。 |
HTML 文件路径
| 路径 | 描述 |
|---|---|
| <img src=“picture.jpg”> | picture.jpg 位于与当前网页相同的文件夹 |
| <img src=“images/picture.jpg”> | picture.jpg 位于当前文件夹的 images 文件夹中 |
| <img src="/images/picture.jpg"> | picture.jpg 当前站点根目录的 images 文件夹中 |
| <img src="…/picture.jpg"> | picture.jpg 位于当前文件夹的上一级文件夹中 |
- 绝对文件路径：指向一个因特网文件的完整 URL：
实例
<img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower">
- 相对路径(推荐方式)：指向了相对于当前页面的文件。
实例
<img src="/images/picture.jpg" alt="flower">
文件路径指向了位于当前网站根目录中 images 文件夹里的一个文件：
HTML 头部元素
| 标签 | 描述 |
|---|---|
| <head> | 定义关于文档的信息。 |
| <title> | 定义文档标题。 |
| <base> | 定义页面上所有链接的默认地址或默认目标。 |
| <link> | 定义文档与外部资源之间的关系。 |
| <meta> | 定义关于 HTML 文档的元数据。 |
| <script> | 定义客户端脚本。 |
| <style> | 定义文档的样式信息。 |
HTML 字符实体
注释：实体名称对大小写敏感！
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 |   |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ’ | 撇号 | &apos； (IE不支持) | ' |
| ￠ | 分（cent） | ¢ | ¢ |
| £ | 镑（pound） | £ | £ |
| ¥ | 元（yen） | ¥ | ¥ |
| € | 欧元（euro） | &euro | € |
| § | 小节 | § | § |
| © | 版权（copyright） | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | &trade | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
如需完整的实体符号参考，请访问：HTML实体符号大全。
HTML 统一资源定位器
URL - Uniform Resource Locator
统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。
网址，遵守以下的语法规则：
语法：
scheme://host.domain:port/path/filename
解释：
-
scheme - 定义因特网服务的类型。最常见的类型是 http
-
host - 定义域主机（http 的默认主机是 www）
-
domain - 定义因特网域名，比如 w3school.com.cn
-
:port - 定义主机上的端口号（http 的默认端口号是 80）
-
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
-
filename - 定义文档/资源的名称
URL 编码
-
URL 只能使用 ASCII 字符集来通过因特网进行发送。
-
由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
-
URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。
-
URL 不能包含空格。URL 编码通常使用 + 来替换空格。
<!DOCTYPE> 声明
HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。
常见的声明
- HTML5
<!DOCTYPE html>
- HTML 4.01
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
- XHTML 1.0
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
XHTML 简介
是以 XML 格式编写的 HTML,与 HTML 相比最重要的区别：语法更严格/规范，具体体现在以下方面：
文档结构
-
XHTML DOCTYPE 是强制性的
-
<html> 中的 XML namespace 属性是强制性的
-
<html>、<head>、<title> 以及<body> 也是强制性的
元素语法
-
XHTML 元素必须正确嵌套
-
XHTML 元素必须始终关闭
-
XHTML 元素必须小写
-
XHTML 文档必须有一个根元素
属性语法
-
XHTML 属性必须使用小写
-
XHTML 属性值必须用引号包围
-
XHTML 属性最小化也是禁止的
HTML 表单
用于搜集不同类型的用户输入
- 元素定义 HTML 表单 属性的列表：
| 类型 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集），规定向何处提交表单的地址（URL）（提交页面） |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启） |
| enctype | 规定被提交数据的编码（默认：url-encoded） |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET），还有POST方法 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name） |
| novalidate | 规定浏览器不验证表单 |
| target | 规定 action 属性中地址的目标（默认：_self） |
- 元素是最重要的表单元素。主要 type 属性有：
| 属性 | 描述 |
|---|---|
| value | 属性规定输入字段的初始值 |
| readonly | 属性规定输入字段为只读（不能修改） |
| disabled | 属性规定输入字段是禁用的 |
| size | 属性规定输入字段的尺寸（以字符计） |
| maxlength | 属性规定输入字段允许的最大长度： |
| autocomplete | 属性规定表单或输入字段是否应该自动完成 |
| autofocus | 属性是布尔属性。如果设置，则规定当页面加载时 <input> 元素应该自动获得焦点 |
| form | 属性规定 <input> 元素所属的一个或多个表单 |
| formaction | 属性规定当提交表单时处理该输入控件的文件的 URL，属性覆盖 <form> 元素的 action 属性，适用于type=“submit” 以及type="image |
| formenctype | 属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method=“post” 的表单),覆盖 <form> 元素的 enctype 属性。适用于 type=“submit” 以及 type=“image” |
| formmethod | 属性定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法,属性覆盖 <form> 元素的 method 属性。适用于 type=“submit” 以及 type=“image” |
| formnovalidate | novalidate 属性是布尔属性。如果设置，则规定在提交表单时不对 <input> 元素进行验证。属性覆盖 <form> 元素的 novalidate 属性。 |
| formtarget | 属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。属性会覆盖 <form> 元素的 target 属性。可与 type=“submit” 和 type=“image” 使用 |
| height 和 width | 属性规定 <input> 元素的高度和宽度,height 和 width 属性,仅用于 <input type=“image”>。 |
| list | <datalist> 属性引用的元素中包含了 <input> 元素的预定义选项 |
| min 和 max | 属性是布尔属性。属性规定 <input> 元素的最小值和最大值 |
| multiple | 如果设置，则规定允许用户在<input> 元素中输入一个以上的值。multiple 属性适用于以下输入类型：email 和 file |
| pattern | 属性规定用于检查 <input> 元素值的正则表达式,适用于以下输入类型：text、search、url、tel、email、and、password。 |
| placeholder | 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。该提示会在用户输入值之前显示在输入字段中。 |
| required | 属性是布尔属性。如果设置，则规定在提交表单之前必须填写输入字段。 |
| step 属性 | step 属性规定 <input> 元素的合法数字间隔 |
| type | 属性定义输出类型，包含text(文本)、password、submit（表单）、radio（单选按钮）、button（按钮）、checkbox（复选框）、color、date、datetime、datetime-local、email、month、number、range、search（搜索字段）、tel（电话）、time、url、week、value（默认值） |
- 元素组合表单中的相关数据
- 元素为 元素定义标题。
- 元素定义下拉列表
- 元素定义多行输入字段（文本域）
- 元素定义可点击的按钮
- 元素为 元素规定预定义选项列表
HTML5 新元素
新的语义/结构元素
HTML5 提供的新元素可以构建更好的文档结构：
| 标签 | 描述 |
|---|---|
| <article> | 定义文档内的文章。 |
| <aside> | 定义页面内容之外的内容。 |
| <bdi> | 定义与其他文本不同的文本方向。 |
| <details> | 定义用户可查看或隐藏的额外细节。 |
| <dialog> | 定义对话框或窗口。 |
| <figcaption> | 定义 <figure> 元素的标题。 |
| <figure> | 定义自包含内容，比如图示、图表、照片、代码清单等等。 |
| <footer> | 定义文档或节的页脚。 |
| <header> | 定义文档或节的页眉。 |
| <main> | 定义文档的主内容。 |
| <mark> | 定义重要或强调的内容。 |
| <menuitem> | 定义用户能够从弹出菜单调用的命令/菜单项目。 |
| <meter> | 定义已知范围（尺度）内的标量测量。 |
| <nav> | 定义文档内的导航链接。 |
| <progress> | 定义任务进度。 |
| <rp> | 定义在不支持 ruby 注释的浏览器中显示什么。 |
| <rt> | 定义关于字符的解释/发音（用于东亚字体）。 |
| <ruby> | 定义 ruby 注释（用于东亚字体）。 |
| <section> | 定义文档中的节。 |
| <summary> | 定义 <details> 元素的可见标题。 |
| <time> | 定义日期/时间。 |
| <wbr> | 定义可能的折行（line-break）。 |
新的表单元素
| 标签 | 描述 |
|---|---|
| <datalist> | 定义输入控件的预定义选项。 |
| <keygen> | 定义键对生成器字段（用于表单）。 |
| <output> | 定义计算结果。 |
新的输入类型
大部分前面均已提及
| 新的输入类型 | 新的输入属性 |
|---|---|
| color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week | autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height 和 width、list、min 和 max、multiple、pattern (regexp)、placeholder、required、step |
HTML5 - 新的属性语法
HTML5 允许四种不同的属性语法。该例演示 标签中使用的不同语法：
| 标签 | 描述 |
|---|---|
| Empty | <input type=“text” value=“John Doe” disabled> |
| Unquoted | <input type=“text” value=John> |
| Double-quoted | <input type=“text” value=“John Doe”> |
| Single-quoted | <input type=“text” value=‘John Doe’> |
在 HTML5 中，根据属性所需，可能会使用所有这四种语法。
HTML5 图像
| 标签 | 描述 |
|---|---|
| <canvas> | 定义使用 JavaScript 的图像绘制。 |
| <svg> | 定义使用 SVG 的图像绘制。 |
新的媒介元素
| 标签 | 描述 |
|---|---|
| <audio> | 定义声音或音乐内容。 |
| <embed> | 定义外部应用程序的容器（比如插件）。 |
| <source> | 定义 和 的来源。 |
| <track> | 定义 和 的轨道。 |
| <video> | 定义视频或影片内容。 |
后记
web 开发者必学的三种语言：
-
HTML 定义网页的内容
-
CSS 规定网页的布局
-
JavaScript 对网页行为进行编程
后面我们也会对CSS、JavaScript进行基础的学习。
267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
