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

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

1. HTML5 テンプレート要素

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

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

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

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

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

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

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

3. childNodes の無効性 肉眼では d477f9ce7bf77f53fbcf36bec1b69b7a タグ内に多くのサブタグがあるように見えますが、この種の慣性的な考え方はここでは当てはまりません。変数 template が取得した d477f9ce7bf77f53fbcf36bec1b69b7a タグ DOM (多数の HTML コードが含まれている) であると仮定すると、次のようになります。 template.childNodes は空です。 template.innerHTML を使用して、完全な HTML フラグメントを取得できます。 「疑似子要素」を取得する必要がある場合。方法はあります。注意深く、content 属性を使用してください。

template.content は、別のドキュメントとして理解できるドキュメント フラグメントを返します。その後、ドキュメントの下でいくつかのクエリ API を使用して、d477f9ce7bf77f53fbcf36bec1b69b7a タグ内の「疑似子要素」を取得できます。たとえば、最初の画像要素を取得するには: CSS コード コンテンツをクリップボードにコピーします

var image_first = template.content.querySelector("img");

3. HTML5 テンプレート要素の最終ページ ここをクリックできます: HTML5 テンプレート要素のエクスペリエンス デモ

テンプレート要素と CSS ブラウザーが無知で、d477f9ce7bf77f53fbcf36bec1b69b7a が通常のカスタム要素であると考えると、次のように表示され、内部タグは次のようになります。 ラベルがレンダリングされます。 如果浏览器与时俱进，则显示会是下面这样，自身CSS渲染，内部标签直接异空间不渲染，例如 Chr ome: タグの詳しい紹介（画像とテキスト）" >

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

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

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

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

CSS Code 复制内容到剪贴板

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

CSS Code 复制内容到剪贴板

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

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

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

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

関連記事