html5の新機能まとめ（面接必須）-H5 チュートリアル-php.cn

HTML5 については、あまりにも多くのメディアで取り上げられているため、誰もがよく知っているはずです。したがって、フロントエンドの仕事の面接では、HTML5 関連の問題に遭遇するのは当然のことです。フロントエンドの面接をスムーズに通過したいと考えていますか。次の記事では、フロントエンドのインタビューに不可欠な HTML5 の新機能に関する関連情報を紹介します。必要な場合は参照してください。

はじめに

HTML5 とは: HTML5 は次世代の HTML であり、HTML、XHTML、および HTML DOM の新しい標準になります。今日はフロントエンドの面接でほぼ毎回聞かれる質問、それがhtml5の新機能についてお話しましょう。フロントエンドを学ぶ上で身につけなければならない基礎知識です。

新しい要素

html5 では、セマンティクスが向上した新しいタグ要素がいくつか追加されました。

構造要素

article 要素。ブログの記事など、コンテキストに関係のないページ上の独立したコンテンツの一部を表します。
aside要素は記事内容や補助情報以外の内容を表します。
header 要素。ページまたはページ全体のコンテンツブロックのヘッダーを表します。
hgroup 要素は、ページ内のブロックまたはページ全体のタイトルをグループ化するために使用されます。
footer 要素。ページまたはページ全体のコンテンツブロックのフッターを表します。
figure 要素。メディアコンテンツとそのタイトルのグループ化を表します。
section 要素は、章など、ページ上のコンテンツブロックを表します。
nav 要素は、ページ内のナビゲーションリンクを表します。

その他の要素

video要素。ビデオを定義するために使用されます。
audio 要素。オーディオを定義するために使用されます。
Canvas 要素は、グラフィックを表示するために使用されます。要素自体には動作はなく、キャンバスを提供するだけです。
embed要素は、さまざまなマルチメディアを挿入するために使用されます。形式は、Midi、Wav、AIFF、AU、MP3などです。
mark 要素。強調表示されたテキストを表示するために使用されます。
progress 要素。あらゆる種類のタスクの進行状況を表示するために使用されます。
meter 要素。重さと寸法を表し、事前定義された範囲内の測定値を定義します。
time 要素。日付または時刻を表示するために使用されます。
command 要素。コマンドボタンを表します。
details 要素は、ユーザーが必要とし、取得できる詳細情報を表示するために使用されます。
summary 要素。詳細要素に表示されるタイトルを定義するために使用されます。
datalist要素は、オプションのデータリストを表示するために使用されます。input要素と組み合わせて使用すると、入力値のドロップダウンリストを作成できます。
datagrid 要素は、オプションのデータリストをツリーリストの形式で表示するためにも使用されます。
keygen 要素。キーを生成することを意味します。
output 要素。さまざまなタイプの出力を表します。
source 要素は、メディア要素のメディアリソースを定義します。
menu要素。メニューリストを表します。
ルビ要素はルビコメントを表し、rt要素は文字の解釈や発音を表します。 rp 要素は、ruby 要素をサポートしていないブラウザで表示される内容を定義するために、ruby コメントで使用されます。
wbr 要素。ソフト改行を表します。 br 要素との違いは、br 要素はここで改行する必要があることを意味するのに対し、wbr 要素はブラウザウィンドウまたは親要素の幅が十分に広いことを意味することです。行の折り返しは行われません。幅が足りない場合は、ここで自動的に行の折り返しが行われます。
bdi 要素は、テキストのテキスト方向を定義し、周囲のテキストの方向設定から独立させます。
dialog 要素。ダイアログボックスまたはウィンドウを表します。

非推奨の要素

一部の純粋なパフォーマンス要素、一部のブラウザでのみサポートされる要素、およびユーザビリティに悪影響を与える要素が HTML5 で廃止されました。

純粋なパフォーマンス要素

純粋なパフォーマンス要素は、CSS で置き換えることができる要素です。 Basefont、big、center、font、s、strike、tt、u などの要素の機能は純粋にページ表示のためのものであり、HTML5 ではページ表示機能を CSS スタイルシートに配置して統一処理することを推奨しているため、これらの要素は無効化され、次のように置き換えられます。 css スタイル。

ユーザビリティに悪影響を与える要素

frameset要素、frame要素、noframes要素については、フレームフレームがWebページのユーザビリティに悪影響を与えるため、フレームフレームはhtml5ではサポートされなくなり、iframeのみがサポートされます。フレームがサポートされ、html5 同時に、frameset、frame、noframe の 3 つの要素が廃止されました。

一部のブラウザでのみサポートされている要素

アプレット、bgsound、blink、marqueeなどの要素は一部のブラウザでのみサポートされており、特にbgsound要素とmarquee要素はIEのみでサポートされているため、HTML5では廃止されました。アプレット要素は embed 要素または object 要素に置き換えることができ、bgsound 要素は audio 要素に置き換えることができ、マーキーは JavaScript プログラミングに置き換えることができます。

新しい API

Canvas API

上記の Canvas 要素は、グラフィックを表示するページのキャンバスを提供できます。 Canvas API と組み合わせることで、さまざまなグラフィック、チャート、画像、アニメーションを動的に生成し、このキャンバス上に表示できます。 Canvas は本質的にビットマップキャンバスであり、描画されたオブジェクトはページ DOM 構造にも名前空間にも属しません。各プリミティブをオブジェクトとして保存する必要がなく、実行パフォーマンスが非常に優れています。

Canvas API を使用して描画するには、まず Canvas 要素のコンテキストを取得し、次にコンテキストにカプセル化されたさまざまな描画関数を使用して描画する必要があります。

<canvas id="canvas">替代内容</canvas>
<script>
    var canvas = document.getElementById(&#39;canvas&#39;);
    var context =canvas.getContext("2d"); // 获取上下文
    //设置纯色
    context.fillStyle = "red";
    context.strokeStyle = "blue";
    // 实践表明在不设置fillStyle下的默认fillStyle为black
    context.fillRect(0, 0, 100, 100);
    // 实践表明在不设置strokeStyle下的默认strokeStyle为black
    context.strokeRect(120, 0, 100, 100);
</script>

ログイン後にコピー

SVG

SVG は html5 のもう 1 つのグラフィック機能であり、標準のベクターグラフィック、ファイル形式であり、独自の API を持っています。 HTML5 ではインライン SVG が導入され、SVG 要素を HTML マークアップに直接表示できるようになります。

<svg height=100 width=100><circle cx=50 cy=50 r=50 /></svg>

ログイン後にコピー

オーディオとビデオ

オーディオとビデオ要素の出現により、HTML5 メディアアプリケーションに新しいオプションが与えられ、開発者はプラグインを使用せずにオーディオとビデオを再生できるようになりました。これら 2 つの要素に対して、HTML5 仕様は、共通の完全なスクリプト可能なコントロール API を提供します。
HTML5 仕様が発表される前は、ページ上でビデオを再生する一般的な方法は、Flash、QuickTime、または Windows Media プラグインを使用してオーディオとビデオを HTML に埋め込むことでした。この方法と比較して、HTML5 メディアタグの使用には 2 つの大きな利点があります。。

ブラウザによってネイティブにサポートされる機能として、新しいオーディオ要素とビデオ要素はインストールする必要がありません。
メディア要素は、Web ページに共通の統合されたスクリプト可能な制御 API を提供します。

<video src="video.webm" controls>
    <object data="videoplayer.swf" type="application/x-shockwave-flash">
        <param name="movie" value="video.swf" />
    </object>
    Your browser does not support HTML5 video.
</video>

ログイン後にコピー

ブラウザのサポート検出

ブラウザが audio 要素または video 要素をサポートしているかどうかを検出する最も簡単な方法は、スクリプトを使用して動的に要素を作成し、特定の機能が存在するかどうかを検出することです。

var hasVideo = !!(document.createElement(&#39;video&#39;).canPlayType);

ログイン後にコピー

Geolocation API

html5 の Geolocation API (Geolocation API) は、ユーザーに位置情報の共有をリクエストできます。使い方は非常に簡単で、ユーザーが同意すると、ブラウザーは位置情報を返します。この情報は、HTML5 地理位置情報機能をサポートする基盤となるデバイス (ラップトップや携帯電話など) を通じてブラウザーに提供されます。位置情報は、緯度、経度の座標、およびその他のメタデータで構成されます。

位置情報はどこから来ますか?

Geolocation API は、アプリケーションのユーザーの位置を特定するためにデバイスがどの基盤テクノロジーを使用するかを指定しません。代わりに、これは単に位置情報を取得するための API であり、この API を通じて取得されるデータはある程度の精度しかなく、デバイスから返される位置が正確であるという保証はありません。デバイスは次のデータソースを使用できます:

IP アドレス
3次元座標
GPS
RFID、WiFi、Bluetooth から WiFi MAC アドレス
GSM または CDMA 電話の ID
ユーザーカスタムデータ

使い方

// 一次更新
navigator.geolocation.getCurrentPosition(updateLocation, handleLocationEror);
function updateLocation(position) {
    var latitude = position.coords.latitude;     // 纬度
    var longitude = position.coords.longitude;   // 经度
    var accuracy = position.coords.accuracy;     // 准确度
    var timestamp = position.coords.timestamp;   // 时间戳
}
// 错误处理函数
function handleLocationEror(error) {
    ....
}
// 重复更新
navigator.geolocation.watchPosition(updateLocation, handleLocationEror);
// 不再接受位置更新
navigator.geolocation.clearWatch(watchId);

ログイン後にコピー

Com通信API

クロスドキュメントメッセージング

セキュリティ上の考慮事項により、同じブラウザで実行されているフレーム、タブ、ウィンドウ間の通信は常に厳しく制限されています。ただし、さまざまなサイトのコンテンツをブラウザー内でやり取りするという正当なニーズがいくつかあります。この場合、ブラウザ内で直接通信メカニズムを提供できれば、これらのアプリケーションをより適切に編成できます。

HTML5 には、iframe、タブ、ウィンドウ間の安全なクロスソース通信を保証できるクロスドキュメントメッセージ通信という新機能が導入されています。 postMessage API はメッセージを送信する標準的な方法です。メッセージの送信は非常に簡単です:

window.postMessage(&#39;Hello, world&#39;, &#39;http://www.example.com/&#39;);

ログイン後にコピー

メッセージを受信するときは、ページにイベント処理関数を追加するだけです。メッセージが到着すると、メッセージのソースがチェックされて、メッセージを処理するかどうかが決定されます。

window.addEventListener("message", messageHandler, true);
function messageHandler(e) {
    switch(e.origin) {
        case "friend.example.com":
        // 处理消息
        processMessage(e.data);
        break;
    default: 
        // 消息来源无法识别
        // 消息被忽略
    }
}

ログイン後にコピー

メッセージイベントは、データ属性とオリジン属性を持つ DOM イベントです。 data 属性は送信者によって配信される実際のメッセージであり、origin 属性は送信元です。

XMLHttpRequest Level2

XMLHttpRequest API により、Ajax テクノロジーが可能になり、XMLHttpRequest の改良版として、XMLHttpRequest Level2 の機能が大幅に向上しました。主に 2 つの側面:

クロスオリジン XMLHttpRequest
Progress イベント

クロスオリジン XMLHttpRequest

过去，XMLHttpRequest仅限于同源通信，XMLHttpRequest Level2通过CORS实现了跨源XMLHttpRequest。跨源HTTP请求包含一个Origin头部，它为服务器提供HTTP请求的源信息。

WebSockets API

WebSockets是html5中最强大的通信功能，它定义了一个全双工通信信道，仅通过Web上的一个Socket即可进行通信。

WebSockets握手

为了建立WebSockets通信，客户端和服务器在初始握手时，将HTTP协议升级到WebSocket协议。一旦连接建立成功，就可以在全双工模式下在客户端和服务器之间来回传递WebSocket消息。

WebSockets接口

除了对WebSockets协议定义外，该规范还同时定义了用于JavaScript应用程序的WebSocket接口。WebSockets接口的使用很简单。要连接远程主机，只需要新建一个WebSocket实例，提供希望连接的对端URL。

Forms API

新表单元素

tel元素，表示电话号码。
email元素，表示电子邮件地址文本框。
url元素，表示网页的url。
search元素，用于搜索引擎，比如在站点顶部显示的搜索框。
range元素，特定值范围内的数值选择器，典型的显示方式是滑动条。
number元素，只包含数值的字段。

未来的表单元素

color元素，颜色选择器，基于调色盘或者取色板进行选择。
datetime元素，显示完整的日期和时间，包括时区。
datetime-local，显示日期和时间。
time元素，不含时区的时间选择器和指示器。
date元素，日期选择器。
week元素，某年中的周选择器。
month元素，某年中的月选择器。

新的表单特性和函数

placeholder

当用户还没输入值的时候，输入型控件可以通过placeholder特性向用户显示描述性说明或者提示信息。

<input name="name" placeholder="First and last name">

ログイン後にコピー

autocomplete

浏览器通过autocomplete特性能够知晓是否应该保存输入值以备将来使用。

autofocus

通过autofocus特性可以指定某个表单元素获得输入焦点，每个页面上只允许出现一个autofocus特性，如果设置了多个，则相当于未指定此行为。

spellcheck

可对带有文本内容的输入控件和textarea空间控制spellcheck属性。设置完后，会询问浏览器是否应该给出拼写检查结果反馈。spellcheck属性需要赋值。

list特性和datalist元素

通过组合使用list特性和datalist元素，开发人员能够为某个输入型控件构造一张选值列表。

<datalist id="contactList">
    <option value="a@qq.com"></option>
    <option value="b@qq.com"></option>
</datalist>
<input type="email" id="contatcs" list="contactList">

ログイン後にコピー

min和max

通过设置min和max特性，可以将range输入框的数值输入范围限定在最低值和最高值之间。可以只设置一个，也可以两个都设置，也可以都不设置。

step

对于输入型控件，设置其step特性能够指定输入值递增或者递减的粒度。

required

一旦为某输入型控件设置了required特性，那么此项必填，否则无法提交表单。

拖放API

draggable属性

如果网页元素的draggable元素为true，这个元素就是可以拖动的。

<p draggable="true">Draggable p</p>

ログイン後にコピー

拖放事件

拖动过程会触发很多事件，主要有下面这些：

dragstart：网页元素开始拖动时触发。
drag：被拖动的元素在拖动过程中持续触发。
dragenter：被拖动的元素进入目标元素时触发，应在目标元素监听该事件。
dragleave：被拖动的元素离开目标元素时触发，应在目标元素监听该事件。
dragover：被拖动元素停留在目标元素之中时持续触发，应在目标元素监听该事件。
drap：被拖动元素或从文件系统选中的文件，拖放落下时触发。
dragend：网页元素拖动结束时触发。

draggableElement.addEventListener(&#39;dragstart&#39;, function(e) {
    console.log(&#39;拖动开始！&#39;);
});

ログイン後にコピー

dataTransfer对象

拖动过程中，回调函数接受的事件参数，有一个dataTransfer属性，指向一个对象，包含与拖动相关的各种信息。

draggableElement.addEventListener(&#39;dragstart&#39;, function(event) {
    event.dataTransfer.setData(&#39;text&#39;, &#39;Hello World!&#39;);
});

ログイン後にコピー

dataTransfer对象的属性有：

dropEffect：拖放的操作类型，决定了浏览器如何显示鼠标形状，可能的值为copy、move、link和none。
effectAllowed：指定所允许的操作，可能的值为copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized（默认值，等同于all，即允许一切操作）。
files：包含一个FileList对象，表示拖放所涉及的文件，主要用于处理从文件系统拖入浏览器的文件。
types：储存在DataTransfer对象的数据的类型。

dataTransfer对象的方法有：

setData(format, data)：在dataTransfer对象上储存数据。第一个参数format用来指定储存的数据类型，比如text、url、text/html等。
getData(format)：从dataTransfer对象取出数据。
clearData(format)：清除dataTransfer对象所储存的数据。如果指定了format参数，则只清除该格式的数据，否则清除所有数据。
setDragImage(imgElement, x, y)：指定拖动过程中显示的图像。默认情况下，许多浏览器显示一个被拖动元素的半透明版本。参数imgElement必须是一个图像元素，而不是指向图像的路径，参数x和y表示图像相对于鼠标的位置。

Web Workers API

Javascript是单线程的。因此，持续时间较长的计算，回阻塞UI线程，进而导致无法在文本框中填入文本，单击按钮等，并且在大多数浏览器中，除非控制权返回，否则无法打开新的标签页。该问题的解决方案是Web Workers，可以让Web应用程序具备后台处理能力，对多线程的支持性非常好。

但是在Web Workers中执行的脚本不能访问该页面的window对象，也就是Web Workers不能直接访问Web页面和DOM API。虽然Web Workers不会导致浏览器UI停止响应，但是仍然会消耗CPU周期，导致系统反应速度变慢。

Web Storage API

Web Storage是html5引入的一个非常重要的功能，可以在客户端本地存储数据，类似html4的cookie，但可实现功能要比cookie强大的多。

sessionStorage

sessionStorage将数据保存在session中，浏览器关闭数据就消失。

localStorage

localStorage则一直将数据保存在客户端本地，除非手动删除，否则一直保存。

不管是sessionStorage，还是localStorage，可使用的API相同，常用的有如下几个（以localStorage为例）：