H5新特性
一、語義性標簽
header:頭部區(qū)域
nav: 導航區(qū)域
main： 主體區(qū)域
section:小區(qū)域
aside：側(cè)邊欄
article：正文
footer： 頁尾區(qū)域
以上標簽其實就是div，只不過比div更加具備語義化，是H5中專門用來表示網(wǎng)頁布局結(jié)構(gòu)的標簽
是HTML5的規(guī)范出來以后才有的，那么就意味著會有兼容性問題，IE8和之前的瀏覽器不支持
二、音頻和視頻
1)audio 播放音樂或音頻。IE9以下的版本不支持。
支持的格式 .mp3/.ogg/.wav
屬性
src:文件路徑
autoplay:自動播放
loop:循環(huán)
controls:控制條
muted:靜音
preload:預加載（當使用autoplay時，preload自動失效）
2）video 加載視頻。IE9以下的版本不支持。
a)支持的格式 .mp4/.ogg/.webm
b)屬性
src:文件路徑
autoplay:自動播放
loop:循環(huán)
controls:控制條
muted:靜音
preload:預加載（當使用autoplay時，preload自動失效）
width:寬度
height:高度
poster:海報
三、增強型表單
1.表單組件
1）color：顏色
2）email：郵箱
3）tel：電話號碼
4）url：網(wǎng)址
5）number：數(shù)字
6）range：范圍
7）search：搜索
8）date：日期
9）datetime：日期時間
10）datetime-local：本一日期時間
11）year：年份
12）month：月份
13）time：時間
2.表單交互屬性
1）form-action:修改action數(shù)據(jù)提交的地方
2）form-enctype:修改表單請求的類型
3）form-method:修改數(shù)據(jù)提交的方法
4）autocomplete:自動完成
用來幫助用戶輸入，每一次輸入的內(nèi)容，瀏覽器是否保存輸入的值，以備將來使用。值有： on/off，默認為on。
為了保護敏感數(shù)據(jù)（如用戶帳號、密碼等），避免本地瀏覽器對它們不安全存儲，一般需要關(guān)閉
5）autofocus:自動獲焦
6）placeholder:輸入提示
7）multiple:多選
四、Canvas繪圖
H5原生技術(shù)，基于網(wǎng)頁畫布2D位圖繪圖技術(shù)，善于表現(xiàn)細膩顏色，可用于統(tǒng)計圖表、頁面游戲、地圖應(yīng)用、網(wǎng)頁特效等。
使用Canvas的步驟：
<canvas id="myCanvas" width="400" height="300"></canvas>
Canvas自身是一個300*150的inline-block元素；注意：Canvas畫布尺寸不能使用CSS設(shè)置——會對整個圖像進行扭曲！
使用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 測量文本基于當前字體設(shè)置的寬度
//繪制路徑——概念上類似于PS中的鋼筆工具
cx.beginPath() 開始一條路徑，或重置當前的路徑
ctx.moveTo() 方法把路徑移動到畫布中的指定點，不創(chuàng)建線條
ctx.lineTo() 方法添加一個新點，然后創(chuàng)建從該點到畫布中最后指定點的線條（該方法并不會創(chuàng)建線條）
ctx.arc()
ctx.rect()
ctx.ellipse() 畫橢圓弧函數(shù)
ctx.closePath()
ctx.stroke() 基于現(xiàn)有路徑進行描邊
ctx.fill() 基于現(xiàn)有路徑進行填充
ctx.clip() 基于現(xiàn)有路徑進行裁切
//繪制圖像
ctx.drawImage(img, x, y) 繪制圖像(原始尺寸)
ctx.drawImage(img, x, y, w, h) 繪制圖像(指定尺寸)
//繪圖上下文變形和狀態(tài)保持
ctx.rotate() 圖像旋轉(zhuǎn)
ctx.translate() 圖像平移
ctx.scale() 圖像縮放
ctx.save() 繪圖上下文的保存
ctx.restore() 繪圖上下文的恢復
五、WebStorage
(1)window.sessionStorage：類數(shù)組對象，通過key=>value對存儲字符串數(shù)據(jù)——會話級存儲
特點：一次性儲存，數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除
添加數(shù)據(jù)：sessionStorage['key'] = 'value'
修改數(shù)據(jù)：sessionStorage['key'] = 'newValue'
刪除數(shù)據(jù)：delete sessionStorage['key']
獲得數(shù)據(jù)：var v = sessionStorage['key']
(2)window.localStorage：類數(shù)組對象，通過key=>value對存儲字符串數(shù)據(jù)——本地/跨會話級/永久存儲
長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
特點:數(shù)據(jù)永久存儲，沒有時間限制；大小限制5M(夠用了)；只存儲字符串
添加數(shù)據(jù)：localStorage['key'] = 'value'
修改數(shù)據(jù)：localStorage['key'] = 'newValue'
刪除數(shù)據(jù)：delete localStorage['key']
獲得數(shù)據(jù)：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之后專門提供了七個鼠標拖動相關(guān)事件句柄：實例代碼如下
<div draggable="true" ondragstart="drag(event)"></div>
<!-- draggable="true" 可以拖拽 值為false是不可以拖動 -->
<script>
function drag(event) {
console.log(event);
}
drag(event)
</script>
拖動的源對象(source)可能觸發(fā)的事件：
dragstart：拖動開始
drag：拖動中
dragend：拖動結(jié)束
拖動的目標對象(target)可能觸發(fā)的事件：
dragenter：拖動進入
dragover：拖動懸停
drop：松手釋放
dragleave：拖動離開
注意：拖放API事件句柄中所有的事件對象都有一個dataTransfer屬性（數(shù)據(jù)運輸對象），用于在源對象和目標對象間傳遞數(shù)據(jù)。
源對象：event.dataTransfer.setData(key, value)
目標對象：var value = event.dataTransfer.getData(key)
H5移除元素
純表現(xiàn)的元素
<basefont> 默認字體，不設(shè)置字體，以此渲染
<font> 字體標簽
<center> 水平居中
<u> 下劃線
<big> 大字體
<strike> 中橫線
<tt> 文本等寬
框架集
<frameset>
<noframes>
<frame>
CSS3新特性
##一、偽類選擇器
:nth-of-type :找到
:first-child：找到第一個子元素，它在父元素中也必須是第一個子元素
:last-child：找到最后一個子元素，它在父元素中也必須是最后一個子元素
:nth-child：找到某個子元素
##二、文字陰影(text-shadow)
參數(shù)1：水平偏移
參數(shù)2：垂直偏移
參數(shù)3：模糊度
參數(shù)4：陰影顏色
它的陰影大小是跟文字一樣大的！不可以改陰影大小，除非改文字大小
三、邊框: 圓角(border-radius)
四、盒子陰影 : box-shadow
參數(shù)1：水平偏移位置
參數(shù)2：垂直偏移位置
參數(shù)3：模糊度，值越大越模糊
參數(shù)4：陰影的寬度,哪怕寬度為0其實陰影也有寬度，只不過是跟盒子一樣寬，這個寬度其實是設(shè)置陰影四周再加多少寬度
參數(shù)5：陰影的顏色
參數(shù)6：是否為內(nèi)陰影，加一個inset就是內(nèi)陰影，不加就是外陰影 inset也可以加在最前面，建議加最后
多個陰影之間，用逗號隔開，先寫的陰影，層級最高
五、盒子模型: box-sizing
box-sizing屬性可以指定盒子模型種類，有兩個值
content-box指定盒子模型為W3C（標準盒模型）
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
六、背景:background-size background-origin background-clip
參數(shù)1 URL：背景圖片的路徑，路徑包不包引號都無所謂
參數(shù)2：是否平鋪，默認是repeat代表水平和垂直都平鋪
no-repeat：代表不平鋪，常用
repeat-x：水平方向平鋪
repeat-y：垂直方向平鋪
參數(shù)3：background-origin 背景圖片偏移位置
它需要寫兩個，第一個代表水平對齊，第二個代表垂直對齊
水平對齊：left,right,center
垂直對齊：top,bottom,center
如果希望水平和垂直都居中，可以只寫一個center
除了寫這幾個單詞外，還可以寫偏移的像素位置
水平寫負代表向左，寫正代表向右
垂直寫負代表向上，寫正代表向下
除了寫像素外，還可以寫百分比,用的少
寫正百分比代表向左和向上，給負代表向右和向下
寫百分比跟像素的方向是相反的
參數(shù)4：background-size 指定圖片的大小，它一定要寫在參數(shù)3的后面，而且要加一個/
可以給具體的像素，也可以給盒子的百分比，第一個代表寬，第二個代表高
還有特殊的兩個值：
cover：它一定會讓圖片覆蓋整個盒子，圖片可能會超出
contain：它一定會讓盒子包含住圖片，圖片不會超出
圖片一定不會變形，都是按比例縮放
參數(shù)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屬性
參數(shù)1：漸變的方向
to right： 從左到右
to top： 從下到上
to bottom： 從上到下
to left： 從右到左
to right top： 從左下到右上
to right bottom： 從左上到右下
to left top： 從右下到左上
to left bottom： 從右上到左下
除了可以寫上面的方向，也可以傳入角度,0deg是從下面開始，角度越大，就越順時針旋轉(zhuǎn)方向
參數(shù)2：第一個顏色 可以寫一個百分比，意思是代表在哪個位置結(jié)束
參數(shù)3：第二個顏色 寫可以寫一個百分比，代表在哪個位置開始
如果要指定第二個顏色在哪結(jié)束，那么就需要再寫一個這樣的顏色,然后寫一個百分比就代表它在哪個位置結(jié)束了,至少2個顏色，最多有n個顏色.
八、過渡 : transition 可實現(xiàn)動畫
transition:讓元素變化的時候有動畫效果（過渡效果） */
參數(shù)1：參與過渡的屬性，一般寫all，代表所有屬性都參與過渡，也可以寫其他的，寫什么就代表什么屬性參與過渡
參數(shù)2：過渡的持續(xù)時間，記得要加單位s代表多少秒
參數(shù)3：代表延遲幾秒執(zhí)行（延遲時間）
參數(shù)4：運動曲線 linear勻速 steps(n):分n個步驟
transition加在hover里代表只有懸停時才有過渡效果，寫在默認樣式里代表懸停和移出恢復時都有過渡效果
transition: all 2s .5s linear;
過渡其實是一個復合屬性，由多個屬性連寫的
transition-property: 參與過渡的屬性，寫all之類的
transition-duration: 過渡的持續(xù)時間
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) {…}
響應(yīng)式布局 按設(shè)備寬度自適應(yīng)布局
<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轉(zhuǎn)換;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); /*旋轉(zhuǎn)*/
}
/*變形復合寫法*/
div:hover{
transform: translateX(400px) rotate(360deg) scale(.5);
}
十二、3D轉(zhuǎn)換：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軸旋轉(zhuǎn) */
transform: rotateY(360deg);
/* 延Y軸旋轉(zhuǎn) */
transform: rotateZ(360deg);
/* 延Z軸旋轉(zhuǎn) */
transform: rotate3d(1,0,0,45deg);
/* 綜合寫法：X軸 ，Y軸，Z軸，旋轉(zhuǎn)度數(shù) 自定義了解即可*/
}
</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;
/* 彈性盒換行：換行 */
//設(shè)置主軸方向子元素排列順序
justify-content: flex-start;
/* 從左到右排列 默認的 */
justify-content: flex-end;
/* 從尾部開始排列 不影響子元素排列順序 */
justify-content: center;
/* 從主軸居中對齊 */
justify-content: space-around;
/* 平分主軸剩余空間 */
justify-content: space-between;
/* 兩邊對齊，中間評分剩余空間 */
justify-content: space-evenly;
/* 間距相同 */
}
