H5C3新特性总结(一)
一.H5新增了布局标签
1.新增了布局的属性
新增的属性:
header:头部区域
nav: 导航区域
main： 主体区域
section:小区域
aside：边栏
article：正文
footer： 页尾区域
以上标签其实就是div，只不过比div更加具备语义化，是H5中专门用来表示网页布局结构的标签
是HTML5的规范出来以后才有的，那么就意味着会有兼容性问题，IE8和之前的浏览器不支持
2.上面谈到的兼容性结节方案:其实很简单,判断浏览器是否小于或等于ie8,引入插件(插件名叫html5shiv.js)，就行了,操作如下:
<style>
header{
width: 100px;
height: 100px;
background-color: #f00;
}
style>
二.H5里的自定义属性
1.含义:标签本身不带的属性，你写在标签里就叫自定义属性.
2.h5里规范自定义属性要：data-属性名.
3.怎么JS取值？
取值:只要是自定义属性，那么都可以在JS里通过 元素.dataset[属性名]取到.
4.注意点:
注意：
属性名不用加data-了，它会自动去掉
如果data-后面还有-，会去掉-，并把-后面的首字母大写，但是data-后面的首字母不会大写
简单来说：就是从第二个-后面开始的每个首字母大写
遵循的是驼峰命名法
<body>
<div id="box" data-shengao="185cm" data-tizhong="45kg" data-user-login-name="andy">div>
body>
html>
<script>
//只要你是按H5要求的形式写的自定义属性，那么你可以通过元素.dataset方便的取到每个自定义属性
console.log(box.dataset);//取到全部自定义属性
console.log(box.dataset.shengao);//取到185cm
console.log(box.dataset['shengao']);//取到185cm
console.log(box.dataset['userLoginName']);//andy
script>
三.transition属性
transition:让元素变化的时候有动画效果（过渡效果） */
参数1：参与过渡的属性，一般写all，代表所有属性都参与过渡，也可以写其他的，写什么就代表什么属性参与过渡
参数2：过渡的持续时间，记得要加单位s代表多少秒
参数3：代表延迟几秒执行（延迟时间）
参数4：运动曲线 linear匀速 steps(n):分n个步骤
transition加在hover里代表只有悬停时才有过渡效果，写在默认样式里代表悬停和移出恢复时都有过渡效果
transition: all 2s .5s linear;
过渡其实是一个复合属性，由多个属性连写的
transition-property: 参与过渡的属性，写all之类的
transition-duration: 过渡的持续时间
transition-delay: 过渡的延迟时间
transition-timing-function: 运动曲线
四.classList属性
JS里新增了一个专门操作类的属性叫classList
能够让我们添加一个类、删除一个类、切换一个类没那么麻烦了
classList是一个伪数组，它可以获取到所有的类，每个类都是一个数组的一个元素
从取值的角度就比以前className要方便
add:添加一个类
remove:删除一个类
toggle：切换一个类：原来没有这个类就加上，原来有这个类就去掉
contains：判断是否有某个类，如果有返回true，如果没有返回false
五.box-sizing属性
box-sizing是设置边框是内聚还是外扩,border-box就是内聚,content-box就是外扩，这也是默认值.
六.伪类选择器
:hover：悬停样式
:link：未点击时的样式
:active：点击时的样式
:visited：访问后的样式
这是a标签的四种状态样式，但是上面这四个伪类，一般都是给a用的，只有hover所有元素都用
伪类选择器前面一点有一个冒号
:xxx-child：必须保证在父元素中是第几个子元素
:first-child：找到第一个子元素，它在父元素中也必须是第一个子元素
:last-child：找到最后一个子元素，它在父元素中也必须是最后一个子元素
:nth-child：找到某个子元素
nth-child里可以写任意数字，就代表找到第几个
也可以写n：代表找到所有
还可以写n+m：代表找到从m开始以及后面所有 例：n+3 从3开始
还可以写mn: 代表m的倍数 3n 代表3的倍数
还可以写even：代表偶数
还可以写odd：代表奇数
七.box-shadow盒子阴影属性
盒子阴影
参数1：水平偏移位置
参数2：垂直偏移位置
参数3：模糊度，值越大越模糊
参数4：阴影的宽度,哪怕宽度为0其实阴影也有宽度，只不过是跟盒子一样宽，这个宽度其实是设置阴影四周再加多少宽度
参数5：阴影的颜色
参数6：是否为内阴影，加一个inset就是内阴影，不加就是外阴影 inset也可以加在最前面，建议加最后
多个阴影之间，用逗号隔开，先写的阴影，层级最高
八.text-shadow文字阴影属性
参数1：水平偏移
参数2：垂直偏移
参数3：模糊度
参数4：阴影颜色
它的阴影大小是跟文字一样大的！不可以改阴影大小，除非改文字大小
九.background属性详解
参数1：背景图片的路径，路径包不包引号都无所谓
参数2：是否平铺，默认是repeat代表水平和垂直都平铺
no-repeat：代表不平铺，常用
repeat-x：水平方向平铺
repeat-y：垂直方向平铺
参数3：背景图片偏移位置
它需要写两个，第一个代表水平对齐，第二个代表垂直对齐
水平对齐：left,right,center
垂直对齐：top,bottom,center
如果希望水平和垂直都居中，可以只写一个center
除了写这几个单词外，还可以写偏移的像素位置
水平写负代表向左，写正代表向右
垂直写负代表向上，写正代表向下
除了写像素外，还可以写百分比,用的少
写正百分比代表向左和向上，给负代表向右和向下
写百分比跟像素的方向是相反的
参数4：指定图片的大小，它一定要写在参数3的后面，而且要加一个/
可以给具体的像素，也可以给盒子的百分比，第一个代表宽，第二个代表高
还有特殊的两个值：
cover：它一定会让图片覆盖整个盒子，图片可能会超出
contain：它一定会让盒子包含住图片，图片不会超出
图片一定不会变形，都是按比例缩放
参数5：背景颜色：注意，如果是多张背景图片，那么颜色一定要写在最后
如果多张背景图片，用逗号隔开，另外，最先写的背景图片层级最高，越后面写的层级越低
十.linear-gradient属性
把渐变色不是当背景颜色，而是当背景图片，所以要给background属性
参数1：渐变的方向
to right： 从左到右
to top： 从下到上
to bottom： 从上到下
to left： 从右到左
to right top： 从左下到右上
to right bottom： 从左上到右下
to left top： 从右下到左上
to left bottom： 从右上到左下
除了可以写上面的方向，也可以传入角度,0deg是从下面开始
越大，就越顺时针旋转方向
参数2：第一个颜色 可以写一个百分比，意思是代表在哪个位置结束
参数3：第二个颜色 写可以写一个百分比，代表在哪个位置开始
如果要指定第二个颜色在哪结束，那么就需要再写一个这样的颜色,然后写一个百分比就代表它在哪个位置结束了,至少2个颜色，最多有n个颜色.