html5不是分組元素_JavaScript-筆記（9）：HTML5
技術標籤：html5不是分組元素
本文使用 Zhihu On VSCode 創作併發布
HTML5 簡介
HTML5 是 HTML 當前及未來的新標準。
web 設計有三個層：結構層、樣式層、行為層，這三個層分別使用 HTML、CSS 和 JavaScript 三個技術。HTML5 將上面三個層裝入一個小集合，也僅僅只是一個集合。 HTML5 添加了很多新的標記元素，詳情 http://www.w3.org/TR/html5。 將文件“升級”到 HTML5，只需把文件型別宣告改成<!DOCTYPE html>即可。
HTML5 的相容非常強，缺斤短兩的 HTML5 文件都可以完美地通過驗證。
忠告
一個工具：Modernizr（https://modernizr.com/），這是一個開源 js 庫，利用其富特性檢測功能，對 HTML5 文件進行更好的控制。
在文件中嵌入 Modernizr 後，它會隨著頁面載入而變一些小戲法。
首先，它會修改 <html> 的 class 屬性，要使用它編寫文件，通常要給<html>屬性新增一個 no-js 類：
<html class="no-js"></html>
利用這個類，可以瀏覽器不支援 JavaScript 的情況下應用 CSS 樣式。
;.nojs selector { style properties; }
然後，它還會檢測瀏覽器可以支援的各種特性，並新增相應的類名。 實際情況是瀏覽器會支援部分特性，不支援另一些特性，這時，類名中就會間或出現 features 和 no-feature。
它還可以幫一些老舊瀏覽器處理 <section> 和 <article> 等新 HTML5 元素。
使用它非常簡單，從 http://www.modernizr.com/ 下載它，然後在文件的<head>中新增該指令碼：
<script src="modernizr-1.5.min.js"></script>
一定要把這個指令碼放在
示例
一些有關 Canvas、視訊/音訊以及表單的例子，需要以下瀏覽器：
- 蘋果 Safari 5+
- Chrome 6+
- Firefox 3.6+
- IE 9+
- opera 10.6+
瀏覽器一般只能顯示靜態圖片，使用 GIF 或許可以實現一些動畫，或者使用 CSS 加 JavaScript 也能變化一些樣式。 但 HTML5 的<Canvas> 元素可以動態建立和操作圖形影象。 支起一張“畫布”：
<canvas id="draw-in-me" width="120" height="40">
<p>Powered by HTML5 canvas！</p>
</canvas>
在上面作畫需要了解詳細的繪畫方法，參考<canvas>元素規範(http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html)
用<Canvas> 畫一個圓角小黑盒子，帶有 2 畫素寬的白色描邊效果。
function draw() {
var canvas = document.getElementById("draw-in-me");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(120.0, 32.0);
ctx.bezierCurveTo(120.0, 36.4, 116.4, 40.0, 112.0, 40.0);
ctx.lineTo(8.0, 40.0);
ctx.bezierCurveTo(3.6, 40.0, 0.0, 36.4, 0.0, 32.0);
ctx.lineTo(0.0, 8.0);
ctx.bezierCurveTo(0.0, 3.6, 3.6, 0.0, 8.0, 0.0);
ctx.lineTo(112.0, 0.0);
ctx.bezierCurveTo(116.4, 0.0, 120.0, 3.6, 120.0, 8.0);
ctx.lineTo(120.0, 32.0);
ctx.closePath();
ctx.fill();
ctx.lineWidth = 2.0;
ctx.strokeStyle = "rgb(255, 255, 255)";
ctx.stroke();
}
}
window.onload = draw;
結果：
- HTML 的
<video>元素在文件中嵌入影片以及影片互動定義了一種標準方式，同時也把嵌入操作簡化成了一個標籤：
<video src="movie.mp4">
<!-- 不支援 <video> 的替代內容 -->
<a href="movie.mp4">Download movie.mp4</a>
</video>
同樣，音訊也是：
<audio src="audio.mp3">
<a href="audio.mp3">Download audio.mp3</a>
</audio>
自定義控制元件 瀏覽器顯示
<video>元素時，會為其新增一些與瀏覽器樣式統一的標準播放控制元件，要想自定義這些控制元件的外觀，或者新增新的控制元件，可以通過 DOM 屬性來實現。主要有：- currentTime，返回當前播放的位置，以秒錶示；
- duration，返回媒體的總時長，以秒錶示，對流媒體返回無窮大；
- paused，表示是否處於暫停；
- play，在媒體播放開始時發生；
- pause，在媒體暫停時發生；
- loadedata，在媒體可以從當前播放位置開始播放時發生；
- ended，在媒體已播放完成而停止時發生。
記住，無論建立什麼控制元件，都別忘了在
<video>元素中新增 control 控制元件。<video src="movie.mp4" controls></video>這樣才會顯示控制條：
Image
傳統的表單可用的輸入控制元件型別很少，文字框、單選按鈕、複選框對簡單的表單是夠了，但需要更多互動功能的時候，仍需要 DOM 上陣。 HTML5 提供了新的輸入型表單：
- email，輸入郵箱
- url，輸入 url
- date，輸入日期和時間
- number，輸入數值
- range，用於生成滑動條
- search，用於搜尋框
- tel，用於輸入電話號碼
- color，用於選擇顏色
新的屬性：
- autocomplete，用於為文字（text）輸入框新增一組建議的輸入項；
- autofocus，用於讓表單元素自動獲得焦點；
- form，用於對
<form>標籤外部的表單元素分組； - min、max 和 step，用在範圍和數值輸入框中；
- pattern，用於定義一個正則表示式，以便驗證輸入的值；
- placeholder，用於在文字輸入框中顯示臨時性的提示資訊；
- required，表示必填
使用的時候要檢測瀏覽器是否支援對應的控制元件，可以使用 inputtypes.type 屬性，如：
if (!Modernizr.inputtypes.date) {
// 生成日期選擇器的指令碼
}
檢查屬性，可以使用 input.attribute 屬性，如：
if (!Modernizr.input.placeholder) {
// 生成佔位符提示資訊的指令碼
}
如果沒有使用 Modernizr，可以使用 inputSupportType 函式來檢查瀏覽器是否支援某種輸入控制元件。
function inpurtSupportsType(type){
if(!document.createElement) return false;
var input = document.createElement('input');
input.setAttribute('type', type);
if(input.type == 'text && type != 'text'){
return false;
}
else{
return true;
}
}
使用方式和 modernizr 一樣：
if (!inputSupportType(date)) {
// 生成日期選擇器的指令碼
檢查特定的屬性，可以使用這個 elementSupportsAttribute 函式：
function elementSupportsAttribute(elementName, attribute) {
if (!document.createElement) return false;
var temp = document.crateElement(elementName);
return attribute in test;
}
使用方式和 modernizr 一樣：
if (!elementSupportType('input', 'placeholder')) {
// 生成提示佔位符的指令碼
- localStorage 和 sessionStorage 在客戶儲存大型和複雜資料集的更有效方案
- 使用 WebSocket 與伺服器端指令碼進行開放的雙向通訊
- 使用 Web Worker 在後臺執行 JavaScript
- 標準化的拖放實現
- 在瀏覽器中實現地理位置服務 …………
小結
瞭解了 HTML5 以及使用 Modernizr 等工具檢測特性的重要性。