본 글에서는 HTML5를 시작하는데 중요한 지식인 HTML5의 템플릿 태그를 주로 소개합니다. 필요한 친구는
을 참고하세요. HTML5 템플릿 요소 얼굴
요소는 기본적으로 2013년에만 등장한 것으로 판단할 수 있습니다. 이름에서 알 수 있듯이 "템플릿 요소"를 선언하는 데 사용됩니다.
현재 우리는 HTML에 템플릿 HTML을 삽입하고 있는데, 이는 종종 다음과 같이 작성됩니다:
<script type="text/template"> // ... </script>
실제로 type=은 존재하지 않습니다. "text/template"의 표준 작성 방법과 요소의 모양은 HTML 템플릿 HTML을 보다 표준화되고 표준화하기 위한 것입니다.
이전에는
다음 4개의 중첩된 이미지 HTML을 보면 동시에 이미지 내용이 표시되지 않고 쓰기 요청도 없습니다. 🎜>
<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 태그가 <p>문자열<a href="//m.sbmmt.com/wiki/57.html" target="_blank">에 따라 처리될 수 있습니다. 따라서 생성된 콘텐츠는 표시되지 않습니다. 그런데 드림위버에서는 이런 작성 방식이 큰 문제를 안고 있는데, 스크립트에서 템플릿 HTML을 작성할 때 항상 태그가 자동으로 닫히는 </script>가 매우 짜증나는 일입니다.템플릿 요소 및 CSS
찾아보면 <템플릿>은 일반적인 맞춤 요소라고 생각하면 다음과 같이 표시되며 내부 태그는 일반 태그에 따라 렌더링됩니다.
如果浏览器与时俱进,则显示会是下面这样,自身CSS渲染,内部标签直接异空间不渲染,例如Chrome:
也就是说,虽然从CSS的角度看,就是个跟CSS打得火热的普通元素,但是,从HTML角度看,其犹如带土的写轮眼,可以让内部标签转移到异空间,血迹界限般稀有。
默认情况下,是隐藏的,实际是默认其display属性为none. 使用下面的代码一测便知:
window.getComputedStyle(template).display; // 结果是"none"
因此,demo中才设置了如下的CSS声明:
CSS Code复制内容到剪贴板
template { display: block; ... }
如果你是在HTML字符串上处理,类似于现在流行的MVC框架或模板技术,则template.innerHTML足矣。然,比