[html5新特性總結(jié)]
html5總的來說比html4多了八個(gè)新特性乃戈，但其不支持ie8及ie8以下版本的瀏覽器
一褂痰、語義標(biāo)簽
二、增強(qiáng)型表單
三症虑、視頻和音頻
四缩歪、Canvas繪圖
五、地理定位
六谍憔、拖放API
七匪蝙、WebWorker
一主籍、語義標(biāo)簽
html5語義標(biāo)簽，可以使開發(fā)者更方便清晰構(gòu)建頁面的布局逛球。
下面列舉他的一些常用標(biāo)簽：
<header> 定義了文檔的頭部區(qū)域
<footer> 定義了文檔的尾部區(qū)域
<nav> 定義文檔的導(dǎo)航
<section> 定義文檔中的節(jié)
<main> 定義文檔主內(nèi)容
image
二千元、增強(qiáng)型表單
html5修改一些新的input輸入特性，改善更好的輸入控制和驗(yàn)證
輸入類型 描述:
<color> 主要用于選取顏色
<date> 選取日期
<datetime> 選取日期(UTC時(shí)間)
<month> 選擇一個(gè)月份
<time> 選擇一個(gè)時(shí)間
<number> 數(shù)值的輸入域
<url> url地址的輸入域
html5新增了三個(gè)表單元素
<datalist> 用戶會(huì)在他們輸入數(shù)據(jù)時(shí)看到域定義選項(xiàng)的下拉列表
<progress> 進(jìn)度條颤绕，展示連接/下載進(jìn)度
<meter> 刻度值幸海，用于某些計(jì)量，例如溫度奥务、重量等
html5新增表單屬性
<placehoder> 輸入框默認(rèn)提示文字
<min/max> 設(shè)置元素最小/最大值
<height/wdith> 用于image類型<input>標(biāo)簽圖像高度/寬度
三物独、音頻和視頻
html5提供了音頻和視頻文件的標(biāo)準(zhǔn)，既使用<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()方法來獲取用戶的位置戏羽。以實(shí)現(xiàn)“LBS服務(wù)”
// 獲取文件所在位置
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
拖放是一種常見的特性瞻坝，即捉取對(duì)象以后拖到另一個(gè)位置蛛壳。
在html5中，拖放是標(biāo)準(zhǔn)的一部分所刀，任何元素都能夠拖放。
true是可以拖拽flase是不可以拖拽
<div draggable="true"></div>
當(dāng)元素拖動(dòng)時(shí)捞挥，我們可以檢查其拖動(dòng)的數(shù)據(jù)浮创。
<div draggable="true" ondragstart="drag(event)" class="ruy"></div>
<script>
function drag(event) {
console.log(event);
}
drag(event)
</script>
七、Web Worker
Web Worker可以通過加載一個(gè)腳本文件砌函，進(jìn)而創(chuàng)建一個(gè)獨(dú)立工作的線程斩披，在主線程之外運(yùn)行。
Web Worker的基本原理就是在當(dāng)前javascript的主線程中讹俊，使用Worker類加載一個(gè)javascript文件來開辟一個(gè)新的線程垦沉，
基本使用
起到互不阻塞執(zhí)行的效果，并且提供主線程和新縣城之間數(shù)據(jù)交換的接口：postMessage仍劈、onmessage厕倍。
javascript:
//worker.js
onmessage =function (evt){
var d = evt.data;//通過evt.data獲得發(fā)送來的數(shù)據(jù)
postMessage( d );//將獲取到的數(shù)據(jù)發(fā)送會(huì)主線程
}
css3新特性。
1.選擇器
nth-child(n) 選擇所有在其父元素中第n個(gè)位置的匹配E的子元素贩疙。
nth-last-child(n) 選擇所有在其父元素中倒數(shù)第n個(gè)位置的匹配E的子元素
nth-of-type(n) 選擇父元素中第n個(gè)位置讹弯，且匹配元素的子元素况既。
nth-last-of-type(n) 選擇父元素中倒數(shù)第n個(gè)位置，且匹配E的子元素组民。
last-child 選擇位于其父元素中最后一個(gè)位置棒仍，且匹配E的子元素。
first-of-type 選擇位于其父元素中且匹配E的第一個(gè)同類型的子元素臭胜。
last-of-type 選擇位于其父元素中且匹配E的最后第一個(gè)同類型的子元素莫其。
2 CSS3邊框
用 CSS3，可以創(chuàng)建圓角邊框耸三，添加陰影框乱陡，并作為邊界的形象而不使用設(shè)計(jì)程序
圓角(border-radius)
3.透明度
div {
opacity: 0.1;
}
4.盒陰影
box-shadow 屬性用于向盒子添加一個(gè)或多個(gè)陰影效果。
offset-x：陰影的水平偏移量吕晌。正數(shù)向右偏移蛋褥，負(fù)數(shù)向左偏移。
offset-y：陰影的垂直偏移量睛驳。正數(shù)向下偏移烙心，負(fù)數(shù)向上偏移。
blur：陰影模糊度乏沸，不能取負(fù)數(shù)淫茵。
<!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;
/* 彈性盒換行：不換行 默認(rèn)的 */
flex-wrap: wrap;
/* 彈性盒換行：換行 */
/*設(shè)置主軸方向子元素排列順序*/
justify-content: flex-start;
/* 從左到右排列 默認(rèn)的 */
justify-content: flex-end;
/* 從尾部開始排列 不影響子元素排列順序 */
justify-content: center;
/* 從主軸居中對(duì)齊 */
justify-content: space-around;
/* 平分主軸剩余空間 */
justify-content: space-between;
/* 兩邊對(duì)齊，中間評(píng)分剩余空間 */
justify-content: space-evenly;
/* 間距相同 */
}
6.字體圖標(biāo)
<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.自定義動(dòng)畫 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 可實(shí)現(xiàn)動(dòng)畫
transition:讓元素變化的時(shí)候有動(dòng)畫效果（過渡效果） */
參數(shù)1：參與過渡的屬性蹬跃，一般寫all匙瘪，代表所有屬性都參與過渡，也可以寫其他的蝶缀，寫什么就代表什么屬性參與過渡
參數(shù)2：過渡的持續(xù)時(shí)間丹喻，記得要加單位s代表多少秒
參數(shù)3：代表延遲幾秒執(zhí)行（延遲時(shí)間）
參數(shù)4：運(yùn)動(dòng)曲線 linear勻速 steps(n):分n個(gè)步驟
transition加在hover里代表只有懸停時(shí)才有過渡效果，寫在默認(rèn)樣式里代表懸停和移出恢復(fù)時(shí)都有過渡效果
transition: all 2s .5s linear;
過渡其實(shí)是一個(gè)復(fù)合屬性翁都，由多個(gè)屬性連寫的
transition-property: 參與過渡的屬性碍论，寫all之類的
transition-duration: 過渡的持續(xù)時(shí)間
transition-delay: 過渡的延遲時(shí)間
transition-timing-function: 運(yùn)動(dòng)曲線
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是從下面開始柄慰，角度越大鳍悠，就越順時(shí)針旋轉(zhuǎn)方向 */
/* radial-gradient 的用法 */
background:radial-gradient(circle 100px at 0% 50%, yellow, #009966, purple);
}
</style>
<body>
<div></div>
</body>
</html>
11.盒模型 box-sizing
box-sizing屬性可以指定盒子模型種類，有兩個(gè)值
content-box指定盒子模型為W3C（標(biāo)準(zhǔn)盒模型）
border-box為IE盒子模型（怪異盒模型）
區(qū)別
box-sizing: content-box;
盒子寬度=內(nèi)容寬+padding+border
盒模型寬度=內(nèi)容寬+padding+border+margin
box-sizing: border-box;
盒子寬度=內(nèi)容寬（包含內(nèi)容寬+padding+border）
盒模型寬度=內(nèi)容寬+margin
