HTML 5.1の新しいもの

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開発の効率とユーザーエクスペリエンスを改善しました。 この記事では、いくつかの重要な機能については、公式ドキュメントを参照してください。

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

html 5.1 FAQ

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

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

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