HTML5_html5 튜토리얼 기술의 <template> 태그에 대한 자세한 설명-H5 튜토리얼-php.cn

1. HTML5 템플릿 요소를 먼저 살펴보세요

요소는 기본적으로 2013년에만 등장한 것이 확실합니다. 이름에서 알 수 있듯이 "템플릿 요소"임을 선언하는 데 사용됩니다.

현재 우리는 HTML에 템플릿 HTML을 포함하고 있는데, 이는 종종 다음과 같이 작성됩니다:

XML/HTML 코드 클립보드에 콘텐츠 복사 스크립트 유형 = "텍스트/템플릿" > // ... 스크립트 > 사실 type="text/template"을 작성하는 표준 방법은 없습니다. 요소의 모양은 HTML 템플릿 HTML을 보다 표준화되고 표준화하기 위한 것입니다.

과거에는 특정 프런트 엔드 기능을 달성하기 위해 이스케이프되지 않은 HTML 태그 코드를 중첩하기 위해 또는 (구식이지만 여전히 사용 가능)을 사용했을 수 있습니다. 사용법은 동일하며 둘 다 불규칙합니다. 미래의 트렌드를 고려하면 태그가 나아갈 방향은 분명합니다. 하지만 호환성은 무시할 수 없는 문제이기 때문에 많은 이야기가 있어도 실제 가치는 제한적이므로 간단히 소개하겠습니다. 2. HTML5 템플릿 요소 중복

다음 네 개의 중첩된 이미지 HTML을 보면 동시에 이미지 콘텐츠가 표시되지 않고 요청도 없습니다.

XML/HTML 코드 클립보드에 콘텐츠 복사 스크립트 유형 = "텍스트/템플릿" > img src = "mm1. jpg" > 스크립트 > 텍스트 영역 스타일 = "디스플레이: 없음;" > img src = "mm1. jpg" > 텍스트 영역 > xmp 스타일 = "디스플레이: 없음;" > img src = "mm1. jpg" > xmp > 템플릿 > img src = "mm1. jpg" > 템플릿 > 1. 태그 내용의 숨김

의 특수성으로 인해 내부 HTML 태그를 문자열로 처리할 수 있으므로 생성된 콘텐츠가 표시되지 않습니다. 그런데 드림위버에서는 이런 작성 방식이 큰 문제를 안고 있는데, 스크립트에서 템플릿 HTML을 작성할 때 태그가 자동으로 닫히는 부분이 항상 되어 매우 귀찮습니다. 는 텍스트 영역이며, 내부에 중첩된 HTML 조각이 텍스트 영역의 값으로 사용됩니다. 그러나 텍스트 필드 자체가 표시되므로 추가 설정이 필요합니다. display: none; 나중에 태그로 대체되어 폐지되었다고 합니다. 실제로 현재는 모든 브라우저에서 지원하고 있습니다. 그러나 태그와 동일시할 수는 없습니다. 안에는 이미지를 표시하는 태그가 있고, HTML 코드를 표시하는 하지만 와 마찬가지로 콘텐츠가 표시되지 않으면 추가 설정인 display: none; 이 필요합니다. 위의 태그에 Display: none;이 설정되어 있지 않습니다. 왜? 이는 display:none으로 생성된 태그 요소의 원래 특성을 활용하는 동시에 템플릿 요소의 내부 콘텐츠가 표시되지 않습니다. 따라서 숨기기를 설정할 필요가 없습니다. 이는 HTML5 태그 요소의 특징 중 하나인 태그 내용 숨기기입니다.

2. 태그 위치 임의성 위의 하위 요소를 자연스럽게 숨기는 것 외에도 태그에는 위치 임의성도 있습니다. , 이는 또는 태그와 매우 유사합니다.

3. childNodes의 무효성 태그에 하위 태그가 많이 있는 것처럼 보이지만 여기서는 이런 관성적 사고가 적용되지 않습니다. 변수 template가 우리가 얻은 태그 DOM(그 안에 많은 HTML 코드가 있음)이라고 가정하면 template.childNodes가 비어 있음을 알 수 있습니다. template.innerHTML을 사용하여 완전한 HTML 조각을 얻을 수 있습니다. "의사 하위 요소"를 가져와야 하는 경우. 방법이 있습니다. 눈을 크게 뜨고 content 속성을 사용하세요.

template.content는 다른 문서로 이해할 수 있는 문서 조각을 반환합니다. 그런 다음 문서 아래의 일부 쿼리 API를 사용하여 태그에서 "의사 하위 요소"를 얻을 수 있습니다. 예를 들어 첫 번째 이미지 요소를 얻는 방법은 다음과 같습니다.

CSS 코드 클립보드에 콘텐츠 복사 var image_first = template. content .querySelector( "img" ) 3. HTML5 템플릿 요소 마지막 페이지

여기를 클릭하세요: HTML5 템플릿 요소 체험 데모

템플릿 요소 및 CSS 브라우저가 를 일반적인 맞춤 요소로 인식하는 경우 디스플레이는 다음과 같이 표시되며 내부 태그는 일반 태그로 렌더링됩니다. .

브라우저가 시대에 보조를 맞추면 디스플레이는 자체 CSS 렌더링을 사용하여 다음과 같이 되며 내부 태그는 Chrome과 같은 다른 공간에서 직접 렌더링됩니다.

즉, CSS 관점에서 보면 은 CSS와 경쟁하는 일반적인 요소이지만, HTML 관점에서는 내부 태그를 다른 방식으로 전송할 수 있는 Obito의 Sharingan과 같습니다. 우주에서 혈흔은 한계만큼이나 드뭅니다.

기본적으로 은 숨겨져 있으며 해당 표시 속성은 실제로 기본적으로 없음입니다. 다음 코드를 사용하면 알 수 있습니다.

window.getCompulatedStyle(template).display; // 결과는 "없음"입니다

따라서 데모에는 다음 CSS 문이 설정되어 있습니다.

CSS 코드 클립보드에 콘텐츠 복사 템플릿 { 디스플레이 : 블록 ... } 템플릿 복제 현재 널리 사용되는 MVC 프레임워크 또는 템플릿 기술과 유사한 HTML 문자열을 다루는 경우 template.innerHTML이면 충분합니다. 물론 은 의 내부 콘텐츠를 문자열로만 얻을 수 있다는 점에서 노드별(위 표시) 및 전체 복제의 경우 구문은 다음과 유사합니다.

CSS 코드 클립보드에 콘텐츠 복사 var clone = document.importNode(template. content , true) 그런 다음 템플릿 콘텐츠를 로드하기 위해 문자열을 추가하는 대신(선택 사항 없음) 추가 노드(appendChild)를 사용하여 템플릿 콘텐츠를 로드할 수 있습니다. 제목이 "소개"이므로 더 이상 설명하지 않고 구체적인 예를 포함하지 않겠습니다. (관심이 있으시면 기사 마지막에 있는 참고 기사를 참조하세요.) 물건이 존재합니다. 4. HTML5 템플릿 인터뷰 요약

이 시점에서 나는 기본적으로 요소의 동작, 성능 및 일부 방법에 대해 전반적으로 이해하고 있습니다. 특수한 도구, "다른 공간"과 유사한 일부 디자인도 눈길을 끕니다. 이 요소는 과 같은 HTML5 요소보다 더 대중적이고 더 많은 잠재력을 가지고 있습니다.

마지막에 호환성표를 올려 놓았습니다. IE 브라우저가 큰 방해가 되었지만, 이미 IE에 무감각했기 때문에 매우 침착했습니다!

호환성