HTML5詳解

阿新 • • 發佈：2018-02-07

類名生成單元素 gpo 服務密鑰 eat device ron

本文最初發表於博客園，並在GitHub上持續更新前端的系列文章。歡迎在GitHub上關註我，一起入門和進階前端。

以下是正文。

HTML5的介紹

Web 技術發展時間線

1991 HTML
1994 HTML2
1996 CSS1 + JavaScript
1997 HTML4
1998 CSS2
2000 XHTML1（嚴格的html）
2002 Tableless Web Design（表格布局）
2005 AJAX
2009 HTML5
2014 HTML5 Finalized

2002年的表格布局逐漸被淘汰，是因為：表格是用來承載數據的，並不是用來劃分網頁結構的。

2009年就已經推出了HTML5的草案，但直到2014年才有定稿，是因為有移動端的推動。

H5草案的前身是叫：Web Application，最早是由WHATWG這個組織在2004年提出的。

2007年被 W3C 組織接納，並在 2008-01-22 發布 HTML5 的第一個草案。

什麽是 HTML5

HTML5並不僅僅只是做為HTML標記語言的一個最新版本，更重要的是它制定了Web應用開發的一系列標準，成為第一個將Web做為應用開發平臺的HTML語言。

HTML5定義了一系列新元素，如新語義標簽、智能表單、多媒體標簽等，可以幫助開發者創建富互聯網應用，還提供了一些Javascript API，如地理定位、重力感應、硬件訪問等，可以在瀏覽器內實現類原生應用。我們甚至可以結合 Canvas 開發網頁版遊戲。

HTML5的廣義概念：HTML5代表瀏覽器端技術的一個發展階段。在這個階段，瀏覽器的呈現技術得到了飛躍發展和廣泛支持，它包括：HTML5、CSS3、Javascript API在內的一套技術組合。

HTML5不等於 HTML next version。HTML5 包含： HTML的升級版、CSS的升級版、JavaScript API的升級版。

總結：HTML5是新一代開發 Web 富客戶端應用程序整體解決方案。包括：HTML5，CSS3，Javascript API在內的一套技術組合。

富客戶端：具有很強的交互性和體驗的客戶端程序。比如說，瀏覽博客，是比較簡單的客戶端；一個在線聽歌的網站、即時聊天網站就是富客戶端。

HTML5 的應用場景

列舉幾個HTML5 的應用場景：

（1）極具表現力的網頁：內容簡約而不簡單。

（2）網頁應用程序：

代替PC端的軟件：iCloud、百度腦圖、Office 365等。
APP端的網頁：淘寶、京東、美團等。
微信端：公眾號、小程序等。

（3）混合式本地應用。

（4）簡單的遊戲。

HTML5 新增的內容

技術分享圖片

語義化的標簽

語義化的作用

語義標簽對於我們並不陌生，如<p>表示一個段落、<ul>表示一個無序列表。標簽語義化的作用：

能夠便於開發者閱讀和寫出更優雅的代碼。
同時讓瀏覽器或是網絡爬蟲可以很好地解析，從而更好分析其中的內容。
更好地搜索引擎優化。

總結：HTML的職責是描述一塊內容是什麽（或其意義），而不是它長什麽樣子；它的外觀應該由CSS來決定。

H5在語義上的改進

在此基礎上，HTML5 增加了大量有意義的語義標簽，更有利於搜索引擎或輔助設備理解 HTML 頁面內容。HTML5會讓HTML代碼的內容更結構化、標簽更語義化。

我們常見的 css+div 布局是：

技術分享圖片

以後我們可以這樣寫：

技術分享圖片

傳統的做法中，我們通過增加類名如class="header"、class="footer"，使HTML頁面具有語義性，但是不具有通用性。

HTML5 則是通過新增語義標簽的形式來解決這個問題，例如<header></header>、<footer></footer>等，這樣就可以使其具有通用性。

傳統網頁布局：

<!-- 頭部 -->
<div class="header">
    <ul class="nav"></ul>
</div>

<!-- 主體部分 -->
<div class="main">
    <!-- 文章 -->
    <div class="article"></div>
    <!-- 側邊欄 -->
    <div class="aside"></div>
</div>

<!-- 底部 -->
<div class="footer">

</div>

H5 的經典網頁布局：

<!-- 頭部 -->
<header>
    <ul class="nav"></ul>
</header>

<!-- 主體部分 -->
<div class="main">
    <!-- 文章 -->
    <article></article>
    <!-- 側邊欄 -->
    <aside></aside>
</div>

<!-- 底部 -->
<footer>

</footer>

H5中常用的新語義標簽

<nav> 表示導航
<header> 表示頁眉
<footer> 表示頁腳
<section> 表示區塊
<article> 表示文章。如文章、評論、帖子、博客
<aside> 表示側邊欄如文章的側欄
<figure> 表示媒介內容分組。
<mark> 表示標記 (用得少)
<progress> 表示進度 (用得少)
<time> 表示日期

本質上新語義標簽與<div>、<span>沒有區別，只是其具有表意性，使用時除了在HTML結構上需要註意外，其它和普通標簽的使用無任何差別，可以理解成<div class="nav"> 相當於<nav>。

PS：單標簽不用寫關閉符號。

新語義標簽的兼容性處理

IE8 及以下版本的瀏覽器不支持 H5 和 CSS3。解決辦法：引入html5shiv.js文件。

引入時，需要做if判斷，具體代碼如下：

    <!--  條件註釋 只有ie能夠識別-->

    <!--[if lte ie 8]>
        <script src="html5shiv.min.js"></script>
    <![endif]-->

上方代碼是條件註釋：雖然是註釋，但是IE瀏覽器可以識別出來。解釋一下：

l：less 更小
t：than 比
e：equal等於
g：great 更大

PS:我們在測試 IE 瀏覽器的兼容的時候，可以使用軟件 ietest，模擬IE6-IE11。

在不支持HTML5新標簽的瀏覽器，會將這些新的標簽解析成行內元素(inline)對待，所以我們只需要將其轉換成塊元素(block)即可使用。

但是在IE9版本以下，並不能正常解析這些新標簽，但是可以識別通過document.createElement(‘tagName‘)創建的自定義標簽。於是我們的解決方案就是：將HTML5的新標簽全部通過document.createElement(‘tagName‘)來創建一遍，這樣IE低版本也能正常解析HTML5新標簽了。

當然，在實際開發中我們更多采用的辦法是：檢測IE瀏覽器的版本，來加載第三方的JS庫來解決兼容問題（如上方代碼所示）。

H5中的表單

傳統的Web表單已經越來越不能滿足開發的需求，HTML5 在 Web 表單方向做了很大的改進，如拾色器、日期/時間組件等，使表單處理更加高效。

H5中新增的表單類型

email 只能輸入email格式。自動帶有驗證功能。
tel 手機號碼。
url 只能輸入url格式。
number 只能輸入數字。
search 搜索框
range 滑動條
color 拾色器
time 時間
date 日期。
--datetime 時間日期
month 月份
week 星期

上面的部分類型是針對移動設備生效的，且具有一定的兼容性，在實際應用當中可選擇性的使用。

代碼舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>表單類型</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }

        form {
            max-width: 500px;
            width: 100%;
            margin: 32px auto 0;
            font-size: 16px;
        }

        label {
            display: block;
            margin: 10px 0;
        }

        input {
            width: 100%;
            height: 25px;
            margin-top: 2px;
            display: block;
        }

    </style>
</head>
<body>
<form action="">
    <fieldset>
        <legend>表單類型</legend>
        <label for="">
            email: <input type="email" name="email" required>
        </label>
        <label for="">
            color: <input type="color" name="color">
        </label>
        <label for="">
            url: <input type="url" name=‘url‘>
        </label>
        <label for="">
            number: <input type="number" step="3" name="number">
        </label>
        <label for="">
            range: <input type="range" name="range" value="100">
        </label>
        <label for="">
            search: <input type="search" name="search">
        </label>
        <label for="">
            tel: <input type="tel" name="tel">
        </label>
        <label for="">
            time: <input type="time" name="time">
        </label>
        <label for="">
            date: <input type="date" name="date">
        </label>
        <label for="">
            datetime: <input type="datetime">
        </label>
        <label for="">
            week: <input type="week" name="month">
        </label>
        <label for="">
            month: <input type="month" name="month">
        </label>
        <label for="">
            datetime-local: <input type="datetime-local" name="datetime-local">
        </label>
        <input type="submit">
    </fieldset>
</form>
</body>
</html>

代碼解釋：

<fieldset> 標簽將表單裏的內容進行打包，代表一組；而<legend>標簽的則是 fieldset 裏的元素定義標題。

表單元素（標簽）

這裏講兩個表單元素。

1、<datalist> 數據列表：

<input type="text" list="myData">
<datalist id="myData">
    <option>本科</option>
    <option>研究生</option>
    <option>不明</option>
</datalist>

上方代碼中，input裏的list屬性和 datalist 進行了綁定。

效果：

技術分享圖片

上圖可以看出，數據列表可以自動提示。

2、<keygen>元素：

keygen 元素的作用是提供一種驗證用戶的可靠方法。

keygen 元素是密鑰對生成器（key-pair generator）。當提交表單時，會生成兩個鍵：一個公鑰，一個私鑰。

私鑰（private key）存儲於客戶端，公鑰（public key）則被發送到服務器。公鑰可用於之後驗證用戶的客戶端證書（client certificate）。

3、<meter>元素：度量器

low：低於該值後警告
high：高於該值後警告
value：當前值
max：最大值
min：最小值。

舉例：

    <meter  value="81"    min="0" max="100"  low="60"  high="80"/>

表單屬性

placeholder 占位符（提示文字）
autofocus 自動獲取焦點
multiple 文件上傳多選或多個郵箱地址
autocomplete 自動完成（填充的）。on 開啟（默認），off 取消。用於表單元素，也可用於表單自身(on/off)
form 指定表單項屬於哪個form，處理復雜表單時會需要
novalidate 關閉默認的驗證功能（只能加給form）
required 表示必填項
pattern 自定義正則，驗證表單。例如

代碼舉例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        form {
            width: 100%;
            /* 最大寬度*/
            max-width: 640px;
            /* 最小寬度*/
            min-width: 320px;
            margin: 0 auto;
            font-family: "Microsoft Yahei";
            font-size: 20px;
        }

        input {
            display: block;
            width: 100%;
            height: 30px;
            margin: 10px 0;
        }
    </style>
</head>
<body>

<form action="">
    <fieldset>
        <legend>表單屬性</legend>
        <label for="">
            用戶名：<input type="text" placeholder="例如：smyhvae" autofocus name="userName" autocomplete="on" required/>
        </label>

        <label for="">
            電話：<input type="tel" pattern="1\d{10}"/>
        </label>

        <label for="">
            multiple的表單: <input type="file" multiple>
        </label>

        <!-- 上傳文件-->
        <input type="file" name="file" multiple/>

        <input type="submit"/>
    </fieldset>
</form>

</body>
</html>

表單事件

oninput()：用戶輸入內容時觸發，可用於輸入字數統計。
oninvalid()：驗證不通過時觸發。比如，如果驗證不通過時，想彈出一段提示文字，就可以用到它。

舉例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        form {
            width: 100%;
            /* 最大寬度*/
            max-width: 400px;
            /* 最小寬度*/
            min-width: 200px;
            margin: 0 auto;
            font-family: "Microsoft Yahei";
            font-size: 20px;
        }

        input {
            display: block;
            width: 100%;
            height: 30px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
<form action="">
    <fieldset>
        <legend>表單事件</legend>
        <label for="">
            郵箱：<input type="email" name="" id="txt1"/>
        </label>
        <label for="">
            輸入的次數統計：<input type="text" name="" id="txt2"/>
        </label>

        <input type="submit"/>
    </fieldset>
</form>
<script>

    var txt1 = document.getElementById(‘txt1‘);
    var txt2 = document.getElementById(‘txt2‘);
    var num = 0;

    txt1.oninput = function () {  //用戶輸入時觸發

        num++;  //用戶每輸入一次，num自動加 1
        //將統計數顯示在txt2中
        txt2.value = num;
    }
    txt1.oninvalid = function () {  //驗證不通過時觸發
        this.setCustomValidity(‘親，請輸入正確哦‘);  //設置驗證不通過時的提示文字
    }

</script>
</body>
</html>

效果：

技術分享圖片

多媒體

在HTML5之前，在網頁上播放音頻/視頻的通用方法是利用Flash來播放。但是大多情況下，並非所有用戶的瀏覽器都安裝了Flash插件，由此使得音頻、視頻播放的處理變得非常復雜；並且移動設備的瀏覽器並不支持Flash插件。

H5裏面提供了視頻和音頻的標簽。

音頻

HTML5通過<audio>標簽來解決音頻播放的問題。

使用舉例：

    <audio src="music/yinyue.mp3" autoplay controls> </audio>

效果如下：

技術分享圖片

我們可以通過附加屬性，來更友好地控制音頻的播放，如：

autoplay 自動播放。寫成autoplay 或者 autoplay = ""，都可以。
controls 控制條。（建議把這個選項寫上，不然都看不到控件在哪裏）
loop 循環播放。
preload 預加載同時設置 autoplay 時，此屬性將失效。

處理兼容性問題：

由於版權等原因，不同的瀏覽器可支持播放的格式是不一樣的：

技術分享圖片

為了做到多瀏覽器支持，可以采取以下兼容性寫法：

<!--推薦的兼容寫法：-->
<audio controls loop>
    <source src="music/yinyue.mp3"/>
    <source src="music/yinyue.ogg"/>
    <source src="music/yinyue.wav"/>
    抱歉，你的瀏覽器暫不支持此音頻格式
</audio>

代碼解釋：如果識別不出音頻格式，就彈出那句“抱歉”。

視頻

HTML5通過<video>標簽來解決視頻播放的問題。

使用舉例：

    <video src="video/movie.mp4" controls autoplay></video>

我們可以通過附加屬性，來更友好地控制視頻的播放，如：

autoplay 自動播放。寫成autoplay 或者 autoplay = ""，都可以。
controls 控制條。（建議把這個選項寫上，不然都看不到控件在哪裏）
loop 循環播放。
preload 預加載同時設置 autoplay 時，此屬性將失效。
width：設置播放窗口寬度。
height：設置播放窗口的高度。

由於版權等原因，不同的瀏覽器可支持播放的格式是不一樣的：

技術分享圖片

兼容性寫法：

    <!--<video src="video/movie.mp4" controls  autoplay ></video>-->
    <!--  行內塊 display:inline-block -->
    <video controls autoplay>
        <source src="video/movie.mp4"/>
        <source src="video/movie.ogg"/>
        <source src="video/movie.webm"/>
        抱歉，不支持此視頻
    </video>

DOM 操作

獲取元素

document.querySelector("selector") 通過CSS選擇器獲取符合條件的第一個元素。
document.querySelectorAll("selector") 通過CSS選擇器獲取符合條件的所有元素，以類數組形式存在。

類名操作

Node.classList.add("class") 添加class
Node.classList.remove("class") 移除class
Node.classList.toggle("class") 切換class，有則移除，無則添加
Node.classList.contains("class") 檢測是否存在class

自定義屬性

js 裏可以通過 box1.index=100; box1.title 來自定義屬性和獲取屬性。

H5可以直接在標簽裏添加自定義屬性，但必須以 data- 開頭。

舉例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!-- 給標簽添加自定義屬性 必須以data-開頭 -->
<div class="box" title="盒子" data-my-name="smyhvae" data-content="我是一個div">div</div>
<script>
    var box = document.querySelector(‘.box‘);

    //自定義的屬性 需要通過 dateset[]方式來獲取
    console.log(box.dataset["content"]);  //打印結果：我是一個div
    console.log(box.dataset["myName"]);    //打印結果：smyhvae

    //設置自定義屬性的值
    var num = 100;
    num.index = 10;
    box.index = 100;
    box.dataset["content"] = "aaaa";

</script>
</body>
</html>

我的公眾號

想學習代碼之外的軟技能？不妨關註我的微信公眾號：生命團隊（id：vitateam）。

掃一掃，你將發現另一個全新的世界，而這將是一場美麗的意外：

技術分享圖片

HTML5詳解

類名生成單元素 gpo 服務密鑰 eat device ron 本文最初發表於博客園，並在GitHub上持續更新前端的系列文章。歡迎在GitHub上關註我，一起入門和進階前端。以下是正文。 HTML5的介紹 Web 技術發展時間線 1991 HTML 19

HTML5詳解

HTML5的介紹

Web 技術發展時間線

什麽是 HTML5

HTML5 的應用場景

HTML5 新增的內容

語義化的標簽

語義化的作用

H5在語義上的改進

H5中常用的新語義標簽

新語義標簽的兼容性處理

H5中的表單

H5中新增的表單類型

表單元素（標簽）

表單屬性

表單事件

多媒體

音頻

視頻

DOM 操作

獲取元素

類名操作

自定義屬性

我的公眾號

相關推薦