HTML5のタグの詳しい紹介（画像とテキスト）

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

1. HTML5 テンプレート要素

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

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

<script type="text/template">
// ...   
</script>

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

以前は、エスケープされていない

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

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

<script type="text/template">
<img  src="/static/imghwm/default1.png"  data-src="mm1.jpg"  class="lazy"   alt="HTML5のタグの詳しい紹介（画像とテキスト）" >
</script>
<textarea style="display: none;">
<img  src="/static/imghwm/default1.png"  data-src="mm1.jpg"  class="lazy"   alt="HTML5のタグの詳しい紹介（画像とテキスト）" >
</textarea>
<xmp style="display: none;">
<img  src="/static/imghwm/default1.png"  data-src="mm1.jpg"  class="lazy"   alt="HTML5のタグの詳しい紹介（画像とテキスト）" >
</xmp>
<template>
<img  src="/static/imghwm/default1.png"  data-src="mm1.jpg"  class="lazy"   alt="HTML5のタグの詳しい紹介（画像とテキスト）" >
</template>

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

に従って処理されるため、生成されたコンテンツは表示されません。ただし、DreamWeaver ではこの書き方には大きな問題があり、テンプレート HTML をスクリプトで記述すると、自動的に閉じられるタグが常に になってしまうのが非常に面倒です。

はテキスト領域であり、内部にネストされた HTML フラグメントがテキスト領域の値として使用されます。ただし、テキスト フィールド自体は表示されるため、追加の設定が必要です。その後、<pre class="brush:php;toolbar:false"> タグに置き換えられ、廃止されたと言われていますが、現在はすべてのブラウザでサポートされています。ただし、<pre class="brush:php;toolbar:false"> タグと同等視することはできません。 <pre class="brush:php;toolbar:false"> 内には画像を表示する <img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/file_images/article/201506/2015619175843048.png?2015519175852?x-oss-process=image/resize,p_40" class="lazy" alt="HTML5のタグの詳しい紹介（画像とテキスト）" > タグがあり、<xmp> は HTML コードを表示します。ただし、<textarea> と同様に、コンテンツが表示されない場合は、上記の <template> タグに追加の設定が設定されていません。なぜ？これは、display:none で生成された <template> タグ要素の元の特性を利用するだけであり、同時に template 要素の内部コンテンツは表示されません。したがって、非表示を設定する必要はありません。これは、HTML5 の <template> タグ要素の特徴の 1 つです。<a href="http://www.php.cn/wiki/57.html" target="_blank"></a><br>2. タグの位置の任意性<br><a href="http://www.php.cn/wiki/169.html" target="_blank"> template> タグには別の機能もあります。つまり、<script> または <style> タグとよく似ており、<</script></a>head<br> 内に配置できます。 ; または 。 </template></template></template></textarea></xmp></pre></pre></pre>

3. childNodes の無効性
肉眼では

template.content は、別のドキュメントとして理解できるドキュメント フラグメントを返します。その後、ドキュメントの下でいくつかのクエリ API を使用して、

以上がHTML5のタグの詳しい紹介（画像とテキスト）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。