网页分成三个部分: 结构(HTML) 表现(CSS) 行为(JavaScript)
<!-- 语义化标签 -->
1.标题标签（块级元素：独占一行）h1~h6:
;(SEO优化一个页面最好只有一个h1)标题分组
标题分组
2.段落（块级元素：独占一行） 3.强调（行内元素：不会独占一行）斜体 4.重强调（行内元素：不会独占一行）加粗! 5.换行布局标签（结构化语义化标签）: header表示网页的头部 main表示网页的主体部分(一个页面中只会有一个main) footer表示网页的底部 nav表示网页中的导航 aside和主体相关的其他内容(侧边栏) article表示一个独立的文章 section表示一个独立的区块，以上的标签都不能表示时使用section div没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素 span行内元素，没有任何的语义，一般用于在网页中选中文字
一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素 p元素中不能放任何的块元素
html列表共有三种: 1、有序列表 2、无序列表 3、定义列表
有序列表，使用ol标签来创建 有序列表 使用li表示列表项
无序列表，使用ul标签来创建 无序列表 使用li表示列表项
定义列表，使用dl标签来创建一个 定义列表 使用dt来表示 定义的内容 使用dd来对内容进行 解释说明
- 结构
- 表现
- 行为
- 结构
- 表现
- 行为
- 定义内容
- 这是一个定义内容
target属性用来指定超链接打开的位置 可选值: _self默认值在当前页面中打开超链接 _blank在一个新的标签中打开超链接 超链接
跳转到页面其他位置： 回到顶部 也可以跳转到页面的指定位置，只需将href属性设置标签元素的id属性值
占位： 这是一个新的超链接
img标签是一个 自结束标签 img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点） 属性: src 属性指定路径，路径规则和超链接一样 alt 图片的描述，默认情况下不会显示，图片无法加载时显示 width 图片的宽度(单位是像素) height 图片的高度 （宽度和高度中如果只修改了一个，则另一个会等比例缩放）
audio标签 属性: controls 是否允许用户控制播放 autoplay 音频文件是否自动播放 loop 音乐是否循环播放
video标签 使用方式和audio基本上是一样的
<!-- CSS -->
层叠样式表: 网页实际上是一个多层的结构，通过css可以分别为网页的每一个层来设置样式,而最终我们能看到只是网页的最上边一层
第一种方式(内联样式，行内样式): 在标签内部通过style属性来设置元素的样式
少小离家老大回，乡音无改鬓毛衰
第二种方式(内部样式表): 将样式编写到head中的style标签里,然后通过css的选择器来选中元素并为其设置各种样式 第三种方式(外部样式表): 将CSS样式編写到一个外部的CSS文件中,然后通过link标签来引入文件p{
color: tomato;
font-size: 50px;
}
<link rel="stylesheet" type="text/css" href="./style.css">
1.元素选择器div{}
2.id选择器#red{} 不可重复 <p id="red"></p>
3.class类选择器.blue{} 可重复 <p class="blue pink"></p>
4.通配符选择器*{}
5.复合选择器：
交集选择器div.red{} (同时满足)
并集选择#red, h1, span{} (满足其一项即可)
6.关系选择器：
父元素
直接 包含子元素的元素叫做父元素
子元素
直接 被父元素包含的元素是子元素
子元素选择器
作用:选中指定父元素的指定子元素
语法:父元素 > 子元素
混合使用：
div.box > span{
color: orange;
}
祖先元素
直接或间接包含后代元素的元素叫做祖先元素,一个元素的父元素也是它的祖先元素
后代元素(比子元素范围大)
直接或间接被祖先元素包含的元素叫做后代元素,子元素也是后代元素
div span{} div中所有的span
后代元素选择器:
作用:选中指定元素内的指定后代元素
语法:祖先 后代
div span{
color: skyblue;
}
兄弟元素
拥有相同父元素的元素是兄弟元素
p + span{} p后面 同级紧挨着的 一个兄弟span
p ~ span{} p后面 同级所有的兄弟span
7.属性选择器：
p[title]{} 含有指定属性名的p标签<p title="abc"></p>
p[title=abc]{}
p[title^=abc]{} 选中属性值开头为abc的元素
p[title*=abc]{} 选中属性值中任意位置包含abc的元素
8.伪类选择器：
伪类，元素中不存在的一类元素
:first-child:
ul > li:first-child{} 第一个子元素li
last最后一个
nth-child() 选中第n个0-正无穷***
2n偶数位置元素0 2 4 6.../even
2n+1奇数位置/odd
not: (否定伪类)
ul > li:not(:nth-child(3)){} 除了第三个
:first-of-type
:last-of-type
:nth-of-type()
这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序 如：ul > li:first-child-type全部的子元素li而不包含其他类型的子元素
a: link{} 未访问过
a: visited{} 访问过
：hover{}
：active{} 点击激活
9.伪元素选择器：
伪元素，表示页面中些特殊的并不真实的存在的元素(特殊的位置)
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后
before和after 必须结合content属性来使用
例：
p::first-letter{
font-size: 50px;
}
10.样式的继承：
样式的继承，为一个元素设置的样式同时也会应用到它的 后代元素 如：body{}
注意:并不是所有的样式都会被继承:比如背景相关的，布局相关等的这些样式都不会被继承
11.选择器的权重：
内联样式（行内样式）1,0,0,0 > id选择器0,1,0,0 > 类和伪类选择器0,0,1,0 > 元素选择器0,0,0,1 > 通配符选择器0,0,0,0 > 继承的样式 没有优先级
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示
可以在某一个样式的后边添加! important，则此时该样式会获取到最高的优先级，甚至超过内联样式
.x{
background-color: purple !important;
}
12.元素长度单位:
像素：
不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰，所以同样的200px在不同的设备下显示效果不一样
百分比：
也可以将属性值设置为相对于其 父元素 属性的百分比
box1{
width: 300px;
height: 100px;
background-color: orange;
}
.box2{
width: 50%;
height: 50%;
background-color: aqua;
}
em
em是相对于 所在元素 的 字体大小 来计算的（默认字体每个16像素）***
1em = 1font-size
em会根据字体大小的改变而改变
box3{
font-size: 30px;
width: 10em;
height: 10em;
} -> 1em = 30px
rem
rem是相对于 根元素 的字体大小来计算***
html{
font-size: 20px;
}
box3{
font-size: 30px;
width: 10rem;
height: 10rem;
} -> 1em = 20px
13.元素颜色：
颜色单位:
在CSS中可以直接使用颜色名来设置各种颜色
比如: red、 orange、 yellow、 blue、 green...
但是在css中直接使用颜色名是非常的不方便
RGB值:
RGB通过三种颜色的不同浓度来调配出不同的颜色
R red,G green,B blue
每种颜色的范围在0-255(0%-100%)之间
语法: RGB(红色,绿色,蓝色)
RGBA:
就是在rgb的基础上增加了一个a表示不透明度
需要四个值，前三个和rgb一样，第四个表示不透明度
1表示完全不透明0表示完全透明 . 5半透明
十六进制的RGB值:
语法: #红色绿色蓝色
颜色浓度通过00-ff
如果颜色两位两位重复可以进行简写
#aabbcc --> #abc
HSL值HSLA值
H色相(0 - 360) 代表不同的颜色
S饱和度，颜色的浓度0% - 100%
L亮度，颜色的亮度0% - 100%
background-color: red;
background-color: rgb(255, 0, 0);
background-color: rgba(106, 153 ,85, .5);
background-color: #ff0000;
background-color: #ff0;
background-color: hsl(0, 100%, 50%);
14.文档流(normal flow)
网页是一个多层的结构，一层摞着一层
通过Css可以分别为每一层来设置样式
作为用户来讲只能看到最顶上一层
这些层中，最底下的一层称为文档流，文档流是网页的基础
我们所创建的元素默认都是在文档流中进行排列
对于我们来元素主要有两个状态：
a.在文档流中
b.不在文档流中(脱离文档流)
元素“在文档流中”时有什么特点:
块元素
块元素会在页面中 独占一行(自上向下垂直排列)
默认宽度：是父元素的全部(会把父元素撑满)
默认高度：是被内容撑开(子元素,如果没有内容则不会显示，例如：文字内容)
行内元素
行内元素 不会独占页面的一行，只占自身的大小
行内元素在页面中 自左向右 水平排列
行内元素的默认宽度和高度：都是被内容撑开
15.盒子模型(box model)
内容区(content)
内边距(padding)
边框(border)
外边距(margin)
a.内容区(content)元素中的所有的 子元素和文本内容 都在内容区中排列
内容区的大小：由width和height两个属性来设置
b.边框(border)边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部要设置边框，需要 至少 设置三个样式:
边框的宽度border-width: 10px;
(可以省略，默认3像素)
(四个值:上右下左;三个值:上 左右 下;两个值:上下 左右;一个值:上下左右)
(其他形式：border-left-width)
边框的颜色border-color: red;
(可以省略，默认黑色)
(同上规则上右下左：border-color: orange red yellow green;)
边框的样式border-style: solid;
(没有默认值，不可省略)
(同上规则上右下左：border-style: solid dotted dashed double;)
简写：border: solid 10px orange;(没有顺序要求)
或单独设置：border-top: 10px solid red;
border-right: none;
c.内边距(padding)
padding-top padding-right padding- bottom padding-left
内边距的设置会影响到盒子的大小***
背景颜色 会延伸 到内边距上
一共盒子的可见框的大小，由内容区内边距和边框共同决定
所以计算盒子大小需将三个区域（内容区+内边距+边框）加到一起计算
d.外边距(margin)
外边距不会影响盒子可见框的大小
但是外边距会影响盒子的位置
margin会影响到盒子实际占用空间
margin-top
上外边距，设置一个正值，元素会向下移动
margin-right
默认情况下设置margin-right不会产生任何效果
margin-bottom
下外边距，设置一个正值，其下边的元素会向下移动
margin-left
左外边距，设置一个正值，元素会向右移动
margin也可以设置负值，如果是负值则元素会向相反的方向移
设置的左和上外边距则会移动元素自身
而设置下和右外边距会移动其他元素
16.盒子模型-水平方向布局：
元素在其父元素中 水平方向的位置 由以下几个属性共同决定：
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一个元素在其父元素中，水平布局必须要满足以下的等式：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区的宽度(必须满足)***
以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整
调整的情况:
如果这七个值中没有为auto的情况，则浏览器会自动调整margin-right值以使等式满足
这七个值中有 三个值 可以设置为auto
width
margin-left
maring-right
默认值width: auto***
如果某个值为auto,则会自动调整为auto的那个值以使等式成立
0+0+0+auto+0+0+0(子元素水平布局参数)=800(父元素水平width) 则auto = 800
0+0+0+auto+0+0+200=800 auto = 600
200+0+0+auto+0+0+200=800 auto = 400
auto+0+0+200+0+0+auto=800 auto = 300(子元素居中效果)
如果将一个宽度和一个外边距设置为auto,则with宽度会调整到最大,设置为auto的外边距会自动为0
如果将三个值都设置为auto,则外边距都是0,with宽度最大
如果将两个外边距设置为auto,with宽度固定值，则会将外边距设置为相同的值
所以我们经常利用这个特点来使一个元素在其父元素中水平居中
示例:
width: 10px;
margin: 0 auto;
块元素：
如果没有给content指定width，content为父级元素宽度html,margin为0；
如果给了width，content宽为width，右侧margin补全未占据父元素的剩余部分；
17.盒子模型-垂直方向布局
默认情况下父元素的高度被内容撑开
设置height则为设置的值
子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出
使用overflow属性来设置父元素如何处理溢出的子元素
可选值:
visible默认值子元素会从父元素中溢出，在父元素外部的位置显示
hidden溢出内容将会被裁剪不会显示
scroll生成两个滚动条，通过滚动条来查看完整的内容
auto根据需要生成滚动条overflow: auto;
分别设置：overflow-x: xxx; pverflow-y: xxx;
18.垂直外边距的重叠(折叠)
只有相邻的 垂直方向 外边距会发生重叠现象
兄弟元素
兄弟元素间的相邻垂直外边距会取两者之间的较大值(两者都是正值)
特殊情况:
如果相邻的外边距一正负，则取两者的和
如果相邻的外边距都是负值，则取两者中绝对值较大的
兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理
父子元素
父子元素间相邻外边距，子元素的会传递给父元素(上外边距)
父子外边距的折叠会影响到页面的布局，必须要进行处理
19.行内元素的盒模型
行内元素（内联元素）不支持设置宽度和高度***
行内元素可以设置padding,但是垂直方向padding不会影响页面的布局
行内元素可以设置border,垂直方向的border不会影响页面的布局
行内元素可以设置margin(相邻相加),垂直方向的margin不会影响布局
display用来设置元素显示的类型
可选值:
inline将元素设置为 行内元素
block将元素设置为 块元素
inline-block将元素设置为 行内块元素
行内块：既可以 设置宽度和高度 又不会独占一行***
table将元素设置为一个表格
none元素不在页面中显示(不占位置)
visibility用来设置元素的显示状态
可选值:
visible默认值,元素在页面中正常显示
hidden元素在页面中隐藏不显示，但是依然 占据页面的位置
20.默认样式:
浏览器都会为元素设置一些默认样式
默认样式的存在会影响到页面的布局
通常情况下编写网页时必须要去除浏览器的默认样式(PC端的页面)
三种方式：
a.分别去除：
body{
margin: 0;
}
p{
margin: 0;
}
ul{
margin: 0;
padding: 0;
/*去除项目符号*/
list-style: none;
}
...
b.统一去除各类标签默认样式：
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
c.重置样式表:专门用来对浏览器的样式进行重置(引入外部文件)：
reset.CSS
直接去除了浏览器的默认样式
normalize.css对不同浏览器默认样式进行了统一
21.盒子宽高范围定义：
.box{
width: 100px;
height: 100px;
padding: 10px;
border: 10px red solid;
box-sizing: border-box;
默认情况下，盒子可见框的大小=内容区content+内边距padding+边框border
box-sizing用来设置盒子尺寸的计算方式(设置width和height的作用)
可选值:
a. content-box 默认值:width和heigth设置content的大小
b. border-box width和heigth设置整个盒子可见框(content+padding+border)的大小
22.轮廓：
用来设置元素的轮廓线，用法和border一样
轮廓和边框不同的点，就是轮廓不会影响到可见框的大小
.box: hover{
outline: 10px red solid;
}
23.阴影：
不影响布局
box-shadow: 20px 20px 10px rgba(0, 0, 0, .3);
水平、垂直偏移量，模糊量，颜色
24.圆角：
border-radius: px, px, px, px;
border-radius可以分别指定四个角的圆角
四个值: 左上 右上 右下 左下
三个值: 左上 右上/左下 右下
两个值: 左上/右下 右上/左下
border-radius: 50%;
圆形
border-top-left-radius: Xpx, Ypx; （一个值设置正圆角，两个值可以设置椭圆）
25.浮动：
通过浮动可以使元素向其父元素的左侧或右侧移动
使用float 属性来设置于元素的浮动
可选值:
none默认值，元素不浮动
left元素向左浮动
right元素向右浮动
注意，元素设置浮动以后，水平布局的等式便不需要强制成立
元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置
所以元素下边的还在文档流中的元素会自动向上移动
浮动的特点:
1、浮动元素会完全脱离文档流，不再占据文档流中的位置
2、设置浮动以后元素会向父元素的左侧或右侧移动，
3、浮动元素默认不会从父元素中移出
4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
5、脱离文档流的特点:
块元素:
a. 块元素不在独占页面的一行
b. 脱离文档流以后，块元素的宽度和高度默认都被内容撑开
行内元素:
a. 脱离文档流以后会变成块元素，特点和块元素一样
b. 脱高文档流以后，不需要再区分块和行内了
80.一般布局结构：
section > div
nav > div
ul > li
div > div
