HTML5的新特性概述（上）

html5做爲html的代替者，成爲新的標準，並且時至今日，在前端開發中，已經被你們普遍應用，可是對於html5有哪些具體功能和特性，有很多人就對它認識就顯得模糊了。下面是我總結的一些h5的新特性，供你們參考：

1. 語義化標籤

html標籤是咱們開發前端界面的骨架，可是之前咱們使用html標籤佈局使用的都是div標籤，div標籤的語義很是的不清晰，所以html5爲了規範這一塊，給出了一系列的標籤：

• <hrader></header> 頭部區域標籤，塊級標籤
• <footer></footer> 底部區域標籤，塊級標籤
• <nav></nav> 導航區域標籤，塊級標籤
• <time></time> 時間區域標籤，內聯標籤
• <article></article> 文章段落標籤，塊級標籤
• <aside></aside> 側邊欄區域標籤，塊級標籤
• <mark></mark> 標記記號標籤，內聯標籤
• <summary></summary> 單詞翻譯: 摘要，h5官方文檔描述：定義 details 元素的標題，塊級標籤
• <detailes></detailes> 單詞翻譯：細節，h5官方文檔描述：定義元素的細節，塊級標籤
• <section></section> 單詞翻譯：部分，h5官方文檔描述：定義 section，塊級標籤

2. 新表單類型

我這裏描述的表單，主要指的<input>，<input>表單標籤自己已經有很多類型了，可是h5爲了知足開發需求，一樣還新增了很多的類型：

• <input type="email" /> e-mail 地址的輸入域
• <input type="number" /> 數字輸入域
• <input type="url" /> URL 地址的輸入域
• <input type="range" /> range 類型顯示爲滑動條，默認value值是1~100的限定範圍，能夠經過min屬性和max屬性自定義範圍<input type="range" name="points" min="1" max="10" />
• <input type="search" /> 用於搜索域
• <input type="color" /> 用於定義選擇顏色
• <input type="tel" /> 電話號碼輸入域
• <input type="date" /> date類型爲時間選擇器

HTML5 新增的表單屬性

• placehoder 屬性，簡短的提示在用戶輸入值前會顯示在輸入域上。即咱們常見的輸入框默認提示，在用戶輸入後消失。
• required 屬性，是一個 boolean 屬性。要求填寫的輸入域不能爲空
• pattern 屬性，描述了一個正則表達式用於驗證<input> 元素的值。
• min 和 max 屬性，設置元素最小值與最大值。
• step 屬性，爲輸入域規定合法的數字間隔。
• height 和 width 屬性，用於 image 類型的 <input> 標籤的圖像高度和寬度。
• autofocus 屬性，是一個 boolean 屬性。規定在頁面加載時，域自動地得到焦點。
• multiple 屬性 ，是一個 boolean 屬性。規定<input> 元素中可選擇多個值。

3. 視頻和音頻

視頻<video>和音頻<audio>，也是html提供的新的標籤，它們的功能相似於<img>標籤，<img>標籤引用的是圖片，它們引用的是視頻文件和音頻文件。不只如此，html5針對視頻文件和音頻文件的特殊性，給 <video>和<audio>提供了很是豐富的方法,屬性和事件，用於操控這倆元素。 `

<audio src="audio/putclub.com_Googlewasjusta.mp3" id="audio"></audio>
<button id="start-music">開始播放</button>
<button id="stop-music">暫停播放</button>

var startMusic = document.getElementById('start-music');
var stopMusic = document.getElementById('stop-music');

startMusic.onclick = function () {  //開始播放
		var audioEl = document.getElementById('audio');
		audioEl.play()
	}
	
stopMusic. onclick = function () {  // 暫停播放
		var audioEl = document.getElementById('audio');
		audioEl.pause()
	}
複製代碼

`

<audio>目前支持的音頻格式有: MP3, Wav, 和 Ogg。

`

<video width="600" height="400" id="video" controls="controls">
	<source src="video/jieda2.mp4" type="audio/mp4"></source>
</video>
<button id="start-tv">視頻開始播放</button>
<button id="stop-tv">暫停視頻播放</button>

var startTv = document.getElementById('start-tv');
var stopTv = document.getElementById('stop-tv');

startTv.onclick = function () {
		var video = document.getElementById('video');
		video.play();
	}
	
stopTv.onclick = function () {
		var video = document.getElementById('video');
		video.pause();
}
複製代碼

`

注意：video播放視頻時請注意轉換一下視頻的格式，轉換爲AVC(H264)，不轉換的話容易出現有聲音而沒有視頻的現象，瀏覽器將支持第一個識別的文件類型：( MP4, WebM, 和 Ogg)。

視頻<video>和音頻<audio>經常使用的幾個方法有：

• play() 開始播放音頻/視頻
• pause() 暫停當前播放的音頻/視頻
• load() 從新加載音頻/視頻元素

視頻<video>和音頻<audio>經常使用的屬性有：

• controls 屬性設置或返回音頻/視頻是否顯示控件（好比播放/暫停等）
• defaultPlaybackRate 屬性設置或返回音頻/視頻的默認播放速度
• duration 屬性返回當前音頻/視頻的長度（以秒計）
• ended 屬性返回音頻/視頻的播放是否已結束
• loop 屬性設置或返回音頻/視頻是否應在結束時從新播放
• muted 屬性設置或返回音頻/視頻是否靜音
• networkState 屬性返回音頻/視頻的當前網絡狀態
• src 屬性設置或返回音頻/視頻元素的當前來源
• volume 屬性設置或返回音頻/視頻的音量
• readyState 屬性返回音頻/視頻當前的就緒狀態
• played 返回表示音頻/視頻已播放部分的 TimeRanges 對象

視頻<video>和音頻<audio>還擁有很是多本身特定的事件，不過本文將不在羅列，上面的方法和屬性也並非所有，須要詳細瞭解的同窗能夠去HTML 5 視頻/音頻參考手冊查看。

4. Canvas繪圖

canvas 元素用於在網頁上繪製圖形,canvas標籤自己只是個圖型容器，須要使用javaScript腳原本繪製圖形。

`

<canvas id="mycanvas" width="600" height="400"></canvas>

var myCanvas = document.getElementById('mycanvas');
var canvas2d =	myCanvas.getContext('2d');

canvas2d.moveTo(100, 100);  // 線條起始位置
canvas2d.lineTo(400, 100);  // 線條結束位置
canvas2d.strokeStyle = '#CD5C5C'    // 線條顏色
canvas2d.lineWidth = 5；    // 定義線寬
canvas2d.font = '20px Arial'; // 定義字體大小和字體類型
canvas2d.fillText('Canvas繪圖demo', 400, 100)   // 設置繪製的文本和位置
canvas2d.stroke();
複製代碼

`

moveTo(x,y) 定義線條開始座標，lineTo(x,y) 定義線條結束座標,lineWidth設置線寬，fillText()設置繪製的文本和位置,stroke()執行繪畫。

上面這個是上面canvas繪製的圖形。想要詳細瞭解canvas的同窗，能夠去到HTML5 Canvas 參考手冊。

5. SVG

SVG是指可伸縮的矢量圖形，SVG 也是一種使用 XML 描述 2D 圖形的語言。因爲SVG 基於 XML，這意味着 SVG DOM 中的每一個元素都是可用的。咱們能夠爲某個元素附加 JavaScript 事件處理器。在 SVG 中，每一個被繪製的圖形均被視爲對象。若是 SVG 對象的屬性發生變化，那麼瀏覽器可以自動重現圖形。

`

<style>
        /* svg 樣式：
		fill：填充色
		stroke：描邊色
		stroke-width：邊框寬度*/
		
		#mycircle{
			fill: darkseagreen;
			stroke: coral;
			stroke-width: 2px;
		}
</style>

<svg width="200px" height="200px">
	<!--<circle>標籤表明圓形 cx、cy、r屬性分別爲橫座標、縱座標和半徑，單位爲像素。座標都是相對於<svg>畫布的左上角原點。-->
	<circle id="mycircle" cx="50" cy="50" r="50" />
</svg>
複製代碼

`

svg圖形的樣式和css有些不一樣，fill是定義圖形填充色，stroke描邊色，stroke-width是線寬,若是咱們要對svg圖形操做，那麼咱們該怎麼作呢，其實很簡單，只須要document.getElementById()獲取須要操做的svg圖形節點，而後針對該svg圖形的屬性去操做就能夠了，對svg圖形屬性的操做能夠用getAttribute()和setAttribute(),好啦，更多詳細的svg知識點，能夠去SVG 參考手冊和阮一峯老師的svg圖像學習瞭解。

6. 小結

本文考慮到文章篇幅的問題，因此分做上篇和下篇進行介紹h5的新特性。本上篇主要介紹了h5的五種新特性，語義化的標籤，新增的表單元素類型，視頻和音頻，canvas繪圖以及svg圖形的簡要介紹。