HTML5의 태그 상세 소개(그림 및 텍스트)
- 黄舟원래의
- 2018-05-15 15:46:2114996검색
본 글에서는 HTML5를 시작하는데 중요한 지식인 HTML5의 템플릿 태그를 주로 소개합니다. 필요한 친구는
을 참고하세요. HTML5 템플릿 요소 얼굴
d477f9ce7bf77f53fbcf36bec1b69b7a 요소는 기본적으로 2013년에만 등장한 것으로 판단할 수 있습니다. 이름에서 알 수 있듯이 "템플릿 요소"를 선언하는 데 사용됩니다.
현재 우리는 HTML에 템플릿 HTML을 삽입하고 있는데, 이는 종종 다음과 같이 작성됩니다:
<script type="text/template"> // ... </script>
실제로 type=은 존재하지 않습니다. "text/template"의 표준 작성 방법과 d477f9ce7bf77f53fbcf36bec1b69b7a 요소의 모양은 HTML 템플릿 HTML을 보다 표준화되고 표준화하기 위한 것입니다.
이전에는 4750256ae76b6b9d804861d8f69e79d3 또는 43e1fc467495bab219a3286f74139f6a(구식이지만 여전히 사용 가능)를 사용하여 이스케이프되지 않은 HTML 태그 코드를 중첩하여 일부 특정 프런트엔드 기능을 구현했습니다. 다시 말하지만, 위에서 널리 사용되는 사용법과 마찬가지로 모두 불규칙합니다. 미래의 트렌드를 고려하면 d477f9ce7bf77f53fbcf36bec1b69b7a 태그가 나아갈 방향은 분명합니다. 하지만 호환성은 무시할 수 없는 문제이기 때문에 많은 이야기가 있어도 실제 가치는 제한적이므로 간단히 소개하겠습니다.
2. HTML5 템플릿 요소 중복
다음 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. 태그 내용 숨기기
3f1c4e4b6b16bbbd69b2ee476dc4f83a 자체의 특수성으로 인해 내부 HTML 태그가문자열에 따라 처리될 수 있습니다. 따라서 생성된 콘텐츠는 표시되지 않습니다. 그런데 드림위버에서는 이런 작성 방식이 큰 문제를 안고 있는데, 스크립트에서 템플릿 HTML을 작성할 때 항상 태그가 자동으로 닫히는 2cacc6d41bbb37262a98f745aa00fbf0가 매우 짜증나는 일입니다. 4750256ae76b6b9d804861d8f69e79d3는 텍스트 영역이며, 내부에 중첩된 HTML 조각이 텍스트 영역의 값으로 사용됩니다. 그러나 텍스트 필드 자체가 표시되므로 추가 설정이 필요합니다. display: none;
43e1fc467495bab219a3286f74139f6a는 매우 오래되고 특별한
속성 입니다. 나중에 e03b848252eb9375d56be284e690e873 태그로 대체되어 폐지되었다고 합니다. 실제로 현재는 모든 브라우저에서 지원하고 있습니다. 그러나 e03b848252eb9375d56be284e690e873 태그와 동일시할 수는 없습니다. e03b848252eb9375d56be284e690e873 안에는 이미지를 표시하는 a1f02c36ba31691bcfe87b2722de723b 태그가 있고, HTML 코드를 표시하는 43e1fc467495bab219a3286f74139f6a 하지만 4750256ae76b6b9d804861d8f69e79d3와 마찬가지로 콘텐츠가 표시되지 않으면 추가 설정인 display: none;이 필요합니다. 위의 d477f9ce7bf77f53fbcf36bec1b69b7a 태그에 Display: none;이 설정되어 있지 않습니다. 왜? 이는 display:none으로 생성된 d477f9ce7bf77f53fbcf36bec1b69b7a 태그 요소의 원래 특성을 활용하는 동시에 템플릿 요소의 내부 콘텐츠가 표시되지 않습니다. 따라서 숨기기를 설정할 필요가 없습니다. 이는 HTML5 태그 요소의 특징 중 하나입니다.
태그의 임의 위치
위의 d477f9ce7bf77f53fbcf36bec1b69b7a 하위 요소를 자연스럽게 숨기기 위해 d477f9ce7bf77f53fbcf36bec1b69b7a 태그는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그와 매우 유사한 임의의 위치를 갖습니다. 031ab252748b42c2b9c69ab8fc8b03bd 또는 6c04bd5ca3fcae76e30b72ad730ca86d에 배치됩니다.
3. childNodes의 무효성
육안으로는 d477f9ce7bf77f53fbcf36bec1b69b7a 태그에 하위 태그가 많은 것처럼 보이지만 이러한 관성적 사고는 적용되지 않습니다. 여기. 변수 template이 우리가 얻은 d477f9ce7bf77f53fbcf36bec1b69b7a 태그 DOM(그 안에 많은 HTML 코드가 있음)이라고 가정하면 template.childNodes가 비어 있음을 알 수 있습니다. template.innerHTML을 사용하여 완전한 HTML 조각을 얻을 수 있습니다. "의사 하위 요소"를 가져와야 하는 경우. 방법이 있습니다. 눈을 크게 뜨고 content 속성을 사용하세요.
CSS 코드클립보드에 콘텐츠 복사
var image_first = template.content.querySelector("img");
- 3입니다. 템플릿 요소 마지막 페이지
템플릿 요소 및 CSS
찾아보면 ca9ceec3554d5f69281718c4b9ecdc8b은 일반적인 맞춤 요소라고 생각하면 다음과 같이 표시되며 내부 태그는 일반 태그에 따라 렌더링됩니다.
如果浏览器与时俱进，则显示会是下面这样，自身CSS渲染，内部标签直接异空间不渲染，例如Chrome:
也就是说，虽然从CSS的角度看，d477f9ce7bf77f53fbcf36bec1b69b7a就是个跟CSS打得火热的普通元素，但是，从HTML角度看，其犹如带土的写轮眼，可以让内部标签转移到异空间，血迹界限般稀有。
默认情况下，d477f9ce7bf77f53fbcf36bec1b69b7a是隐藏的，实际是默认其display属性为none. 使用下面的代码一测便知：
window.getComputedStyle(template).display; // 结果是"none"
因此，demo中才设置了如下的CSS声明：
CSS Code复制内容到剪贴板
template { display: block; ... }-
模板的克隆
如果你是在HTML字符串上处理，类似于现在流行的MVC框架或模板技术，则template.innerHTML足矣。然，d477f9ce7bf77f53fbcf36bec1b69b7a比3f1c4e4b6b16bbbd69b2ee476dc4f83a强大之处在于，3f1c4e4b6b16bbbd69b2ee476dc4f83a内部内容只能当做字符串来获取，而d477f9ce7bf77f53fbcf36bec1b69b7a虽然存在于异空间，但是，依然可以节点获取（上面有展示），以及完整克隆，语法类似下面：
CSS Code复制内容到剪贴板
var clone = document.importNode(template.content, true);
然后，你就可以用append节点(appendChild)的方式，加载模板内容了，而不是（没得选择）append字符串加载模板内容。标题是“简介”，因此，不展开，也不放具体的实例了（若有兴趣，可参考文末的参考文章），大家知道有这么回事就好。
四、HTML5 template面试小结
至此，d477f9ce7bf77f53fbcf36bec1b69b7a元素的行为、表现以及一些方法基本上有了大致的认识，如果这是场面试的话，则我对d477f9ce7bf77f53fbcf36bec1b69b7a的评价还是挺高的，特殊场景使用的特殊利器，一些类似“异空间”的设计也是让人大开眼界，这个元素要比d8eccd9ed644b68a6460a2bb84548c82之类的HTML5元素更受欢迎更受关注也更有潜力。
临近最后，放上兼容性表，IE浏览器拖了好大的后腿，不过我表示很淡定，因为对IE早已麻木！
兼容性
위 내용은 HTML5의 태그 상세 소개(그림 및 텍스트)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!