目录
一、web概念概述
1. C/S: Client/Server 客户端/服务器端
2. B/S: Browser/Server 浏览器/服务器端
（1） 静态资源：
（2）动态资源：
二、HTML
1. 概念：是最基础的网页开发语言
2. 快速入门：
3. 标签学习：
（1）文件标签：构成html最基本的标签
（2）语义化标签（html5新的语意结构元素）
（3）分割线标签
（4）文本标签：和文本有关的标签
(5) 超链接标签
(6) 表格标签
（7）图片标签
（8）音乐标签：audio
（9）视频标签：video
（10）列表标签
（11）表单标签
（12）容器（盒子）标签
4. 属性
5. 元素（标签）属性
https://www.w3school.com.cn/ w3school在线教程学习网站
https://www.runoob.com/ 菜鸟教程学习网站
一、web概念概述
* JavaWeb：
* 使用Java语言开发基于互联网的项目
* 软件架构：
1. C/S: Client/Server 客户端/服务器端
* 在用户本地有一个客户端程序，在远程有一个服务器端程序
* 如：QQ，迅雷...
* 优点：
（1） 用户体验好
* 缺点：
（2）开发、安装，部署，维护 麻烦
2. B/S: Browser/Server 浏览器/服务器端
* 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
* 优点：
（1）开发、安装，部署，维护 简单
* 缺点：
（2）如果应用过大，用户的体验可能会受到影响
（3）对硬件要求过高
* B/S架构详解
* 资源分类：
（1） 静态资源：
* 使用静态网页开发技术发布的资源。
* 特点：
* 所有用户访问，得到的结果是一样的。
* 如：文本，图片，音频、视频, HTML,CSS,JavaScript
* 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
静态资源：
* HTML：用于搭建基础网页，展示页面的内容
* CSS：用于美化页面，布局页面
* JavaScript：控制页面的元素，让页面有一些动态的效果
（2）动态资源：
* 使用动态网页及时发布的资源。
* 特点：
* 所有用户访问，得到的结果可能不一样。
* 如：jsp/servlet,php,asp...
* 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
二、HTML
1. 概念：是最基础的网页开发语言
* Hyper Text Markup Language 超文本标记语言
* 超文本:
* 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
* 标记语言:
* 由标签构成的语言。<标签名称> 如 html，xml
* 标记语言不是编程语言
2. 快速入门：
（1） html文档后缀名 .html 或者 .htm
（2）标签分为
a. 闭合标签：有开始标签和结束标签。如 <html> </html>
b. 自闭和标签：开始标签和结束标签在一起。如 <br/>
（3） 标签可以嵌套：
需要正确嵌套，不能你中有我，我中有你
错误：<a><b></a></b>
正确：<a><b></b></a>
（4） 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
（5） html的标签不区分大小写，但是建议使用小写。
(6) 快捷操作emment语法：
生成标签，直接输入标签名按tab键即可
如果想要生成相同标签加上*号即可，如div*3
如果生成的div类名是有顺序的，可以用自增符号$
如果有兄弟关系的标签，用+就可以了div+p
如果生成带有类名或ID名字的，直接写.demo或#two 点tab键就可以了
（7）默认目录结构：
css：存放css文档-页面装修，文字颜色，字号，大小间距，排版
img：存放图片-icon，logo、banner，产品图
js：javascript-页面交互，轮播图，登陆注册验证，加载效果
index：默认的网站首页
（8）注释符：ctrl+？
（9）存储页面：ctrl+s
3. html5新特性
HTML5 现在已经不是 SGML 的子集
图像，位置，存储，多任务等功能的增加
绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术 webworker、websocket、Geolocation
移除的元素：
纯表现的元素：basefont、big、center、font、s、strike、tt、u
对可用性产生负面影响的元素：frame 、frameset 、noframes
支持 HTML5 新标签：
IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签
可以利用这一特性让这些浏览器支持 HTML5 新标签
浏览器支持新标签后，还需要添加标签默认的样式
当然也可以直接使用成熟的框架、比如 html5shim4. 标签学习：
（1）文件标签：构成html最基本的标签
* html:html文档的根标签
* head：头标签。用于指定html文档的一些属性。引入外部的资源
* title：标题标签。
* body：体标签
* <!DOCTYPE html >：html5中定义该文档是html文档
<!DOCTYPE html><!-- 文档声明-版本信息 -->
<html><!-- 定义html文件 --><!-- 根标签 -->
<head><!-- 头部标签 --><!-- 属于双标签，也叫闭合标签 -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
使用ico图标：首先把facicon.ico这个图标放到根目录下，在html的head里引入代码
<base target="_blank"/> <!-- 设置整体（所有）链接的打开状态（以新窗口打开页面），
base写到<head> </head>之间 -->
<meta charset="utf-8" /><!-- 编码格式 --><!-- 属于单标签，也叫自闭合标签 -->
<title>网页设计知识点</title><!-- 网页标题 -->
</head>
<body>
<!-- 内容主体 -->
</body>
</html>（2）语义化标签（html5新的语意结构元素）
<header>定义文档或节的页眉</header>
<nav>定义文档内的导航连接</nav>
<main>定义文档的主要内容</main>
<article>定义文档内的文章</article>
<section>定义文档中的节</section>
<aside>定义页面内容之外的内容</aside>
<details open="open" 默认不可见，需设置open属性>定义用户可查看或隐藏的细节
（默认隐藏，点击查看）</details>
<summary>定义details元素中的可见标题</summary>
<dialog>定义对话框或窗口</dialog>
<figure>定义自包含内容，比如图示、图标、照片、代码清单等（常用于图像与其描述组合）</figure>
<figcaption>figere标题</figcaption>
<Mark>定义重要或强调内容</Mark>
<menu-item>定义用户能够从弹出菜单调用的命令或菜单项目</menu-item>
<progress max="需要完成的值" value="进程的当前值">定义运行中的任务进度</progress>
<meter form="meter元素所属表单" high="界定为高值的范围" low="界定为低值的范围"
max="规定范围的最大值" min="规定范围的最小值" optimum="规定度量的最优值"
value="规定度量的当前值">定义已知范围内的标量测量</meter>
<time>定义日期时间</time>
<footer>定义文档或节的页脚</footer>语义化的理解
用正确的标签做正确的事情！
HTML 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的。
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO 。
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解
（3）分割线标签
<hr />
hr{
width：200px；height：300px
border：none（清除边框描边-默认自带）
background-color：yellow
}（4）文本标签：和文本有关的标签
空白折叠现象：
html中所有文字内容之间的空格，换行，缩进都会被折叠成一个空格显示
解决方法：空格符： （表示一个空格）
其他特殊字符：
< ：<
> : >
预格式化标签：浏览器完整保留源文件中所定义的格式，包括换行、空格、缩进以及其他特殊格式
<pre>预格式化标签</pre> 标题标签h
（从1级标题到6级标题）,默认字体进行加粗，字号从h1到h6逐级递减
<h1></h1> ~ <h6></h6>段落标签
<p></p> 一段落一标签字节标签
<span></span> （用来包裹一小段或几个文字在同一行显示）多行文本标签
<textarea rows="表示列宽" cols="表示行高" placeholder="提示文本"></textarea>
（开始和结束标签之间不留空格）
textarea{
outline：0；取消轮廓线
resize：none；防止拖拽文本域
}滚动文字
<marquee behavior="scroll（循环往复滚动）/slide（滚动一次就停止）
/ternate（来回交替滚动）" direction="up/down/left（向左滚动，默认值）/right（滚动方向）"
scrollamount="滚动速度，单位px（每次移动的长度）"
scrolldelay="滚动延迟时间，单位ms（延迟时间越小滚动速度越快）"
loop="滚动循环次数，一般为整数（-1表示无限循环）"
onmouseover="this.stop()" onmouseout="this.start()
style="width: 600px; height: 100px;"> //需要设置宽高显示
</marquee>强调加粗标签（自带加粗效果）
<strong>内容</strong>* <b>：字体加粗
强调倾斜标签（自带倾斜效果）
<em>内容</em>* <i>：字体斜体
强制换行标签
<br /> 一换行一标签(5)超链接标签 <a></a> , 插入超链接
<a href="链接地址"></a>
<a href="javascript:;"></a>阻止超链接跳转
链接地址：
绝对地址：http协议（https://baidu.com）
相对地址：新建的同级html页面（homework.html）
<a href="#"></a> #代表空链接
<a target="是否在新标签页面打开链接"></a> 属性值：“_blank” 表示在在新标签页面打开链接
/“_parent”上一级窗口打开/“_self”同一窗口打开，默认值
/“_top”整个窗口打开/“_framename”框架或浮动框架名
<a title="">设置鼠标悬停文本：指向链接时的提示信息</a>
a{
text-decoration：none；超链接下划线隐藏
}(6)表格标签
<table></table> 标签定义表格
<caption>表格标题</caption> （标题会居中显示在表格之上）
<thead></thead> 用于定义表格头部，用来放标题
<th></th>（定义表头-）
<tbody></tbody> 用来定义表格主体，放数据本体
<tr></tr>（定义表格行-几行）
<td></td>（定义表格单元-每列横向单元格内内容）标签组成
<tfoot></tfoot>放表格的脚注之类table标签的属性：
cellspacing：表示单元格与单元格之间的距离
cellpadding：表示单元格<td></td>内边距到其内容之间的距离
border：边框
border-collapse:collalse;边框重叠合并
合并单元格：
a.先确定跨行还是跨列合并（rowspan：跨行 colspan：跨列）
b.根据 先上后下 先左后右 的原则找到目标单元格，然后写上合并方式还有要合并的单元格数量，比如
rowspan=“2”：跨行（上下合并-2行）
colspan=“3”：跨列（左右合并-3列）
c.删除多余的单元格
<table border="" cellspacing="1px" cellpadding="2px">
<thead>
<caption>学生课程表</caption>
<tr> -第一行
<th>星期一</th> 第一列
<th>星期二</th> 第二列
<th>星期三</th> ...
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
</thead>
<tbody>
<tr> 第二行
<td rowspan="2">语文</td>
<td>数学</td>
<td>英语</td>
<td>物理</td>
<td>化学</td>
<td>生物</td>
<td colspan="3">历史</td>
</tr>
<tr> 第三行
<td>语文</td> 合并需删除
<td>数学</td>
<td>英语</td>
<td>物理</td>
<td>化学</td>
<td>生物</td>
<td>历史</td>
</tr>
...
</tbody>
<tfoot>
</tfoot>
</table><table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
<tr>
<th rowspan="2">编号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>小龙女</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td colspan="2">杨过</td>
</tr>
</table>（7）图片标签
<img />,插入图片<img src="图片的链接地址" title = "图片" alt="图片不能显示的替换文本"
width="图片的宽度" height="图片的高度" />图片的链接地址：
绝对地址：盘符 ：src = E:"\图片\动漫\2.pang"
（盘符：C、D、E盘）-利用盘符（原文件目录位置）方能打开 -不常用
http协议：src="https://baidu.com/u=193&f=GIF" -网址打开
相对地址：src="img/1.pang"（img文件夹里）
<img> 的 title 和 alt 有什么区别
title 通常当鼠标滑动到元素上的时候显示
alt 是<img> 的特有属性，是图片内容的等价描述，用于图片无法加载显示、读屏器阅读图
片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分
析。
元素的垂直对齐方式（只针对于行内元素或行内块元素，一般用于图片对齐文字）
vertical-align: baseline（默认底部基线对齐）/
middle（垂直居中）/auto/top（顶部对齐）/bootom;注意：
若父盒子由图片撑开，图片下面会留空隙，因为图片或表单等行内块元素，他的底线会和父级盒子基线对齐
a.解决办法：给img：vertical-align：middle/top，即不要基线对齐
b.把图片转换为块级元素
src 与 href 的区别
src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。
src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在
位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和
frame 等元素
href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）
或当前文档（链接）之间的链接，如果我们在文档中添加
<link href="common.css" rel="stylesheet"/> 那么浏览器会识别该文档为 css 文件，就
会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加
载 css ，而不是使用 @import 方式图像热区链接：
<img src="图片地址" usemap="#映射图片名称">
<map name="映射图片名称">
<area shape="热区形状" coords="热区坐标" href="热区链接地址" alt="连接失效时提示信息" />
</map>
热区形状shap：rect矩形/circle圆形/poly多边形
coords与shap对应的坐标值：
rect：x1，y1 x2，y2 （4个值）
circle：center-x，center-y，radius（3个值）
poly：x1，y1 x2，y2 ...（（n+1）*2个值）（8）音乐标签：audio
<audio src="音乐的路径" controls="controls" autoplay="autoplay"
loop="loop" preload="auto/metadete/none" poster="url地址">
<source src="音频地址" />
<source src="音频地址" />可以设置多个原文件
</audio>
(controls="controls"):播放控件
(autoplay="autoplay"):自动播放
（loop="loop"）：循环播放
preload = "auto页面加载即加载视频/metadete只加载元数据/none不加载")
视频在页面加载时进行加载，并预备播放（使用了autoplay则忽略该属性）
poster="url地址" 视频加载时显示的图像，默认显示视频第一帧画面
<bgsound src="背景音乐链接"></bgsound>（9）视频标签：video
<video src="视频的路径" width="60px" controls="controls" autoplay="autoplay"
loop="loop" preload="auto/metadete/none"
poster="url地址">
<source src="视频地址" />
<source src="视频地址" />可以设置多个原文件
</video>
play播放/pause暂停
视频可以设置宽度
(controls="controls"):播放控件
(autoplay="autoplay"):自动播放
（loop="loop"）：循环播放
(preload="auto页面加载即加载视频/metadete只加载元数据/
none不加载")视频在页面加载时进行加载，并预备播放（使用了autoplay则忽略该属性）
poster="url地址" 视频加载时显示的图像，默认显示视频第一帧画面
<embed src="多媒体文件（视频/音频/动画）" type=" " autostart="true自动播放
/false控件播放" loop="true循环/false不循环"> 有些浏览器需设置宽高
（10）列表标签
a.有序列表：重点强调顺序性
<ol type="A" 更改所标序号（1/A/a/i/I）的类型> 代表有序列表
<li>列表项内容</li> 代表列表项（按先后顺序默认用阿拉伯数字标序号并先后排列）
</ol>
简写方式：ol>li*2(表示ol标签里嵌套2个li标签)单击Tab键 快速生成
<ol>
<li></li>
<li></li>
</ol>b.无序列表：重点强调并列关系
<ul type="disc" 更改所标序号（disc空心圆点/circle实心圆点/square方块）的类型> 代表无序列表
（按先后顺序默认用实心圆点标注并列排列）
<li>列表项内容</li> 代表列表项
</ul>
li{list-style：none；} -列表符号隐藏c.自定义列表：用来描述名词以及解释
<dl>定义
<dt>名词</dt>
<dd>解释</dd>
</dl>
列表声明
css列表属性：可以设置、改变列表项标志，或者将图像作为列表项标志
list-style:（简写属性。用于把所有用于列表的属性设置于一个声明中）
list-style-position：inside 内部/outside 外部-默认 （将设置列表中列表项标志的位置）
list-style-type：disc 实心圆点/square 小方块/circle 空心圆/none 取消列表标志（设置列表项标志的类型）
list-style-image：url（图片路径-- ..表示返回上一级路径）（将图像设置为列表项标志）
（11）表单标签
<form action="表单数据的提交地址"
method="表单数据发送到服务器的方法 （get（小数据以铭文形式传送）/post（加密传送））"
enctype="application/x-www-form-urlencoded"
（数据表单在发送到服务器之前编码所有字符，默认）
/"multipart/form-data"(不对字符编码，在使用包含文件上传控件的表单时，必须使用该值)
/"text/plain"(空格转换为“+”，但不对特殊字符编码)
novalidate="true(默认不验证)/false(提交表单时进行验证)">:表单框
</form><input /> :输入框
<input type="text/password" 改变输入框的类型 placeholder="提示信息"
autocomplete="on" 记忆提示/"off" autofocus页面加载完成自动聚焦 >
label 标签：用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会自动获得输入焦点。
第一直种用法：label标签直接包括input标签（适合单个表单选择）
<label> <input type="text"/> </label>
第二种用法：用for属性规定label与哪个表单绑定
<label for="sex">男</label>
<input type="radio" id="sex">
取消边框：border：none
取消外边框轮廓线：outline：none
取消默认背景：background：none属性（输入限制）
disabled 规定输入字段应该被禁用
readonly 规定输入字段只读（不可修改）
required 规定输入字段必填
pattern 规定通过其检查输入值的正则表达式
正则表达式：pattern="^[1][3-8]+\\d{9}$"
^表示一行的开始，$表示正则结束，[0-9]等价于\\d，
{9}表示整数长度为任意的9个数字，+\\d表示正整数
maxlength 规定输入字段的最大字符数
max 规定输入字段的最大值
min 规定输入字段的最小值
size 规定输入字段的宽度
step 规定输入字段的合法数字间隔
value 规定输入字段的默认值
修改placeholder属性的样式
input::-webkit-input-placeholder{ /*WebKit browsers*/
color: red;
}
input::-moz-input-placeholder{ /*Mozilla Firefox*/
color: red;
}
input::-ms-input-placeholder{ /*Internet Explorer*/
color: red;
}单选按钮
<input type="radio(单选按钮)" name="分组名（不用汉字）"
（同一组内单选，分组名需要相同才可实现单选）
(name表单中的名字,后台可以通过name这个属性找到这个表单) />复（多）选框
<input type="checkbox(复（多）选框)" name="分组名（不用汉字）"
（同一组内多选，分组名不同）
(name表单中的名字,后台可以通过name这个属性找到这个表单)/>下拉菜单
<select name="" size="下拉列表大小（能看见几个列表项）"
multiple="multiple" （设置列表框支持多选）>
<option selected="selected"或checked="checked" （设置选项为预选状态）>内容</option>
</select>
<input list="courese名字" placeholder="请选择课程" />
<datelist id="courese名字(同上)">
<option value="内容1"></option>
<option value="内容2"></option>
</datelist>（部分浏览器可能不支持datelist属性.......）提交按钮：submit
<input type="submit" value="提交成功(默认为提交，指定文本框中的初始值)"
重置按钮：reset
<input type="reset" value="重新书写" （默认为重置） />
value：（初始值）文件选择框
<input type="file" name="" id="" value="" />
（选择文件后并不能真正打开，只是将文件名回填到文件输入框内）
<input type="file" name="file" onchange="imgPreview(this)" accept="image/*" />图像按钮
<input type="image" src="" /> //将一张图片作为按钮使用
普通按钮
<input type="button">隐藏框
<input type="hidden">（隐藏框不显示在表单中，随用户表单一起提交给服务器）html5新增输入类型
.number （属性：max（可输入最大值）/min（可输入最小值））
.email
.color
.date
.time
.datetime
.datetime-local
.month
.week
.range（滑动控件）
.search
.tel
.url
.multiple 可以多选文件提交
.date pickers（12）容器（盒子）标签
<div></div>:容器（盒子），打组标签-用于页面模块划分，包裹和分割模块，相当于打组。
改变容器（内容的显示）位置：
<div align="内容的显示位置"></div>
align：改变内容的显示位置（center居中/left居左/right居右 ）
div{ margin：0 auto；（上下边距为0，水平居中）}4. 属性
语法： 属性名=“属性值”
属性的作用：帮助标签实现效果，标签与属性之间，属性与属性之间都用空格隔开
可继承的属性：font-size font-faminly color
不可继承的样式：border,padding,margin,width,height（1）文本属性
通过css文本属性可以定义文本的外观（字体颜色、字号大小、文本加粗、倾斜......）
字体颜色 color ：#666 ；
字号大小 font-size：18px ；
文本加粗（字重）font-weight：normal（等价于400）（常规字体）
/lighter（更细的-浏览器可能不支持）/bold（等价于700）（加粗）/bolder（更粗的-常用）；
字体样式 font-style：normal（常规字体）/italic（倾斜）/oblique（更倾斜的-常用））；
行高 line-height：27px （字体大小1.5倍起）；
单行文本在什么高度里上下垂直居中显示（设置文本行高等于父级标签高度，则文本对于标签垂直居中）
字间距 letter-spacing：2px （默认为0，中文英文都适用）；
词间距 word-spacing：4px （只适用于英文单词）；
首行缩进 text-indent ：36px （字体大小两倍）；
文本显示（水平-对齐）方式 text-align：left/center/right ；
（不止作用于文本，对行内块元素同样有效）（文本居中不能使用margin：0 auto）
文本修饰 text-decoration ：overline 上划线/line-through 删除线
/underline 下划线/none取消文本修饰效果（取消超链接下划线）；
英文大小写 text-transform：capitalize（开头首字母大写）
/uppercase（全部大写）/lowercase（全部小写）；
文字字体 font-family：Ariel,“思源黑体”（各种字体之间必须使用英文状态下的逗号隔开；
中文字体需要加英文状态下的引号，当需要设置英文字体时，英文字体必须位于中文字体之前。）
（可以添加到通配符选择器里面——页面所有字体都确定了）；
font：italic 700 20px "思源黑体"；
（总写，严格按照<font-style font-weight font-size font-family的顺序,
其中字体大小和字体种类即最后两种不能省略不写）
vertical-align: baseline（默认底部基线对齐）/middle（垂直居中）/auto/top（顶部对齐）/bootom;元素的垂直对齐方式（只针对于行内元素或行内块元素，一般用于图片对齐文字）
clip: auto;设置元素的形状，元素被剪入这个形状中显示出来
注意：
若父盒子由图片撑开，图片下面会留空隙，因为图片或表单等行内块元素，他的底线会和父级盒子基线对齐
a.解决办法：给img：vertical—align：middle/top，即不要基线对齐
b.把图片转换为块级元素
5. 元素（标签）属性
根据是否可以设置宽高，是否可以独立成行来进行区分
（1）块级元素（默认独占一行，可以设置宽高，宽度默认是容器即父级100%的宽度，里面可以放置块级元素和行内元素，但文字类标签里不能放div标签）：
<h1>标题标签</h1>
<p>段落标签</p>
<ol>有序列表</ol>，<ul>无序列表</ul>，<dl>自定义列表</dl>
<div>div标签</div>（2）行内元素（设置宽高无效，默认在行内逐个显示，尺寸是由内容决定的，行内元素只能容纳文本或其他行内元素）：
<a href="超链接地址">超链接标签</a>
<span>字节标签</span>
（3）行内块元素（在行内逐个进行展示，但是之间会有空白间隙，但可以设置宽高）：
<img src="图片路径" 图片标签 />
<input 输入框 />元素属性转换
display：block（展示转化为-块级元素）
inline（展示转化为-行内元素）
inline-block（展示转化为-行内块元素）
none（属性展示-隐藏）
6. 重绘与回流(重排)的概念
回流(重排): 当浏览器必须重新处理和绘制部分或全部页面时，回流就会发生
重绘: 不影响布局, 只是标签页面发生变化, 重新绘制
注意: 回流(重排)必引发重绘, 重绘不一定引发回流(重排)