[html5新特性总结]
html5总的来说比html4多了八个新特性，但其不支持ie8及ie8以下版本的浏览器
一、语义标签
二、增强型表单
三、视频和音频
四、Canvas绘图
五、地理定位
六、拖放API
七、WebWorker
一、语义标签
html5语义标签，可以使开发者更方便清晰构建页面的布局。
下面列举他的一些常用标签：
<header> 定义了文档的头部区域
<footer> 定义了文档的尾部区域
<nav> 定义文档的导航
<section> 定义文档中的节
<main> 定义文档主内容
image
二、增强型表单
html5修改一些新的input输入特性，改善更好的输入控制和验证
输入类型 描述:
<color> 主要用于选取颜色
<date> 选取日期
<datetime> 选取日期(UTC时间)
<month> 选择一个月份
<time> 选择一个时间
<number> 数值的输入域
<url> url地址的输入域
html5新增了三个表单元素
<datalist> 用户会在他们输入数据时看到域定义选项的下拉列表
<progress> 进度条，展示连接/下载进度
<meter> 刻度值，用于某些计量，例如温度、重量等
html5新增表单属性
<placehoder> 输入框默认提示文字
<min/max> 设置元素最小/最大值
<height/wdith> 用于image类型<input>标签图像高度/宽度
三、音频和视频
html5提供了音频和视频文件的标准，既使用<audio>元素。
音频：<audio src=" "></audio>
<audio controls> //controls属性提供添加播放、暂停和音量控件。
音频：<audio controls> //controls属性提供添加播放、暂停和音量控件。
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
视频：<video src=" "></video>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
四、Canvas绘图
五、地理定位
使用getCurrentPosition()方法来获取用户的位置。以实现“LBS服务”
// 获取文件所在位置
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
else { x.innerHTML = "Geolocation is not supported by this browser."; }
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
getLocation()
showPosition(position)
六、拖放API
拖放是一种常见的特性，即捉取对象以后拖到另一个位置。
在html5中，拖放是标准的一部分，任何元素都能够拖放。
true是可以拖拽flase是不可以拖拽
<div draggable="true"></div>
当元素拖动时，我们可以检查其拖动的数据。
<div draggable="true" ondragstart="drag(event)" class="ruy"></div>
<script>
function drag(event) {
console.log(event);
}
drag(event)
</script>
七、Web Worker
Web Worker可以通过加载一个脚本文件，进而创建一个独立工作的线程，在主线程之外运行。
Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，
基本使用
起到互不阻塞执行的效果，并且提供主线程和新县城之间数据交换的接口：postMessage、onmessage。
javascript:
//worker.js
onmessage =function (evt){
var d = evt.data;//通过evt.data获得发送来的数据
postMessage( d );//将获取到的数据发送会主线程
}
css3新特性。
1.选择器
nth-child(n) 选择所有在其父元素中第n个位置的匹配E的子元素。
nth-last-child(n) 选择所有在其父元素中倒数第n个位置的匹配E的子元素
nth-of-type(n) 选择父元素中第n个位置，且匹配元素的子元素。
nth-last-of-type(n) 选择父元素中倒数第n个位置，且匹配E的子元素。
last-child 选择位于其父元素中最后一个位置，且匹配E的子元素。
first-of-type 选择位于其父元素中且匹配E的第一个同类型的子元素。
last-of-type 选择位于其父元素中且匹配E的最后第一个同类型的子元素。
2 CSS3边框
用 CSS3，可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序
圆角(border-radius)
3.透明度
div {
opacity: 0.1;
}
4.盒阴影
box-shadow 属性用于向盒子添加一个或多个阴影效果。
offset-x：阴影的水平偏移量。正数向右偏移，负数向左偏移。
offset-y：阴影的垂直偏移量。正数向下偏移，负数向上偏移。
blur：阴影模糊度，不能取负数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 300px;
height: 300px;
margin: 100px 100px;
border: 1px solid #CCCCCC;
box-shadow: 0px 0px 20px red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
5.弹性盒display：flex
div {
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;
/* 间距相同 */
}
6.字体图标
<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>
7.媒体查询 多栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./bootstrap/01-jquery.slim.min.js"></script>
<link rel="stylesheet" href="./bootstrap/02-bootstrap.min.css">
<script src="./bootstrap/03-bootstrap.min.js"></script>
<style>
[class^="col"]{
height: 320px;
margin-bottom: 30px;
}
section{
background: rgb(0, 253, 0);
width: 100%;
height: 100%;
max-width: 310px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">
<section></section>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">
<section></section>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">
<section></section>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">
<section></section>
</div>
</div>
</div>
</body>
</html>
8.自定义动画 animate @keyfrom 太极
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bigbox{
width: 400px;
height: 400px;
border: 1px solid #000;
border-radius: 50%;
overflow: hidden;
display: flex;
position: relative;
animation: around 5s linear infinite;
}
@keyframes around{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(180deg);
}
}
.yi-zuo{
width: 200px;
height: 400px;
background: black;
}
.yi-you{
width: 200px;
height: 400px;
background:#fff;
}
.yi-i1{
top: 0;
left: 100px;
position: absolute;
width: 200px;
height: 200px;
background: #000;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.yi-i1 p{
width: 70px;
height: 70px;
background: #fff;
border-radius: 50%;
}
.yi-i2 p{
width: 70px;
height: 70px;
background: #000;
border-radius: 50%;
}
.yi-i2{
bottom: 0;
right: 100px;
position: absolute;
width: 200px;
height: 200px;
background: #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="bigbox">
<div class="yi-zuo">
<section class="yi-i1">
<p></p>
</section>
</div>
<div class="yi-you">
<section class="yi-i2">
<p></p>
</section>
</div>
</div>
</body>
</html>
9.过渡 : 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: 运动曲线
10.渐变： linear-gradient , radial-gradient
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 100px;
height: 100px;
/*从左到右 */
background:linear-gradient(to right ,pink,red);
/* 从下到上 */
background:linear-gradient(to top,pink,red);
/* 从上到下 */
background:linear-gradient(to bottom ,pink,red);
/* 从右到左 */
background:linear-gradient(to left ,pink,red);
/* 从左下到右上 */
background:linear-gradient(to right top ,pink,red);
/* 从左上到右下 */
background:linear-gradient(to right bottom,pink,red);
/* 从右下到左上 */
background:linear-gradient(to left top,pink,red);
/* 从右上到左下 */
background:linear-gradient(to left bottom,pink,red);
/* 除了可以写上面的方向，也可以传入角度,0deg是从下面开始，角度越大，就越顺时针旋转方向 */
/* radial-gradient 的用法 */
background:radial-gradient(circle 100px at 0% 50%, yellow, #009966, purple);
}
</style>
<body>
<div></div>
</body>
</html>
11.盒模型 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
