1、HTML5 template元素初面php
<template>元素，基本上能夠肯定是2013年纔出現的。幹嗎用的呢，顧名思意，就是用來聲明是「模板元素」。css
目前，咱們在HTML中嵌入模板HTML，每每是相似這樣的寫法：html
-
123
<scripttype="text/template">// ...</script>
實際上，並不存在type="text/template"這樣的標準寫法，<template>元素的出現旨在讓HTML模板HTML變得更加標準與規範。前端
之前，咱們可能還使用過<textarea>或者<xmp>(廢止但依然可用)嵌套非轉義的HTML標籤代碼，實現一些特定的前端功能，但，一樣的，跟上面的流行用法同樣，都是不規範的。從將來趨勢來說，顯然<template>標籤纔是王道。可是，兼容性是個不可忽略的問題，所以，就算扯得不少不多，實際價值有有限，所以，這裏僅僅簡單介紹下。
2、HTML5 template元素復面web
看下下面四種嵌套圖片HTML，同時圖片內容不顯示，不會有請求的寫法：面試
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<
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. 標籤內容隱藏性瀏覽器
<script>自己的特定，讓內部的HTML標籤是按照字符串處理的，所以，天生內容不顯示。可是，在DreamWeaver中，這種寫法有個很大的問題，就是在script中書寫模板HTML時候，標籤自動閉合的永遠是</script>這個很討厭的。
<textarea>爲文本域，裏面嵌套的HTML片斷會被當作文本域的值。但，文本域自己是可見的，所以須要額外的設置display: none;
<xmp>是個很老很特殊的屬性，語義爲example，示例。聽說後來被<pre>標籤取代而廢止，實際上，目前，全部的瀏覽器都是支持的。可是，其跟<pre>標籤不能劃等號。<pre>裏面有個<img>標籤，顯示的則是一張圖片，而<xmp>呈現的就是一段HTML代碼。不過，與<textarea>同樣，內容不顯示的話，還須要額外的設置display: none;
上面這個<template>標籤上沒有設置display: none;，注意到了沒有。爲什麼？這只是發揮了<template>標籤元素的本來特性，天生display:none，同時模板元素內部內容是死活不會呈現的。所以，無需設置隱藏。這就是HTML5 <template>標籤元素特徵之一：標籤內容隱藏性.app
2. 標籤位置任意性
除了上面<template>子元素自然隱藏外，<template>標籤還有一個特性，就是位置任意性，這很是相似<script>或者<style>標籤，能夠在<head>中，也能夠在<body>或者<frameset>中。框架
3. childNodes無效性
雖然，肉眼看上去是<template>標籤裏面還有不少子標籤，這種慣性思惟在這裏是不受用的。假設變量template是咱們得到的一個<template>標籤DOM（裏面一大堆HTML代碼），你會發現：template.childNodes是個空大屁。咱們可使用template.innerHTML獲取完整的HTML片斷。若是你非得獲取「僞子元素」。也是有辦法的，OK，睜大眼睛，要使用content屬性。spa
template.content會返回一個文檔片斷，你能夠理解爲另一個document，而後，使用document下的一些查詢API就能夠得到<template>標籤裏面的「僞子元素」了。例如，得到第一張圖片元素則是：
CSS Code複製內容到剪貼板
|
1
|
var image_first = template.content.querySelector("img");
|
您能夠狠狠地點擊這裏：HTML5 template模板元素體驗demo
模板元素與CSS
若是瀏覽器有眼不識泰山，認爲<template>就是個普通的自定義元素，則顯示的就會使下面這個樣子，內部的標籤按照通常的標籤渲染了。
若是瀏覽器與時俱進，則顯示會是下面這樣，自身CSS渲染，內部標籤直接異空間不渲染，例如Chrome:
也就是說，雖然從CSS的角度看，<template>就是個跟CSS打得火熱的普通元素，可是，從HTML角度看，其猶如帶土的寫輪眼，可讓內部標籤轉移到異空間，血跡界限般稀有。
默認狀況下，<template>是隱藏的，實際是默認其display屬性爲none. 使用下面的代碼一測便知：
|
1
|
window.getComputedStyle(template).display; // 結果是"none"
|
所以，demo中才設置了以下的CSS聲明：
CSS Code複製內容到剪貼板
|
1
|
template { display: block; ... }
|
-
若是你是在HTML字符串上處理，相似於如今流行的MVC框架或模板技術，則template.innerHTML足矣。然，<template>比<script>強大之處在於，<script>內部內容只能當作字符串來獲取，而<template>雖然存在於異空間，可是，依然能夠節點獲取（上面有展現），以及完整克隆，語法相似下面：
CSS Code複製內容到剪貼板
|
1
|
var clone = document.importNode(template.content, true);
|
-
而後，你就能夠用append節點(appendChild)的方式，加載模板內容了，而不是（沒得選擇）append字符串加載模板內容。標題是「簡介」，所以，不展開，也不放具體的實例了（如有興趣，可參考文末的參考文章），你們知道有這麼回事就好。
至此，<template>元素的行爲、表現以及一些方法基本上有了大體的認識，若是這是場面試的話，則我對<template>的評價仍是挺高的，特殊場景使用的特殊利器，一些相似「異空間」的設計也是讓人大開眼界，這個元素要比<hgroup>之類的HTML5元素更受歡迎更受關注也更有潛力。
臨近最後，放上兼容性表，IE瀏覽器拖了好大的後腿，不過我表示很淡定，由於對IE早已麻木！
兼容性