古人有云：溫故而知新。活到老，學到老，作為一枚前端的程序猿，不停的學習能夠讓我們對我們的技術有一個更加豐富的認識。這幾天，項目已經完成，但我發現自己的知識體系存在一些短板，特別是在H5方面，所以我又回過頭來對H5進行了一個簡單的溫習回顧，在此過程中，我又發現了很多好玩的東西。

　　H5是一個新的網絡標準，因此它提供了一些新的元素和屬性，反映了典型的現代用法。并且希望減少瀏覽器對于豐富的插件的依賴，通過一些語義化H5的新標簽及其特性有利于搜索引擎的索引整理、小屏幕裝置和視障人士使用。同時也為其他瀏覽器提供了一些新的功能。

　　在對H5的溫習回顧中，從新的標簽特性開始，擬一篇文章，文章有標題，開頭，內容包括章節，結尾，注釋等，所以在H5中有了如下標簽：

<header>這是頁面開頭</header> <article>這是文章內容<section>這是文章內容章節</section> </article> <aside>這是文章內容外的一些其他內容</aside> <footer>這是頁面結尾</footer>

以上標簽構成了一個頁面的基本框架，但是光有文本是不夠的，還需要一些有趣的東西，于是：

<embed src="horse.wav" /> 其他插件的引入 <canvas id="myCanvas" width="200" height="200">canvas畫布</canvas> <audio>音頻<section src='#'>音頻資源引入</section> </audio> <video>視頻<section src='#'>視頻資源引入</section> </video>

一個頁面中肯定要有圖片的插入，這時我們就會對圖片有個簡單的描述或者加上圖片的標題：

<figure><figcaption>黃浦江上的的盧浦大橋</figcaption><img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>

很好，接下來我們需要的是，給用戶一些良好的體驗：

<menu><command type="command">Click Me!</command> </menu><!--定義命令按鈕，比如單選按鈕、復選框或按鈕--><input id="myCar" list="cars" /> <datalist id="cars"><option value="BMW"><option value="Ford"><option value="Volvo"> </datalist><!--標簽定義選項列表--><form action="demo_keygen.asp" method="get">用戶名: <input type="text" name="usr_name">加密: <keygen name="security"><input type="submit"> </form><!--密鑰生成-->
以及<rt> 給一些字符注音。

我們接著往下對我們的頁面進行一個優化，讓用戶在視覺體驗上有一些良好的感覺：

<progress value="22" max="100"></progress> <!--加載時的一個進度條--><meter value="3" min="0" max="10">十分之三</meter> <meter value="0.6">60%</meter> <!--度量給定范圍的數據顯示--><form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0// 計算的邏輯(方式)<input type="range" id="a" value="50">100+<input type="number" id="b" value="50">=<output name="x" for="a b"></output>// 用于顯示計算結果 </form><!--對一些結果或者內容進行一個動態輸出-->

到這一步，一個頁面，加上之前H4的一些標簽以及CSS、CSS3樣式混合使用進來，一個基本的頁面就完成了。如果還需要一些更加深入的交互驗證的良好體驗：

　　 <input type="button" value="按鈕"/><!-- 按鈕 --><input type="submit" value="提交"/>><!-- 提交按鈕 --><input type="color"/><!-- 選色板 --><input type="date"/><!-- 時間 年月日 --><input type="datetime"/><!-- UTC時間 存在兼容 --><input type="datetime-local"/><!-- 當地時間 年月日時分 --><input type="week"/><!-- 周 X年X周 --><input type="time"/><!-- 時間 時分 --><input type="month"/><!-- 月 年月 --><input type="year"/><!-- 年 --><input type="email"/><!-- 電子郵箱 --><input type="file" value="瀏覽"/><!-- 文件上傳 --><input type="hidden"/><!-- 存儲一些少量的信息 --><input type="image" /><!-- 圖片 --><input type="password" /><!-- 圖片 --><input type="range" /><!-- 數字控件 --><input type="radio" name="sex"/><!-- 單選 --><input type="radio" name="sex"/><!-- 單選 --><input type="checkbox" name="hobby"/><!-- 復選 --><input type="search"/><!-- 搜索 --><input type="tel"/><!-- 手機號 手機鍵盤調出數字鍵盤 --><input type="url"/><!-- URL地址 -->

如此一來，我們的頁面就更加地豐富多彩了。

　　根據這條邏輯線，對H5的記憶也格外的清晰，以上便是我在對H5的溫習回顧中，整理出來的，其實H5增添的一些新標簽以及特性并非沒有邏輯性，仔細一看，它們還是挺可愛的，你們說呢？

轉載于:https://www.cnblogs.com/Lxb98117/p/HTML5.html

總結

以上是生活随笔為你收集整理的浅谈 温故知新——HTML5！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。