01【HTML5】

一、HTML5概述

1.1 服务器的概念

1.1.1 什么是服务器

服务器，顾名思义就是提供服务的机器，我们接入接入互联网之后，可以使用浏览器访问各大网站；当我们在地址栏上输入了网站地址并按下回车键时，我们的浏览器会根据地址在互联网中找到这个地址所对应的服务器；服务器接收到浏览器的请求后，会将数据（HTML）返回给该浏览器；然后经过浏览器的解析、渲染等就变成了一个精美的页面了；

1.1.2 服务器的概念

服务器分为硬件层面上的服务器，和软件层面上的服务器；

• 从硬件层面上来说：服务器就是一台计算机；

由于互联网上的任意人都可以同时发送请求到这台服务器，因此为了保证其性能，所以服务器的硬件配置都比较优秀，包括CPU、内存、磁盘等规格都比一般家用计算机要强；

Tips：虽然手机也可以充当服务器，但手机由于性能太低等诸多因素并不会有公司拿手机充当服务器；

• 从软件层面上来说：服务器就是一个软件；

前面说到，服务器是用来接收浏览器的请求的；严谨点来说，并不能说是服务器这台计算机来接收浏览器请求的，应该说服务器的哪个软件来接收浏览器请求；两台计算机在通信时（例如使用QQ传输数据），严格来说应该是两台计算机的QQ应用程序（软件）在通信；

而能够接收浏览器发送的请求的那个软件，我们也把他叫做服务器，这个服务器是软件层面上的服务器；

如何接收客户端的请求？接受了请求之后如何响应数据到客户端？响应什么数据给客户端？等等一系列问题都是由软件层面上的服务器来完成的；

常用的服务器软件有：Nginx、Tomcat、IIS等；

因此，只要是这台计算机安装了能够处理浏览器请求的软件，那么这台计算机才能算真正意义上的"服务器"；

1.1.2 BS和CS架构

在我们所使用的软件中，根据架构可划分为C/S架构和B/S架构，两种架构具备不同的特点；

• B/S架构：Browser/Server 浏览器-服务器模式。客户端使用浏览器来访问服务器。

BS架构的特点：

1. 客户端使用的是浏览器，只要有浏览器就可以执行我们程序。
2. 服务器升级，客户端可以无缝升级，就可以直接使用最新的功能。

---

• C/S架构：Client/Server 客户端-服务器模式。用户需要在本地电脑上安装客户端软件，再来访问服务器。

C/S架构的特点：

1. 必须在本地电脑安装客户端软件。
2. 如果服务器升级，客户端一般来说要伴随着要升级。客户端还会经常进行升级并且安装。

1.2 前端与后端

1.2.1 前端开发的主要内容

• 前端开发：

在网站的屏幕上看到的所有内容，都是由浏览器解析、处理、渲染相关HTML、CSS等文件后呈现出来的效果，是用户最直接接触到的东西；

前端的工作是利用HTML、CSS等技术来制作网页、主要考虑怎么能让用户觉得用起来更舒服，考虑页面布局、交互效果、页面审美等，主要是偏向用户看得见的部分。因此，前端开发也称为"客户端开发"；

如各大网站上的页面：

包括手机APP的页面：

1.2.2 后端开发的主要内容

• 后端开发：

后端属于在系统“后面”所发生的事情。在后端服务器和浏览器或应用程序之间存储网站、应用数据的服务器都在后端的工作范畴内，在应用程序或网站屏幕上看不到的东西基本上都是后端。

后端开发人员负责写出按钮工作的代码逻辑，更多是考虑业务逻辑、数据分析、数据采集、服务器配置、负载均衡、数据的存储、跨平台API设计等等。更多的是考虑用户看不到的部分，保证业务逻辑处理数据的谨慎，保证数据吞吐的性能。因此，后端也称为“服务器端开发”；

例如，我们随便打开某个APP或网站的某个页面：

当我们浏览过多的手机内容时，京东服务器仿佛知道了我们的喜好，并会在首页推送手机相关的产品：

除搜索功能外，包括网站的其他功能，如支付、物流、购物车、登录、注册、个人中心等功能的后台逻辑都是由后端工程师来完成的；

1.3 什么是HTML

1.3.1 HTML的含义

HTML的英文全称是Hyper Text Markup Language，即超文本标记语言，是一种标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即我们所见到的网页。

超文本标记语言的"超"体现在哪呢？

我们都编写过普通文本，即.txt文件；在txt文档中只能编写普通文字，除文字之外的数据都不能编写，而HTML文档除了能编写普通文字外，还能编写图形、动画、声音、表格、链接等。比普通文本更加丰富、强大；

1.3.2 HTML的发展历程

和Windows一样，随着技术的发展，HTML经历了多次版本更新。

• HTML1.0：1993年6月，HTML作为互联网工程工作小组（IETF）的工作草案发布，这个时候HTML仅仅是一个草案，而不是标准
• HTML2.0：1995年11月由IETF作为RFC 1866正式发布（成立HTML标准）；
• HTML3.2：1996年9月，IETF关闭HTML工作，由W3C来制定HTML规范。并于1997年1月14日发布HTML3.2；
• HTML4.0：由W3C发布于1997年12月18日；
• HTML4.01：由W3C发布于1999年12月24日，是在HTML4.0基础上的微小改进 ；

HTML4.01发布之后，很长一段时间里都能很好满足广大网民日常需求，但是随着时间的推移，人们开始在网上听歌、玩游戏，看视频，但是HTML所支持的网页中并不能直接插入视频、音频、动画等，这个时候Adobe率先抓住商机，推出Flash。Flash作为浏览器插件满足了上述需求。而与此同时W3C却在制定一个新的语言——XHTML；

W3C想要制定一套新的标准（XTHML）来使得HTML语法更加严格、完善；接下来的时间W3C一直专注于XHTML的标准制定；

• 2000年发布了XHTML1.0
• 2001年发布了XHTML1.1

后面的时间里W3C依旧在制定更新XHTML，并没有推动HTML的发展，这期间各大浏览器厂商都非常着急，希望HTML能够支持更强大的功能，如玩游戏、看视频等；直到2004年，各大浏览器厂商终于忍不住了，联合起来自己成立了一个组织——WHATWG；自己来制定HTML的规范。随着时间的推移，W3C也意识到了HTML的重要性，于2009年宣布终止对XHTML规范的制定，和WHATWG来一起制定HTML的规范，最终于2014年正式发布HTML5；

HTML的发展在2000年~2014年期间几乎是停滞的，加上这个时候Flash的功能愈加完善，Flash在这期间火了整整十多年；但Flash由于自身底层架构的缺陷和HTML5的推出，Flash逐渐退出了市场。

Adobe与2017年宣布将在2020年12月31日停止对Flash的所有支持，随后还建议所有用户卸载Flash Player插件以保障系统的安全；至此，Flash的时代已经落下帷幕；

1.4 浏览器介绍

1.4.1 常用浏览器概述

浏览器是网页运行的平台，我们编写好的HTML页面就是通过浏览器来解析运行的。常用的浏览器有：

• IE：1995年8月由Microsoft公司推出，用于种种原因IE的市场份额逐渐下降，在2015年4月30日，微软发布了Edge浏览器。此外，微软宣布在2022年6月15日后，正式停止对IE浏览器的维护，并且在以后的操作系统中都不会在预装IE浏览器，取而代之的是微软公司新推出的Edge浏览器
• 火狐（Firefox）：2002年9月由开源基金组织Mozilla推出
• 谷歌（Chrome）：2008年9月由Google公司推出
• 苹果（Safari）：2003年1月由Apple公司推出
• 欧朋（Opera）：1995年4月由Opera公司推出

---

2013年1月年3月到2023年3月全球浏览器PC端的市场份额：

Statcounter网站对全球的浏览器市场分析：https://gs.statcounter.com/browser-market-share/desktop/worldwide

2013年1月到2023年3月我国浏览器的市场份额：

Statcounter网站对中国的浏览器市场分析：https://gs.statcounter.com/browser-market-share/desktop/china

Google浏览器在W3C标准上支持的非常友好，非常受程序员们的青睐。另外Goole凭着出色的性能、简洁的外观等也让许多人爱不释手。通过上面的数据我们可以看到，不管是在国内还是国外，Google浏览器都是市场占用份额最高的那个。

1.4.2 浏览器的内核

浏览器内核是浏览器最核心的部分，也是最复杂的部分；我们在网站屏幕上看到的所有内容都是由浏览器内核解析、处理、渲染相关资源所呈现出来的效果；

内核主要为两部分：渲染引擎和JS引擎。

• 渲染引擎：它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
• JS引擎：负责解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。内核的种类很多，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。

1. Trident(IE内核)

Trident是IE浏览器的内核。另外，国内很多的双核浏览器的其中一核便是 Trident，Window10发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特点就是新内核 EdgeHTML。但在2018年12月，微软正式确认，新的Edge浏览器将从EdgeHTML内核迁移为Chromium内核

使用Trident内核的浏览器有：傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等。

2. Gecko(Firefox内核)

Gecko是Firefox浏览器的内核，Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。 可惜这几年已经没落了， 比如打开速度慢、升级频繁等。

3. webkit(Safari内核)

WebKit是Safari浏览器的内核，国内Android默认浏览器的内核大部分都是webkit。

使用webkit内核的浏览器有：傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器，

4. Chromium/Blink(Chrome内核)

在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发

5. Presto(Opera内核)

Presto是Opera公司自己研发的浏览器内核，并作为Opera浏览器的内核，但2016年奇虎360和昆仑万维收购了Oprea浏览器，从此也丢弃了强大的Presto内核，改用当时Google开源的webkit内核。后来Opera浏览器跟随Google将浏览器内核改为Blink内核。自此Presto内核也淡出了互联网市场。

大部分国产浏览器宣称的自己的内核，基本上也是属于webkit二次开发。

iOS以及WP7平台上，由于系统原因，系统大部分自带浏览器内核，一般是Safari或者IE内核Trident的

1.5 Web标准

Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

• 结构标准：结构规定整个网页的整体布局、骨架等，主要用HTML来完成。
• 表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要使用CSS来完成。
• 行为标准：行为可以让网页具备交互感，为网页添加许多有趣的功能；主要使用JavaScript来完成。

以人为例：HTML相当于整个人体，决定了你的高矮胖瘦。CSS相当于你穿的衣服，决定了你的外观表现。JavaScript决定了你的行为，比如你可以走路、跑步、跳远等；

二、HTML快速入门

2.1 HTML的入门

2.1.1 编写第一个HTML代码

新建一个HelloWorld.html文件，使用记事本打开：

输入如下代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title></title>
	</head>
	<body>
		Hello World！
	</body>
</html>

然后双击打开HelloWorld.html文件，经过浏览器的渲染，就变成了一个普通网页：

我们也可以在网页的空白页面处右键，查看网页的源代码：

也可以在右键菜单处，点击"检查"（大部分浏览器的快捷键是F12），实时预览网页源代码：

2.1.2 HTML代码注释

如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就可以使用注释，当浏览器不解析其中的代码。

其基本语法格式如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title></title>
	</head>
	<body>
        <!-- 我是注释的代码,不会被解析！ -->
		Hello World！
	</body>
</html>

我们双击打开该html文件，发现浏览器并没有渲染注释部分的代码：

2.2 HTML的结构

HTML有自己的语言语法骨架格式，我们在编写HTML代码，要先编写好HTML的骨架格式。

<!DOCTYPE html>		声明该文件是一个HTML文档
<html>
	<head>
		这里写页面的头部信息(主要是声明信息)
	</head>
	<body>
		这里写页面的主体信息(主要是网页的整体内容部分)
	</body>
</html>

• <!DOCTYPE html> — 文档类型。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，DOCTYPE 用来链接一些 HTML 编写守则，比如自动查错之类。DOCTYPE 在当今作用有限，仅用于保证文档正常读取。现在知道这些就足够了。
• <html></html> — html 元素。该元素包含整个页面的内容，也称作根元素。
• <head></head> — head 元素。该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。
• <meta charset="utf-8"> — 该元素指定文档使用 UTF-8 字符编码，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。
• <title></title> — title 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
• <body></body> — body 元素。该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。

2.2.1 标签的分类

在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的<html><head><body>都是HTML骨架结构标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素

标签是HTML代码的重要组成部分，所有的HTML代码都是由标签来组成的；

• 1）双标签：

<标签名> 内容 </标签名>

举例：

<body>Hello World</body>

• 2）单标签：

<标签名 />

举例：

Tips：在HTML中，标签不分大小写，但推荐使用小写。

2.2.2 标签的关系

标签中的关系分为嵌套关系和并列关系；

如下面代码：

<html>
	<head>
	</head>
    
	<body>
	</body>
</html>

• html标签和head、body标签是嵌套关系；
• head标签和body标签是并列关系；

需要注意的是，标签的嵌套不能出现错乱，如：

<html>
	<head>
    <body>
        
	</head>
	</body>
</html>

出现标签嵌套的错乱会导致标签无法被浏览器解析而出现一些问题；

2.3 标签的属性

我们可以把标签看做一类事物，但是有时候事物不够具体，我们可以通过属性让标签的功能更加具体

比如可以将手机看做是一个标签，我们在HTML中编写了一个手机标签只能说明存在了"一部手机"，但这部手机是什么品牌的，价格、颜色等信息我们都不知道，有了属性之后，我们可以把标签更加明确化；

属性的语法：

<标签名 属性1="属性值1" 属性2="属性值2" 属性n="属性值n"> 内容 </标签名>

在上面的语法中：

1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。

2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

3.任何标签的属性都有默认值，省略该属性则取默认值。

采取  键值对 的格式   key="value"  的格式

编写一个html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title></title>
	</head>
	<body>
        <!-- -->
		<hr width='400'>
	</body>
</html>

三、WebStorm开发工具

3.1 WebStorm简介

WebStorm是JetBrains公司旗下一款 JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

• 支持的语言和框架：

提供JavaScript、ECMAScript 6、TypeScript、CoffeeScript、Dart和Flow代码辅助功能

帮助编写HTML、CSS、Less、Sass和Stylus代码

支持Node.js和主流框架，如React、Angular、 Vue.js、Meteor等

---

除了WebStorm，另外市面上比较流行的开发工具还有很多，例如Visual Studio Code、Sublime Text、HbuilderX、Dreamweaver等，但无论是哪款开发工具都是用来辅助我们开发的；

下图是Jetbrains公司对JavaScript开发者使用的IDE统计情况（2021年）：

3.2 WebStorm安装

参考WebStorm安装手册

3.3 WebStorm基本使用

3.3.1 创建项目

1）打开WebStorm，点击Create New Project：

2）选择Empty Project，并选择项目的路径：

3）项目创建完毕：

4）创建html文件：

Demo01.html文件如下：

3.3.2 调整字体大小

点击菜单栏上的 File->Settings->Editor->Color Scheme->Color Scheme Font 修改字体大小

有的人习惯了按住Ctrl+滚轮上下来完成字体大小的缩放，WebStorm也支持该设置：

以同样的方法添加放大字体快捷键：

3.3.3 代码自动补全

在WebStorm工具中， Ctrl+空格的快捷键，可以帮助我们补全代码，但是这个快捷键和Windows中的输入法切换快捷键冲突，需要修改WebStorm中的快捷键。 File->Settings->keymap->Main menu->code->Completion->Basic

3.3.4 WebStorm常用快捷键

1. ctrl + F12: 可以显示当前文件的结构
2. ctrl + shift + n: 打开工程中的文件，目的是打开当前工程下任意目录的文件。
3. ctrl + d: 行复制
4. ctrl + x: 剪切行
5. ctrl + r: 替换
6. ctrl + / : 单行注释
7. ctrl + shift + / : 块注释
8. ctrl + shift + up: 行移动
9. shift + alt + up: 块移动(if(){},while(){}语句块的移动)
10. ctrl + b: 跳到变量申明处
11. ctrl + shift + ]/[: 选中块代码
12. ctrl + shift + i : 显示当前CSS选择器或者JS函数的详细信息
13. ctrl + '-/+': 可以折叠项目中的任何代码块，它不是选中折叠，而是自动识别折叠。
14. alt + '7': 显示当前的函数结构。

四、HTML常用标签

4.1 文本标签

在网页中，有时需要为文字设置一些样式如大小、粗细、颜色、斜体等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

• 常用文本标签如下：
  | 标签 | 显示效果 |
  | --- | --- |
  | <b></b>、<strong><strong> | 文字以粗体方式显示 |
  | <i></i>、<em></em> | 文字以斜体方式显示 |
  | <s></s>、<del></del> | 文字以加删除线方式显示 |
  | <u></u>、<ins></ins> | 文字以加下划线方式显示 |
  | <font></font> | 字体标签，用于给字体设置一些属性，如大小、颜色 |
  | | 换行标签（单标签） |

关于更多标签可以来网站查询：

1. W3CSchool：https://www.w3school.com.cn/
2. MDN：http://developer.mozilla.org

• 编写HTML代码测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
我是普通文本
<hr>

<b>我是b</b>
<strong>我是strong</strong>
<hr>

<i>我是i</i>
<em>我是em</em>
<hr>

<s>我是s</s>
<del>我是del</del>
<hr>

<u>我是u</u>
<ins>我是ins</ins>
<hr>

</body>
</html>

使用浏览器打开HTML代码：

查看效果：

4.2 排版标签

排版标签主要和我们后面要学习的CSS搭配使用，是参与页面布局的重要标签；

4.2.1 段落标签（p）

在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

• 代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

小V的自我介绍：大家好，我是小V，来自江西
小Z的自我介绍：大家好，我是小Z，来自广西
    
<hr>
<p>小V的自我介绍：大家好，我是小V，来自江西</p>
<p>小Z的自我介绍：大家好，我是小Z，来自广西</p>

</body>
</html>

打开浏览器查看效果：

4.2.2 标题标签（h1~h6）

标题元素可用于指定内容的标题和子标题。就像一本书的书名、每章的大标题、小标题等。HTML 文档也是一样。HTML 包括六个级别的标题， <h1> – <h6>，一般最多用到 3-4 级标题。

• 代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>第一章：初入江湖</h1>
<h2>第一章：初入江湖</h2>
<h3>第一章：初入江湖</h3>
<h4>第一章：初入江湖</h4>
<h5>第一章：初入江湖</h5>
<h6>第一章：初入江湖</h6>

<!--注意: 只有h1~h6标签,没有h7标签,解析失败-->
<h7>第一章：初入江湖</h7>
</body>
</html>

打开浏览器查看效果：

4.3 图像标签（img）

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，其基本语法格式如下：

<img src="图像URL" />

• img标签的属性：
  | 属性名 | 属性值 | 介绍 |
  | --- | --- | --- |
  | src | 一段URL文本 | 图像的路径 |
  | alt | 文本 | 当图像不能显示时的替换文本 |
  | title | 文本 | 鼠标悬停在图片上时显示的文本 |
  | witdth | 像素 | 图片的宽度 |
  | height | 像素 | 图片的高度 |
  | border | 边框粗细值 | 图片的边框 |

【代码示例】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<img src="img/1.png" alt="网络出现故障..." width="200" height="200" title="我是一张图片哦">

<hr>

<img src="img/2.png" alt="">

</body>
</html>

• 效果：

4.4 超链接标签（a）

4.4.1 超链接的用法

HTML **<a>** 元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。<a> 中的内容应该应该指明链接的意图。

• 语法：

<a href="跳转的地址" target="目标窗口的弹出方式">文本或图像</a>

• a标签的属性：
  • href：点击超链接后跳转的地址
  • target：新地址跳转的方式
    • _left：默认值，在当前页面打开超链接的地址
    • _blank：在新的页面打开超链接的地址

---

• 代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h3>跳转到外部连接：</h3>
<a href="https://www.jd.com">京东(将当前页面跳转到京东)</a>
<hr>
<a href="https://www.jd.com" target="_blank">京东(在新的页面上打开京东页面)</a>

<h3>跳转到外部连接：</h3>
<a href="96e5c17278a8b9ff2ebd7b02a70e1958">去Demo01_文本标签.html</a>

<h3>去图片：</h3>
<a href="img/1.png">去1.png图片</a>

<h3>空连接(#)：</h3>
<a href="#">空连接</a>

</body>
</html>

4.4.2 锚点的基本使用

通过创建锚点链接，用户能够快速定位到目标内容。

• 示例代码-1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--定义头部锚点-->
<font id="head"></font>

<p> 目录：</p>

<!--绑定锚点-->
<a href="#head">回到头部</a>
<a href="#bottom">回到底部</a>
<hr>
<a href="#c_1">第一章：人物生平</a>
<hr>
<a href="#c_1_1">1.1 小节 三次投戎</a>
<hr>
<a href="#c_1_2">1.2 小节 初露峥嵘</a>
<hr>
<a href="#c_1_3">1.3 小节 再归宗泽</a>
<hr>
<a href="#c_2">第二章：主要影响</a>
<hr>
<a href="#c_2_1">2.1 小节 军事</a>
<hr>
<a href="#c_2_2">2.2 小节 艺术</a>
<hr>
<a href="#c_2_3">2.3 小节 后世影响</a>


<h1>民族英雄-岳飞</h1>
<hr>
<h2 id="c_1">第一章：人物生平</h2>
<h3 id="c_1_1">1.1 三次投戎</h3>
<p>
    北宋崇宁二年二月十五日（公元1103年3月24日），岳飞出生于河北西路相州汤阴县（河南汤阴县）的一个普通农家。传说岳飞出生时，有大禽若鹄，飞鸣室上，故父母给他取名飞，字鹏举。 [7-8]
    汤阴岳飞庙塑像
    汤阴岳飞庙塑像
    岳飞少年时期，为人沉厚寡言，常负气节。喜读《左氏春秋》《孙吴兵法》等书。 [9] 曾拜周同（《说岳全传》等改为“周侗”）为师，学习骑射，能左右开弓。 [10] 不久周同病故，岳飞每逢初一、十五，都亲到坟上祭奠。 [11]
    岳飞之后又拜陈广为师，学习刀枪之法，武艺“一县无敌”。 [12] 岳飞生有神力，不满20岁时就能挽弓三百宋斤，开腰弩八石，“时人奇之”。 [13]
    宣和四年（1122年），童贯、蔡攸兵败于契丹，河北官员刘韐于真定府（河北正定县）招募“敢战士”以御辽（一说是为征辽）。岳飞应募，经过选拔，被任命为“敢战士”中的一名分队长。 [14] 20岁的岳飞自此开始了他的军戎生活。 [15]
    贼寇陶俊、贾进在相州作乱，岳飞请命前去除害。岳飞表现突出，带领百骑骑兵，用伏兵之计，生擒二贼以归。 [16]
    同年，岳飞的父亲岳和病故。岳飞辞别刘韐，离开军队，赶回汤阴为父亲守孝。宣和六年（1124年），河北等路发生水灾， [17] 岳家生计艰难，岳飞为了谋生，前往河东路平定军（山西平定县）投戎，充当骑兵效用士，不久被擢为偏校。
    宣和七年（1125年），金灭辽之后，便大举南侵攻宋。宋徽宗禅位于长子赵桓，即宋钦宗，次年改元靖康。东路金军渡过黄河包围开封，宋钦宗用李纲守卫京城，但最终还是选择求和，供奉了大批金银，许割太原、河间、中山等三郡于金。
    靖康元年（1126年），宋钦宗赵桓反悔割地，两路金军于攻破太原后会合，二次南下围困开封。赵桓在求和的同时使人送蜡书命康王赵构为河北兵马大元帅，征召各路兵马以备勤王。
    在相州城里，武翼大夫刘浩负责招募义士，收编溃兵。太原、平定军失陷后，从平定军突围回到家乡的岳飞目睹了金人入侵后人民惨遭杀戮、奴役的情形，心中愤慨，意欲投军，又担忧老母年迈，妻儿力弱，在兵乱中难保安全。岳母姚氏是位深明大义的妇女，积极勉励岳飞“从戎报国”，
    [18] 还为岳飞后背刺上“尽忠报国（后世演义为‘精忠报国’）”四字为训。 [19] 岳飞牢记母亲教诲，忍痛别过亲人，投身抗金前线。
</p>
<h3 id="c_1_2">1.2 初露峥嵘</h3>
<p>
    靖康元年（1126年）冬，康王赵构到相州，于十二月初一日开河北兵马大元帅府，岳飞随同刘浩所部一起划归大元帅府统辖。 [23-24] 刘浩为元帅府前军统制， [25]
    赵构命他南趋濬州（河南浚县西北）、滑州（河南滑县）方向以作驰援开封的疑兵，自己则率领元帅府主力北上大名府。 [26]
    南宋初年抗金形势图
    南宋初年抗金形势图
    岳飞奉刘浩的命令，带一支三百人的骑兵小队往李固渡进行侦察，在侍御林与金兵遭遇，岳飞杀死敌将，击退金军。 [27] 在滑州南的遭遇战中，岳飞奋勇当先，又以百骑杀败金军。 [28] 两次小战，岳飞的勇敢和武艺便得到显露。
    刘浩军至濬州渡黄河受阻，只得追随元帅府人马北上。 [29] 这时副元帅宗泽也赶到大名，赵构不纳宗泽全力营救开封之言，与汪伯彦等又继续向东平府（山东东平县西南）转移，只与宗泽一万人马往援开封。 [30-32]
    岳飞随刘浩部隶属宗泽，这是他初次成为宗泽的部将。 [33-34] 宗泽率部众进军开德府（河南濮阳），与金军十三战，每战皆捷。岳飞英勇奋战，以军功迁为修武郎。
</p>

<h3 id="c_1_3">1.3 再归宗泽</h3>
<p>李纲罢相后，东京开封府的留守宗泽就事实上成为抗金的中心人物。宗泽和北方的民间自发抗金武装建立了广泛的联系，收编了号称百万人的大军，积储了足供半年食用的粮草。宗泽委任王彦为“制置两河军事”，王彦便派人命岳飞所部“赴荣河把隘”。
    [56-57] 岳飞和王彦难以共事，便决定率领部伍南下东京开封府，再次接受宗泽的领导。 [58] 宗泽珍惜岳飞的才干，体谅他的爱国之心，原谅了岳飞的违反军纪（指率队离王彦之事），留在营中听候差遣。
    《论兵图》（傅伯星）
    《论兵图》（傅伯星） [59]
    建炎元年十二月（1128年1月），金军大举南侵，进犯孟州汜水关。 [60] 宗泽即派岳飞为踏白使，让他率领五百骑兵前往侦察。岳飞在汜水关一带击败金军，凯旋后，即被宗泽任命为统领，不久又提升为统制。
</p>

<h2 id="c_2">第二章：主要影响</h2>
<h3>2.1 军事</h3>
<p>
    在南宋初年的将帅中，与刘锜、吴玠等将领保守防御的作战特点相比，岳飞属于敢于主动出击的进攻性主帅。他对宋朝消极防守的军事传统有所认识，曾上奏批评宋廷“仅令自守以待敌，不敢远攻而求胜”。 [398]
    尽管战略方针受宋高宗和朝廷的阻难，岳飞仍组织了如第一次、第二次和第四次北伐那样大规模的进攻战役，改变了宋军被动挨打的守势地位；并且编练了强大的骑兵，在最有利于女真骑兵发挥威力的地形和时节，与其正面对抗，这在当时是绝无仅有的。南宋初年，具备光复失地的决心和能力的统帅唯有岳飞一人，成为时人的一致共识。范澄之为营救岳飞曾上书说：“况胡虏未灭，飞之力尚能戡定。”
    [399] 被金人拘押的宋使洪皓“言虏中所大畏服者”是岳飞， [400] 甚至在岳飞身后二十年，金人仍有“岳飞不死，大金灭矣” [401] 的说法。
</p>

<h3 id="c_2_2">2.2 艺术</h3>
<p>
    岳飞虽出身寒微，但十分注重气节涵养，在十几年的戎马生涯中，经常手不释卷，不少史料中都有他十分好学的记载。南宋初的诸大将中，岳飞书辞最勤，已有时誉。岳珂在《金佗稡编·鄂王家集序》中说：“其中心之所蕴，谋略之所施，往往见于表奏、题跋、吟咏之间。”
    [189]
    《满江红·怒发冲冠》一词，表达了要求恢复中原、统一国家的强烈愿望，饱含不可压抑的国土沦丧之痛和爱国深情。《小重山·昨夜寒蛩不住鸣》为他的上乘之作，亦为词学界所青睐。宋人杨湜在《古今词话》中评价：“其《小重山》词，梦想旧山，悲凉悱恻之至。”达到了相当的境界。又如《题鄱阳龙居寺》中“潭水寒生月，松风夜带秋”句，后世则有“不减唐人”之誉。
</p>

<h3 id="c_2_3">2.3 后世影响</h3>
<p>
    抗日战争时期，以岳飞词作谱成的歌曲《满江红》，作为激励中国人抗战的精神武器，得到了广泛传唱，对爱国军民起到了巨大的鼓舞和感召作用。 [431]
    民国初年，文字学家周承忠从岳飞手书李华《吊古战场文》碑拓中集出“还我河山”四字，刊登于《中国形势一览图》的扉面上，后又被《东方杂志》转载。1931年，“九·一八事变”
    爆发，东北沦陷，中华民族发出了抗日救亡的吼声：“还我河山，勿忘国耻。”《中国形势一览图》的编著者童世亨为激励国人，将周承忠集钩岳飞草书“还我河山”四字作为扉页，刊入再版的地理图册首页，迅速传遍全国。 [432]
    “还我河山”从此与《满江红》词一起，成为了岳飞精神的象征。
</p>

<!--定义底部锚点-->
<font id="bottom"></font>
</body>
</html>

• 效果：

4.4.3 锚点的跨页面跳转

锚点不仅可以链接到当前页面上的某个位置，也可以链接到其他页面上的某个指定位置；

• 准备第一个页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--定义头部锚点-->
<font id="head"></font>

<!--绑定锚点-->
<a href="#head">回到头部</a>
<a href="#bottom">回到底部</a>


<p>
    <a href="YueFei.html#c">岳飞生平：</a>
</p>

<a href="YueFei.html#c_1">第一章：人物生平</a>
<br>
<a href="YueFei.html#c_1_1">1.1 小节 三次投戎</a>
<br>
<a href="YueFei.html#c_1_2">1.2 小节 初露峥嵘</a>
<br>
<a href="YueFei.html#c_1_3">1.3 小节 再归宗泽</a>
<br>
<a href="YueFei.html#c_2">第二章：主要影响</a>
<br>
<a href="YueFei.html#c_2_1">2.1 小节 军事</a>
<br>
<a href="YueFei.html#c_2_2">2.2 小节 艺术</a>
<br>
<a href="YueFei.html#c_2_3">2.3 小节 后世影响</a>


<hr>

<p>
    <a href="dengshichang">邓世昌生平：</a>
</p>

<a href="DengShiChang.html#c_1">第一章：人物生平</a>
<br>
<a href="DengShiChang.html#c_1_1">1.1 小节 早年经历</a>
<br>
<a href="DengShiChang.html#c_1_2">1.2 小节 义勇从军</a>
<br>
<a href="DengShiChang.html#c_1_3">1.3 小节 奋发学习</a>
<br>
<a href="DengShiChang.html#c_2">第二章：后世纪念</a>
<br>
<a href="DengShiChang.html#c_2_1">2.1 小节 墓地</a>
<br>
<a href="DengShiChang.html#c_2_2">2.2 小节 衣冠冢</a>
<br>
<a href="DengShiChang.html#c_2_3">2.3 小节 纪念馆</a>


<h1 id="c">民族英雄-岳飞</h1>
<hr>
<h2 id="c_1">第一章：人物生平</h2>
<h3 id="c_1_1">1.1 三次投戎</h3>
<p>
    北宋崇宁二年二月十五日（公元1103年3月24日），岳飞出生于河北西路相州汤阴县（河南汤阴县）的一个普通农家。传说岳飞出生时，有大禽若鹄，飞鸣室上，故父母给他取名飞，字鹏举。 [7-8]
    汤阴岳飞庙塑像
    汤阴岳飞庙塑像
    岳飞少年时期，为人沉厚寡言，常负气节。喜读《左氏春秋》《孙吴兵法》等书。 [9] 曾拜周同（《说岳全传》等改为“周侗”）为师，学习骑射，能左右开弓。 [10] 不久周同病故，岳飞每逢初一、十五，都亲到坟上祭奠。 [11]
    岳飞之后又拜陈广为师，学习刀枪之法，武艺“一县无敌”。 [12] 岳飞生有神力，不满20岁时就能挽弓三百宋斤，开腰弩八石，“时人奇之”。 [13]
    宣和四年（1122年），童贯、蔡攸兵败于契丹，河北官员刘韐于真定府（河北正定县）招募“敢战士”以御辽（一说是为征辽）。岳飞应募，经过选拔，被任命为“敢战士”中的一名分队长。 [14] 20岁的岳飞自此开始了他的军戎生活。 [15]
    贼寇陶俊、贾进在相州作乱，岳飞请命前去除害。岳飞表现突出，带领百骑骑兵，用伏兵之计，生擒二贼以归。 [16]
    同年，岳飞的父亲岳和病故。岳飞辞别刘韐，离开军队，赶回汤阴为父亲守孝。宣和六年（1124年），河北等路发生水灾， [17] 岳家生计艰难，岳飞为了谋生，前往河东路平定军（山西平定县）投戎，充当骑兵效用士，不久被擢为偏校。
    宣和七年（1125年），金灭辽之后，便大举南侵攻宋。宋徽宗禅位于长子赵桓，即宋钦宗，次年改元靖康。东路金军渡过黄河包围开封，宋钦宗用李纲守卫京城，但最终还是选择求和，供奉了大批金银，许割太原、河间、中山等三郡于金。
    靖康元年（1126年），宋钦宗赵桓反悔割地，两路金军于攻破太原后会合，二次南下围困开封。赵桓在求和的同时使人送蜡书命康王赵构为河北兵马大元帅，征召各路兵马以备勤王。
    在相州城里，武翼大夫刘浩负责招募义士，收编溃兵。太原、平定军失陷后，从平定军突围回到家乡的岳飞目睹了金人入侵后人民惨遭杀戮、奴役的情形，心中愤慨，意欲投军，又担忧老母年迈，妻儿力弱，在兵乱中难保安全。岳母姚氏是位深明大义的妇女，积极勉励岳飞“从戎报国”，
    [18] 还为岳飞后背刺上“尽忠报国（后世演义为‘精忠报国’）”四字为训。 [19] 岳飞牢记母亲教诲，忍痛别过亲人，投身抗金前线。
</p>
<h3 id="c_1_2">1.2 初露峥嵘</h3>
<p>
    靖康元年（1126年）冬，康王赵构到相州，于十二月初一日开河北兵马大元帅府，岳飞随同刘浩所部一起划归大元帅府统辖。 [23-24] 刘浩为元帅府前军统制， [25]
    赵构命他南趋濬州（河南浚县西北）、滑州（河南滑县）方向以作驰援开封的疑兵，自己则率领元帅府主力北上大名府。 [26]
    南宋初年抗金形势图
    南宋初年抗金形势图
    岳飞奉刘浩的命令，带一支三百人的骑兵小队往李固渡进行侦察，在侍御林与金兵遭遇，岳飞杀死敌将，击退金军。 [27] 在滑州南的遭遇战中，岳飞奋勇当先，又以百骑杀败金军。 [28] 两次小战，岳飞的勇敢和武艺便得到显露。
    刘浩军至濬州渡黄河受阻，只得追随元帅府人马北上。 [29] 这时副元帅宗泽也赶到大名，赵构不纳宗泽全力营救开封之言，与汪伯彦等又继续向东平府（山东东平县西南）转移，只与宗泽一万人马往援开封。 [30-32]
    岳飞随刘浩部隶属宗泽，这是他初次成为宗泽的部将。 [33-34] 宗泽率部众进军开德府（河南濮阳），与金军十三战，每战皆捷。岳飞英勇奋战，以军功迁为修武郎。
</p>

<h3 id="c_1_3">1.3 再归宗泽</h3>
<p>李纲罢相后，东京开封府的留守宗泽就事实上成为抗金的中心人物。宗泽和北方的民间自发抗金武装建立了广泛的联系，收编了号称百万人的大军，积储了足供半年食用的粮草。宗泽委任王彦为“制置两河军事”，王彦便派人命岳飞所部“赴荣河把隘”。
    [56-57] 岳飞和王彦难以共事，便决定率领部伍南下东京开封府，再次接受宗泽的领导。 [58] 宗泽珍惜岳飞的才干，体谅他的爱国之心，原谅了岳飞的违反军纪（指率队离王彦之事），留在营中听候差遣。
    《论兵图》（傅伯星）
    《论兵图》（傅伯星） [59]
    建炎元年十二月（1128年1月），金军大举南侵，进犯孟州汜水关。 [60] 宗泽即派岳飞为踏白使，让他率领五百骑兵前往侦察。岳飞在汜水关一带击败金军，凯旋后，即被宗泽任命为统领，不久又提升为统制。
</p>

<h2 id="c_2">第二章：主要影响</h2>
<h3 id="c_2_1">2.1 军事</h3>
<p>
    在南宋初年的将帅中，与刘锜、吴玠等将领保守防御的作战特点相比，岳飞属于敢于主动出击的进攻性主帅。他对宋朝消极防守的军事传统有所认识，曾上奏批评宋廷“仅令自守以待敌，不敢远攻而求胜”。 [398]
    尽管战略方针受宋高宗和朝廷的阻难，岳飞仍组织了如第一次、第二次和第四次北伐那样大规模的进攻战役，改变了宋军被动挨打的守势地位；并且编练了强大的骑兵，在最有利于女真骑兵发挥威力的地形和时节，与其正面对抗，这在当时是绝无仅有的。南宋初年，具备光复失地的决心和能力的统帅唯有岳飞一人，成为时人的一致共识。范澄之为营救岳飞曾上书说：“况胡虏未灭，飞之力尚能戡定。”
    [399] 被金人拘押的宋使洪皓“言虏中所大畏服者”是岳飞， [400] 甚至在岳飞身后二十年，金人仍有“岳飞不死，大金灭矣” [401] 的说法。
</p>

<h3 id="c_2_2">2.2 艺术</h3>
<p>
    岳飞虽出身寒微，但十分注重气节涵养，在十几年的戎马生涯中，经常手不释卷，不少史料中都有他十分好学的记载。南宋初的诸大将中，岳飞书辞最勤，已有时誉。岳珂在《金佗稡编·鄂王家集序》中说：“其中心之所蕴，谋略之所施，往往见于表奏、题跋、吟咏之间。”
    [189]
    《满江红·怒发冲冠》一词，表达了要求恢复中原、统一国家的强烈愿望，饱含不可压抑的国土沦丧之痛和爱国深情。《小重山·昨夜寒蛩不住鸣》为他的上乘之作，亦为词学界所青睐。宋人杨湜在《古今词话》中评价：“其《小重山》词，梦想旧山，悲凉悱恻之至。”达到了相当的境界。又如《题鄱阳龙居寺》中“潭水寒生月，松风夜带秋”句，后世则有“不减唐人”之誉。
</p>

<h3 id="c_2_3">2.3 后世影响</h3>
<p>
    抗日战争时期，以岳飞词作谱成的歌曲《满江红》，作为激励中国人抗战的精神武器，得到了广泛传唱，对爱国军民起到了巨大的鼓舞和感召作用。 [431]
    民国初年，文字学家周承忠从岳飞手书李华《吊古战场文》碑拓中集出“还我河山”四字，刊登于《中国形势一览图》的扉面上，后又被《东方杂志》转载。1931年，“九·一八事变”
    爆发，东北沦陷，中华民族发出了抗日救亡的吼声：“还我河山，勿忘国耻。”《中国形势一览图》的编著者童世亨为激励国人，将周承忠集钩岳飞草书“还我河山”四字作为扉页，刊入再版的地理图册首页，迅速传遍全国。 [432]
    “还我河山”从此与《满江红》词一起，成为了岳飞精神的象征。
</p>

<!--定义底部锚点-->
<font id="bottom"></font>
</body>
</html>

• 准备第二个页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--定义头部锚点-->
<font id="head"></font>

<!--绑定锚点-->
<a href="#head">回到头部</a>
<a href="#bottom">回到底部</a>


<p>
    <a href="YueFei.html#c">岳飞生平：</a>
</p>

<a href="YueFei.html#c_1">第一章：人物生平</a>
<br>
<a href="YueFei.html#c_1_1">1.1 小节 三次投戎</a>
<br>
<a href="YueFei.html#c_1_2">1.2 小节 初露峥嵘</a>
<br>
<a href="YueFei.html#c_1_3">1.3 小节 再归宗泽</a>
<br>
<a href="YueFei.html#c_2">第二章：主要影响</a>
<br>
<a href="YueFei.html#c_2_1">2.1 小节 军事</a>
<br>
<a href="YueFei.html#c_2_2">2.2 小节 艺术</a>
<br>
<a href="YueFei.html#c_2_3">2.3 小节 后世影响</a>


<hr>

<p>
    <a href="">邓世昌生平：</a>
</p>

<a href="DengShiChang.html#c_1">第一章：人物生平</a>
<br>
<a href="DengShiChang.html#c_1_1">1.1 小节 早年经历</a>
<br>
<a href="DengShiChang.html#c_1_2">1.2 小节 义勇从军</a>
<br>
<a href="DengShiChang.html#c_1_3">1.3 小节 奋发学习</a>
<br>
<a href="DengShiChang.html#c_2">第二章：后世纪念</a>
<br>
<a href="DengShiChang.html#c_2_1">2.1 小节 墓地</a>
<br>
<a href="DengShiChang.html#c_2_2">2.2 小节 衣冠冢</a>
<br>
<a href="DengShiChang.html#c_2_3">2.3 小节 纪念馆</a>

<h1 id="c">民族英雄-邓世昌</h1>
<hr width="500">
<h2 id="c_1">第一章：人物生平</h2>
<h3 id="c_1_1">1.1 早年经历</h3>
<p>
    1849年（清道光二十九年）10月5日（农历八月十九日） [18]
    ，邓世昌出生于广东番禺县龙导尾乡（今广东省广州海珠区）（龙导尾街）。因其父邓焕庄与妻子郭氏饱受世道黑暗和战乱之苦，殷切盼望邓氏家业昌盛，就给他们的独生子起名为邓永昌，后又将其改名为邓世昌，字正卿。 [1]
    邓世昌从小资质聪颖、勤奋好学，在家乡以优异成绩学完小学学业。邓焕庄觉得，无论将来让儿子继承自己的事业，还是从事别的事业，都必须学习洋文，进而学习外国先进科学知识。这在把英语当作“蛮夷之语”的当时来说，是惊世骇俗的。当他携世昌到了上海之后，先让他进了教会学校，师从欧人学习英语、算术。世昌接受新知识能力很强，学业上进步极快，在很短时间内，就能与洋老师对话，并能看阅英美原版书籍。洋老师对他赞赏有加，十分喜欢这个聪明伶俐的学生。
</p>
<h3 id="c_1_2">1.2 义勇从军</h3>
<p>
    1867年（同治六年），沈葆桢出任福州马尾船政大臣，同时开办前学堂制造班和后学堂驾驶管轮班。学堂开始招生，生源主要为福建本地资质聪颖、粗通文字的16岁以下学生，后由于生源不足，招生一直扩展到广东、香港一带，并将年龄要求放宽到20岁以上。
    邓世昌得知此消息后立即禀告父亲，要求报考。开明的父亲毫不犹豫地答应了他的请求。邓世昌回到广州，参加考试，成绩优秀，顺利考取驾驶专业。当时参加报考的学生，家境贫寒之士占大多数，其次是受到外国影响的家庭和商人子弟、外国学堂学生。报名者必须将三代名讳、职业、保举人功名经历填写保结，并要取其父兄及本人的甘结。
    驾驶专业学生除学习英语、数学外，还学习航海天文学、航行理论和地理，经五年堂课学习后毕业。1871年（清同治十年）邓世昌从军后“第一次”回广州家乡探亲。
    1873年（同治十二年），邓世昌和其他同学一起登上“建威”练船，开始了海上远航。这次航习，先后到达厦门、香港、新加坡、槟榔屿，历时四个月。去时由教员躬督驾驶，各学员逐段眷注航海日记，测量太阳和星座的位置，练习操纵各种仪器。返航时学员们轮流驾驶，教师将航海日记仔细勘对。经过二年舰课实习后毕业。
</p>

<h3 id="c_1_3">1.3 奋发学习</h3>
<p>
    邓世昌在船政学堂攻读五年，自始至终，奋发学习，自强不息，各门功课考核皆列优等。“凡风涛、沙线、天文、地理、测量、电算、行阵诸法，暨中外交涉例文，靡不研究精通。”尤其是在随“建威”练船到南洋的实习中，表现出实际驾驶、管理舰船很高的素质和技能，深得外教的好评。加之年龄在同学中偏大，比较稳重和老练。正因如此，沈葆桢很看重他，称赞他是船政学堂中“最伶俐的青年”之一。
    同治十三年（1874年）2月，被船政大臣沈葆桢奖以五品军功，任命为“琛航”运输船大副。船政学堂培养的军官开始指挥军舰，这是中国军事教育史上的一件大事，它开辟了院校教育的先河。
    光绪元年（1875年），正值日本侵略军窥台湾、澎湖、基隆诸隘时，任“海东云”炮舰管带，巡守海口，获升千总。
    光绪三年（1877年）2月，代理“扬武”巡洋舰大副。3月，福州船政局首次派学生去英国和法国留学，根据邓世昌的全面素质和表现，完全可以选入出洋留学之列，只是因为带船人才紧缺，才让他在国内风涛海浪中锤炼。
    光绪四年（1878年），因“海东云”吨位较小，火力较弱，2月，沈葆桢调邓世昌任装备五尊前后膛炮的“振威”炮舰管带，并代理“扬武”快船管驾，奉命扼守澎湖、基隆等要塞。后获荐保守备，加都司衔。他在执行守备任务时坚决果断，用兵有方，抑制了日本侵略军的嚣张气焰。
</p>

<h2 id="c_2">第二章：后世纪念</h2>
<h3 id="c_2_1">2.1 墓地</h3>
<p>
    “甲午战争”之后，大鹿岛人民为邓世昌及其他无名烈士所修的墓，因当时财力物力所限，十分简陋。1988年，东港人民政府把这座墓迁到了东口南山的北坡上。大鹿岛人民为“致远”舰上的烈士遗骨新做了一口棺材，挑选质地最好的木料，请岛上手艺最好的木匠钉制的。墓前立了块碑，墓碑正面刻下“甲午无名将士墓”，墓碑后还写了碑文。后来据来岛的一些专家、学者见解：一般的士兵是不能进入驾驶室的，从那里打捞上来的骸骨很可能就是邓世昌的，于是就将“甲午海战无名将士墓”改为“邓世昌墓”，在横墙上写着“甲午英烈永垂不朽”。
</p>

<h3 id="c_2_2">2.2 衣冠冢</h3>
<p>
    邓世昌衣冠冢位于广州市“天河公园”内，原在天河区沙河镇天平架石鼓岭，现沙河农械厂内。清光绪二十年（1894年）邓世昌殉国后，遗体无法找回，其家属于同年冬在沙河天平架石鼓岭邓氏家族墓地为其建衣冠冢，位在墓地西南边，为传统山手墓，墓形为拢环墓，平面巳形。碑刻“光绪廿年仲冬吉日，皇清诰封中军副将邓壮节公之墓，邓荫德堂四房子孙立石”。墓中原有连州青石墓碑，年久失修，墓地已涅没。1984年，邓世昌殉难90周年纪念之际，有关部门及邓氏后人清除覆盖墓地之土层，对该墓的墓碑、拜桌、界石等进行修复，并将邓部分遗物再葬于此。1994年9月，市政府决定出资将其迁葬于东郊公园（今广州天河公园）气鲵岗上，仍为清制墓冢。新墓占地面积600多平方米，前临湖水，后依山丘。墓前竖有广州市政府勒石的“邓世昌墓重修碑记”和重刻的清御赐祭文。墓碑新立，碑文内容基本如旧墓。墓左立有广州市人民政府和天河区人民政府迁建建邓世昌墓碑记，墓右立有清光绪二十年（1894年）的御赐碑文。今墓碑是按原碑文及大小用花岗石复制的，高0.85，宽0.4米，上款刻署“光绪廿年仲冬吉日”，中刻“皇清浩封申军副将世昌邓壮节公之墓”，下款刻署“邓荫德堂四房子孙立”，右上角嵌邓的瓷像及生卒年份。墓前置花岗石“邓府拜桌”，墓地四周竖“邓府地界”的石标志。在邓世昌殉国100周年时落成。在天平架的邓氏族人墓，亦同时迁葬于邓世昌墓之西侧。
</p>

<h3 id="c_2_3">2.3 纪念馆</h3>
<p>
    邓世昌纪念馆位于广州市海珠区宝岗大道龙珠直街龙蜒里2号。其前身为“邓氏宗祠”，是邓世昌的出生地。清光绪二十一年（1895年），邓氏家人用朝廷给予的抚恤银扩建宗祠，占地面积4700平方米。邓世昌殉国后，清廷追封其为“从一品”官，故宗祠正门按一品官员规格，建6级台阶，以清代中晚期南方大祠堂的形式重建。整座建筑以长条花岗石为基础，高出地面1米后再用水磨青砖砌墙，以进口坤甸木为柱和梁架，屋顶是灰塑瓦脊、碌筒瓦面。主体建有前后座，用两廊相连，并在四角各建1座阁楼。另有东院和后花园、东西门楼、前院和照壁等。正门门额上书“邓氏宗祠”字样，两侧挂有“云台功首”、“甲午留名”的楹联。后花园有一棵紫荆树和一棵凤眼果树，据传邓世昌当年赴威海前所植。花园外东面原有车马场、清光绪、宣统年间，幕名前来瞻仰均在此下车，再步行前往祠堂拜。
    抗日战争时日军侵占广州期间，日军士兵慑于邓世昌的威望和英气，不敢破坏邓氏宗祠。民国38年（1949年）秋，邓氏族人在祠堂内创办“世昌小学”。后曾改作妇产院。1957年开始，邓氏宗祠为广州市结核病防治二所使用。“文化大革命”期间，祠内不少文物散失，附属建筑物受到不同程度破坏，部分附属用地亦被违章占用。1989年12月，邓氏宗祠被定为市级文物保护单位。1994年8月，在邓氏宗祠建立邓世昌纪念馆。如今整座建筑恢复了清代式样，祠堂的木雕亦精心复原，并涂上油漆，重现了邓氏宗祠的原貌。展品陈列线长80米，通过近600张图片和复印件、雕塑、模型、文字说明等，反映邓世昌青少年时代、甲午海战及其战后影响，使之成为“爱国主义”教育的场所。
</p>

<!--定义底部-->
<font id="bottom"></font>
</body>
</html>

4.4.4 其他功能

a标签的作用是链接，即给a标签中的href中赋予一个值，那么a标签就可以帮我们链接过去；

下面是一些特殊的链接：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 唤起设备拨号 -->
<a href="tel:10086">电话联系</a>
<hr>
<!-- 唤起设备发送邮件 -->
<a href="mailto:10086@qq.com">邮件联系</a>
<hr>
<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>
<hr>
<!--唤醒微信-->
<a href="weixin://dl/chat" target="_blank">微信联系</a>
<hr>
<!--唤醒QQ好友聊天-->
<a href="tencent://message/?Menu=yes&uin=3247607403" target="_blank">
    QQ客服
</a>
<hr>
<!--QQ一键加群-->
<a target="_blank"
   href="https://qm.qq.com/cgi-bin/qm/qr?k=ab3Sn8W7YM1HejZ7aTdMnOakXsJ1Wp5R&jump_from=webapi&authKey=6cGn/O1GnRgMzLNZvaohnFIq3mXA6cEw3khaiDFR6gtCMbYJliOLbWbm82HIcLFv"><img
        border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="Java技术交流" title="Java技术交流"></a>
</body>
</html>

4.5 列表标签

列表标签也是参与布局的重要标签之一，在页面上，列表标签的影子随处可见；在HTML中，列表分为无序列表（ul）和有序列表（ol）两大类；

4.5.1 无序列表（ul）

无序列表的各个列表项之间没有顺序级别之分，是并列的。

下面都是使用无序列表做的案例：

• 无序列表的语法如下：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项N</li>
</ul>

【代码示例】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ul>
    <li>
        家用电器
    </li>
    <li>
        手机/运营商/数码
    </li>
    <li>
        电脑/办公
    </li>
    <li>
        家居/家具/家装/厨具
    </li>
</ul>

</body>
</html>

【效果】：

为什么我们定义的无序列表没有其他网站那么好看？因为我们现在只编写了HTML代码，就相当于只存在代码的骨架，等我们后续学习了CSS就可以对该骨架进行美化啦！

4.5.2 有序列表（ol）

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义。

下面都是有序列表的应用场景：

• 有序列表的语法如下：

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项N</li>
</ol>

【代码示例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h3>新能源汽车排行榜</h3>
<ol>
    <li>
        零跑C01
    </li>
    <li>
        哪吒S
    </li>
    <li>
        比亚迪 汉 DM
    </li>
</ol>
<h3>B级汽车排行榜</h3>
<ol>
    <li>
        红旗-H5

    </li>
    <li>
        别克 君越
    </li>
    <li>
        起亚K5
    </li>
</ol>
</body>
</html>

效果如下：

Tips：ol的特性基本与ul 一致，再加上后续的样式可以通过CSS来调整，所以实际开发中，ol用的比较少，一般都统一使用ul；

4.5.3 自定义列表（dl）

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

下面是自定义列表的应用场景：

• 语法：

<dl>
  <dt>名词1</dt>
  <dd>详情1</dd>
  <dd>详情2</dd>
  <dd>详情N</dd>
    
  <dt>名词2</dt>
  <dd>详情1</dd>
  <dd>详情2</dd>
  <dd>详情N</dd>
</dl>

【代码示例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<dl>
    <dt>售后服务</dt>
    <dd>售后政策</dd>
    <dd>订单查询</dd>
    <dd>以旧换新</dd>

    <dt>关注我们</dt>
    <dd>新浪微博</dd>
    <dd>官方微信</dd>
    <dd>联系我们</dd>
</dl>

</body>
</html>

【效果如下】

4.6 表格标签（table）

4.6.1 表格标签介绍

表格标签一般用于展示信息

• 例1：

• 例2：

4.6.2 表格的结构

一个完整的表格由：表格标题、表格头部、表格主体、表格脚注，四部分组成。

• 语法：
  • table：表格
  • caption：表格标题
  • thead：表格头部
  • tbody：表格主体
  • tfoot：表格脚注
  • tr：表格的每一行
  • th：表格的每一个单元格（用于表头）
  • td：表格的每一个单元格（用于表格的主体）

<table>
    <!-- 表格标题 -->
    <caption></caption>

    <!-- 表格头部 -->
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头N</th>
        </tr>
    </thead>

    <!-- 表格主体 -->
    <tbody>
        <tr>
            <td>内容1</td>
            <td>内容2</td>
            <td>内容N</td>
        </tr>
    </tbody>
    
    <!-- 表格脚注 -->
    <tfoot>
        <tr>
            <td>脚注1</td>
            <td>脚注2</td>
            <td>脚注N</td>
        </tr>
    </tfoot>
</table>

一个完整的表格结构如下：

【代码示例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table>
    <!-- 表格标题 -->
    <caption>汽车信息</caption>

    <!-- 表格头部 -->
    <thead>
    <tr>
        <th>品牌名称</th>
        <th>车辆名称</th>
        <th>能源类型</th>
        <th>车辆级别</th>
    </tr>
    </thead>

    <!-- 表格主体 -->
    <tbody>
    <tr>
        <td>比亚迪</td>
        <td>汉 DM-i</td>
        <td>纯电动</td>
        <td>中大型车</td>
    </tr>

    <tr>
        <td>红旗</td>
        <td>红旗 H5</td>
        <td>汽油</td>
        <td>中型车</td>
    </tr>
    <tr>
        <td>零跑</td>
        <td>零跑C01</td>
        <td>纯电动</td>
        <td>中大型车</td>
    </tr>
    <tr>
        <td>深蓝汽车</td>
        <td>深蓝SL01</td>
        <td>增程式</td>
        <td>中型车</td>
    </tr>
    <tr>
        <td>比亚迪</td>
        <td>秦 Plus DM-i</td>
        <td>插电混动</td>
        <td>紧凑型车</td>
    </tr>
    </tbody>
    <!-- 表格脚注 -->
    <tfoot>
    <tr>
        <td>共计：五辆车</td>
    </tr>
    </tfoot>
</table>

</body>
</html>

【效果如下】

4.6.3 表格的属性

我们设计好了表格的骨架后，可以通过表格的属性来调整一些表格的样式，尽管Web标准中不推荐我们使用HTML来修改网页的样式，但HTML依旧提供这些样式；

表格常用属性如下：

• table：
  • align：设置表格水平对其的方式
    • left：左对齐
    • right：右对齐
    • center：居中对其
  • width：设置表格的宽度。当表格设置宽度后，所有的单元格将平均该宽度
  • height：设置表格的高度。当表格设置高度后，所有的单元格将平均该高度
  • border：设置表格的边框，默认为0像素
  • cellspacing：设置单元格与单元格边框之间的空白间距，默认为2像素
  • cellpadding：设置单元格内容与单元格边框之间的空白间距，默认为1像素
• thead、tbody、tfoot、tr：
  • align：设置单元格水平对其的方式
  • valign：设置单元格的垂直对其方式
    • top：顶部对齐
    • bottom：底部对齐
    • middle：中间对齐
• th、td：
  • align：单独设置单元格的水平对齐方式（th默认的水平对其方式为center，td为left）
  • valign：单独设置单元格的垂直对齐方式（th和td默认的垂直对其方式都是middle）
  • width：单独设置单元格的宽度，当修改了某一个单元格的宽度时，那么整列的单元格的宽度都会更改
  • height：单独设置单元格的高度，当修改了某一个单元格的高度时，那么整行的单元格的高度都会更改
  • rowspan：单元格行合并的个数
  • colspan：单元格列合并的个数

1）表格基本属性

【案例效果】

【代码示例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="2" cellpadding="0" cellspacing="0" align="center" width="600" height="300">
    <!-- 表格标题 -->
    <caption>笔记本信息</caption>

    <!-- 表格头部 -->
    <thead>
    <tr>
        <!--th默认的水平对齐方式为center-->
        <th height="40">品牌名称</th>
        <th>笔记本名称</th>
        <th>预计上市时间</th>
        <th>实际上市时间</th>
        <th width="100">价格</th>
    </tr>
    </thead>

    <!-- 表格主体 -->
    <tbody align="center">
    <tr>
        <!--td默认的水平对齐方式为left-->
        <td>神舟</td>
        <td>战神TX8R9</td>
        <td>2022</td>
        <td>2023</td>
        <td>6299</td>
    </tr>
    <tr>
        <td>神舟</td>
        <td>战神Z8R9</td>
        <td>2023</td>
        <td>2023</td>
        <td>6599</td>
    </tr>
    <tr>
        <td>小米</td>
        <td>小米15 Pro</td>
        <td>2021</td>
        <td>2022</td>
        <td>6499</td>
    </tr>
    <tr>
        <td>机械革命</td>
        <td>Code 01</td>
        <td>2022</td>
        <td>2022</td>
        <td>6499</td>
    </tr>
    <tr>
        <td>机械革命</td>
        <td>无界16 Pro</td>
        <td>2021</td>
        <td>2022</td>
        <td>5199</td>
    </tr>

    </tbody>
    <!-- 表格脚注 -->
    <tfoot>
    <tr>
        <td height="40">共计：五辆车</td>
    </tr>
    </tfoot>
</table>

</body>
</html>

2）单元格合并

th和td标签可以设置单元格合并效果，其属性为：

• 跨行合并：rowspan
• 跨列合并：colspan

【案例效果】

【代码示例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="2" cellpadding="0" cellspacing="0" align="center" width="600" height="300">
    <!-- 表格标题 -->
    <caption>笔记本信息</caption>

    <!-- 表格头部 -->
    <thead>
    <tr>
        <!--th默认的水平对齐方式为center-->
        <th height="40">品牌名称</th>
        <th>笔记本名称</th>
        <th>预计上市时间</th>
        <th>实际上市时间</th>
        <th width="100">价格</th>
    </tr>
    </thead>

    <!-- 表格主体 -->
    <tbody align="center">
    <tr>
        <!--td默认的水平对齐方式为left-->
        <td rowspan="2">神舟</td>
        <td>战神TX8R9</td>
        <td>2022</td>
        <td>2023</td>
        <td>6299</td>
    </tr>
    <tr>
        <td>战神Z8R9</td>
        <td colspan="2">2023</td>
        <td>6599</td>
    </tr>
    <tr>
        <td>小米</td>
        <td>小米15 Pro</td>
        <td>2021</td>
        <td rowspan="3">2022</td>
        <td rowspan="2">6499</td>
    </tr>
    <tr>
        <td rowspan="2">机械革命</td>
        <td>Code 01</td>
        <td>2022</td>
    </tr>
    <tr>
        <td>无界16 Pro</td>
        <td>2021</td>
        <td>5199</td>
    </tr>

    </tbody>
    <!-- 表格脚注 -->
    <tfoot>
    <tr>
        <td height="40">共计：五台笔记本</td>
    </tr>
    </tfoot>
</table>

</body>
</html>

4.7 表单标签（form）

4.7.1 表单标签介绍

在HTML中，表单标签用于在页面中收集用户的数据，然后将数据提交（发送）到服务器进行后端保存。表单标签在实际开发中用的非常多，常用于用户的注册、登录、搜索等需要收集用户数据的应用场景；

• 注册：

• 登录：

• 搜索：

4.7.2 表单的常用标签

1）form

form标签是表单的整体，一个form标签中包含有很多用于收集用户数据的其他标签，一个form标签代表一个表单；form标签中设置的是表单提交的服务器地址、提交的方式、提交的类型等；

• form标签的属性：
  • action：表单提交的地址
  • target：表示在提交表单之后，在哪里显示响应信息
    • _self：默认值。在本窗口打开新的提交请求。
    • _blank：在新窗口打开新的提交请求。
    • _parent：在父窗口打开新的提交请求，如果没有父级窗口，则与 _self 表现一致。
    • _top：在顶级窗口打开新的提交请求，如果没有父级窗口，则与 _self 表现一致。
  • method：表单提交的方式；HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT这几种，但普通表单只支持GET、POST提交，GET一般用于查询操作，POST一般用于新增操作
    • GET：GET提交方式一般用于查询操作
    • POST：POST提交方式一般用于新增操作
  • enctype：当 method 属性值为 post 时，enctype 用于设置提交的MIME类型，取值有：
    • application/x-www-form-urlencoded：默认值，采用URL编码提交，用于提交普通文本
    • multipart/form-data：当表单包含文件时使用此值，可以提交文本与文件；
    • text/plain：出现于 HTML5，一般用于调试场景；不对提交的数据编码，用于提交普通文本；

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form标签</title>
</head>
<body>
<form action="http://www.baidu.com" method="post" enctype="application/x-www-form-urlencoded">
    <input type="text" name="name">
    <hr>
    <input type="text" name="age">
    <hr>
    <input type="submit">
</form>
</body>
</html>

2）input

input是form表单中非常重要的标签，也是使用最频繁的标签；

input是一个输入框，用于用户输入信息用，用户输入数据的方式有很种，例如文本框、单选框、复选框、密码框、文件框等都是input标签来完成；因此input标签也有很多类型：

属性	属性值	描述
type	text	文本输入框
	password	密码输入框
	checkbox	复选框
	radio	单选按钮
	button	普通按钮
	reset	重置按钮
	submit	提交按钮
	file	文件选择框
	image	图形形式的提交按钮
name	用户自定义	输入框的名称，后端根据这个名称获取这个输入框的值
value	用户自定义	输入框的默认值
size	正整数	input控件在页面中显示的宽度
checked	checked	指示此 input 元素首次加载时应当被选中。
注释：请与 type="checkbox"
及 type="radio"
配合使用。
maxlength	正整数	控件允许输入的最多字符数
readonly	readonly	指示是否可修改该字段的值
disabled	disabled	当 input 元素首次加载时禁用此元素，这样用户就无法在其中写文本，或选定它。

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input标签</title>
</head>
<body>
<!--
    action: "/" 代表提交到本机地址
-->
<form action="/" method="post">
    用户名: <input type="text" name="username" maxlength="5" size="30">
    <hr>
    密码: <input type="password" name="password">
    <hr>
    兴趣爱好:
    唱：<input type="checkbox" name="hobby" value="chang">
    跳：<input type="checkbox" name="hobby" value="tiao">
    rap：<input type="checkbox" name="hobby" value="rap">
    篮球：<input type="checkbox" name="hobby" value="lanqiu">
    <hr>
    性别:
    <!--单选框必须name一致才可以保证单选属性-->
    男：<input type="radio" name="sex" value="0">
    女：<input type="radio" name="sex" value="1">
    <hr>
    普通按钮: <input type="button" value="我是按钮">
    <hr>
    重置按钮: <input type="reset">
    <hr>
    图片按钮: <input type="image" src="img/1.png">
    <hr>
    上传文件: <input type="file" name="pic">
    <hr>

    禁用: <input type="text" name="test1" disabled="disabled">
    <hr>
    只读: <input type="text" name="test2" readonly="readonly">
    <hr>
    <input type="submit">
</form>
</body>
</html>

案例效果：

我们打开浏览器，按下F12，打开浏览器控制台，再次重新提交，查看表单提交的数据：

3）label

label 标签为 input 元素定义标注（标签）。

作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

【代码示例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>label标签</title>
</head>
<body>
<form action="/" method="post">
    兴趣爱好:
    <!--使用id把label标签与input标签进行绑定-->
    <label for="h1">唱：</label><input id="h1" type="checkbox" name="hobby" value="chang">
    <label for="h2">跳：</label><input id="h2" type="checkbox" name="hobby" value="tiao">
    <label for="h3">rap：</label><input id="h3" type="checkbox" name="hobby" value="rap">
    <label for="h4">篮球：</label><input id="h4" type="checkbox" name="hobby" value="lanqiu">
    <hr>

    性别:
    <!--单选框必须name一致才可以保证单选属性-->
    <label for="boy">男</label>：<input id="boy" type="radio" name="sex" value="0">
    <label for="girl"></label>女：<input id="girl" type="radio" name="sex" value="1">
    <hr>
    <input type="submit">
</form>
</body>
</html>

4）button

button标签用于添加一个按钮，和<input type="button">显示效果一样，但是button标签制作的按钮默认自带表单提交功能；

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="http://www.baidu.com" method="post">
    <input type="button" value="我是input的按钮" >
    <hr>
    <!--button标签的按钮默认会触发表单提交事件-->
    <button>我是button的按钮</button>
    <hr>
</form>
</body>
</html>

5）select

select标签用于制作下拉菜单，每一个下拉菜单使用option标签来添加；

【代码示例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="/" method="post">
    省份：
    <select name="province">
        <option value="JiangXi">江西</option>
        <option value="GuangXi">广西</option>
        <option value="ShanXi">陕西</option>
    </select>
    <hr>
    城市
    <select name="city">
        <option value="NanChang">南昌</option>
        <option value="GanZhou">赣州</option>
        <option value="JiuJiang">九江</option>
    </select>
    <hr>
    县区
    <!--multiple用于多选-->
    <select name="area" multiple>
        <option value="NanChang">东湖区</option>
        <option value="GanZhou">西湖区</option>
        <option value="JiuJiang">青山湖区</option>
    </select>
    <hr>
    <input type="submit">

</form>
</body>
</html>

案例效果：

需要注意的是，虽然省份选中的是"江西"这个option，城市选中的是"南昌"这个option，但是提交的确实option中的value值；我们可以打开浏览器的F12控制台来查看提交信息：

6）textarea

如果需要输入大量的信息，就需要用到标签。通过textarea控件可以轻松地创建多行文本输入框；

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="/" method="post">


    姓名：<input type="text" name="name">
    <hr>
    年龄：<input type="text" name="age">
    <hr>
    <p>自我介绍：</p>
    <!--
        cols: 每行中的字符数(文本域的宽度)
        rows: 显示的行数(文本域的高度)
    -->
    <textarea name="intro" cols="30" rows="5"></textarea>
    <hr>
    <input type="submit">

</form>
</body>
</html>

案例效果：

4.8 iframe内联框架

iframe标签用于在网页中嵌入其他资源；

属性如下：

属性名	描述
name	内联框架名称，与target属性配合使用
frameborder	内联框架的边框粗细
值为1
（默认值）时，显示此框架的边框。
值为0
时移除边框。
Tips：此属性已不赞成使用，请使用 CSS 属性 border
代替。
scrolling	是否显示滚动条
yes：显示（默认值）
no：不显示
width	内联框架的宽度，默认300，单位为像素
hegith	内联框架的高度，默认150，单位为像素

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<a href="https://news.cctv.com/" target="window">央视新闻</a>
<a href="http://www.people.com.cn/" target="window">人民网</a>
<a href="https://www.huanqiu.com/" target="window">环球网</a>
<hr>
<iframe src="https://new.qq.com/" width="800" height="500" name="window" scrolling="yes" frameborder="1"></iframe>

</body>

4.9 HTML的转义字符

4.9.1 什么是转义字符

HTML中<，>，&等有特殊含义（<，>，用于链接签，&用于转义），不能直接使用。这些符号是不显示在我们最终看到的网页里的，那如果我们希望在网页中显示这些符号，该怎么办呢？

这就要说到HTML转义字符串（Escape Sequence）了。

转义字符串（Escape Sequence）也称字符实体(Character Entity)。在HTML中，定义转义字符串的原因有两个：

• 1）像“<”和“>”这类符号已经用来表示HTML标签，因此就不能直 接当作文本中的符号来使用。为了在HTML文档中使用这些符号，就需要定义它的转义字符串。当解释程序遇到这类字符串时就把它解释为真实的字符。在输入转 义字符串时，要严格遵守字母大小写的规则。
• 2）有些字符在ASCII字符集中没有定义，因此需要使用转义字符串来表示。

4.9.2 转义字符的组成

转义字符串分成三部分：

• 1）第一部分是一个&符号
• 2）第二部分是实体名字 或者 是#加上实体编号（也称十进制表示法）；
• 3）第三部分是一个分号。

比如，要显示小于号（<），就可以写<或者  <  。

用实体（Entity）名字的好处是比较好理解，一看lt，大概就猜出是less than的意思，但是其劣势在于并不是所有的浏览器都支持最新的Entity名字。而实体(Entity)编号，各种浏览器都能处理。

字符	实体名称	实体编号（十进制）
"	"	"
<	&lt;	&#60;
>	&gt;	&#62;
&	&amp;	&#38;
à	&agrave;	&#224;
空格	&nbsp;	&#160;

HTML特殊字符转义对照表：https://tools.geekzhan.com/htmlescapechar/

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<a href="https://www.baidu.com"> &lt;/a&gt; </a>

</body>
</html>

4.10 标签的语义化

所谓标签语义化，就是指标签的含义。使用特定的标签，去表达特定的含义；在HTML中，除了极少数比较特殊的标签外，其他标签能够达到的直观效果大体都是一致的，后续我们学习了CSS、JavaScript等技术后，任意标签都可以实现任意功能；那么这个时候标签的语义化就显得尤为重要了；

当网页遵守良好的语义时，一眼看去，就知道那个是重点，结构是什么，知道每块的内容是干什么的。

语义化的好处如下：

1. 方便代码的阅读和维护
2. 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
3. 使用语义化标签会具有更好地搜索引擎优化

核心：合适的地方给一个最为合理的标签。

例如，想要凸显一篇文章的核心内容基本上都在标题上；