HTML5能為我們帶來什麼?面試必備！
- 黄舟原創
- 2017-02-16 14:45:241480瀏覽
說起HTML5，表面上是說它是HTML更新的第五個版本，而實際上，HTML5有很多內在的東西。正是因為HTML5的出現，使得web應用的開發變得更加方便快捷，更加標準化，提高了web應用的效能。可以說HTML5是web應用程式現在能夠被廣泛接受。
首先我們來看看HTML5為我們帶來了哪些新功能。
1、本地快取
本地儲存Web storage的作用是在網站中把有用的資訊儲存到本地的電腦或行動裝置上，然後根據實際需要從本地讀取資訊。它提供兩種儲存類型API接口，分別是sessionStorage和localhostStorage，其中前者在會話期間內有效，後者就存儲在本地，並且存儲是永久的，但是兩個的API使用基本上是相同的。
利用HTML5的本地儲存功能，我們可以進行使用者資訊的保存（類似HTML4中的cookie）、資料儲存與讀取等諸多功能。注意Web Storage官方建議每個網站的本地快取大小為5MB，這相比於HTML4中cookie的幾kb要大得多，功能也更強大。
接下來利用程式碼具體解釋一下Web Storage的使用方式，以localStorage為例，js程式碼如下：
window.onload = function(){localStorage.clear();//清除之前localStorage存储的全部数据localStorage.setItem(“userData”,”storage demo”）//setItem方法可以设定缓存数据的值，采用键值对的形式}除了基本操作，還可以對Storage事件進行監聽：
window.onload = function(){window.addEventListener(“storage”,function(e){console.log(e);
},true);
}除了基本操作，還可以對Storage事件進行監聽：
CACHE MAINFEST index.html test.js NETWORK /images/
2、離線快取
離線快取可以在即使沒有網路的狀態下web應用仍能正常運行，非常有實用價值。 HTML5的離線快取功能為web應用（尤其是行動應用程式）的開發建立了良好的條件。 開始使用離線快取功能很簡單，只要在html標籤中加入mainfest屬性，並指定mainfest檔案即可。 mainfest檔案的作用是告訴瀏覽器哪些檔案需要離線快取操作。舉例說明
文件的應用：<pre class="prettyprint"><mime-mapping>//.mainfest文件是MIME类型文件<extension>mainfest</extension><mime-type>text/cache-mainfest<mime-type></mime-mapping></pre>這些內容就表明，index.html和test.js這兩個文件被定義為快取文件，跟在後面
CACHE MAINFEST
CACHE MAINFEST
。當網路無法使用或不在線上時，此部分檔案會透過本機快取直接讀取。 NETWORK後面的檔案定義為無論這些檔案是否已經被快取，都必須從網路下載。除此之外，還要對.mainfest檔案進行必要的配置，在web.xml中
<details><summary>This is the summary</summary>This contains detail things.<details>
有了HTML5離線快取技術，就可以使網站或者web開發的應用在無網路的情況下也可以進行訪問，大大減少了網絡消耗，也讓利用web開發出來的app性能大幅提升了。 3、新型標籤①佈局語義化標籤 HTML5新增了許多語義化的佈局標籤，用以代替之前每個佈局都要使用p的無語義性的混亂局面。 HTML5提供的新標籤包括、<footer></footer>、
◎使用語意化的版面配置標籤較有利於搜尋引擎的抓取◎語意化標籤簡潔，便於軟體的維護與二次開發使用語意化標籤，更加符合現在的web標準。
②其他標籤
多媒體標籤。例如標籤可以支援影片播放功能，使用HTML5的video標籤配合一些web影片播放器製作外掛可以製作出效果很好的網頁播放器。這裡推薦video.js，比較美觀，表現較好，學習成本比較低。
畫布，將在後面進行詳細介紹。表單相關的新標籤，將在後面進行詳細介紹。 4、 Geolocation地理定位
目前，地理定位基本上是每個行動app都支援的功能。而HTML5也開始支援地理定位功能，這為利用HTML5開發行動app提供了極大幫助。 Geolocation
的使用方法很簡單，主要有三種方法： getCurrentPosition()
:取得目前使用者的地理位置資訊watchPosition():
於停止watchPosition()的輪詢
表單一直都是一個web不可缺少的部分。 HTML5中提供了非常豐富的表單標籤和屬性。首先我們來了解幾個HTML5為表單控制項新新增的標籤。
<details><summary>This is the summary</summary>This contains detail things.<details>
除了新的标签，input标签还增加了许多类型(type)，包括search/email/number/type/range/url等。
表单标签的新增属性有placeholder/autofocus/list/autocomplete等。
HTML5极大地丰富了表单内容，让编写代码变得更加简单，实现功能更加快捷。
7、强大的canvas
个人认为canvas是HTML5中最强大的功能，有了canvas，HTML5在图像这方面变得无所不能（有关canvas的具体实例请见其他博客）。
canvas可以进行切图、画图、图像的像素级操作等一系列功能，十分强大。说起canvas，应用最多的应该是基于HTML5的游戏。利用HTML5的canvas功能，配合js，可以开发出各种各样的游戏。同时，像素级的操作也让HTML5 canvas可以处理许多细致的图像问题。
创建一个canvas画布很容易，在html中使用5ba626b379994d53f7acf72a64f9b697标签，js代码如下：
var canvas = document.getElementById(canvas1);var context = canvas.getContext(“2d”);
canvas可以创建丰富的图形，包括基本图形、函数曲线等。
综上，HTML5提供的新功能，使HTML5在移动应用开发、游戏开发、规范开发等方面，都有了质的飞跃。深入学习HTML5,十分必要。
说起HTML5，表面上是说它是HTML更新的第五个版本，而实际上，HTML5有很多内在的东西。正是因为HTML5的出现，使得web应用的开发变得更加方便快捷，更加标准化，提高了web应用的性能。可以说HTML5是web应用现在能够被广泛接受。
首先我们来看一下HTML5给我们带来了哪些新功能。
1、本地缓存
本地存储Web storage的作用是在网站中把有用的信息存储到本地的计算机或移动设备上，然后根据实际需要从本地读取信息。它提供两种存储类型API接口，分别是sessionStorage和localhostStorage，其中前者在会话期间内有效，后者就存储在本地，并且存储是永久的，但是两个的API使用基本上是相同的。
利用HTML5的本地存储功能，我们可以进行用户信息的保存（类似于HTML4中的cookie）、数据存储与读取等诸多功能。注意Web Storage官方建议每个网站的本地缓存大小为5MB，这相比于HTML4中cookie的几kb要大得多，功能也更强大。
接下来利用代码来具体解释一下Web Storage的使用方式，以localStorage为例，js代码如下：
window.onload = function(){localStorage.clear();//清除之前localStorage存储的全部数据localStorage.setItem(“userData”,”storage demo”）//setItem方法可以设定缓存数据的值，采用键值对的形式}除了基本操作，还可以对Storage事件进行监听：
window.onload = function(){window.addEventListener(“storage”,function(e){console.log(e);
},true);
}2、离线缓存
离线缓存可以在即使没有网络的状态下web应用仍能正常运行，非常有实用价值。HTML5的离线缓存功能为web应用（尤其是移动应用）的开发建立了良好的条件。
开始使用离线缓存功能很简单，只要在html标签中加入mainfest属性，并指定mainfest文件即可。mainfest文件的作用是告诉浏览器哪些文件需要进行离线缓存操作。举例说明.mainfest文件的应用：
CACHE MAINFEST index.html test.js NETWORK /images/
这些内容就表明，index.html和test.js这两个文件被定义为缓存文件，跟在CACHE MAINFEST后面。当网络不可用或不在线时，此部分文件会通过本地缓存直接读取。NETWORK后面的文件定义为无论这些文件是否已经被缓存，都必须从网络中下载。
除此之外，还要对.mainfest文件进行必要的配置，在web.xml中
有了HTML5离线缓存技术，就可以使网站或者web开发的应用在无网络的情况下也可以进行访问，大大减少了网络消耗，也让利用web开发出来的app性能大幅提升了。
3、新型标签
①布局语义化标签
HTML5新增了许多语义化的布局标签，用以代替之前每个布局都要使用p的无语义性的混乱局面。HTML5提供的新标签包括93f0f5c25f18dab9d176bd4f6de5d30e、c37f8231a37e88427e62669260f0074d、15221ee8cba27fc1d7a26c47a001eb9b、23c3de37f2f9ebcb477c4a90aac6fffd等，基本一个页面的每个布局部分，都有一个对应的标签。
HTML5语义化标签的主要作用主要体现在以下三个方面：
◎对移动端设备更加友好
◎使用语义化的布局标签更有利于搜索引擎的的抓取
◎语义化标签简洁，便于软件的维护和二次开发
使用语义化标签，更加符合现在的web标准。
②其他标签
HTML5增加了许多新功能，这些功能有的对应标签。
多媒体标签。比如标签可以支持视频播放功能，使用HTML5的video标签配合一些web视频播放器制作插件可以制作出效果很好的网页播放器。这里推荐video.js，比较美观，性能较好，且学习成本比较低。
画布，将在后面进行详细介绍。
表单相关的新标签，将在后面进行详细介绍。
4、 Geolocation地理定位
目前，地理定位基本上是每个移动app都支持的功能。而HTML5也开始支持地理定位功能，这给利用HTML5开发移动app提供了极大帮助。 Geolocation的使用方法很简单，主要有三个方法： getCurrentPosition():获取当前用户的地理位置信息 watchPosition():定期轮询设备的位置 clearWatch():用于停止watchPosition()的轮询
目前大部分浏览器都支持Geolocation API。
6、增强的表单
表单一直都是一个web不可缺少的部分。HTML5中提供了非常丰富的表单标签和属性。首先我们来了解几个HTML5为表单控件新添加的标签。 49c6123c49c6be380cb91db06cd3bfa9/6ecb87e5318a36c03c59e25d55f43372:用于设置进度条，配合js即可方便的搭建出一个动态进度条。 a5e9d42b316b6d06c62de0deffc36939+631fb227578dfffda61e1fa4d04b7d25:零js即可创建折叠内容，结构如下：
<details><summary>This is the summary</summary>This contains detail things.<details>
除了新的标签，input标签还增加了许多类型(type)，包括search/email/number/type/range/url等。
表单标签的新增属性有placeholder/autofocus/list/autocomplete等。
HTML5极大地丰富了表单内容，让编写代码变得更加简单，实现功能更加快捷。
7、强大的canvas
个人认为canvas是HTML5中最强大的功能，有了canvas，HTML5在图像这方面变得无所不能（有关canvas的具体实例请见其他博客）。
canvas可以进行切图、画图、图像的像素级操作等一系列功能，十分强大。说起canvas，应用最多的应该是基于HTML5的游戏。利用HTML5的canvas功能，配合js，可以开发出各种各样的游戏。同时，像素级的操作也让HTML5 canvas可以处理许多细致的图像问题。
创建一个canvas画布很容易，在html中使用5ba626b379994d53f7acf72a64f9b697标签，js代码如下：
var canvas = document.getElementById(canvas1);var context = canvas.getContext(“2d”);
canvas可以创建丰富的图形，包括基本图形、函数曲线等。
综上，HTML5提供的新功能，使HTML5在移动应用开发、游戏开发、规范开发等方面，都有了质的飞跃。深入学习HTML5,十分必要。
以上就是HTML5能为我们带来什么? 面试必备！的内容，更多相关内容请关注PHP中文网（www.php.cn）！