ホームページ > 記事 > ウェブフロントエンド > HTML5のタグの詳しい紹介（画像とテキスト）
HTML5のタグの詳しい紹介（画像とテキスト）
- 黄舟オリジナル
- 2018-05-15 15:46:2115037ブラウズ
この記事では、HTML5 を始めるための重要な知識である HTML5 のテンプレート タグを主に紹介します。
1. HTML5 テンプレート要素
の概要template>要素、基本的には2013年に登場したばかりであることは間違いありません。なぜ使用されるのですか? 名前が示すように、「テンプレート要素」を宣言するために使用されます。 現在、HTML にテンプレート HTML を埋め込む場合は、次のように記述することが多いです。<script type="text/template"> // ... </script>
HTMLタグコードをネストして特定のフロントエンド機能を実装するために、4750256ae76b6b9d804861d8f69e79d3または43e1fc467495bab219a3286f74139f6aを使用していました。使い方はすべて不規則です。今後の傾向としては、d477f9ce7bf77f53fbcf36bec1b69b7a タグが最適であることは明らかです。ただし、互換性は無視できない問題であるため、多くの話題があっても実際の価値は限られているため、ここでは簡単に紹介します。
2. HTML5 テンプレート要素の重複
<script type="text/template"> <img src="mm1.jpg"> </script> <textarea style="display: none;"> <img src="mm1.jpg"> </textarea> <xmp style="display: none;"> <img src="mm1.jpg"> </xmp> <template> <img src="mm1.jpg"> </template>
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 属性を使用してください。
CSS コードコンテンツをクリップボードにコピーします
var image_first = template.content.querySelector("img");3. HTML5 テンプレート要素の最終ページここをクリックできます: HTML5 テンプレート要素のエクスペリエンス デモ
- テンプレート要素と CSS ブラウザーが無知で、d477f9ce7bf77f53fbcf36bec1b69b7a が通常のカスタム要素であると考えると、次のように表示され、内部タグは次のようになります。 ラベルがレンダリングされます。
如果你是在HTML字符串上处理，类似于现在流行的MVC框架或模板技术，则template.innerHTML足矣。然，d477f9ce7bf77f53fbcf36bec1b69b7a比3f1c4e4b6b16bbbd69b2ee476dc4f83a强大之处在于，3f1c4e4b6b16bbbd69b2ee476dc4f83a内部内容只能当做字符串来获取，而d477f9ce7bf77f53fbcf36bec1b69b7a虽然存在于异空间，但是，依然可以节点获取（上面有展示），以及完整克隆，语法类似下面：
然后，你就可以用append节点(appendChild)的方式，加载模板内容了，而不是（没得选择）append字符串加载模板内容。标题是“简介”，因此，不展开，也不放具体的实例了（若有兴趣，可参考文末的参考文章），大家知道有这么回事就好。
四、HTML5 template面试小结
如果浏览器与时俱进，则显示会是下面这样，自身CSS渲染，内部标签直接异空间不渲染，例如Chrome:
也就是说，虽然从CSS的角度看，d477f9ce7bf77f53fbcf36bec1b69b7a就是个跟CSS打得火热的普通元素，但是，从HTML角度看，其犹如带土的写轮眼，可以让内部标签转移到异空间，血迹界限般稀有。
默认情况下，d477f9ce7bf77f53fbcf36bec1b69b7a是隐藏的，实际是默认其display属性为none. 使用下面的代码一测便知：
window.getComputedStyle(template).display; // 结果是"none"
因此，demo中才设置了如下的CSS声明：
CSS Code复制内容到剪贴板
template { display: block; ... }-
模板的克隆
CSS Code复制内容到剪贴板
var clone = document.importNode(template.content, true);
至此，d477f9ce7bf77f53fbcf36bec1b69b7a元素的行为、表现以及一些方法基本上有了大致的认识，如果这是场面试的话，则我对d477f9ce7bf77f53fbcf36bec1b69b7a的评价还是挺高的，特殊场景使用的特殊利器，一些类似“异空间”的设计也是让人大开眼界，这个元素要比d8eccd9ed644b68a6460a2bb84548c82之类的HTML5元素更受欢迎更受关注也更有潜力。
临近最后，放上兼容性表，IE浏览器拖了好大的后腿，不过我表示很淡定，因为对IE早已麻木！
兼容性
以上がHTML5のタグの詳しい紹介（画像とテキスト）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。