この記事では主に HTML 5.1 の 14 の新機能とその応用例を紹介します。記事内の紹介は非常に詳細であり、必要な方は以下を参照してください。
はじめに
ご存知のとおり、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" は タグと
<a href="#" target="_blank" rel="noopener">
The link won't make trouble anymore
</a> ログイン後にコピー
13. 画像タイトルの柔軟な処理
タグは、通常、画像、グラフ、イラストなどの視覚要素のコンテナとして、 要素に関連付けられたタイトルまたは凡例を表します。 、など。以前のバージョンの HTML では、 は最初または最後の の子タグとしてのみ使用できました。 HTML5.1 ではこの制限が緩和され、 コンテナ内のどこでも を使用できるようになりました。
<article>
<h1>The Headline of todays news </h1>
<figure>
<img src="petrolimage.jpeg" alt="Petrol price drops">
<figcaption>A man fueling up his car at petrol station</figcaption>
</figure>
<p>This is the forth hike in petrol prices in two month and the third in case of diesel in one fortnight.</p>
</article> ログイン後にコピー
12. Spellcheck
spellcheck は、値が空の文字列、true および false の列挙型プロパティです。ステータスを true に指定すると、要素のスペルと文法がチェックされます。
element.forceSpellCheck() は、ユーザーがテキスト要素に入力を集中させなかった場合でも、ユーザーエージェントにテキスト要素のスペルチェックと文法エラーを報告するよう強制します。
<p spellcheck="true">
<label>Name: <input spellcheck=" false" id="textbox"></label>
</p> ログイン後にコピー
11. 空のオプション
新しいバージョンの HTML では、空の 要素を作成できます。これは、 、、または 要素の子要素にすることができます。この機能は、ユーザーフレンドリーなフォームをデザインするときに役立つ場合があります。
10. Frame の全画面サポート
Frame 用に開発されたブール変数allowfullscreen 属性を使用すると、requestFullscreen() メソッドを使用してコンテンツを全画面で表示できるかどうかを制御できます。 たとえば、YouTube プレーヤーを埋め込む iframe を使用してみましょう。 プレーヤーがビデオを全画面で表示できるようにするには、allowfullscreen 属性を設定する必要があります。
<article>
<header>
<p><img src="/usericons/16235"> <b>Fred Flintstone</b></p>
<p><a href="/posts/30934" rel=bookmark>12:44</a> — <a href="#acl-503439551">Private Post</a></p>
</header>
<main>
<p>Check out my new video!</p>
<iframe title="Video" src="https://youtube.com/?id=92469812" allowfullscreen></iframe>
</main>
</article> ログイン後にコピー
9. ヘッダーとフッターを埋め込む
HTML5.1 では、ヘッダーとフッターを別のヘッダーに埋め込むことができます。段落コンテンツ内にヘッダーまたはフッターが含まれている場合は、ヘッダー要素にヘッダーまたはフッターを追加できます。この機能は、セマンティック段落要素に などの詳細タグを追加する場合に役立ちます。
以下のコードでは、 タグに タグが含まれています。
<article>
<header>
<h2>Lesson: How to cook chicken</h2>
<aside>
<header>
<h2>About the author: Tom Hank</h2>
<p><a href="./tomhank/">Contact him!</a></p>
</header>
<p>Expert in nothing but Cooking. The cookbook sideshow.</p>
</aside>
</header>
<p><ins>Pour the marinade into the zip-top bag with the chicken and seal it.
Remove as much air as possible from the bag and seal it. </ins></p>
</article> ログイン後にコピー
8. 幅ゼロの画像
新しいバージョンの HTML では、幅ゼロの画像を追加できます。この機能は、画像をユーザーに表示する必要がない場合に使用できます。 img 要素が画像の表示以外の目的で使用される場合 (たとえば、ページビューをカウントするサービスの一部として)、width 属性と height 属性に値 0 を使用します。幅が 0 の画像の場合は、空の属性を使用することをお勧めします。
7. 確認フォーム
新的 reportValidity() 方法允许你校验一个表单和重置结果，并且在浏览器适合位置向用户报告错误。用户代理可以报告一个以上的限制规则，假如单一元素同时遇到多个问题。对于这种情况，“密码”输入为必填内容但没有填，将会标识为错误。
<h2>Form validation</h2>
<p>Enter details</p>
<form>
<label>
Mandatory input <input type="password" name="password" required />
</label>
<button type="submit">Submit</button>
</form>
<script>
document.querySelector('form').reportValidity()
</script> ログイン後にコピー
6. 浏览器的上下文菜单
在 HTML 5.1 中, 你可以使用
标记来定义菜单，里面包含了一个或者多个 元素, 然后利用 contextmenu 属性将其绑定到任何元素上。 元素的 id 取值应该与我们想要为其添加上下文菜单的元素的 contextmenu 属性取值保持一致。每一个 都可以有如下三个表单项中的一个:
radio – 从一个分组中获取选项；
checkbox – 选择或者取消选择一个选项；
command – 在点击时执行一个动作。
<h2 contextmenu="popup-menu">
Right click to get the context menu demo.
</h2>
<menu type="context" id="popup-menu">
<menuitem type="checkbox" checked="true">Checkbox 1 </menuitem>
<menuitem type="command" label="Command" onclick="alert('WARNING')">Checkbox 2</menuitem>
<menuitem type="radio" name="group1">Radio button a</menuitem>
<menuitem type="radio" name="group1" checked="true">Radio button b</menuitem>
<menuitem type="checkbox" disabled>Disabled menu item</menuitem>
</menu> ログイン後にコピー
5. 在脚本和样式上使用加密随机数
加密随机数（cryptographic nonce ）是一个随机生成的数字，只能被使用一次, 而且针对每一次页面请求，它都得被生成出来。这个 nonce 属性可以被使用在
著者別の最新記事
2023-03-14 15:58:02
1970-01-01 08:00:00
2023-03-15 07:38:01
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
