HTML是什么？
- HTML（Hypertext Markup Language）超文本标记语言。
- 纯文本只能保存文字内容。超文本可以保存除文字之外的图片、音频等内容。
- 可以通过标签来标记内容（标签都是成对出现的，有开始和结束）
例如：<h1>一级标题</h1>
- 负责网页三个要素之中的结构。
- HTML使用标签的形式来标识网页中的不同组成部分。
- 所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另外一个页面。
HTML标准结构
<!DOCTYPE html>
<!-- HTML根标签 ：一个页面有且只有一个根标签，网页中所有内容都应该在该html根标签中-->
<html>
<!-- head标签： 该标签中的内容不会再网页中直接显示，它用来帮助浏览器解析页面-->
<head>
<!--
title标签： 标题标签，默认会显示在浏览器的标题栏中。
搜索引擎在检索页面时，会首先检索title标签中的内容。
它是网页中对于搜索引擎来说最重要的内容，会影响到网页在搜索引擎中的排名
-->
<title>这是一个非常好的网页</title>
</head>
<!-- body标签：用来设置网页的主体内容，网页中所有可见的内容，都应该在body中编写 -->
<body>
<h1>这是我的第一个网页</h1>
</body>
</html>
注释
<!-- 这是一个注释 -->
<!--
功能：
作者：
日期：
-->
在这个结构中，可以来编写HTML的注释
注释的内容，不会再页面中显示，但是可以在源码中查看
我们可以通过编写注释对代码进行描述，从而帮助其他的开发人员工作
一定要养成良好的编写注释的习惯，但是注释一定简洁明了。
属性
- 可以通过属性来设置标签如何处理标签中的内容
- 属性需要写在开始标签中，实际上就是一个 名&值(属性名=“属性值”) 对的内容
- 一个标签可以同时设置多个属性，属性之前需要用空格隔开
<h1>这是我的<font color="red" size="7">第一个</ront>网页</h1>
可以去 W3C HTML标签列表 查看都有什么属性
文档声明
为了让浏览器知道使用的HTML版本，我们需要在网页代码的最上边添加一个doctype的声明，来告诉浏览器网页的版本。
其中HTML5的文档声明如下：
<!--
html5的文档声明，声明当前网页是按照HTML5的标准编写的
编写网页时一定要将HTML5的文档声明写在网页的最上面
-->
<!DOCTYPE html>
<html>
<head>
<title>这是一个非常好的网页</title>
</head>
<body>
<h1>这是我的第一个网页</h1>
</body>
</html>
注意：如果不写文档声明，则会导致有些浏览器进入一个怪异模式，进入怪异模式后，浏览器解析页面会导致页面无法正常显示，所以，一定要写文档声明。
为了兼容一些一些旧的页面，浏览器中设置了两种解析模式：
1.标准模式（Standards Mode）
2.怪异模式（Quirks Mode）
乱码的问题
首先介绍一下进制的基础知识
进制
几进制就是满几进一
- 二进制
1. 0 1
2. 10 11 100 - 十进制
1. 0 1 2 3 4 5 6 7 8 9
2. 10 11 12 - 十六进制
1.满16进1
2.0 1 2 3 4 5 6 ...9 a b c d e f
3.由于16进制满16进1，所以设置几个特殊字符表示 10 11 12 13 14 15 16
4.使用a b c d e f分别表示 10 11 12 13 14 15 16 - 八进制
1. 满8进1
2. 0 1 2 3 4 5 6 7
3. 10 11 12 ..17 20 21
乱码的原因以及解决方法
- 在计算机保存的任何内容，最终都需要转换为0 1这种二进制编码来保存，包括网页中的内容。
- 在读取内容时，需要将二进制编码，转换为正确的过程。
编码：依据一定的规则，将字符转换为二进制的编码的过程
解码：依据一定的规则，将二进制编码转换为字符的过程
字符集：编码和解码所采用的规则，称之为字符集。（ASCII、GBK、UTF-8） - 乱码的原因：编码和解码采用的字符集不同
在中文系统中，默认采用GB231编码 - 解决办法：通过<mata />标签中告诉浏览器网页的编码
<!DOCTYPE html>
<html>
<head>
<!--
需要告诉浏览器，网页所采用的编码字符集
mata标签用来设置网页的一些元数据，比如网页的字符集、关键字、简介
mata是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加一个 /
-->
<mata charset="utf-8" />
<title>这是一个非常好的网页</title>
</head>
<body>
<h1>这是我的第一个网页</h1>
</body>
</html>
常用标签
标题标签
- 在HTML中，一共有六级标题标签（h1-h6）
- 在显示效果上 h1最大，h6最小，但文字的大小我们并不关心
- 使用Html标签时，关心的是标签的语义，我们使用的是语义化标签
- 6级标题中，h1最重要，表示一个网页的主要内容，h2-h6重要性依次降低
- 一般页面中标题标签只使用h1、h2、h3，h3之后的基本不使用
注意：对于搜索引擎来说，h1的重要性仅次于title，搜索引擎检查完title，会立即查看h1
<!DOCTYPE html>
<html>
<head>
<mata charset="utf-8" />
<title>这是一个非常好的网页</title>
</head>
<body>
<!--
在HTML中，一共有六级标题标签**（h1-h6）**
在显示效果上 h1最大，h6最小
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
段落标签
- 段落标签用于表示内容中的一个自然段
使用<p></p>标签来表示一个段落 - p标签中的文字，默认会占用一行，且段与段之间会有一个间隔
在HTML中，字符之间再多的空格，浏览器也会当成一个空格解析，换行也会当成一个空格解析。可以使用 <br />标签来表示一个换行
<hr />可以在页面中生成一套水平线
<!DOCTYPE html>
<html>
<head>
<mata charset="utf-8" />
<title>这是一个非常好的网页</title>
</head>
<body>
<h1>一级标题</h1>
<!--
段落标签用于表示内容中的一个自然段
使用p标签来表示一个段落
p标签中的文字，默认会占用一行，且段与段之间会有一个间隔
-->
<p>我是一个p标签，用来表示一个段落</p>
<!--
在HTML中，字符之间再多的空格，浏览器也会当成一个空格解析，换行也会当成一个空格解析。
在页面中可以使用br标签来表示一个换行，br标签是一个自结束标签
` -->
<p>
锄禾日当午，<br />
汗滴禾下土。<br />
谁知盘中餐，<br />
粒粒皆辛苦。<br />
</p>
<!--
hr标签是一个自结束标签可以也页面中生成一条水平线。
` -->
<hr />
</body>
</html>
实体
- 在HTML中，一些如<、>这种特殊字符是不能直接使用的
- 需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称之为实体（转义字符串）
- 实体的名字：
< ：<
> ：>
空格 ：nbsp;
版权符号 ：©
- 浏览器解析到实体时，会自动讲实体转换为其自动的字符
<!DOCTYPE html>
<html>
<head>
<mata charset="utf-8" />
<title>这是一个非常好的网页</title>
</head>
<body>
<!--
在HTML中，一些如<、>这种特殊字符是不能直接使用的
需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称之为实体（转义字符串）
实体的名字：
< ：<
>：>
空格：
版权符号：©
-->
a<b>c
</body>
</html>
可以点击 W3C HTML实体 查看都有什么实体
图片
- 使用img标签来向网页中引入一个外部图片
- img标签也是一个自结束标签
- img标签属性：
src：设置一个外部图片的路径
alt：可以用来设置在图片不能显示时，对图片的描述
width：用来修改图片的宽度，一般用px作为单位
height：用来修改图片的高度，一般用px作为单位 - 图片的格式
JPEG（JPG）：
-- JPEG图片支持的颜色比较多，图片可以压缩，但不支持透明
-- 一般使用JPEG来保存照片等颜色丰富的图片
GIF：
-- GIF支持的颜色比较少，只支持简单透明，支持动态图
PNG：
-- PNG 支持的颜色比较多，并且支持复杂透明
-- 可以用来显示颜色复杂的透明的图片
图片使用原则：
效果不一致，使用效果好的
效果一致，使用小的
注意 ：
src属性配置的是图片的路径，日期我们所需要使用的路径全都是相对路径。 相对路径指相对于当前资源所在目录的位置。
- 相对路径在下级的直接写 src=“文件夹名/a.gif”。相对路径在上级的直接写 src=“../a.gif”。
- 相对路径在每多返回一级就多使用一次“../”，返回上上级的直接写 src=“../../a.gif”
搜索引擎可以通过alt属性来识别不同的图片，若不写alt属性，则搜索引擎不会对img中的图片进行收录。
当宽度和高度两个属性只设置一个，则另一个也会等比例设置大小，如果两个都设置则按设置的来。一般开发中除了自适应的页面，不建议设置width和height。
<!DOCTYPE html>
<html>
<head>
<mata charset="utf-
8" />
<title>图片标签</title>
</head>
<body>
<!--
img标签属性：
src：设置一个外部图片的路径
alt：可以用来设置在图片不能显示时，对图片的描述
width：用来修改图片的宽度，一般用px作为单位
height：用来修改图片的高度，一般用px作为单位
-->
<!--html文件与图片在同一个文件夹-->
<img src="a.gif" alt="这是一个大松树">
<!--html文件与图片不在同一个文件夹-->
<!--
src属性配置的是图片的路径，日期我们所需要使用的路径全都是相对路径
相对路径指相对于当前资源所在目录的位置
相对路径在下级的直接写 src=“文件夹名/a.gif”
相对路径在上级的直接写 src=“../a.gif”
相对路径在每多返回一级就多使用一次“../”，返回上上级的直接写 src=“../../a.gif”
-->
<img src="../src/2.gif" alt="这是一个大松树">
</body>
</html>
<mata />标签
- 使用mata标签可以用来设置网页的关键字和描述
- 搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但是这两个值不会影响页面在搜索引擎中的排名
- 使用mata标签可以用来做请求的重定向
<mata http-equiv="refresh" content="秒数;url=目标路径" />
<!DOCTYPE html>
<html>
<head>
<mata charset="utf-8" />
<!--
使用mata标签可以用来设置网页的关键字
-->
<mata name="keywords" content="HTML5,JavaScript,前端" />
<!--
使用mata标签可以用来指定网页的描述
-->
<mata name="description" content="发布h5,js等前端相关的信息" />
<!--
使用mata标签可以用来做请求的重定向
-->
<mata http-equiv="refresh" content="5;url=http://blog.ineazy.com" />
<title>这是一个非常好的网页</title>
</head>
<body>
<h1>这是我的第一个网页</h1>
</body>
</html>
可以点击 HTML <meta> 标签来查看 <meta> 标签的具体属性
内联框架
- 使用内联框架就可以引入一个外部的页面，使用iframe来创建一个内联框架
- 属性：
src：指向一个外部页面的路径，可以使用相对路径
name：可以为内联框架指定一个name属性
width：宽
height：高
注意：在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索
<!DOCTYPE html>
<html>
<head>
<mata charset="utf-8" />
<title>内联框架</title>
</head>
<body>
<!--
使用内联框架就可以引入一个外部的页面
-->
<iframe src="http://www.baidu.com" name="百度"></iframe>
</body>
</html>
超链接
- 使用超链接可以让我们从一个页面跳转到另一个页面
- 使用a标签来创建一个超链接
- 属性：
href：指向链接跳转的目标地址，可以写一个相对路径也可以写一个地址
target：属性可以用来指定打开链接的位置
可选值：
_self，表示在当前窗口中打开（默认值）
_blank，在新的窗口中打开链接
可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开
<!DOCTYPE html>
<html>
<head>
<mata charset="utf-8" />
<title>超链接</title>
</head>
<body>
<!--
使用a标签来创建一个超链接
属性：
href：**指向链接跳转的目标地址，可以写一个相对路径也可以写一个地址
target：属性可以用来指定打开链接的位置
可选值：
_self，表示在当前窗口中打开（默认值）
_blank，在新的窗口中打开链接
可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开
-->
<a href="http://www.baidu.com">我是一个超链接</a>
<a href="demo1.html">我也是一个超链接</a>
<a href="demo1.html" target="_blank">在新的页面打开</a>
</body>
</html>
可以点击 HTML <a> 标签来查看 <meta> 标签的具体属性
<center>标签
- center标签中的内容，会默认在页面中居中显示 我们可以将要居中的元素全都放到center标签里
<!DOCTYPE html>
<html>
<head>
<mata charset="utf-8" />
<title>center标签</title>
</head>
<body>
<center>
<p>Hello World!</p>
</center>
</body>
</html>
块和内容
块元素
- div就是一个块元素
- 所谓的块元素就是会独占一行的元素,无论其他内容有多少他都会独占一行
- 常见块元素：p h1 h2 h3 ...
- div这个标签没有任何语义，就是一个纯粹的块元素，并且不会为它里边的元素设置任何的默认样式
- div元素主要用来对页面进行布局的
内联元素
- span是一个内联元素（行内元素）
- 所谓行内元素，指的是只占自身大小的元素，不会占用一行
- 常见内联元素： a img iframe span
- 用来选中文字，然后为文字来设置样式
注意：
块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式。
一般情况下只用块元素去包含内联元素，而不会使用内联 元素去包含一个块元素。
a元素可以包含任意元素，但是除它本身。
p元素不可以包含任何其他的块元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
块元素
div就是一个块元素
所谓的块元素就是会独占一行的元素,无论其他内容有多少他都会独占一行
常见块元素：p h1 h2 h3 ...
div这个标签没有任何语义，就是一个纯粹的块元素，并且不会为它里边的元素设置任何的默认样式
div元素主要用来对页面进行布局的
-->
<div style="background-color: red; width: 200px;">
我是一个div
</div>
<div style="background-color: yellow; width: 200px;">
我是一个div
</div>
<hr />
<!--
内联元素
span是一个内联元素（行内元素）
所谓行内元素，指的是只占自身大小的元素，不会占用一行
常见内联元素： a img iframe span
span没有任何语义，span标签专门用来选中文字，然后为文字来设置样式
-->
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一段文字</span>
<!--
块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式
一般情况下只用块元素去包含内联元素，而不会使用内联 元素去包含一个块元素
a元素可以包含任意元素，但是除它本身
p元素不可以包含任何其他的块元素
-->
<div>
<span>我是一段文字</span>
</div>
</body>
</html>
HTML语法规范
- HTML中不区分大小写，但是我们一般都使用小写
- HTML中的注释不能嵌套
- HTML标签必须结构完整，要么成对出现，要么自结束标签
- HTML标签可以嵌套，但是不能交叉嵌套
- HTML标签中的属性必须有值，且值必须加引号（双引号单引号都可以）
练习
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>练习</title>
</head>
<body>
<center>
<!--
跳转到id为bottom的元素所在的位置
直接在href中写 #id属性值
-->
<a href="#bottom">去底部</a>
<a href="#hello">去指定位置</a>
<h1>这是我的个人博客</h1>
<hr />
<h2>东风破</h2>
<!-- 创建超链接时，如果地址不确定可以直接写一个#作为占位符 -->
<a href="#">周杰伦</a>
<p id="hello">
一盏离愁 孤单伫立在窗口 <br />
我在门后 假装你人还没走 <br />
旧地如重游 月圆更寂寞 <br />
夜半清醒的烛火 不忍苛责我 <br />
一壶漂泊 浪迹天涯难入喉 <br />
你走之后 酒暖回忆思念瘦<br />
水向东流 时间怎么偷<br />
花开就一次成熟 我却错过<br />
谁在用琵琶弹奏 一曲东风破<br />
岁月在墙上剥落 看见小时候<br />
犹记得那年我们都还很年幼<br />
而如今琴声幽幽 我的等候你没听过<br />
<img src="1.jpg" alt="图片" width="300px" /> <br />
谁在用琵琶弹奏 一曲东风破<br />
枫叶将故事染色 结局我看透<br />
篱笆外的古道我牵着你走过<br />
荒烟漫草的年头 就连分手都很沉默<br />
一壶漂泊 浪迹天涯难入喉<br />
你走之后 酒暖回忆思念瘦<br />
水向东流 时间怎么偷<br />
花开就一次成熟 我却错过<br />
谁在用琵琶弹奏 一曲东风破<br />
岁月在墙上剥落 看见小时候<br />
犹记得那年我们都还很年幼<br />
而如今琴声幽幽 我的等候你没听过<br />
谁在用琵琶弹奏 一曲东风破<br />
枫叶将故事染色 结局我看透<br />
篱笆外的古道我牵着你走过<br />
荒烟漫草的年头 就连分手都很沉默<br />
<img src="2.jpg" alt="图片2" width="300px" /> <br />
谁在用琵琶弹奏 一曲东风破<br />
岁月在墙上剥落 看见小时候<br />
犹记得那年我们都还很年幼<br />
而如今琴声幽幽 我的等候你没听过<br />
谁在用琵琶弹奏 一曲东风破<br />
枫叶将故事染色 结局我看透<br />
篱笆外的古道我牵着你走过<br />
荒烟漫草的年头 就连分手都很沉默<br />
</p>
<hr />
友情链接:<a href="#">A网站</a> | <a href="#">B网站</a> | <a href="#">C网站</a> <br /><br />
<!--
如果将链接地址设置为#，则点击超链接以后，会自动跳转到当前页面的顶部
html中有一个属性，每一个元素都可以设置，该属性可以作为标签的唯一标识
这个属性就是id，id属性在同一个页面中只能有一个不能重复
-->
<a id="bottom" href="#">回到顶部</a> |
<!--
发送电子邮件的超链接，点击链接以后可以自动打开计算机中默认的邮件客户端
href="mailto:邮件地址"
当点击这个超链接时，会默认打开计算机的默认电子邮件客户端，并且将收件人设置mailto后的邮件地址
-->
<a href="mailto:abc@atguigu.com">联系我们</a>
</center>
</body>
</html>
练习总结：
- 如果将链接地址设置为#，则点击超链接以后，会自动跳转到当前页面的顶部
- html中有一个属性，每一个元素都可以设置，该属性可以作为标签的唯一标识
- 这个属性就是id，id属性在同一个页面中只能有一个不能重复
- 发送电子邮件的超链接，点击链接以后可以自动打开计算机中默认的邮件客户端
href="mailto:邮件地址"
当点击这个超链接时，会默认打开计算机的默认电子邮件客户端，并且将收件人设置mailto后的邮件地址
文本标签
<em>和<strong>标签
- em 标签用于表示一段内容中的重点
- strong 标签用于表示一个内容的重要性
- 这个两个标签可以单独使用，也可以一起使用
- 通常 em显示为斜体，而strong显示为粗体
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
em和strong
- 这两个标签都表示一个强调的内容
em主要表示语气上的强调，em在浏览器中默认使用斜体显示
strong表示强调的内容，比em更强烈，默认使用粗体显示
-->
<p>
今天天气<em>真不错</em>
</p>
<p>
<strong>
注意：如果你不认真上课，你就找不到好工作！
</strong>
</p>
</body>
</html>
i标签和b标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
i标签中的内容会以斜体显示
b标签中的内容会以加粗显示
i和b没有任何语义
h5规范中规定，对于不需要着重的内容而是单独的加粗或者是斜体
就可以用b标签和i标签
-->
<p>
<i>我是i标签中的内容</i>
<b>我是b标签中的内容</b>
</p>
</body>
</html>
small标签
- small标签中的内容会比他的父元素中的文字要小一些
- 在h5中使用small标签来列示一些细则一类的内容
- 比如：合同中小字，网站的版权声明都可以放small中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
small标签中的内容会比他的父元素中的文字要小一些
在h5中使用small标签来列示一些细则一类的内容
比如：合同中小字，网站的版权声明都可以放small中
-->
<p>
我是p标签中的内容<small>我是small标签中的内容</small>
</p>
</body>
</html>
cite标签
- 网页中所有加书名号的内容都可以使用cite标签，来表示参考的内容
- 比如：书名、歌名、话剧名、电影名
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
网页中所有加书名号的内容都可以使用cite标签，来表示参考的内容
比如：书名、歌名、话剧名、电影名
-->
<p>
<cite>论语</cite> 是我最喜欢的一本书
</p>
</body>
</html>
q标签和 blockquote标签（引用）
- q标签表示一个短的引用（行内引用）
- q标签引用的内容浏览器会默认加引号
- blockquote标签表示一个长引用（块级引用）
- blockquote标签是块元素，独占一行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
q标签表示一个短的引用（行内引用）
q标签引用的内容浏览器会默认加引号
-->
<p>
子曰：<q>学而时习之不亦说乎！</q>
</p>
<!--
blockquote标签表示一个长引用（块级引用）
块元素，独占一行
-->
<div>
子曰：
<blockquote>
有朋自远方来，乐呵乐呵
</blockquote>
</div>
</body>
</html>
sup标签&sub标签
- 使用sup标签设置一个上标
- sub标签用了表示一个下标
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
使用sup标签设置一个上标
-->
<p>
2 <sup>2</sup>
</p>
<p>
赵薇 <sup><a href="#">[1]</a></sup>
</p>
<!--
sub标签用了表示一个下标
-->
<p>H<sub>2</sub>O</p>
</body>
</html>
del标签
- 使用del标签来表示一个删除的内容
- del标签中的内容，会自动添加一个删除线
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
使用del标签来表示一个删除的内容
del标签中的内容，会自动添加一个删除线
-->
<p>
<del>17.75</del> <br />
15.54 <br />
</p>
</body>
</html>
ins标签
- ins表示一个插入的内容
- ins中的内容，会自动添加下划线
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
ins表示一个插入的内容
ins中的内容，会自动添加下划线
-->
<p>
我们的老师真 <ins>好</ins>啊！
</p>
</body>
</html>
pre标签&code标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
需要页面中直接编写一些代码
pre是一个预格式标签，会将代码中的文字保存，不会忽略多个空格
code专门表示代码，不会保留格式
我们一般结合pre和code标签一起使用来表示一段代码
-->
<pre>
<code>
window.onload = function(){
alert("Hello World")
};
</code>
</pre>
</body>
</html>
列表
- 列表就相当于去超市购物时的购物清单
- 在HTML也可以创建列表，在网页中一共有三种列表
1.无序列表
2.有序列表
3.定义列表
无序列表
- 使用ul标签来创建一个无序列表
- 使用li在ul中创建一个一个的列表项
- 一个li就是一个列表项
- 可以通过type属性来修改无序列表的项目符合
可选值：
disc：默认值 实心的圆点
square：实心的方框
circle：空心的圆圈
注意：默认的项目符号我们一般都不使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
列表就相当于去超市购物时的购物清单
在HTML也可以创建列表，在网页中一共有三种列表
1.无序列表
2.有序列表
3.定义列表
-->
<!--
无序列表
- 使用ul标签来创建一共无序列表
- 使用li在ul中创建一个一个列表项
一个li就是一共列表项
可以通过type属性来修改无序列表的项目符合
**可选值：**
disc：默认值 实心的圆点
square：实心的方框
circle：空心的圆圈
注意：默认的项目符号我们一般都不使用
-->
<ul>
<li>西门大官人</li>
<li>唐胜大官人</li>
<li>徐大官人</li>
</ul>
</body>
</html>
有序列表
- 有序列表和无序列表类似，只不过它使用ol代替ul
- 使用有序的序号来作为项目符号
- type属性，可以指定序号的样式
可选值：
1 默认值：使用阿拉伯数字
a/A 使用小写或大写字母作为符号
i/I 采用小写或大写罗马数字作为序号
ol也是块元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
列表就相当于去超市购物时的购物清单
在HTML也可以创建列表，在网页中一共有三种列表
1.无序列表
2.有序列表
3.定义列表
-->
<!--
有序列表和无序列表类似，只不过它使用ol代替ul
使用有序的序号来作为项目符号
type属性，可以指定序号的样式
可选值：1 默认值：使用阿拉伯数字
a/A 使用小写或大写字母作为符号
i/I 采用小写或大写罗马数字作为序号
ol也是块元素
-->
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
</body>
</html>
列表之间的嵌套
- 列表之间都是可以互相嵌套的
- 可以在无序列表里放有序列表
- 也可以在有序列表中放以无序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
列表之间都是可以互相嵌套的，可以在无序列表里放有序列表
也可以在有序列表中放以无序列表
-->
<p>菜谱</p>
<ul>
<li>
鱼香肉丝
<ol>
<li>鱼香</li>
<li>肉丝</li>
</ol>
</li>
<li>
宫保鸡丁
<ul>
<li>宫保</li>
<li>鸡丁</li>
</ul>
</li>
<li>青椒肉丝</li>
</ul>
</body>
</html>
定义列表
- 定义列表用来对一些词汇或内容进行定义
- 使用dl来创建一共定义列表
- dl标签中有两个子标签
dt:被定义的内容
dd:对定义内容的描述 - 同样dl和ul ol之间都可以互相嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
定义列表用来对一些词汇或内容进行定义
使用dl来创建一共定义列表
dl标签中有两个子标签
dt:被定义的内容
dd:对定义内容的描述
同样dl和ul ol之间都可以互相嵌套
-->
<dl>
<dt>胡萝卜</dt>
<dd>一种蔬菜，兔子最爱</dd>
<dd>明目</dd>
<dt>武松</dt>
<dd>景阳冈打老虎</dd>
<dd>投奔梁山</dd>
</dl>
</body>
</html>
