您現在的位置是:電腦技術吧?>? 組裝維修 ??>??template標簽,template??>??正文詳情

template標簽,template

覃芷波2019-11-26 17:41:47 人圍觀
簡介java中template標簽一、HTML5模板元素的初始元素基本確定在2013年出現。你為什么用它?現在只是聲明它是一個模板元素,我們將模板HTML嵌入到HTML中,通常是這樣寫的:復制Xtemplate file

一、HTML5 template元素初面  元素,基本上可以確定是2013年才出現的。

干嘛用的呢,顧名思意,就是用來聲明是模板元素。

  目前,我們在HTML中嵌入模板HTML,往往是類似這樣的寫法:  XML/HTML Code復制內容到剪貼板

    scripttype=text/template // ... /script
實際上,并不存在type=text/template這樣的標準寫法,template元素的出現旨在讓HTML模板HTML變得更加標準與規范。

以前,我們可能還使用過textarea或者xmp(廢止但依然可用)嵌套非轉義的HTML標簽代碼,實現一些特定的前端功能,但,同樣的,跟上面的流行用法一樣,都是不規范的。

從未來趨勢來講,顯然template標簽才是王道。

但是,兼容性是個不可忽略的問題,因此,就算扯得很多很少,實際價值有有限,因此,這里僅僅簡單介紹下。

二、HTML5 template元素復面 看下下面四種嵌套圖片HTML,同時圖片內容不顯示,不會有請求的寫法:XML/HTML Code復制內容到剪貼板

    scripttype=text/template imgsrc=mm1.jpg /script textareastyle=display: none; imgsrc=mm1.jpg /textarea xmpstyle=display: none; imgsrc=mm1.jpg /xmp template imgsrc=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標簽里面的偽子元素了。

例如,獲得第一張圖片元素則是:CSS Code復制內容到剪貼板

    var image_first = template.content.querySelector(img);
三、HTML5 template元素終面 您可以狠狠地點擊這里:HTML5 template模板元素體驗demo 模板元素與CSS 如果瀏覽器有眼不識泰山,認為template就是個普通的自定義元素,則顯示的就會使下面這個樣子,內部的標簽按照一般的標簽渲染了。

如果瀏覽器與時俱進,則顯示會是下面這樣,自身CSS渲染,內部標簽直接異空間不渲染,例如Chrome:

也就是說,雖然從CSS的角度看,template就是個跟CSS打得火熱的普通元素,但是,從HTML角度看,其猶如帶土的寫輪眼,可以讓內部標簽轉移到異空間,血跡界限般稀有。

默認情況下,template是隱藏的,實際是默認其display屬性為none. 使用下面的代碼一測便知:window.getComputedStyle(template).display; // 結果是none

因此,demo中才設置了如下的CSS聲明: CSS Code復制內容到剪貼板

    template { display: block; ... }
模板的克隆 如果你是在HTML字符串上處理,類似于現在流行的MVC框架或模板技術,則template.innerHTML足矣。

然,template比script強大之處在于,script內部內容只能當做字符串來獲取,而template雖然存在于異空間,但是,依然可以節點獲取(上面有展示),以及完整克隆,語法類似下面: CSS Code復制內容到剪貼板

    var clone = document.importNode(template.content, true);
然后,你就可以用append節點(appendChild)的方式,加載模板內容了,而不是(沒得選擇)append字符串加載模板內容。

標題是簡介,因此,不展開,也不放具體的實例了(若有興趣,可參考文末的參考文章),大家知道有這么回事就好。

四、HTML5 template面試小結 至此,template元素的行為、表現以及一些方法基本上有了大致的認識,如果這是場面試的話,則我對template的評價還是挺高的,特殊場景使用的特殊利器,一些類似異空間的設計也是讓人大開眼界,這個元素要比hgroup之類的HTML5元素更受歡迎更受關注也更有潛力。

臨近最后,放上兼容性表,IE瀏覽器拖了好大的后腿,不過我表示很淡定,因為對IE早已麻木! 兼容性

版權聲明:本文由 覃芷波 整理編輯。

原標題:vue template標簽,vue template標簽使用

轉載注明出處:http://www.dn9ww09s.icu/assemble/14523.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 圖片轉換ppt,如何將ppt轉換為圖片

    圖片轉換ppt,如何將ppt轉換為圖片 相關圖片圖片變成ppt雖然PPT在日常辦公中被廣泛用作演示文稿,但也有人將PPT轉換成圖片,以防被他人復制。所以問題是,我們如何將PPT批量轉換成圖像?讓我們看看快速的PDF轉換ppt轉高清圖片...

  • 利用通道實現了,可以利用BBS實現的是

    利用通道實現了,可以利用BBS實現的是 相關圖片炫酷的頭像今天,讓我們在Carl philipebrenner的網站上探索一個微妙而有趣的動畫效果。當鼠標通過網格元素時,將會有一個微妙的動畫。網格元素變得透明,每個邊都炫酷背景圖...

  • usb接口有幾種,usb六種接口

    usb接口有幾種,usb六種接口 相關圖片usb c接口USB設備一連接,USB接口就會自動直接開始運行,這是一件讓人無法忍受的事情。那么,如何防止USB接口直接在計算機中運行呢?超人小編提醒你,如果你使用win7,usb2.0接口...

  • 瀏覽器應用程序,谷歌瀏覽器擴展程序

    瀏覽器應用程序,谷歌瀏覽器擴展程序 相關圖片瀏覽器打開目前,只有少數瀏覽器支持webgl,請參閱我的另一篇文章:我可以使用webgl嗎?。下面的例子是windows下的chrome 16/23和Android下的FlE瀏覽器進入...

  • 一加系統使用小技巧,一加系統使用教程

    一加系統使用小技巧,一加系統使用教程 相關圖片安卓系統小竅門一般來說,了解一些windows系統的操作技巧對我們的辦公有很大的幫助,比如節省時間,提高工作效率。所以超人給你帶來了一些關于Windows系統操作的提示,感興小米系統...

  • win7系統設置定時關機,win7定時關機怎么設置

    win7系統設置定時關機,win7定時關機怎么設置 相關圖片win7定時關機在辦公室里,經常會出現文件需要離開電腦傳輸的情況,很多電腦用戶會選擇安裝第三方軟件來設置win7系統自動關機。也許有很多用戶不喜歡這個操作,所以今天的編輯會教...

  • 哈羅單車計費方式,共享單車計費方式

    哈羅單車計費方式,共享單車計費方式 相關圖片共享單車怎樣收費共享單車現在是這個城市一道美麗的風景線。它有助于我們解決最近幾公里的交通障礙,緩解城市交通。但每輛自行車的收費都不一樣。小明自行車多少錢?我們和小...

  • 光影涂鴉,光影涂鴉怎么拍

    光影涂鴉,光影涂鴉怎么拍 相關圖片手機拍攝光影涂鴉這種沒有繪畫的涂鴉很受歡迎。它的魅力不僅體現在夜晚的輝煌,更體現在人們對一幅隨時都會幻滅的美麗圖畫的迷戀。總之,在黑暗中,用手電筒對著相機,揮手拍...

  • 大連到湖北,湖北大學

    大連到湖北,湖北大學 相關圖片大連在哪里湖北張達是一款面向大學生的手機信息軟件。除了豐富的在線信息外,還為大學生提供了便捷的在線功能。但近日,一位小伙伴回應稱,湖北省大連市不使用互聯網。那么大...

  • word怎么打不開了怎么辦,所有word文檔都打不開

    word怎么打不開了怎么辦,所有word文檔都打不開 相關圖片word注冊表數據庫損壞Word是我們日常生活中經常使用的辦公應用軟件之一。但是,如果文字不能打開,就會更加混亂,影響工作效率。如果遇到word無法打開并發送錯誤報告的情況,您知...

熱評文章

  • 京東金條10000一年利息,京東金條一萬一天利息

    京東金條10000一年利息,京東金條一萬一天利息 相關圖片京東金條分期6期怎樣算京東金條盈利是京東正式推出的個人貸款產品。很多人說他們想用它,但他們對興趣知之甚少。京東金條的興趣如何?京東金條的利息高嗎?接下來,超人軟件將...

  • 水晶球制作教程,自己制作水晶球的方法

    水晶球制作教程,自己制作水晶球的方法 相關圖片自制水晶球這篇文章是要做一個漂亮的超級水晶球煙花。方法很簡單。它是用圓形工具畫幾個球,把它們放在一起,調節光線,從而達到超光效的水晶球。原文:http://www.polps水晶球制作...

  • Excel怎么轉換成PDF,PDF轉換成Excel

    Excel怎么轉換成PDF,PDF轉換成Excel 相關圖片pdf轉換成excel是空白Excel是日常辦公中必不可少的數據處理軟件之一。它的獨特之處在于它是以表格的形式出現的,而且這個表格還具有計算功能。它對于統計、報表和數據排序是必不可...

  • 繪圖工具在哪,繪圖工具都有什么

    繪圖工具在哪,繪圖工具都有什么 相關圖片excel 繪圖工具在哪HTML5無疑是目前最流行的技術。每個網頁設計師都在討論這種神奇的標記語言的興起。HTML5是一種不費吹灰之力的標記語言,但它可以提供迷人的藝術特性,幫助網頁設...

  • 美顏相機大頭貼模板,美顏相機最新版

    美顏相機大頭貼模板,美顏相機最新版 相關圖片美顏相機孩子們有沒有看到美相機的代言人angelababy,對他為美相機宣傳的動畫海報非常興奮?他們想自己試試。那么如何使用美女相機的卡通貼紙呢?下面我們就來看看:美顏相機怎么...

  • 如何編程,編程有哪些

    如何編程,編程有哪些 相關圖片編程代碼干巴巴的意思是不要重復你自己。但事實上,這個名字有點無聊。哪種理論不是消除重復,而是如何消除重復的意義。一般來說,我認為drycss和OOCSS是兩個極端,所以算法編程...

  • 網頁僅html格式保存,網頁以html格式保存

    網頁僅html格式保存,網頁以html格式保存 相關圖片html網頁PPT通常用作演示文稿,但有時我們需要將PPT文檔用作HTML頁面,所以此時我們應該做什么?不可能重新編輯HTML,因此將PPT轉換為HTML格式html網頁文件保存的格式為...

  • 如何編程,編程有哪些

    如何編程,編程有哪些 相關圖片編程代碼OOCSS是面向對象的CSS。這里的對象是指頁面中的元素對象,它不同于傳統編程中的面向對象。例如,沒有方法。具體來說,一些附加的類可以看作是繼承類或接口類來實現算法編...

  • 2019白條最新自套技術,白條閃付開通資格

    2019白條最新自套技術,白條閃付開通資格 相關圖片京東白條c店什么意思白條閃付是京東正式推出的虛擬信用卡,用戶可以先消費后支付。那么如何打開閃付呢?接下來,超人軟件編輯將介紹京東閃付的應用方法,希望對您有所幫助!白...

  • 股票怎么提現,股票提現時間

    股票怎么提現,股票提現時間 相關圖片賣出股票什么時候可以提現股票投資是一個非常實用的金融軟件。許多小合伙人通過它賺了一桶黃金,那么他們如何從股票和投資中提取現金呢?接下來,超人軟件將介紹股票和投資套...

關注微信

变脸官网查询