HTML5_html5 튜토리얼 기술의 태그에 대한 자세한 설명
May 16, 2016 pm 03:51 PM1. HTML5 템플릿 요소를 먼저 살펴보세요
<template> 요소는 기본적으로 2013년에만 등장한 것이 확실합니다. 이름에서 알 수 있듯이 "템플릿 요소"임을 선언하는 데 사용됩니다.
현재 우리는 HTML에 템플릿 HTML을 포함하고 있는데, 이는 종종 다음과 같이 작성됩니다:
- <스크립트 유형="텍스트/템플릿">
- // ...
- </스크립트>
사실 type="text/template"을 작성하는 표준 방법은 없습니다. <template> 요소의 모양은 HTML 템플릿 HTML을 보다 표준화되고 표준화하기 위한 것입니다.
과거에는 특정 프런트 엔드 기능을 달성하기 위해 이스케이프되지 않은 HTML 태그 코드를 중첩하기 위해 <textarea> 또는 <xmp>(구식이지만 여전히 사용 가능)을 사용했을 수 있습니다. 사용법은 동일하며 둘 다 불규칙합니다. 미래의 트렌드를 고려하면 <template> 태그가 나아갈 방향은 분명합니다. 하지만 호환성은 무시할 수 없는 문제이기 때문에 많은 이야기가 있어도 실제 가치는 제한적이므로 간단히 소개하겠습니다.
2. HTML5 템플릿 요소 중복
다음 네 개의 중첩된 이미지 HTML을 보면 동시에 이미지 콘텐츠가 표시되지 않고 요청도 없습니다.
- <스크립트 유형="텍스트/템플릿">
- <img src="mm1. jpg">
- </스크립트>
- <텍스트 영역 스타일="디스플레이: 없음;">
- <img src="mm1. jpg">
- </텍스트 영역>
- <xmp 스타일="디스플레이: 없음;">
- <img src="mm1. jpg">
- </xmp>
- <템플릿>
- <img src="mm1. jpg">
- </템플릿>
1. 태그 내용의 숨김
<script>의 특수성으로 인해 내부 HTML 태그를 문자열로 처리할 수 있으므로 생성된 콘텐츠가 표시되지 않습니다. 그런데 드림위버에서는 이런 작성 방식이 큰 문제를 안고 있는데, 스크립트에서 템플릿 HTML을 작성할 때 태그가 자동으로 닫히는 부분이 항상 </script>되어 매우 귀찮습니다.
<textarea>는 텍스트 영역이며, 내부에 중첩된 HTML 조각이 텍스트 영역의 값으로 사용됩니다. 그러나 텍스트 필드 자체가 표시되므로 추가 설정이 필요합니다. display: none;
<xmp> 나중에 <pre> 태그로 대체되어 폐지되었다고 합니다. 실제로 현재는 모든 브라우저에서 지원하고 있습니다. 그러나 <pre> 태그와 동일시할 수는 없습니다. <pre> 안에는 이미지를 표시하는 <img> 태그가 있고, HTML 코드를 표시하는 <xmp> 하지만 <textarea>와 마찬가지로 콘텐츠가 표시되지 않으면 추가 설정인 display: none;
이 필요합니다. 위의 <template> 태그에 Display: none;이 설정되어 있지 않습니다. 왜? 이는 display:none으로 생성된 <template> 태그 요소의 원래 특성을 활용하는 동시에 템플릿 요소의 내부 콘텐츠가 표시되지 않습니다. 따라서 숨기기를 설정할 필요가 없습니다. 이는 HTML5 <template> 태그 요소의 특징 중 하나인 태그 내용 숨기기입니다.
2. 태그 위치 임의성
위의 <template> 하위 요소를 자연스럽게 숨기는 것 외에도 <template> 태그에는 위치 임의성도 있습니다. , 이는 <The script> 또는 <style> 태그와 매우 유사합니다.
3. childNodes의 무효성
<template> 태그에 하위 태그가 많이 있는 것처럼 보이지만 여기서는 이런 관성적 사고가 적용되지 않습니다. 변수 template가 우리가 얻은 <template> 태그 DOM(그 안에 많은 HTML 코드가 있음)이라고 가정하면 template.childNodes가 비어 있음을 알 수 있습니다. template.innerHTML을 사용하여 완전한 HTML 조각을 얻을 수 있습니다. "의사 하위 요소"를 가져와야 하는 경우. 방법이 있습니다. 눈을 크게 뜨고 content 속성을 사용하세요.
template.content는 다른 문서로 이해할 수 있는 문서 조각을 반환합니다. 그런 다음 문서 아래의 일부 쿼리 API를 사용하여 <template> 태그에서 "의사 하위 요소"를 얻을 수 있습니다. 예를 들어 첫 번째 이미지 요소를 얻는 방법은 다음과 같습니다.
- var image_first = template.content.querySelector("img")
3. HTML5 템플릿 요소 마지막 페이지
여기를 클릭하세요: HTML5 템플릿 요소 체험 데모
템플릿 요소 및 CSS
브라우저가 <template>를 일반적인 맞춤 요소로 인식하는 경우 디스플레이는 다음과 같이 표시되며 내부 태그는 일반 태그로 렌더링됩니다. .
브라우저가 시대에 보조를 맞추면 디스플레이는 자체 CSS 렌더링을 사용하여 다음과 같이 되며 내부 태그는 Chrome과 같은 다른 공간에서 직접 렌더링됩니다. 
즉, CSS 관점에서 보면 <template>은 CSS와 경쟁하는 일반적인 요소이지만, HTML 관점에서는 내부 태그를 다른 방식으로 전송할 수 있는 Obito의 Sharingan과 같습니다. 우주에서 혈흔은 한계만큼이나 드뭅니다.
기본적으로 <template>은 숨겨져 있으며 해당 표시 속성은 실제로 기본적으로 없음입니다. 다음 코드를 사용하면 알 수 있습니다.
window.getCompulatedStyle(template).display; // 결과는 "없음"입니다
따라서 데모에는 다음 CSS 문이 설정되어 있습니다.
- 템플릿 { 디스플레이: 블록 ... }
템플릿 복제
현재 널리 사용되는 MVC 프레임워크 또는 템플릿 기술과 유사한 HTML 문자열을 다루는 경우 template.innerHTML이면 충분합니다. 물론 <template>은 <script>의 내부 콘텐츠를 문자열로만 얻을 수 있다는 점에서 <template> 노드별(위 표시) 및 전체 복제의 경우 구문은 다음과 유사합니다.
- var clone = document.importNode(template.content, true)
그런 다음 템플릿 콘텐츠를 로드하기 위해 문자열을 추가하는 대신(선택 사항 없음) 추가 노드(appendChild)를 사용하여 템플릿 콘텐츠를 로드할 수 있습니다. 제목이 "소개"이므로 더 이상 설명하지 않고 구체적인 예를 포함하지 않겠습니다. (관심이 있으시면 기사 마지막에 있는 참고 기사를 참조하세요.) 물건이 존재합니다.
4. HTML5 템플릿 인터뷰 요약
이 시점에서 나는 기본적으로 <template> 요소의 동작, 성능 및 일부 방법에 대해 전반적으로 이해하고 있습니다. 특수한 도구, "다른 공간"과 유사한 일부 디자인도 눈길을 끕니다. 이 요소는 <hgroup>과 같은 HTML5 요소보다 더 대중적이고 더 많은 잠재력을 가지고 있습니다.
마지막에 호환성표를 올려 놓았습니다. IE 브라우저가 큰 방해가 되었지만, 이미 IE에 무감각했기 때문에 매우 침착했습니다!
호환성
인기 기사
인기 기사
뜨거운 기사 태그
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7301
9
1622
14
1342
46
1259
25
1206
29
