HTML基本语法

HTML概念

Hypertext Markup Language：超文本标记语言。是用来制作网页的一种标记语言。

HTML是一种纯文本格式的文件，内部只能书写文字内容，不能添加图片、音频、视频等，但是在网页中给用户呈现的效果却包含了文字以外的内容，这种效果就是HTML语言区别于其他文件的不同之处。

概念：
超文本：是超级文本的缩写，简单来说超文本就是用于链接另一个文本或多媒体内容的文本，比如链接到图片、链接、音频、视频、程序等。
标记：又叫做标签（HTML tag），有特殊的书写规范，是写给浏览器的一种语法格式，结合普通的文字信息，实现特殊的语义或显示内容。在编辑器中可以编辑和查看，在浏览器中不显示。

**HTML的功能：**利用标记给普通的文本添加语义、描述超文本内容，搭建网页的基本结构。

例如：案例中的h1标签作用是什么？
错误答案：h1标签可以让内部文字加粗加大，独占一行。
正确答案：h1标签负责给内部文字添加一级标题的语义，不负责样式，样式由css负责。

HTML文件中，如果没有使用特殊语义的标记，也可以实现网页显示效果，但是利用标记给普通的文字添加了不同的语义，能够让网站的结构划分更加清晰。

语义化清晰的HTML网页具备的优势

1. 方便代码的阅读和后期维护

2. 便于浏览器或是网络爬虫更好地解析网站内容 

3. 使用语义化标签有利于SEO搜索引擎优化，提高网站的搜索排名

HTML的基本骨架：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

HTML的基本语法

HTML标签

HTML 标记通常被称为 HTML 标签 (HTML tag)。标签在书写和使用过程中，必须遵循特定的语法。

标签名必须书写在一对<>内。
标签分为单标签和双标签，双标签成对出现。
双标签包含开始标签和结束标签，结束标签内需要书写关闭符号，单标签也需要自封闭。

在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>

如果想在浏览器显示连续空白可以使用一些替换写法解决，例如：

①空格可以使用字符实体中的&nbsp进行替换书写。
②换行可以使用一个<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规范。

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>标签最重要，<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	设置图像没有找到时候的替换文本；

scr和路径

如果需要插入一张图片到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也提供的特定的标签用于添加音频和视频。

音频使用<audio>标签进行定义，视频使用video标签进行定义。<audio><video>是双标签。同图片一样，需要使用src属性设置音频，视频查找的路径。

音频文件支持的格式为：.mp3、.ogg、.wav。

视频视频支持格式：.mp4,.ogg,.webm。

音频/视频加载后不会自动显示播放器的控制条，需要使用controls属性进行设置，属性值也是controls。

<!-- 添加音频音频支持格式：.mp3,.ogg,.wav。 -->
    <audio src="media/snow.mp3" controls="controls"></audio>
<!-- 添加视频视频支持格式：.mp4,.ogg,.webm。 -->
    <video src="media/video.mp4" controls="controls"></video>

超级链接

HTML 使用超级链接与网络上的另一个文档相连。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

在HTML中使用<a>标签可以创建链接。

a全称anchor，锚的意思。

<a>为双标签。

作用：在指定的位置添加超级链接，提供用户进行点击和跳转。

<a>标签可以实现两种跳转：跨页面跳转、页面内跳转。实现跳转的方式需要用到一些标签属性。

href属性

href全称hypertext reference，超文本引用，用于规定链接的目标地址。

属性值：链接目标的路径地址。可以使用相对路径或网址形式的绝对路径。

根据href属性值不同，a标签有不同的作用。

url地址：绝对路径时会自动跳转到对应的链接页面，相对路径时会点击自动下载文件并发生跳转，锚点url会跳转到页面的对应位置，可以用于页面滚动。
#：单独的一个#符号，代表跳转到页面的top顶部，可以用于制作返回顶部。
js调用：

 <!-- 调用js的某个方法，不建议使用 -->
    <a href="javascript:js_method();"></a>

    <!-- 调用js的某个方法，不发生页面跳转 -->
    <a href="javascript:void(0);" onclick="js_method()">超级链接</a>
    <!-- 不发生页面跳转，建议使用 -->
    <a href="javascript:;">超级链接</a>

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>也是双标签，容器级标签。

作用：在不改变整体效果的情况下，可以辅助进行局部调整。

表格

表格基础

创建一个简单的表格至少有三个标签组成，分别是**<table>、<tr>、<td>**标签。

table：表格，定义的是整个的表格大结构。

tr：table rows，表格的行，定义的是表格由多少行组成。

td：table data，表格数据，也叫表格单元格，定义的是每一行内部的单元格。

三者的关系：table>tr>td.一个表格中有多个行，每个行中有多个单元格。

<table>的属性

border边框属性。属性值：数字，表示像素值。

表格的单元格之间有默认的空隙，会导致双线边框。

解决方法：设置标签样式属性style。
属性值：border-collapse:collapse;表示边框塌陷。

<table border="1" style="border-collapse: collapse;"></table>

引申：如果要绘制表头，使用标签**<th>**，table head data，表头单元格，在表格中绘制的时候，替换的是<td>的位置。

<th>标签中自带默认的css样式效果，文字显示粗体居中。

合并单元格

表格的单元格可以进行合并，通过<th>和<td>的两个属性可以进行合并设置。

rowspan：跨行和并。上下的合并。

colspan：跨列合并。左右的合并。

属性值：数字，数字是几表示跨几行或跨几列合并。

制作方法：

先书写所有行<tr>，以最小单元格为标准。
再添加每一行的<td>或<th>单元格。
划分单元格时，顶边对齐的属于同一行。
将所有行和列写完后，再查看哪个单元格有跨行或跨列，属性值的个数要参考最小的单元格。

表格分区

一个完整的表格分为四个大的区域：表格标题、表格头部、表格主体、表格页脚。

<table>内部最直接的子级包含四个分区标签，他们都是双标签。

caption：表格的标题，内部书写标题文字。

thead：table head，表格的头部。内部嵌套tr>th。

tbody：table body，表格的主体。内部嵌套tr>td。

tfoot：table foot，表格的页脚。内部嵌套tr>td。

四个分区可以选择性的进行组合。

注意：不论书写顺序如何颠倒，浏览器中的加载顺序都是自动按照caption、thead、tbody、tfoot执行的。

表单

HTML 表单用于搜集不同类型的用户输入，表单元素就是网页中提供用户进行输入或点击的小控件。

在HTML中，一个完整的表单通常由表单域、提示信息和表单控件（也称为表单元素）3个部分构成。

表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

表单域

HTML表单域使用<form>标签进行定义。

<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>标签常用属性：

<input>标签的type属性值为text。

定义提供用户输入的单行文本的输入框，不能输入多行文字。

常用value属性定义默认的输入文字。

<input type="text" value="默认输入文本" >

<input>标签的type属性值为password。

定义提供用户输入的密码框。

password字段中的字符会被做掩码处理（显示为星号或实心圆）。

<input type="password">

<input>标签的type属性值为radio。

定义提供用户点击选择的单选框。

单选框一般都是成组出现，多个单选框组成一组选择的情况。

同一组单选框之间必须是互斥的关系，通过给同一组单选框都设置相同的name属性实现。

<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女

<input>标签的type属性值为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>标签有四种形式的按钮：

type	名称	特点
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" />

注意：<button>元素的功能类似于<input type="submit">将填写数据提交到<form>中指定的后台服务器。

<form action="data.php">
        <input type="text"><br>
        <input type="button" value="普通按钮">
        <button>button</button>

</form>

文件上传：file

定义文件上传按钮，可以提供用户选择本地文件进行上传服务器。

<input type="file">

使用input的multiple属性，可以决定是否可以选择多个文件。

<input type="file" multiple="multiple" />

如果文件上传的input同时设置accept属性，可以选择文件的MIME类型，多个MIME类型用英文逗号分开，常用的MIME类型见下表。

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

文本域`<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>内的提示内容时，浏览器就会自动将焦点转到和标签相关的表单控件上。提高用户体验。

绑定方法：

①

给表单元素设置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>没有建立新的段落的语义，只是简单的进行强制换行。

字符实体

在普通文字书写时，有一些特殊符号不能直接书写（例如连续的空格），或者符号具有特殊功能也不能直接书写（例如<>符号），可以使用一些HTML提前预留好的替换字符进行书写，这些替换字符叫做字符实体。

通过查询w3cshool手册，查看所有的字符实体。

可以查询特殊字符的替换写法，包含实体名称以及实体编号。

常用的字符实体列表：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8nZ6Yalb-1617595228006)(F:\Typora\HTML语法规则\images\zfst_1.png)]

规则：所有的字符实体和实体编号都是以&开头，以；结尾的。

建议使用实体名称，好处是名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

注意：实体名称对大小写敏感！

建议：不需要强制记忆所有的字符实体，只需要记忆常用的几个字符实体名称即可，其他可以通过手册进行查询。

HTML5

它是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。用于取代HTML4与XHTML的新一代标准版本，所以叫HTML5。

H5新变化

XHTML可扩展超文本标记语言

XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用的更多的需求。

HTML5

HTML5的设计目的是为了在移动设备上支持多媒体。
增加了新特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3特性。
废弃一些元素和属性比如font，center等

优势：

提高可用性和改进用户的友好体验
更好的语义化标签
可以给站点带来更多的多媒体元素（视频和音频）
可以很好的替代FLASH和Silverlight
当涉及到网站的抓取和索引的时候，对于SEO很友好
将被大量应用于移动应用程序和游戏
可移植性好

劣势：

该标准并未能很好的被PC端浏览器所支持
IE9一下的浏览器几乎都不兼容

HTML5前景趋势

移动开发优先
游戏开发

广义的HTML5

狭义的HTML5是指HTML语言的第5个版本
而广义的HTML5是HTML5本身+CSS3+JavaScript技术的综合

HTML5新增语义化标签

目的：掌握常用的布局标签。

以前制作的网页布局，我们基本用div来做。div就是一个普通的块级标签，对于搜索引擎来说，是没有语义的。

新增语义化标签：

<head>头部标签
<nav>导航标签
<main>主体标签
<article>独立的内容标签
<section>区段标签
<aside>侧边栏标签

注意：

语义化标签主要是针对搜索引擎
这些新标签页面中可以使用多次
IE9中需要把这些元素转换为块级元素
移动端使用这些标签更多

HTML5新增多媒体标签（音频和视频标签）

多媒体标签包含两个：

音频：<audio>
视频：<video>

使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件。

`<audio>`音频标签

HTML5在不使用插件的情况下也可以原生的支持音频格式文件，当然支持的文件类型有限。

语法格式：

<!-- h5中标签属性的属性名和属性值相同，那么可以省略属性值不写。 -->
<audio src="media/snow.mp3" controls></audio>

兼容写法：

<audio controls>
        <source src="media/snow.mp3" type="audio/mpeg">
        <source src="media/snow.ogg" type="audio/ogg">
        您的浏览器版本过低，不支持音频格式
    </audio>

属性值：

`<video>`视频标签

HTML5在不使用插件的情况下也可以原生的支持视频格式文件，当然支持的文件类型有限。

语法格式：

<!-- 自动播放需要加muted属性来静音自动播放 -->
<video src="media/video.mp4" controls autoplay muted></video>

兼容写法：

<video controls width="300px" poster="images/pig.jpg">
        <source src="media/video.mp4" type="video/mp4">
        <source src="media/video.ogg" type="video/ogg">
        您的浏览器版本过低，不支持视频格式
</video>

属性值：

总结：

音频标签和视频标签使用基本一致。
浏览器支持情况不同。
我们可以给视频标签添加muted属性进行自动静音播放视频，音频不可以。
视频标签是重点，我们经常设置自动播放，循环和设置大小属性，不使用controls控件。

HTML5新增表单标签

输入标签

<form action="">
        姓名:<input type="text"><br>
        邮箱:<input type="email"><br>
        个人网址:<input type="url"><br>
        日期:<input type="date"><br>
        时间:<input type="time"><br>
        月份:<input type="month"><br>
        周:<input type="week"><br>
        年龄:<input type="number" max="50" min="10" step="2" value="12"><br>
        喜欢运动程度:<input type="range" max="100" min="0" step="5" value="25"><br>
        手机号码:<input type="tel"><br>
        搜索框:<input type="search"><br>
        颜色表单:<input type="color"><br>
            <input type="submit" value="提交">
</form>

<datalist>标签

<datalist>标签规定了<input>元素可能的选项列表。
<datalist>元素包含了一组<option>元素，这些元素表示预定义可选值，在<input>元素输入过程中，会自动响应<option>元素的值。
绑定<input>标签必须设置list属性，属性值等于<datalist>标签的id属性值。

城市:<input type="text" list="city-list">
        <datalist id="city-list">
            <option value="广州">gz</option>
            <option value="上海">sh</option>
            <option value="北京">bj</option>
            <option value="太原"></option>
        </datalist>

表单属性

xueGhiDW-1617595228012)]

总结：

音频标签和视频标签使用基本一致。
浏览器支持情况不同。
我们可以给视频标签添加muted属性进行自动静音播放视频，音频不可以。
视频标签是重点，我们经常设置自动播放，循环和设置大小属性，不使用controls控件。

HTML5新增表单标签

输入标签

<form action="">
        姓名:<input type="text"><br>
        邮箱:<input type="email"><br>
        个人网址:<input type="url"><br>
        日期:<input type="date"><br>
        时间:<input type="time"><br>
        月份:<input type="month"><br>
        周:<input type="week"><br>
        年龄:<input type="number" max="50" min="10" step="2" value="12"><br>
        喜欢运动程度:<input type="range" max="100" min="0" step="5" value="25"><br>
        手机号码:<input type="tel"><br>
        搜索框:<input type="search"><br>
        颜色表单:<input type="color"><br>
            <input type="submit" value="提交">
</form>

<datalist>标签

<datalist>标签规定了<input>元素可能的选项列表。
<datalist>元素包含了一组<option>元素，这些元素表示预定义可选值，在<input>元素输入过程中，会自动响应<option>元素的值。
绑定<input>标签必须设置list属性，属性值等于<datalist>标签的id属性值。

城市:<input type="text" list="city-list">
        <datalist id="city-list">
            <option value="广州">gz</option>
            <option value="上海">sh</option>
            <option value="北京">bj</option>
            <option value="太原"></option>
        </datalist>

表单属性

文章输出来源：拉勾教育大前端就业3期

原文链接：https://blog.csdn.net/weixin_44683942/article/details/115440277

HTML基本语法

HTML概念

HTML的基本语法

HTML标签

HTML元素

HTML属性

HTML基本结构

基本骨架

DTD

命名空间

字符集

HTML常用标签

注释

标题

段落

文本格式化

图像

scr和路径

其他属性

音频和视频

超级链接

页面锚点跳转

跨页面锚点跳转

列表

无序列表

有序列表

定义列表

布局

表格

表格基础

合并单元格

表格分区

表单

表单域

表单元素

<input>标签

文本域<textarea>

下拉菜单

label标签

水平分割线

换行

字符实体

HTML5

H5新变化

HTML5新增语义化标签

HTML5新增多媒体标签（音频和视频标签）

<audio>音频标签

<video>视频标签

HTML5新增表单标签

输入标签

表单属性

HTML5新增表单标签

输入标签

表单属性

`<input>`标签

文本域`<textarea>`

`<audio>`音频标签

`<video>`视频标签