HTML5 は私たちに何をもたらしますか? 面接には欠かせないものです。-H5 チュートリアル-php.cn

HTML5といえば、表面的にはHTMLの5回目の更新版ということですが、実はHTML5には固有のものがたくさんあります。 HTML5 の登場により、Web アプリケーションの開発はより便利になり、高速になり、標準化され、Web アプリケーションのパフォーマンスが向上しました。 HTML5 は現在、Web アプリケーションに広く受け入れられていると言えます。
まず、HTML5 がもたらす新機能を見てみましょう。

1. ローカルキャッシュ

ローカルストレージ Web ストレージ の機能は、ローカルコンピューターまたはモバイルデバイス上の Web サイトに有用な情報を保存し、実際のニーズに応じてローカルから情報を読み取ることです。。 sessionStorage と localhostStorage という 2 つのストレージタイプの API インターフェイスが提供されます。前者はセッション中に有効であり、後者はローカルに保存され、ストレージは永続的です。 2 つの API の使用方法は基本的に同じです。 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中

<mime-mapping>//.mainfest文件是MIME类型文件<extension>mainfest</extension><mime-type>text/cache-mainfest<mime-type></mime-mapping>

ログイン後にコピー

有了HTML5离线缓存技术，就可以使网站或者web开发的应用在无网络的情况下也可以进行访问，大大减少了网络消耗，也让利用web开发出来的app性能大幅提升了。

3、新型标签

①布局语义化标签
HTML5新增了许多语义化的布局标签，用以代替之前每个布局都要使用p的无语义性的混乱局面。HTML5提供的新标签包括<head>、<footer>、<aside>、<article>等，基本一个页面的每个布局部分，都有一个对应的标签。
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为表单控件新添加的标签。
<meter>/<progress>:用于设置进度条，配合js即可方便的搭建出一个动态进度条。
<details>+<summary>:HTML5 のローカルストレージ機能を使用すると、ユーザー情報の保存 (HTML4 の Cookie に似ています)、データの保存と読み取り、その他多くの機能が可能になります。 Web Storage は、各 Web サイトのローカルキャッシュサイズを 5 MB にすることを公式に推奨しています。これは、HTML4 の数 kb の cookie よりもはるかに大きく強力です。

次に、Web Storage の使用方法を詳しく説明します。localStorage を例として、js コードは次のとおりです。基本的な操作に加えて、ストレージイベントを処理することもできます。モニター: 🎜

<details><summary>This is the summary</summary>This contains detail things.<details>

ログイン後にコピー

🎜2. オフラインキャッシュ🎜🎜 オフラインキャッシュは、ネットワークがない場合でも Web アプリケーションを正常に実行でき、非常に実用的な価値があります。 HTML5 のオフラインキャッシュ機能は、Web アプリケーション (特にモバイルアプリケーション) の開発に適した条件を確立します。 🎜🎜オフラインキャッシュ機能の使用を開始するには、html タグに mainfest 属性を追加し、mainfest ファイルを指定するだけです。 mainfest ファイルの機能は、どのファイルをオフラインでキャッシュする必要があるかをブラウザに伝えることです。 .mainfest ファイルのアプリケーションの例: 🎜

var canvas = document.getElementById(canvas1);var context = canvas.getContext(“2d”);

ログイン後にコピー

🎜これらの内容は、2 つのファイル index.html と test.js が定義ファイルをキャッシュするには、CACHE MAINFEST に従います。ネットワークが利用できない場合、またはオフラインの場合、ファイルのこの部分はローカルキャッシュから直接読み取られます。 NETWORK に続くファイルは、キャッシュされているかどうかに関係なく、ネットワークからダウンロードする必要があるファイルとして定義されます。 🎜さらに、web.xml で必要な設定を行う必要があります🎜

window.onload = function(){localStorage.clear();//清除之前localStorage存储的全部数据localStorage.setItem(“userData”,”storage demo”）//setItem方法可以设定缓存数据的值，采用键值对的形式}

ログイン後にコピー

🎜 HTML5 オフラインキャッシュテクノロジを使用すると、Access はネットワーク消費を大幅に削減し、Web アプリケーションを実行できます。 Web を使用して開発されたアプリのパフォーマンス。 🎜🎜3. 新しいタグ 🎜🎜① レイアウトセマンティックタグ 🎜HTML5 は、すべてのレイアウトで p を使用する必要があった以前の意味論的に混沌とした状況を置き換えるために、多くの新しいセマンティックレイアウトタグを追加しました。 HTML5 で提供される新しいタグには、<head>、<footer>、<aside>、

<article>< などがあります。 /code> など。基本的に、ページの各レイアウト部分には対応するタグがあります。 🎜HTML5 セマンティック タグの主な機能は、主に次の 3 つの側面に反映されます: 🎜◎モバイル デバイスにさらに優しい🎜◎セマンティック レイアウト タグを使用すると、検索エンジンのクローリングがより容易になります🎜◎セマンティック タグは簡潔でソフトウェアにとって便利です。二次開発では、現在の Web 標準により準拠したセマンティック タグを使用します。 🎜🎜② その他のタグ 🎜HTML5 では多くの新機能が追加されており、その一部には対応するタグがあります。 🎜マルチメディアタグ。たとえば、このタグは、HTML5 ビデオ タグと一部の Web ビデオ プレーヤー制作プラグインを使用すると、非常に効果的な Web プレーヤーを作成できます。ここでは、Video.js が推奨されます。Video.js の方が美しく、パフォーマンスが高く、学習コストが低くなります。 🎜キャンバスについては後ほど詳しくご紹介します。 🎜フォームに関する新しいタグについては後ほど詳しく紹介します。 🎜🎜4. 地理位置情報🎜🎜現在、地理位置情報は基本的にすべてのモバイルアプリでサポートされている機能です。 HTML5 は位置情報機能のサポートも開始しており、HTML5 を使用したモバイル アプリの開発に大きな助けとなります。 🎜Geolocation の使用は非常に簡単で、主に 3 つのメソッドがあります: 🎜getCurrentPosition(): 現在のユーザーの地理的位置情報を取得します🎜watchPosition():</ code >デバイスの位置を定期的にポーリングします🎜<code>clearWatch(): watchPosition() のポーリングを停止するために使用されます🎜現在、ほとんどのブラウザーは Geolocation API をサポートしています。 🎜🎜6. 強化されたフォーム🎜🎜 フォームは常に Web に不可欠な部分です。 HTML5 は、非常に豊富なフォーム タグと属性のセットを提供します。まず、HTML5 によってフォーム コントロールに追加されたいくつかの新しいタグについて学びましょう。 🎜<meter>/<progress>: を使用してプログレス バーを設定すると、動的なプログレス バーを簡単に構築できます。 🎜<details>+<summary>:ゼロ 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中使用<canvas>标签，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中
<mime-mapping>//.mainfest文件是MIME类型文件<extension>mainfest</extension><mime-type>text/cache-mainfest<mime-type></mime-mapping>
ログイン後にコピー
ログイン後にコピー
有了HTML5离线缓存技术，就可以使网站或者web开发的应用在无网络的情况下也可以进行访问，大大减少了网络消耗，也让利用web开发出来的app性能大幅提升了。
3、新型标签
①布局语义化标签 
HTML5新增了许多语义化的布局标签，用以代替之前每个布局都要使用p的无语义性的混乱局面。HTML5提供的新标签包括<head>、<footer>、<aside>、<article>等，基本一个页面的每个布局部分，都有一个对应的标签。 
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为表单控件新添加的标签。 
<meter>/<progress>:用于设置进度条，配合js即可方便的搭建出一个动态进度条。 
<details>+<summary>:零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中使用<canvas>标签，js代码如下：
var canvas = document.getElementById(canvas1);var context = canvas.getContext(“2d”);
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
canvas可以创建丰富的图形，包括基本图形、函数曲线等。
综上，HTML5提供的新功能，使HTML5在移动应用开发、游戏开发、规范开发等方面，都有了质的飞跃。深入学习HTML5,十分必要。
 以上就是HTML5能为我们带来什么? 面试必备！的内容，更多相关内容请关注PHP中文网（www.php.cn）！