ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML5新语义化标签

2021-09-23 11:29:52  阅读:160  来源: 互联网

标签:... 标签 section 元素 语义 标题 HTML5 article


标签介绍

  • header — 页眉
  • main — 主体
  • nav — 导航
  • article — 独立的内容
  • section — 一个区域,跟div的功能和语义是一样的
  • aside — 辅助信息的内容
  • footer — 页脚
  • figure — 描述图像或视频
  • figuretion — 描述图像或视频的标题部分
  • hgroup — 标题组合

普通的标签

缺点
1.不利于SEO搜索引擎对页面内容的抓取
2.文档结构定义不明确
在这里插入图片描述
于是HTML5出现,解决上述问题,专门添加页眉、页脚、导航、文章内容等跟结构相关的结构元素标签
在这里插入图片描述

基本结构

<body>
  <header>...</header>
  <nav>...</nav>
  <article>
     <section>
       ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>
<header> 页眉,可能包含标题元素,也可以包含其他元素,像logo、分节头部、搜索表单等
<hgroup> 标签用于对网页或区段(section)的标题进行组合。使用新的HTML5元素hgroup,可以为header元素添加更多的信息。(头部主标题/副标题)
<footer> 定义了整个页面或其中一部分的页脚(并且通常包含原创作者,版权信息,联系方式和站点地图,文档相关的链接等信息)
<nav>    定义主体模块或者导航链接的集合,一般用在整个页面主要导航部分上,不合适就不要用nav元素
<article>  是一个特殊的section标签,它比section具有更明确的语义,它代表一个独立的、完整的相关内容块,
可独立于页面其它内容使用。例如一篇完整的论坛帖子,一篇博客文章,一个用户评论等等。一般来说,article会有
标题部分(通常包含在header内),有时也会包含footer。article可以嵌套,内层的article对外层的article标签
有隶属关系。例如,一篇博客的文章,可以用article显示,然后一些评论可以以article的形式嵌入其中。
<aside>  与一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。
<section> 表示文档中的一个区域(或节),比如,内容中的一个专题组,一般来说会有包含一个标题(heading)。
一般通过是否包含一个标题 (<h1>-<h6> element) 作为子节点来辨识每一个<section>一张页面可以用section划分
为简介、文章条目和联系信息。不过在文章内页,最好用article。section不是一般意义上的容器元素,如果想作为
样式展示和脚本的便利,可以用div。
<figure> 元素代表一段独立的内容.用于对元素进行组合。多用于描述图像或视频。
<figcaption>  多用于描述图像或视频的标题部分。

标签:...,标签,section,元素,语义,标题,HTML5,article
来源: https://blog.csdn.net/HTML5_student/article/details/120431340

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有