Detailed introduction of tag in HTML5 (picture and text)
This article mainly introduces the template tag in HTML5, which is an important knowledge for getting started with HTML5. Friends who need it can refer to
1. HTML5 template element preliminary The face
element can basically be determined to have only appeared in 2013. What is it used for? As the name implies, it is used to declare that it is a "template element".
Currently, we embed template HTML in HTML, which is often written like this:
<script type="text/template"> // ... </script>
Copy after login
In fact, type= does not exist The standard writing method of "text/template" and the appearance of the element are intended to make HTML template HTML more standard and standardized.
Before, we may have used
Look at the following four nested image HTMLs. At the same time, the image content is not displayed and there is no request for writing:
<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. Tag content hiding property
The specificity of <script> itself means that the internal HTML tags are processed according to the <a href="http://www.php.cn/wiki/57.html" target="_blank">string</a>, so the generated content Do not show. However, in DreamWeaver, this writing method has a big problem, that is, when writing template HTML in script, the tag automatically closed is always </script>, which is very annoying.
- 3. HTML5 template Element end page
You can click here: HTML5 template template element experience demo
Template element and CSS
If you browse If you think that is just an ordinary custom element, it will be displayed as follows, and the internal tags will be rendered according to ordinary tags.
如果浏览器与时俱进,则显示会是下面这样,自身CSS渲染,内部标签直接异空间不渲染,例如Chrome:
也就是说,虽然从CSS的角度看,就是个跟CSS打得火热的普通元素,但是,从HTML角度看,其犹如带土的写轮眼,可以让内部标签转移到异空间,血迹界限般稀有。
默认情况下,是隐藏的,实际是默认其display属性为none. 使用下面的代码一测便知:
window.getComputedStyle(template).display; // 结果是"none"
因此,demo中才设置了如下的CSS声明:
CSS Code复制内容到剪贴板
template { display: block; ... }
- 模板的克隆
如果你是在HTML字符串上处理,类似于现在流行的MVC框架或模板技术,则template.innerHTML足矣。然,比
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Assassin's Creed Shadows: Seashell Riddle Solution3 weeks ago By DDDWhat's New in Windows 11 KB5054979 & How to Fix Update Issues2 weeks ago By DDDWhere to find the Crane Control Keycard in Atomfall3 weeks ago By DDDAssassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation1 months ago By DDDRoblox: Dead Rails - How To Complete Every Challenge3 weeks ago By DDDHot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
CakePHP Tutorial1389
52

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.

Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.
