HTML5 標籤元素簡介
HTML5 template元素先見後認識
元素，基本上可以確定是2013年才出現的。幹嘛用的呢，顧名思意，就是用來宣告是“模板元素”。
目前，我們在HTML中嵌入模板HTML，往往是類似這樣的寫法：
<script type="text/template">
// ...
</script>實際上，並不存在type=”text/template”這樣的標準寫法，<template>元素的出現旨在讓HTML模板HTML變得更加標準與規範。
以前，我們可能還使用過<textarea>或者<xmp>(廢止但依然可用)巢狀非轉義的HTML標籤程式碼，實現一些特定的前端功能，但，同樣的，跟上面的流行用法一樣，都是不規範的。從未來趨勢來講，顯然<template>
HTML5 template元素復面
看下面四種巢狀圖片HTML，同時圖片內容不顯示，不會有請求的寫法：
<script type="text/template">
<img src="mm1.jpg">
</script><textarea style="display: none;">
<img src="mm1.jpg">
</textarea><xmp style="display: none;" <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>標籤元素特徵之一：標籤內容隱藏性.
2. 標籤位置任意性
除了上面<template>子元素天然隱藏外，<template>標籤還有一個特性，就是位置任意性，這非常類似<script>或者<style>標籤，可以在<head>中，也可以在<body>或者<frameset>中。
3. childNodes無效性
雖然，肉眼看上去是<template>標籤裡面還有很多子標籤，這種慣性思維在這裡是不受用的。假設變數template是我們獲得的一個<template>標籤DOM（裡面一大堆HTML程式碼），你會發現：template.childNodes是個空大屁。我們可以使用template.innerHTML獲取完整的HTML片段。如果你非得獲取“偽子元素”。也是有辦法的，OK，睜大眼睛，要使用content屬性。
template.content會返回一個文件片段，你可以理解為另外一個document，然後，使用document下的一些查詢API就可以獲得<template>標籤裡面的“偽子元素”了。例如，獲得第一張圖片元素則是：
var image_first = template.content.querySelector("img");HTML5 template元素認識完畢
模板元素與CSS
如果瀏覽器有眼不識泰山，認為就是個普通的自定義元素，則顯示的就會使下面這個樣子，內部的標籤按照一般的標籤渲染了，例如IE11:
圖略…
如果瀏覽器與時俱進，則顯示會是下面這樣，自身CSS渲染，內部標籤直接異空間不渲染，例如Chrome:
也就是說，雖然從CSS的角度看，就是個跟CSS打得火熱的普通元素，但是，從HTML角度看，其猶如帶土的寫輪眼，可以讓內部標籤轉移到異空間，血跡界限般稀有。
預設情況下，是隱藏的，實際是預設其display屬性為none. 使用下面的程式碼一測便知：
預設情況下，<template>是隱藏的，實際是預設其display屬性為none. 使用下面的程式碼一測便知：
因此，demo中才設定瞭如下的CSS宣告：
template { display: block; ... }模板的克隆
如果你是在HTML字串上處理，類似於現在流行的MVC框架或模板技術，則template.innerHTML足矣。然，<template>比<script>強大之處在於，<script>內部內容只能當做字串來獲取，而<template>雖然存在於異空間，但是，依然可以節點獲取（上面有展示），以及完整克隆，語法類似下面：
var clone = document.importNode(template.content, true);然後，你就可以用append節點(appendChild)的方式，載入模板內容了，而不是（沒得選擇）append字串載入模板內容。
HTML5 template面試小結
至此，<template>元素的行為、表現以及一些方法基本上有了大致的認識，如果這是場面試的話，則我對<template>的評價還是挺高的，特殊場景使用的特殊利器，一些類似“異空間”的設計也是讓人大開眼界，這個元素要比<hgroup>之類的HTML5元素更受歡迎更受關注也更有潛力。
臨近最後，放上相容性表，IE13+開始支援，但依然拖了好大的後腿，不過有些專案只需要相容webkit核心瀏覽器，倒是可以一試！
相容性
參考文章
結束，撒花~