HTML5_html5 チュートリアルスキルの <template> タグの詳細な説明-H5 チュートリアル-php.cn

1. まず HTML5 テンプレート要素を確認します

要素は基本的に 2013 年にのみ登場したことは確かです。これは何に使用されますか? 名前が示すように、「テンプレート要素」であることを宣言するために使用されます。

現在、HTML にテンプレート HTML を埋め込んでいます。これは、次のように記述されることがよくあります:

XML/HTML コード コンテンツをクリップボードにコピー スクリプト タイプ = "テキスト/テンプレート" > // ... スクリプト > 実際、type="text/template" を記述する標準的な方法はありません。 要素の外観は、HTML テンプレートをより標準化して標準化することを目的としています。

以前は、エスケープされていない HTML タグ コードをネストして特定のフロントエンド機能を実現するために、 または を使用していました。使い方は同じですが、どちらも不規則です。今後の傾向としては、 タグが最適であることは明らかです。ただし、互換性は無視できない問題であるため、多くの話題があっても実際の価値は限られているため、ここでは簡単に紹介します。 2. HTML5 テンプレート要素の重複

次の 4 つのネストされた画像 HTML を見てください。同時に、画像コンテンツは表示されず、リクエストもありません。

XML/HTML コード コンテンツをクリップボードにコピー スクリプト タイプ = "テキスト/テンプレート" > img src = "mm1. jpg" > スクリプト > テキストエリア スタイル = " 表示:なし;" > img src = "mm1. jpg" > テキストエリア > xmp スタイル = " 表示:なし;" > img src = "mm1. jpg" > xmp > テンプレート > img src = "mm1. jpg" > テンプレート > 1. タグの内容の非表示

の特殊性により、内部 HTML タグが文字列として処理されるため、生成されたコンテンツは表示されません。しかし、DreamWeaver ではこの書き方には大きな問題があり、テンプレート HTML をスクリプトで記述する際に、自動的に閉じられるタグが必ず となってしまい、非常に面倒です。 はテキスト領域であり、内部にネストされた HTML フラグメントがテキスト領域の値として使用されます。ただし、テキスト フィールド自体は表示されるため、追加の設定が必要です。その後、 タグに置き換えられ、廃止されたと言われていますが、現在はすべてのブラウザでサポートされています。ただし、 タグと同等視することはできません。 内には画像を表示する タグがあり、 は HTML コードを表示します。ただし、 と同様に、コンテンツが表示されない場合は、追加の設定が必要です。なぜ？これは、display:none で生成された タグ要素の元の特性を利用しているだけであり、同時に template 要素の内部コンテンツは表示されません。したがって、非表示を設定する必要はありません。これは、HTML5 の タグ要素の特性の 1 つであり、タグの内容を非表示にします。

2. タグの位置の任意性 上記の サブ要素の自然な非表示に加えて、 タグには位置の任意性もあります。これは または に非常によく似ています。

3. childNodes の無効性 タグには多くのサブタグがあるように見えますが、この種の慣性的な考え方はここでは当てはまりません。変数 template が取得した タグ DOM (多数の HTML コードが含まれている) であると仮定すると、template.childNodes が空であることがわかります。 template.innerHTML を使用して、完全な HTML フラグメントを取得できます。 「疑似子要素」を取得する必要がある場合。方法はあります。注意深く、content 属性を使用してください。 template.content は、別のドキュメントとして理解できるドキュメント フラグメントを返します。その後、ドキュメントの下でいくつかのクエリ API を使用して、 タグ内の「疑似サブ要素」を取得できます。たとえば、最初の画像要素を取得するには:

CSS コード コンテンツをクリップボードにコピーします var image_first = template. content .querySelector( "img" ); 3. HTML5 テンプレート要素の最終ページ ここをクリックしてください: HTML5 テンプレート要素の体験デモ

テンプレート要素と CSS

ブラウザが盲目で が通常のカスタム要素であると考える場合、表示は次のようになります。内部タグは通常のタグとして表示されます。 。 ブラウザが時代に追従すると、表示は次のようになり、独自の CSS レンダリングが行われ、内部タグは Chrome などの別のスペースで直接レンダリングされます。

つまり、CSS の観点から見ると、 は CSS と競合する通常の要素ですが、HTML の観点から見ると、内部タグを別の形式で転送できるオビトの写輪眼のようなものです。宇宙空間では、血痕は限りなくまれです。

デフォルトでは、 は非表示になっており、その表示属性は実際にはデフォルトで none になっていることがわかります。 window.getComputedStyle(template).display; // 結果は「なし」です

したがって、デモでは次の CSS ステートメントが設定されます:

CSS コード

コンテンツをクリップボードにコピーします テンプレート { 表示 : ブロック ; テンプレートのクローン 現在普及している MVC フレームワークやテンプレート テクノロジと同様に、HTML 文字列を扱う場合は、template.innerHTML で十分です。もちろん、 の内部コンテンツは文字列としてのみ取得できるため、 は別の空間に存在します。ノード別 (上記の表示)、および完全なクローンの場合、構文は次のようになります:

CSS コード コンテンツをクリップボードにコピーします var clone = document.importNode(template. content , true); その後、文字列を追加してテンプレート コンテンツを読み込む代わりに、追加ノード (appendChild) を使用してテンプレート コンテンツを読み込むことができます。タイトルが「はじめに」なので、詳しくは説明しませんし、具体例も挙げません（興味があれば記事の最後にある参考記事を参照してください）。このようなことは誰もが知っていると良いでしょう。物が存在する。 4. HTML5 テンプレートのインタビュー概要 この時点で、 要素の動作、パフォーマンス、およびいくつかのメソッドについてはほぼ理解しています。これがインタビューであれば、 の評価は非常に高くなります。特別なシナリオ。特別なツール、「異空間」に似たいくつかのデザインも目を見張るものがあります。この要素は、 などの HTML5 要素よりも人気があり、より関心があり、より多くの可能性を秘めています。

最後にIEブラウザの互換性表を載せたのですが、もうIEに麻痺していたのでとても落ち着きました！

互換性