HTML5의 태그 상세 소개(그림 및 텍스트)-H5 튜토리얼-php.cn

본 글에서는 HTML5를 시작하는데 중요한 지식인 HTML5 의 템플릿 태그를 주로 소개합니다. 필요한 친구는

을 참고하세요. HTML5 템플릿 요소 얼굴

요소는 기본적으로 2013년에만 등장한 것으로 판단할 수 있습니다. 이름에서 알 수 있듯이 "템플릿 요소"를 선언하는 데 사용됩니다.

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

// ... 로그인 후 복사 실제로 type=은 존재하지 않습니다. "text/template"의 표준 작성 방법과 요소의 모양은 HTML 템플릿 HTML을 보다 표준화되고 표준화하기 위한 것입니다.

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

다음 4개의 중첩된 이미지 HTML을 보면 동시에 이미지 내용이 표시되지 않고 쓰기 요청도 없습니다. 🎜> 로그인 후 복사

1. 태그 내용 숨기기

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

태그의 임의 위치 위의 하위 요소를 자연스럽게 숨기기 위해 태그는 태그와 매우 유사한 임의의 위치를 갖습니다. head > 또는 에 배치됩니다.

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

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

CSS 코드 클립보드에 콘텐츠 복사 var image_first = template.content.querySelector("img"); 로그인 후 복사

3입니다. 템플릿 요소 마지막 페이지 여기를 클릭하세요: HTML5 템플릿 템플릿 요소 체험 데모

템플릿 요소 및 CSS 찾아보면 은 일반적인 맞춤 요소라고 생각하면 다음과 같이 표시되며 내부 태그는 일반 태그에 따라 렌더링됩니다. 如果浏览器与时俱进，则显示会是下面这样，自身CSS渲染，内部标签直接异空间不渲染，例如 Chr ome:

也就是说，虽然从CSS的角度看， 就是个跟CSS打得火热的普通元素，但是，从HTML角度看，其犹如带土的写轮眼，可以让内部标签转移到异空间，血迹界限般稀有。

默认情况下， 是隐藏的，实际是默认其display属性为none. 使用下面的代码一测便知：

window.getComputedStyle(template).display; // 结果是"none" 로그인 후 복사

因此，demo中才设置了如下的CSS声明：

CSS Code 复制内容到剪贴板

template { display: block; ... } 로그인 후 복사 模板的克隆 如果你是在HTML字符串上处理，类似于现在流行的 MVC 框架 或 模板技术 ，则template.innerHTML足矣。然， 比 强大之处在于， 内部内容只能当做字符串来获取，而 虽然存在于异空间，但是，依然可以节点获取（上面有展示），以及完整克隆，语法类似下面：

CSS Code 复制内容到剪贴板

var clone = document.importNode(template.content, true); 로그인 후 복사 然后，你就可以用append节点(appendChild)的方式，加载模板内容了，而不是（没得选择）append字符串加载模板内容。标题是“简介”，因此，不展开，也不放具体的实例了（若有兴趣，可参考文末的参考文章），大家知道有这么回事就好。

四、HTML5 template面试小结 至此， 元素的行为、表现以及一些方法基本上有了大致的认识，如果这是场面试的话，则我对 的评价还是挺高的，特殊场景使用的特殊利器，一些类似“异空间”的设计也是让人大开眼界，这个元素要比 之类的HTML5元素更受欢迎更受关注也更有潜力。

临近最后，放上兼容性表，IE浏览器拖了好大的后腿，不过我表示很淡定，因为对IE早已麻木！

兼容性