一.HTML5
1. 标准文档结构
<!doctype html> <!--这是文档声明，说明这个是html5的代码-->
<html>
<head><!--head中的内容不会在网页中直接出现，主要用来帮助浏览器或者搜索引擎来解析网页-->
<meta charset="utf-8"><!--meta用来设置网页的元数据-->
<title></title><!--title中的内容会显示在浏览器的标题栏，搜索引擎会根据title中的内容来判断网页的主要内容-->
</head>
<body><!--表示网页的主体，所有内容都应该写在里面-->
</body>
</html>2.文档的使用
3.可以在开始标签和自结束标签中设置属性。
<html>
<!--
1.属性是一个名值对结构，不能写在结束标签中
2.属性不能瞎写，应该根据文档规定填写。有些属性有属性值，有的没有。
3.如果有属性值，那么值应该被引号引起来，单双引号都可。
4.属性可以写多个-->
<h1>hello <font color="red" size="3">world</font>！</h1>
</html>4. 软件和插件推荐
1.软件可以使用VScode
2.插件：中文语言包；ayu主题；live server
3.左下角的设置中可以设置代码的自动存储，这个和live server功能一起使用，能做到实时更新浏览器实时反馈。
5.实体（转义字符）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实体</title>
</head>
<body>
<!--在网页中编写的多个空格会被浏览器解析成一个空格
在html中不能书写一些特殊符号，比如多个空格和小于号
解决方法：使用实体（转义字符）
语法规则是： &实体的名字；比如 空格 >
如果想知道更多的实体，可以去第2条中网站去找>
-->
<p>今天天 气真不错</p>
<p>
a<b>c
</p>
</body>
</html>6.meta标签
<head>
<!--meta用于设置网页的一些元数据，元数据不是给用户看的
charset：指定网页的字符集
name:指定的数据的名称
content:指定的数据的内容
-->
<meta charset="UTF-8">
<!--这个可以设置网页的关键字，比如此时搜索html5就会出来该网页的推荐-->
<meta name="keywords" content="html5,前端">
<!--网站的描述会显示在搜索引擎的搜索结果中-->
<meta name="description" content="这个就是描述嘛，写些解释性的话就像现在这样">
<!--这个表示将页面重定向，3秒后跳转到指定的网页-->
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">
<!--title标签的内容会作为搜索结果的超链接上的文字显示。
意思是就是搜索一个关键字，出来一系列结果，每个结果上的超链接的字其实就是title中的字-->
<title>meta</title>
</head>7.语义化标签
<body>
<!--html用来负责网页的结构，所以使用标签时，应该关注标签的语义而不是他的样式-->
<!--比如说，不同的标题标签显示出来的文字大小有区别，但这并不是我们应该关心的
我们应该关心的是不同的标题标签所表现出来的重要程度，h1标签重要程度仅次于title
一般标题标签只会用到h1~h3,且只有一个h1-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<p>lalalalalalalala</p>
<p>hahahahaha</p>
<!--同样我们不关心“真”这个字变斜了，只关心这em标签表示的语音语调的一个加重-->
<p>今天天气<em>真</em>不错</p>
<!--strong标签表示强调，重要内容-->
<p>你今天必须要<strong>写完作业</strong></p>
<!--br标签表示换行-->
<br>
鲁迅说：<!--blockquote表示一个长引用-->
<blockquote>
这句话我没说过
</blockquote>
<!--这个是短引用-->
<q>lalal</q>
</body>8.块元素和行内元素
<body>
<!--在页面中独占一行的元素称为块元素，比如说标题标签。
不会独占一行的元素称为行内元素，比如em标签-->
<!--块元素主要是对网页进行布局，行内元素主要用来包裹文字。一般只会在块元素中放快元素-->
<!--p元素中不能放任何的块元素。但是如果这么写了也能运行，是因为浏览器会对代码中不规范的地方进行修正-->
<p><h1>lalal</h1></p>
<!--F12->element能查看被修正后的代码-->
</body>9.布局标签（结构化语义标签）
<body>
<span></span><!--行内元素，没有任何的语义，一般用于在网页中选中文字-->
<!--下面是布局标签，都是结构化语义标签-->
<!--header:表示网页的头部
main:表示网页的主体，一个页面只会有一个main
footer：表示网页的底部
nav:表示网页中的导航
aside：表示和主体相关的内容
artical:表示一篇独立的文章
section：表示一个独立的分块，上面的标签都不能表示时使用section
div：没有什么特殊含义，单纯表示一个区块
-->
<header></header>
<main></main>
<footer></footer>
<nav></nav>
<aside></aside>
<article></article>
<section></section>
<div></div>
</body>10.列表
<body>
<!--html中分为三种列表：1.有序列表2.无序列表3.定义列表-->
<!--ul创建无序列表，li表示列表项-->
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<!--ol创建有序列表，li表示列表项-->
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<!--dl创建一个定义列表，dt用来表示定义内容，dd用来对内容进行声明-->
<dl>
<dt>结构</dt>
<dd>lalalalala</dd>
<dd>hahahahaha</dd>
</dl>
</body>11.超链接
<body>
<!--超链接让我们从一个页面跳转到另一个页面-->
<!--超链接也是一个行内元素。a标签内可以嵌套除它自身之外的任何元素-->
<!--属性：
href：指定跳转的目标路径，可以是外部网站的地址，也可以是一个内部页面的地址
target:用来指定超链接打开的位置；_self是在当前页面中打开超链接，_blank在新的页面中打开超链接
id:给标签加唯一标识，区分大小写。
-->
<a target="_blank" href="https://www.baidu.com">去别人服务器页面超链接</a>
<!--相对路径问题：
当我们需要跳转到一个服务器内部的页面时，一般我们会使用相对路径
1:相对路径都会使用.或者..开头
2: ./可以省略不写，如果不写./也不写../则就相当于写了./
3: ./表示当前文件所在目录；../表示当前文件所在目录的上一级目录
-->
<a href="列表.html">去自己服务器页面的超链接</a>
<a href="#bottom">去底部</a> <!--通过这个方式可以去页面的任何位置-->
<p>一大堆文字。。。</p>
<!--如果值是#，那么该超链接能让你回到顶部。并且开发时如果链接的位置还没确定，默认写上#。或者写上"javascript:;",这样的超链接点击后不会跳转-->
<a id="bottom" href="#">回到顶部</a>
</body>12.图片标签
<body>
<!--图片标签是向当前页面中引入一个外部图片
属性：
src:指定的是外部图片的路径
alt：图片的描述，这个描述默认不显示，有些浏览器在图片加载不出来的时候xianshi。
搜索引擎根据这个属性中的内容来识别图片
width:图片的宽度(像素)，修改一个的话另一个也会等比例缩放
height：图片的高度-->
<!--图片格式：
1.jpg:支持的颜色丰富，不支持透明效果，不支持动图。一般用来显示照片
2.gif:支持的颜色较少，支持简单透明，支持动图。用于颜色单一图片，动图
3.png:支持的颜色丰富，支持复杂透明，不支持动图。颜色丰富，复杂透图片
4.webp:具备其他图片的所有优点。且支持动图。缺点就是兼容性不行。
5.base64:将图片使用base64进行编码，通过字符的形式来引入图片。
一般都是图片和网页一起加载的图片才会使用。加密方式可以去百度
-->
<img src="../images/3.jpg"> <!--算替换元素，是块元素和行内元素之间的元素-->
</body>13.内联框架
<body>
<!--内联框架：用于向当前页面中引入一个其他页面-->
<!--a搜索引擎是不会去爬内联框架里的内容的-->
<iframe src="https://www.baidu.com" frameborder="0" ></iframe>
</body>14.表格
在现实生活中，我们经常需要使用表格来表示一些格式化数据，课程表、人名单、成绩表……同样在网页中我们也需要使用表格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
<style>
table{
width: 50%;
margin:0 auto;
border-spacing: 0px; /*指定边框的距离*/
border-collapse: collapse;/*设置边框的合并*/
}
td{
vertical-align: middle;/*默认元素在td中是垂直居中的，可以通过这个属性来设置*/
text-align: center;
}
tbody > tr:nth-child(2n+1){
background-color: aqua;
}
</style>
</head>
<body>
<!--可以将一个表分成三个部分，头部，主体和底部-->
<!--如果表格中没有使用tbody而是使用了tr，那么浏览器会自己创建一个tbody，
并且将tr全都放进tbody里，所以tr不是table的子元素-->
<table border="1" width="50%" align="center">
<thead></thead>
<tbody>
<tr>
<td>a1</td>
<td>b1</td>
<td>c1</td>
<td rowspan="2">d1</td><!--纵向合并单元格-->
</tr>
<tr>
<td>a2</td>
<td>b2</td>
<td>c2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
<td colspan="2">c3</td><!--横向合并单元格-->
</tr>
</tbody>
<tfoot></tfoot>
</table>
</body>
</html>15.表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
<style>
</style>
</head>
<body>
<!--表单：
--在现实生活中表单用于提交数据
--在网页中也可以使用表单，网页中的表单用于将本地的数据上传到服务端
--使用form标签来创建一个表单 -->
<form action="表格.html"> <!--action表示表单要提交的地址-->
文本框<input type="text" name="username"> <!--text类型表示文本框，name后面的值是提交给服务器时候的key值-->
密码框<input type="password" name="password"><!--密码类型-->
<!--单选框，必须有一个value属性所谓选定之后的值传递给服务器，并且要有相同的name，这些单选框才能在一起-->
单选框<input type="radio" name="haha" value="男">
<input type="radio" name="haha" value="女">
多选框<input type="checkbox" name="test" value="1"><!--多选框类型-->
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3">
下拉列表
<select name="haha" >
<option value="i"></option>
<option value="ii"></option>
<option value="iii"></option>
</select>
按钮
<!--类型reset:重置按钮；submit:提交按钮；-->
<input type="button" value="提交">
调色板
<input type="color">
邮箱
<input type="email">
<!--在标签中还能添加其他的属性
autocomplete="off" 关闭自动补全
readonly将表单项设置成只读
disable 将表单项设置为禁用，数据不会提交
autofocus设置表单项自动获取焦点
-->
</form>
</body>
</html>
二.CSS选择器
1.CSS简介
网页实际上是一个多层的样式，通过CSS可以为网页的每一层来设计样式，最终我们只能看到网页的最上面的一层。
2.通过css修改元素的样式
第一种方式(内联样式，行内样式)：
在标签内部通过style属性来说设置元素的样式。但是这样不方便维护，开发时一般不使用这种方式。
第二种方式(内部样式表)：
将样式编写到head中的style标签中。通过css的选择器来选中元素并为其设置各种样式，可以同时为多个标签设置样式，并且修改时只需修改一处。问题：只能对一个网页起作用，不能跨页面。
第三种方式(外部样式表)
可以将css样式写到一个外部的css文件中，然后通过link标签来引入外部css文件。并且通过属性href来匹配外面的css文件。好处是：外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以进行引用。编写到外部的css文件中时，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提升用户体验。
优先级是第一种>第三种>第二种
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--第二种方式-->
<style>
p{color: yellow; font-size: 30px}
</style>
<!--第三种方式-->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<p style="color: red; font-size: 30px">lalalalalaalal</p><!--第一种-->
<p>hahahahaha</p><!--如果没有link标签，此时展示的样式是第二种-->
<p>ohohohohohohohohohoh</p><!--第三种-->
</body>3.CSS语法
style标签内部的区域不属于html，这里面应该遵守CSS的语法规范。
注释：/*css中的注释*/
语法：
选择器 声明块
选择器，通过选择器可以选中页面中的指定元素。例子中p的作用就是选中页面中所有的p标签
声明块，通过声明块来指定要为元素设置的样式。声明块要由一个一个的声明组成，声明是一个 名值对结构，一个样式名对应一个样式值，名和值之间以“：”相连，以“；”结尾。
<style>
/*css中的注释*/
p{
color: yellow;
font-size: 30px
}
</style>4.常用单个选择器
(1).元素选择器
作用：根据标签名来选中指定的元素
语法：标签名{}
例子：p{} h1{} div{}
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*css中的注释*/
p{color: red;font-size: 100px}
h1{color: red;font-size: 100px}
</style>
</head>
<body>
<p>lalalalalalalalalalalalala</p>
<h1>lalalalalalalalalalalalala</h1>
</body>(2)id选择器
作用：根据元素的id属性值选中一个元素
语法：#id属性值{}
例子：#box{} #red{}
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#yellow{ color: yellow; font-size: 100px}
</style>
</head>
<body>
<h1 id="yellow">lalalalalalalalalalalalala</h1>
</body>(3)类选择器，class选择器
class是一个标签的属性，它和id类似。不同的是class可以重复使用，可以通过class属性来为元素分组。还可以给一个元素设置多个class。
作用：根据元素的class属性值选中一组元素。
语法：.class属性值
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.blue{color: blue;
font-size: 200px}
.abc{font-size: 300px}
</style>
</head>
<body>
<p class="blue abc">测试class属性一号</p>
<p class="blue">测试class属性二号</p>
</body>(4)通配选择器
作用：选中页面中的所有 元素
语法：*{}
<style>
*{color: greenyellow;}
</style>5.复合选择器
交集选择器：
作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器3
注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头
<head>
<meta charset="UTF-8">
<title>交集选择器</title>
<style>
.red{color: red;}
div.red
{font-size: 100px;}
</style>
</head>
<body>
<div class="red">我是div元素</div><!--符合交集选择器的条件-->
<div class="red2">我是div元素</div><!--因为他的选择器是red2，所以他没有大-->
<p class="red">我是p元素</div><!--因为他的选择器是p，所以他没有变大-->
</body>并集选择器：
作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器3
<head>
<meta charset="UTF-8">
<title>并集选择器</title>
<style>
h2,span{color:aquamarine;font-size: 100px;}
</style>
</head>
<body>
<span>我是一个span标签</span>
<h2>这是一个h2标题</h2>
</body>6.关系选择器
网页中的关系：
父元素：直接包含子元素的元素叫做父元素。
子元素：直接被父元素包含的元素是子元素.
祖先元素：直接或间接包含后代元素的元素叫做祖先元素，元素的父元素也是它的祖先元素
后代元素：直接或间接被祖先元素包含的元素叫做后代元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素是兄弟元素
关系选择器分为：子元素选择器，后代元素选择器，兄弟元素选择器
<head>
<style>
/*子元素选择器
作用：选中指定父元素中的子元素*/
div > span{color: aquamarine;font-size: 100px;}/*这种方式只要是div的子元素span都会被渲染*/
div.red > span{color: red;font-size: 100px;}/*这样就会具体到某一个div的子元素span*/
</style>
</head>
<body>
<div>
<div class="red">
<span>seofjwefw</span>
</div>
<span>
我是div中的span元素
</span>
</div>
</body><head>
<meta charset="UTF-8">
<title>关系选择器</title>
<style>
/*后代元素选择器
作用：选中指定元素内的指定后代元素
语法：祖先 后代*/
div span {color: red;font-size: 100px;}
</style>
</head>
<body>
<div>
我是一个div
<p>
我是div中的p元素
<span>
我是div中的p元素中的span元素
</span>
</p>
<div class="red">
<span>seofjwefw</span>
</div>
<span>
我是div中的span元素
</span>
</div>
</body><head>
<meta charset="UTF-8">
<title>关系选择器</title>
<style>
/*兄弟元素选择器
作用：选择下一个兄弟
语法：前一个+后一个*/
div+ span{color: red;font-size: 100px;}
</style>
</head>
<body>
<div>
<div class="red">
<span>seofjwefw</span>
</div>
<span>
我是div中的span元素
</span>
</div>
</body>7.属性选择器
语法：[属性名] 选择含有指定属性的元素。
[属性名=属性值] 选择含有指定属性和属性值的元素。
[属性名^=属性值] 选择属性值以属性值开头的元素
[属性名$=属性值] 选择属性值以属性值结尾的元素
[属性名*=属性值] 选择属性值含有指定属性值的元素
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
[title*=v]{color: aquamarine;font-size: 200px;}
div[title]{color: aquamarine;font-size: 200px;}
</style>
</head>
<body>
<p title="aaav">aaaaaaaaaaaaaaaaa</p>
<p title="bbvb">bbbbbbbbbbbbbbbbb</p>
<p title="ccc">ccccccccccccccccc</p>
<p>ddddddddddddddddd</p>
<div title="div">divdivdiv</div>
</body>8.伪类选择器
伪类：不存在的类，它用来描述一个元素的特殊状态。比如：第一个子元素，鼠标移入的元素
:first-child 第一个子元素。这里的第一个是按照所有的子元素进行排序的，不是某一个元素
:last-child 最后一个子元素
:nth-child() 第n个子元素，在括号里填写数字，表示第几个。如果填n，表示全部选中。2n表
示选中偶数位的元素。2n+1或者odd表示奇数位置。
:first-of-type 同类型第一个元素
:last-of-type 同类型最后一个元素
:nth-of-type() 同类型第n个子元素，在括号里填写数字，表示第几个。如果填n，表示全部选
中。2n 表示选中偶数位的元素。2n+1或者odd表示奇数位置。
:not() 除了某一个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
ul > li:first-child{color: aquamarine;font-size: 200px;}
ul > li:nth-child(n){color: aquamarine;font-size: 200px;}
ul>li:first-of-type{color: aquamarine;font-size: 200px;}
ul>li:nth-of-type(n){color: aquamarine;font-size: 200px;}
ul>li:not(:nth-child(3)){color: aquamarine;font-size: 200px;}
</style>
</head>
<body>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
</body>
</html>9.超链接伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接伪类选择器</title>
<style>
a:link{color: aqua;font-size: 200px;}/*没访问过的链接,a元素专用*/
a:visited{color: yellow;}/*访问过的网站，a元素抓用。由于隐私问题，所以这个visited伪类只能修改颜色*/
a:hover{color: bisque;}/*鼠标悬浮在上面时*/
a:active{color: green;}/*点击到时呈现*/
</style>
</head>
<body>
<a href="http://ehall.xatu.edu.cn/new/index.html">lalal</a>
<a href="http://ehall.xatu.edu.cn/new/index.html">lalal</a>
<a href="https://www.baidu.com">访问过的链接</a>
<hr>
<a href="http://ehall.xatu.edu.cn/new/index.html">lalal</a>
</body>
</html>10.伪元素
伪元素表示页面中一些特殊的并不存在的元素(特殊的位置)。伪元素使用::开头。
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::after 和 ::before 分别表示元素的最后和元素的开始，一般要和content一起使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素</title>
<style>
p::first-letter{color: aquamarine;font-size: 200px;}
p::first-line{color: aquamarine;font-size: 200px;}
p::selection{color: blue;font-size: 100px;}
::after{content: 'lalala';}
::before{content: 'hahaha';}
</style>
</head>
<body>
<p>
就你妈离谱。
</p>
</body>
</html>三.CSS布局，样式
1.继承
样式的继承:我们为一个元素设置的样式同时也会应用到它的后代元素上。继承是发生在祖先后代之间的，继承的设计是为了方便我们的开发，利用继承我们可以讲通用的样式设置到祖先元素上，这样孩子需要一次设置就能让所有的元素都具有该样式。
特殊：背景相关，布局相关的不会被继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>继承</title>
<style>
p{color: aquamarine;font-size: 50px;}
</style>
</head>
<body>
<p>
我是一个p元素
<span>我是p元素里的span元素</span>
</p>
</body>
</html>2.选择器的权重
当不同的选择器选中相同的元素，并且为相同的样式设置不同的值时候，此时就发生了样式冲突。此时应用哪个样式由选择器的权重优先决定。
选择器的权重：
内联样式(直接写标签里面) 1，0，0，0
id选择器 0，1，0，0
类和伪类选择器 0，0，1，0
元素选择器 0，0，0，1
继承的样式没有优先级
比较优先级的时候，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则优先显示。分组显示器（并）是单独计算的。选择器的累加不会超过其最大的数量级，也就是说类选择器再高也不会高过id选择器。
当优先级相同时，此时优先使用靠下的样式。
可以在某一个样式的后面添加一个!important，表示该样式具有最高优先级，能不用就别用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>继承</title>
<style>
#box1{color:aqua}
div{color: aquamarine;font-size: 60px;}
div#box1{color:blue}
.red{color: red;}
span,h1{color: red;}/*这个是分开单独进行计算的*/
</style>
</head>
<body>
<div id="box1" class="red">我是一个div</div>
</body>
</html>3.样式的单位
长度单位
像素。
百分比：可以将属性值设置成相对于其副属性的百分比。设置百分比可以使子元素跟随父元
素的改变而改变。
em:em是相对于我们的字体大小来的。1em=1font-size,随着字体大小的改变而改变。
rem:rem也是相对于我们的字体大小来的。不过这个是相对于我们的根元素的字体大小来
的。也就是html的字体大小
颜色单位
在css中可以直接使用颜色的名字来设置各种颜色。但是在我们的css中直接使用颜色名字是十分不方便的。所以我们可以使用RGB值，即三种颜色的不同浓度来调配出不同的颜色。红绿蓝每个颜色的范围都在0~255之间。
RGBA:就是在RGB的基础上加了一个A表示不透明度,取值范围是0~1，0是完全透明。
十六进制的RGB：用十六进制表示上面的数字。即#ff0000(红色)
HSL值：色相(0~360)，饱和度(0%~100%)，亮度(0%~100%)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>颜色单位</title>
<style>
.box{
width: 300px;
height: 300px;
background-color: rgb(255, 0, 0);
background-color:#bfa;/*护眼颜色*/
background-color:hsl(244, 57%, 51%) ;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>4.文档流
文档流（normal flow）,网页是一个多层的结构，一层摞着一层，通过css可以给每一层设置样式，作为用户来讲只能看到最上面的一层。这些层中最底下的一层称为文档流，文档流是网页的基础。我们创建的元素默认都是在文档流中进行排列的。
对我们来说，元素主要有两个状态——文档流中和不在文档流中。
在文档流中的特点：
块元素：1.在页面中独占一行。2.默认高度是父元素的全部3.默认高度会被内容(子元素)撑开
4.自上到下垂直排列
行内元素：1.不会独占页面一行，从左到右水平排列 2.如果一行之中容纳不下所有的行内元
素，则会自动换到第二行。3.行内元素的默认高度和默认宽度都是被内容撑开。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div>我是div</div><!--我是块元素-->
<span>我是span</span><!--我是行内元素-->
</body>
</html>5.盒模型
css将页面中的所有元素都设置成了一个矩形的盒子，这样，对页面的布局就变成了将不同的盒子摆放到不同的位置。每个盒子都由以下几个部分组成：
内容区(content): 元素中所有的子元素和文本内容都在我们的内容区中。内容区的大小是由
width和height来设置
内边距(padding):是内容区和边距之间的距离。内边距的设置会影响到盒子的大小，并且内容
区的背景颜色会延伸到内边距上。
边框(border):设置边框至少要设置三个样式，宽度，颜色，样式。边框的大小会影响到盒子的
大小。边框的宽度，如果不写的话默认2-3个像素；有关边框宽度的还有四个样
式：border-top-width,border-right-width,border-left-width,border-bottom-width。
而border-color和border-width的机制是一样的，如果省略默认是黑色。
border-style中样式值：solid 实线,dotted点状虚线, dashed虚线，double双线
border-style的默认值是null，所以真的不能去。
border简写属性：border:10px orange solid。同样的还有border-xxx给一边设置
轮廓:和边框差不多，但不会影响到可见框的大小，也不会影响元素的布局。样式名是outline.
这个可以和:hover结合，鼠标移到上面的时候就加一个轮廓。
外边距(margin):默认情况下如果我们设置左上的外边距会移动元素自身，如果设置右下边距
则会移动其他的元素。外边距可以设置成负值。
水平布局: 元素在其父元素中的水平方向的位置由一下几个属性共同决定：margin-left,
border-left,padding-left,width,padding-right,border-right,margin-right。一个元素在
父元素中，水平布局必须要满足该等式：上面的各个属性值相加=父元素内容区长度。
如果上面的等式不满足，则称为过度约束，等式会自动调整。
调整方式：如果七个值中没有auto，那么浏览器会自动调margin-right。但是当width,
margin-left，margin-right是auto的话，则会自动调整auto的值以使等式成立。如果同
时设置了那么宽度会加到最大，外边距设置成0；两个外边距auto，宽度固定时，外
边距平分需要补偿的长度。
垂直布局: 如果不是设置父元素的高度，那么父元素的高度会随子元素的改变而改变。但是
默认如果子元素的高度大于父元素中设置的高度，那么父元素会被“溢出”。可以设置
overflow来设置父元素如何应对溢出行为，visible:默认，hidden溢出的内容会被隐藏,
scroll:添加滚动条,auto：根据需要设置滚动条。还有overflow-x,overflow-y(懂得都懂)
盒大小:默认情况下，盒子可见框的大小都由内容区，内边框和边框共同决定。
box-sizing用来设置盒子尺寸的计算方式，可选值：content-box(宽度和高度用来设置
内容区的大小)，border-box(宽度和高度用来设置整个盒子可见框的大小)
阴影:用来设置元素的阴影，阴影不会影响布局。写法是box-shadow: 偏移量1 偏移量2 模糊半径颜色。第一个值设置左偏移量，正值向右移动，负值向左移动。第二个值是垂
直偏移量,正值向下移动,负值向上移动。第三个值是模糊半径。
圆角:border-radius用来设置圆角，就是让元素盒子的四个角变圆。如果是一个值，该值就是
圆角的半径。单设置一个角两个值就是一个椭圆角，值1是x方向上的半径，值2就是y
方向上的半径。四个值的话，左上，右上，左下，右下。三个值的话：左上,右上/左下，
右下。两个值：左上/右下，右上/左下。特殊：border-radius：50% 可以把元素设置成
圆形。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box{
background-color: aquamarine;
width: 300px;
height: 200px;
border-color: black;/*边框颜色*/
border-width: 10px;/*边框的宽度*/
border-width: 10px 20px 30px 200px;/*上右下左*/
border-width: 10px 30px 200px;/*上 左右 下*/
border-width: 10px 200px;/*上下 左右*/
border-style: solid;/*实线*/
}
</style>
</head>
<body>
<div class="box"></div><!--我是块元素-->
</body>
</html>6.外边距折叠
垂直外边距的重叠：相邻的垂直方向外边距会发生重叠现象。
兄弟元素：那么会取两者之间的较大值(两者都是正值)，特殊情况：相邻的外边距一正
负，那么取两者的和；如果两个都是负的，那么取两者之间绝对值较大的。兄
第元素之间的重叠是有利的，所以不用处理。
父元素：父子元素间相邻外边距，子元素会传递给父元素。这个会影响外面的布局所以必须
处理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box1{
width: 200px;
height: 100px;
}
.box2{
width: 100px;
height: 100px;
}
.box1{background-color: #bfa;
margin-bottom: 100px;
padding-top: 100px;
}
.box2{background-color: aqua;
/*margin-top: 100px;*/
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>7.行内元素盒模型(上面的都是块元素)
行内元素是不支持设置宽度和高度的。行内元素可以设置padding，但是垂直方向上的padding不会影响页面的布局。border和margin同样可以设置，但是不会影响页面的布局。
但是当我们想要强行设置行内元素的大小的时候，可以使用样式display，这个用来设置元素显示的类型。样式值有： inline(将元素设置成行内元素)，block(将元素设置成块元素)，inline-block将元素设置成行内块元素（既可以设置行内高度，又不会独占一行，会影响布局),table(将元素设置成一个表格)，none(元素不在页面中显示)。
还可以用样式visibility设置元素的显示状态。样式值有：visible(元素在页面中正常表示)，hidden(元素在页面中隐藏，不现实但是依然占据页面的位置)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.s1{
background-color: aqua;
}
.box1{
background-color: #bfa;
width: 100px;
height: 100px;
}
.a1{
display: inline-block;
width: 100px;
height: 100px;
background-color: bisque;
}
</style>
</head>
<body>
<a href="" class="a1">超链接</a>
<span class="s1">我是span</span>
<div class="box1"></div>
</body>
</html>8.浏览器的默认样式
通常情况下浏览器会为我们的元素提供一些默认样式。默认样式(比如body标签的margin会有自己的默认值)的存在会影响布局，通常情况下缩写网页时必须要去除浏览器的默认样式。
其实通常情况下我们消除这些影响其实就是将他们的margin和padding设置成0。那我们简化一点直接写*{ margin:0;padding:0;}，但是这不是最完美的方式。
完美方式：引入别人的重置样式表。
9.浮动
通过浮动可以使一个元素向其父元素的左侧或者右侧移动。使用float属性来设置元素的浮动。属性值：none(默认值，不浮动)，left(元素向左移动)，right(元素向右移动)。元素设置浮动之后，水平布局的等式就不需要强制成立。元素设置浮动之后，元素会从文档流中脱离，不再占用文档流的位置。所以元素下边的还在文档流中的元素会自动向上移动。
浮动特点：1.浮动元素会完全脱离文档流，不再占据文档流中的位置
2.设置浮动之后，元素会向父元素的左侧和右侧移动
3.浮动元素默认不会从父元素中移出
4.浮动元素向左或向右移动时不会超过它前面的其他浮动元素(水平方向)
5.如果浮动元素的上边是一个不浮动的块元素，则无法上移(先有墙后有气球)
6.浮动元素不会超过它上边的浮动的兄弟元素，最多就是和它一样高(垂直方向)
7.浮动元素不会盖住文字，所以可以设置“文字环绕图片”效果
元素脱离文档流后特点：
1.块元素不再不占页面的一行
2.块元素的宽度和高度默认都会被内容撑开
3.行内元素脱离文档流之后就会变成块元素，特点和块元素一样
4.总之，脱离文档流不需要再区分块元素和行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box1{
width: 400px;
height: 200px;
background-color: aquamarine;
float: left;
}
.box2{
width: 400px;
height: 200px;
background-color:aqua;
float: left;
}
.box3{
width: 200px;
height: 200px;
background-color:aqua;
float: right;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html> 浮动问题：
1. 高度塌陷问题：在浮动布局中，父元素的高度默认是被子元素撑开的。当子元素浮动
后，会完全脱离文档流，子元素脱离之后将无法撑起父元素的高度，导致父元素的高度
丢失。父元素高度丢失之后，下面的元素会上升 ，导致页面的布局混乱，所以i高度塌陷
是浮动布局中比较常见的一个问题，这个问题必须进行处理。
解决方法：
1.BFC，块级格式化环境，是CSS中一个隐含的属性，可以为一个元素开启BFC，
开启BFC后该元素会变成一个独立的布局区域。
2.clear方式：通过clear属性，清除浮动元素对当前元素所产生的影响
3.使用伪元素::after
开启BFC后元素特点：开启BFC的元素不会被浮动元素覆盖2.子元素和 父元素外边局不
会重叠3.开启BFC的元素，可以包含浮动的子元素。
如何开启BFC？1.使用float,即浮动就会开启BFC 2.把元素设置成行内块元素 3.将元素的
overflow设置成非visible的值。常用就是oveflow:hidden
clear介绍：可选值：left(清除左侧浮动元素对当前元素的影响)，right(清除右侧浮动元
素对当前元素的影响)，both(清除两侧中最大影响的那侧)。原理是浏览器会
自动为元素添加一个上外边距，以使其位置不受其他元素的影响
边距重叠问题：
1.解决方法是：使用::after
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高度塌陷问题</title>
<style>
.outer{
border: 10px red solid;
overflow: hidden;
}
.inner{
width: 100px;
height: 100px;
background-color: #bfa;
float: left;
}
.d1{width: 100px;height: 100px;background-color: #bfa;clear: left;}
.d2{width: 100px;height: 100px;background-color:aqua;float: left;}
.d3{border: 10px red solid;clear: left;}
.d4{width: 100px;height: 100px;background-color:aqua;float: left;}
.d5{clear: both;}
.d3::after{
content: '';
display: block;/*让::after变成一个块元素*/
clear: both;
}
</style>
</head>
<body>
<!--BFC方式-->
<!--<div class="outer">
<div class="inner"></div>
</div>-->
<!--clear方式-->
<!--<div class="d1"></div>
<div class="d2"></div>-->
<!--after伪类方式-->
<div class="d3">
<div class="d4"></div>
<!--<div class="d5"></div>--><!--这就相当于用结构解决了表现的问题-->
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距重叠问题</title>
<style>
.d3{width: 200px;height: 200px;background-color: #bfa;}
.d4{width: 100px;height: 100px;background-color:aqua;margin-top: 100px;}
.d3::before{
content: '';
display: table;/*本身不会占位置，又是块元素*/
}
/*上面的代码可以写成*/
/*clearfix可是解决高度塌陷和外边距重叠的问题*/
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="d3 clearfix">
<div class="d4"></div>
</div>
</body>
</html>10.定位
定位是一种更加高明布局手段，通过定位可以将元素摆放到页面的任意位置，使用position来开启定位。
可选值：static：默认值，元素是静止的没有开启定位
relative:开启元素的相对定位
absolute:开启元素的绝对定位
fixed:开启元素的固定定位
sticky:开启元素的粘滞定位
相对定位：
当元素的position属性值设置成relative时则开启了元素的相对定位
特点：1.元素开启相对之后，如果不设置偏移量元素不会发生任何变化
2.相对定位是参照于元素在文档流中的位置进行定位的
3.相对定位会提高元素的层级
4.相对定位不会使元素脱离文档流
5.相对定位不会改变元素的性质，块还是块，行内元素还是行内元素
偏移量(offset)：
元素开启定位之后可以通过设置偏移量来设置元素的位置，水平方向上我们通常只是选
择left和right中的一个，垂直方向上也一样。值可以为负。
top:定位元素和定位位置上边的距离
bottom:定位元素和定位位置下边的距离
left:定位元素和定位位置左侧的距离
right:定位元素和定位位置右侧的距离
绝对定位：
当元素的position属性值设置为absolute时，则开启了元素的绝对定位。
绝对定位的特点:
1.开启绝对定位后，如果不设置偏移量，元素的位置不会发生任何改变。
2.开启绝对定位后，元素会从文档流中脱离。
3.绝对定位会改变元素的性质，行内变成块,块的宽高被内容撑开。
4.绝对定位会使元素提升一个层级。
5.绝对定位元素是相对于其包含块进行定位的。
包含块(containing block)
正常情况下：包含块就是离当前元素最近的主线块元素。(开了定位不正常）
绝对定位的包含块:包含块就是离他最近的开了定位的祖先元素。如果所有的祖
先元素都没有开启定位，则根元素就是它的包含块。
固定定位：
将元素的position属性设置为fixed，则开启了元素的固定定位。
固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样。
唯一不同的是固定定位，永远参照于浏览器的视口进行定位。
固定定位的元素不会随网页的滚动条滚动。
浏览器的视口是指能够被当前观看的浏览器窗口。
粘滞定位：
当元素的position属性设置为sticky的时候，则开启了元素的粘滞定位。
粘滞定位和相对定位的特点基本一致，
不同的是单质定位可以在元素到达某个位置时将其固定。
绝对定位元素的位置：
水平布局
left + margin-left +border-left + padding-left + width + padding-right +border-right
+margin-right+right=包含快的内容区的宽度
当我们开启了绝对定位之后：
水平方向的布局等式就需要添加left和right两个值。此时的规则和之前一样，只是
多添加了两个值。当发生过度约束时，如果九个值中没有auto，则自动调整right值
以使等式满足。可以设置auto的值是： margin width left right。因为left和right的
值默认是auto，所以如果不知道left和right，则等式不满足时会自动调整这两个值。
垂直布局：
top + margin-top/bottom + padding-top/bottom + border-top/bottom+height=包含
块的高度
元素层级：
对于开启了定位元素，可以通过z-index属性来指定元素的层级。z-index需要一个整数
作为参数。值越大的元素层级越高，元素的层级越高，优先显示。如果元素的层级一
样，则优先显示靠下的元素。祖先的元素的层级再高也不会盖住后的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
.d1{width: 200px;height: 200px;background-color: #bfa;}
.d2{width: 200px;
height: 200px;
background-color:aqua;
position:absolute;
}
.d3{width: 200px;height: 200px;background-color:bisque}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>11.字体族
字体相关样式：
color：颜色
font-size:字体的颜色
font-weight:字重 normal(普通)，bold(加重)
font-style:字风格 normal(普通)，italic(斜体)
font-family(字体族，字体的样式):
可选值：serif 衬线字体；sans-serif 非衬线字体；monospace 等宽字体；这个用于
指定字体的类别，浏览器会自动使用该类别下的字体。
可以指定多个字体，优先使用第一个，第一个无法使用就用第二个，类推
还可以使用服务器中的字体样式（见下面的例子）
字体简写：font 50px serif (必须要写的)
font bold italic 50px/2 serif (吧可选的也写上)
图标字体：
使用原因：
在网页中经常需要使用一些图标，可以通过图片来引入图标，但是图片大小本身较
大，而且非常不灵活。所以在使用图标的时候，我们可以将图标直接设置为字体，然
后通过font-face的形式对字体进行引入。我们可以通过使用字体的形式来使用图标。
fontawesome使用步骤：
1.下载：https://fontswesome.com
2.解压：
3.将css和webfonts移动到项目中
4.将all.css引入到网页中
5.使用图标字体，
--直接通过类名来使用图标字体
class="fas fa-bell"
-- 使用伪元素来设置图标字体
(1)找到要设置图标的元素通过before或after选中。
(2)在content中设置字体的编码。
(3)设置字体的样式。在例子中有
--通过实体来使用图标字体。语法：&#x图标的编码
iconFont：使用阿里云的图标字体
行高(line-height):
行高指的是文字占有的实际高度，可以通过line-height来设置行高。
行高可以直接指定一个大小，也可以指定一个整数，如果是整数的话，行高将会是字体
的指定的倍数。行间距=行高-字体大小
字体框：
字体框就是字体存在的格子，设置font-size，实际上就是在设置字体框的高度，
行高会在字体框的上下平钧分配。
水平垂直对齐：
vertical-align 设置元素垂直对齐的方式：
baseline(默认值，基线对齐) top(顶部对齐) bottom(底部对齐) middle(居中对齐)
text-align 设置文本的水平对齐：
left(左测对齐) right(右侧对齐) center(居中对齐) justify(两端对齐)
图片默认也是基线对齐，所以为了让图片的下侧没有间隙，可以设置图片的垂直对齐方
式，只要不是基线对齐就行。
是否换行：
wite-space 设置网页如何处理空白
normal(正常) nowrap(不换行) pre(保留空白)
划线：
text-decoration设置文本装饰
none(什么都没有) underline(下划线) line-through(删除线) overline(上划线)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体族</title></title>
<style>
@font-face {
/*指定字体的名字*/
font-family: 'myfont';
/*服务器中字体的路径*/
src: url();
}
p{
color:aqua;
font-size: 30px;
font-family: 'Courier New', Courier, monospace;/*字体样式*/
font-family: myfont;
}
li::before{
content: '\f1b0';/*图标字体第二种*/
font-family: 'FontAwesome';
font-weight: normal;
color:aquamarine;
}
</style>
<link rel="stylesheet" href="../layout/css/font-awesome.css">
</head>
<body>
<p class="fa fa-bell"><!--图标字体第一种-->
天气真好，让我飞快地跑
</p>
<ul>
<li>我</li> <!--图标字体第二种-->
<li>是</li></li>
<li>傻</li>
<li>逼</li>
</ul>
<span class="fa"></span><!--图标字体第三种-->
</body>
</html>12.背景
background-image 设置背景图片。
--可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色。
--如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满。
--如果背景的图片大于元素，则会将一个部分背景无法完全显示。
--如果背景的图片和元素一样大则会正常显示。
background-color设置背景的颜色。
background-repeat 设置背景的重复方式。
可选值：
repeat(默认值，背景会沿着x轴y轴双方向重复)
repeat-x(背景会沿着x轴方向重复)
repeat-y(背景会沿着y轴方向重复)
no-repeat(背景图片不重复)
background-position设置背景图片的位置。
通过top left right bottom center几个表示方位的词来设置背景图片的位置
--可以通过设置两个方向分别表示X轴方向和Y轴方向上的两个位置。如果设置一个
方向，Y轴方向上默认是center。
--可以通过设置偏移量来指定背景图片的位置。两个值分别是水平方向的偏移量和
垂直方向的偏移量。
background-clip 设置背景的范围。
可选值：
border-box（默认值，背景会出现在边框的下边）
padding-box(背景不出现在边框，指出现在内容区和内边框)
content-box(背景这会出现在内容区)
background-drigin 设置北京图片的偏移量计算的原点。
可选值：
padding-box（默认值，background从内边距开始算）
content-box（背景图片的偏移量从内容区处计算）
border-box （背景图片的变量从边框处开始计算）
background-size 设置背景图片的大小
可选值：
第一个值 第二个值（宽度和高度，如果只写一个，第二个默认是auto）
cover（图片的比例不变，将元素铺满）
contain（图片的比例不变，将图片在元素中完整展示）
background-attachment 设置背景图片是否随元素移动
可选值：
scroll （默认值，背景图片会跟随元素移动）
fixed（背景会固定在页面中，不会随元素移动）
简写形式：
background背景相关的简写属性，所有背景相关的样式都可以通过该样式来设
置，并且该样式没有顺序要求，也没有哪个属性是必须写的。
注意：
background-size必须写在background-position的后面，并且使用/隔开。比如：
background-position/background-size
雪碧图：
将多个小图片存到一张大图片中，然后通过调整background-position来显示。这样
的话图片会同事加载到网页中，就可以有效避免出现闪烁的问题。使用步骤如下：
1.先确定好要使用的图标
2.测量图标的大小
3.根据测量结果创建一个元素
4.把雪碧图设置为元素的背景图片
5.设置一个偏移量以显示正确的图片
<!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>
a:link{
display: block;
width: 200px;
height: 200px;
background-color: aqua;
background-image: url("../images/13.jpg");
}
a:hover{
background-color: aquamarine;
background-image: url("../images/12.jpg");
}
a:active{
background-color: blueviolet;
background-image: url("../images/11.jpg");
}
</style>
</head>
<body>
<a href="javascript:;">确实</a>
</body>
</html>13.渐变
通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜向另一个颜色过渡的效果，
渐变是图片，需要通过background-image来设置。
线性渐变：颜色沿着一条直线发生变化 linear-gradient()
--线性渐变的开头，我们可以制定一个渐变的方向。deg / turn /to 方向
--渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐
变的分布情况
平铺渐变：repeaing-linear-gradient()
---额额，这个是平铺渐变。
径向渐变：是一种辐射渐变的方式 radial-gradient()
默认情况下径向渐变根据元素的形状来计算的。正方形->原型 长方形->椭圆形
可以指定大小也可以指定位置：
语法： radial-gradient(大小 at 位置 ，颜色 位置，颜色 位置，颜色 位置)
大小可选值：
circle圆形
ellipse椭圆形
closest-side 近边
closest-corner 近角
farthest-side 远边
farthest-corner远角
位置可选值：
top right left center bottom
2835
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
