前端简介

现在我们来学习HTML5的课程，HTML是做什么的呢，我还是哔哔两句吧。

1.1 软件架构分类

我们平时开发的软件主要有两种： C/S架构 和 B/S架构

1 什么是C/S架构

C/S架构全称为Client/Server，也就是客户端/服务器架构。

用户需要下载客户端的软件，例如QQ，微信，还有手机里的各种App 等软件，都需要下载软件进行安装，我们下载安装的就是客户端。通过使用客户端和服务器进行连接交互。

2 什么是B/S架构

B/S架构全称为Browser/Server，也就是浏览器/服务器架构。

Browser指的就是浏览器，用户打开浏览器就能访问网页，不需要下载客户端，例如访问京东、淘宝等网站。

通过浏览器请求服务器，服务器返回网页的内容。

其实B/S架构也是基于C/S架构的，因为浏览器也是一个客户端嘛。

3 B/S 架构的优点

相较于C/S架构系统，B/S 架构的网页有如下一些优点：

不需要安装客户端，打开浏览器就能访问；
无需更新，网页如果有更新，我们重新访问网页就是最新的版本；
跨平台，在任何操作系统，使用浏览器都可以访问。

HTML 就是用来开发网页的，那么 HTML 起到什么作用呢？且听我继续哔哔。

1.2 浏览器和网页

1 浏览器的作用

通过浏览器我们只需要一个网址便可以访问任何的网站，但是我们从服务器获取到的内容并不是我们看到的网页的样子。

例如，我们通过 www.jd.com 访问京东网站，看到的如下的内容：

但其实服务器给我们返回的内容并不是看到的样子，我们在网页上，通过 右键 –> 查看网页源代码，可以看到网页原本的样子（内容太多了，这里简单粘贴了一点）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf8" version='1'/>
    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
    <meta name="description"
          content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"/>
    <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"/>
    <script type="text/javascript">
        window.point = {}
        window.point.start = new Date().getTime()
    </script>
    <link rel="icon" href="//www.jd.com/favicon.ico" mce_href="//www.jd.com/favicon.ico" type="image/x-icon"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit"/>
</head>

<body class="index">
<div class="mod_container">
    <!--无障碍占位-->
    <div id="J_accessibility"></div>
    <!--顶通占位 -->
    <div id="J_promotional-top">
    </div>
    <div id="shortcut">
        <div class="w">
            <ul class="fl" clstag="h|keycount|head|topbar_01">
                <li class="dropdown" id="ttbar-mycity"></li>
            </ul>

            <ul class="fr">
                <li class="fore1 dropdown" id="ttbar-login" clstag="h|keycount|head|topbar_02">
					<a href="//passport.jd.com/uc/login?ReturnUrl=https%3A%2F%2Fwww.jd.com%2F" class="link-login">你好，请登录</a>&nbsp;&nbsp;<a
					href="//reg.jd.com/reg/person?ReturnUrl=https%3A//www.jd.com/" class="link-regist style-red">免费注册</a>
                </li>
                <li class="spacer"></li>
                <li class="fore2" clstag="h|keycount|head|topbar_03">
                    <div class="dt"><a target="_blank" href="//order.jd.com/center/list.action">我的订单</a></div>
                </li>
                <li class="spacer"></li>
                <li class="fore3 dropdown" id="ttbar-myjd" clstag="h|keycount|head|topbar_04">
                    <div class="dt cw-icon"><a target="_blank" href="//home.jd.com/">我的京东</a><i class="iconfont">&#xe610;</i><i
                            class="ci-right"><s>◇</s></i></div>
                    <div class="dd dropdown-layer"></div>
                </li>
            </ul>
        </div>
    </div>

    ...内容太多了，意思意思

</body>

</html>

服务器返回的上面的内容，是怎么变成看到的网页的样子呢？

这就是浏览器的作用，浏览器将服务器返回的源代码渲染成看到的网页。

2 浏览器的问题

目前市面上存在有很多不同的浏览器，例如IE、Chrome、Firefox、Safari、Opera一大堆。

在万维网的初期，网页编写并没有标准。于是同一个网页被不同的浏览器渲可能染成不同的效果，就像下面这样：

那怎么办呢？

那就制定标准呗。

3 W3C 的建立

伯纳斯·李（万维网和第一个网页的发明人） 1994 年建立 万维网联盟（W3C）

W3C 的出现为了 制订网页开发的标准 ，以使同一个网页在不同的浏览器中有相同的效果。

所以，我们需要制订我们编写的网页都需要遵循 W3C 的规范！

4 网页的结构思想

根据 W3C 标准，一个网页主要由三部分组成：结构、表现还有行为。

结构

结构（骨架）：HTML 用于描述页面的结构

表现

表现（皮肤）：CSS 用于控制页面中元素的样式

行为

行为（交互）：JavaScript 用于响应用户操作

所以网页中主要使用的语言是下面三个：

HTML ：负责网页中的结构，
CSS ：主要负责网页中的元素的样式，
JavaScript ：用于响应用户操作。

2 HTML5简介

2.1 什么是HTML

HTML（Hypertext Markup Language）超文本标记语言。

HTML 主要负责网页三要素中的结构，HTML使用标签的形式来表示网页中的不同组成部分，所谓的超文本指的是超链接，使用超链接从一个网页跳转到另一个网页。

HTML历史上有如下版本

HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布；
HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时；
HTML 3.2：1997年1月14日，W3C推荐标准；
HTML 4.0：1997年12月18日，W3C推荐标准；
HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准；
HTML 5 ：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。

现在已经到了 HTML5 版本，也就是我们现在要学习的版本，不哔哔没用的了，现在开始 HTML 5 的学习。

2.2 HTML5 的基本结构

下面我们来编写一个简单的 HTML5 页面

首先在指定的文件夹下创建一个文本文件，名称自定义，这里我定义为 index.html。

（这里我哔哔两句：记得将文件的扩展名显示出来，这样才能修改文件的扩展名。）

然后右键，使用记事本打开，然后编辑内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>网页的标题</title>
  </head>
  
  <body>
    <!-- h1网页的一级标题 -->
    <h1>网页的大标题</h1>
  </body>
</html>

上面就是一个最简单的 HTML5 页面，保存文档后，我们双击 index.html ，系统默认会使用浏览器打开文件，显示的就是上面的内容经过浏览器渲染后的内容：

下面我们对上面的内容进行一下讲解：

1 文档声明

1	<!DOCTYPE html>

上面的内容是文档声明，就是告诉浏览器，我们这个是 HTML5 页面，浏览器按照 HTML5 的规范来解析页面。之前的 HTML 版本的文档声明不是这样子的。

HTML标签不区分大小写，所以下面这些都可以。

1 2	<!doctype html> <!Doctype html>

2 html标签

1
2
3

<!DOCTYPE html>
<html>
</html>

HTML 标签分为两类，一个是成对出现的，就像上面的标签，一个开始标签，一个结束标签，结束标签多一道斜杠 / ；一类是自结束标签，后面学到 img 标签就是自结束标签，后面再介绍。

html 标签是网页的根标签（标签可以称为元素），网页中，除了文档声明，其他内容都要写在根标签里面。

3 head标签

<head>
    <meta charset="utf-8" />
    <title>网页的标题</title>
</head>

head 标签是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页。

meta 标签用来设置网页的元数据，上面的 meta 标签用来设置网页的字符集，告诉浏览器在解析的时候，用utf-8的字符集来解析网页，避免出现乱码问题，字符编码，后面再做介绍。

title 标签中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容。

4 body标签

<body>
    <!-- h1网页的一级标题 -->
    <h1>网页的大标题</h1>
</body>

body是 html 的子元素，表示网页的主体，网页中所有的 可见内容 都应该写在body里。上面 body 中的内容就是我们编写的内容，就是显示了一个标题，后面网页的结构就是编写在 body 标签中。

5 网页的注释

<body>
    <!-- h1网页的一级标题 -->
    <h1>网页的大标题</h1>
</body>

上面我们 body 中编写的内容里面有  ，但是并没有显示在页面中，因为这是注释。

就是我们在编写源代码的时候，用于解释我们编写的代码，我们在1个月以后重新来看自己前写的代码，经常会有这他妈的是我写的吗的错觉，经常不知道自己编写的代码的逻辑。我们在编写项目的时候，一般也不是自己独立完成，需要和别人合作，所以一段代码可能存在多人修改，编写注释也帮助大家了解代码的功能或逻辑。

另外我们有时候需要对代码进行调试，需要将一段代码屏蔽掉，进行调试。都需要用到注释。

注释的格式如下：

<!-- 注释内容1 -->

<!-- 
可以将多行注释掉 
-->

这里需要注意，注释标签不能嵌套。

6 总结

我们在回过头来重新看一下 HTML 页面的结构：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>网页的标题</title>
  </head>
  
  <body>
		后面在body中编写网页结构
  </body>
</html>

上面讲解了最简单的 HTML 页面的结构，后面我们会在 head 标签中添加元素并在 body 中编写我们的网页内容。

3 开发环境

下面准备一下开发环境，主要是选择什么开发工具。

3.1 编辑器的选择

常用的文本编辑器有 Notepad++、Sublime、Visual Studio Code（简称VS Code）、WebStorm等等。

这里推荐免费的用VS Code，如果用收费的就用WebStorm（可以说是最牛逼的开发工具）。

下面我们在学习的过程中也是选择使用的VS Code，VS Code强大的地方就是它可以安装很多插件。

官方地址：https://code.visualstudio.com，下载安装即可。

VS Code 有明亮和黑暗两种主题，按自己喜好选择。

3.2 安装VS Code插件

为 VSCode 安装插件，便于我们进行更好的开发工作。

点击左侧的插件菜单，输入要搜索的插件，点击安装就可以，非常的easy。

下面我们安装如下插件：

Chinese (Simplified) Language Pack for Visual Studio Code：中文（简体）语言包，安装完成，VS Code会显示为中文，如果习惯使用英文，可以不安装；
Ayu：简单的主题与明亮的颜色，可以不安装，VS Code 本身也有明亮的主题。
vscode-icons：好看的图标，可以不安装，只是让各个文件有对应好看的图标
Live Server：A Quick Development Live Server with live browser reload，即提供一个 live 服务器，并且支持代码与浏览器之间的实时同步刷新，当我们编写完代码后保存，浏览器会自动刷新，可以实时看到效果，需要安装。

3.3 新建工作区

首先在指定的目录下（自己想放的路径下）新建一个文件夹作为工作区，例如我这里新建了一个 html5 的文件夹，然后打开VS Code，用 VS Code 打开新建的文件夹。

打开的时候可能会提示是否信任，点击信任即可。

然后新建 HTML 页面，点击右上角的 新建文件，输入文件名即可。

新建页面完成，在页面中编写 HTML 源码，在输入 ! 后，会有提示，选择一个 ! 的提示，回车，就会自动生成 HTML5 的基本结构，太方便了。

生成的 HTML5 基本结构：

这里 <head> 标签中的 <meta> 标签暂时不用理会，后面再讲。我们编写源代码，主要是在 <body> 中编写。

后面讲解的内容就在这个目录下，像上面一样新建 HTML 文件即可。

3.4 使用插件Live-Server

上面已经安装了Live-Server，现在说明一下如何使用。

1 使用Live-Server运行页面

按照之前编写 HTML5 基本结构中的代码，编辑到上面新建的 index.html 中。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>网页的标题</title>
  </head>
  
  <body>
    <!-- h1网页的一级标题 -->
    <h1>网页的大标题</h1>
  </body>
</html>

然后在 HTML 文件上右键单击，选择 Open With Live Server，即可在浏览器中打开当前页面。

浏览器会自动打开

会看到地址栏的地址和之前我们直接在本地打开文件有所区别，这是因为 Live-Server 是以服务器的方式运行编写的页面，我们在浏览器实际是请求服务器获取到页面的内容。

2 设置VS Code自动保存

在对文件进行修改后，需要手动保存，网页才会刷新，我们也可以设置VS Code自动保存，这样网页就会自动刷新。

点击设置的齿轮按钮，打开设置，在设置项中搜索 auto save，将自动保存的选项选择 afterDelay，然后将 Auto Save Delay 的值填写1000，表示修改后，1秒就执行自动保存。这样VS Code就会在修改后1秒进行自动保存。

3.5 开发文档

我们在学习 HTML 的时候，会用到很多的标签，标签又有很多的属性，我们没办法全记住，需要的时候可以查询文档。

当然你可以直接百度，或者问大预言模型，我是觉得问大语言模型反而更方便。

大语言模型：文心一言、豆包、ChatGPT、Gemini等等，根据需要选择。

在这里介绍三个查询 HTML 使用文档的网站，有需要可以查询：

WHATWG

官网地址：点击前往页面地址

这里是最权威的，网页内容很多，而且是英文，看起来很繁琐，需要耐心看，不行就看下面的 W3school 的文档。

W3school

HTML基础教程地址：点击前往

在其中可以找到各个标签的详细介绍和属性说明，如果用到了可以查询一下，W3school 作为一个工具来使用，在必要的时候查询一下还是很好用的。

MDN

官网地址：点击前往

打开网站，找到 HTML：

可以查看到各个标签的介绍：

4 字符编码

4.1 编码和解码

所有的数据在计算机中存储时都是以二进制 0 和 1 的形式存储的，文字图片都不例外。

那我们为什么能看到文字呢？

这是因为在存储文字的时候，都需要转换为二进制码（0 和 1）进行存储。当我们读取这段文字时，计算机会将二进制编码转换为字符，供我们阅读。

所以这里涉及到两个步骤：编码和解码。

编码：将字符转换为二进制码的过程称为编码。
解码：将二进制码转换为字符的过程称为解码。

4.2 字符集

但是将二进制和文字之间编码和解码遵循什么规则呢？这里就会用到字符集。

计算机是美国人发明的，美国人的文字也就是大小写字母+数字+一些符号就完事了，满打满算100多个，够用了。他们就整了一个 ASCII 码，如下：

ASCII码叫美国信息交换标准代码，规定了对应二进制数字对应的文字（上面 ASCII 值使用的十进制表示），总共 128 个。从上图可以看到 a 对应的数字是 97 ，也就是二进制的 97 表示字母 a。

但是美国人使用计算机，欧洲人也要使用计算机啊，但是欧洲的语言128个字符满足不了啊，因为包括罗马字母和符号等，于是欧洲搞了一个 ISO-8859-1（当然还有一些其他的字符编码）。

中国也要用计算机啊，这些编码都不行，我们搞了一个 GB2312 的字符编码，包括 6763 个常用汉字和 682 个字符，但是不包括生僻字和中文繁体，后来由搞了一个 GBK，支持 20000+ 汉字，支持繁体中文。

但是世界上的语言太多了，字符集也太多了，有没有一个字符集支持世界上所有的语言呢？有的！

它就是 UTF-8 （大小写均可），utf-8 字符集是万国码，包含所有语言文字和符号，我们以后使用 UTF-8 字符编码就好了。

4.3 乱码问题

如果我们保存文档用的字符编码和读取文档用的编码不是一个编码，就会出现乱码问题。

举个栗子：

使用 VSCode 新建一个文本文件：

编写一段文字，然后选择使用指定的字符编码进行保存：

可以选择 GBK 编码进行保存（VSCode 默认是 UTF-8 编码）：

关闭 VSCode，重新使用 VSCode 打开保存的文件（不关闭会有缓存），会发现之前的文档乱码了，因为打开的时候，默认是使用 UTF-8 字符编码打开。

怎么办呢？此时还有救，因为我们编写的是中文，保存的时候使用的是 GBK 保存的，只需要重新使用 GBK 编码打开就可以了：

修改使用 GBK 打开后，文档又正常显示了。

但是但是！！！需要注意，我们刚才编写的是中文，保存使用的是 GBK 进行保存，GBK 是支持中文的，所以保存是成功的，使用对应的字符编码读取就可以了。但是如果我们编写了中文，然后使用 ISO8859-1 字符编码进行保存，那完蛋了，因为 ISO8859-1 字符编码是不支持中文的，所以在保存的时候每个字符是找不到对应的二进制编码的，保存的就是一个 ?，所以文档没有成功保存！！！保存以后，使用任何的编码都无法读取文档的内容了！

也就是说，保存文档的时候，一定要选择支持文档内容的编码进行保存，只要保存成功了，选择对应的编码读取就可以了。即使使用了不对的编码打开，也只是乱码而已，文档的内容不会丢。但是如果保存的字符编码不支持保存的内容，那完犊子了，你内容就没有成功，切记切记！！！

下面是使用 ISO8859-1 保存中文后的效果：

当然，我们以后使用 UTF-8 编码就可以了，保存和读取都使用 UTF-8，没毛病！

在编写 HTML 文件的时候，使用 UTF-8 字符编码进行保存，然后通过 meta 标签来设置网页的字符集，让浏览器使用 utf-8 字符集来进行解析，避免乱码问题。

1	<meta charset="utf-8" />

5 文本语义标签

学习HTML就是学习各个标签如何使用，下面先从文本标签学起。

5.1 h1、p、br标签

下面我们介绍几个标签，**<h1>** 、 <p> 、**<br/>**

注：后面 head 中的代码没有改变，在演示的时候就不罗列了，只列出 body 标签中的内容。

编写代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>网页的标题</title>
  </head>
  
  <body>
    <h1>春夜喜雨</h1>
    <h2>[唐] 杜甫</h2>
    <p>
        好雨知时节，当春乃发生。
        随风潜入夜，润物细无声。
        野径云俱黑，江船火独明。
        晓看红湿处，花重锦官城。
    </p>
	</body>
</html>

显示的效果如下：

下面来解释一下：

**<h1> 标签一级标题标签，<h2> 表示二级标题标签，在HTML中，总共有6级标题，<h1> 定义最大的标题， <h6> 定义最小的标题。一般一个页面中，最好只定义1个一级标题，当然你定义一堆一级标题，对这个页面没有任何影响，只是一级标题是最重要的内容，搜索引擎在检索的时候，通过一级标题知道这个页面的内容重点是什么。一般在使用的时候，也就用 h1 - h3 也就够了，其他的的就表示内容没那么重要了。
<p> 标签表示的是段落，一般一个段落使用一个 p 标签。
我们在 <p> 标签中写了多行内容，显示的时候，发现都显示在一行了。在 HTML 中，回车是无法换行的，如果想换行，需要使用 <br /> 标签。有很多人将 <br/> 写成 <br>，效果是一样的。

使用 <br/> 标签，修改代码如下：

<body>
    <h1>春夜喜雨</h1>
    <h2>[唐] 杜甫</h2>
    <p>
        好雨知时节，当春乃发生。<br/>
        随风潜入夜，润物细无声。<br/>
        野径云俱黑，江船火独明。<br/>
        晓看红湿处，花重锦官城。
    </p>
</body>

显示效果如下：

5.2 文本格式化标签

我们继续修改上面的代码，将代码修改为如下：

<body>
    <h1>春夜喜雨</h1>
    <h2>[唐] 杜甫</h2>
    <p>
        好雨知时节，当春乃发生。<br/>
        随风潜入夜，<em>润</em>物细无声。<br/>
        野径云俱黑，江船火独明。<br/>
        晓看红湿处，花重锦官城。
    </p>
</body>

用 <em> 标签将 润 字包起来，显示效果如下：

润 字变成了斜体。

解释一下：

上面使用了 <em> 标签，**<em>** 标签的作用是用于标记重点强调的文本。

这里需要强调：

HTML 只负责页面的结构，CSS负责表现，用于控制页面中元素的样式。所以我们在学习HTML标签的时候，不要关心标签的样式，不要关心大小、斜体、位置等样式内容，例如不要关心 <h1> 标签字体的大小，<em> 标签的字体是斜体，统统不要关心，这些元素的样式都是可以通过 CSS 来修改的，CSS负责元素的样式。

那么应该关注 HTML 标签的什么信息呢？

我们需要关注标签的语义，就是标签代表什么含义就可以了。我们做什么时候用什么标签，不要关心标签显示的样式。

下面介绍一下其他的一些文本格式化标签：

标签	描述
`<b>`	定义粗体文本
`<em>`	定义着重文字
`<i>`	定义斜体字
`<small>`	定义小号字
`<strong>`	定义加重语气
`<sub>`	定义下标字
`<sup>`	定义上标字
`<ins>`	定义插入字
`<del>`	定义删除字

但其实吧，上面的标签用的都不是很多，很多情况下都是使用 <span> 标签，然后使用 CSS 控制样式，那么 <span> 标签表示什么语义呢？

没有语义，就是用来包裹文字的标签。下面看看各个标签的效果：

代码：

<body>
    b 标签：<b>定义粗体文本。</b> <br/>
    em 标签：<em>定义着重文字。</em> <br/>
    i 标签：<i>定义斜体字。</i> <br/>
    small 标签：<small>定义小号字。</small> <br/>
    strong 标签：<strong>定义加重语气。</strong> <br/>
    sub 标签：<sub>定义下标字。</sub> <br/>
    sup 标签：<sup>定义上标字。</sup> <br/>
    ins 标签：<ins>定义插入字。</ins> <br/>
    del 标签：<del>定义删除字。</del> <br/>
    span 标签：<span>普通文本。</span>
</body>

效果：

为什么我们编写HTML只关心语义，不关心样式？

首先，HTML只负责页面的结构，CSS负责表现，所以样式由CSS负责。在编写页面的时候，我们用到了很多的标签，其实像上面的标签，我们都可以使用其中一种标签写，然后使用CSS来控制样式，达到相同的效果。

那么既然能达到相同的效果，为什么又要使用不同的标签来呢？

我们在看网页的时候，各种标签在CSS的修饰下，最终都可以实现相同的样式，所以标签的语义对于看网页的人来说没有什么区别。但是浏览器、搜索引擎、拼写检查程序、翻译系统等组件，在遇到不同的语义标签的时候，会针对不同的语义标签做不同的处理，所以语义标签最大的意义还是给这些组件去用的，例如搜索引擎读取到网页的 <h1> 标题标签，那么就知道页面的重点是什么。

下面再介绍一些标签，我们只关心它们的语义及可以了，具体显示的样式不需要那么关心。这些标签在开发中用的比较少，了解一下即可。HTML标签很难全都记住，有时候需要查询文档，大家可以查看 w3school 网站了解一下各个标签如何使用。这里就不就细节一一展开说明，不影响我们后面的学习。

计算机输出 标签：

标签	描述
`<code>`	用来定义计算机代码文本
`<kbd>`	定义键盘码
`<samp>`	定义计算机代码样本
`<var>`	定义变量
`<pre>`	定义预格式文本，被包围在 <pre> 标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。该标签的一个常见应用就是用来表示计算机的源代码。

上面的标签很少用到，推荐使用上面的标签吗？我只能表示 不反对。

这里也罗列一下引用、引用和术语定义相关的标签，了解一下，不需要记忆，万一有需要再查询：

标签	含义
`<abbr>`	定义缩写通过对缩写词语进行标记，能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。
`<address>`	定义地址
`<bdo>`	定义文字方向
`<blockquote>`	定义长的引用
`<q>`	定义短的引用语，浏览器经常会在标签内的内容外面插入引号。
`<cite>`	定义引用、引证

上面的标签很少用到，这里只演示两个特殊的 <q> 和 <bdo>

代码：

<body>
    <bdo dir="rtl">bdo 标签，可以定义文字显示方向。</bdo>
    
    <br/>

    孔子曰：<q>这句话会被加上双引号</q>
</body>

效果：

本章总结：

主要讲解了一些基础的标签的使用和含义，列举了很多的文本格式化标签。这里需要记住，使用标签的时候，看重的是标签的语义，而不是样式，样式是由 CSS 控制的。使用最多的还是 <span> 标签。

6 块元素和行内元素

6.1 什么是块元素和行内元素

先看演示，代码如下：

使用了<h1>、<span>、<p> 三个标签。

<body>
    <h1>一级标题</h1>
    
    <span>span标签</span>
    <span>另一个span标签</span>

    <p>
        一对情侣被食人族抓住了，食人族的首领说，你们必须吃掉对方的“屎”才能放掉你们。
        在回来的路上，女生走着走着，突然趴在路边的石头上，嚎啕大哭说：“你一点也不爱我，不然你刚才不会拉那么多。”
    </p>

    <span>好恶心呀</span>
</body>

显示效果如下：

解释一下：

我们可以看到 <h1>、<p> 标签是独占一行，<span> 标签不是独占一行的。

<h1>、<p> 标签是块元素，<span> 标签是行内元素，之前的文本格式化标签基本上都是行内元素。

6.2 块元素和行内元素的特点

块元素（block element）

在页面中，块元素独占一行；
在网页中一般通过块元素来对页面进行布局。
块元素中可以放块元素和行内元素。

行内元素（inline element）

在页面中，行内元素不能独占一行；
行内元素主要用来包裹文字；
行内元素不要放置块元素。

在开发中，我们会使用块元素进行页面的布局，使用行内元素包裹文字。（这里需要注意，现在不需要关心标签显示的位置，那是 CSS 负责的）

块元素中基本上什么都能放，但 <p> 标签比较特别，虽然 <p> 标签是块元素，但是 <p> 标签中不能放任何的块元素。

6.3 内容修正

为什么 <p> 标签中不能放任何的块元素

演示一下，代码如下，我们将 <h1> 标签放在了 <p> 标签中：

<body>
    <p>
        <h1>一级标题</h1>
        一对情侣被食人族抓住了，食人族的首领说，你们必须吃掉对方的“屎”才能放掉你们。
        在回来的路上，女生走着走着，突然趴在路边的石头上，嚎啕大哭说：“你一点也不爱我，不然你刚才不会拉那么多。”
    </p>
</body>

显示效果如下：

嗯？嗯？显示效果没有什么不同啊，和 <h1> 标签放在了 <p> 标签外面是一样的。

但其实是浏览器自动纠正了我们的代码！

在浏览器显示的内容区域，右键，查看网页源代码：

并没有发现不同， <h1> 标签还是在 <p> 标签里面呀。

浏览器纠正的是加载到内存中的文档结构，如何查看网页加载到内存中的结构呢？

需要使用浏览器的开发者工具。如何打开开发者工具？

打开开发者工具

方法1：在页面上右键，然后选择检查。

方法2：打开 更多工具 –> 开发者工具（或者Web开发者工具）

打开开发者工具，选择工具栏的元素标签页就可以查看页面中的元素了。

我们可看到 <h1> 标签并不在 <p> 标签中了，并且有两个 <p> 标签。

浏览器在解析 HTML 源码的时候，解析到 <p> 标签，继续解析寻找结束标签 </p>，结果找到了 <h1> 标签，以为开发者漏写了结束标签，所以自动给补全了结束标签 </p>，然后继续解析。解析到最后发现了一个 </p> 标签，以为漏写了开始标签，浏览器就给补全了开始标签 <p>。

可以看出浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正，例如：

<p> 元素中嵌套了块元素；
标签写在了 <body> 或 <html> 的外部。

例如下面的代码，将标签写到了 <body> 和 <html> 外面：

<body>
    <p>
        <h1>一级标题</h1>
        一对情侣被食人族抓住了，食人族的首领说，你们必须吃掉对方的“屎”才能放掉你们。
        在回来的路上，女生走着走着，突然趴在路边的石头上，嚎啕大哭说：“你一点也不爱我，不然你刚才不会拉那么多。”
    </p>
</body>
<h2>二级标题</h2>

</html>
<h3>三级标题</h3>

查看最终渲染的文档结构，浏览器也对不规范的内容进行了修正：

虽然浏览器能够对不规范的页面内容进行修正，还是不建议编写不规范的代码，一个是无法保证浏览器修正后的效果符合我们预期的效果；二是浏览器在进行修正的时候肯定需要花费额外的性能；另外对后期代码维护或团队代码协作也会造成非常不好的后果和体验。

总结

在页面中，使用块元素进行页面的布局，使用行内元素包裹文字。

7 布局语义标签

7.1 HTML5新增语义标签

我们先来看一下京东的首页：

可以看到，页面的内容是被分成很多小的区块，由一个个区块构成整个页面。

为了突出各个区块内容的差异，在HTML5中，提供了一些新的语义标签，用来对页面进行布局。

HTML5 提供的 常用（不止这些） 的布局标签主要有：

标签	描述
`<header>`	表示网页的头部，或一个区块的头部（一个页面可以有多个）
`<footer>`	表示网页的底部，通常包含有关作者的信息、版权或文件链接；也可以表示一个区块的底部（一个页面可以有多个）
`<nav>`	表示网页中的导航，常见例子是菜单、目录和索引
`<main>`	表示网页的主体部分（一个页面中只会有一个 main）
`<article>`	表示一个独立的文章，可嵌套使用。
`<aside>`	和主体相关的其他内容（侧边栏），其内容与文档的主要内容只有间接的关系，经常以边栏或呼出框的形式出现。
`<section>`	表示一个独立的区块，上边的标签都不能表示时使用 section

下面演示一下上面的标签，代码如下：

<body>
    <header>aaa</header>
    <nav>aaa</nav>
    <article>aaa</article>
    <aside>aaa</aside>
    <section>aaa</section>
    <main>aaa</main>
    <footer>aaa</footer>
</body>

效果如下：

这不都显示的是一样的吗，你 TM 在逗我？

这些新语义标签在视觉效果上基本上没有什么区别，我们在使用的时候只是关心这个标签所代表的语义，至于显示出来的样式和位置等，后面由CSS来完成。

下面看一下上面各个标签常用的布局结构，可以看看各个标签应用的位置：

布局1：

布局2：

HTML5引入新的语义标签的目的是通过不同的标签来区分不同的内容，利于SEO（搜索引擎优化），但是理想很丰满，现实很骨感，这些标签并没有被广泛应用。例如我们通过查看网页源代码，查看京东的网页会发现，京东的页面就没有使用上面的语义标签，而是使用的 <div> 标签。但是这些语义标签确实越来越广泛的被使用。

7.2 div标签

<div> 和上面的标签一样，是一个布局标签，可以替换上面所有的标签。它没有语义，所以说 **万物皆可 div **。

<div> 标签并不是 HTML5 才有的，从 w3c 组织成立的那一年（1994）就有了。

现在的网页布局用的最多的就是 <div> 标签，当然既然 HTML5 推出了新的语义标签，我们还是推荐使用新的语义标签，这是历史的滚滚车轮。

下面简单演示一下 <div> 标签：

<body>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
</body>

显示效果：

和上面的语义标签没有不同，都是一样的。

<div> 是块元素，用于布局，<span> 是行内元素，主要用于包裹文字。这两个标签几乎是整个网页的 “半壁江山”。

HTML5 中常用的布局语义标签，主要有：<header>、<nav>、<article>、<aside>、<section>、<main>、<footer>，和最常用的标签 <div>。

只是现在的布局标签没有布局的效果，后面得学习 CSS 才能完成布局效果，这里关系的是语义。

8 列表

是不是学到这里，感觉什么都做不了，连一个正式的页面也没写，不知道如何下手？

不要着急，在学习CSS之前，基本是做不了正式的页面的，做出来也是很丑的页面，所以还是继续学习页面中的各个元素，最终通过这些元素构成页面。

什么是列表

比如我们去超时买很多东西，会写一个购物清单，上面列出了要买的商品，就是一个列表，列表中是一项一项的条目。

在 HTML 中，列表分为 3 种：无序列表、有序列表、定义列表。

8.1 无序列表

无序列表，使用 <ul> 标签来创建无序列表，使用 <li> 表示列表项。

代码如下：

<body>
    <ul>
        <li>牛奶</li>
        <li>面包</li>
        <li>鸡蛋</li>
    </ul>
</body>

效果：

可以看出显示为一个列表，但是看上去有个特点，就是丑。

无序列表是三个类型的列表中用的最多的，在网页中，一般导航栏都会使用无序列表来进行构建，包括横向导航栏和纵向导航栏。

那你会问，上面的列表明明是纵向的，横向导航栏如何使用列表构建呢？

这些都是由CSS来控制的，包括上面列表前面显示了一个“点”，都是可以通过CSS去掉的，所以现在不用在意列表的样式。

8.2 有序列表

有序列表，使用 <ol> 标签来创建有序列表，使用 <li> 表示列表项。

代码如下：

<body>
    <ol>
        <li>牛奶</li>
        <li>面包</li>
        <li>鸡蛋</li>
    </ol>
</body>

效果如下：

可以看到有序列表的每个列表项前会有编号。

但其实我们在实际的开发中，有序列表和无序列表可以无差别使用，因为我们会使用CSS将无序列号和有序列表前面的“点”和“编号”去掉，一是因为很丑，另外这些样式在不同的浏览器显示会有差异，去掉“点”和“编号”，这样有序列表和无序列表就基本相同的。

8.3 定义列表

定义列表，定义列表除了列表中的每一个列表项，还包括对列表项的注释。

使用 <dl> 标签来创建定义列表，使用 <dt> 表示定义的内容，使用 <dd> 来对内容进行解释说明。

代码如下：

<body>
    <dl>
        <dt>牛奶</dt>
        <dd>牛产的奶，叫牛奶</dd>
      
        <dt>面包</dt>
        <dd>面做的包，叫面包</dd>
      
        <dt>鸡蛋</dt>
        <dd>鸡下的蛋，叫鸡蛋</dd>
    </dl>
</body>

效果如下：

总体而言，定义列表用的不多。

8.4 列表的嵌套

列表是可以嵌套的，就是在一个列表的列表项中，可以嵌套其他列表。

例如，下面在无序列表中嵌套了一个有序列表，代码如下：

<body>
    <ul>
        <li>牛奶</li>
        <li>
            面包
            <ol>
                <li>肉松面包</li>
                <li>牛奶面包</li>
                <li>火腿面包</li>
            </ol>
        </li>
        <li>鸡蛋</li>
    </ul>
</body>

显示如下：

总结：最常用的是无序列表，一般用来构建菜单。

9 超链接

9.1 关于超链接

作用：超链接可以让我们从一个页面跳转到其他页面，或者是跳转到当前页面的其他的位置。

超链接使用 <a> 标签来定义超链接，**href** 属性指定跳转的目标路径，值可以是一个外部网站的地址，也可以写一个内部页面的地址。

超链接也是一个行内元素，但是在 <a> 标签中可以嵌套除它自身外的任何元素，包括块元素。

9.2 跳转到外部页面

下面演示一下，我们定义一个超链接，当点击该超链接的时候，跳转到百度。

代码如下：

使用 href 属性，指定要跳转的路径，这里直接指向了百度的网站。

1
2
3

<body>
    <a href="https://www.baidu.com">百度</a>
</body>

显示如下：

当我们点击上面的百度的时候，就会跳转到百度。

上面是使用 绝对路径 跳转到百度，还可以 相对路径 跳转到服务器内部的其他页面。

9.3 跳转到服务器内部页面

当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径，会以 ./ 或 ../ 开头

./ 表示当前文件所在目录，可以省略不写
../ 表示当前文件所在目录的上一级目录

例如我们有下面的项目结构：

如果想要从 index.html 跳转到 test5.html，则在 index.html 中的超链接可以写成如下：

<body>
    <a href="./test5.html">test5</a>
    <a href="test5.html">test5</a>
</body>

上面两种方式都可以，./ 是可以省略的。

如果想要从 index.html 跳转到 test3.html，则在 index.html 中的超链接可以写成如下：

<body>
    <a href="./folder1/folder1-1/test3.html">test3</a>
    <a href="folder1/folder1-1/test3.html">test3</a>
</body>

如果想要从 test2.html 跳转到 test3.html，则在 test2.html 中的超链接可以写成如下：

1
2
3

<body>
    <a href="../folder1/folder1-1/test3.html">test3</a>
</body>

test2.html 当前所在路径为 folder2 路径下， .. 表示进入上一层路径下，也就是进入到 根（HTML5目录） 路径下，然后进入到folder1目录下，再进入到 folder1-1目录下，找到 test3.html。

如果想要从 test3.html 跳转到 test2.html，则在 test3.html 中的超链接可以写成如下：

1
2
3

<body>
    <a href="../../folder2/test2.html">test2</a>
</body>

第一 .. 表示进入 folder1 路径下，第二个 .. 表示进入到根路径下，然后进入 folder2 路径下，找到 test2.html 页面。

9.4 新建页面

上面我们在点击超链接跳转到新页面的时候，都是在当前的窗口跳转的。在进行百度搜索的时候，点击搜索结果都是打开了一个新页面，那么如何在点击超链接的时候，打开新的页面呢。

这里需要用到 <a> 标签的 target 属性，用来指定超链接打开的位置，

可选值如下，前两个用的最多：

_self ：表示在当前页面中打开超链接，默认值。
_blank ：表示在新建页面中打开超链接。
_parent ：表示在父窗口中打开链接。
_top ：表示在当前窗体打开链接，并替换当前的整个窗体(框架页)。

使用如下：

<body>
    <a href="test5.html">在当前页面打开test5</a>
    <a href="test5.html" target="_self">在当前页面打开test5</a>
    <a href="test5.html" target="_blank">在新页面打开test5</a>
</body>

9.5 锚点跳转

我们经常看到有的网页会在页面的底部有一个按钮，叫 回到顶部，当点击这个按钮的时候，不会发生页面跳转，而是会回到当前页面的顶部；有时候点击链接还可以在当前页面跳转到指定的位置，甚至可能还有回到底部的功能，都是通过超链接实现的。

1 回到顶部

为了让页面很长，可以滚动，在页面底部可以添加一个 回到顶部 的超链接。为此我诗兴大发，在此淫诗一首。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>锚点</title>
</head>
<body>
    <h1>琵琶行</h1>
    <p>
        元和十年，予左迁九江郡司马。明年秋，送客湓浦口，闻舟中夜弹琵琶者，听其音，铮铮然有京都声。问其人，本长安倡女，尝学琵琶于穆、曹二善才，年长色衰，委身为贾人妇。遂命酒，使快弹数曲。曲罢悯然，自叙少小时欢乐事，今漂沦憔悴，转徙于江湖间。予出官二年，恬然自安，感斯人言，是夕始觉有迁谪意。因为长句，歌以赠之，凡六百一十六言，命曰《琵琶行》。
    </p>
    <p>
        浔阳江头夜送客，<br>
        枫叶荻花秋瑟瑟。<br>
        主人下马客在船，<br>
        举酒欲饮无管弦。<br>
        醉不成欢惨将别，<br>
        别时茫茫江浸月。<br>
        忽闻水上琵琶声，<br>
        主人忘归客不发。<br>
    </p>

    <p>
        寻声暗问弹者谁，<br>
        琵琶声停欲语迟。<br>
        移船相近邀相见，<br>
        添酒回灯重开宴。<br>
        千呼万唤始出来，<br>
        犹抱琵琶半遮面。<br>
        转轴拨弦三两声，<br>
        未成曲调先有情。<br>
        弦弦掩抑声声思，<br>
        似诉平生不得志。<br>
        低眉信手续续弹，<br>
        说尽心中无限事。<br>
        轻拢慢捻抹复挑，<br>
        初为《霓裳》后《六幺》。<br>
        大弦嘈嘈如急雨，<br>
        小弦切切如私语。<br>
        嘈嘈切切错杂弹，<br>
        大珠小珠落玉盘。<br>
        间关莺语花底滑，<br>
        幽咽泉流冰下难。<br>
        冰泉冷涩弦凝绝，<br>
        凝绝不通声暂歇。<br>
        别有幽愁暗恨生，<br>
        此时无声胜有声。<br>
        银瓶乍破水浆迸，<br>
        铁骑突出刀枪鸣。<br>
        曲终收拨当心画，<br>
        四弦一声如裂帛。<br>
        东船西舫悄无言，<br>
        唯见江心秋月白。<br>
    </p>

    <p>
        沉吟放拨插弦中，<br>
        整顿衣裳起敛容。<br>
        自言本是京城女，<br>
        家在虾蟆陵下住。<br>
        十三学得琵琶成，<br>
        名属教坊第一部。<br>
        曲罢曾教善才服，<br>
        妆成每被秋娘妒。<br>
        五陵年少争缠头，<br>
        一曲红绡不知数。<br>
        钿头银篦击节碎，<br>
        血色罗裙翻酒污。<br>
        今年欢笑复明年，<br>
        秋月春风等闲度。<br>
        弟走从军阿姨死，<br>
        暮去朝来颜色故。<br>
        门前冷落鞍马稀，<br>
        老大嫁作商人妇。<br>
        商人重利轻别离，<br>
        前月浮梁买茶去。<br>
        去来江口守空船，<br>
        绕船月明江水寒。<br>
        夜深忽梦少年事，<br>
        梦啼妆泪红阑干。<br>
    </p>

    <p>
        我闻琵琶已叹息，<br>
        又闻此语重唧唧。<br>
        同是天涯沦落人，<br>
        相逢何必曾相识！<br>
        我从去年辞帝京，<br>
        谪居卧病浔阳城。<br>
        浔阳地僻无音乐，<br>
        终岁不闻丝竹声。<br>
        住近湓江地低湿，<br>
        黄芦苦竹绕宅生。<br>
        其间旦暮闻何物？<br>
        杜鹃啼血猿哀鸣。<br>
        春江花朝秋月夜，<br>
        往往取酒还独倾。<br>
        岂无山歌与村笛？<br>
        呕哑嘲哳难为听。<br>
        今夜闻君琵琶语，<br>
        如听仙乐耳暂明。<br>
        莫辞更坐弹一曲，<br>
        为君翻作《琵琶行》。<br>
    </p>

    <p>
        感我此言良久立，<br>
        却坐促弦弦转急。<br>
        凄凄不似向前声，<br>
        满座重闻皆掩泣。<br>
        座中泣下谁最多？<br>
        江州司马青衫湿。 <br>
    </p>

    <a href="#">回到顶部</a>
</body>
</html>

在最后面添加了一个超链接，超链接的 href 为 # 。

效果如下：

拉到底部，显示如下：

当点击超链接 回到顶部 的时候，页面会跳到顶部。

所以当超链接的 href 属性设置为 # ，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置。

2 跳转到页面的指定位置

我们可使用超链接跳转到页面的指定位置（锚点），只需将 href 属性设置 #目标元素的id值（唯一不重复）。

首先需要将要跳转到的位置的元素添加 id，比如我们想跳转到 ”沉吟放拨插弦中“ 开始的这段，则需要在标签上添加一个 id 属性，id 的值自己指定，但需要在当前页面唯一。

例如：

	  ....略
    四弦一声如裂帛。<br>
    东船西舫悄无言，<br>
    唯见江心秋月白。<br>
</p>

<p id="chenyin">
    沉吟放拨插弦中，<br>
    整顿衣裳起敛容。<br>
    自言本是京城女，<br>
    ....略

然后我们在文章的开头，添加一个超链接，超链接的 href 属性值为 **# + 目标元素的id值**，用于跳转到该段落。

<body>
    <h1>琵琶行</h1>
    <a href="#chenyin">跳到 沉吟放拨插弦中</a>
    <p>
        元和十年，予左迁九江郡司马。明年秋，送客湓浦口，闻舟中夜弹琵琶者，听其音，铮铮然有京都声。问其人，本长安倡女，尝学琵琶于穆、曹二善才，年长色衰，委身为贾人妇。遂命酒，使快弹数曲。曲罢悯然，自叙少小时欢乐事，今漂沦憔悴，转徙于江湖间。予出官二年，恬然自安，感斯人言，是夕始觉有迁谪意。因为长句，歌以赠之，凡六百一十六言，命曰《琵琶行》。
    </p>
    ....略

当点击超链接的时候，页面就会跳转到指定的位置。

3 占位符

有时候我们想点击超链接的时候，不会有任何效果。

纳尼，怎么会有这种需求？

真的会有这种需求，一个是写页面的时候，还不确定跳转的路径。另外可能想点击的时候不通过 href 跳转，而是通过点击超链接的事件来处理，javascript 中会用到，这里你知道有这种需求即可。

那么可以使用 javascript:void(0); 来作为href 的属性，此时点击这个超链接什么也不会发生。

1
2
3

<body>
    <a href="javascript:void(0);">点击我什么都不会发生</a>
</body>

10 图片

前面学习的标签主要是布局和文字相关的，在实际中，几乎每个网页都会有图片，下面来介绍图片元素的使用。

10.1 图片标签

图片标签为 <img> ，用于向当前页面中引入一个外部图片。

例如下面在网页中引入了两张图片，通过 src 属性指定图片的路径，路径可以是网络的绝对路径，也可以是服务器内部的相对路径：

<body>
    <img src="http://www.baidu.com/img/flexible/logo/pc/result@2.png" />
    <img src="./images/yingpannvshen.jpg" />
</body>

项目结构如下，我们在项目下新建了一个 images 目录，在 images 目录下新建了一个添加了一张图片。

最终显示的效果如下：

通过上面的演示，我们看到，<img> 标签是一个自结束标签，而且多个图片是显示在同一行，但是它不属于行内元素，它属于块和行内元素之间，具有两种元素的特点。图片元素属于替换元素，通过标签引入指定的内容到页面中。

10.2 图片标签的属性

<img> 标签除了必须的 src 属性，用于指定图片的路径，还有一些其他的属性，以下做一些演示。

1 alt属性

alt 属性：图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示，搜索引擎会根据 alt 中的内容来识别图片。例如我们通过百度搜索图片的时候，搜索引擎如何知道图片的内容，虽然现在的图像识别技术已经很发达了，但是目前使用的技术仍然是通过 alt 属性来识别图片的内容。

例如，我们将路径写错，无法加载出图片，代码如下：

1
2
3

<body>
    <img src="yingpannvshen.jpg" alt="硬盘女神" />
</body>

显示如下：

2 width和height属性

width ：用于指定图片的宽度（单位是像素）；

height ：用于指定图片的高度（单位是像素）。

注意：宽度和高度中如果只设置了一个，则另一个会等比例缩放。

例如：

<body>
    <img src="./images/yingpannvshen.jpg" width="200" alt="硬盘女神" />
    <img src="./images/yingpannvshen.jpg" height="200" alt="三上" />
    <img src="./images/yingpannvshen.jpg" width="200" height="200" alt="悠亚" />
</body>

在上面的代码中，我们分别通过指定了图片的 width、height 、width 和 height，当单独指定 width 和 height 的时候，图片会等比缩放，如果同时指定 width和height ，图片会按照指定的尺寸显示，比例可能会失调。

显示如下：

10.3 图片格式

我们平时接触的图片格式，一般有 jpg（jpeg）、png、gif、webp 格式的，那么这些格式有什么区别呢？

jpg

支持的颜色丰富；
不支持透明效果；
不支持动图；
一般用来显示照片，照片一般是不需要透明度的。

png

支持的颜色丰富；
支持复杂透明；
不支持动图；
专为网页而生。

gif

支持的颜色比较单一；
支持简单透明，就是透明的区域比较规整的，复杂的透明区域，显示效果不好；
支持动图；

webp

这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式；
具备其他图片格式的所有优点，而且文件还特别的小；
缺点：兼容性不好，很多浏览器不支持。

那么我们在平时使用图片的时候应该如何选择呢？

图片效果一样的，选文件小的；图片效果不一样的，选图片效果好的。

一般情况下图片文件的大小 webp < gif < jpg < png，当然也不绝对，一般有透明度的就选择 png ，动图就选 gif，照片选择 jpg。

10.4 base64

我们先来看一下下面的一段代码：

1
2
3

<body>
    <img src="data:image/jpeg;base64,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" />
</body>

上面这一段乱七八糟的内容是什么呢？我说它是一张图片，你能信？

显示效果如下：

为什么上面这一段文本能显示成一张图片呢？

这里用到了 Base64 编码，Base64 是一种编码方式，可以用于将二进制数据（如图片）转换为可打印的 ASCII 字符。上面是将图片转换成了 Base64 编码的文本，浏览器在加载的时候，会将 Base64 编码的数据还原成图片。

如何得到图片的base64编码格式的内容？

我手动敲的。你能信？

百度搜索 在线图片转base64，就会搜索到很多在线的工具，上传图片就可以转换为 Base64 编码格式。

什么时候会用到这种加载图片的方式呢？

这种方式使用的场景不多。我们在请求服务器的时候，其实可以看到，服务器返回的是 HTML 文本，然后经过浏览器渲染显示，返回的文本是不包含图片的。每一个图片都需要重新向服务发送请求去获取。所以我们在浏览网页的时候，一般都是先看到文字，后看到图片慢慢加载出来。

所以如果想要小型的图片、音频等文件和文字一起显示的时候，可以将这些文件转换为 Base64 编码，那么图片就变成了文本内容，和文字一起加载并显示。

Base64编码的缺点：

我们可以将文字、图片等转换为 Base64，但是Base64不是加密算法，Base64 编码只是将数据从一种形式转换为另一种形式，它并不提供任何加密保护。编码后的数据很容易被解码，因此不能用于保护敏感信息。
Base64 编码会使数据大小增加约 1/3，对于大文件来说，这种膨胀会显著增加传输和存储的成本。

11 表格

在 HTML 中，表格一般用于按照行和列的方式显示数据。

11.1 表格的完整结构

一个表格完整的结构，通常包括下面几个部分：表格标题、表格头部、表格主题、表格脚注

在 HTML 中，表格不同的部分使用不同的标签，对应关系如下：

表格标题、头部、主体、脚注分别对应不同的标签：<caption> 、<thead>、<tbody> 、<tfoot> ；
表格头部、主体、脚注部分内部是一行一行，对应 <tr> 标签，行中嵌套列，对应 <th> （头部部分）和 td 标签（主体和脚注部分）；
表格的标题、头部、脚注都是可以省略的，不影响表格的显示。

下面就以上面的表格，使用 HTML 来编写：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>表格</title>
  </head>

  <body>
    <table>
      <!-- 表格标题 -->
      <caption>
        员工信息
      </caption>

      <!-- 表格头部 -->
      <thead>
        <!-- 行 -->
        <tr>
          <!-- 列 -->
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>学历</th>
        </tr>
      </thead>

      <!-- 表格主体 -->
      <tbody>
        <!-- 第1行数据 -->
        <tr>
          <!-- 列 -->
          <td>张三</td>
          <td>男</td>
          <td>35</td>
          <td>本科</td>
        </tr>
        <!-- 第2行数据 -->
        <tr>
          <td>李四</td>
          <td>女</td>
          <td>24</td>
          <td>硕士</td>
        </tr>
        <!-- 第3行数据 -->
        <tr>
          <td>王五</td>
          <td>男</td>
          <td>42</td>
          <td>大专</td>
        </tr>
      </tbody>

      <!-- 表格脚注 -->
      <tfoot>
        <!-- 行 -->
        <tr>
          <!-- 列 -->
          <td>总计：3人</td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

表格的头部、主体和脚注部分，都是行，然后行中嵌套列，也就是最小的单元格部分。

显示如下：

11.2 表格常用属性

1 边框

在上面的表格没有边框，可以通过 <table> 标签的 border 属性来添加边框。

1	<table border="1">

border="1" 表示 1 像素。

显示如下：

可以看到，设置 boder 为 1，改变的是每个单元格的边框和表格整体外部的边框，每个单元格之间是有间隙的。

如果将 border 设置大于1，那么只改变表格整体外部的边框，每个单元格的边框还是 1，例如将 boder 的值改为 10 ：

1	<table border="10">

显示如下：

所以通过 boder 属性是无法改变单元格边框的，得通过 CSS 来调整。

2 宽度

可以通过 <table> 标签的 width 属性来设置表格的整体宽度。

1	<table border="1" width="600">

width="600" 表示表格的整个宽度是 600 像素。

显示如下：

3 高度

可以通过 <table> 标签的 height 属性来设置表格的整体高度。

1	<table border="1" width="600" height="300">

height="300" 设置的是表格整体的高度最少为 300 像素，但是不会调整表格头部和脚注的高度，剩余到高度归为主体部分。说高度最少为300像素，待会后面讲 thead 的高度再说。

显示如下：

4 单元格间距

上面设置边框以后，会看到每个单元格之间存在间距，可以通过 <table> 标签的 cellspacing 属性来设置表格的单元格间距。

1	<table border="1" width="600" cellspacing="0">

cellspacing="0" 设置的是单元格间距为 0，那么每个单元格会靠在一起，但是需要注意，单元格的间隙为0，不是将边框合并。

所以显示如下，单元格的边框靠在了一起：

如果要合并边框，那么需要 CSS 来设置了。

11.3 thead属性

1 高度

<thead> 标签上，设置 border、width、cellspacing 都是不生效的，但支持设置 height。

举个栗子：

<table border="1" width="600" height="300" cellspacing="0">
      <!-- 其他：略 -->
  
      <!-- 表格头部设置高度 -->
      <thead height="300">
        
      <!-- 其他：略 -->

显示如下：

上面设置了表格头部高度为 300，表格的高度也是 300，那么表格的头部确实是 300 像素，那么表格的整体高度肯定是大于 300 的，也就是说变为最少 300 像素了。

2 对齐方式

表格头部的内容的对齐方式默认是水平居中和垂直居中。

可以通过如下属性修改水平方向和垂直方向的对齐方式：

align：修改水平方向的对齐方式，可以设置为：left、center、right ，对应左、中、右；
valign：修改垂直方向的对齐方式，可以设置为：top、middle、bottom，对应上、中、下；

举个栗子：

1 2	<!-- 设置水平居右，垂直居下 --> <thead height="100" align="right" valign="bottom">

上面设置头部对齐方式为水平居右，垂直居下。

显示如下：

11.4 tfoot属性

tfoot 的属性和 thead 的属性是一样的，支持 height、align、valign，但是默认的水平对齐方式是居左对齐。

1	<tfoot height="50" align="center" valign="middle">

上面设置水平对齐方式为居中，垂直居中。

显示如下：

11.5 tbody属性

tbody 的标签也支持设置 height、align、valign。

举个栗子：

<table border="1" width="600" height="300" cellspacing="0">
  <thead height="100">
  <!-- 其他：略 -->
  
  <!-- 重点，看这里！！！ -->
  <tbody height="50" align="center" valign="middle">
    
  <!-- 其他：略 -->
  <tfoot height="50" align="center" valign="middle">

上面设置了 tbody 高度 50，内容水平和垂直居中。

显示如下：

虽然设置了 tbody 部分的高度是50，但是没有生效，因为设置了表格的整体高度最少为 300，头部高度为100，脚注部分高度为50，那么剩余的高度 300 - 100 - 50 = 150 的高度都是属于 tbody 的，只有设置 tbody 的高度大于 150 ，才能看出效果。

当然，如果不设置表格的整体高度，那么设置了 tbody 的高度为 50 也是不生效的，因为显示中间三行数据，也是要超过50像素的，所以只有设置超过数据显示的高度，才有效果。

11.6 tr属性

<tr> 标签是行，也支持设置 height、align、valign 属性。

举个栗子：

<table border="1" width="600" cellspacing="0">
  <tbody>
        <!-- 第1行数据 -->
        <tr height="100" align="center" valign="middle">

上面设置了第一行数据的高度、内容水平和垂直居中。

显示如下：

11.7 th和td属性

<th> 和 <td> 标签都是单元格，只是 <th> 是表格头部中单元格。

<th> 和 <td> 标签支持设置 width、 height、align、valign 属性。

如果给<th> 和 <td> 标签支持设置 width 或 height ，将会改变所在那一列或一行的宽度和高度。

举个栗子：

<table border="1" width="600" cellspacing="0">
      <!-- 表格标题，略 -->
      <!-- 表格头部，略 -->
  
      <!-- 表格主体 -->
      <tbody>
        <!-- 第1行数据 -->
        <tr height="50" align="center" valign="middle">
          <!-- 列 -->
          <td width="100" height="100" align="right" valign="bottom">张三</td>

上面设置了 <td> 的宽度和高度，那么将改变所在行的高度、所在列的宽度；当然对齐方式只改变单元格自己。
修改表格头部的 <th> 效果也是一样的。

显示如下：

如果给同一行的多个 <td> 设置高度，那么最大值生效；

如果给同一列的多个 <td> 设置宽度，那么最大值生效；

<table border="1" width="600" cellspacing="0">
      <!-- 表格标题，略 -->
      <!-- 表格头部，略 -->

      <!-- 表格主体 -->
      <tbody>
        <!-- 第1行数据 -->
        <tr height="50" align="center" valign="middle">
          <!-- 列 -->
          <td width="100" height="100" align="right" valign="bottom">张三</td>
          <td height="200">男</td>
          <td>35</td>
          <td>本科</td>
        </tr>
        <!-- 第2行数据 -->
        <tr>
          <td width="200">李四</td>
          <td>女</td>
          <td>24</td>
          <td>硕士</td>
        </tr>
        <!-- 略 -->

上面对 张三 所在的 <td> 设置了高度 100，但是在同一行第二列也设置了高度 200，那么将使用最大值 200；
对 张三 所在的 <td> 设置了宽度 100，但是在同一列第二行也设置了宽度 200，那么将使用最大值 200；

显示如下：

上面对表格的各种显示效果进行了设置，例如边框、宽、高等，但是在实际的开发中，这些都不会使用的，对表格样式的各种调整，都是通过 CSS 来控制的。这里学习的属性了解一下，后面学习 CSS 吧。

11.8 跨行与跨列

实现下面这个单元格：

上面的表格张三和李四的姓名需要跨 3 行，最后一行的总计，需要跨 3 列。

实现思路：

通过 <td> 标签的 rowspan 属性设置跨行， colspan 属性设置跨列。

所以实现上面的代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>表格</title>
  </head>

  <body>
    <table border="1" cellspacing="0">
      <caption>
        学生成绩
      </caption>

      <thead>
        <tr>
          <th width="200">姓名</th>
          <th width="200">课程</th>
          <th width="200">成绩</th>
        </tr>
      </thead>

      <tbody align="center" valign="middle">
        <!-- 第1行数据 -->
        <tr>
          <!-- 设置跨3行 -->
          <td rowspan="3">张三</td>
          <td>语文</td>
          <td>100</td>
        </tr>

        <tr>
          <!-- 这里被跨行了，所以这一行只有2个td -->
          <td>数学</td>
          <td>96</td>
        </tr>

        <tr>
          <!-- 这里被跨行了，所以这一行只有2个td -->
          <td>英语</td>
          <td>98</td>
        </tr>

        <tr>
          <!-- 设置跨3行 -->
          <td rowspan="3">李四</td>
          <td>语文</td>
          <td>95</td>
        </tr>

        <tr>
          <!-- 这里被跨行了，所以这一行只有2个td -->
          <td>数学</td>
          <td>100</td>
        </tr>

        <tr>
          <!-- 这里被跨行了，所以这一行只有2个td -->
          <td>英语</td>
          <td>99</td>
        </tr>
      </tbody>

      <!-- 表格脚注 -->
      <tfoot>
        <tr>
          <!-- 设置跨3列 -->
          <td colspan="3">总计：3人</td>
          <!-- 这里被跨列了，所以只有一个td -->
        </tr>
      </tfoot>
    </table>
  </body>
</html>

按照前面实现思路的图，设置指定的 <tb> 跨行和跨列，然后删除被跨行和跨列占用位置的 <tb> 即可。

显示如下：

这个章节介绍了太多表格相关的属性，其中关于表格样式的设置太多了，实际开发中都是通过 CSS 来设置的，这里了解一下即可。

12 表单元素

什么是表单？

表单（Form） 是网页中用于收集用户输入的数据的一种机制。HTML 表单通常用于用户注册、登录、保存用户信息、评论等场景，表单的作用就是将数据发送给服务器进行处理。HTML5 对表单进行了一些增强，使得表单元素更加灵活和功能丰富。

例如常用的表单的场景：

12.1 表单的简单使用

表单的作用就是将数据提交给服务器，因为这里我们没有服务器，所以这里以百度的服务器作为服务器，向百度服务器发送搜索请求。

我们在百度搜索框输入数据，是将数据发送给 https://www.baidu.com/s ，服务器接收的搜索框的搜索条件的参数是 wd 。

我们也向这个服务器地址发送请求，将输入框的数据传递给服务器的 wd 参数。

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>表单</title>
  </head>

  <body>
    
    <form action="https://www.baidu.com/s">
        <input type="text" name="wd">
        <button>百度一下</button>
    </form>
    
  </body>
</html>

<form> 是 HTML 中创建表单的核心标签，action 指定表单数据提交的 URL，通常是服务器端处理数据的路径。
<input> 用于创建文本输入框，type="text" 表示的是单行文本输入框，name="wd" 表示输入框的内容将传递给服务器的 wd 参数，因为百度的服务接收大参数就是 wd ，所以这里必须这么写，需要和服务器对应。
当点击按钮后，会提交 form 表单中的数据给服务器。

显示如下：

在上面的文本框中输入内容，就可以点击按钮进行搜索了，页面会跳转到百度，例如输入 for技术栈 进行搜索，结果如下：

12.2 form标签

<form> 还有几个常用的参数：

method ：用于指定表单的提交方式，通常的方式有 Get 和 Post 方式，默认是 Get 请求。Get 请求会将参数追加到 URL 地址上进行提交，适用于数据量较小、无安全要求的场景；POST 会通过请求体提交数据，适用于较大、敏感的数据（如用户注册、登录等）。具体的提交方式得看服务器的支持。
target ：指定表单提交后在哪里打开窗口。常用的值有 _self 在当前窗口（默认值）；_blank在新窗口或新标签页；_parent 在父框架中加载响应；_top 在整个浏览器窗口中加载响应（即不再显示框架）。

举个栗子：

<form action="https://www.baidu.com/s" method="get" target="_black">
    <input type="text" name="wd">
    <button>百度一下</button>
</form>

点击按钮后，会在新标签中打开搜索窗口。

在上面的 <form> 标签也中，只有一个文本框表单控件可以输入数据，我们还可以通过添加文本域、单选按钮、多选按钮、下拉列表等表单控件提供数据，下面就来介绍各种常用的数据输入类型。

12.3 input标签

<input> 用于创建各种类型的输入框。HTML5 引入了多种新的输入类型，改善了用户体验。

<form action="https://www.baidu.com/s" method="get" target="_black">
    用户名：<input type="text" name="username" placeholder="请输入用户名" maxlength="24" /><br/>
    密码：<input type="password" name="password" placeholder="请输入密码" maxlength="24"/>
</form>

上面创建了两个文本框，用来输入用户名和密码，每个控件的 name 需要和服务器接收的参数对应，这个要看服务器的参数。
type 支持多种类型，type="text" 就是普通的文本，type="password" 是密码，输入的内容会变成 * ；
placeholder 是输入框的提示信息，输入内容后就会消失。
maxlength 表示文本可以输入的最大长度，超过最大长度就无法继续输入了。

显示如下：

1 value属性

表单中的各个控件一般都有一个 value 属性，可以设置控件的默认值。

举个栗子：

<form action="https://www.baidu.com/s" method="get" target="_black">
    用户名：<input type="text" name="username" placeholder="请输入用户名" value="foooor" /><br/>
    密码：<input type="password" name="password" placeholder="请输入密码" value="123456" />
</form>

在以后学习 JavaScript 的时候，可以修改控件的 value 属性，从而实现修改控件的值，在提交表单的时候，就是将控件的 value 属性提交给服务器。

显示如下：

2 type属性

<input> 标签的 type 属性值，可以设置为如下的值：

text：单行文本输入框。
password：密码输入框，输入的内容会显示为星号或点。
email：电子邮件地址输入框，会自动验证邮箱格式。
tel：电话号码输入框，适用于电话号码输入。
number：数字输入框，支持增加和减少按钮。
date：日期输入框，可以选择日期。
range：滑块控件，用于选择数值区间。
file：文件选择框，允许用户选择文件上传。

设置为 email 类型，提交表单的时候，会验证输入的内容是否是邮箱格式：

12.4 单选框

单选框也叫单选按钮，允许用户从一组选项中选择一个选项。例如在选择用户性别的时候，只能选择一个性别。

举个栗子：

<form action="https://www.baidu.com/s" method="get" target="_black">
    <!-- 其他的表单控件，略 -->
  
    性别：<input type="radio" name="gender" value="male" checked />男 
        <input type="radio" name="gender" value="female" />女
</form>

显示如下：

定义单选按钮也是使用 <input> 标签，type 为 radio ；
多个单选按钮的 name 需要相同，它们才能实现互斥，同时只能选中一个，否则都能选中；
单选按钮，需要定义 value 属性，当提交表单的时候，会将选中的单选按钮的 value 作为 name 属性指定的参数，传递给服务器，像上面的代码，服务器需要接收 gender 的参数，要么接收到 male ，要接收到 female，这里的 value 值，也需要和服务器协商一致，因为 value 值是随意定义的，你可以在选择 男 的时候，传递给服务器的值是 0，选择 女 的时候传给给服务器的值为 1，都可以；
checked 表示默认选中该单选按钮，上面表示默认选择 男 。

12.5 多选框

多选框也叫复选框，允许用户从多个选项中选择一个或多个选项。与单选框不同，用户可以选择多个选项。

举个栗子：

<form action="https://www.baidu.com/s" method="get" target="_black">
    <!-- 其他的表单控件，略 -->
    
    爱好：
      <input type="checkbox" name="hobby" value="smoking" />抽烟
      <input type="checkbox" name="hobby" value="drinking" checked />喝酒
      <input type="checkbox" name="hobby" value="haircut" />烫头
      <input type="checkbox" name="hobby" value="massage" />大保健
</form>

显示如下：

多选框也是使用 <input> 标签定义，type 类型为 checkbox，多个属于同一类别的多选框，name 名称需要相同。
每个多选框需要定义自己的 value 值，当提交表单的时候，选中的复选框将作为 name 指定的参数传递给服务器。例如上面的多选框，如果选中了 抽烟 和 喝酒 ，提交表单的时候，会将选中的多选框的值传递给服务器的 hobby 参数，这样服务器就可以接收到参数了。服务器会接收到 hobby=smoking&hobby=drinking ，在服务器端，将收到多个 hobby 参数。它们通常会作为数组来处理，具体取决于编程语言或框架，这个就是服务器关心的事了。
checked 表示默认选中。

12.6 下拉列表

<select> 用于创建下拉列表，<option> 用于定义下拉菜单中的每一项。

举个栗子：

<form action="https://www.baidu.com/s" method="get" target="_black">
  <!-- 其他的表单控件，略 -->

  星座：
  <select name="sign">
    <option value="">请选择星座</option>
    <option value="aries">白羊座</option>
    <option value="taurus">金牛座</option>
    <option value="gemini">双子座</option>
    <option value="cancer">巨蟹座</option>
    <option value="leo" selected>狮子座</option>
    <option value="virgo">处女座</option>
    <option value="libra">天秤座</option>
    <option value="scorpio">天蝎座</option>
    <option value="sagittarius">射手座</option>
    <option value="capricorn">摩羯座</option>
    <option value="aquarius">水瓶座</option>
    <option value="pisces">双鱼座</option>
  </select>
  <br />

</form>

用户从下拉列表中选择一个选项时，<select> 的 name 属性和所选择的 option 的 value 会作为表单数据提交。
selected 表示默认选中该选项。

显示如下：

还可以通过 multiple 设置允许多选，size 来设置显示多个可选项。

举个栗子：

星座：
<select name="sign" size="5" multiple>
  <option value="aries">白羊座</option>
  <option value="taurus">金牛座</option>
  <option value="gemini">双子座</option>
  <option value="cancer">巨蟹座</option>
  <option value="leo">狮子座</option>
  <option value="virgo">处女座</option>
  <option value="libra">天秤座</option>
  <option value="scorpio">天蝎座</option>
  <option value="sagittarius">射手座</option>
  <option value="capricorn">摩羯座</option>
  <option value="aquarius">水瓶座</option>
  <option value="pisces">双鱼座</option>
</select>

multiple：设置该属性，用户可以选择多个选项，可以按住 Shift 或 Ctrl （Command）进行多选。
size：定义下拉列表的显示高度，决定可见的选项数量。如果设置为大于 1 的值，则下拉列表变成一个多选框，用户可以看到更多的选项。

显示如下：

12.7 文本域

<textarea> 用于创建文本域，也就是多行文本输入框，适用于较长的文本输入（如评论、文章内容等）。

举个栗子：

<form action="https://www.baidu.com/s" method="get" target="_black">
  <!-- 其他的表单控件，略 -->

  个性签名：<textarea name="signature" cols="30" rows="5"></textarea><br />

</form>

name 属性指定了文本域的名称，表单提交时，这个名称会作为字段名传递给服务器。
rows 属性指定文本域可见的行数（即文本域的高度）；cols 属性指定文本域可见的列数（即文本域的宽度）；但是以后都是通过 CSS 来调整宽度和高度的，这里了解一下。

12.8 按钮

前面已经在表单中添加了按钮，默认实现的功能就是提交表单给服务器。

在表单中，按钮有三种功能：

提交：提交表单给服务器；
重置：重置表单中填写的数据和选择的选项，变为默认值，以供重新填写。
普通按钮：就是普通的按钮，后期可以通过 JavaScript 来处理，这里只是实现简单的按钮即可。

1 提交

一开始在表单中添加了一个按钮，就实现了提交功能，但是提交有多种写法，下面介绍一下：

<!-- 方式1 -->
<button type="submit">保存</button>

<!-- 方式2，默认type就是submit -->
<button>保存</button>

<!-- 方式3 -->
<input type="submit" value="保存" />

注意，需要写在表单中。

2 重置

<!-- 方式1 -->
<button type="reset">重置</button>

<!-- 方式2 -->
<input type="reset" value="重置" />

3 普通按钮

<!-- 方式1 -->
<button type="button">我是一个普通按钮</button>

<!-- 方式2 -->
<input type="button" value="我是一个普通按钮" />

现在只是一个普通的按钮，没有功能，具体得学习 JavaScript 后才能处理。

12.9 隐藏域

隐藏域就是一个隐藏的控件，用户是不可见的，但是在提交表单的时候，可以将控件的值提交给服务器。

这种控件类型通常用于存储一些必要的信息，比如会话数据、用户 ID 等。

举个栗子：

<form action="...">
      <!-- 其他的表单控件，略 -->
       
      <input type="hidden" name="userId" value="001" />

      <!-- 其他的表单控件，略 -->
</form>

隐藏域也是使用 input 标签，type 类型为 hidden ，name 和 value 对应参数的名称和值。

使用场景举例：

以前在前后端未分离的项目中，经常会用到，例如有一个任务列表，任务列表的数据支持编辑，当点击编辑按钮的时候，会携带任务的 id请求服务器查询任务的详细信息，服务器查询到详细信息后会指定跳转到编辑页面，这样编辑页面就可以回显任务的信息（不是将任务列表的信息传递给编辑页面，只传递 id 给服务器，通过 id 再次查询数据，用于编辑），用于编辑，此时会将任务的 id 作为隐藏域，编辑完成的时候，保存数据到服务器，会将任务信息和隐藏域的任务 id 值一起提交给服务器，服务器就知道是编辑的哪个任务。

12.10 控件的其他常用属性

1 id

所有的表单元素都可以添加 id 属性，应该说是所有的元素都可以添加 id 属性，这样我们在 CSS 和 JavaScript 中可以选择或操作对应的元素，实现对元素样式的调整或行为的控制。

举个栗子：

1	用户名：<input type="text" id="username" name="username" placeholder="请输入用户名" maxlength="24" />

所有的元素都可以添加 id，根据需要添加即可。

2 disabled

disabled 属性可以禁用表单控件，使它无法被用户修改、点击、选择等操作。需要注意：表单控件被禁用后，值也不会被提交到服务器。

这个属性可以应用于各种表单控件，如按钮、输入框、下拉列表、复选框、单选框等。

举个例子：

<form action="https://www.baidu.com/s" method="get" target="_black">
  用户名：<input type="text" name="username" placeholder="请输入用户名" maxlength="24" disabled /><br />
  密码：<input type="password" name="password" placeholder="请输入密码" maxlength="24"/><br />
  性别：
  <input type="radio" name="gender" value="male" checked="true" />男
  <input type="radio" name="gender" value="female" disabled />女<br />

  爱好：
  <input type="checkbox" name="hobby" value="smoking" disabled />抽烟
  <input type="checkbox" name="hobby" value="drinking" checked="true" />喝酒
  <input type="checkbox" name="hobby" value="haircut" />烫头
  <input type="checkbox" name="hobby" value="massage" />大保健<br />

  星座：
  <select name="sign" disabled>
    <option value="aries">白羊座</option>
    <option value="taurus">金牛座</option>
    <option value="gemini" selected>双子座</option>
    <option value="cancer">巨蟹座</option>
    <option value="leo" selected>狮子座</option>
    <option value="virgo">处女座</option>
    <option value="libra">天秤座</option>
    <option value="scorpio">天蝎座</option>
    <option value="sagittarius">射手座</option>
    <option value="capricorn">摩羯座</option>
    <option value="aquarius">水瓶座</option>
    <option value="pisces">双鱼座</option>
  </select>
  <br />

  个性签名：<textarea name="signature" cols="30" rows="5" disabled></textarea><br />


  <button type="submit" disabled>保存</button>
  <button type="reset">重置</button> 
  <button type="button">普通按钮</button> 

</form>

上面对很多的控件添加了 disabled 属性，那么将无法输入、选择、点击；
单选和多选可以针对单个选项进行禁用；下拉列表可以禁用整个下拉列表，也可以禁用单个选项，使某个选项无法被选择。

显示如下：

12.11 Label标签

<label> 标签通常用于定义一个表单元素的说明文字，它与表单控件通过 for 属性（控件的 id）进行关联。点击 <label> 标签时，浏览器会将焦点移动到对应的表单控件。

举个栗子：

<form action="https://www.baidu.com/s" method="get" target="_black">

    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" placeholder="请输入用户名" />

</form>

显示如下：

label 的 for 属性需要和 input 标签的 id 属性对应，这样才能形成关联；
当点击用户名三个字的时候，焦点会自动聚焦到用户名的输入框，等待输入。

除了可以使用 for 属性进行关联，还可以将控件嵌套在 <label> 标签内。这种方式不需要使用 for 属性，直接点击标签内部的控件就能获得焦点。

<label>
    用户名：
    <input type="text" name="username" placeholder="请输入用户名" />
</label>

上面的效果是一样的。

我们可以将之前所有的表单控件都使用 <label> 标签进行包裹，例如将单选按钮使用 <label> 标签包裹：

性别：
<label>
  <input type="radio" name="gender" value="male" />男
</label>
<label>
  <input type="radio" name="gender" value="female" />女
</label>

这样点击 男 和 女 的文字，就可以选中单选按钮了。多选按钮也可以使用同样的方式。

12.12 fieldset标签

<fieldset> 标签是 HTML 中用于将表单元素分组的标签，通常与 <legend> 标签一起使用，目的是对相关表单控件进行逻辑分组，并为用户提供视觉上的区分。

举个栗子：

<form action="https://www.baidu.com/s" method="get" target="_black">
    <!-- 第一个分组 -->
    <fieldset>
        <legend>用户信息</legend>
        <label>
            用户名：
            <input type="text" name="username" placeholder="请输入用户名" />
        </label>
        <br />
        <label>
            密码：
            <input type="password" name="password" placeholder="请输入密码" />
        </label>
    </fieldset>

    <!-- 第一个分组 -->
    <fieldset>
        <legend>附加信息</legend>
        性别：
        <label>
            <input type="radio" name="gender" value="male" />男
        </label>
        <label>
            <input type="radio" name="gender" value="female" />女
        </label>
        <br/>

        爱好：
        <label>
            <input type="checkbox" name="hobby" value="smoking" />抽烟
        </label>
        <label>
            <input type="checkbox" name="hobby" value="drinking" />喝酒
        </label>
        <label>
            <input type="checkbox" name="hobby" value="haircut" />烫头
        </label>
        <label>
            <input type="checkbox" name="hobby" value="massage" />大保健<br />
        </label>
    </fieldset>


    <button type="submit">保存</button>
    <button type="reset">重置</button> 
    <button type="button">普通按钮</button> 

</form>

上面使用 <fieldset> 标签将信息分为两个部分，使用 <legend> 标签定义每个部分的标题。
大多数浏览器会默认为 <fieldset> 添加一个 1 像素的边框，并为 <legend> 提供一个较大的内边距。在学习 CSS 后，可以通过 CSS 来修改 fieldset 和 legend 的样式，如边框的颜色、宽度、字体、背景颜色等。

显示如下：

<fieldset> 和 <legend> 标签不其实也可以在 <form> 表单外部使用。

13 内联框架

<img> 标签是用来在页面中引入图片，内联框架 <iframe> 标签，用于在当前页面中引入一个其他页面，可以是外部的他人的页面也可以是项目内部的页面，用法也很相似。

这个标签现在用的也不多了，下面简单做个了解。

以前我们是可以使用 <iframe> 标签在自己的页面中嵌入百度等网站的，他们现在禁止别人在页面嵌入他们的网页了。另外需要注意的是，搜索引擎检索页面的时候，是不会检索内联框架页面中的内容的。

<iframe> 标签常用属性：

src ：指定要引入的网页的路径；
width ：指定显示区域的宽度，默认是像素，可以指定为百分比；
height ：指定显示区域的高度，默认是像素，可以指定为百分比；
frameborder ：指定内联框架的边框；
scrolling ：是否在 iframe 中显示滚动条；

<iframe> 标签是需要结束标签的。

举个栗子：

百度和QQ不让嵌入了，我们嵌入自己的网页吧，代码如下：

<body>

  <iframe src="https://cryingatnight.github.io/" width="800" height="300" frameborder="1">

  </iframe>

</body>

显示如下：

上面显示的是带边框的，不带边框的，如下：

<body>

  <iframe src="https://cryingatnight.github.io/" width="800" height="300" frameborder="0">

  </iframe>

</body>

显示如下：

上面是在页面中嵌入其他的页面，也可以嵌入项目内部的页面，我们新建两个页面，结构如下：

index.html 代码如下，在 index.html 使用 iframe 标签嵌入 footer.html 页面：

<body>
    index上面的内容
    <iframe src="./footer.html" width="800" height="300" frameborder="1"></iframe>
    index下面的内容
</body>

最终显示效果如下：

就是在当前页面嵌入了其他的页面。**<iframe>** 标签和 <img> 标签的用法很相似。

现在该标签用的不多，了解一下即可。

14 音视频

我们除了可以在页面中引入图片，还可以在页面中引入音频和视频。

14.1 音频

可以在页面中使用 <audio> 标签来引入一个外部的音频文件。

<audio> 标签常用属性：

controls ：是否允许用户控制播放，如果不添加该属性，播放器组件是不在页面显示的，只是作为页面的背景音乐，用户无法进行控制；
autoplay ：音频是否自动播放，如果设置了 autoplay，则音乐在打开页面时会自动播放。但是目前来讲大部分浏览器都不会自动对音乐进行播放，主要是怕声音可能突然太大体验不好，所以这个属性可能不好使。一般在实际开发中，自动播放都是通过JavaScript来控制的；
loop ：音频是否循环播放。

下面演示一下使用，我找到了一个音频文件，放入到项目中，结构如下：

代码如下：

1
2
3

<body>
    <audio src="assets/audio.mp3" controls autoplay loop></audio>
</body>

最终在Chrome浏览器的效果显示如下：

但是当我们使用低版本的浏览器，例如IE8打开的时候，发现什么都没有。

那么怎么办呢？

14.2 source

为什么在IE8下什么都没有显示呢？

因为有的浏览器比较旧，对 <audio> 标签不支持，所以就没有显示出标签。但是不显示也就罢了，起码给个提示吧。

如何给个提示呢？

那么我们可以使用 <source> 标签进行优化，代码如下：

<body>
    <audio controls autoplay loop>
        <source src="assets/audio.mp3" />
        对不起，您的浏览器不支持播放音频，请升级浏览器。
    </audio>
</body>

上面通过 source 标签的 src 属性来指定文件的路。当浏览器支持 audio 标签的时候，会根据 source 标签指定的路径加载音频文件。当浏览器不支持 audio 标签的时候，标签 <audio> 和 <source> 是不显示的，只会显示文字。

IE8 中显示如下：

同样，当浏览器对指定的音频格式可能不支持，可以使用 source 标签指定多个音频格式，当浏览器匹配到自己支持的音频格式时，就会加载改音频文件。

<body>
    <audio controls autoplay loop>
        <source src="assets/audio.mp3" />
        <source src="assets/audio.ogg" />
        对不起，您的浏览器不支持播放音频！请升级浏览器！
    </audio>
</body>

当浏览器支持 mp3 格式的时候，会播放 mp3 格式文件，如果浏览器不支持，会继续向下匹配，当匹配到支持 ogg 文件时，就会播放 ogg 文件。

现在浏览器一般各个音频格式都支持，但是如果为了兼容旧版本的浏览器，则需要用到上面的方法。当然上面的方式还是无法在低版本的浏览器播放音频文件的，例如IE8。

如果你说老子就想要在IE8播放音频文件，那怎么办呢，可以使用 <embed> 元素。

14.3 embed

IE8 下不支持 <audio> 标签，但是可以使用 <embed> 元素在文档中的指定位置嵌入外部内容。

这个内容是由外部应用程序或其他互动内容的来源提供的，如浏览器插件。

<body>
    <audio controls autoplay loop>
        <embed src="assets/audio.mp3" type="audio/mpeg" width="400" height="50" />
    </audio>
</body>

使用 <embed> 标签的 src 指定文件的路径，type 指定媒体资源的 MIME 类型。音频常用的MIME 类型：audio/ogg 、audio/mpeg 。

最终在IE8显示如下：

但是 <embed> 标签局限性很大，所以我们应该在高版本浏览器使用 <audio> 标签，在低版本浏览器使用 <embed>。

所以完美的写法如下：

<body>
    <audio controls autoplay loop>
        <source src="assets/audio.mp3" />
        <embed src="assets/audio.mp3" type="audio/mpeg" width="400" height="50" />
    </audio>
</body>

这里尺寸后面是可以通过 CSS 来设置的，这里可以忽略。这样高版本浏览器识别和支持 audio 和 source 标签，完成解析；低版本识别并解析 <embed> 标签。

14.4 视频

使用 <video> 标签来向网页中引入一个视频，使用方式和 <audio> 标签基本上是一样的。

所以这里直接演示最终完美的写法：

<body>
    <video controls width="480" height="320" >
        <source src="assets/video.mp4" type="video/mp4" />
        <embed src="assets/video.mp4" type="video/mp4" width="480" height="320" />
    </video>
</body>

Chrome显示如下，能够正常播放：

IE8 下显示如下，也能正常播放：

14.5 引入第三方网站视频

视频服务是比较耗费资源的，例如存储和播放的带宽，对于我们的系统而言，都是比较大的花费。

这里有一种比较 low 的处理方式，就是将我们的视频上传到第三方视频网站，然后通过链接引入。

这里以腾讯视频为例，每个视频下方都有分享按钮，点开分享，点击嵌入代码，然后复制代码放入我们自己的网页。

粘贴代码，发现其实就是使用了一个 iframe 进行了引入，我们可以设置宽度和高度。

1
2
3

<body>
    <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=e0015jtap14" allowFullScreen="true" width="480" height="360"></iframe>
</body>

这种方式比较 low 是因为，一个有广告，一个是有腾讯相关的字眼。

其他视频网站也有类似的方式，了解一下。

15 实体字符

什么是实体字符呢？

下面我们先编写一段代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>网页的标题</title>
  </head>
  
  <body>
    你    好
    b<a 或者 a>b
  </body>
</html>

最终显示的效果如下：

我们会发现我们编辑了很多的空格，但是只显示了一个空格，同时 < 和 > 以及中间的内容也没有正确显示。

这是为什么呢？

这是因为，有些时候在 HTML 中不能直接书写一些特殊符号，如：

多个连续的空格和回车只会显示一个空格（在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格）；
字母两侧的大于小于号（可能会被认为是标签并解析），所以上面 <a 或者 a> 被解析成一个标签了，没有正确显示。

如果我们需要在网页中书写这些特殊的符号，则需要使用 HTML 中的实体（转义字符）。

实体的语法：&实体的名字; ，常用的字符实体如下：

实体名称	显示结果	描述
` `		空格
`>`	>	大于号
`<`	<	小于号
`&`	&	与
`©`	©	版权
`®`	®	注册商标
`™`	™	商标
`×`	×	乘号
`÷`	÷	除号
`¿`	¿	倒问号

更多的字符实体，可参考：HTML 字符实体、HTML ISO-8859-1 参考手册

所以我们重写一开始的代码，应该写成如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>网页的标题</title>
  </head>
  
  <body>
    你&nbsp;&nbsp;&nbsp;&nbsp;好
    b&lt;a 或者 a&gt;b
  </body>
</html>

显示的效果如下：

如果要在网页上显示   呢，可以下面这样写：

1
2
3

<body>
    &amp;nbsp;
</body>

显示如下：

总结：

本章主要讲解字符实体的使用，字符实体的作用就是处理一些特殊的服务。字符实体也就是在使用特殊符号的情况下使用，平时用的不多。

16 meta 标签

16.1 什么是meta标签

<meta> 标签的作用是用于设置网页中的元数据，元数据不是给用户看的，是用于给浏览器和搜索引擎使用的。浏览器解析网页、搜索引擎的爬虫在爬取网页的时候，会针对 meta 数据做一些特殊处理。

以京东网站为例，在网页上右键单击，选择 查看网页源代码

可以看到在 <head> 标签中有很多 <meta> 标签，例如指定了字符集为 utf-8，这些数据是没有显示在网页中的。

<head>
    <meta charset="utf8" version='1'/>
    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
    <meta name="description"
          content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"/>
    <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"/>
</head>

<meta> 标签是一个自结束标签，下面来介绍一下 meta 标签常用的属性。

16.2 meta标签常用的属性

1 charset 属性

charset 属性用于设置字符集，之前已经用过了。

1	<meta charset="UTF-8">

2 name 和 content 属性

name 和 content 分别用于指定元数据的名称和内容。

name 常用的值有（不区分大小写）：

keywords：表示网站的关键字，可以同时指定多个关键字，关键字间使用 , 隔开，搜索引擎搜索网页的时候，会根据网页的关键词搜索。
description：表示网站的描述信息，会显示在搜索引擎的搜索结果中。
content ：指定的数据的内容，会作为搜索结果的超链接上的文字显示。

京东网页的设置：

1
2
3

<meta name="description"
          content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"/>
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"/>

对应搜索引擎的搜索结果如下：

我们使用 VSCode 自动生成 HTML 代码结构的时候，会有下面的代码：

1	<meta name="viewport" content="width=device-width, initial-scale=1.0">

这是用于响应式设计，确保网页在移动设备上显示良好，meta 标案设置了用户在移动设备上可以看到网页内容的区域。

**width=device-width**：设置视口宽度等于设备的宽度；
**initial-scale=1.0**：设置页面初始缩放比例为 1.0（即不缩放）。

在 CSS3 视口的章节，再详细讲解。

3 http-equiv属性

http-equiv 相当于 http 的文件头作用，它可以向浏览器传递一些有用的信息，以帮助正确和精确地显示网页内容。http-equiv 需要和 content 一起使用，content 中的内容其实就是各个参数的变量值。

格式如下：

1	<meta http-equiv="参数" content="具体的参数值" />

http-equiv 这个属性使用的也不多。

举个栗子：

每10秒刷新一次页面：

1	<meta http-equiv="refresh" content="30">

10秒后跳转（重定向）到百度：

1	<meta http-equiv="refresh" content="10;url=https://www.baidu.com" />

禁止浏览器从本地机的缓存中调阅页面内容，一旦关闭网页就无法从缓存中读取：

1	<meta http-equiv="pragma" content="no-cache" />

清除缓存，每次访问网页都需要请求服务器获取：

1	<meta http-equiv="cache-control" content="no-cache" />

设定网页的到期时间，一旦网页过期，必须重新请求服务器：

1
2
3

<!-- content="0" 表示立即过期，不使用缓存 -->
<meta http-equiv="expires" content="0">
<meta http-equiv="expires" content="Wed, 13 Jun 2017 22:33:00 GMT">

告诉浏览器网页的 MIME 类型和字符编码：

1	<meta http-equiv="content-type" content="text/html;charset=utf-8">

不过上面的方式现在已经基本不用了，现在都使用 <meta charset="UTF-8"> ，在 HTML5 中，<meta charset="UTF-8"> 默认用于 text/html 类型的文档。浏览器通过上下文自动识别 HTML 文件的 MIME 类型，因此无需显式声明 text/html。

meta 标签还有一些其他的属性，可以网上搜索或查看官方文档。

17 网站图标

网站的图标就是使用浏览器访问网站的时候，标签页显示的图标，或者收藏网站的时候，显示的图标。

例如，访问百度或者小米显示的图标：

图标的设置也很简单，首先准备一个图标，一般是 .ico 格式的，可以使用 Photoshop 将图片导出为这个格式的，或者百度一下在线制作 ico 图标的网站。

图标的名称，一般情况下都命名为 favicon.ico ，并放在项目的根目录下，然后在网页中通过 <link> 标签指定。

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Yao Yinjin's Blog</title>

  <!-- 设置图标 -->
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

<body>
  https://cryingatnight.github.io/
</body>
</html>

文章来自For技术栈

实体名称	显示结果	描述
` `		空格
`>`	>	大于号
`<`	<	小于号
`&`	&	与
`©`	©	版权
`®`	®	注册商标
`™`	™	商标
`×`	×	乘号
`÷`	÷	除号
`¿`	¿	倒问号

实体名称	显示结果	描述
` `		空格
`>`	>	大于号
`<`	<	小于号
`&`	&	与
`©`	©	版权
`®`	®	注册商标
`™`	™	商标
`×`	×	乘号
`÷`	÷	除号
`¿`	¿	倒问号

实体名称	显示结果	描述
` `		空格
`>`	>	大于号
`<`	<	小于号
`&`	&	与
`©`	©	版权
`®`	®	注册商标
`™`	™	商标
`×`	×	乘号
`÷`	÷	除号
`¿`	¿	倒问号