一、HTML5
当我学习了HTML之后，我认为其实HTML归根结底也就是两个字：标签。学习HTML就是学习其中的各种标签。
引言
1.网页
HTML指的是超文本标记语言，不是编程语言，而是一种标记语言。
标记语言是一套标记标签
所谓超文本，有两层含义：
（1）超出了文本限制，可以是图片，音频、视频等
（2）它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）
2.浏览器
常用浏览器有IE、火狐、谷歌、Fafari、Opera等
**浏览器内核（渲染引擎）：**负责读取网页内容，整理讯息，计算网页的显示方式并显示页面
3.Web标准
Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。
为什么需要Web标准：最主要的是浏览器不同，他们显示页面或者排版就有些许差异
Web标准的构成：主要包括结构（Structure）、表现(Presentation)和行为(Behavior)三个方面。
HTML语法规范
标签有单标签和双标签两种。
标签关系：包含关系和并列关系
HTML基本结构标签（骨架标签）
开发工具
vscode快捷键：
快速复制一行：shift+alt+下箭头
添加多个光标：ctrl+alt+下箭头
快速跳到某一行：ctrl+g
代码对齐：ctrl+k + ctrl+f
文档类型声明标签： 这句代码意思是当前界面使用html5版本来显示网页
en代表这是英文网页，zh-CN就是中文网页 meta标签设置字符集HTML常用标签
1.标题标签：
<body>
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
</body>
2.段落标签和换行标签：
<p>kksdf<br/>fsd</p>
3.文本格式化标签：
加粗：（1）我是<strong>加粗</strong>的文字
（2）我是<b>加粗</b>的文字
倾斜：（1）我是<em>倾斜</em>的文字
（2） 我是<i>倾斜</i>的文字
删除线：我是<del>被删除</del>的文字
下划线：（1）<ins>我是文字</ins>
（2）<u>我是文字</u>
4.div和span标签
5.图像标签和路径
1.图像标签
src是标签的必须属性，它用于指定图像文件的路径和文件名
<img src="图像URL">
属性采取键值对的格式，即key="value"的格式
CSS3-图片模糊处理：
/* blur是一个函数，小括号里面数值越大，图片越模糊，注意数值要加单位 */
filter: blur(5px);
2.路径
路径分为相对路径和绝对路径
相对路径：（1）同一级：targetfile
（2）上一级：…/targetfile
（3）下一级：/targetfile
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是以盘符开始的路径，或者是完整的网络地址
6.超链接标签：
语法格式：<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像</a>
href：用于指定链接目标的url地址。
target：其中_self为默认值，_blank为在新窗口中打开方式
链接分类：（1）外部链接：<a href="http://www.baidu.com">百度</a>
（2）内部链接：<a href="index.html"></a>
空链接： <a href="#">公司地址</a>
下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件
网页元素链接:在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
锚点链接：点击链接，可以快速定位到页面中的某个位置
（1）在href属性中，设置属性值为 #名字 的形式，如<a href=“#two”>第2集</a>
(2)找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id="two"></h3>
html中的注释标签：`
特殊字符：
7.表格标签
<!-- 用于定义表格的标签 -->
<table>
<!-- tr标签用于定义表格中的行 -->
<tr>
<!-- th标签表示HTML表格的表头部分，表头单元格会加粗，居中 -->
<th></th>
<!-- td标签用于定义表格中的单元格，即数据单元格的内容 -->
<td>单元格内的文字</td>
</tr>
</table>
表格结构标签：
分别用<thead>标签表示表格的头部区域 <tbody>表示表格的主题区域
合并单元格
方式：（1）跨行合并：rowspan=“合并单元格的个数”
（2）跨列合并：colspan=“合并单元格的个数”
目标单元格：（写合并代码）
跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码
合并单元格三部曲：（1）确定跨行还是跨列
（2）找到目标单元格。写上合并方式=合并的单元格数量。比如
<td colspan='2'></td>
（3）删除多余的单元格
<table border="1" width="200" height="200">
<tr>
<td>1</td>
<td colspan="2">2</td>
<!-- <td>3</td> -->
</tr>
<tr>
<td rowspan="2">4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<!-- <td>7</td> -->
<td>8</td>
<td>9</td>
</tr>
</table>
8.列表标签：
表格是用来展示数据的，列表是用来布局的
列表可分为：无序列表、有序列表和自定义列表
无序列表：
无序列表的各个列表项之间没有顺序级别之分，是并列的
ul中只能嵌套li
li相当于一个容器，可以容纳所有元素
无序列表会带有自己的样式属性，但在实际使用中，我们会使用css来设置
<ul>
<li>鸡</li>
<li>猫</li>
<li>狗</li>
</ul>
有序列表：
列表排序以数字来显示
<ol>
<li>鸡 </li>
<li> 猫</li>
<li> 狗</li>
</ol>
自定义列表：
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
9.表单标签
使用表单的目的就是为了收集用户信息
一个完整的表单通常由表单域、表单控件（也称表单元素）和提示信息3个部分组成
9.1表单域：
<form>标签用于定义表单域，把它范围内的表单元素信息提交给服务器
9.2表单控件：
9.2.1 input输入表单元素
<input>标签包含一个type属性，根据不同的type属性值，输入字段有很多种形式
9.2.1.1.type属性
9.2.1.2 name、value属性：
单选按钮和复选框要有相同的name值
<form>
用户名：<input type="text" value="请输入用户名"> <br>
密码：<input type="password"><br>
<!-- name是表单元素名字，这里性别单选按钮必须有相同的名字name才可以实现多选1 -->
性别：男<input type="radio" name="sex">女<input type="radio" name="sex">
其他<input type="radio" name="sex">
<br>
爱好：吃饭<input type="checkbox" name="hobby">睡觉<input type="checkbox" name="hobby">
打豆豆<input type="checkbox" name="hobby">
</form>
9.2.1.3 checked、maxlength属性：
单选按钮和复选框可以设置checked属性，当页面打开的时候就可以默认选中这个按钮
checked="checked"
文本框中可以使用maxlength来规定文本的长度
9.2.1.4 label标签
<label> 标签通过 for 属性与表单元素关联，使用户点击标签时能够自动聚焦到相关的表单元素
核心：<label>标签的for属性应当与相关元素的id属性相同
<!-- 点击用户名三个字也可以进行输入 -->
<label for="text">用户名</label>
<input type="text" id="text">
9.2.2 select下拉表单元素
籍贯：<select>
<option>北京</option>
<!-- 使用selected来决定刚开始默认的选择 -->
<option selected="selected">上海</option>
<option>广州</option>
<option>深圳</option>
</select>
9.2.3.textarea文本域元素
当输入内容较多时，我们就不能使用文本框表单了，此时应该使用<textarea>标签
<textarea>标签是用来定义多行文本输入的空间
<textarea cols="50" rows="20">
</textarea>
9.3查阅文档
二、CSS
学习CSS，我总结认为其本质也就是学习一个模版：
选择器 {
里面一堆的键值对
}
说明： 你应该明确，选择器是为了选出这个CSS到底要修改哪个HTML元素，键值对中的键指定的是选中元素的属性，值是该属性为这个值时有什么作用、效果。
（1）首先学习各式各样的选择器，基础选择器、复合选择器、CSS3提供的属性选择器、伪类选择器，伪元素选择器等等等等，明白各个选择器的使用。
（2）其次学习CSS中的属性，这里的属性主要指的是（修改HTML元素的某部分）的属性。可以按照大类来分，例如字体属性、文本属性、背景属性、有关布局的属性（盒子模型、浮动、定位、流式布局、弹性布局、网格布局）等等等等，需要使用其他属性的话再去参照官方文档。
（3）（1）和（2）是站在一个CSS内部的角度，但是我们还需要用整体的目光去看待CSS时。1.例如一个CSS作为一个整体与其他CSS的关系。举例：一个HTML元素，可能有很多个选择器可以选中它，这时候就有选择器的优先级问题，同时涉及权重叠加。2.整体属性，例如display属性，display: none;整体就看不到了。块级元素和行内元素的各自显示模式特点。块级元素的一些需要注意的地方（margin合并问题、高度塌陷、margin塌陷问题等）
1.引言
CSS是层叠样式表（Cascading Style Sheets）的简称，有时我们也会称之为CSS样式表或级联样式表
CSS也是一种标记语言
CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式
CSS规则由两个主要的部分构成：选择器以及一条或多条声明
<style>
p {
/* 属性之间使用;隔开 */
color: antiquewhite;
font-size: 120px;
}
</style>
代码规范：（1）选择器与{之间加一个空格
（2）:与属性值之间加一个空格
（3）使用 展开格式 书写CSS代码，一行一个属性
（4）全部小写
2.CSS选择器
作用：根据不同的需求把不同的标签选出来
选择器分为基础选择器和复合选择器两大类。
2.1CSS基础选择器
基础选择器是由单个选择器组成的，包括标签选择器、类选择器、id选择器和通配符选择器
2.1.1标签选择器
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面某一类标签指定统一的CSS样式
<style>
p {
/* 属性之间使用分号隔开 */
color:antiquewhite;
font-size: 30px;
}
div{
color:brown;
font-size: 30px;
}
</style>
优点：能快速为页面中同类型的标签统一设置样式
缺点：不能设计差异化样式，只能选择全部的当前标签
2.1.2类选择器
此方式是开发中最常用的一种方式
<style>
/* 点 + 类名 */
.red{
color:red;
}
</style>
<body>
<p class="red">男生</p>
<div class="red">女生 </div>
</body>
类命名规则：
头：header 内容：content/container 尾: footer 侧栏：sidebar 栏目：column
左右中：left right center 登录条：loginbar 标志：logo 广告：banner
热点：hot 新闻：news 子导航：subnav 菜单：menu 子菜单：submenu
搜索： search
类选择器-多类名：
可以给一个标签指定多个类型，从而达到更多的选择目的。
<style>
/* 点 + 类名 */
.red{
color:red;
}
.font{
font-size: 34px;
}
</style>
<p class="red font">男生</p>
开发过程中的使用场景：
（1）可以把一些标签元素相同的样式（共同的部分）放到一个类里面
（2）这些标签都可以调用这个公共的类，然后再调用自己独有的类
2.1.3 id选择器
HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义
<style>
#red {
color:pink;
}
</style>
<p id="red">男生</p>
id选择器只能调用一次，类选择器可以被多个html标签使用
2.1.4 通配符选择器
在CSS中，通配符选择器使用"*"定义，它表示选取页面中所有元素（标签）
<style>
* {
color: antiquewhite;
}
</style>
3.CSS属性
CSS字体属性
字体简单属性
字体系列：
CSS使用font-family属性定义文本的字体系列
p {
font-family: 'Microsoft YaHei'；
}
<p>飞流直下三千尺</p>
可以接多个字体，浏览器从第一个字体开始，电脑上有则显示
字体大小、粗细
body {
font-size: 20px;
/* normal(正常字体)、bold(粗体)、bolder(特粗体)、lighter(细体)、number */
/* 400等同于normal，700等同于bold */
/* font-weight: normal; */
font-weight: 700;
}
文字样式：font-style: normal;
font-style: normal;
/* 斜体 */
font-style: italic;
注意：平时很少情况下使用斜体，反而是将斜体改为不倾斜字体
字体复合属性
<style>
body {
/* 次序不能颠倒，font-style,font-weight,font-size/font-height,font-family */
font: italic 700 20px 'Microsoft yahei';
}
</style>
font-size和font-family两个属性必须写，其他的可以不写
CSS文本属性
CSS文本属性可以定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
文本颜色：
三类表示方式：预定义颜色值（red、green等）、十六进制（#FF0000）、RGB代码(rgb(255,0，0))
对齐文本：text-align属性用于设置元素内文本内容的水平对齐方式
div {
text-align: center; //还有 left、right
}
装饰文本
装饰文本是指对文本应用特定的视觉效果，以突出显示或改变文本的外观。这些效果通常包括了文字的下划线、删除线、上划线等
<style>
div {
text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
}
</style>
文本缩进
2em表示缩进当前元素2个文字大小的距离
div {
/* 让文本的首行缩进多少距离 */
text-indent: 2em;
}
行间距
行间距包括上间距、文本高度、下间距三部分
而文字的大小不会变，文字默认大小事16px
div{
line-height: 16px;
}
结果为：（上、下间距均为0）
CSS背景属性
颜色：
background-color: 颜色值：一般情况下默认为transparent。
图片：
background-image: url(url地址);
平铺：
background-repeat: no-repeat;
默认情况下是平铺的，repeat是平铺，repeat-x沿x轴平铺，repeat-y沿y轴平铺
注意背景图片会压住背景颜色
背景图片位置：
1.参数是方位名词，顺序无关;如果只制定了一个方位名词，则另一个默认居中对齐
background-positon: center top;
2.参数是精确单位，有严格顺序，第一个为x，第二个为y;如果只制定了一个方位名词，则一定是x坐标，y垂直居中
background-positon: 20px 50px;
3.混合单位
background-positon: 20px center;
背景图片固定：
background-attachment: scroll || fixed
scroll: 背景图像是随对象内容滚动（默认）
fixed：背景图像固定
背景复合写法：
background: 颜色 图片地址 平铺 图像滚动 图片位置
CSS3为我们提供了背景颜色半透明的效果IE9版本浏览器才支持
backgroun: rgba(0,0,0,0.3)
最后一个参数为0-1之间的透明度
4.CSS的引入方式
按照书写位置的不同，CSS样式表可以分为三大类：
1.行内样式表（行内式）
2.内部样式表（嵌入式）
3.外部样式表（链接式）
实际开发中都是外部样式表，核心是样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用
步骤：（1）创建.css文件，将css代码写入其中
（2）在html页面中，使用<link>标签引入这个文件
<link rel="stylesheet" href="style.css">
style.css文件：
div {
color: red;
}
5.Emmet语法
快速生成html结构语法：
1.输入标签名，再按Tab键，即可自动生成完整标签
2.如果想生成多个相同标签，使用*号，如 div*3
3.想生成父子级关系的标签，可以使用>,例如ul>li
4.兄弟关系，可以使用+号，例如 div+p
5. 生成带有类名或者id名字的，写 .demo 或者 #two
快速生成css样式：{}里面使用简写的方式，再按Tab键即可
例如， text-align: center; 可以输入tac，再按Tab键
6.CSS的复合选择器
后代选择器
后代选择器又称包含选择器，可以选择父元素里面的子元素。
//li 一定得是 ol 的后代
//可以是任意选择器的组合
<style>
ol li {
color: pink;
}
ol li a {
color:red;
}
</style>
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
<li><a>444</a></li>
</ol>
子元素选择器
只选择作为某元素的最近一级子元素
<style>
ol>li {
color: pink;
}
</style>
<ol>
<li>111</li>
<li>222</li>
</ol>
并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式。
<style>
/* 并集选择器习惯竖着写 */
div,
p {
color: pink;
}
</style>
链接伪类选择器
伪类选择器用于选择文档中处于特定状态或满足特定条件的元素。它们之所以被称为 “伪类”，是因为它们并不是真正的类，而是描述了元素在特定状态下的样式。
以下是常见的伪类选择器：
:hover：用于选择鼠标悬停在元素上时的状态。
:active：用于选择被激活的元素，通常是用户点击元素但还没有释放鼠标按钮时的状态。
:focus：用于选择当前获取焦点的元素，比如输入框等。
:visited：用于选择已访问过的链接。
:link：用于选择未被访问过的链接。
:first-child：用于选择作为其父元素的第一个子元素的元素。
:last-child：用于选择作为其父元素的最后一个子元素的元素。
:nth-child()：用于选择作为其父元素的第 n 个子元素的元素。
:nth-of-type()：用于选择作为其父元素的特定类型的第 n 个子元素的元素。
:not()：用于选择不匹配指定选择器的元素。
:checked：用于选择被选中的复选框或单选按钮。
:disabled：用于选择被禁用的表单元素。
<style>
/* 未访问的链接 a:link */
a:link {
color: #250;
}
/* 访问过的链接 a:visited */
a:visited {
color: orange;
}
/* 鼠标经过的链接 a:hover */
a:hover {
color: #888;
}
/* 鼠标正在按下还没有弹起鼠标的链接 a:active */
a:active {
color: #111;
}
</style>
注意：按照LVHA的顺序声明
:focus伪类选择器
用于选取获得焦点的表单元素，一般情况下<input>类表单元素才能获取。
<style>
input:focus {
background-color: pink;
}
</style>
7.CSS的元素显示模式
元素显示模式就是元素以什么方式显示，比如<div>自己占一行，一行可以放多个<span>
html元素一般分为块元素和行内元素两种类型
块元素：<div>最典型
特性
（1）水平方向上撑满整个包含块宽度，垂直方向上，以此摆放。
（2）宽、高、外边距以及内边距都可以控制
（3）是一个容器及盒子，里面可以放行内或者块级元素
注意：（1）文字类的元素内不能使用块级元素，例如p标签。
div的相关问题：
（1）垂直方向上相邻的元素，margin会合并
（2）父子关系的情况下，可能会产生margin塌陷
（3）父子关系的情况下，父元素无视浮动元素产生高度塌陷
（4）兄弟关系的情况下，正常元素可能会被浮动元素覆盖（正常元素在后）
使用BFC解决
BFC：区块格式化上下文
（1）开启BFC的区域，是一块独立的渲染区域
（2）隔绝了内部与外部的联系，内部渲染不会影响到外部
（3）不同的BFC区域，渲染也互不干扰
具体规则：
（1）创建BFC的元素，它的自动高度需要计算浮动元素
（2）创建BFC的元素，它的边框盒不会与浮动元素重叠
（3）创建BFC的元素，不会和它的子元素进行外边距合并(换句话说，处于不同BFC的元素，外边距就不会合并)
如何开启BFC
（1）根元素(HTML)
（2） 设置float属性
（3） 设置position属性（属性值需要时absolute或fixed）
（4） 设置overflow属性（属性值不为visible即可）
（5） 行内块元素（inline-block）
（6） 设置display为flow-root的元素
（7） 伸缩项目（flex盒子内的item）
（8）多列容器（设置column-count）
（9）表格元素（table thead tbody tfoot tr th td caption）
（10）column-span为all的元素（表格第一行横跨所有列）
行内元素：<span>最典型
（1）相邻行内元素在一行上，一行可显示多个
（2）宽、高直接设置是无效的
（3）默认宽度就是它本身的内容
（4）行内元素只能容纳文本或其他行内元素
注意：链接里面不能再放链接了
行内块元素：<img/>、<input/>、<td>
（1）和相邻行内元素在一行上，但之间会有空白缝隙
（2）默认宽度就是它本身内容的宽度
（3）高度、行高、外边距以及内边距都可以控制
元素显示模式转换
display: block; 转换为块元素
display: inline; 转换为行内元素
display: inline-block; 转换为行内块元素
用户名：<input text="text" style="display: block;">
8.CSS三大特性
层叠性
相同选择器给设置相同的样式，层叠性主要解决样式冲突的问题。
层叠性原则：
（1）样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式
（2）样式不冲突则不会层叠
继承性
CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号
（text- font- line- 这些元素开头的可以继承，以及color属性）
行高的继承
父div：font: 12px/1.5 ‘Microsoft YaHei’;
1.5的意思是在子div中行高为当前元素文字大小font-size的1.5倍
优先级
（1）选择器相同，则执行层叠层
（2）选择器不同，则根据选择器权重执行
| 选择器 | 选择器权重 |
|---|---|
| 继承或者* | 0，0，0，0 |
| 元素选择器 | 0，0，0，1 |
| 类选择器，伪类选择器 | 0，0，1，0 |
| ID选择器 | 0，1，0，0 |
| 行内样式 style=“” | 1，0，0，0 |
| !important重要的 | 无穷大 |
| 注意：（1）从上往下，权重逐渐增大 | |
| （2）父元素权重子元素并不能继承 |
权重叠加
复合选择器会有叠加的问题
<style>
ul li { /* 最终字体的颜色为red */
color:red;
}
li {
color: aqua;
}
</style>
<ul>
<li>AAAA</li>
</ul>
9.盒子模型
页面布局有三大核心：盒子模型、浮动和定位。
盒子模型（Box Model）组成
盒子模型（Box Model）是 CSS 中用来描述元素如何在页面上呈现的基本概念之一。它将每个 HTML 元素表示为一个矩形框，这个矩形框由内容区域、内边距、边框和外边距组成，这些部分一起构成了元素的外观和尺寸
border（边框）
border-width: 5px;
border-style: solid(实线)/deshed(虚线)/dotted(点线);
border-color: red;
边框的复合属性：
border: 1px solid red; //没有顺序
边框分开写法：
border-top/bottom/left/right: 1px solid red;
<style>
div {
border-top: 5px pink solid;
border-bottom: 5px red solid;
border-right: 5px black solid;
border-left: 5px green solid;
}
</style>
注意：边框会影响实际盒子的大小，所以测量时不把边框包含进去
内边距（padding）
边框距离内容的距离
padding-top/bottom/right/left
四种情况：
padding: 50px; //上下左右都是50px
padding: 20px 30px; //上下是20px，左右是30px
padding: 5px 10px 20px; //上是5px，左右是10px，下是20px
padding: 5px 10px 15px 20px; //按照顺时针，上5，右10，下15，左20
注意：
（1）内边距的设置也会影响盒子的大小，所以在设置width和height时要减去padding多出来的部分：比如界面中给你留下了高100px，宽100px的空间（整个组件的大小），你设置了10px的padding，那么在设置width和height时应该都为80px。
（2）如果盒子本身没有指定width、height属性，则padding不会撑开盒子的大小
外边距（margin）
margin-top/bottom/left/right
margin的简写方式与padding一样
外边距可以使块级盒子水平居中：
（1）盒子必须指定了宽度
（2）盒子左右的外边距都设置为auto
第一种写法：margin: auto;
第二种写法：margin-left: auto; margin-right: auto; margin: 0 auto;
嵌套块元素垂直外边距的塌陷
对于两个嵌套的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
例如我想将父元素margin-top设置为20px，里面的子元素离父元素上方30px，即将子元素的margin-top设置为30px，但这时父元素会塌陷，其margin-top为两者大的那个
解决方案：
（1）可以为父元素定义上边框
border-top: 1px solid transparent;
/* 或者 */
border: 1px solid transparent;
（2）可以为父元素定义内边距
（3）可以为父元素添加overflow:hidden
相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有margin-bottom，下面的元素有margin-top，此时他们的垂直间距不是二者之和，而是二者取最大。
解决方法：只给其中一个设置margin
清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一样，因此在布局前应先清除网页元素的内外边距
行内元素尽量只设置左右内外边距
* {
margin: 0;
padding: 0;
}
CSS3新增
圆角边框
圆角边框：border-radius: 50px;
如果是正方形，想要设置成一个圆，把数值修改为高度或者宽度的一半即可，或者用百分比的形式：border-radius: 50%;
border-radius: 5px 10px 15px 20px; 左上、右上、右下、左下
盒子阴影
box-shadow: h-shadow(水平阴影的位置) v-shadow(垂直阴影的位置) blur(模糊距离) spreed(阴影尺寸) color inset(可选，将外部阴影改为内部阴影);
盒子模型的改进：
CSS3 引入了 box-sizing 属性，可以控制盒子模型的计算方式，包括标准盒子模型和边框盒子模型。
流式布局
弹性布局（Flexbox）
任何一个容器都可以指定为flex布局
当我们将父盒子设为flex布局后，子元素的float、clear、vertical-align属性将失效
原理：
常见父项属性
（1）flex-direction: 设置主轴方向
1.row: （默认情况）从左往右横向排列
2.row-reverse: 从右往左横向排列
3.column: 从上往下
4.column-reverse:从下往上
（2）justify-content: 设置主轴上的子元素排列方式
1.flex-start: （默认情况）从头部开始，如果主轴是x轴，从左到右
2.flex-end: 从尾部开始排列
3.center: 主轴居中对齐
4.space-around: 平分剩余空间
5.space-between： 先两边贴边 在平分剩余空间**（重要）**
<style>
div {
display: flex;
width: 700px;
height: 500px;
background-color: pink;
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-around; */
justify-content: space-between;
flex-direction: column;
}
div span {
width: 100px;
height: 100px;
background-color: purple;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
（3）flex-wrap：设置子元素是否换行
默认情况下不换行，排不下就会自动减小子盒子的大小，这是我们不希望的
使用：flex-wrap: wrap; （nowrap则是不换行）
（4）align-content：设置侧轴上的子元素的排列方式（多行）
div {
display: flex;
width: 700px;
height: 500px;
background-color: pink;
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-around; */
justify-content: center;
/* 因为有了换行，所以侧轴上控制子元素的对齐方式我们用align-content */
flex-wrap: wrap;
/* flex-direction: column; */
align-content: center;
}
div span {
margin: 10px;
width: 200px;
height: 100px;
background-color: purple;
}
（5）align-items：设置侧轴上的子元素排列方式（单行）
1.flex-start
2.flex-end
3.center: align-items: center;
4.stretch 拉伸（默认值）
（6）flex-flow: 复合属性，相当与同时设置了flex-direction和flex-wrap
/* 把设置主轴和是否换行（换列）简写 */
flex-flow: column wrap;
常见子项属性
（1）flex
p {
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 100px auto;
}
p span {
flex: 1;
}
p span:nth-child(3) {
flex: 2;
}
<p>
<span>1</span>
<span class="bigger">2</span>
<span>3</span>
</p>
（2）align-self控制子项自己在侧轴上的排列方式
p {
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 100px auto;
}
p span {
width: 50px;
height: 50px;
background-color: purple;
margin-right: 5px;
}
p span:nth-child(3) {
align-self: flex-end;
}
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
（3）order
p span:nth-child(3) {
align-self: flex-end;
order: -1; //order默认是0，-1比0小排前面
}
网格布局（Grid）
10.CSS浮动
传统网页布局的三种方式：
（1）普通流（标准流）
所谓的标准流，就是标签按照规定好默认方式排列：比如块元素独占一行等
（2）浮动
（3）定位
为什么需要浮动：很多布局效果标准流没办法完成，此时需要用浮动来完成，因为浮动可以改变元素标签默认的排序方式。
网页布局第一准则：多个块级元素纵向使用标准流，横向使用浮动
语法：选择器{ float: 属性值;}
原理：float属性用于创建浮动框，浮动的元素会向左或向右移动，直到它的边缘碰到包含它的容器边缘或另一个浮动元素的边缘为止
浮动特性
（1）浮动元素会脱离标准流
.f {
height: 200px;
width: 200px;
background-color: aqua;
float: left;
}
.g {
height: 300px;
width: 300px;
background-color: rgb(204, 109, 26);
float: none;
}
<div class="f">f</div>
<div class="g">g</div>
（2）浮动的元素会一行内显示并且元素顶部对齐
（3）浮动的元素会具有行内块元素相似的特性
浮动注意点：
（1）浮动元素经常和标准流父级搭配使用：
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则
（2）一个元素浮动了，理论上其余的兄弟元素也要浮动，浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
清除浮动：
父级标准流的高度不应该被定死，而是随着子元素的浮动而动态变化。
高度塌陷： 浮动元素会脱离文档流，导致父容器的高度塌陷。如果一个父容器包含了浮动元素，但没有清除浮动，那么它的高度将会塌陷，即高度会变成 0，导致布局混乱。
为什么要清除浮动：由于父级盒子很多情况下不方便给高度，但是子盒子浮动又不占位置，最后父级盒子高度为0时，就会影响到下面的标准流盒子
当一个元素设置了 clear: both; 属性时，它会被移动到它前面所有浮动元素的下方，而不会与任何浮动元素相邻。这个属性通常用于解决浮动元素造成的父元素高度塌陷问题
清除浮动的策略是：闭合浮动
方法：
（1）额外标签法也称隔墙法，是W3C推荐的做法
<style>
.f {
height: 200px;
width: 200px;
background-color: aqua;
float: left;
}
.g {
height: 100px;
width: 100px;
background-color: rgb(204, 109, 26);
float: left;
}
.standard {
height: 200px;
width: 200px;
background-color: #888;
}
.clear {
clear: both;
}
<div style="background-color: aquamarine;">
<div class="f">f</div>
<div class="g">g</div>
<!-- 这个新增的盒子必须是块级元素 -->
<div class="clear"></div>
</div>
<div class="standard">
AAAAAAA
</div>
</style>
这种写法通俗易懂，书写方便，但是会添加许多无意义的标签，结构化较差
（2）父级添加overflow属性：
BFC（Block Formatting Context，块级格式化上下文）是 CSS 中的一个重要概念，用于描述块级盒子在页面布局中的渲染规则。BFC 是一个独立的渲染区域，其特点和行为包括：
（1）浮动元素的包含： BFC 会包含浮动的子元素，使得父元素能够正确地包裹浮动元素，而不会出现高度塌陷的情况。
（2）防止外边距重叠： 在同一个 BFC 中，相邻元素的外边距会发生重叠，但在不同的 BFC 中，外边距不会重叠。这有助于更好地控制元素之间的间距。
（3）避免内部元素影响外部布局： BFC 可以将其内部的元素隔离开来，使得内部元素的布局不会影响到外部元素的布局，从而保持页面布局的稳定性和一致性。
（4）自适应宽度： BFC 的宽度会自动适应其包含块的宽度，不会发生横向溢出的情况，即使内部元素设置了浮动或绝对定位等属性。
（5）垂直布局： BFC 中的块级元素会按照从上到下的顺序进行布局，垂直方向不会出现重叠或交叉。
触发 BFC 的条件包括：
（1）根元素或包含根元素的元素。
（2）浮动元素（float 属性不为 none）。
（3）绝对定位元素（position 属性为 absolute 或 fixed）。
（4）行内块元素（display 属性为 inline-block）。
（5）overflow 属性值不为 visible 的块级元素。
.box {
background-color: aqua;
/* 清除浮动 */
overflow: hidden;
}
<div class="box">
<div class="f">f</div>
<div class="g">g</div>
</div>
<div class="standard">
AAAAAAA
</div>
代码简洁，但无法显示溢出的部分
（3）父级添加after伪元素
:after 是 CSS 中的伪元素选择器，用于在元素的内容之后插入生成的内容。它可以在选定的元素之后插入新的内容，并且这个内容不是实际存在于 HTML 文档中的，而是通过 CSS 生成的。
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* 兼容ie6、ie7 */
.clearfix {
*zoom: 1;
}
<div class="box clearfix">
<div class="f">f</div>
<div class="g">g</div>
</div>
<div class="standard">
AAAAAAA
</div>
没有增加标签，结构更简单
（4）父级添加双伪元素
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix{
*zoom:1;
}
<div class="box clearfix">
<div class="f">f</div>
<div class="g">g</div>
</div>
<div class="standard">
AAAAAAA
</div>
11.CSS属性书写顺序
建议遵循以下顺序：
（1）布局定位属性：display/positon/float/clear/visibility/overflow
（2）自身属性：width、height等
（3）文本属性：color/text-decoration等
（4）其他属性：content/cursor/border-radius/box-shadow等
12.CSS定位
浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
而定位是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，且可以压住其他盒子
定位=定位模式+边偏移
定位模式决定元素的定位方式，它通过CSS的positon属性来设置，其值可分为四个：
边偏移就是定位的盒子移动到最终为止，有top、bottom、left和right4个属性
静态定位
是元素的默认定位方式，无定位的意思
语法： 选择器{ position: static;}
很少使用
相对定位
1.元素在移动位置的时候，是相对于它原来的位置来说的
2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标）
.box1 {
width: 200px;
height: 200px;
background-color: #888;
position: relative;
top: 100px;
left: 100px;
}
.box2 {
width: 200px;
height: 200px;
background-color: #111;
}
<div class="box1">
</div>
<div class="box2">
</div>
绝对定位
绝对定位：元素在移动位置的时候，是相对于它祖先元素来说的
1.如果没有祖先元素或者祖先元素没有设置定位，则以浏览器Document文档为准定位
.father {
width: 500px;
height: 500px;
background-color: #888;
}
.son {
width: 200px;
height: 200px;
background-color: #95ff00;
position: absolute;
bottom: 0;
left: 0;
}
<div class="father">
<div class="son">
</div>
</div>
2.如果祖先元素有定位（相对，绝对，固定），则以最近一级的有定位祖先元素为参考点移动位置
father中随便加入一个定位：position: relative;
3.绝对定位不再占有原先的位置（脱标）
子绝父相的由来
（1）子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
（2）子盒子用了绝对定位，则父盒子一定要加定位使其在父盒子中移动
（3）而父盒子如果是加绝对定位的话，因为绝对定位脱标，则它下方的其他盒子就会升上去，所以父盒子需要占有位置，相对定位不脱标
固定定位
固定定位使元素固定于浏览器可视区的位置。
特点：
（1）以浏览器的可视窗口为参照点移动元素，和父元素无关
（2）固定定位不占有原来的位置（脱标）
（3）
.box {
width: 200px;
height: 200px;
background-color: #888;
position: fixed;
top: 200px;
right: 0px;
}
<div class="box">
</div>
粘性定位
粘性定位可以被认为是相对定位和固定定位的混合。
特点：
（1）以浏览器的可视窗口为参照点移动元素（固定定位特点）
（2）粘性定位占有原先的位置（相对定位特点）
（3）必须添加top、left、right、bottom其中一个才有效
.box {
position: sticky;
top: 10px;
width: 200px;
height: 200px;
background-color: #888;
margin: 100px auto;
}
定位叠放次序 z-index
在使用定位布局时，可能会出现盒子重叠的情况。此时使用z-index来控制盒子的前后次序
.red {
width: 100px;
height: 100px;
background-color: red;
position:absolute;
top: 0;
left: 0;
z-index: 1;
}
.green {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
<div class="green"></div>
<div class="red"></div>
定位的拓展
1.绝对定位的元素进行居中
2.行内元素添加绝对或者固定定位，可以直接设置高度和宽度
2.块级元素添加绝对或者固定定位，如果不设置高度和宽度，默认大小是内容的大小
3.浮动元素只会压住它下面那标准流的盒子，不会压住下面标准流盒子里面的文字（图片），这是因为浮动刚开始设计出来的目的就是做文字环绕效果。但是绝对定位（固定定位）会压住标准流所有的内容
元素的显示与隐藏
1.display属性
该属性用于设置一个元素如何显示：
（1）display: none; 隐藏对象，且不再占有原来位置
（2）display: block; 除了转换为块级元素之外，同时还有显示元素的意思
2.visibility可见性
visibility: visible; 元素可视
visibility: hidden; 元素隐藏，但仍继续占有原来为止
3.overflow溢出
overflow: visible; 溢出的部分显示
overflow: hidden; 溢出的部分隐藏
overflow: scroll; 溢出的部分显示滚动条，不溢出也显示滚动条
overflow: auto; 溢出的部分显示滚动条，不溢出不显示滚动条
但是如果有定位的盒子，请慎用overflow: hidden;因为它会隐藏多余的部分
CSS高级技巧（！！！！！！）
精灵图（！！！！！！）
字体图标（！！！！！！）
CSS三角（！！！！！！）
vertical-align
主要是针对行内块元素
vertical-align: baseline|top|middle|bottom
溢出的文字省略号显示（！！！！！！）
常见布局技巧（！！！！！！）
CSS初始化
CSS 初始化是一种设置基本样式的技术，旨在确保网页在不同浏览器和设备上都以一致的方式显示。在实际项目中，通常会使用一些 CSS 初始化库或者自定义的初始化样式表来进行初始化。
常见的 CSS 初始化工作包括：
（1）重置样式（Reset Styles）： 清除不同浏览器的默认样式，以确保所有元素的默认样式都是一致的。例如，将所有元素的外边距、内边距和边框设置为零，将列表的样式设置为无序列表。
（2）标准化样式（Normalize Styles）： 标准化不同浏览器的默认样式，使得不同浏览器在渲染页面时保持一致的表现。与重置样式不同，标准化样式保留了一些默认样式，但进行了统一的调整和修复，以确保一致性。
（3）设置基本样式（Set Basic Styles）： 设置一些基本的样式，如文本样式（字体、字号、行高等）、链接样式（颜色、下划线等）、背景样式等，以确保页面的基本显示效果。
（4）增加浏览器前缀（Vendor Prefixes）： 在一些 CSS 属性前增加浏览器前缀，以确保在不同浏览器上都能正常显示。例如，为了兼容不同浏览器的渐变效果，可能需要添加 -webkit-、-moz-、-o- 等前缀。
（5）优化可用性和可访问性（Optimize Usability and Accessibility）： 根据项目需求，可能需要优化页面的可用性和可访问性，例如设置焦点状态的样式、增加键盘操作的支持等。
三、HTML5和CSS3提高
HTML5新特性
1.HTML5新增的语义化标签
以前使用div布局，div对于浏览器是没有语义的
这种语义化标准主要是针对搜索引擎的，这些标签可以使用多次，IE9中，需要把这些元素转换为块级元素
2.新增的多媒体标签
音频<audio>
<audio>元素支持三种音频格式：MP3、Wav、Ogg，推荐使用MP3
<audio src="音频url" autoplay="autoplay">
视频<video>
当前<video>元素支持三种视频格式：MP4、WebM、Ogg，尽量使用MP4格式
语法：<video src="文件地址" controls="controls"></video>
<!-- 谷歌禁止子自动播放，添加muted静音播放即可 -->
<video src="视频url" autoplay="autoplay" muted="muted"></video>
新增的input类型
新增的表单属性
<input type="search" required="required" placeholder="蔡鸡" autofocus="autofucus" autocomplete="off" multiple="multiple">
CSS3新特性
新增选择器
属性选择器
类选择器、属性选择器、伪类选择器，权重都为10
input[value] ：权重是1+10=11
<!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>
<style>
/* 权重是1+10=11 */
input[value] {
color: pink;
}
input[type=text] {
color: green;
}
div[class^=icon] {
color: red;
}
section[class$=data] {
color: blue
;
}
</style>
</head>
<body>
<!-- 1.利用属性选择器就可以不用借助类或者id选择器 -->
<input type="text" value="属性值">
<input type="text">
<!-- 2.属性选择器还可以选择属性=值的某些元素 (重点)-->
<input type="text" name="" id="">
<input type="password" name="" id="">
<!-- 3.属性选择器可以选择属性值开头的某些元素 -->
<div class="icon1">1</divicon>
<div class="icon2">2</divicon>
<div class="icon3">3</divicon>
<div class="icon4">4</divicon>
<div> 类名不是icon开头的</div>
<!-- 4.属性选择器可以选择属性值结尾的某些元素 -->
<section class="icon1-data">AA</sectionicon>
<section class="icon2-data">BB</sectionicon>
<section class="icon3-ico">CC</sectionicon>
</body>
</html>
结构伪类选择器
nth-child(n) 中，n可以是数字，关键字和公式
关键字：even -> 偶数 ; odd -> 奇数
公式： nth-child(n) 里面就写n，表示所有的孩子，2n表示偶数的孩子
（注意： n从0开始，逐渐+1）
nth-child与nth-of-type区别：
（1）nth-child 选择器匹配父元素下的所有子元素，并且选择其中第 n 个子元素。（不考虑元素的类型，仅根据其在父元素中的位置来选择。）
（2）nth-of-type它选择父元素下特定类型的第 n 个子元素。
伪元素选择器
伪元素清除浮动
.clearfix:after {
content: "";
display: block; //以块级元素
height: 0;
clear: both;
visibility: hidden;
}
.clearfix:before,.clearfix:after {
content: "";
display: table; //转化为块元素同时在同一行显示
}
.clearfix:after {
clear:both;
}
.clearfix{
*zoom:1;
}
<div class="box clearfix">
<div class="f">f</div>
<div class="g">g</div>
</div>
<div class="standard">
AAAAAAA
</div>
CSS盒子模型
CSS3中可以通过box-sizing来制定盒模型，有两个值：content-box、border-box
所以有两种情况：
（1）box-sizing: content-box盒子大小为width+padding+border(以前默认的)
（2）box-sizing: border-box 盒子大小为width （这样就不会撑开盒子大小了）
新增属性过渡
transition: 变化的属性 花费时间 运动曲线 何时开始
变化的属性用all即可为所有属性设置
响应式布局
响应式布局是一种网页设计方法，旨在使网站能够在不同设备和屏幕尺寸下提供最佳的用户体验。响应式布局通过使用灵活的网页设计技术，使网页内容能够根据用户设备的屏幕大小、分辨率和方向等特性进行自适应调整，从而在各种设备上都能够呈现出良好的布局和排版效果。其核心思想是使用流式布局（Fluid Layout）和媒体查询（Media Queries）等技术，根据用户设备的特性动态地调整网页布局和样式，以适应不同屏幕尺寸下的显示效果
原理： 使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的
响应式布局容器：
响应式需要一个父容器作为布局容器，来配合子集元素来实现变化效果
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
<!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>
<style>
.container {
height: 150px;
background-color: pink;
margin: 0 auto;
}
/* 1.超小屏幕下 小于768 布局容器宽度为100% */
@media screen and (max-width: 767px){
.container {
width: 100%;
}
}
/* 2.小屏幕下， 大于等于768 布局容器改为 750px */
@media screen and (min-width: 768px){
.container {
width: 750px;
}
}
/* 3.中等屏幕下，大于等于992px 布局容器修改为970px */
@media screen and (min-width: 992px){
.container {
width: 970px;
}
}
/* 4.大屏幕下 大于等于1200 布局容器修改为 1170 */
@media screen and (min-width: 1200px){
.container {
width: 1170px;
}
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
本地存储
随着互联网的发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常在本地存储大量的数据，HTML5规范提出了相关解决方案
特点：
（1）数据存储在用户浏览器中
（2）设置、读取方便、甚至页面刷新不丢失数据
（3）sessionStroge约5M，localStorage约20M
（4）只能存储字符串，可以将对象JSON.stringify()编码后存储
Web Storage
window.sessionStorage
（1）生命周期为关闭浏览器窗口
（2）在同一个窗口下数据可以共享
（3）以键值对的形式存储使用
<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>
<script>
var ipt = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var remove = document.querySelector('.remove');
var del = document.querySelector('.del');
set.addEventListener('click', function () {
var val = ipt.value;
sessionStorage.setItem('uname', val);
sessionStorage.setItem('pwd', val);
})
get.addEventListener('click', function () {
console.log(sessionStorage.getItem('uname'));
})
get.addEventListener('click', function () {
sessionStorage.removeItem('uname');
})
del.addEventListener('click', function () {
sessionStorage.clear();
})
</script>
window.localStorage
（1）生命周期永久生效，除非手动删除，否则关闭页面也会一直存在
（2）可以多窗口共享（同一浏览器可以共享）
（3）以键值对的形式存储使用
var ipt = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var remove = document.querySelector('.remove');
var del = document.querySelector('.del');
set.addEventListener('click', function () {
var val = ipt.value;
localStorage.setItem('uname', val);
})
get.addEventListener('click', function () {
console.log(localStorage.getItem('uname'));
})
remove.addEventListener('click', function () {
localStorage.removeItem('uname');
})
del.addEventListener('click', function () {
localStorage.clear();
})
cookies
它是由服务器发送到浏览器的小型文本文件，存储在用户的计算机上。这些文件包含了一些网站的信息，比如用户的偏好设置、登录状态等。然后在以后的请求中由浏览器发送回服务器。
关键特点和使用方法：
（1）存储方式： Cookie 以键值对的形式存储在用户的浏览器中。每个 Cookie 都有一个名称和一个相应的值，以及可选的属性，如过期时间、域、路径等。
（2）大小： 4KB
（3）过期时间： 可以设置 Cookie 的过期时间，使之在一定时间后自动失效。如果不设置过期时间，Cookie 将被视为会话 Cookie，它们只在用户会话期间有效，关闭浏览器后会被删除。
（4）访问限制： JavaScript 可以通过 document.cookie 属性来读取和修改 Cookie。但要注意，每个 Cookie 都有自己的域和路径限制，只有在匹配的域和路径下才能被 JavaScript 访问。
// 创建一个 Cookie
document.cookie = "username=John Doe; expires=Thu, 25 Mar 2025 12:00:00 UTC; path=/";
// 读取所有 Cookie
console.log(document.cookie);
// 读取特定的 Cookie
function getCookie(name) {
const cookies = document.cookie.split(';');
for (let cookie of cookies) {
const [cookieName, cookieValue] = cookie.split('=');
if (cookieName.trim() === name) {
return cookieValue;
}
}
return null;
}
console.log(getCookie('username')); // 输出：John Doe
// 删除 Cookie
function deleteCookie(name) {
document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
}
deleteCookie('username');
cookies、sessionStorage、localStorage区别
（1）首先是生命周期，sessionStorage只存在当前页面，页面关闭就失效了，localStorage除非手动删除，不然会一直保存，cookies一般会设置失效时间，时间过了就失效，但如果没有设置的话，默认是关闭浏览器后失效。
（2）其次是数据资源，sessionStorage的资源共享尽在当前页面有效，localStorage在多个页面都有效，且这两个不涉及与服务器端的通信，而cookie涉及与服务器端通信，所以cookie会比较小，太大的话会影响性能。
四、Bootstrap
Bootstrap是一种前端框架，基于HTML、CSS和JavaScript
Bootstrap v3中文文档
Bootstrap使用四部曲：
（1）创建文件夹结构
（2）创建html骨架结构
<!-- 这句话是要求当前网页使用IE浏览器最高版本的内核来渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<!-- 解决ie9以下浏览器对html5新增的标签的不识别，并导致CSS不起作用的问题 -->
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<!-- 解决ie9以下浏览器对css3media query的不识别 -->
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
（3）引入相关样式文件
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
（4）书写内容
1094
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
