H5新特性
一、语义性标签
header:头部区域
nav: 导航区域
main： 主体区域
section:小区域
aside：侧边栏
article：正文
footer： 页尾区域
以上标签其实就是div，只不过比div更加具备语义化，是H5中专门用来表示网页布局结构的标签
是HTML5的规范出来以后才有的，那么就意味着会有兼容性问题，IE8和之前的浏览器不支持
二、音频和视频
1)audio 播放音乐或音频。IE9以下的版本不支持。
支持的格式 .mp3/.ogg/.wav
属性
src:文件路径
autoplay:自动播放
loop:循环
controls:控制条
muted:静音
preload:预加载（当使用autoplay时，preload自动失效）
2）video 加载视频。IE9以下的版本不支持。
a)支持的格式 .mp4/.ogg/.webm
b)属性
src:文件路径
autoplay:自动播放
loop:循环
controls:控制条
muted:静音
preload:预加载（当使用autoplay时，preload自动失效）
width:宽度
height:高度
poster:海报
三、增强型表单
1.表单组件
1）color：颜色
2）email：邮箱
3）tel：电话号码
4）url：网址
5）number：数字
6）range：范围
7）search：搜索
8）date：日期
9）datetime：日期时间
10）datetime-local：本一日期时间
11）year：年份
12）month：月份
13）time：时间
2.表单交互属性
1）form-action:修改action数据提交的地方
2）form-enctype:修改表单请求的类型
3）form-method:修改数据提交的方法
4）autocomplete:自动完成
用来帮助用户输入，每一次输入的内容，浏览器是否保存输入的值，以备将来使用。值有： on/off，默认为on。
为了保护敏感数据（如用户帐号、密码等），避免本地浏览器对它们不安全存储，一般需要关闭
5）autofocus:自动获焦
6）placeholder:输入提示
7）multiple:多选
四、Canvas绘图
H5原生技术，基于网页画布2D位图绘图技术，善于表现细腻颜色，可用于统计图表、页面游戏、地图应用、网页特效等。
使用Canvas的步骤：
<canvas id="myCanvas" width="400" height="300"></canvas>
Canvas自身是一个300*150的inline-block元素；注意：Canvas画布尺寸不能使用CSS设置——会对整个图像进行扭曲！
使用H5 Canvas API进行绘图：(代码如下)
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
属性：
//绘制矩形
ctx.fillStyle = '#000' 填充颜色/渐变色对象
ctx.strokeStyle = '#000' 描边颜色/渐变色对象
ctx.lineWidth = 1 描边线宽度
ctx.fillRect(x, y, w, h)： 填充矩形
ctx.strokeRect(x, y, w, h)： 描边矩形
ctx.clearRect(x, y, w, h)： 描边矩形
//绘制文本
ctx.font = '10px sans-serif'
ctx.textBaseline = 'alphabetic/top/bottom'
ctx.fillStyle = '#000'
ctx.strokeStyle = '#000'
ctx.fillText(txt, x, y) 填充文本
ctx.strokeText(txt, x, y) 描边文本
ctx.measureText(txt).width 测量文本基于当前字体设置的宽度
//绘制路径——概念上类似于PS中的钢笔工具
cx.beginPath() 开始一条路径，或重置当前的路径
ctx.moveTo() 方法把路径移动到画布中的指定点，不创建线条
ctx.lineTo() 方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）
ctx.arc()
ctx.rect()
ctx.ellipse() 画椭圆弧函数
ctx.closePath()
ctx.stroke() 基于现有路径进行描边
ctx.fill() 基于现有路径进行填充
ctx.clip() 基于现有路径进行裁切
//绘制图像
ctx.drawImage(img, x, y) 绘制图像(原始尺寸)
ctx.drawImage(img, x, y, w, h) 绘制图像(指定尺寸)
//绘图上下文变形和状态保持
ctx.rotate() 图像旋转
ctx.translate() 图像平移
ctx.scale() 图像缩放
ctx.save() 绘图上下文的保存
ctx.restore() 绘图上下文的恢复
五、WebStorage
(1)window.sessionStorage：类数组对象，通过key=>value对存储字符串数据——会话级存储
特点：一次性储存，数据在浏览器关闭后自动删除
添加数据：sessionStorage['key'] = 'value'
修改数据：sessionStorage['key'] = 'newValue'
删除数据：delete sessionStorage['key']
获得数据：var v = sessionStorage['key']
(2)window.localStorage：类数组对象，通过key=>value对存储字符串数据——本地/跨会话级/永久存储
长期存储数据，浏览器关闭后数据不丢失;
特点:数据永久存储，没有时间限制；大小限制5M(够用了)；只存储字符串
添加数据：localStorage['key'] = 'value'
修改数据：localStorage['key'] = 'newValue'
删除数据：delete localStorage['key']
获得数据：var v = localStorage['key']
六、地理定位 HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
<body>
<div>
<div id="demo">
</div>
</div>
<script>
var x=document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="该浏览器不支持获取地理位置。";}
}
function showPosition(position) {
x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
}
getLocation();
</script>
</body>
七、拖拽
H5之前没有拖放API，可以使用“鼠标按下 + 鼠标移动”两个事件来模拟用户拖动事件。
H5之后专门提供了七个鼠标拖动相关事件句柄：实例代码如下
<div draggable="true" ondragstart="drag(event)"></div>
<!-- draggable="true" 可以拖拽 值为false是不可以拖动 -->
<script>
function drag(event) {
console.log(event);
}
drag(event)
</script>
拖动的源对象(source)可能触发的事件：
dragstart：拖动开始
drag：拖动中
dragend：拖动结束
拖动的目标对象(target)可能触发的事件：
dragenter：拖动进入
dragover：拖动悬停
drop：松手释放
dragleave：拖动离开
注意：拖放API事件句柄中所有的事件对象都有一个dataTransfer属性（数据运输对象），用于在源对象和目标对象间传递数据。
源对象：event.dataTransfer.setData(key, value)
目标对象：var value = event.dataTransfer.getData(key)
H5移除元素
纯表现的元素
<basefont> 默认字体，不设置字体，以此渲染
<font> 字体标签
<center> 水平居中
<u> 下划线
<big> 大字体
<strike> 中横线
<tt> 文本等宽
框架集
<frameset>
<noframes>
<frame>
CSS3新特性
##一、伪类选择器
:nth-of-type :找到
:first-child：找到第一个子元素，它在父元素中也必须是第一个子元素
:last-child：找到最后一个子元素，它在父元素中也必须是最后一个子元素
:nth-child：找到某个子元素
##二、文字阴影(text-shadow)
参数1：水平偏移
参数2：垂直偏移
参数3：模糊度
参数4：阴影颜色
它的阴影大小是跟文字一样大的！不可以改阴影大小，除非改文字大小
三、边框: 圆角(border-radius)
四、盒子阴影 : box-shadow
参数1：水平偏移位置
参数2：垂直偏移位置
参数3：模糊度，值越大越模糊
参数4：阴影的宽度,哪怕宽度为0其实阴影也有宽度，只不过是跟盒子一样宽，这个宽度其实是设置阴影四周再加多少宽度
参数5：阴影的颜色
参数6：是否为内阴影，加一个inset就是内阴影，不加就是外阴影 inset也可以加在最前面，建议加最后
多个阴影之间，用逗号隔开，先写的阴影，层级最高
五、盒子模型: box-sizing
box-sizing属性可以指定盒子模型种类，有两个值
content-box指定盒子模型为W3C（标准盒模型）
border-box为IE盒子模型（怪异盒模型）
区别
box-sizing: content-box;
盒子宽度=内容宽+padding+border
盒模型宽度=内容宽+padding+border+margin
box-sizing: border-box;
盒子宽度=内容宽（包含内容宽+padding+border）
盒模型宽度=内容宽+margin
六、背景:background-size background-origin background-clip
参数1 URL：背景图片的路径，路径包不包引号都无所谓
参数2：是否平铺，默认是repeat代表水平和垂直都平铺
no-repeat：代表不平铺，常用
repeat-x：水平方向平铺
repeat-y：垂直方向平铺
参数3：background-origin 背景图片偏移位置
它需要写两个，第一个代表水平对齐，第二个代表垂直对齐
水平对齐：left,right,center
垂直对齐：top,bottom,center
如果希望水平和垂直都居中，可以只写一个center
除了写这几个单词外，还可以写偏移的像素位置
水平写负代表向左，写正代表向右
垂直写负代表向上，写正代表向下
除了写像素外，还可以写百分比,用的少
写正百分比代表向左和向上，给负代表向右和向下
写百分比跟像素的方向是相反的
参数4：background-size 指定图片的大小，它一定要写在参数3的后面，而且要加一个/
可以给具体的像素，也可以给盒子的百分比，第一个代表宽，第二个代表高
还有特殊的两个值：
cover：它一定会让图片覆盖整个盒子，图片可能会超出
contain：它一定会让盒子包含住图片，图片不会超出
图片一定不会变形，都是按比例缩放
参数5：background-color 背景颜色
注意，如果是多张背景图片，那么颜色一定要写在最后
如果多张背景图片，用逗号隔开，另外，最先写的背景图片层级最高，越后面写的层级越低
七、渐变: linear-gradient , radial-gradient
background:linear-gradient(to right, yellow, purple)
background:radial-gradient(circle 100px at 0% 50%, yellow, #009966, purple);
把渐变色不是当背景颜色，而是当背景图片，所以要给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个颜色.
八、过渡 : 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: 运动曲线
九、自定义动画 animate @keyfrom
div {
width: 100px;
height: 100px;
background: pink;
/* margin: 20px auto; */
/* 使用动画 */
animation: width 1s linear infinite alternate ;
}
/* 定义动画 */
/* @keyframes width {
0% {
width: 100px;
}
100% {
width: 300px;
} */
十、媒体查询 多栏布局 @media screen and (width:800px) {…}
响应式布局 按设备宽度自适应布局
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/567.css" media="screen and (max-width:567px)">
<link rel="stylesheet" href="./css/568.css" media="screen and (min-width:568px)">
<link rel="stylesheet" href="./css/768.css" media="screen and (min-width:768px)">
<link rel="stylesheet" href="./css/992.css" media="screen and (min-width:992px)">
<link rel="stylesheet" href="./css/1200.css" media="screen and (min-width:1200px)">
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 100%;
height: 300px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
十一、2D转换;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
div {
width: 200px;
height: 200px;
background: pink;
/* transform: translate(10px,20px); */
/* 变形：移动（x轴，y轴) 不影响其他元素和布局*/
/* transform: translateX(100px); */
/* X轴方向移动 不影响其他元素和布局*/
/* transform: translateY(100px); */
/* Y轴方向移动 不影响其他元素和布局 */
}
div:hover{
transform: rotate(1600deg); /*旋转*/
}
/*变形复合写法*/
div:hover{
transform: translateX(400px) rotate(360deg) scale(.5);
}
十二、3D转换：transform: translate3d(x,y) rotate3d(x,y) scale3d(x,y)
<style>
body{
perspective: 200px;
/* 透视：视距d 眼睛到屏幕的距离 距离越小图像越大 距离越大图像越小
透视必须加给观察元素的父级*/
}
div{
width: 200px;
height: 200px;
background: pink;
transform: translate3d(400px,100px,100px);
/* 变形：移动3d(x轴，y轴，z轴) 中间用逗号隔开 如果其中一个值没有就写0，z轴用px单位 z轴正值越大看到的图像越大 */
}
img{
display: block;
margin: 100px auto;
transition:all 3s linear;
}
img:hover{
transform: rotateX(360deg);
/* 延X轴旋转 */
transform: rotateY(360deg);
/* 延Y轴旋转 */
transform: rotateZ(360deg);
/* 延Z轴旋转 */
transform: rotate3d(1,0,0,45deg);
/* 综合写法：X轴 ，Y轴，Z轴，旋转度数 自定义了解即可*/
}
</style>
十三、字体图标 font-face 代码如下
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?85t4ic');
src: url('fonts/icomoon.eot?85t4ic#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?85t4ic') format('truetype'),
url('fonts/icomoon.woff?85t4ic') format('woff'),
url('fonts/icomoon.svg?85t4ic#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
div {
position: relative;
width: 200px;
height: 50px;
border: 1px solid #000;
margin: 20px auto;
}
div::after{
position: absolute;
top: 15px;
left: 20px;
font-family: 'icomoon';
content: "\e900";
}
div::before {
position: absolute;
top: 15px;
right: 20px;
font-family: 'icomoon';
content: "\e912";
}
</style>
十四、弹性布局flex
div{
width: 300px;
height: 300px;
border: 1px solid #000;
display: flex;
flex-direction: row;
/*弹性盒方向：主轴方向X轴 */
flex-direction: column;
/* 弹性盒方向：主轴Y轴方向 */
flex-direction: row-reverse;
/* 弹性盒方向：主轴方向X轴 倒叙 */
flex-direction: column-reverse;
/* 弹性盒方向：主轴Y轴方向 倒叙*/
flex-wrap: nowrap;
/* 弹性盒换行：不换行 默认的 */
flex-wrap: wrap;
/* 弹性盒换行：换行 */
//设置主轴方向子元素排列顺序
justify-content: flex-start;
/* 从左到右排列 默认的 */
justify-content: flex-end;
/* 从尾部开始排列 不影响子元素排列顺序 */
justify-content: center;
/* 从主轴居中对齐 */
justify-content: space-around;
/* 平分主轴剩余空间 */
justify-content: space-between;
/* 两边对齐，中间评分剩余空间 */
justify-content: space-evenly;
/* 间距相同 */
}
