HTML基本语法
Table of Contents
概述
web前端开发指的是我们创建web网站或app等前端界面并最终呈现给用户的过程。
我们学习前端，就是要学习HTML，CSS，JavaScript以及衍生出来的各种技术、框架、解决方案，从而来实现前端产品的开发。
HTML作为前端必学的一门技术，主要负责的是搭建网页的结构，通俗的说，HTML其实就是用来制作网页的。
网页中经常包含多个链接或者多媒体内容，这些内容都是实际的物理存在的文件，包括HTML、css、js文件，以及常见的图片、超级链接、音频、视频等文件。
这时候我们可能思考一个问题：这些网页文件是如何通过互联网提供用户观看使用的？
程序员将网页源文件通过ftp等软件上传到服务器进行存储，用户后期通过客户端（如浏览器软件）发送HTTP请求到服务器，服务器接收请求后进行响应，将存储的相关文件通过HTTP响应回传到用户本地客户端，最终通过客户端将网页文件进行渲染，显示出最终用户看到的网页效果。
上述过程中涉及到了3个主体内容，我们需要对其进行一个初步简单的了解。
服务器
服务器（server），是提供计算服务的设备。
功能：对于WEB来讲，用于存储网页数据，且需要响应服务请求，并进行处理。
构成：包括处理器、硬盘、内存、系统总线等，和通用的计算机架构类似，但是由于需要提供更可靠的服务，因此在处理能力、稳定性、可靠性、安全性、可扩展性、可管理性等方面要求较高。
云服务器（Elastic Compute Service, ECS)：是一种简单高效、安全可靠、处理能力可弹性伸缩的计算服务。其管理方式比物理服务器更简单高效。用户无需提前购买硬件，即可迅速创建或释放任意多台云服务器。
对服务器的要求：对于网站服务器来说，为了让用户随时进行访问，必须24小时不间断工作。
存储数据的方法：通过客户端软件远程控制服务器，例如FTP软件。
客户端
客户端（Client）也叫用户端，是指与服务器相对应，为客户提供本地服务的程序。客户端分为多种，在此我们以web客户端为例。
Web客户端主要指web浏览器(Browser)，是一种用于检索并展示万维网信息资源的应用程序。
功能：用于发送HTTP请求到服务器，接收服务器发回的HTTP响应，渲染HTML网页。
主流的Web页面浏览器有：微软的IE和Microsoft Edge、Mozilla的Firefox、苹果公司的Safari、Google的Chrome及Opera软件公司的Opera。
因为不同浏览器使用内核及所支持的HTML等网页语言标准不同，对网页的渲染效果会有差异。
对于我们学习来说，由于Chrome浏览器对HTML5等新技术的支持度更好，且在国内浏览器市场占有的份额很高，因此推荐使用Chrome浏览器。
**作用1：**发送HTTP请求，发送的方式是在浏览器地址栏输入对应网址，或者点击超级链接。
**作用2：**接收服务器发回的HTTP响应，服务器会发回一个HTML给浏览器。
**作用3：**将接收到的HTML进行解析并显示。
HTTP协议
Hypertext Transfer Protocol:超文本传输协议。是客户端浏览器或其他程序与WEB服务器之间的应用层通信协议。
HTTP包含请求和响应两部分。
请求：request，浏览器根据网址向对应的服务器发送请求。
发起请求的方法：在浏览器地址栏中输入网址，或者点击网址链接。输入的网站地址叫做URL (Uniform Resource Locator，统一资源定位符)。
响应：response，服务器根据请求响应一个HTML文件，将HTML传输给客户端，在浏览器中进行HTML网页的渲染。
HTML页面解析过程中，会发出多个http请求，包含网页的图片、视频、音频等文件请求。
了解了以上的互联网运行的过程，接下来我们需要做的事情就是制作一个HTML网页，因此，我们需要学习HTML文件制作的规范和语法。
纯文本格式
纯文本格式，就是没有任何文本修饰的，没有任何粗体，下划线，斜体，图形，符号或特殊字符及特殊打印格式的文本，只保存文本，不保存其格式设置。
纯文本格式文件：最常见的是.txt文件。在存储和传输过程中，只能保存文字，不能保存格式。
富文本格式文件：与纯文本对应，最常见的是.rtf文件，类似.doc文件，内部可以保存文本的样式、图片等。
纯文本格式文件的特点：
1. 文件只能保存文本，不保存其他的格式或非文本内容。有利于网络传输。
2. 所有的纯文本格式文件，可以通过直接更改扩展名的方式更改保存格式。
3. 纯文本格式文件可以使用任意的纯文本编辑器进行查看和编辑。 我们要学习的HTML、css、JavaScript都是纯文本格式文件，具备以上三个特点。
HTML概念
Hypertext Markup Language：超文本标记语言。是用来制作网页的一种标记语言。
HTML是一种纯文本格式的文件，内部只能书写文字内容，不能添加图片、音频、视频等，但是在网页中给用户呈现的效果却包含了文字以外的内容，这种效果就是HTML语言区别于其他文件的不同之处。
概念：
超文本：是超级文本的缩写，简单来说超文本就是用于链接另一个文本或多媒体内容的文本，比如链接到图片、链接、音频、视频、程序等。
标记：又叫做标签（HTML tag），有特殊的书写规范，是写给浏览器的一种语法格式，结合普通的文字信息，实现特殊的语义或显示内容。在编辑器中可以编辑和查看，在浏览器中不显示。
**HTML的功能：**利用标记给普通的文本添加语义、描述超文本内容，搭建网页的基本结构。
思考题：案例中h1标签的作用是什么？
错误答案：h1标签可以让内部文字加粗加大，独占一行。
正确答案：h1标签负责给内部文字添加一级标题的语义，不负责样式，样式由css负责。
HTML文件中，如果没有使用特殊语义的标记，也可以实现网页显示效果，但是利用标记给普通的文字添加了不同的语义，能够让网站的结构划分更加清晰。
语义化清晰的HTML网页具备的优势
1. 方便代码的阅读和后期维护
2. 便于浏览器或是网络爬虫更好地解析网站内容
3. 使用语义化标签有利于SEO搜索引擎优化，提高网站的搜索排名编辑器
所有的纯文本编辑器都能编辑HTML文件。例如记事本、Editplus、notepad等。
专门制作网页的软件有：
学习期间使用VScode软件，它的快捷键和Sublime一致。
使用步骤：
- 新建文件，ctrl+N。
- 保存对应的文件格式ctrl+S，例如.html、.css、.js等文件。
- 使用对应的快捷键快速编写程序。
常用快捷键
| html:xt或html:5→tab/ctrl+E | 自动生成基本骨架 |
|---|---|
| 标签名→tab | 自动生成标签 |
| 标签名*n→tab | 自动生成n个相同的标签 |
| h$*6→tab | 自动生成h1到h6的标签 |
| ctrl+shift+D | 复制光标所在行、复制所选内容 |
| ctrl+shift+K/ctrl+X | 删除光标所在行、所选内容 |
| ctrl+shift+↑ | 将光标所在行上移一行 |
| ctrl+shift+↓ | 将光标所在行下移一行 |
| 按住鼠标滚轮拖动 | 同时选中多个光标，同时操作 |
| ctrl+滚轮 | 调整显示字号大小 |
| ctrl+z | 无限后退一步 |
| shift+ctrl+z | 无限还原一步 |
| ctrl+enter | 在任意位置直接换行 |
举例：HTML的基本骨架
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html> 工具准备好后，我们就可以正式学习HTML的相关语法。
HTML的基本语法
HTML标签
HTML 标记通常被称为 HTML 标签 (HTML tag)。标签在书写和使用过程中，必须遵循特定的语法。
1.标签名必须书写在一对尖括号<>内部。
<html></html> 2.标签分为单标签和双标签，双标签必须成对出现。
<p></p> 双标签
<br /> 单标签 3.双标签包含开始标签和结束标签，xhtml中要求结束标签必须书写关闭符号/，单标签也需要进行自封闭书写。
错误写法
<div><div>
<br> 正确写法
<div></div>
<br /> 在HTML5中，单标签可以不写关闭符号。
HTML元素
HTML元素指的是从开始标签到结束标签的所有内容，包含开始标签、元素内容、结束标签。
例如：双标签内部包含的纯文本内容，就是元素内容。
<p>这是一段文字内容</p> 元素内容可以是纯文本，也可以是其他的元素。这种元素内容包含其他元素的情况，我们可以称为嵌套，也就是div标签元素内部嵌套了p标签元素。
<div><p>div元素内部嵌套p元素</p></div> 一个HTML元素div的内容可能是多个其他元素组成，例如p和h1，此时我们习惯称div是p和h1的父级元素，p和h1是div的子级元素，而p和h1属于同级元素，这种嵌套关系可以有多层。
<div>
<p>div元素内部嵌套p元素</p>
<h1>div元素内部嵌套的h1元素</h1>
</div>注意：单标签是不能添加元素内容的，可以称为空元素。
根据标签内部可以存放的内容不同，可以将双标签划分为两个级别。
容器级：标签内部可以存放任意内容，包含容器级标签。比如h1，div等。
文本级：标签内部只能存放文字或类似文字的内容，比如存放图片、表单元素等。比如p等。
HTML元素特性1：元素间对空格、换行、缩进等形成的空白不敏感，有无空白对在浏览器中加载的效果没有影响。
<p>段落内容</p><p>段落内容</p><p>段落内容</p><p>段落内容</p><p>段落内容</p>等价于：
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p> 原因在于浏览器识别的是元素的开始和结束以及互相之间的嵌套关系。
鉴于标签的这个特点，建议：
①书写代码过程中，同级标签之间进行换行对齐书写，嵌套标签之间进行缩进书写，增强代码的可读性。
②上传代码过程中，需要减小代码的体积，压缩不必要的空白，提升网页的加载速度。
HTML元素特性2：元素内容如果是文本，会出现空白折叠现象。
所有文字（类似文字内容）之间如果有空格、换行、缩进等空白字符，在浏览器中加载时，连接在一起的空白会折叠成一个空格显示，这就是空白折叠现象。
代码效果：
<p>HTML中所有文字内容之间的空 格、换
行、缩 进都会被折叠成一个空格显示。</p> 如果想在浏览器显示连续空白可以使用一些替换写法解决，例如：
①空格可以使用字符实体中的
进行替换书写。②换行可以使用一个
<br />标签实现。③缩进效果可以使用css中的语法实现。
HTML属性
HTML标签可以添加属性，属性可以提供关于HTML元素的更多信息。
标签属性书写时需要遵循以下的语法规范：
1.书写位置：必须写在开始标签或者单标签之内，与标签名之间用空格进行分隔。
2.属性包含：属性名（key）、属性值（value）。属性名与属性值之间的写法通常称做键值对写法，HTML标签属性的键值对写法是k=”v”。XHTML要求属性值必须在双引号内部。
<p k="v"></p> 3、一个标签内可以设置多个不同的属性，属性与属性之间使用空格进行分隔，每个属性的键值对写法都是k="v"。
<p k="v" k="v" k="v"></p> 4、部分标签属性k可以设置多个属性值v，所有属性值v都必须写在同一对双引号内，值与值之间需要使用空格分隔。
<p k="v1 v2 v3 v4"></p>HTML基本结构
HTML中的代码在书写时，需要有一个固定的基本结构。
基本骨架
HTML文件最基本的四个标签，组成了网页的基本骨架，包括：html、head、title、body四组标签。
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页主体内容
</body>
</html> 各个标签的功能：
<html>标签：作用:定义HTML文件的根元素，表示整个的HTML文档，所有的标签要书写在html标签内部。
<head>标签：作用：用于存放
<title>,<meta>,<base>,<style>,<script>,<link>。内部用于对网页的设置，除了title内部的文字，其他标签都不显示在浏览器上。注意在
<head>标签中我们必须要设置的标签是title。<title>标签：作用1：让页面拥有一个属于自己的标题。 作用2：title中的关键字可以作为搜索引擎抓取时的关键字，提高SEO搜索引擎优化。 作用3：内部的内容会显示在搜索结果的标题部分。 作用4：作为浏览器收藏夹默认的网页标题。 建议网页必须添加title标签内部内容，内容尽量精简，提取网页的关键字。
<body>标签：作用：定义网页的主体部分，用于存放所有的HTML显示内容的标签p,h,a,b,u,i,s,em,del,ins,strong,img等。
<body>内部的元素内容会显示在浏览器的窗口中。附：head标签内部的标签功能表
| 标签 | 描述 |
|---|---|
| head | 定义了文档的信息 |
| title | 定义了文档的标题 |
| base | 定义了页面链接标签的默认链接地址 |
| link | 定义了一个文档和外部资源之间的关系 |
| meta | 定义了HTML文档中的元数据 |
| script | 定义了客户端的脚本文件 |
| style | 定义了HTML文档的样式文件 |
DTD
完整的HTML文件的第一行内容叫做文档定义类型，英文DocType Definition，简称DTD。也称作文档声明类型，DocType Declaration。
作用：告知浏览器该网页使用的是哪种版本的HTML规范。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> W3C：world wide web consortium，万维网联盟。专门发布和维护互联网的规范和标准。
HTML版本：HTML1.0-XHTML-HTML5
HTML4.0规范开始，将结构和样式进行了分离，废弃了一些用来描述样式效果的标签，例如font、b、u、i等。目前大部分网站使用的是HTML4.01规范。
XHTML是在HTML4.01基础上进行的升级扩展和严格化。在XHTML1.0中，严格规定了标签必须是小写，所有的属性都必须用双引号封闭，结束标签必须有结尾反斜杠关闭符号。
XHTML和HTML4.01两个规范下面分别包含了3个小规范：
Strict 严格版：不能使用font等废弃标签，不能使用框架集，结构和样式分离。
Transitional 过渡版（通用版）：可以使用font等废弃标签，不能使用框架集
Frameset 框架集版：可以使用框架集
严格程度：XHTML1.0 Strict > HTML4.01 Strict > XHTML1.0 transitionl > HTML4.01 transitionl 在编辑器中，不同的版本规范DTD可以使用不同的快捷键快速生成
| html:xt | XHTML1.0 transitionl |
|---|---|
| html:xs | XHTML1.0 Strict |
| html:4t | HTML4.01 transitionl |
| html:4s | HTML4.01 Strict |
| html:5 | html5 |
| ! | html5 |
HTML规范发展到现在，已经升级到了HTML5版本，不仅在原有的基础上增加了更多新的标签和功能，更是简化了DTD的书写。
<!DOCTYPE html>命名空间
<html>元素表示整个网页文档，在开始标签上设置了命名空间xmlns属性。
XHTML1.0 transitionl版本
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
</html> xml：可扩展标记语言，使用在传输过程中的规范。被设计用来传输和存储数据，是html的补充。
xmlns：全称叫做XML NameSpace，NameSpace叫做命名空间，可以在文档中定义一个或多个可供选择的命名空间，浏览器会将此命名空间用于该属性所在元素内的所有内容。
<html>元素的命名空间规定了在不同用户的浏览器中标签语义遵循的统一标准，这个标准使用的就是一个固定的网址http://www.w3.org/1999/xhtml中的规范。
xml:lang="en" 表示所有的标签的语言都是英语。
在HTML5版本时命名空间也进行了简化。
HTML5版本
<html lang="en">
</html>字符集
<head>标签内部的meta标签通过http-equiv属性定义了当前的网页所使用的字符编码。
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> char：character，字符。
set：集合。
中文常用字符集包括：
UTF-8：国际通用字库，涵盖了所有人类的语言文字，一个汉字为3个字节大小。
gb2312：国标字库，共收入汉字6763个和包括拉丁字母、希腊字母、日文平假名及片假名字母、俄语西里尔字母在内的682个。
gbk：国标字库，是gb2312的扩展，增加了繁体字，共收入 21886 个汉字和图形符号，其中汉字（包括部首和构件）21003 个，图形符号 883 个，一个汉字为2个字节大小。
使用情况建议：
1、如果没有网页加载速度要求，或者制作的是外文网站，使用utf-8。
2、如果含有大量中文汉字的网站，而且要求网页加载速度快，使用gbk。
注意：meta标签声明的字库，必须和编辑器软件默认编译字库相同，否则会出现两个字库不匹配，浏览器加载时出现乱码
前面的课程已经将我们需要用到的编辑器、HTML语法、基本结构铺垫完毕，后续课程我们将重点学习常用的标签及其用法
HTML常用标签
注释
在很多代码技术中都可以添加注释内容，我们也可以向 HTML 源代码添加注释。
HTML注释语法：
<!-- 书写注释内容 --> 注释只在源代码中可见，浏览器窗口是不显示的。
利用注释的特点，可以有多种用途：
①在源代码中添加描述性的提示信息，便于我们阅读代码。
<!-- 以下是一个段落 -->
<p>这是一个段落。</p>
<!-- 段落结束 --> ②对于 HTML 纠错也大有帮助，可以通过注释某一行 HTML 代码，以便检索错误的位置。
<!-- 此刻浏览器不显示段落，可以查看是否有错误：
<p>这是一个段落。</p>
--> ③暂时注释掉一部分不用的代码，便于后期恢复代码。
<!-- 此刻浏览器不显示图片：
<img src="cat.jpg" />
--> vscode和sublime快捷键：ctrl+/
标题
标题（Heading），是通过<h1>-<h6> 六个标签分别来对六个级别的标题进行定义的。
<h1>定义最大的标题，<h6>定义最小的标题。
<h1>-<h6> 标签都是双标签，且是容器级标签。
**注意①：**标题标签的作用是给标签内部的元素内容添加对应级别标题的语义，不负责文字的粗体、字号等样式。样式是由css设定的。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6> **注意②：**标题标签之间是不能互相嵌套的，下一级标题与上级标题之间通过同级关系书写，下一级标题解释说明的是前面距离最近的上一级标题。
正确写法
<h1>一级标题</h1>
<h2>二级标题</h2> 错误写法
<h1>
<h2>二级标题</h2>
</h1> **注意③：**标题标签对于呈现文档结构非常重要，使用时要根据标签的重要程度进行选择，其中<h1>标签最重要，<h2>标签次重要，以此类推。
<h1>在整个HTML中的权重非常高，内部应该放置HTML中最重要的内容，比如logo。
<h1>由于非常重要，内部的文字对于提高搜索引擎排名也非常重要，为了防止作弊，如果一个页面出现多个<h1>，反而降低权重。约定俗成的，一个页面中只会出现一个<h1>。
段落
段落（paragraph）是通过<p>标签进行定义的。
<p>标签是双标签，且为文本级标签。内部只能放置文本、图片、表单元素，或者废弃的<font>标签等。
注意①：<p>标签的作用是给标签内部的内容添加一个完整段落的语义，不负责内容自动换行的样式。换行的效果是由css决定的。
<p>这是第一个段落</p>
<p>这是第二个段落</p> **注意②：**每一对儿<p>标签内部的元素内容为一个完整的段落，如果有多个段落，需要分别使用不同的<p>标签进行定义。
错误写法
<p>这是第一个段落<br>
这是第二个段落<br>
这是第三个段落</p> 正确写法
<p>这是第一个段落</p>
<p>这是第二个段落</p>
<p>这是第三个段落</p>文本格式化
HTML中有部分标签是用来对文字进行格式化显示设置的，比如粗体和斜体等。
但是在HTML4.0版本规范后，结构和样式进行了分离，HTML只负责搭建结构，css负责格式化样式，所以大部分文本格式化标签被废弃，但是在HTML4.01和XHTML1.0的transitional版本中依旧可以使用。
因此，文本格式化的标签还是需要进行了解。
文本格式化的标签均为双标签，且为文本级标签，内部只能书写文字。
包含以下：
| 标签 | 描述 |
|---|---|
| b | 定义粗体文本，bold |
| big | 定义大号字 |
| em | 定义着重文字，emphasis，自带斜体效果 |
| i | 定义斜体字，italic |
| small | 定义小号字 |
| strong | 定义加重语气，自带加粗效果 |
| sub | 定义下标字 |
| sup | 定义上标字 |
| ins | 定义插入字，自带下划线效果 |
| del | 定义删除字 |
| s | 不赞成使用，使用del代替 |
| strike | 不赞成使用，使用del代替 |
| u | 定义下划线，不赞成使用，使用css中样式代替 |
图像
图像（image）由<img>标签进行定义。
<img>标签是单标签，本身相当于一个特殊的文本。
<img>标签的作用是在指定的位置插入一张图片。
在HTML文件，常用的插入图片的类型有：jpg、png、gif。
由于<img>为单标签，所以它只能通过属性进行相关的图像设置。
<img>常用属性展示：
| 属性名 | 描述 |
|---|---|
| src | 表示图片的路径； |
| width | 表示图片的宽度； |
| height | 表示图片的高度； |
| border | 边框属性；它的值可以设置边框的厚度； |
| title | 设置提示文本； |
| alt | 设置图像没有找到时候的替换文本； |
src和路径
如果需要插入一张图片到HTML中，<img>标签必须设置src属性。
src：全称source资源，属性值是图片查找的路径。
路径：指的是寻找文件时所历经的线路，在HTML中有特殊的书写语法。
路径分为相对路径和绝对路径，不同的方式出发点和参考位置不同。
（1）相对路径
相对路径查找文件时，需要从HTML文件本身出发，根据相对的位置进行查找，包含三种方向。
同级查找：指目标文件与HTML文件位于同一级，直接书写文件名+后缀格式；
<img src="smile01.jpg"> 子级查找：指目标文件在与HTML文件同一级的文件夹的内部，需要先查找文件夹名称，然后通过关闭符号/进入文件夹查找里面的文件；如果有多层文件夹，需要/进入多层。
<img src="images/smile02.png">
<img src="images/tupian/smile03.jpg"> 上级查找：指目标文件在HTML文件所在文件夹的更上一级，需要跳出当前文件夹到上一层，路径写法利用../表示跳出一级，如果跳出多级书写多次../，直到找到文件。
上级查找与子级查找常混合使用，../一般只出现在开始位置。
<img src="../../smile04.jpg" />
<img src="../images/smile01.jpg" /> **注意：**相对路径不能跨盘符；
（2）绝对路径
绝对路径查找文件时，不需要从HTML文件出发，而是直接从电脑的盘符出发进行查找，或者使用网址形式查找。
**盘符出发：**例如从c盘或者d盘出发查找图片，书写时以c:/开头，后续类似子级查找写法直至找到目标文件。
<img src="C:/Users/teacher/Documents/html/case/images/smile02.png" /> **网址形式：**要查找的文件是来自网络资源，路径写法以http://开头。
<img src="http://img3.imgtn.bdimg.com/it/u=1084243323,278941980&fm=26&gp=0.jpg" /> 从盘符出发的绝对路径的缺点：
a.盘符出发的路径不可移植，不可移动。
b.盘符出发的路径容易出现中文字符，中文的路径容易出现错误。
实际应用：
a.建议多使用相对路径，可以适当使用网址形式的绝对路径。
b.使用相对路径必须将图片或文件与HTML同时上传，而且需要保持相对位置不变。
练习：
<img src="../../photo/1.png">其他属性
**width：**图片的宽度
**height：**图片的高度
属性值：以px为单位的数值，或者省略px不写。
如果不设置两个属性，会以图片的原始尺寸加载。
如果设置属性：只设置了其中一个，另一个会等比例变换；如果两个都设置，按照设置值加载。
<img src="smile01.jpg" width="200px">
<img src="smile01.jpg" height="100px">
<img src="smile01.jpg" width="200" height="100"> width和height属性都可以通过css进行设置。
**border：**设置图片的边框。
属性值：数值，数值是几表示边框宽度为几像素。
<img src="smile01.jpg" border="20"> border属性可以使用css进行设置，css中的边框有更多的设置效果。
**title：**设置的是鼠标悬停时的提示文本。
属性值：自定义的文字内容。
<img src="smile01.jpg" title="点击查看原网站"> **alt：**设置的是图片查找错误时，出现的替换文本。
如果能正常找到图片，替换文本是不显示的。
属性值：自定义的替换内容。
<img src="smile01.png" alt="这是一张微笑的表情"> 总结：<img>标签最为重要的属性为src，尽量使用alt属性对图片进行说明，添加相对关键词可以有利于SEO搜索引擎优化。其他属性可以根据需求进行设置。
超级链接
HTML 使用超级链接与网络上的另一个文档相连。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
在HTML中使用<a>标签可以创建链接。
a全称anchor，锚的意思。
<a>为双标签。
作用：在指定的位置添加超级链接，提供用户进行点击和跳转。
<a>标签可以实现两种跳转：跨页面跳转、页面内跳转。实现跳转的方式需要用到一些标签属性。
href属性
href全称hypertext reference，超文本引用，用于规定链接的目标地址。
属性值：链接目标的路径地址。可以使用相对路径或网址形式的绝对路径。
href属性非常重要，<a>标签要想实现点击跳转，必须设置该属性，拥有这个属性<a>标签在鼠标移上时才会显示一个小手指针状态。
书写方式如下：
<a href="url">链接文本</a> 实例：
<a href="http://www.lagou.com">拉勾</a>
<a href="index.html">首页文件</a> 点击以上两个链接分别跳转到拉勾网、本地的同级index.html文件。
注意：链接文本不仅限于文字，也可以是图片或其他内容。
target属性
使用target 属性，可以定义被链接的文档在何处跳转显示。
属性值有两种：
_self：默认值，表示跳转的页面在当前窗口打开，不会打开新的窗口。
_blank：空白的，表示跳转的页面在新窗口打开。
<a href="http://www.lagou.com" target="_blank">拉勾</a> 点击以上链接，拉勾网页面将会在新窗口打开，当前窗口页面不变化。
title属性
title设置的是鼠标悬停时的提示文本，与<img>标签类似。
属性值：自定义的文字内容。
该属性用于给用户进行提示，该链接的功能是什么，提高用户的体验。
<a href="smile.html" title="点击查看源网页"><img src="images/smile02.png" /></a>页面内锚点跳转
这种跳转方式实现的是从某个位置跳转到同页面的另一个位置。
制作方法分为两个步骤，分别是设置锚点、添加链接。
第一步：设置锚点，也就是设置目标位置，有两种设置方式。
①在目标位置找到任意一个标签，给它添加id属性，id的属性值必须是唯一的。
id的属性值定义规则：必须以字母开头，后面可以有字母、数字、下划线和横线，区分大小写。
<h2 id="mubiao">目标位置</h2> ②在目标位置添加一个空的<a>标签，只设置一个name属性，name属性值设置方式与id相同，也必须是唯一的。
<a name="mubiao"></a> 其中，id和name的属性值可以自定义。
第二步：链接到锚点，在需要点击的位置设置<a>标签，给a的href属性设置属性值为#id属性值或者#加a的name属性值。
<a href="#mubiao">点击文本</a>跨页面锚点跳转
这种跳转方法综合了跨页面跳转和锚点跳转。
制作方法也分为两个步骤，分别是设置锚点、添加链接。
第一步：设置锚点，方式与页面内锚点跳转一致，在目标网页的指定位置设置使用id或name属性。
第二步：链接到锚点，添加超级链接时href属性需要更改，属性值写为页面的路径#id 。
<a href="new.html#mubiao">点击文本</a>列表
列表用于制作HTML中的一系列项目。
通常我们会将内容相关、结构相似、样式相近的内容使用列表结构进行搭建。
根据项目的内容不同，可以有三种语义的列表结构：无序列表、有序列表、定义列表。
无序列表
①作用：定义一个没有顺序的列表的结构、语义。
②无序列表需要两个标签参与，分别是<ul>和<li>。
ul：unordered list，表示定义一个无序列表的大结构。
li：list item，列表项，定义的是无序列表内的某一项。
③注意：<ul>内部只能嵌套<li>，<li>标签不能脱离<ul>单独书写。
快捷键：ul>li
<ul>
<li></li>
</ul> ④<ul>内部可以嵌套任意多个<li>标签。
快捷键：ul>li*4
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul> ⑤<li>标签是一个经典的容器级标签，内部可以放置任意内容，甚至可以放一组ul>li无序列表结构.
实例
<h2>中国的古典四大名著</h2>
<ul>
<li>
<h3>红楼梦</h3>
<!-- 嵌套其他的无序列表 -->
<ul>
<li>林黛玉</li>
<li>薛宝钗</li>
<li>贾元春</li>
<li>王熙凤</li>
</ul>
</li>
<li>
<h3>西游记</h3>
<!-- 嵌套其他的无序列表 -->
<ul>
<li>孙悟空</li>
<li>猪八戒</li>
<li>沙和尚</li>
<li>小白龙</li>
</ul>
</li>
<li>
<h3>水浒传</h3>
<!-- 嵌套其他的无序列表 -->
<ul>
<li>宋江</li>
<li>武松</li>
<li>林冲</li>
<li>鲁智深</li>
</ul>
</li>
<li>
<h3>三国演义</h3>
<!-- 嵌套其他的无序列表 -->
<ul>
<li>刘备</li>
<li>孙权</li>
<li>曹操</li>
<li>董卓</li>
</ul>
</li>
</ul> ⑥无序列表的列表项<li>之间，没有顺序的先后之分，它们的重要程度是相同的。
⑦无序列表的作用只是搭建列表结构，没有添加样式前缀的功能，样式是由css负责。
有序列表
有序列表的语法与无序列表非常类似，只是在语义上有差异。
①作用：定义一个有先后顺序的列表结构、语义。
②有序列表由两个标签组成，分别是<ol>和<li>。
ol：ordered list，表示定义一个有序的列表的大结构。
li：list item，定义的是有序列表的每一项。
③<ol>内部只能嵌套<li>标签，而<li>不能脱离<ol>单独书写。
④<ol>标签内部可以嵌套多个<li>标签。
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol> ⑤<li>标签也是一个经典的容器级标签，内部可以放置任意内容，甚至可以放ol>li。
实例
<h2>国土面积排行</h2>
<ol>
<li>
<h3>俄罗斯</h3>
</li>
<li>
<h3>加拿大</h3>
</li>
<li>
<h3>中国</h3>
<!-- 内部嵌套了一组有序列表 -->
<ol>
<li>新疆</li>
<li>西藏</li>
<li>内蒙古</li>
<li>青海</li>
</ol>
</li>
<li>
<h3>美国</h3>
</li>
</ol> ⑥有序列表的列表项<li>之间，存在顺序先后之分，根据内容的顺序需要合理调整书写位置。
⑦有序列表的前面的数字排序样式不是<ol>标签的作用，而是css负责的。
定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
①作用：定义一个自定义内容及主题的列表、语义。
②由三个标签组成完整的结构，包含<dl>、<dt>和<dd>。
dl：definition list，表示定义一个自定义列表的大结构。
dt：definition term，表示定义自定义列表中的一个主题或者术语。
dd：definition description，定义解释项，表示描述或解释前面的定义主题。
③<dl>内部只能嵌套<dt>和<dd>，<dt>与<dd>是同级关系。
快捷键：dl>dt+dd
<dl>
<dt>主题</dt>
<dd>解释项</dd>
</dl> ④dl内部可以放多组dt和dd，每个dd解释说明的是前面的距离最近的一个dt。
<dl>
<dt>主题1</dt>
<dd>解释项1</dd>
<dt>主题2</dt>
<dd>解释项2</dd>
<dt>主题3</dt>
<dd>解释项3</dd>
<dt>主题4</dt>
<dd>解释项4</dd>
</dl> ⑤每个dt后面可以有0到多个解释项的dd，每个dd解释的都是前面距离最近的一个dt。
<dl>
<dt>主题1</dt>
<dd>解释项1.1</dd>
<dd>解释项1.2</dd>
<dt>主题2</dt>
<dd>解释项2.1</dd>
<dd>解释项2.2</dd>
<dd>解释项2.3</dd>
<dt>主题3</dt>
<dd>解释项3</dd>
<dt>主题4</dt>
</dl> ⑥dt和dd标签也是容器级标签，内部可以放置任意内容。
实例
<dl>
<dt>杨幂</dt>
<dd>
<p>作品：《三生三世十里桃花》、《扶摇》、《宫》等。</p>
<p>工作室成员：迪丽热巴、高伟光、张彬彬等。</p>
<p>家庭：小糯米。</p>
</dd>
<dt>迪丽热巴</dt>
<dd>
<p>作品：《三生三世系列》、《漂亮的李慧珍》等。</p>
</dd>
<dt>刘诗诗</dt>
<dd>
<p>作品：《仙剑奇侠传三》、《步步惊心》等。</p>
<p>家庭：吴奇隆等。</p>
</dd>
<dt>谢娜</dt>
</dl> ⑦定义列表中的缩进样式由css负责，标签只负责搭建语义结构。
⑧配合着css布局效果，最好每个dl中只添加一组dt和dd，便于后期添加css样式。
实例
<!-- 实际应用 -->
<dl>
<dt>杨幂</dt>
<dd>
<p>作品：《三生三世十里桃花》、《扶摇》、《宫》等。</p>
<p>工作室成员：迪丽热巴、高伟光、张彬彬等。</p>
<p>家庭：小糯米。</p>
</dd>
</dl>
<dl>
<dt>迪丽热巴</dt>
<dd>
<p>作品：《三生三世系列》、《漂亮的李慧珍》等。</p>
</dd>
</dl>
<dl>
<dt>刘诗诗</dt>
<dd>
<p>作品：《仙剑奇侠传三》、《步步惊心》等。</p>
<p>家庭：吴奇隆等。</p>
</dd>
</dl>
<dl>
<dt>谢娜</dt>
</dl>布局
<div>和<span>标签常用作布局工具，我们俗称盒子，后期h5也增加了更多的布局标签。
<div>和<span>都是没有具体语义的。
**div：**全称division，分割、区域、跨度的意思。俗称大盒子。
<div>是双标签，是最经典的容器级标签，内部可以放置任意内容。
作用：多用于划分网页区域，进行结构布局。一般将相关的内容使用<div>包裹起来，整体设置大的布局效果。
**span：**小区域、小跨度的意思。俗称小盒子。
<span>也是双标签，容器级标签。
作用：在不改变整体效果的情况下，可以辅助进行局部调整。
实例
<div>
<dl>
<dt>杨幂</dt>
<dd>
<p>作品：<span>《三生三世十里桃花》</span>、《扶摇》、《宫》等。</p>
<p>工作室成员：迪丽热巴、高伟光、张彬彬等。</p>
<p>家庭：小糯米。</p>
</dd>
</dl>
<dl>
<dt>迪丽热巴</dt>
<dd>
<p>作品：《三生三世系列》、《漂亮的李慧珍》等。</p>
</dd>
</dl>
<dl>
<dt>刘诗诗</dt>
<dd>
<p>作品：《仙剑奇侠传三》、《步步惊心》等。</p>
<p>家庭：吴奇隆等。</p>
</dd>
</dl>
<dl>
<dt>谢娜</dt>
</dl>
</div> 实际后期使用时，你可以利用div+css实现更多的布局效果。
表格
在HTML中，可以使用特定的标签实现常见的表格的制作。
例如：
表格基础
创建一个简单的表格至少有三个标签组成，分别是**<table>、<tr>、<td>**标签。
table：表格，定义的是整个的表格大结构。
tr：table rows，表格的行，定义的是表格由多少行组成。
td：table data，表格数据，也叫表格单元格，定义的是每一行内部的单元格。
三者的关系：table>tr>td.一个表格中有多个行，每个行中有多个单元格。
实例：制作一个三行四列的表格
<table border="1" style="border-collapse:collapse;">
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
<td>第1行第3列</td>
<td>第1行第4列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
<td>第2行第4列</td>
</tr>
<tr>
<td>第3行第1列</td>
<td>第3行第2列</td>
<td>第3行第3列</td>
<td>第3行第4列</td>
</tr>
</table> 引申：如果要绘制表头，使用标签**<th>**，table head data，表头单元格，在表格中绘制的时候，替换的是<td>的位置。
<th>标签中自带默认的css样式效果，文字显示粗体居中。
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>合并单元格
表格的单元格可以进行合并，通过<th>和<td>的两个属性可以进行合并设置。
rowspan：跨行和并。上下的合并。
colspan：跨列合并。左右的合并。
属性值：数字，数字是几表示跨几行或跨几列合并。
案例：绘制如下的表格。
制作方法：先书写所有行<tr>，再添加每一行的<td>或<th>单元格，划分单元格时，顶边对齐的属于同一行，将所有行和列写完后，再查看哪个单元格有跨行或跨列，属性值的个数要参考最小的单元格。
代码
<table border="1" style="border-collapse: collapse;">
<!-- 先确定行数，然后确定每一行的td个数，最后设置跨行和跨列 -->
<tr>
<td colspan="2">1</td>
<td rowspan="2">2</td>
<td colspan="2">3</td>
<td>4</td>
<td>5</td>
<td rowspan="2">6</td>
</tr>
<tr>
<td>7</td>
<td rowspan="2">8</td>
<td>9</td>
<td rowspan="2">10</td>
<td colspan="2">11</td>
</tr>
<tr>
<td rowspan="2">12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td colspan="2">18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td colspan="2">22</td>
</tr>
</table> 练习：
表格分区
一个完整的表格分为四个大的区域：表格标题、表格头部、表格主体、表格页脚。
<table>内部最直接的子级包含四个分区标签，他们都是双标签。
caption：表格的标题，内部书写标题文字。
thead：table head，表格的头部。内部嵌套tr>th。
tbody：table body，表格的主体。内部嵌套tr>td。
tfoot：table foot，表格的页脚。内部嵌套tr>td。
四个分区可以选择性的进行组合。
注意：不论书写顺序如何颠倒，浏览器中的加载顺序都是自动按照caption、thead、tbody、tfoot执行的。
代码
<table border="1" style="border-collapse: collapse;">
<!-- 首先：书写分区三个大标签 -->
<!-- 其次：填充内部内容 -->
<caption>各地区固定资产投资情况</caption>
<thead>
<tr>
<th rowspan="2">地区</th>
<th colspan="2">按总量分</th>
<th colspan="2">按比重分</th>
</tr>
<tr>
<th>自年初累计(亿元)</th>
<th>比去年同期增长(%)</th>
<th>自年初累计(%)</th>
<th>同期增长(%)</th>
</tr>
</thead>
<tbody>
<tr>
<td>全国</td>
<td>12345.80</td>
<td>9.5</td>
<td>100.0</td>
<td>100.0</td>
</tr>
<tr>
<td>全国</td>
<td>12345.80</td>
<td>9.5</td>
<td>100.0</td>
<td>100.0</td>
</tr>
<tr>
<td>全国</td>
<td>12345.80</td>
<td>9.5</td>
<td>100.0</td>
<td>100.0</td>
</tr>
<tr>
<td>全国</td>
<td>12345.80</td>
<td>9.5</td>
<td>100.0</td>
<td>100.0</td>
</tr>
<tr>
<td>全国</td>
<td>12345.80</td>
<td>9.5</td>
<td>100.0</td>
<td>100.0</td>
</tr>
</tbody>
</table>表单
HTML 表单用于搜集不同类型的用户输入，表单元素就是网页中提供用户进行输入或点击的小控件。
在HTML中，一个完整的表单通常由表单域、提示信息和表单控件（也称为表单元素）3个部分构成。
表单域：
相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
提示信息：
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单控件：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
表单域
HTML表单域使用<form>标签进行定义。
<form>标签是一个功能性标签，填写的表单信息要想正确的提交到后台服务器，必须放在一个<form>标签之内。
<form>标签为双标签，容器级标签。
<form>标签通过对应属性规定提交数据的方法和提交位置。
| 属性名 | 属性值 | 描述 |
|---|---|---|
| action | url | 指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式 |
| name | 自定义名称 | 规定表单的名称 |
实例
<form action="xxx.php" method="post/get" name="stuMSG">
提示信息及表单控件书写位置
</form>表单元素
<input>标签
<input>标签是最重要的一个表单元素。
<input>标签为单标签，本身相当于一个特殊的文本。
<input>标签需要通过标签属性实现各种功能。
其中，type属性的值不同，决定了<input>标签的形态不同。
<input>标签常用属性：
单行文本输入框：text
定义提供用户输入的单行文本的输入框，不能输入多行文字。
常用value属性定义默认的输入文字。
<input type="text" value="默认输入文本" >密码输入框：password
定义提供用户输入的密码框。
password 字段中的字符会被做掩码处理（显示为星号或实心圆）。
<input type="password">单选框：radio
定义提供用户点击选择的单选框。
单选框一般都是成组出现，多个单选框组成一组选择的情况。
同一组单选框之间必须是互斥的关系，通过给同一组单选框都设置相同的name属性值实现。
<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女复选框：checkbox
定义提供用户点击选择的多选框。
复选框允许用户在有限数量的选项中选择零个或多个选项。
同一组复选框最好也设置相同的name属性。
<input type="checkbox" name="hobby" /> 唱歌
<input type="checkbox" name="hobby" /> 代码
<input type="checkbox" name="hobby" /> 运动 注意：单选框和复选框都可以提前设置默认选中项。
<input>标签有一个checked属性，如果不设置表示默认没有选中。
属性值如果设置为"checked"，表示该项默认被选中。
在h5中可以直接书写checked属性名，不书写属性值，也可以实现选中效果。
<input type="radio" name="sex" checked="checked" /> 男
<input type="radio" name="sex" /> 女
<input type="checkbox" name="hobby" /> 唱歌
<input type="checkbox" name="hobby" checked /> 代码
<input type="checkbox" name="hobby" /> 运动按钮
<input>标签有四种形式的按钮：
普通按钮button：没有任何特殊功能。
重置按钮reset：将同一个<form>中填写的表单内容清空，恢复成默认。
提交按钮submit：第一个作用是能将填写数据提交到<form>中指定的后台服务器，第二个作用是重置清空<form>中填写的信息。
图片按钮image:默认为提交按钮的效果，使用的图片需要利用src属性查找正确路径。
按钮上的文字需要使用value属性进行设置。如果是图片按钮的value，表示图片查找失败时的替换文本内容。
<input type="button" value="普通按钮" />
<input type="reset" value="重置按钮" />
<input type="submit" value="提交按钮" />
<input type="image" src="bd_8.png" value="pic" />文件上传：file
定义文件上传按钮，可以提供用户选择本地文件进行上传服务器。
<input type="file"> 如果文件上传的input同时设置accept属性，可以选择文件的MIME类型，多个MIME类型用英文逗号分开，常用的MIME类型见下表。
<input type="file" accept="image/png,image/gif" /> 使用input的multiple属性，可以决定是否可以选择多个文件。
<input type="file" multiple="multiple" />文本域<textarea>
文本域使用**<textarea>**标签定义，制作可以输入多行文本的区域。
<textarea>标签为双标签，本身相当于一个特殊的文字。
<textarea>有两个重要属性，可以设置显示区域大小。
rows：行，属性值是数字，数字是几表示文本框显示的最大行数，如果超过了行数，会被隐藏并且出现滚动条。
cols：列，属性值是数字，数字是几，表示在出现滚动条之后，每一行显示的最大字节数（一个汉字按2字节计算）。
文本域可以设置默认输入的文字，在双标签之间书写默认文字。
<textarea cols="30" rows="10">默认输入文字</textarea>下拉菜单
HTML中的下拉菜单提前设置一些选项，然后可以通过点击选择其中一项。
下拉菜单需要至少两个标签完成结构：
**<select>：**选择，表示定义下拉菜单整体结构。
**<option>：**选项，表示定义下拉菜单的每一项。
两个标签都是双标签，文本级标签。
关系：select>option*4
默认情况下，选中的是第一项。
<select>
<option>广州</option>
<option>北京</option>
<option>重庆</option>
<option>上海</option>
</select> 下拉菜单可以通过给<option>标签设置selected属性，更改默认选中项。
如果想选中哪一项，给对应的<option>设置selected属性的属性值为selected。
<option selected="selected">北京</option> 下拉菜单中如果选项变得复杂，可以将<option>进行分组管理。
可以使用**<optgroup>**标签对选项进行分组，<optgroup>是一个双标签。
关系：select>optgroup>option
<optgroup>可以设置一个label属性，表示给这一组选项添加一个标签名，分组标签<optgroup>是不能被点击选择的。
<select>
<optgroup label="国内">
<option>广州</option>
<option selected="selected">北京</option>
<option>重庆</option>
<option>上海</option>
</optgroup>
<optgroup label="国外">
<option>纽约</option>
<option>伦敦</option>
<option>巴黎</option>
</optgroup>
</select>label标签
所有的表单元素都可以通过绑定其他内容去扩大触发点击范围，这时需要使用一个<label>标签。
<label>标签的作用是帮表单元素定义标注（标记）。
如果将表单控件与提示内容使用<label>进行绑定后，当用户鼠标点击<label>内的提示内容时，浏览器就会自动将焦点转到和标签相关的表单控件上。
绑定方法：
①给表单元素设置id属性，然后将需要绑定的其他内容用<label>标签包裹，给<label>标签设置for属性，属性值为绑定的表单的id属性值。
<input type="checkbox" name="hobby" id="sport" /><label for="sport">运动</label> ②第二种：如果绑定内容和表单元素写在一起，可以化简绑定写法，直接使用<label>标签将绑定内容与表单元素一起进行嵌套。
<label><input type="radio" name="sex" />男</label>水平分割线
<hr>标签在 HTML 页面中创建一条水平线。
水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。
<hr>为单标签，实际在HTML4.0以后已经被废弃，水平线的效果可以使用css中的边框制作。
了解hr的常用属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| align | left center right | 设置hr的对齐方式 |
| noshade | noshade | 设置 hr 的颜色呈现为纯色。 |
| color | 颜色值或颜色名 | 设置hr的颜色 |
| size | 像素值 | 设置水平线的高度 |
| width | 像素值、百分比 | 设置水平线的宽度 |
实例
<hr align="center" color="red" size="10px" width="500px" />换行
<br>（breaking）标签是HTML中一个简单的换行符。
<br>标签是一个单标签。
在需要换行的位置可以使用<br>标签书写，但是<br>与<p>不同，<br>没有建立新的段落的语义，只是简单的进行强制换行。
<p>这是第一<br />个段落</p>
<p>这是第二个段落</p>字符实体
在普通文字书写时，有一些特殊符号不能直接书写（例如连续的空格），或者符号具有特殊功能也不能直接书写（例如<>符号），可以使用一些HTML提前预留好的替换字符进行书写，这些替换字符叫做字符实体。
通过查询w3cshool手册，查看所有的字符实体。
可以查询特殊字符的替换写法，包含实体名称以及实体编号。
常用的字符实体列表：
规则：所有的字符实体和实体编号都是以&开头，以；结尾的。
建议使用实体名称，好处是名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
注意：实体名称对大小写敏感！
建议：不需要强制记忆所有的字符实体，只需要记忆常用的几个字符实体名称即可，其他可以通过手册进行查询。
参考文献：
w3school中文参考手册：https://www.w3school.com.cn/