html5中新增加的屬性有placeholder、calendar、date、time、email、url、search、Hidden等；新增加的元素有header、footer、nav、article、canvas、svg、video等。

本教學操作環境：windows7系統、HTML5版、Dell G3電腦。

html5–多用於行動端

新增的屬性

• placeholder

• calendar, date, time, email, url, search

• contentEditable(來描述標籤中的內容是否可編輯)

• Draggable

• Hidden

• Context-menu

• Data-val(自定義屬性)

新增的標籤

• 語意化標籤(一群類似div的東西)

• canvas(畫板)

• svg(也算是一個畫板)

• audio(聲音播放)

• video(視訊播放)—html5之前一般都用flash–現在flash使用比較少，現在adobe停止維護

API

• a. 定位(需要地理位置的功能)

• b. 重力感應(手機中要有陀螺儀)

• c. request-animation-frame(動畫優化)

• d. History(控制當前頁面的瀏覽記錄)

• e. LocalStorage–一直存在，SessionStorage(儲存資訊，比如歷史最高記錄，聊天記錄-存在本地)–>頁面關了就沒了

• f. websocket–用來做通訊的(可用於線上聊天，聊天室)

• g. fillReader(檔案讀取和預覽)

• h. webWorker(檔案的非同步處理–用來提升效能，提升互動體驗)

• i. fetch(傳說中要替代AJAX的東西，相容性不太好，使用的公司不多)

屬性篇

input的新type

• placeholder

<input type='text' placeholder='請輸入使用者名稱'>
<input type='password' placeholder='密碼'>

• calendar類

<input type='date'><!--相容性不好，chrome支援，safari，IE不支援-->
<input type='time'>
<input type='week'>
<input type='datatime-local'><!--把年月日事件結合在一起填寫的框-->
<!-- 上述關於時間的標籤不怎麼常用，相容性不好 -->
<!-- 上面為calendar類 -->
<br>
<input type='number'><!--限制輸入，如果非數位則無法輸入，但是隻有chrome支援-->

<input type='email'><!--格式不正確的話會提示錯誤，只有chrome和Firefox支援-->
<input type='color'><!--顏色選擇器 只有chrome支援-->
<input type='range' min='' max='' name="">
<!--chrome和safari支援，火狐和IE 不支援-->
<input type='search' name='search'>
<!-- 自動提示 , 只有chrome支援，safari支援一點(只有內容打全了才提示)-->
<input type='url'>
<!--如果填寫的不是網址的話會提示，chrome、Firefox支援，safari和IE不支援-->

contentEditable

細節：該屬性只填寫一個contenteditable也可以起作用，但是後面的draggable就不行，只可以寫成draggable='true’這樣的形式

以前沒有這個屬性的時候要修改div裡面的內容需要給div新增點選事件，當被點選之後，將該標籤變為input輸入框，然後填完替換

<div contenteditable='true'>ddd</div>
<!-- 沒有相容性問題 一般用於展示頁面中可修改的表格 -->

該屬性可以繼承，如果自己沒有設定，會看父級有無contenteditable

細節：雖說沒有寫該屬性無法編輯，然後如果裡面巢狀了其他元素，然後裡面元素設定的屬性值為false，只是代表該元素內容無法修改，然後它其實可以和他的元素名作為一個整體被刪除；

<div contenteditable>
    <span contenteditable='false'>姓名：</span>monkey<br>
    <span contenteditable='false'>性別：</span>
</div>

Draggable

可拖拽的—拖拽的還是虛擬的，並不會改變元素的位置(可以自己實現，用後面兩個拖拽事件)

相容性：只有chrome和safari可以正常使用，Firefox下不好使

a標籤 img標籤 預設是可拖拽的

既然可以拖拽，那就有拖拽事件

• 拖拽的生命週期

從按下到開始拖拽叫做拖拽開始，然後拖拽進行，當鬆開的那一刻，拖拽結束

1. 拖拽開始
2. 拖拽進行中
3. 拖拽結束

• 拖拽的組成

1. 被拖拽的物體
2. 目標區域

• 被拖拽的物體以及其生命週期

通過下面三個事件可以隨時的知道元素的位置
clientX:滑鼠的x軸位置
clientY：滑鼠的y軸位置

var oDragDiv = document.getElementsByClassName('a')[0];

// 在移動的一瞬間開始觸發
oDragDiv.ondragstart = function (e) {
    console.log(e);
}

// 移動事件 移動的過程中會觸發很多次
oDragDiv.ondrag = function (e) {
    console.log(e)
}

// 在結束時觸發
oDragDiv.ondragend = function (e) {
    console.log(e);
}

所有的標籤元素，當拖拽週期結束時，預設事件是回到原處;

事件是由行為觸發的，但是一個行為可以不止觸發一個事件
比如鍵盤滑鼠擡起既觸發了onclick 又觸發了onmouseup

拖拽事件鬆開的瞬間,觸發了ondragover ondrop

但是預設的ondragover執行完後,預設事件是回到原處,故不會觸發ondrop事件

ondragover -> 回到原處
-> 執行drop事件
責任鏈模式：
A -> B(阻止) ->預設事件

阻止預設事件，e.preventDefault();

2. 被拖拽物體的目標區域(結束元素)

// 1. 由圖形剛進入到目標區域後觸發的事件, 該事件一開始觸發一次
oDragTarget.ondragenter = function (e) {
    // 不是元素的圖形進入就觸發的，而是拖拽的滑鼠進入觸發，如果說元件裡有那種圖形一進入就觸發的，是經過計算算出來的，一開始我們可以知道滑鼠相對圖形邊緣的距離，然後這樣計算
    console.log(e);
}

// 不斷的觸發
// 2.當圖形進入目標區域之後,只要座標有變化會不斷的觸發, 和ondrag事件有點像
oDragTarget.ondragover = function (e) {
    console.log(e);
}

// 3.該事件表示圖形進入目標區域後,一離開觸發的事件
oDragTarget.ondragleave = function (e) {
    console.log(e);
}


//4. 拖拽 放下(一鬆手)的時候觸發的事件()
// 由於所有的ondragover預設當拖拽週期結束時(鬆手的時候),會觸發預設事件-回到原處 ,所有在使用ondrop 事件的時候需要在ondragover事件中阻止預設事件 e.preventDefault()
oDragTarget.ondrop = function (e) {
    console.log(e);
}
// 該拖拽事件發生在ondragend之前

小demo練習

補充屬性 datatransfer

拖拽的時候和進入目標區域的時候，指標是會變化

這個屬性不常用，原因是相容性不好，只有在chrome中支援

繼承自Object MOuseEvent物件 —> 滑鼠事件
其實就是多了個屬性
e.dataTransfer

該屬性必須在ondragevent中設定，但是顯示的時候是在進入目標區域後指標改變
e.dataTransfer.effectAllowed = ‘link’

該屬性只能在ondrop中使用
e.dataTransfer.dropEffect = ‘link’
type為link copy move copyMove linkMove all

h5新增標籤

語意化標籤

使用標籤時儘量的更加語意化

h5新增了很多語意化標籤
以下這些標籤只是有語意，本質上和p沒有區別

• header
  頁面頂部

• footer
  頁面底部

• nav
  導覽列

• article
  文章—可以直接被參照拿走的，比如一個部落格文章內容

• section
  段落結構–不是一個完整

實際開發中section 和 article區分的沒有特別仔細

• aside
  側邊欄–正文旁邊的地方

canvas標籤

特點：要想給定畫板的大小，必須在行間加樣式而不是用css渲染樣式

canvas是用js操縱畫東西的 canvas元素本身就是一塊畫布，需要結合js來畫畫

規範，建議在每開始畫一筆之前都加上ctx.beginPath(),也就是在每一次ctx.moveTo(x, y)之前加上ctx.beginPath()

1、畫筆

var ctx = canvas.getContext(‘2d’)

a. 規劃路徑

起點：ctx.moveTo(x, y);

從哪畫到哪：ctx.lineTo(x, y);

b. 描線

ctx.stroke();

c. 方法

ctx.closePath(); 閉合路徑，回到起點–只針對一筆畫出來的圖形

ctx.fill(); 填充區域，不需要stroke，fill自動會stroke，預設是起始點到終止點的連線(畫個圓弧很容易觀察出來)

改變畫筆線條的粗細，改為numpx

ctx.lineWidth = num;

同一筆畫下來的圖形粗細是相同的

重新開啟一個路徑

ctx.beginPath()

然後開始新的moveTo和lineTo

2、畫矩形

注意：以下畫法不需要使用moveTo()來表明起點，因為rect()方法的startX, startY已經表明了起點

• 畫法1

空矩形
ctx.rect(startX, startY, length, height);
ctx.stroke()

• 畫法2

空心矩形
ctx.strokeRect(startX, startY, length, height);

• 畫法3

實心矩形
ctx.fillRect(startX, startY, length, height)

ctx.clearRect(startX, startY, length, height);//清除指定區域的圖形

3、畫圓(圓弧)

圓心(x, y), 半徑®, 弧度(起始弧度, 結束弧度), 方向(順逆時針)

順時針填0，逆時針填1;
canvas的0度角在和數學中的一樣

起止弧度的大小預設以順時針的計算為準

90° = pi / 2

ctx.arc(x, y, r, radStart, radEnd, direction);

var canvas = document.getElementById('can');
var can = canvas.getContext('2d');
can.arc(100, 100, 50, 0, Math.PI * 1.5, 1);
can.fill()

4、圓角

圓角矩形當然可以用四條線 + 四個90°的弧來畫，但是下面有更簡單的方法，只需要畫四筆

var canvas = document.getElementById('can');
var can = canvas.getContext('2d');
can.moveTo(100, 120);
can.arcTo(100, 300, 300, 300, 20);
can.arcTo(300, 300, 300, 100, 20);
can.arcTo(300, 100, 100, 100, 20);
can.arcTo(100, 100, 100, 300, 20);
can.stroke();

5、貝塞爾曲線

需要規定起點moveTo(x, y)
二次：quadraticCureTo(x1, y1, x2, y2)
三次：bezierCurveTo(x1, y1, x2, y2, x3, y3)

// 4. 貝塞爾曲線
        var canvas = document.getElementById('can');
        var can = canvas.getContext('2d');
        

        can.beginPath();
        can.moveTo(100, 100);
        // quadraticCurveTo()
        can.bezierCurveTo(200, 200, 300, 200, 400, 100);
        can.stroke();

6、canvas座標平移旋轉和縮放

預設根據畫布的圓點進行旋轉
可以根據can.translate()進行座標系的平移

can.translate(x, y)

然後旋轉的話會根據新的圓心(x, y)進行旋轉

can.translate(x, y);//全域性起作用

can.rotate(旋轉弧度);//全域性起作用

can.scale(橫向縮放, 縱向縮放)
// 計算方法：每一個座標點的x, y都乘以了相應的縮放值

因為座標系的平移和形狀的旋轉是全域性起作用的，所以設定了一次之後，新畫的圖形都會按照改變了座標系以及旋轉形狀之後的條件 stroke，如果後面畫的圖形在stroke的時候還想按照原來的那樣，就需要在改變座標系以及旋轉之前儲存以下，後面再恢復，就像中斷一樣，保護現場–恢復現場

can.save()

可以儲存座標系的平移資料，縮放資料，旋轉資料

can.restore()

7、背景填充

can.fillStyle = ‘color’
var img = new Image();
img.src = ‘’
將圖片變成紋理，然後填充
var bg = can.createPattern(img, ‘no-repeat’);
img.onload = function () {
}

圖片預設是以canvas框的座標系原點開始填充的，想要改變背景圖片的位置的話需要使用can.translate(newX, newY);

8、顏色漸變函數

linearGradient(direction, color1 position, color2)
radialGradient(shape radius at position, color1, position, color2, position…)

var canvas = document.getElementById('can');
can = canvas.getContext('2d');
can.beginPath();
var bg = can.createLinearGradient(0, 0, 200, 200);
bg.addColorStop(0, 'white');
bg.addColorStop(1, 'black');//第一個數位只能從0~1, 是百分比的概念
can.fillStyle = bg;

// 輻射漸變---在chrome收藏夾中找
var bg = ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
// 從起始圓的邊向結束圓的邊漸變輻射
// 起始圓和結束圓可以是不同的圓心   起始圓大於結束圓的時候，外界的顏色就都是起始圓的顏色，結束圓大於起始圓的時候，外界的顏色就是結束圓的顏色

9、陰影

注意這個陰影是一邊一半的;
ctx.shadowColor = ‘blue’;
ctx.shadowBlur = num;
ctx.shadowOffset = num1;

陰影在x和y方向的偏移量
ctx.shadowOffsetX = num2;
ctx.shadowOffsetY = num3;

10、canvas渲染文字

ctx.strokeText(‘content’, x, y); 文字描邊

ctx.fillText(‘content’, x, y);

可以通過設定fillStyle設定格式文字填充

ctx.font = ‘20px Georgia’ 兩種填充都可設定上font

實心字用strokeText, 空心字用fillText

11、線端樣式

ctx.beginPath();
ctx.lineWidth = '30';
ctx.moveTo(100, 100);
ctx.lineTo(200, 200)
ctx.lineCap = 'butt' //butt是預設的，square(方塊帽子)， round(半圓帽子)

// 線段與線段交會時的設定
//round(圓角)  bevel(直接給切了)  miter(保留尖角)-可以設定miterLimit，防止過分尖銳
ctx.lineJoin = 'bevel'//miter round
ctx.miterLimit = num;
ctx.stroke();

canvas的合成屬性

ctx.beginPath();
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);


ctx.globalCompisiteOperation = 'lighter';
ctx.beginPath();
ctx.fillStyle = 'green';
ctx.arc(300, 300, 100, 0, Math.PI * 2);

ctx.fill();

SVG

• svg：向量圖(放大不會失真，適合大面積的貼圖，通常動畫較少或者較簡單)–用元素和css畫

• canvas：適合用於小面積的繪圖，適合動畫-用js畫

所有閉合的圖形在svg中預設都是天生充滿並且有效果的
ployline預設填充，如果去掉填充，不會首尾相連；
ploygon也預設填充，如果去掉填充，會首尾相連

<style>
    .line1{
        stoke:black;
    }
    .line2{
        stroke:red;
        stroke-width:2px;
    }
    ployline{
        fill:transparent;   /*不填充*/
        stroke:blueviolet;  /*閉合*/
        stroke-width:3px;/*線變粗了之後，只有線的中間是原來的位置，然後寬度向兩邊擴散，裡面一半，外面一半*/
        stroke-opacity:0.5;/*邊框透明度*/
        fill-opacity:0.5;/*填充透明度*/
        stroke-linecap:round;/*square butt 額外的加了一塊長度*/
        stroke-linejoin:round/*bevel，miter  兩個線在相交的時候的狀態*/
    }

    ploygon{
        fill:transparent;
        stroke:black;
    }
    text{
        stroke:blue;
        stroke-width:3px;
    }
</style>

<svg width='500px' height='500px' style='border: 1px solid'>
<!-- 線段 -->
<line class = 'line1' x1='100' y1='100' x2='200' y2='100'></line>
<line class='line2' x1='200' y1='100' x2='200' y2='200'></line>
<!-- 矩形 -->
<rect heigth='50' width='100' x='0' y='0' rx='10' ry='10'></rect>
<!-- rx和ry就是x和y方向的圓角 -->


<circle r='50' cx='50' cy='220'></circle>
<!-- 圓心在 50,220 處的半徑位50的圓 -->

<ellipse rx='100' ry='30' cx='400' cy='200'></ellipse>

<!-- 預設會連線並填充，需要結合css控制 -->
<!-- 回到哪就會停到哪 -->
<polyline points='0 0, 50 50, 50 100, 100 100, 100 50'></polyline>

<!-- 多邊形:也是畫折現，然後首尾會閉合 -->
<ploygon points='0 0, 50 50, 50 100, 100 100, 100 50'></ploygon>
<!-- 文字 -->
<text x='300' y='50'>TEXT</text>



<!-- path標籤:可以做基本的畫線,moveTo到哪個點，lineTo到哪個點...第一個M後面的點表示起點，H表示水平方向的位置，V表示豎直方向的位置 Z表示是否閉合，z對大小寫不敏感 -->
<path d='M 100 100 L 200 100' style='stroke:red;fill:transparent'></path>
<!-- 大寫表示絕對位置，小寫字母為相對位置(基於現在的位置) -->
</svg>

屬性：

• stroke-opacity:邊框透明度

• fill-opacity:填充透明度

• stroke-linecap:線條端點的帽，square，round —>額外加的長度

• stroke-linejoin:兩個線條在相交的時候的樣式，與canvas相同

path畫弧

兩個點，半徑已知，可以確定兩個圓或橢圓

<path d="M 100 100 A 100 50 0 1 1 150 200"></path>
<!-- A表示弧，第三個參數列示旋轉角度，第四個參數列示大弧還是小弧(1表示大弧，0表示小弧)，第五個參數列示順時針還是逆時針(0表示逆時針 1表示順時針) -->

svg線性漸變範例，需要提前將漸變定義好，使用的時候用url引入紋理

<svg>
<defs>
    <linearGradient id='bg1' x1=0 y1=0 x2=0 y2=100%> 
    <stop offset=0% style="stop-color:rgb(255, 255, 0)"></stop>
    <stop offset=100% style="stop-color:rgb(255, 0, 0)"></stop>
    </linearGradient>
    <!-- 高斯模糊stdDeviation屬性值越大，看到的越模糊 -->
    <filter id='Guss'>
        <feGaussianBlur in="SourceGraphic" stdDeviation="10"></feGaussianBlur>>
    </filter>
</defs>
<rect x=100 y=100 width=200 height=100 style='fill:url(#bg1);'></rect>
</svg>

• stroke-dasharray：arr1 px, arr2 px…;

• stroke-dashoffset:指定填充向左移動一定的距離

• viewBox:比例尺，表示svg區域的比例尺，有四個引數，前面兩個參數列示起點，後面兩個引數分別表示x方向和y方向的比例，和原來的長寬進行比較
  高德地圖就是使用了svg

audio和video

• controls

video

• paused屬性：判斷視訊是否是暫停的
• play()方法：視訊播放的方法
• pause()方法：視訊暫停的方法
• duration屬性：視訊總共的s數
• currentTime屬性：視訊當前已經播放的s數
• playbackRate屬性：調節速率
• volume屬性：控制音量 0 ~ 1,預設為1

document.documentElement.requestFullScreen()–>進入全螢幕模式，相當於F11

只有http協定中視訊帶有Content-Range這個屬性，我們才能設定時間進行跳轉，只有content-type和content-length的話，視訊會重新開始播放

相關推薦：《html視訊教學》

以上就是html5中新增加的屬性與元素有哪些的詳細內容，更多請關注TW511.COM其它相關文章！