HTML5的新特性概述（上）

web灰太狼發表於2018-11-13
HTML

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()執行繪畫。

HTML5的新特性概述（上）

上面這個是上面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圖形的簡要介紹。

相關文章