html5의 의미 태그는 무엇입니까-프런트엔드 Q&A-php.cn

html5 의미 태그: 1. 헤더 태그, 3. 바닥글 태그, 5. 섹션 태그, 7. 그림 태그, 10. 주소 태그.

html5의 의미 태그는 무엇입니까

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

HTML 의미화:

각 HTML 태그에는 자체적인 의미가 있습니다(의미론). 의미화는 의미상 적절한 태그를 사용하여 페이지가 좋은 구조와 요소를 갖게 된다는 뜻입니다 사람과 검색 엔진 모두가 쉽게 이해할 수 있습니다.

더 생생한 예를 봤습니다.

집을 지을 때 어떤 부분은 벽돌로 만들고, 어떤 부분은 세라믹 타일로 만들고, 어떤 부분은 시멘트로 덮어야 합니다. 집은 튼튼하고 깔끔하고 아름다워질 것입니다.

벽돌을 굳이 세라믹 타일로 교체하면 집도 거의 지을 수 없는데 그런 집은 튼튼하지도 않고, 무너지기 쉽고, 외관도 보기 좋지 않습니다.

마찬가지로 인생의 많은 것들이 비슷합니다! 표현하고 싶은 태그를 무엇이든 사용하세요 구조가 좋고 사람과 검색 엔진이 이해하기 쉽습니다. 또 다른 점은 개발 및 유지 관리가 쉽다는 것입니다. 웹 페이지 구조를 많이 보았고 이에 대해 불평하고 싶습니다. 모든 것이 혼란 스럽습니다. 그냥 CSS에 배치하지 마십시오. 외모와 발표를 위해!

의미론의 의미와 역할

명확한 구조
사용자 경험을 제공할 수 있습니다. 예를 들어 제목과 대체는 명사를 설명하는 데 사용됩니다. 사진 정보 설명, 라벨 태그의 유연한 사용은
SEO에 좋습니다: 검색 엔진과의 원활한 커뮤니케이션을 구축하면 크롤러가 더 효과적인 정보를 크롤링하는 데 도움이 됩니다. 크롤러는 라벨을 사용하여 각 키워드의 컨텍스트와 가중치를 결정합니다. 편리한 다른 장치(예: 스크린 리더, 시각 장애인 리더, 모바일 장치)를 구문 분석하여 웹 페이지를 의미 있는 방식으로 렌더링합니다.
팀 개발 및 유지 관리 에 편리하며 다음 단계인 의미론이 더 읽기 쉽습니다. W3C 표준을 따르는 트렌드, 팀은 모두 이 표준을 따르므로 차별화를 줄일 수 있습니다
의미론에서 주의해야 할 점은 무엇인가요?

HTML5에 새로 추가된 보다 강력한 의미 태그를 사용하세요.

글꼴, b, ... 등과 같은 스타일화된 태그를 사용하지 마세요. . 잠깐만요, CSS를 완전히 사용하여 스타일을 구현할 수 있습니다. (게다가 HTML5에서는 이러한 "스타일화된 태그"가 기본적으로 폐지됩니다!)
텍스트를 강조하고, 강한 태그를 사용하여 강조를 강화하고, em 태그를 설정하세요. 이탤릭체
표 작성 시 규격:
title
은 캡션,
는 thead,
body는 tbody, tail은 tfoot으로 묶어야 합니다. 테이블 헤더는 일반 셀과 구별되어야 합니다, 테이블 헤더에는 th를, 셀에는 td를 사용합니다. 양식 필드는 필드 세트 태그로 래핑되어야 하며, 범례 태그를 사용하여 양식의 목적을 설명합니다. 솔직히 별로 눈치채지 못했어요! )
각 입력 라벨에 해당하는 설명 텍스트는 라벨 라벨을 사용해야 하며, id 속성을 통해 해당 입력과 연결됩니다.
HTML5 의미 태그:

1.header: 태그는 "웹페이지" 또는 "섹션"의 헤더를 정의합니다.

일반적으로

전체 페이지 또는 콘텐츠 블록의 제목

으로 h1-h6 요소 또는 hgroup

을 포함합니다. 섹션, 검색 상자, 탐색 또는 관련 로고의 디렉터리 부분을 래핑할 수도 있습니다.

<header>
     <h1>毕业生实习</h1>
     <span>2016/08/05</span>
</header>
<!--之前使用的是无语义的div+class-->
<div class=&#39;header&#39;>...</div>

로그인 후 복사

또는 <header> <hgroup> <h1>网站标题</h1> <h2>网站副标题</h2> </hgroup> </header>
로그인 후 복사
사용법:

은 "웹페이지" 또는 모든 "섹션"의 헤더 부분일 수 있습니다.

개수에는 제한이 없습니다.

hgroup이나 h1-h6이 단독으로 잘 작동한다면 헤더를 사용하지 마세요.

<nav>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">xxx</a></li>
        <li><a href="#">xxx</a></li>
        <li><a href="#">xxx</a></li>
    </ul>
</nav>
<!--之前使用的是无语义的div+class-->
<div class=&#39;nav&#39;>...</div>

로그인 후 복사

사용법:

전체 페이지기본 탐색 부분

에 사용됩니다. 적절하지 않은 경우 탐색 요소를 사용하지 마세요.

는

을 위한 링크 그룹으로 사용할 수 있습니다. 모든 링크 그룹이 그렇지는 않습니다. 필수 탐색 요소에 넣으세요 ,
참고 : 예를 들어 바닥글에는 서비스 약관을 포함한 링크 세트 가 있습니다. , 홈페이지, 저작권문 등

하는 것이 가장 적합합니다.

특정 용도: 기존 탐색 모음, 사이드바 탐색, 업계 탐색, 페이지 넘김 작업 등 3.footer 태그: "웹페이지" 또는 "섹션"의 바닥글을 나타냅니다.

通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。

如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。

<footer>
  作者：xxxx <br />
 Copyright © xxx.All rights reserved.
</footer>
<!--之前使用的是无语义的div+class-->
<div class=&#39;footer&#39;>...</div>

로그인 후 복사

用法：

可以是“网页”或任意“section”的底部部分；
没有个数限制，除了包裹的内容不一样，其他跟header类似。
多用于包含服务条款，友情链接、作者信息、版权信息等

4. hgroup元素：“网页”或“section”的标题

当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合

<hgroup>
    <h1>主标题</h1>
    <h2>HTML 5</h2>
</hgroup>

로그인 후 복사

用法：

如果只需要一个h1-h6标签就不用hgroup
如果有连续多个h1-h6标签就用hgroup
如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签

5.section标签：定义文档中含有标题和段落的区域。（强调分段或分块）

<section>
  <h1>section要包含标题</h1>
  <p>section要包含内容...</p>
</section>

로그인 후 복사

用法：

article、nav、aside可以理解为特殊的section，所以如果可以用article、nav、aside就不要用section，没实际意义的就用p
当容器需要标题和内容时，建议使用section标签，若只是普通的容器，应该用p元素较好！section标签非p！

6.article：代表独立、完整、可独自被外部引用的内容（博客或报刊中的文章、一遍论坛帖子、一段用户评论或独立的插件、或任何独立的内容）;（强调的是独立性！可含有完整的标题、内容、脚注)

<article>
   <header>
     <h1>标题处</h1>
   </header>
   <p>内容描述</p>
   <footer>脚部声明标注</footer>
</article>

로그인 후 복사

用法：定义一个独立完整的内容部分（可包含标题，内容，脚注）时使用！

article、section间的相互嵌套关系：
拜读博文：http://www.html5jscss.com/html5-semantics-section.html

7. aside标签：表示当前页面或文章的附属信息部分，可包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他类似的有别于主要内容的部分。

书籍中的定义很长很绕，在收集之后，发现主要有两种用法:（啃下概念）

1.用于article标签之内，此时表示的是该独立内容的附属信息部分；

<article>
        <p>article内容区</p>
        <aside>
            <span>附属信息1</span>
            <span>附属信息2</span>
            <span>附属信息3</span>
        </aside>
    </article>

로그인 후 복사

2.用于article标签之外，此时作为页面或站点全局的附属信息部分。

    <aside>
        <h1>附属信息标题</h1>
        <a href="#">附属信息...</a>
        <a href="#">附属信息...</a>
        <a href="#">附属信息...</a>
    </aside>

로그인 후 복사

用法：

aside在article内表示主要内容的附属信息
在article之外则可做侧边栏，页面或站点全局的附属信息部分
如果是广告，其他日志链接或者其他分类导航也可以用

（一句话概括：不同的位置表示为对应区域的附属信息！）

8. figure标签：规定独立的流内容（图像、图表、照片、代码等等）。

figcaption标签：用于元素定义figure的标题。

1.一个figure元素内最多只允许放置一个figcaption元素，其他元素可无限放置。

2.figcaption 元素应该被置于 figure元素的第一个或最后一个子元素的位置。

    <figure>
        <figcaption>figure的标题</figcaption>
        <img src="pic.jpg" alt="...">
    </figure>

로그인 후 복사

9. time标签：定义时间或日期

<p>定义时间...<time>9:00</time></p>

<p>结合datetime属性定义日期...<time datetime="2016-08-08">时间</time></p>

로그인 후 복사

以上为实践操作中可能会用到的标签，HTML5还新增了很多标签，但因为用途与浏览器兼容性问题，还是为人所慎用的！待拓展！

10. address标签：代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,一般出现在footer。

表示文档或文章的作者/拥有者的联系信息，在body标签中表示文档的作者的联系信息；在article标签中表示文章作者的联系信息；

W3School示例文档：http://www.w3school.com.cn/tags/tag_address.asp

用法：

标签不应该用于描述通讯地址，除非它是联系信息的一部分。
元素通常连同其他信息被包含在 footer 元素中。

总结：掌握语义化含义、作用以及应当注意的细节，HTML5中常用的语义化新标签！知识点不在于多，而研究透彻应学以致用！

推荐教程：《html视频教程》

위 내용은 html5의 의미 태그는 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!