HTML5_html5 튜토리얼 기술의 태그에 대한 자세한 설명

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

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

XML/HTML 코드클립보드에 콘텐츠 복사

1. 스크립트 유형="텍스트/템플릿"> 
2. // ...
3. 스크립트>

사실 type="text/template"을 작성하는 표준 방법은 없습니다.

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

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

XML/HTML 코드클립보드에 콘텐츠 복사

1. 스크립트 유형="텍스트/템플릿">  
2. img src="mm1. jpg">  
3. 스크립트>  
4.   
5. 텍스트 영역 스타일="디스플레이: 없음;">  
6. img src="mm1. jpg">  
7. 텍스트 영역>  
8.   
9. xmp 스타일="디스플레이: 없음;">  
10. img src="mm1. jpg">  
11. xmp>  
12.   
13. 템플릿>  
14. img src="mm1. jpg">  
15. 템플릿>  

1. 태그 내용의 숨김

<script>의 특수성으로 인해 내부 HTML 태그를 문자열로 처리할 수 있으므로 생성된 콘텐츠가 표시되지 않습니다. 그런데 드림위버에서는 이런 작성 방식이 큰 문제를 안고 있는데, 스크립트에서 템플릿 HTML을 작성할 때 태그가 자동으로 닫히는 부분이 항상 </script>되어 매우 귀찮습니다.
는 텍스트 영역이며, 내부에 중첩된 HTML 조각이 텍스트 영역의 값으로 사용됩니다. 그러나 텍스트 필드 자체가 표시되므로 추가 설정이 필요합니다. display: none;<br> <xmp> 나중에 <pre class="brush:php;toolbar:false"> 태그로 대체되어 폐지되었다고 합니다. 실제로 현재는 모든 브라우저에서 지원하고 있습니다. 그러나 <pre class="brush:php;toolbar:false"> 태그와 동일시할 수는 없습니다. <pre class="brush:php;toolbar:false"> 안에는 이미지를 표시하는 <img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/file_images/article/201506/2015619175843048.png?2015519175852?x-oss-process=image/resize,p_40" class="lazy" alt="HTML5_html5 튜토리얼 기술의 태그에 대한 자세한 설명" > 태그가 있고, HTML 코드를 표시하는 <xmp> 하지만 <textarea>와 마찬가지로 콘텐츠가 표시되지 않으면 추가 설정인 display: none;<br>이 필요합니다. 위의 <template> 태그에 Display: none;이 설정되어 있지 않습니다. 왜? 이는 display:none으로 생성된 <template> 태그 요소의 원래 특성을 활용하는 동시에 템플릿 요소의 내부 콘텐츠가 표시되지 않습니다. 따라서 숨기기를 설정할 필요가 없습니다. 이는 HTML5 <template> 태그 요소의 특징 중 하나인 태그 내용 숨기기입니다.</template></template></template></textarea></xmp></pre></pre></pre></xmp>

2. 태그 위치 임의성
위의

3. childNodes의 무효성

template.content는 다른 문서로 이해할 수 있는 문서 조각을 반환합니다. 그런 다음 문서 아래의 일부 쿼리 API를 사용하여

CSS 코드클립보드에 콘텐츠 복사

1. var image_first = template.content.querySelector("img")

3. HTML5 템플릿 요소 마지막 페이지

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

템플릿 요소 및 CSS
브라우저가

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

즉, CSS 관점에서 보면

기본적으로

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

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

CSS 코드클립보드에 콘텐츠 복사

1. 템플릿 { 디스플레이: 블록 ... }

템플릿 복제
현재 널리 사용되는 MVC 프레임워크 또는 템플릿 기술과 유사한 HTML 문자열을 다루는 경우 template.innerHTML이면 충분합니다. 물론

CSS 코드클립보드에 콘텐츠 복사

1. var clone = document.importNode(template.content, true)

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

이 시점에서 나는 기본적으로

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

호환성