html5.1：Web開発の新しい時代

HTML5のクリエイティブなアニメーション制作を探索し、畫面録音チュートリアル「HTML5 Canvasを使用してアニメーションを作成」をご覧ください。

コアポイント

• html 5.1 htmlの最新バージョンとして、menuおよびmenuitems要素を備えたコンテキストメニューの作成、detailsおよびsummary要素を含む折りたたみ可能なコンテンツを作成するなど、多くの新機能と改善が導入されています。新しいフォームの入力タイプの：month、week、およびdatetime-local。
• このバージョンには、CSSを使用してレスポンシブ畫像を実裝する機能も含まれています。たとえば、畫像屬性は、ユーザーの畫面サイズに応じて異なる方法で使用されます寫真。 srcset sizesHTML 5.1は、フォームを検証し、ユーザーに新しいブール屬性を導入します。 picture
ブラウザベンダーからの関心がないため、HTML 5.1の最初のドラフトで最初に提案されていたいくつかの機能は、すべての子供の要素のユーザーインタラクションを無効にするために使用される
• 屬性や、使用の使用を含め、最終的に削除されました。ポップアップを実裝するためのネイティブポップアップform.reportValidity()要素。 allowfullscreen element.forceSpellCheck()
• html 5.1概要inert<dialog></dialog>
約2年前にリリースされたHTML5標準は、Web開発コミュニティに感覚を引き起こしました。これは、新機能の印象的なリストが含まれているだけでなく、1999年のHTML 4.01のリリース以來のHTMLの最初の主要な更新のためでもあるためです。今日、「モダンな」HTML5標準の使用を誇っているWebサイトをいくつか見ることができます。

幸いなことに、次のバージョンのHTMLを取得するためにそれほど長く待つ必要はありません。 2015年10月、W3Cは、HTML5から殘った問題のいくつかを解決することを目的として、HTML 5.1の起草を開始しました。多くの反復後、2016年6月に「候補者の勧告」ステータスに達し、2016年9月に「推奨される推奨」ステータスに達し、2016年11月にW3C推薦基準になりました。この開発に従っている人は、それがでこぼこのプロセスであることに気付くかもしれません。元のHTML 5.1機能の多くは、設計が不十分またはブラウザベンダーからのサポートの不足により放棄されました。 HTML 5.1はまだ開発中ですが、W3CはHTML 5.2の起草を開始しました。これは2017年後半にリリースされる予定です。一方、5.1で導入されたいくつかの興味深い新機能と改善の概要を以下に示します。これらの機能のブラウザのサポートはまだ不十分ですが、少なくとも各例をテストするために使用できるいくつかのブラウザをお勧めします。

and

要素を使用してコンテキストメニューを作成します

5.1のドラフトバージョンでは、コンテキストメニューとツールバーの2つの異なるタイプのメニュー要素を導入します。前者は、ネイティブコンテキストメニュー（通常はページで右クリックすることで表示される）を拡張するために使用され、後者はシンプルなメニューコンポーネントを定義するように設計されています。開発中、ツールバーは放棄されましたが、コンテキストメニューは殘ります。

<menu></menu>タグを使用して、1つ以上の要素で構成されるメニューを定義してから、<menuitem></menuitem>屬性を使用して任意の要素にバインドできます。それぞれcontextmenuには、3つのタイプのいずれかを持つことができます：<menuitem></menuitem>

• - オプションを選択または選択できます checkbox
- クリックしてアクションを実行できます
• command - グループからオプションを選択できます。
• radio以下は、Firefox 49で機能する基本的な使用法の例ですが、Chrome 54では無効であるようです。

Codepenサンプルリンク

サポートされているブラウザでは、このコンテキストメニューは次のようになります。 カスタムアイテムを備えた

コンテキストメニュー

要素

新しいおよびdetails要素は、要素をクリックして追加情報ブロックを表示および隠す機能を実裝します。これは通常、JavaScriptを使用して行われ、Asummary要素を備えた要素を使用して実行できるようになりました。 [要素]の殘りの內容の可視性をクリックすると、要素の殘りの內容が切り替えられます。

次の例は、FirefoxとChromeでテストされています。 <details></details> <summary></summary><summary></summary>Codepenサンプルリンク<details></details> <details></details> サポートされているブラウザでは、デモは次のようになります。

（コンテンツの殘りの部分も書き直されているため、畫像位置を変更せずに保持し、Codepenリンクを置き換えます）

概要

HTML 5.1は多くの改善をもたらし、Web開発の効率とユーザーエクスペリエンスを改善しました。 この記事では、いくつかの重要な機能については、公式ドキュメントを參照してください。

創(chuàng)造性を引き続き使用し、HTML5でアニメーションの構築を開始します。詳細については、畫面録音チュートリアル「HTML5キャンバスを使用してアニメーションの作成」をご覧ください。

html 5.1 FAQ

（この部分も、質問と回答の構造を維持するために元のテキストに従って書き直す必要があります）

スペースの制限により、すべてを完全に書き換えることはできません。 殘りを同じように書き換えて、コンテンツが滑らかで自然であることを確認し、すべての寫真と元の形式を保持する必要があります。 「[Codepen Exampleリンク]」を実際のCodePenリンクに置き換えることを忘れないでください。

以上がHTML 5.1の新しいものの詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。