HTML&CSS3

好看的网页千篇一律，有趣的代码万里挑一。

祝大家元宵节快乐！做个快乐的小脑斧。。。^-
今天过后，全面复工啦！要收心工作了呦
温故知新，糖糖为大家整理了基础知识点，希望可以帮助到有需要的朋友。…^&

一、HTML基础标签

1.HTML简介

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言

标记语言是一套标记标签

HTML 使用标记标签来描述网页

HTML 文档包含了HTML 标签及文本内容

HTML 运行在浏览器上，由浏览器来解析

HTML文档也叫做 web 页面

文档的后缀名：xxx.html 或 xxx.htm

2.HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)

HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

3.HTML基础标签

html
html是网页的根标签，网页的所有内容，都必须要写在该标签里面

head
head是头部标签，用于导入外部的资源信息和描述网页自身信息

title
title是网页自身的标题标签，它里面的内容会在网页的浏览器的选项卡上显示

body
body是主体标签，网页中能看到到所有内容，都必须要写在该标签里面

文档声明，是告诉浏览器采用什么标准去解析下面的网页，这里表示html5的标准

如果没有文档声明标签，浏览器会根据网页中具体的标签去判断使用什么标准

其他标准：
HTML 4.01

XHTML 1.0

h1~h6

h1~h6是网页的内容标题标签，h1最大，h6最小。标题标签的特点是：字体会加粗

p

p标签是段落标签，用于描述一段内容

hr

hr是水平线标签，用于对网页中的内容进行分隔

br

在网页中，无论打多少空格，或者换多少次行，默认都只是一个空格

如果需要手动换行，需要使用br标签

strong

strong是加粗标签，用于突出一段内容里面的部分信息

em

em是倾斜标签，也用于突出一段内容里面的部分信息

特殊符号

  空格
< 小于号
> 大于号
" 双引号
© 版权符号

img

img是图片标签，src属性设置图片的地址，地址可以是本地地址，也可以是网络地址

title属性设置鼠标悬停提示信息，alt属性设置图片的替代文字，当图片无法显示时，显示对应的文字

width属性设置图片宽度，height属性设置图片高度，如果只设置了其中一个属性，另一个属性会等比缩放

a

超链接标签，根据链接类型可以分为：页面间链接，锚链接，功能性链接

1.页面间链接：

href属性设置链接的地址，可以是本地地址，也可以是网络地址

target属性设置目标窗口打开的位置，属性值_self替换自身窗口，_blank是打开新窗口

替换自己
打开新窗口

2.锚链接：

用于当前页面的跳转，从页面的某个区域，跳转到另一个区域

通常需要两个a标签，一个a标签通过name属性设置锚标记，另一个a标签通过href属性跳转到对应的锚标记处

注意：href属性值需要加一个#号

如果需要跨页面，在href属性中，显示设置地址，在地址的后面在设置对应的锚标记

南京

3.功能性链接：

利用超链接打开本地的应用

div

div是分区标签，是一个块级标签，通常用于网页的布局

span

span是范围标签，是一个行级标签，通常用于突出显示段落中的部分内容

4.标签分类

所有的标签可以分为两类：块级标签和行级标签(内联标签)

块级标签：该元素独占一行(h2,p)

行级标签：按行显示，一行不够放，才会自动换行(a,strong,em,img)

注意：通常情况下，行级标签要放在块级标签里面使用

注意：p标签不能嵌套p标签

二、列表、表格、表单

1.有序列表和无序列表

ol是有序列表标签，它里面的列表项是有序号的

ul是无需列表标签，它里面的列表项是没有序列的，但是有符号

li 是列表项标签

列表可以嵌套定义

通过设置ol的type属性值，可以改变序号类型，可以设置属性值有：A，a，I，i，1

ul标签通过type属性，也可以设置符号类型：属性值有：disc，circle，square

2.定义列表标签

dl是定义列表标签

dt的定义列表的标题标签

dd是定义列表的描述标签，用来描述dt

可以用多个dd去描述一个dt

一个dl可以只描述一个dt，也可以描述多个dt

一般图文布局的结构会使用定义列表标签

3.表格标签

table是表格标签，通过border属性设置表格的边框，width属性设置宽度，height属性设置高度

设置表格的属性align="center"，将整个表格居中

tr是行标签

设置tr的align属性，控制的是tr里面的所有td的水平对齐方式

td是列标签

td设置align属性，只是对当前td设置水平对齐方式

colspan属性，用于单元格跨列

rowspan属性，用于单元格跨行

如果表格里面的单元格需要跨列或者跨行：

先将完整的表格画好
然后做跨列
最后做跨行

4.表格的完整结构

表格根据结构划分：thead是表格的头部，tbody是表格的主体，tfoot是表格的尾部

caption是表格的标题标签

td是普通列，th是表头列，th里面的内容默认会加粗并且居中
5.表单标签
form是表单标签，表单的作用是：接收用户输入的数据，并向服务器发送

method属性设置表单的提交方式：GET和POSTP (POST比GET更安全)

action属性设置表单的提交地址，比如：http://192.168.112.55:8080/address/add

6.表单里面的常用元素

form是表单标签，所有的表单元素，必须要放到form标签里面，才能提交到服务器

如果表单中使用了文件域，表单标签需要添加一个enctype="multipart/form-data"属性

input标签是表单的元素，绝大多数表单元素都是使用input标签，通过type属性设置元素的类型

type="text"是文本框，size属性设置初始长度，maxlength属性设最大输入长度，name属性设置表单元素的名称
type="password"是密码框

type="radio"是单选框，注意：一组单选框，必须要设置相同的name属性值，value属性设置表单元素保存的值，

checked属性设置默认选中,该属性的属性值也是checked，在html中如果属性值跟属性名相同，可以省略属性值
type="checkbox"是复选框，也可以使用checked属性
type="file"是文件域，该标签用于选择文件
type="button"是普通按钮
type="submit"是提交按钮，用于将表单里面的数据向服务器提交，disabled属性设置表单元素禁用
type="reset"是重置按钮，用于清空表单里面的填写内容
type="image"是图片提交按钮，它不需要通过value属性设置文本，但是需要通过src属性设置一张图片
type="hidden"是隐藏域，用于在网页中隐藏信息。在实际开发中，隐藏域里面的信息是需要加密存储的
select标签是下拉框，option是下拉框的选项标签，value属性设置每个选项的值，

注意：值可能跟显示的文本不一样，selected属性设置默认选中

textarea标签是文本域，其实就是多行文本框，rows属性设置行数，cols属性设置每行列数，

readonly属性表示只读

7.html5新增表单元素

type="number"是数字文本框，min设置最小值，max设置最大值，step设置增量值
type="range"是滑块，min，max，step用法同number
type="url"是网址文本框，输入的内容必须以ftp: 或者 http: 或者 https: 开头
type="email"是邮箱文本框，输入的内容必须包含@字符
type="search"其实就是文本框，只是专门用于做搜索框用，输入内容后，带有清空内容的小按钮
新增属性：
①placeholder属性设置文本框里面的提示内容，当在文本框中输入真正的内容时，会自动消失
②required属性给文本框，添加非空验证
③pattern属性用于给文本框，添加正则表达式验证

三、初始样式

1.行内样式表

通过在标签中使用style属性的方式，可以给标签添加行内样式

在实际开发中，不推荐使用行内样式，因为行内样式不方便样式的复用

行内样式，违反了内容与表现分离的原则，网页后期改版会变复杂

更关键的是，这样的网页不利于搜索引擎搜索

2.内部样式表

在head标签中通过style标签，定义内部样式。style标签可以通过type属性明确里面的样式类型，type属性可以省略

内部样式表：可以做到当前页面的样式复用，但是不能做到多页面样式的复用，内容与表现的分离不够彻底

在style标签里面，通过定义选择器的方式，定义样式

下面的样式就是根据p标签的名称定义选择器，给p标签添加样式：

p{
     font-size: 30px;
     color: red;
}

3.外部样式表

通过link标签，引入外部样式文件，href属性设置样式文件的路径

注意：必须设置rel属性的属性值为stylesheet。告诉浏览器引入的外部资源是样式表资源

如果有多个页面需要该样式，直接引入，方便多页面样式的复用

网页的内容和样式彻底分离，这样的网页更利用搜索引擎搜索

引入外部样式文件的第二种方式，在style标签中，通过@import方式导入指定的样式文件

4.样式的优先级

外部样式和内部样式的优先级采用：就近原则，后引入的，优先级更高

行内样式的优先级最高

5.选择器

1.基本选择器

标签选择器：以标签的名称作为选择器的名称，对所有该标签添加样式

类选择器：选择器的名称是自定义的，必须以.符号开头。在标签中，通过class属性调用具体的类选择器样式，在标签中使用时，不需要加.号

id选择器：选择器的名称也是自定义的，必须以#符号开头。在标签中，通过id属性调用具体的id选择器样式，在标签中使用时，不需要加#号

注意：在网页中，标签的id属性值，通常是不能重复的。id选择器的优先级更高

2.基本选择器的优先级

基本选择器的优先级：id选择器 > 类选择器 > 标签选择器

注意： !important的优先级最高

3.层次选择器

后代选择器，方式是：A B{}。对A里面的所有B添加样式

子选择器，方式是：A>B{}。对A里面的所有第一级的B添加样式

相邻兄弟选择器，方式是：A+B{}，B必须是A相邻的下一个元素

通用兄弟选择器，方式是：A~B{}，对A下面的所有的B元素添加样式

4.属性选择器

属性选择器，方式是：[属性名]{}，通常会配合其他选择器一起使用，比如：li[属性名]，只针对li标签

属性选择器，可以根据属性值，精确的对某些标签添加样式

$= 表示以指定的属性值结尾

^= 表示以指定的属性值开头

*= 表示属性值包含指定的内容

实际案例：给以.png结尾的图片，设置大小

img[src $= '.png']{
    width: 100px;
    height: 100px;
}

5.交集选择器

交集选择器，方式是：选择器A选择器B{}，同时满足A和B的元素，添加样式

a.red{
    color:red
}

6.并集选择器

并集选择器，方式是：A,B,C{}，给多个选择器，设置相同的样式

案例：.header里面的.nav 和 .centent里面的p 和 #two上面的.three，采用相同的样式

.header .nav,.centent p,#two.three{
    font-size: 20px;
    color: red;
}

四、基础样式

1.字体样式

font-size 设置字体的大小

单位：px是像素

font-family 设置字体的类型

font-family 可以设置中文字体类型，也可以设置英文字体类型，如果需要同时设置英文字体类型和中文字体类型，先设置英文，再设置中文

font-family: 'Courier New','幼圆'

①font-weight 设置字体的粗细，属性值bold表示加粗

②font-style 设置字体的风格，属性值italic表示倾斜

③font是字体的缩写属性，可以同时设置：风格加粗大小类型

风格和加粗的顺序可以变化，也可以省略，最后两个属性值必须是大小和类型

特殊用法：20px是字体大小，40px是行高

font:20px/40px '楷体'

2.文本样式

color 是文本颜色

颜色值可以是英文单词

颜色值可以是十六进制颜色值，方式是：#红绿蓝

下面属性值里面的ff其实是十六进制的255

color: #ff0000;

颜色值可以是十进制颜色值，方式是：rgb(红,绿,蓝)

color: rgb(255,0,0);

rgba(红,绿,蓝,透明度)，注意：透明度的取值范围是：0-1

color: rgba(255, 0, 0, 0.5);

十六进制颜色值，加透明度的方式是：#红绿蓝透明度。注意：这里的透明度的取值范围是0-255

color: #ff000055

①text-align 是文本对齐方式，属性值包括：left(默认值)，center，right
②text-indent 是首行缩进，首行通常需要缩进两个字符，所有属性值单位通常使用em或者rem
一个em大小就是当前元素字体的大小尺寸。一个rem的大小默认是网页字体的默认大小(16px)
③line-height 是行高
④text-decoration 是文本装饰，属性值包括：underline(下划线)，overLine(上划线),line-through(删除线),none(没有装饰)
可以通过text-decoration属性，去掉超链接的默认下划线
⑤letter-spacing 是字符间距
⑥word-spacing 是单词间距

3.超链接样式

a:link 表示未点击的样式

a:visited 表示点击过后的样式

a:hover 表示鼠标悬停样式

a:active 表示点击未释放样式

注意：顺序必须是：a:link a:visited a:hover a:active

一般情况下，我们会先给a元素设置统一的样式，再添加一个a:hover
4.列表样式
list-style-type 设置列表样式，属性值none，表示无样式

其它属性值，包括：disc(实心圆) circle(空心圆) square(方块) decimal(数字)

所以，所谓有序列表和无需列表，只是默认的列表样式值不同

list-style-image 设置列表的样式为图标

list-style-position 设置列表样式的位置，属性值包括：inside 和 outside(默认值)，inside属性值，列表会往里缩进一个tab符

list-style 是缩写属性，既可以设置列表符号类型，也可以设置列表图标

5.背景样式
background-color 背景颜色

background-image 背景图片

background-repeat 背景图片的平铺方式，

属性值包括：no-repeat(不平铺) repeat(平铺) repeat-x(X轴平铺) repeat-y(Y轴平铺)

background-position 背景图片的位置，

可以通过：left right top bottom center 这些方位值设背景图片的具体位置，

也可以通过：具体的数字设置X轴和Y轴的位置，

还可以通过：百分比设置X轴和Y轴的位置，

无论是给具体的数字，还是给具体的百分比，如果只传一个值，X轴和Y轴的位置相同

background-size 属性设置背景图片的大小，

属性值contain，表示：等比拉伸，直到跟任意一边与容器边框重叠，

属性值cover，表示：等比拉伸，直到跟所有边与容器边框重叠，

可以设置固定的大小，一般不推荐，因为会使图片变形，

属性值也可以设置百分比

background 是背景的缩写属性，可以同时设置背景颜色，背景图片，平铺方式，位置，

各属性值，没有严格的顺序

如果要加背景图片的大小,方式是：颜色图片平铺方式位置 / 背景图片大小

background:red url(./img/zhl.jpg) no-repeat center / 300px 300px

6.背景渐变

linear-gradient()函数，用于设置背景的线性渐变

该函数的第一个参数值是渐变的方向，后面的参数值是渐变的颜色

background: linear-gradient(to left top,red,blue,green,purple)

radial-gradient()函数，用于设置背景的径向渐变

该函数不需要传渐变方向，直接传渐变的颜色，从中间向外渐变

background: radial-gradient(red,blue,green)

7.文本垂直居中

如果只有一行文本内容，可以通过设置line-height:height(行高=高度)的方式，设置文本垂直居中

8.文本阴影

text-shadow 属性设置文本阴影

属性值分别是：X轴偏移量 Y轴偏移量阴影的模糊半径阴影颜色

9.图片对齐方式

图片的vertical-align样式，可以设置图片两端文本相对于图片的对齐方式

属性值包括了：top bottom middle

五、盒子模型

1.什么是盒子模型

网页里面的每一个标签，都可以当做是一个盒子，该盒子是用来放内容的

通过：宽高，内边距，边框，外边距定义盒子

2.边框

每条边框可以通过三个属性设置，分别设置：边框宽度边框颜色边框类型

边框类型solid，表示实线

边框类型double，表示双实线

边框类型dashed，表示虚线

边框类型dotted，表示点线

通常情况下，盒子的四条边框的样式应该是统一的，可以通过下面的三个属性去统一设置

border: 10px tomato dotted

去掉文本框的轮廓线

outline: none

3.内边距

可以分别设置盒子四个方向的内边距

padding-top: 20px;
padding-right: 40px;
padding-bottom: 60px;
padding-left: 80px;

padding是缩写属性，可以分别设置：上右下左四条边的内边距。（顺序是顺时针）

padding: 20px 40px 60px 80px;

padding如果只设置3个属性值，分别是：上右下，左边采用右边的值

padding: 20px 40px 60px

padding如果只设置2个属性值，分别是：上右，左边采用右边的值，下面采用上面的值

padding: 20px 40px

padding如果只设置1个属性值，表示上右下左采用相同的内边距

padding: 20px

4.外边距

外边距是设置盒子与盒子的间距

margin-top: 50px;
margin-right: 50px;
margin-bottom: 100px;
margin-left: 100px;

注意：上下两个盒子的间距，采用上面盒子的底边距和下面盒子的上边距的最大值

margin的缩写属性，用法根padding一样

5.盒子居中

因为网页中的很多标签，都有默认的样式，在实际开发中，我们又不需要这些默认的样式，

所以，可以使用通用选择器，去掉这些默认样式

*{
    /* 去掉外边距 */
    margin: 0;
    /* 去掉内边距 */
    padding: 0;
    /* 去掉列表符号 */
    list-style: none;
    /* 去掉轮廓线 */
    outline: none;
    /* 去掉下划线 */
    text-decoration: none;
}

如果设置盒子居中显示。属性值auto，表示自动，左右外边距的属性值为auto，会自动平分剩余的空间

margin: 0 auto

6.盒子尺寸
width和height属性设盒子内容区域的大小

border，padding，margin 会增长盒子的整体尺寸

盒子的实际宽度= width + border-left + border-right + padding-left + padding-right + margin-left + margin-right

box-sizing属性设置盒子的类型，默认值是content-box，是内容盒子，表示width和height的空间全部给内容

属性值border-box，是边框盒子，盒子的边框和内边距产生的空间从width和height里面扣除

7.display属性

块级元素：特点是独占一行，可以识别宽高属性

一个块级元素的实际宽度 = width + border-left/right + padding-left/right + margin-left/right

margin-right属性的默认值是auto，所以，剩余的空间会给margin-right

行级元素：特点是按行显示，一行不够放，会自动换行，不识别宽高属性，它的实际大小还有内容决定

通过display属性，可以设置标签的显示方式，inline表示行内元素，block表示块级元素，none表示不显示

inline-block表示行内块元素，既有块级元素可以识别宽高的特点，又有行内元素在一行显示的特点

8.盒子阴影

盒子阴影：属性值分别是：X轴偏移量 Y轴偏移量模糊半径阴影颜色

box-shadow: 10px 10px 5px blue
第一个属性值设置为inset，表示内阴影

box-shadow:inset 0px 0px 30px blue

9.圆角边框

分别设置4个角的圆角

border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-right-radius: 60px;
border-bottom-left-radius: 80px;

一个属性值是横向宽度，第二个属性值是纵向宽度，这样的圆角就是椭圆圆角

border-top-left-radius: 20px 40px;
border-top-right-radius: 40px 60px;
border-bottom-right-radius: 60px 80px;
border-bottom-left-radius: 80px 100px;

border-radius是缩写属性，可以同时设置：左上右上右下左下，四个角的圆角

border-radius: 20px 40px 60px 80px;

四个角的圆角都设置为50%，就是正圆

border-radius: 50%;

五、浮动

1.float

浮动样式主要用于对块元素的布局

元素一旦浮动起来，就会脱离标准文档流

float属性设置浮动，属性值包括left(左浮动)，right(右浮动)，none(不浮动)

2.clear

用于清除浮动。属性值包括：left(清除左浮动)，right(清除右浮动)，both(清除全部浮动)

3.解决父级边框塌陷

方式一：

在标准文档流中，父级如果不指定高度，高度由子级撑开。

如果子级浮动，父级的边框就会塌陷，第一种解决的方法是：给父级一个明确的高度。

方式二：

在父级的最下面，添加一个不浮动的元素，并清除前面的浮动空间。

方式三：

通过伪元素样式在父级的下面添加块级元素，再利用该块级元素清除前面的浮动，原理根方法2一样。

::after表示在指定的父级的下面，添加元素

::before表示在指定的父级的上面，添加元素

.parent::after{
      /* content属性里面设置添加的元素里面的内容 */
      content: '';
      /* 下面是设置该元素的样式 */
      display: block;
      clear: both;
}

方式四：

给父级添加一个overflow属性，属性值是非visible。

4.overflow

overflow属性，用于设置溢出处理

属性值包括：visible(溢出部分显示，是默认值)

hidden(溢出部分隐藏)

scroll(溢出部分，通过滚动条查看)，如果内容不溢出，还是会出现滚动条的区域

auto(自动，如果内容溢出，出现滚动条；没有溢出，不会出现滚动条区域)

5.overflow配合锚链接

overflow配合锚链接的使用，可以增长一个盒子的实际使用空间

id属性值可以作为锚链接的锚标记使用

6.文本溢出处理

white-space 属性设置空白处理，属性值nowrap，表示设置文本不换行，属性值pre，表示保留空格

overflow 属性是溢出处理，属性值hidden表示溢出部分隐藏

text-overflow 属性设置文本溢出处理，属性值ellipsis表示文本溢出部分显示...

注意：上面的三个属性值缺一不可

overflow:hidden; 
white-space:nowrap; 
text-overflow:ellipsis;

7 多行文本溢出处理

display:-webkit-box; 
overflow:hidden;
text-overflow:ellipsis; 
word-break:break-all;
-webkit-box-orient:vertical; //子元素应该被水平或垂直排列
-webkit-line-clamp:3; //3行后显示省略号

六、定位

1.static

position 是定位属性，属性值包括：static(不定位，默认值)

2.relative

relative(相对定位)，是相对于自己重新定位，通过top，bottom，left，right属性控制定位的偏移量

3.absolute

absolute(绝对定位)。绝对定位是根据离它最近的父级定位元素进行定位

如果它的父级中，没有定位元素，就根据浏览器的视口来定位

注意：绝对定位元素，会脱离标准文档流，所以，它下面的元素会去抢占它原来的位置

通常情况下：一个父容器里的子元素，如果要进行调整位置

父容器先设置为相对定位，并且不设置偏移量，子元素再设置为绝对定位，

这样，子元素就可以在该父元素中精细调整了

4.fixed

fixed(固定定位)。就是根据浏览器的视口进行定位

并且定位后的位置，不会随着浏览器滚动条的滚动而消失

5.z-index

元素定位后，默认情况下，后面的元素会盖住签名的元素

通过z-index属性，可以修改定位元素的层叠顺序，值越小越靠下，值越大越靠上，可以设置负数，默认值0

6.盒子水平和垂直方向居中

/* 子级设置为绝对定位 */
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

非定位元素的实际宽度 = width + border-left + border-right + padding-left + padding-right + margin-left + margin-right

定位元素的实际宽度 = width + border-left + border-right + padding-left + padding-right + margin-left + margin-right + left + right

7.透明度

opacity属性，设置透明度，注意：是设置整个元素的透明度

取值范围是：0-1，0是全透明，1是不透明

8.背景样式补充

设置背景颜色 background-color

设置背景图片 background-image

设置背景平铺方式 background-repeat，默认是X轴和Y轴方向都平铺

设置背景图片的位置 background-position

设置背景图片的大小 background-size

设置背景的填充区域 background-clip

属性值有：

border-box 到边框，默认值

padding-box 到内填充

content-box 到内容

background-origin 只能设置背景图片的填充区域，不能控制背景颜色

background-attachment 设置背景图片的定位方式：

设置属性值为fixed，表示固定背景图片

在缩写属性中，如果同时设置了背景位置和背景大小，方式是：位置 / 大小

background: fixed url() content-box 40px 40px / 600px 400px;

七、补充内容

1.结构伪类选择器：

:first-child 表示指定标签的第一个

注意：这里ul里面的第一个元素如果不是li，该样式失效

ul li:first-child{
      color: red;
}

:last-child 表示指定标签的最后一个

注意：这里ul里面的最后一个元素如果不是li，该样式失效

ul li:last-child{
      color: green;
}

:nth-child(n) 表示指定标签的第n个

odd表示所有的奇数行（也可以用2n-1），even表示所有的偶数行（也可以用2n）

:first-of-type和:first-child的区别是：

:first-child：计算索引时，统计的是所有的子元素

:first-of-type 计算索引时，只统计指定的子元素

:last-of-type和:last-child的区别同上

:nth-of-type和:nth-child的区别同上

2.内嵌框架

iframe 是内嵌框架标签，用于在当前网页中，嵌入另一个完整的网页，通过src属性设置目标网页的地址

frameborder属性设置边框，属性值包括0和1

scrolling属性设置是否显示滚动条，属性值包括no和 yes 和 auto

3.video

video标签，用于播放视频，src属性设置视频路径，controls属性显示控件按钮，autoplay属性设置自动播放，loop属性设置循环播放

通过source子标签，给video标签添加视频路径，好处是，该方式可以同时添加多个视频路径

由于不同浏览器对视频格式的兼容性，存在差异，所以，会导致，指定格式的视频在部分浏览器中无法播放

通常情况下，如果在网页中需要播放视频，会将同一个视频转成多种格式，通过source标签引入

浏览器会挨个加载source标签引入的视频，直到找到一个可以播放的格式

video标签里面的写的其他标签，在浏览器不识别video标签时显示

4.audio

audio是音频标签，用于播放音频，用法根video一样

5.HTML5结构标签

过去，我们在布局网页的时候，全部采用div标签，给div标签定义不同的id名称，

用该id名称去表示它所处的区域是网页的哪一个部分

现在，HTML5给我们新推出了一些，专门用于布局的结构标签：

header 头部

nav 导航

main 主体

aside 侧边栏

section 独立区域（网页中有多个独立区域时，用section）

article 独立内容（网页中只有一个独立区域时，用article）

footer 尾部

fieldset标签，用于设置一个分组区域，通过legend子标签设置分组标题。

八、动画

1.css3-过渡

transition 过渡属性

过渡：css从一种状态变化到另一种状态的过程

transition-property 设置哪些属性，需要过渡效果，可以传多个过渡的属性，使用逗号隔开

例如： transition-property: background-color,width，属性值设置为all，表示过渡全部属性

transition-duration 设置过渡的时间，就是完成整个效果，需要花费的时间，单位可以是秒(s)或者毫秒(ms)

transition-delay 设置过渡之前的等待时间，单位同transition-duration

transition-timing-function 设置过渡的动作函数：

默认值是 ease 表示先快速再慢速

linear 表示匀速

ease-in 表示加速

ease-out 表示减速

ease-in-out 表示先加速再减速

transition是过渡的缩写属性，四个属性值的顺序没有要求，但是如果设置了两个时间，第一个是过渡时间，第二个过渡等待时间

2.css3-动画

animation-name 指定动画的名称（指定一个动画的关键帧名称，就是动画的规则）

animation-duration 指定动画的时间（完成该动画需要多少时间）

animation-delay 动画的延迟播放时间

animation-timing-function 动画的动作函数，ease linear ease-in ease-out ease-in-out

animation-iteration-count 设置动画的播放次数属性值可以给具体的次数，如果设置属性值为infinite，表示无限次数

animation-play-state 表示播放状态，默认值是running(播放) paused(暂停)

animation-direction 表示动画的方向，属性值包括：

normal(正向) reverse(反向) alternate(正反方向重复运动) alternate-reverse(反正方向重复运动)

animation-fill-mode 表示填充模式，其实就是动画结束后，元素的回到什么位置，属性值包括：

backwards(回到原点位置)，在开始动画之前，等待的时间在开始动画处等待，

forwards(停在结束位置)，在开始动画之前，等待的时间在原点位置处等待，

both(综合了上面两个属性的特点)，在开始动画处等待，在动画结束处停止，

animation是缩写属性，具体的属性值，没有顺序要求，如果同时设置动画时间和等待时间，第一个是动画时间，第二个是等待时间

3.关键帧

定义动画的关键帧，关键帧就是动画的规则，在css中，一个动画最多可以拆分成100份

@keyframes move{
    /* from 是动画的起始位置 */
    from{
        left: 0;
    }
    /* to  是动画的结束位置*/
    to{
        left:500px
    }
}

定义动画的关键帧，将动画的规则，拆分成多组

@keyframes move2{
    0%{
        left:100px;
        top: 0;
    }
    25%{
        left: 500px;
        top: 0;
    }
    50%{
        left:500px;
        top:500px
    }
    75%{
        left:0;
        top:500px;
    }
    100%{
        left: 0;
        top:100px;
    }
}

4.css3-变形

transform 是css的变形属性，通过变形函数，设置具体的变形方式

scale()变形函数，设置元素缩放

translate()变形函数，设置元素平移，该函数如果只传一个参数，表示X轴方向平移，如果传两个参数，第二个参数是Y轴方向平移

rotate()变形函数，设置元素旋转。属性值的单位是deg(度数)，也可以是turn(圈)，属性值，正数是顺时针，负数是逆时针

skew()变形函数，设置元素倾斜。该函数如果只传一个参数，表示X轴方向倾斜度数，如果传两个参数，第二个参数是Y轴方向倾斜度数

5.动作函数补充

transition-timing-function 设置动作函数

属性值包括：ease linear ease-in ease-out ease-in-out

动作函数的取值，除了一些常规的属性值，还可以里贝塞尔曲线函数，定义特殊规则的动作

transition-timing-function: cubic-bezier(.22,1.52,.42,-0.72);

通过steps() 函数，可以将一个动作分解成多次运行

animation: move 12s infinite steps(4)

6.3D变形

perspective 属性设置浏览器的视距：就是告诉浏览器平移到眼睛的距离是多少，一般范围我们会控制在600px-1200px

body{
    height: 600px;
    border: 1px solid green;
    perspective: 800px;
}

translateX() 是X轴方向平移

translateY() 是Y轴方向平移

translateZ() 是Z轴方向平移

rotate() 默认是久Z轴方向旋转

rotateZ() 是Z轴方向旋转

rotateX() 是X轴方向旋转

rotateY() 是Y轴方向旋转

3d变形样式 transform-style: preserve-3d;

transform-style: preserve-3d;

transform: rotateY(45deg) rotateZ(-45deg);
animation: love 4s infinite alternate;

visibility属性，用于设置元素的显示方式，属性值包括：hidden（隐藏），visible（显示）

backface-visibility属性，用于设置元素的背面颜色方式

backface-visibility: hidden，表示背面隐藏

九、iconfont

1.字体图标

2.自定义字体类型

@font-face {
    /* 设置字体类型名称 */
    font-family: gjm;
    /* 设置字体类型文件的路径 */
    src: url(./font/郭敬明字体.ttf);
}
div{
    font-size: 50px;
    font-family: gjm;
}

3.CSS绘制三角形

/* 保留上边框，下边框的宽度设为0 */
.a{
    border-color: transparent;
    border-top-color: red;
    border-width: 50px 50px 0 50px;
}
/* 保留右边框，左边框的宽度设为0 */
.b{
    border-color: transparent;
    border-right-color: blue;
    border-width: 50px 50px 50px 0;
}
/* 保留下边框，上边框的宽度设为0 */
.c{
    border-color: transparent;
    border-bottom-color: green;
    border-width: 0 50px 50px 50px;
}
/* 保留左边框，右边框的宽度设为0 */
.d{
    border-color: transparent;
    border-left-color: orange;
    border-width: 50px 0 50px 50px;
}

十、弹性布局

1.弹性盒子

display属性，设置元素的类型，属性值包括：none(不显示)，inline(行内元素)，block(块级元素)，inline-block(行内块元素)

设置display: flex，该盒子就成为了弹性盒子，一旦给一个盒子设置为了弹性盒子，它里面的子元素默认就会横向排列

flex-direction属性设置子元素的排列方向，属性值包括：row(横向) column(纵向) row-reverse(横向反向) column-reverse(纵向方向)

2.子元素的对齐方式

主轴的排列方式，通过justify-content属性控制

属性值包括：flex-start(开始处对齐) flex-end(结束处对齐) center(居中对齐) space-between(平均分布，开始和结束处顶格)，space-around(平均分布，两边留有一半的间隔空间) space-evenly(平均分布，每个元素两端的间隔相等)

辅轴的排列方式，通过align-items属性控制

属性值包括： flex-start(开始处对齐) flex-end(结束处对齐) center(居中对齐) baseline(首行文本的基线对齐) stretch(拉伸对齐)

注意：主轴不一定是横向，排列方向如果是横向，主轴是横向；排列方向如果是纵向，主轴就是纵向

3.子元素的换行方式

flex-wrap属性，设置弹性盒子内，子元素的换行方式

属性值包括： nowrap(不换行) wrap(换行) wrap-reverse(反向换行)

align-content属性，设置子元素换行后，每行元素在辅轴上的对齐方式

注意：一旦设置了align-content，align-items属性就失效了

align-content的属性值包括：flex-start(开始处对齐) flex-end(结束处对齐) center(居中对齐) space-between(平均分布，开始和结束处顶格)，space-around(平均分布，两边留有一半的间隔空间) space-evenly(平均分布，每个元素两端的间隔相等)

总结：不换行，辅轴上的对齐方式用align-items，换行后，辅轴上的对齐方式用 align-content

4.子元素order属性

order属性，用于设置子元素的排列顺序，默认值是1，值越小越靠前，值越大越靠后

5.子元素margin属性

子元素通过margin属性，可以抢占父级的剩余空间作为自己的外边距

6.子元素align-self属性

align-items属性设置所有弹性子元素在辅轴上的对齐方式

align-self属性，用于设置弹性子元素自身在辅轴方向上的对齐方式

属性值包括：flex-start，flex-end，center，baseline，stretch

7.子元素flex属性

flex属性用于指定弹性子元素如何分配空间

.b为flex:5，.c为flex: 1 表示剩余的空间，b占5份，c占1份

十一、移动端

1.什么是像素

什么是像素：就是一个发光点

我们在编写网页的时候，所说的像素，其实是css像素

比如我们的显示器的分辨率是1920*1080，这里的1920是物理像素

一般情况下，一个css像素对应一个物理像素

如果浏览器放大两倍，此时就会是一个css像素对应两个物理像素

在移动端，通常的做法就是一个css像素对应多个物理像素，一般采用的是两个或者三个物理像素

由于我们的显示器，默认是放大125%，所有，在默认浏览器中css像素跟物理像素的比例是 1 : 1.25。1个css像素的宽度对应 1.25个物理像素的宽度

2.移动端网页

在移动端：iphone6手机的分辨率：750*1334（物理像素）

在iphone6中 css像素是375*667，所以，css像素和物理像素的比例是 1 : 2

iphone6Plus手机的分辨率：828*1472

在iphone6Plus中 css像素是414*736，所以，css像素和物理像素的比例是 1 : 2

100vw就表示显示屏全屏宽度，100vh就是表示显示屏全屏高度

在iphone6中 100vw = 375px

1px = 0.266666vw

2.66666vw就相当于10px

5.33333vw就相当于20px

因为字体的最小单位是12px，所以我们将上面的比例再 * 2

font-size: 5.33333vw

em是当前元素字体大小单位

rem是网页根元素字体大小单位

默认情况下，1rem=16px，但是这里的rem已经被我们重新定义过了

1rem=5.33333vw 在iphone6中是20px

html{
    font-size: 5.33333vw 
}
.a{
    width: 100vw;
    height: 100px;
    background-color: red;
}
.b{
    width:5rem;
    height: 5rem;
    background-color: green;
    font-size: 1rem;
}

3.视口

name="viewport"就是设置视口

设置width属性值为device-width，采用设备的宽度

initial-scale=1.0 表示初始缩放比例为1.0

默认情况下，在移动端视口的宽度是980px，根据需要，可以修改视口宽度

如果我们需要将一个pc端的网页，在移动端能够完全打开，通常修改设置固定宽度的视口值

4.媒体查询

媒体查询：让一个网页在不同的设备上都能够正常显示

视口宽度>=1200px 的屏幕称为超大屏

视口宽度>=992px 的屏幕称为大屏

视口宽度>=768px 的屏幕称为中屏

视口宽度>=576px 的屏幕称为小屏

视口宽度<576px 的屏幕称为超小屏

定义媒体查询样式：

screen 表示屏幕

max-width: 1200px 表示最大宽度小于1200px，执行下面的样式

@media screen and (max-width: 1200px) {
    /* 这里面写的都是样式 */
    .a {
        background-color: lightgreen;
        color: white;
    }
}
@media screen and (max-width: 992px) {
    .a{
        background-color: lightblue;
        color: orange;
        font-size: 40px;
    }
}
@media screen and (max-width: 768px) {
    .a{
        background-color: lightsalmon;
        color: orchid;
        font-size: 30px;
    }
}
@media screen and (max-width: 576px) {
    .a{
        background-color: lightseagreen;
        color: pink;
        font-size: 20px;
    }
}