編程中，語義指的是一段代碼的含義，這個HTML元素有什么作用，扮演了什么樣的角色。簡單的概括為：在適當的位置使用適當的標簽,用正確的標簽做正確的事情

Html5有哪些新特性？

1.拖拽釋放(Draganddrop)API

2.語義化更好的內容標簽(header,nav,footer,aside,article,section，main)

3.音頻、視頻API(audio,video)

4.畫布(Canvas)API

5.地理(Gealocation)API

6.本地離線存儲localStorage長期存儲數據,瀏覽器關閉后數據不丟失;

7.sessionStorage的數據在瀏覽器關閉后自動刪除

8.表單控件,calendar、date、time、email、url、search

9.新的技術webworker,websocket,Geolocation

開課吧廣場-人才學習交流平臺

TML5新特性

(1)新的語義標簽 header;footer

(2)增強型表單

新 input type

number;email;url;date;color

新 element

datalist

建議列表

progress

進度條

meter

刻度尺

output

新 attr

placehodler;autofocus;minlength;maxlength;min;max;

(3)視頻和音頻

視頻

<video src="x.mp4"></video>

? mp4 安裝mp4解碼器

? avi 安裝avi解碼器

autoplay;controls;muted;poster;preload

js volume;playbackRate;paused;

play() pause() onplay onpause()

音頻

<audio src="x.mp3" autoplay;controls;></audio>

(4)繪圖 Canvas

網頁中繪圖三種技術

svg

2d矢量圖

矢量圖由一個一個線條組件

無限放大縮小不會失真

百度地圖

flash動畫效果

canvas

2d位圖

webgl

3d位圖

three.js

canvas

開發流程

創建畫布 <canvas width="" height=""></canvas>

獲取畫布

var c3 = document.getElementById("c3");

創建畫筆

var ctx = c3.getContext("2d");

矩形

ctx.lineWidth = 1;

ctx.strokeStyle = "#fff"

ctx.strokeRect(x,y,w,h);

ctx.fillStyle= "#fff"

ctx.fillRect(x,y,w,h);

ctx.clearRect(x,y,w,h);

文本

ctx.font=""

ctx.textBaseline = "";

ctx.fillText(str,x,y);

ctx.strokeText(str,x,y)

ctx.measureText(str).width

路徑

路徑由多個坐標點組件本身不可見但可以用描邊填充

ctx.beginPath() 開始一條新路徑

ctx.closePath() 閉合一條路徑

ctx.moveTo(x,y) 移動到指定點

ctx.lineTo(x,y) 從當前點到指定點畫一條直線

ctx.arc(cx,cy,r,start,end)

cx/cy 圓心

r 半徑

start 起始角度

end 終止角度

ctx.stroke()

ctx.fill()

畫像

圖像保存服務器中,canvas客戶端技術 下載

var p3 = new Image()

p3.src = "img/p3.png"

p3.onload = function(){}

ctx.drawImage(p3,x,y,w,h)

變形

ctx.rotate(弧度)

旋轉角度，旋轉畫筆

ctx.translate(x,y)

平移原點[軸點]

ctx.translate(250,200)

0,0 原先左上角->0,0 畫布中心

ctx.save(); 保存畫筆狀態 {原點,角度;顏色...}

ctx.restore(); 恢復畫筆狀態

漸變對象

var g = ctx.createLinearGradient(0,0,500,0)

g.addColorStop(offset,color)

ctx.fillStyle = g;

ctx.fillRect(0,0,100,30)

(5) SVG

區別

矢量圖

標簽

每個元素都可以綁定事件

統計圖

<rect x y width height fill fill-opacity stroke></rect>

<circle r cx cy fill stroke></circle>

創建元素

字符串拼接

var html = "<rect></rect>"

svg.innerHTML = html

創建元素

var r = document.createElementNS("http://www.w3.org/2000/svg","rect")

r.setAttribute("fill","")

svg.appendChlid(r)

刪除

svg.removeChlid(c)

svg.innerHTML = ""; 所有元素清除

圖形

橢圓

<ellipse cx cy rx ry></ellipse>

直線

<line x1 y1 x2 y2 stroke="" stroke-width=""></line>

折線

<polyline points="x,y x,y.."

文本

<text>文本內容</text>

圖形

<image xlink:href="x.mpr"></image

特效對象

漸變對象

濾鏡

第三方繪圖庫

d3/echarts

加載 echarts.min.js

<div id="main" style="width:500px;height:400px"></div>

var mychart -= echarts.init(...main)

var option = {} 配置項

mychart.setOption(option)

(6)拖放API

操作:拖動和釋放

源對象(動)

ondragstart

ondrag

ondragend

目標對象

ondragenter

ondragover

ondragleave

ondrop

(7)地理定位

geolocation

百度地圖

(8)WebWorker

創建新線程執行耗時JS任務

var w = new Worker("x.js")

w.postMessage(str)

x.onmessage = function(e){e.data}

(9)Web Storage

客戶端存儲數據

sessionStorage

當前會話中生效

會話:

獲取數據

var value = sessionStoage.getItem(key)

獲取數據

var value = sessionStoage[key]

保存數據

sessionStoage.setItem(key,value)

保存數據

sessionStorage[key] = value

清除數據

sessionStorage.clear()

數除數據

sessionStorage.removItem(key)

數據個數

sessionStorage.length

獲取key

var key = sessionStorage.key(i)

localStorage

(10)Web Socket