目录
# HTML5
## 一、HTML5简介
> HTML5是html的最新的标准（版本）
- 浏览器支持：ie9+对html5新特性部分支持，新的主流浏览器（chrome、火狐\safari）
- 向前向后兼容，语法变化：
- 标签可以自动闭合
- 属性值可以省略引号
- 属性值和属性名相同，可以省略属性值
- 引入样式表link标签可以省略type
- *增加了语义化标签、智能表单、音频视频（多媒体）、canvas绘图、svg矢量图、地理定位、web存储
- 删除掉一些标签
## 二、新增语义化标签
### 结构化标签（块级）
- 1、header标签
> 定义整个网页的头或者是某个模块的头部，一般放顶部导航、logo、标题、搜索栏等
- 2、footer标签
> 定义整个网页的底部或者是某个模块的底部，一般放版权信息，联系方式，底部导航等。
- 3、main标签（ie不兼容，不建议用）
> 定义整个页面的主体部分，建议只使用一次
- 4、article标签
> 定义页面中独立的文章区域：博客，新闻，评论...
- 5、nav标签
> 定义各种导航：顶部导航，底部导航，侧导航，翻页导航，路径导航等
- 6、section标签
> 定义页面内容的分区或者文章的分节，一般section里面由标题和内容组成
- 7、aside标签
> 定义和主题内容相关性不大的内容，比如侧边栏广告，推荐，侧边栏导航等
- 8、hgroup标签
> 定义标题组，把主标题和副标题组合在一起
- 9、figure标签
> 定义文章或者模块中独立的图片、图表、照片等
> 一个figure可以包含多个图片
- 10、figcaption 标签
> 和figure搭配使用，为图片提供标题
> 一个figure只能包含一个figcaption标题
### 三、其他标签
1、time标签
> 定义时间，行内标签
```
<p>今天是<time datetime="2020/4/1">愚人节</time></p> //如果不是直接包含的时间字符串，需要用datetime属性给time标签定义具体的时间
<p> 双十一开抢时间<time>2020/11/11 11:11:11</time></p> // 如果time标签之间写的是具体的时间，就不需要加datetime属性
```
2、mark标签
> 定义带标记的文本(高亮显示)，行内标签
### 四、兼容处理
> 因为新的语义化标签在ie低版本中会解析错误，样式布局不能正常展示
- 解决方法：
- 方法一：
1、通过js创建新增的标签
```
document.createElement('header');
document.createElement('footer');
document.createElement('nav');
...
```
2、把结构化标签转换成块级
```
header,footer,nav...{
display:block;
}
```
- 方法二：
> 引入html5shiv.js插件 https://www.bootcdn.cn/html5shiv/
```
<!--[if ie]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv-printshiv.js"></script>
<![endif]-->
```
## 五、表单新特性
### 1、新增的表单元素
>1) color类型 ：颜色选取框 <input type="color" name="color">
>2) datetime类型：日期输入框 <input type="datetime" name="datetime">
>3) datetime-local类型： 本地日期时间输入框(年/月/日 小时：分钟)，自带日历操作控件，可输入可选择，格式比较规范
> <input type="datetime-local" name="datetime-local">
>4) date类型： 日期输入框（年/月/日），自带日历操作控件，可输入可选择，格式比较规范
> <input type="date" name="date">
>5) month类型： 月份输入框（年/月），自带日历操作控件，可输入可选择，格式比较规范
> <input type="month" name="month">
>6) week类型： 一年中的第n周，自带日历操作控件，可输入可选择，格式比较规范
> <input type="week" name="week">
>7) time类型：输入时间（小时：分钟） ，可以输入和使用箭头加减
> <input type="time" name="time">
>8) email类型：输入邮箱格式的字符串，内置了邮箱格式规则验证
> <input type="email" name="email">
>9) number 类型：输入数字，无法输入数字以外的字符，在移动端自动调出数字键盘
> <input type="number " name="number ">
>10) tel类型： 输入电话, 没有规则验证，可以输入任意字符
> <input type="tel " name="tel">
>11) url类型： 输入网址格式的字符串，内置了网址格式规则验证
> <input type="url" name="url">
>12) search类型： 搜索输入框，自带快速清空内容的 “×” 号
> <input type="search" name="search">
>13) range类型： 获得一个数值，在一个范围内用滑块去操作
> <input type="range" name="range">
>14) datalist标签：专门给输入框提供选项列表
> <input type=" datalist" name=" datalist">
- list属性用来绑定对应的列表
```
<input type="text" list="list1">
<datalist id="list1">
<option value="AA">aa</option>
<option value="BB">bb</option>
<option value="CC">cc</option>
</datalist>
```
### 2、新增属性
- 1、list属性：用来给输入框绑定对应的列表
- 2、min、max属性：分别定义number或者range类型的最小值和最大值
- 3、step 属性：用来定义number或者range类型的加减步长
```
<input type="number" min="0" max="10" step="2">
```
- 4、required 属性 ： 把表单元素设置位必填项
```
<input type="text" required>
```
- 5、pattern 属性：用来定义表单输入的内容的规则
```
<input type="tel" pattern="1[356789][0-9]{9}" name="tel">
```
- 6、placeholder属性： 给输入框定义提示占位符，当输入内容时消失，输入框为空的时候显示有value就不会显示
```
<input type="text" placeholder="请输入。。。">
```
- 7、autofocus 属性: 设置表单元素自动获得焦点,一般只能设置一个自动获得焦点的元素
```
<input type="text" autofocus>
```
- 8、autocomplete 属性：设置表单元素的自动补全功能，on表示开启，off表示关闭
```
<input type="text" autocomplete="on">
```
- 9、form属性： 给表单元素定义所属的表单域（form），用于把表单元素放在form以外时指定随哪个表单域一起提交数据
```
<input type="text" form="loginForm">
<form id="loginForm">
</form>
```
- 10、multiple属性： 设置文件域和下拉列表支持多选
```
<input type="file" multiple>
<select multiple /size="2">
</select>
```
* 注意： 新表单类型和属性在ie中支持情况不好，并且目前没有比较好的解决方案，pc端项目避免使用，目前主要是流行在移动端
## 六、多媒体
```
音频
<audio src="" controls loop muted></audio>
视频
<video src="" controls loop muted width="" height="" poster=""></video>
```
### 1、音频 audio
```
<audio src="./videoAudio/hanmai.mp3" controls loop></audio>
```
> 属性：
- src="资源路径"： 用来引入音频文件的地址
- controls : 用来调出控制器（播放暂停、进度、音量）
- loop : 用来设置音频为循环播放
- muted: 规定音频默认静音
### 2、视频
```
<video src="./videoAudio/movie.mp4" width="800" controls loop poster="./img/pic.png"></video>
```
>属性：
- src="资源路径"： 用来引入视频文件的地址
- controls : 用来调出控制器（播放暂停、进度、音量、全屏，画中画）
- loop : 用来设置视频为循环播放
- muted: 规定视频默认静音
- width: 规定视频宽度
- height: 规定视频高度
- poster: 规定视频没有播放时显示的广告图（海报）
### 3、音视频资源 source标签
> 为音频和视频提供多种格式的资源文件，浏览器会识别第一个能够支持的视频格式进行播放
```
<audio controls>
<source src="../0401/videoAudio/nada.wav" type="audio/wav">
<source src="../0401/videoAudio/butterfly.ogg" type="audio/oggg">
<source src="../0401/videoAudio/hanmai.mp3" type="audio/mp3">
您的浏览器不支持音频
</audio>
```
## 七、删除的标签(了解)
```
font
basefont
center
big
s
u
strike
dir
```
# CSS3
## 一、CSS3简介
>是CSS的最新版本，在CSS2.1基础上进行增补与修改。
1、 CSS3新增模块 （记住）
- 选择器、边框属性、背景属性、文本效果、2D/3D转换、动画、多列、弹性盒布局、用户界面
2、浏览器兼容情况： ie9+、标准浏览器新版本
3、 渐进增强、优雅降级
- 渐进增强： 针对低版本的浏览器构建页面，保证最基本的功能，然后再针对高版本的浏览器进行效果和交互的优化，从而达到一个良好的用户体验
- 优雅降级：一开始就实现一个良好的体验和完整的功能，再针对低版本浏览器做兼容处理
4、 浏览器私有前缀
> 浏览器私有前缀是浏览器厂商为了表示对一些css3属性提前支持，但是属性尚未成为标准，如果属性成为标准之后，就不需要再加前缀
```
-webkit- : 老版本chrome、safari
-moz- : 火狐浏览器
-o-: 欧鹏浏览器
-ms- : IE浏览器
```
> 自动添加私有前缀的插件 Autoprefixer
> 用法： 编写.css 文件，然后 F1 -- > Autoprefixer:run
## 二、新增选择器（权值为10）
### 1、属性选择器
- css2的属性选择器
- 1、[attr] : 选择带有attr属性的标签
- 2、[attr=val]: 选择attr属性值等于val的标签
- 3、[attr~=val]: 选择attr属性值词列表中包含val完整单词的标签
```
<div class="box" id="box1" ></div>
<div class="red" flag="1"></div>
<div class="green"></div>
<p class="p1"></p>
<input type="text">
div[id=box1]{ /* 11 */
border: 2px solid blue;
}
div[flag]{
background-color: red;
}
div[class=red]{
border:3px solid yellow
}
input[type=text]{
border: 2px solid red;
}
li[class~=red]{
background-color: turquoise;
}
li[flag~=hello]{
border: 2px solid purple;
}
```
- css3的属性选择器
- 1、[attr^=val]: 选择attr属性值以val开头的标签
- 2、[attr$=val]: 选择attr属性值以val结尾的标签
- 3、[attr*=val]: 选择attr属性值里面包含val字符的标签
```
a[href^=http]{
color: chartreuse;
}
a[href$=html]{
color: cyan;
}
[class*=box]{
color: red;
font-size: 30px;
}
[class*=red]{
border: 2px solid pink;
}
[class*=e]{
background-color: cyan;
}
<a href="http://www.baidu.com">aaaa</a>
<a href="./1、音视频资源.html">bbbb</a>
<a href="http://www.ujiuye.com">bbbb</a>
<div class="box redbox">1</div>
<div class="box1 red">2</div>
<div class="box2 aared">3</div>
```
### 2、结构伪类选择器
- 1、:first-child: 选择同级元素中的第一个
- 2、:last-child : 选择同级元素中的最后一个
- 3、:nth-child(n): 选择同级元素中的第n个
- :nth-child(2n) : 选择同级元素中第偶数个元素
- :nth-child(2n+1) : 选择同级元素中第奇数个元素
- 4、:nth-last-child(n) : 选择同级元素中的倒数第n个
- 5、:first-of-type : 选择同级同种类型标签中的第一个
- 6、:last-of-type: 选择同级同种类型标签中的最后一个
- 7、:nth-of-type(n) : 选择同级同种类型标签中的第n个
- 8、:nth-last-of-type(n): 选择同级同种类型标签中的倒数第n个
```
.box span:first-child{}---无空格是找.box下第一个子元素是span
.box span :first-child{}---有空格是找.box 下span里的第一个子元素
```
### 3、表单状态伪类选择器
- :enabled 选择可用状态的表单元素
- :disabled 选择禁用状态的表单元素
- :checked 选中状态的单选和复选框
- ::selection 选择用户选中的元素部分内容
## 三、新增背景属性
css2：
background-color
background-image
background-repeat
background-postion
- 1、多背景
```
background-image: url(""),url("");//设置多个背景图片，顺序越靠前，层级越高
background-repeat: no-repeat,repeat; /* 两个图片的重复属性不同 */
background-repeat: no-repeat; /* 两个图片的重复属性相同 */
background-position: right top, center; /* 两个图片的定位属性不同 */
background-position: center; /* 两个图片的定位属性相同 */
```
```
多背景简写:
background:url(...) no-repeat center,url(...) repeat-x left bottom,...;
```
- 2、背景尺寸
> background-size
- length : 宽度（500px） 高度（300px） , 一个值表示设置宽度，高度自动
- 百分比：参考盒子的尺寸， 宽度（50%） 高度（100%） , 一个值表示设置宽度，高度自动
- cover : 覆盖 ,图片会等比例缩放，直到能够覆盖整个盒子，但是有可能图片无法完全显示
- contain ： 包含 ，图片会等比例缩放，直到图片刚好被完全包含进来，但是有可能盒子没有完全覆盖
- 3、背景图片初始位置
> background-origin
- border-box : 背景图片从边框区域开始显示，并且从边框开始计算定位
- padding-box :默认值， 背景图片从内边距区域开始显示，并且从内边距开始计算定位
- content-box: 背景图片从内容框区域开始显示，并且从内容框开始计算定位
- 4、背景裁切
> background-clip
- border-box : 默认值，边框以外背景被裁切
- padding-box : 内边距以外背景被裁切
- content-box : 内容区以外背景被裁切
>* 新增的背景属性不能用background属性简写
## 四、渐变
> 渐变不是一个颜色模式，专门用来修饰盒子背景
可以设置给：background、background-image
不能设置给：background-color
- 1、线性渐变
> linear-gradient(direction,color-start,color-stop,color-stop...)
```
background: linear-gradient(to right,red,#ff0 20%,rgb(0,255,0) 50%,blue);
```
- direction : 渐变方向
- to bottom :默认值 ，从上到下渐变
- to top : 从下到上
- to right : 从左到右
- to left : 从右到左
- to top right : 从左下到右上
- to left bottom : 从右上到左下
- angle度数 : 0deg 从下到上 45deng 左下到右上 ...
...
- color-start :起始颜色
- color-stop : 渐变停止的位置
```
重复的线性渐变
repeating-linear-gradient(direction,color-start,color-stop,color-stop);
最后一个颜色值不到百分之百，后面剩余的空间就会重复前面的渐变效果
background: repeating-linear-gradient(to right,red,yellow 20%);
```
```
多组渐变
background: linear-gradient(red,rgba(255,255,0,0.5)),linear-gradient(to right,blue,green),...;
```
- 2、径向渐变
> radial-gradient((cx cy),（rx ry),color-start, color-stop...);
> 加上webkit私有前缀才能兼容半径和圆心的设置
```
background: -webkit-radial-gradient(0% 100%,100% 50%,red,yellow,green);
```
- 圆心位置(cx cy): 水平和垂直座标
- 取值可以是 长度值（100px 100px）/百分比 (100% 50%)/关键词 (left top)
- 半径（rx ry) : 水平和垂直半径长度
- 取值可以是：长度值（100px 100px）/百分比 (100% 50%)
```
重复径向渐变
repeating-radial-gradient((cx cy),(rx ry),color-start, color-stop...)
如果最后一个颜色值不到100%，剩下的空间就会重复前面渐变
```
```
多组径向渐变
background: radial-gradient(red,rgba(255,255,0,0.5)),radial-gradient(to right,blue,green),...;
```
## 五、用户界面
1、resize 是否允许用户缩放元素尺寸
> 需要配合overflow:auto/hidden/scroll属性，才能生效
```
取值：
none : 不允许用户缩放
both : 水平和垂直都可以缩放
vertical: 垂直缩放
horizontal: 水平缩放
通常用来取消多行文本域用户可改变尺寸效果 `textarea{resize:none}
```
2、box-sizing
> 用来规定盒子的盒模型的计算方式
```
content-box（标准盒): 默认值,盒子实际占位宽 width + 左右padding + 左右border ,三者共同决定
border-box （怪异盒）: 盒子的实际宽只由width属性决定，添加padding和border会压缩内容区宽度，而盒子整体大小不变
```
## 六、多列布局
> css3提供的一种布局方式，能够快速实现类似于报纸布局那样的多列效果
- 1、column-count: 设置多列列数
- 2、column-width: 设置每一列的列宽 ，不方便精准控制列宽和列数，比较少用
- 3、column-gap: 设置两列之间的间距
- 4、column-rule: 设置两列之间的分界线 ， 语法同边框