HTML 5.1 - 14の新機能と使い方のサンプルコードを詳しく解説（写真）-H5 チュートリアル-php.cn

HTML5 は、作成されたプロトコルが世界中で使用できるように、インターネット コミュニティ全体に標準を提供する組織である World Wide Web Consortium (W3C) に属しています。 2016 年 11 月、W3C は長年の HTML 5 標準を更新し、2 年ぶりのマイナー アップデートを行いました。 HTML 5.1 用に当初提案された機能の多くは、設計上の欠陥とブラウザ ベンダーからのサポートの欠如により削除されました。

HTML 5.1 にはいくつかの要素や機能の改善が加えられていますが、それでも小規模なアップデートです。新しい要素の一部には、 、 、 、 を含む組み合わせタグが含まれており、開発者が創造性とコンテンツを表現するためのより多くの方法を提供します。

W3C は HTML 5.2 ドラフトの開発を開始しており、2017 年末までにリリースされる予定です。ここで紹介するのは、バージョン 5.1 で導入された新機能と改善点です。これらの機能を利用するために JavaScript を使用する必要はありません。すべてのブラウザーがこれらの機能をサポートしているわけではないため、本番環境で使用する前にブラウザーのサポートを確認することをお勧めします 。

14. フィッシング攻撃を防ぐ target ='_blank' を使用するほとんどの人は、興味深い事実を知りません。新しく開いたタブによって、window.opener.location がフィッシング ページに変更される可能性があります。開いているページで悪意のある JavaScript コードをユーザーに代わって実行します。ユーザーは自分が開いたページが安全であると信頼しているため、何の疑いも持ちません。

この問題を完全に解消するために、HTML 5.1 ではブラウザのコンテキストを分離することで rel="noopener" 属性の使用を標準化しました。 rel="noopener" は タグと で使用できます。

りー 13. 画像タイトルの柔軟な処理 タグは、 要素に関連付けられたタイトルまたは凡例を表し、通常は写真、グラフ、イラストなどの視覚要素のコンテナーとして使用されます。以前のバージョンの HTML では、 は最初または最後の の子タグとしてのみ使用できました。 HTML5.1 ではこの制限が緩和され、 コンテナ内のどこでも を使用できるようになりました。

りー 12. スペルチェック スペルチェックは、値が空の文字列、true、または false の列挙プロパティです。ステータスを true に指定すると、要素のスペルと文法がチェックされます。

element.forceSpellCheck() は、ユーザーがテキスト要素に入力を集中させなかった場合でも、ユーザーエージェントにテキスト要素のスペルチェックと文法エラーを報告させるように強制します。

りー 11. 空のオプション 新しいバージョンの HTML では、空の 要素を作成できます。 、 、または の子要素にすることができます。この機能は、ユーザーフレンドリーなフォームを設計するときに役立つ場合があります。

10. Frameのフルスクリーンをサポート Frame 用に開発されたブール変数であるallowfullscreen プロパティを使用すると、requestFullscreen() メソッドを使用してコンテンツを全画面で表示できるかどうかを制御できます。 たとえば、YouTube プレーヤーに埋め込まれた iframe を使用してみましょう。 プレーヤーがビデオを全画面で表示できるようにするには、allowfullscreen 属性を設定する必要があります。

りー 9. ヘッダーとフッターを埋め込む HTML5.1 では、ヘッダーとフッターを別のヘッダー内に埋め込むことができます。段落コンテンツ内にヘッダーまたはフッターが含まれている場合は、ヘッダー要素にヘッダーまたはフッターを追加できます。この機能は、セマンティック段落要素に などの詳細タグを追加する場合に非常に便利です。

以下のコードでは、 タグに タグが含まれています。

りー 8. 幅ゼロの画像 新しいバージョンの HTML では、幅がゼロの画像を追加できます。この機能は、画像をユーザーに表示する必要がない場合に使用できます。 img 要素が画像の表示以外の目的で使用される場合 (たとえば、ページビューをカウントするサービスの一部として)、width 属性と height 属性に値 0 を使用します。幅が 0 の画像の場合は、空の属性を使用することをお勧めします。

りー 7. 確認フォーム

新的 reportValidity() 方法允许你校验一个表单和重置结果，并且在浏览器适合位置向用户报告错误。用户代理可以报告一个以上的限制规则，假如单一元素同时遇到多个问题。对于这种情况，“密码”输入为必填内容但没有填，将会标识为错误。

Form validation Enter details

Mandatory input Submit document.querySelector('form').reportValidity() ログイン後にコピー 6. 浏览器的上下文菜单

在 HTML 5.1 中, 你可以使用 标记来定义菜单，里面包含了一个或者多个 元素, 然后利用 contextmenu 属性将其绑定到任何元素上。 元素的 id 取值应该与我们想要为其添加上下文菜单的元素的 contextmenu 属性取值保持一致。

每一个 都可以有如下三个表单项中的一个:

radio – 从一个分组中获取选项；

checkbox – 选择或者取消选择一个选项；

command – 在点击时执行一个动作。

Right click to get the context menu demo. Checkbox 1 Checkbox 2 Radio button a Radio button b Disabled menu item ログイン後にコピー 5. 在脚本和样式上使用加密随机数 加密随机数（cryptographic nonce ）是一个随机生成的数字，只能被使用一次, 而且针对每一次页面请求，它都得被生成出来。这个 nonce 属性可以被使用在 和 元素中。

它一般被用在一个网站的内容安全策略之中，以决定一个特定的样式和脚本是否应该在页面上被实现。在下面所提供的代码中，这个 value 是硬编码的，不过在实际的使用场景中，这个值是随机生成的。

The JavaScript Code ログイン後にコピー 4、反序链接关系 rev 属性在 HTML4 里有定义，但是它并没出现在 HTML5 里。W3C 决定在 和 元素里重新包含 rev 属性。rev 属性标识当前和反向的链接文档的关系。它已经被包含来支持广泛使用数据结构标记格式，RDFa。

让我们用两个文档来举个例子，每个包含一课程，在它们之间的链接可以使用如下 rel 和 rev 的属性来定义。

//Document with URL "chapter1.html" //Document with URL "chapter2.html" ログイン後にコピー 3. 显示/隐藏信息 新的 和 元素允许您向一段内容添加扩展信息。您可以通过单击元素来显示或隐藏一个附加信息块。 默认情况下是隐藏附加信息的。

在代码中，您应该将 标记放在 标记内，如下所示。 标签之后，你可以添加要隐藏的其他内容。

Error Message This file hasn't been download due to network error. File name: Passcode.txt File size: 8 KB Error code: 342a ログイン後にコピー 2. 更多的输入项类型

HTML 输入项元素扩充了三个输入类型 – week, month 以及 datetime-local。

正如其名称所表明的，头两个元素可以让用户选择一个星期值和一个月份值。根据浏览器的支持情况不同，它们俩都会被渲染成一个下拉显示的日历，让你可以选择一年中一个特定的星期或者月份。

datatime-local 表示的是一个日期和时间的输入域, 不过没有时区设置。其数据可以采用跟 month 或者 week 输入项类似的方法来选定, 而时间可以单独输入。

Week, Month and Datetime-local Choose a week: Birthday (month and year): Joining (date and time): ログイン後にコピー 1. 响应式图像 W3C 引入了一些功能特性，无需使用 CSS 就可以实现响应式图像。它们是 …

srcset 图像属性

srcset 属性让你可以指定一个多个可选的图像来源，对应于不同的像素分辨率。它将允许浏览器根据用户设备的不同选择合适质量的实现来进行显示。例如，对于使用网络比较慢的移动设备的用户，显示一张低分辨率的图片会比较好。

你可以使用 srcset 属性并且带上它自有的 x 修饰符来描述每一个图片的像素比例, 如果用户的像素比例等于 3，就会显示 high-res 这张图片。

ログイン後にコピー 除了像素比例之外，你也可以选择使用 w 修饰符来指定不同尺寸大小的图片。在如下示例中，high-res 图片被定义成在宽度为 1600px 时显示。

ログイン後にコピー 图片属性的大小

大多数时间，开发者喜欢根据不同屏幕大小来显示不同图片。这样可以使用 sizes 属性。它可以让你把屏幕宽度转换成图片所需要的空间，然后使用 srcset 属性选择合适图片。例如：

ログイン後にコピー 在这个例子中，sizes 属性定义图片宽度为窗口宽度的 100% 时，大于 25em，或者 60% 的宽度时，小于等于 25em。

图片元素

图片元素允许你使用几个不同屏幕大小的源来定义图片。这样可以使用 元素里的 属性，和描述多个 子元素。

单独的 标签并不会显示任何东西。你可以定义默认图片源作为 src 属性的值，在 srcset 属性里使用可选的图片源，如下所示：

ログイン後にコピー