HTML5の<template>タグの詳しい紹介（画像とテキスト）-H5 チュートリアル-php.cn

この記事では、HTML5 を始めるための重要な知識である HTML5 のテンプレート タグを主に紹介します。

1. HTML5 テンプレート要素

の概要template>要素、基本的には2013年に登場したばかりであることは間違いありません。なぜ使用されるのですか? 名前が示すように、「テンプレート要素」を宣言するために使用されます。

現在、HTML にテンプレート HTML を埋め込む場合は、次のように記述することが多いです。

// ... ログイン後にコピー 実際、type="text/template" のような標準的な記述はありません。 HTML テンプレートの出現は、HTML をより標準化し、標準化することを目的としています。

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

同時に、画像コンテンツは表示されず、書き込み要求もありません: ログイン後にコピー

1. タグコンテンツの非表示。 は、内部 HTML タグが string

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

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渲染，内部标签直接异空间不渲染，例如 Chr ome: タグの詳しい紹介（画像とテキスト）" >

也就是说，虽然从CSS的角度看， 就是个跟CSS打得火热的普通元素，但是，从HTML角度看，其犹如带土的写轮眼，可以让内部标签转移到异空间，血迹界限般稀有。

默认情况下， 是隐藏的，实际是默认其display属性为none. 使用下面的代码一测便知：

window.getComputedStyle(template).display; // 结果是"none" ログイン後にコピー タグの詳しい紹介（画像とテキスト）" >

因此，demo中才设置了如下的CSS声明：

CSS Code 复制内容到剪贴板

template { display: block; ... } ログイン後にコピー 模板的克隆 如果你是在HTML字符串上处理，类似于现在流行的 MVC 框架 或 模板技术 ，则template.innerHTML足矣。然， 比 强大之处在于， 内部内容只能当做字符串来获取，而 虽然存在于异空间，但是，依然可以节点获取（上面有展示），以及完整克隆，语法类似下面：

CSS Code 复制内容到剪贴板

var clone = document.importNode(template.content, true); ログイン後にコピー 然后，你就可以用append节点(appendChild)的方式，加载模板内容了，而不是（没得选择）append字符串加载模板内容。标题是“简介”，因此，不展开，也不放具体的实例了（若有兴趣，可参考文末的参考文章），大家知道有这么回事就好。

四、HTML5 template面试小结 至此， 元素的行为、表现以及一些方法基本上有了大致的认识，如果这是场面试的话，则我对 的评价还是挺高的，特殊场景使用的特殊利器，一些类似“异空间”的设计也是让人大开眼界，这个元素要比 之类的HTML5元素更受欢迎更受关注也更有潜力。

临近最后，放上兼容性表，IE浏览器拖了好大的后腿，不过我表示很淡定，因为对IE早已麻木！

兼容性 タグの詳しい紹介（画像とテキスト）" >

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

HTML5の