ホームページ > 記事 > ウェブフロントエンド > HTML 5 の新機能の使用方法

HTML 5 の新機能の使用方法

php中世界最好的语言オリジナル: 2018-01-18 09:51:022264ブラウズ

今回は、HTML 5の新機能の使い方と、HTML 5の新機能を使用する際の注意点を紹介します。実際の事例を紹介しますので、見ていきましょう。

前書き

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

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

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

フィッシング攻撃を防ぐ

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

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

<a href="#" target="_blank" rel="noopener">
  The link won&#39;t make trouble anymore
</a>

画像タイトルの柔軟な処理

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

<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>

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

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

<p spellcheck="true">
 <label>Name: <input spellcheck=" false" id="textbox"></label>
</p>

新しいバージョンの HTML では、空の 5a07473c87748fb1bf73f23d45547ab8 要素を作成できます。これは、5b7a15bed8615d1b843806256bebea72、fc86e7b705049fc9d4fccc89a2e80ee3、または 221f08282418e2996498697df914ce4e 要素の子要素にすることができます。この機能は、ユーザーフレンドリーなフォームをデザインするときに役立つ場合があります。

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>

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

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

<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>

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。