HTML笔记大纲
1 基本介绍
HTML元素
1.级别
容器级 <div> </div> 内部可存放任意内容
文本级 <p></p> 只能存放文字或类似文字的内容
2. 元素对空白不敏感（即可通过空格、换行、缩进对内容进行更改，使其变得更清晰）
3.空白折叠现象：元素内容如果是文本，所有文本之间如果有空格换行、缩进等空白字符，
在浏览器中加载时连载一起的空白会折叠成一个空格显示。
HTML属性
1.书写：开始标签内部 <p class = "abc">段落</p>
2.属性 ：属性名 key
属性值 value
3.一个标签内可以设置多个不同属性，中间用空格隔开
<p class = "abc" id = "p">段落</p>
4.部分标签属性可设置多个属性值，所以属性值都必须写在同一对双括号内，值与值之间需要使用空格分隔
<p class = "abc efg hij">段落</p>
一个标签 => 不同属性
部分属性 => 不同属性值
VS code 编辑器
1.插件
Chinese Language 中文界面
Auto Rename Tag 修改HTML标签，自动完成尾部闭合标签的同步修改
open in browser 右键设置在默认浏览器中打开（Alt + B)
2.快捷键
！ + Tab 生成主体部分
标签名 + Tab 快速生成标签
标签名*n 生成n个相同的标签
h$*n + Tab
Ctrl + Enter 换行
HTML基本骨架
1.基本骨架
<html>
<head>
<title>网页标题</title>
</head>
<body >
网页主体
</body>
</html>
2.类型
<html>标签 ： 定义HTML文件的根元素，所有的标签要写在<html>标签内
<head>标签 ： 内部用于对网页的设置，注意head标签中必须设置的标签是title
<title>标签 ： 让页面拥有一个属于自己的标题
title中的关键字可以做为搜索引擎抓取时的关键字，提高SEO搜
索引擎的优化内部内容会显示在搜索结果的标题部分做为浏览器
收藏夹的默认网页标题
<body>标签 ： 定义网页主体部分，由于存放所有的HTML显示内容的标签
<p>,<h1>,<a>,<div>等
<body>内部的元素内容会显示在浏览器的窗口中
HTML DTD、命名空间、字符集
1.DTD （文档定义类型DocType Definition）
1>位置：完整的HTML文件的第一行内容
2>作用：
告诉浏览器该网页使用的是哪个版本的HTML规范，让浏览器按照
对应版本的HTML语法进行解析页面
3>HTML5
<!DOCTYPE html>
2.命名空间：（xmlns）
1>定义：<html>元素表示整个网页文档，在开始标签上设置了命名空间xmlns属性
XHTML1.0版本
<html xmlns = "http://www.w3.org/1999/xhtml" xml:="en">
</html>
HTML5版本
<html lang = "en">
</html>
2>总体上说是为了相同标签语义相同
xml:可拓展标记语言，使用在传输过程中的规范。被设计用来传输和存储数据，
是HTML的补充
xml:lang = "en" |
lang = "en" |这两个表示所有的标签内容的语言都是英语
lang = "zh-cn" 表示中文
对搜索引擎和浏览器有帮助
3.字符集
1><head>标签内部的<meta>标签通过http- equiv属性定义了当前的网页所使用
的字符编码。
char: character, 字符。set:集合。
XHTML1.0版本
<meta http- equiv="Content-Type" content=" text/html;
charset=UTF-8">
HTML 5版本
<meta charset="UTF-8">
2>常用字符集编码
国际通用字库
●UTF-8: 以字节为单位对Unicode万国码进行编码，涵盖了所有人类的语言文
字，一个汉字为3个字节大小。
中文国标字库
gb2312: 共收入汉字6763个和包括拉丁字母、希腊字母、日文平假
名及片假名字母、俄语西里尔字母在内的682个。
gbk: 是gb2312的扩展，增加了繁体字，共收入21886个汉字和图
形符号，其中汉字(包括部首和构件) 21003个， 图形符号
883个，一个汉字为2个字节大小。
3>使用情况建议:
1、如果没有网页加载速度要求，或者制作的是外文网站，使用utf-8。
2、如果含有大量中文汉字的网站，而且要求网页加载速度快，使用gbk。
注意: meta标签声明的字库，必须和编辑器软件默认编译字库相同，否则会出
现两个字库不匹配，浏览器加载时出现乱码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--应该是将来做移动端的适应接口-->
<title>Document</title>
</head>
<body>
</body>
</html>
2常用标签
注释
<!-- 注释-->
1.在源代码中添加描述性的提示信息，便于我们]阅读代码。
2.对于HTML纠错也大有帮助，可以通过注释某-行HTML代码，以便检索错误的位置。
3.暂时注释掉一 部分不用的代码，便于后期恢复代码。
标题
h$*7快捷键
1.标题标签
标题(Heading)是通过<h1>-<h6> 六个标签分别来对六个级别的标题进行定义的。
<h1>定义最大的标题，<h6>定义最小的标题。
<h1>- <h6>标签都是双标签，且是容器级标签。
2.标签级别
标题标签之间是不能互相嵌套的，下一 级标题与上级标题之间通过同级关系书写，
下一级标题解释说明的是前面距离最近的上一级标题。
正确写法
<h1>-级标题</h1>
<h2>二级标题</h2>
错误写法
<h1>
<h2>二级标题</h2>
</h1>
3.
●标题标签对于呈现文档结构非常重要，使用时要根据标签的重要程度进行选择，
其中<h1>标签最重要，<h2>标签次重要，以此类推。
●<h1>在整个HTML中的权重非常高，内部应该放置HTML中最重要的内容，比如logo。
●<h1>由于非常重要，内部的文字对于提高搜索引擎排名也非常重要，为了防止作弊，
如果一个页面出现多个<h1>,反而降低权重。约定俗成的，-个页面中只会出现一个<h1>。
段落标签和换行标签
1.段落标签
段落(paragraph) 是通过<p>标签进行定义的。
<p>标签是双标签，且为文本级标签。内部只能放置文本、图片、表单元素，或者废弃的
<font>标签等。
2.
换行标签
●<br/> (breaking) 标签是HTML中一个简单的换行符。
●<br />标签是一个单标签。
●在需要换行的位置可以使用<br />标签书写，但是<br />与<p>不同，<br />
没有建立新的、段落的语义，只是简单的进行强制换行。
文本格式化
1.
●HTML中有部分标签是用来对文字进行格式化显示设置的，比如粗体和斜体等。
●但是在HTML .4.0版本规范后，结构和样式进行了分离，HTML只负责搭建结构，
css负责格 式化样式，所以大部分文本格式化标签被废弃，但是在HTML4.01
和XHTML1.0transitional版本中依旧可以使用。
2.文本格式化的标签均为双标签，且为文本级标签，内部只能书写文字。
加注释的重要
<!-- b 定义粗体文本，bold -->
big 定义大号字
em 定义着重文字，emphasis, 自带斜体效果
<!-- i 定义斜体字，italic -->
small 定义小号字
strong 定义加重语气，自带加粗效果
sub 定义下标字，subscript
sup 定义上标字，superscript
ins 定义插入字，自带下划线效果，insert
del 定义删除字，delete
s 不赞成使用，使用del代替, strike的简化
strike 不赞成使用，使用del代替
<!-- u 不赞成使用，定义下划线,使用css中样式代替,underline -->
图像
1.简述
●图像(image) 由<img>标签进行定义。
●<img>标签是单标签，本身相当于一个特殊的文本。
●<img>标签的作用是在 指定的位置插入一张图片。
●在HTML文件，常用的插入图片的类型有: jpg、 png、 gif。
2.标签属性
由于<img>为单标签，所以它只能通过属性进行相关的图像设置。
<img>常用属性展示:
1> src 表示图片的路径; <img src="smile01.jpg"/>
<!--
如果需要插入-张图片 到HTML中，<img>标签必须设置src属性。
src:全称source资源， 属性值是图片查找的路径。
-->
2> 高度和宽度
width 表示图片的宽度;
height 表示图片的高度;
<!--
属性值:以px为单位的数值，或者省略px不写。
如果不设置两个属性，会以图片的原始尺寸加载。
如果设置属性:只设置了其中一个，另一个会等比例变换;如果两个都设置，
按照设置值加载。
-->
3. border 边框属性;它的值可以设置边框的厚度;
<img src="smile01.jpg" border="20">
注意: border属性可以使用css进行设置，
css中的边框有更多的设置效果。
4. title:设置的是鼠标悬停时的提示文本。
属性值:自定义的提示文字内容。
<img src="smile01.jpg" title= "点击查看原网站">
5.alt:
设置的是图片查找错误时，出现的替换文本。
如果能正常找到图片，替换文本是不显示的。
属性值:自定义的替换内容。
<img src="smile01.png" alt= "这是一张微笑的表情">
3. 路径:
路径:指的是寻找文件时所历经的线路，在HTML中有特殊的书写语法。
部分标签的属性需要设置为路径，例如<img> 的src属性。
路径分为相对路径和绝对路径，不同的方式出发点和参考位置不同。
1.相对路径：以HTML文件本身为参考点查找
<!--
相对路径查找文件时，需要从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.绝对路径 ：从电脑盘符or从网址形式查找
注意：
*1地址使用的是正斜杠/
*2从盘符出发的绝对路径的缺点:
a.盘符出发的路径不可移植，不可移动。
b.盘符出发的路径容易出现中文字符，
中文的路径容易出现错误。
<!--
绝对路径查找文件时，不需要从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,
-->
音频和视频
1.音频
1*添加
.音频使用<audio>标签进行定义。
<audio>是双标签。
●同图片一样，需要使用src属性设置音频查找的路径。
音频文件支持的格式包括: .mp3、 .ogg、 .WaV。
2*控制
音频加载后不会自动显示播放器的控制条，需要使用controls属性
进行设置，属性值也是 controls.
<audio src=" audio.mp3" controls="controls"> </audio>
2.视频
1*添加
视频的设置方法与音频非常类似。
视频使用<video>标签进行定义。
<video> 是双标签。
使用src属性设置视频查找的路径。
视频文件支持的格式包括: .mp4、 .ogg、 .webm。
2*控制
视频也需要使用controls属性设置控制条，属性值也是controls。
<video src="video.mp4" controls="controls" ></video>
超级链接
1.概述
HTML使用超级链接与网络上的另一个文档相连。
超链接可以是一个字，一个词，或者一组词，也
可以是一幅图像，可以点击这些内容来跳转到新
的文档或者当前文档中的某个部分。
2.
在HTML中使用<a>标签可以创建链接。
a全称anchor,锚的意思。
●<a>为双标签。
作用:在指定的位置添加超级链接，提供用户进行点击和跳转。
●<a>标签可以实现两种跳转:跨页面跳转、页面内跳转。实现跳转的
方式需要用到一些标签属性。
<a>链接内容</a>
3.href属性
href全称hypertext reference,超文本引用，用于规定链接的目标地址。
属性值:链接目标的路径地址。可以使用相对路径或网址形式的绝对路径。
href属性非常重要，<a>标签要想实现点击跳转，必须设置该属性，拥有这个属性<a>标签在
鼠标移上时才会显示一个小手指针状态。
4.target属性
使用target属性，可以定义被链接的文档在何处跳转显示。
属性值有两种:
_self:默认值，表示跳转的页面在当前窗口打开，不会打开新的窗口。
_blank:空白的，表示跳转的页面在新窗口打开。
5.title属性
title设置的是鼠标悬停时的提示文本，与<img>标签类似。
属性值:自定义的文字内容。
该属性用于给用户进行提示，该链接的功能是什么，提高用户的体验。
<a href="smile.html" title-"点击查看源网页">
<img src="images/smile02.png" />
</a>
锚点跳转
1.页面内锚点跳转
这种跳转方式实现的是从某个位置跳转到同页面的另一个位置。
制作方法分为两个步骤，分别是设置锚点、添加链接。
1* 设置锚点，也就是设置跳转目标位置，有两种设置方式。
1-在目标位置找到任意一个标签，给它添加id属性，
id的属性值必须是唯一的。
id的属性值自定义规则:
必须以字母开头，后面可以有字母、数字、
下划线和横线，区分大小写。
<h2 id="mubiao">目标位置</h2>
2- 在目标位置添加一个空的<a>标签，只设置一个name属
性，name属性值设置方式与id相同，也必须是唯一的。
<a name="mubiao"></a>
2* 添加链接
链接到锚点，在需要点击的位置设置<a>标签，给a的href属
性设置属性值为#id属性值或者#加a的name属性值。
<a href="#mubiao">点击文本</a>
2.跨页面锚点跳转
这种跳转方法综合了跨页面跳转和锚点跳转。
制作方法也分为两个步骤，分别是设置锚点、添加链接。
第一步:设置锚点，方式与页面内锚点跳转一致， 在目标网页的指定位置设置
用id或name属性。
第二步:链接到锚点，添加超级链接时href属性需要更改，属性值写为页面的路径#id。
<a href="new.html#mubiao">点击文本</a>
布局标签
1.布局标签：
<div>和<span>标签常用作布局工具,我们俗称盒子,后期h5也增加了更多布局标签。
<div>和<span>都是没有具体明确的语义的。
2.<div>标签
div:全称division, 分割、区域、跨度的意思。俗称大盒子。
<div>是双标签，是最经典的容器级标签，内部可以放置任意内容。
作用:多用于划分网页区域，进行结构布局。- -般将相关的内容使用<div>包裹起来，
整体设置大的布局效果。
3.<span>标签
span:小区域、小跨度的意思。俗称小盒子。
<span>也是双标签，容器级标签。
作用:在不改变整体效果的情况下，可以辅助进行局部调整。
表单
1.表单的组成
HTML表单用于搜集不同类型的用户输入，表单元素就是网页中提供用户进行输入或点击
的小控件。在HTML中，一个完整的表单通常由表单域、提示信息和表单控件(也称为表单
元素) 3个部分构成。
2.功能
表单域:相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处
理表单数据所用程序的ur|地址，以及数据提交到服务器的方法。如果不定义表单域，
表单中的数据就无法传送到后台服务器。
提示信息:一个表单中通常还需要包含-些说明性的文字，提示用户进行填写和操作。
表单控件:包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提
交按钮、重置按钮等。
表单域
1.概述
HTML表单域使用<form>标签进行定义。
<form>标签是一个功能性标签，填写的表单信息要想正确的提交到后台服务器，必须放
在一个<form>标签之内。
<form>标签为双标签，容器级标签。
2.标签属性
<form>标签通过对应属性规定提交数据的方法和提交位置。
| 属性名 | 属性值 | 描述 |
|---|---|---|
| action | url | 指定接收并处理表单数据的服务器程序的url |
| method | get/post | 用于设置表单数据的提交方式 |
| name | 自定义名称 | 规定表单的名称 |
3.书写：
<form action="data.php" method="get" name="FristForm"></form>
input标签
1.<input>标签
●<input>标签是最重要的一个表单元素。
●<input>标签为单标签， 本身相当于- -个特殊的文本。
●<input>标签需要通过标签属性实现各种功能。
input 标签常用属性
2.文本框、密码框
2-1单行文本输入框: text
<input>标签的type属性值为text。
定义提供用户输入的单行文本的输入框，不能输入多行文字。
常用value属性定义默认的输入文字。
<input type="text" value="请输入您的用户名">
2-2密码输入框:password
<input>标签的type属性值为password。
定义提供用户输入的密码框。
password字段中的字符会被做掩码处理(显示为星号或实心圆)
3.单选框、复选框
3-1单选框:radio
<input>标签的type属性值为radio。
定义提供用户点击选择的单选框。
单选框一般都是成组出现， 多个单选框组成一组选择的情况。
同一组单选框之间必须是互斥的关系，通过给同一组单选框都
设置相同的name属性值实现。
<input type="radio" name="sex" />男
<input type=" radio" name="sex" />女
3-2复选框: checkbox
<input>标签的type属性值为checkbox。
定义提供用户点击选择的多选框。
复选框允许用户在有限数量的选项中选择零个或多个选项。
同一组复选框最好也设置相同的name属性。
<input type="checkbox" name="hobby" />唱歌
<input type="checkbox" name="hobby" />代码
<input type="checkbox" name="hoblby" />运动
4.默认选中设置
单选框和复选框都可以提前设置默认选中项。
<input>标签有一-个checked属性，如果不设置表示默认没有选中。
属性值如果设置为"checked"，表示该项默认被选中。
<input type="radio" name="sex" checked="checked" />男
<input type="checkbox" name="hobby" checked="checked" />唱歌
女
5.按钮
标签有四种形式的按钮:
| type | 名称 | 特点 |
|---|---|---|
| button | 普通按钮 | 没有任何特殊功能 |
| reset | 重置按钮 | 将同一个< form>中填写的表单内容清空，恢复成默认 |
| submit | 提交按钮 | 将填写数据提交到 |
| image | 图片按钮 | 默认与提交按钮的效果相同，使用的图片需要利用src属性,查找正确路径 |
举例：
<input type="button" value="普通按钮">
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">
<input type="image" src="路径">
6.文件上传: file
<input>标签的type属性值为file。
定义文件上传按钮，可以提供用户选择本地文件进行.上传服务器。
<input type= "file">
使用input的multiple属性，可以决定是否可以选择多个文件。
<input type="file" multiple="multiple" />
7.文本域<textarea>
1*定义：
文本域使用<textarea>标签定义，制作可以输入多行文本的区域。
<textarea>标签为双标签，本身相当于一个特殊的文字。
文本域可以设置默认输入的文字，在双标签之间书写默认文字。
2*属性：<textarea>有两个标签属性，可以设置显示区域大小。
<!-- 后期使用CSS写，这里了解就行
rows:行，属性值是数字，数字是几表示文本框显示的最大行数，如果
超过了行数，会被隐藏并且出现滚动条。
cols:列，属性值是数字，数字是几，表示在出现滚动条之后，每一行
显示的最大字节数(一个汉字按2字节计算)。
<textarea cols="30" rows=" 10">
默认输入文字
</textarea>
代表（30/2==15）列，10行
-->
下拉菜单
1.标签
下拉菜单需要至少两个标签完成结构:
<select>:选择，表示定义下拉菜单整体结构。
<option>:选项，表示定义下拉菜单的每一项。
两个标签都是双标签，文本级标签。
2.默认选中项
默认情况下，选中的是第一项。
下拉菜单可以通过给<option>标签设置selected属性，属性值为selected,
更改默认选中项。
<option selected="selected">北京</option>
3.分组管理
下拉菜单中如果选项变得复杂，可以将<option>进行分组管理。
可以使用<optgroup>标签对选项进行分组，<optgroup>是一个双标签。
关系: select > optgroup > option
<optgroup>可以设置一个label属性， 表示给这一-组选项添加一 个分组
标签名，分组 标签<optgroup>是不能被点击选择的。
<!-- 下拉菜单 -->
<p>
一线城市：
<select>
<!-- 分组 -->
<optgroup label="中国城市">
<option>北京</option>
<option selected ="selected">上海</option>
<!--设为默认项 -->
<option>广州</option>
</optgroup>
<optgroup label="外国城市">
<option>巴黎</option>
<option>旧金山</option>
<option>东京</option>
</optgroup>
</select>
</p>
label标签
1.作用：
<label>标签的作用是帮表单元素定义标注(标记)
如果将表单控件与提示内容使用<label>进行绑定后，当用户鼠标点击<label>
内的提示内容时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<!--
所有的表单元素都可以通过绑定其他内容去扩大
触发点击范围，这时需要使用一个<label>标签。
-->
2.绑定方法
2-1 方法一
1给表单元素设置id属性。
2.然后将需要绑定的其他内容用<label>标签包裹。
3.给<label>标签设置for属性，属性值为绑定的表单元素的id属性值。
<input type="radio" name="1" id="通信工程01">
<label for="通信工程01">通信工程</label>
2-2 方法二
如果绑定内容和表单元素写在一起，可以化简绑定写法。
直接使用<label>标签将绑定内容与表单元素起进行嵌套。
<label>
<input type="radio" name="1" id="男">通信工程
</label>
字符实体
在普通文字书写时，有一些特殊符号不能直接书写(例如
连续的空格)，或者符号具有特殊功能也不能直接书写
(例如<>符号)
可以使用一些HTML提前预留好的替换字符进行书写，这
些替换字符叫做字符实体。
列表
列表
1.列表
列表用于制作HTML中的一系列项目。
通常我们会将内容相关、结构相似、样式相近的内容使用列表结构进行搭建。
根据项目的内容不同，可以有三种语义的列表结构:无序列表、有序列表、定义列表。
2.举例：
无序列表
1.无序列表标签
无序列表需要两个标签参与，分别是<ul>和<li>。
ul: unordered list,表示定义-一个无序列表的大结构。
li: list item,列表项，定义的是无序列表内的某一项。
<ul>和<li>是嵌套关系，快捷键: ul>li。
一个列表中可以有任意个列表项。
<ul>
<li>列表项1</li>
<li>列表项2</i>
<li>列表项3</li>
<li>列表项4</li>
</ul>
2.注意事项
1. <ul>内部只能嵌套<li>, <|i>标签不能脱离<ul>单独书写。
2.<li>标签是一个经典的容器级标签，内部可以放置任意内容，
甚至可以放一组ul>li无序列表结构.
3.无序列表的列表项<li>之间，没有顺序的先后之分，它们的重要程度是相同的。
4.无序列表的作用只是搭建列表结构，没有添加样式前缀的功能，样式是由css负责。
有序列表
1.有序列表标签
有序列表的语法与无序列表非常类似，只是在语义上有差异。
有序列表由两个标签组成，分别是<ol>和<li>。
ol: ordered list,表示定义一个有序的列表的大结构。
li: list item,定义的是有序列表的每一项。 <ol>和<li> 是嵌套关系，
快捷键: ol>li。<ol>标签内部可以嵌套任意多个<|i>标签。
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ol>
2.注意事项
1.<ol>内部只能嵌套<li>标签，而<li>不能脱离<ol>单独书写。
2.<li>标签是一个经典的容器级标签，内部可以放置任意内容，甚至可以放ol>li。
3.有序列表的列表项<li>之间，存在顺序先后之分,根据内容的顺序需要合理调整位置。
4.有序列表的作用只是搭建有顺序的列表结构，前面的数字排序样式不是<ol>标签的作
用，而是css负责的。
定义列表
1.定义列表标签
自定义列表不仅仅是一-列项目，而是项目及其注释的组合。
由三个标签组成完整的结构，包含<dl>、 <dt>和<dd>。
dl: definition list,表示定义一一个自定义列表的大结构。
dt: definition term,表示定义自定义列表中的一个主题或者术语。
dd: definition description,定义解释项，表示描述或解释前面的定义主题。
<dl>内部只能嵌套<dt>和<dd>, <dt> 与<dd>是同级关系。
<dl>
<dt>主题</dt>
<dd>解释项</dd>
</dl>
2.注意事项
1. <dl>内部只能嵌套<dt>和<dd>, <dt> 与<dd>不能脱离<dl>单独书写。
2.dl内部可以放多组dt和dd,每个dd解释说明的是前面的距离最近的一个dt。
3.每个dt后面可以有0到多个解释项的dd,每个dd解释的都是前面距离最近的一个dt。
4.dt和dd标签也是容器级标签，内部可以放置任意内容。
5.定义列表中的缩进样式由css负责，标签只负责搭建语义结构。
6.配合着css布局效果，最好每个dl中只添加一组dt和dd,便于后期管理。
表格
表格基础
1.创建一个简单的表格至少有三个标签组成，分别是<table>、<tr>、 <td>标签。
table:表格，定义的是整个的表格大结构。
tr: table rows,表格的行，定义的是表格由多少行组成。
td: table data,表格数据，也叫表格单元格，定义的是每一行内部的单元格。
2.<table>的属性
<table>标签可以添加border边框属性。
属性值:数字，表示像素值。
表格的单元格之间有默认的空隙，会导致双线边框。
解决方法:设置标签样式属性style。
属性值: border-collapse : collapse;表示边框塌陷。
3.表头单元格
如果要绘制表头，使用标签<th>, table head data,表头单元格。
在表格中绘制的时候，替换的是<td>的位置。
<th>标签中自带默认的css样式效果，文字显示粗体居中。
合并单元格
1.
表格的单元格可以进行合并，通过<th>和<td>的两个属性可以进行合并设置。
rowspan:跨行合并。上下的合并。
colspan:跨列合并。左右的合并。
属性值:数字，数字是几表示跨几行或跨几列合并。
2.制作技巧
1.先列出所有行<tr>,以最小单元格为标准。
2.再添加每一行的<td> 或<th>单元格。
3.划分单元格所在行时，顶边对齐的属于同一行。
4.将所有行和列写完后，再查看哪个单元格有跨行或跨列，属性值的个数要参考最小
的单元格。
3.举例
<style>
td {
width: 400px;
}
</style>
<table border="1" style="border-collapse: collapse;">
<!-- -->
<tr>
<td colspan="2">1</td>
<td rowspan="2">2</td>
<td colspan="2">3</td>
</tr>
<!-- -->
<tr>
<td>4</td>
<td rowspan="2">5</td>
<td>6</td>
<td rowspan="2">7</td>
</tr>
<!-- -->
<tr>
<td rowspan="2">8</td>
<td>9</td>
<td>10</td>
</tr>
<!-- -->
<tr>
<td>11</td>
<td colspan="2">12</td>
<td>13</td>
</tr>
</table>
3.实现效果
表格分区
<table>内部最直接的子级包含四个分区标签，他们都是双标签。
caption:表格的标题，内部书写标题文字。
thead: table head,表格的头部。内部嵌套tr>th。
tbody: table body,表格的主体。内部嵌套tr>td。
tfoot: table foot,表格的页脚。内部嵌套tr>td。
四个分区可以选择性的进行组合。