html5的新标签

HTML5新标签

html标签的语义化

• 语义化标签更具有可读性，便于团队的开发和维护
• 没有css的情况下，网页也能很好的呈现出内容结构和代码结构
• 关于SEO，搜索引擎更能理解到网页中各部分之间的关系，更准确更快速搜索信息

header标签

1. 用来定义文档（网页或者是某一个段落）的页眉（头部）
2. 可能包含一些标题元素，也可能包含其他元素，比如logo、搜索框、作者信息等等

footer标签

1. footer标签代表一个网页或者章节内容的底部区域（页脚）
2. footer通常包含章节的作者，版权数据和文章的其他链接

nav标签

1. <nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。
2. 导航部分的常见示例是菜单，目录和索引
3. 并不是所有的导航都需要用nav标签，只是当前页面中比较重要的热门的可以使用nav，比如在底部导航，就没有必要加入链接
4. 一个网页可能会有多个导航，比如整个网页的导航，也可以是某一块区域的导航

注意 nav使用有两种方法：

1. 当nav中的导航列表是静态的：nav中直接嵌套a标签使用即可
2. 当nav中的导航是动态的（需要滑动查看更多，主要出现在移动端）：nav中最好嵌套ul>li>a标签

section标签

1. section是html中一个独立的区域（主要针对网页分块），没有其他语义，一般会包含一个独立的标题
2. 假设有一个效果，上边是nav导航栏，导航栏一般对应一个区域，用来显示这个导航栏的内容，这个区域我们就可以使用section
3. section主要是对网页进行分块，也可以对网页中的某块内容进行分块
4. 通常一个完整的section是有标题和内容组成的，不推荐给没有标题的区域设置section
5. 如果想要给一个内容设置有个容器用来书写样式，那么还是推荐使用div

article标签

1. 代表文档、页面、或程序中，可以独立的完整的被外部引用的内容
2. 比如一篇博客、一篇文章、一段用户的评论、一个日历插件，或者是其他独立内容
3. 一般来说 一个article也有自己的头部header，或者是footer

div、article和section

• article和section
  1. article元素可以看做是特殊的section，但是强调独立性比section更强
  2. section主要强调分段分块，article是强调很强的独立性
  3. 原则上来说能用article的时候，也可以使用section，但是假设用article更合适，请使用article
• div、article和section
  1. div、section、article语义依次递增
  2. div没有任何的语义，仅仅是用作样式，可以用在任何场景，但是我们容易看不清上下文关系
  3. 对于主题性的区域，我们可以使用section
  4. 加入这个区域可以脱离上下文，作为完整独立的内容存在，使用article

aside元素

1. 表示一个和其余页面内容几乎无关的区域
2. 被认为是独立于内容的一部分，并且可以拆出来而不会使整体收到影响，通常表现为侧边栏
3. 这个里边的内容和其他元素内容关联性不强

figure元素

1. 代表一块独立的内容，是一个独立的引用单元
2. 这个标签在主文中用来引用 图片、插画、表格、代码段等等信息
3. 一般会在figure元素中插入figcaption元素（标题元素），将figcaption代表的标题与figure内容相关联
4. 如果是单独一张图片 或者 单独的表格等等，那么直接使用相应的标签即可，如果存在图片和标题，那么请使用figure标签

<figure>
      <figcaption>海贼王的图片</figcaption>
      <img src="../images/05.jpg" alt="" width="300">
</figure>

mark元素

1. 为引用的内容进行标记或突出显示文本，用来表示和上下文之间的关联性
2. 突出显示的文本通常可能和用户当前的活动等有一定的关联性
3. 比如，用户搜索的时候，它可以显示搜索之后的关键字
4. 不要把mark和 em、strong进行混淆。em、strong都是表示文本在上下文的重要性，而mark只是为了表示关联性
5. mark标签是行内标签，默认黄色背景颜色

time元素

1. 用来表示24小时制 或者是 一个公历时间
2. 作用：以机器可读的格式去表示日期和时间，安排日程表的应用就可以使用这个time标签
3. 通用时间格式 XXXX-XX-XX XX[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0ROZqMy8-1606826516016)(https://github.githubassets.com/images/icons/emoji/XX.png)]XX
4. 两种用法：
   1. time标签直接包含时间
   2. 使用datetime属性来表示时间

progress元素

1. 主要用来显示一项任务的完成程度
2. 规范没有规定默认的样式，所以各个浏览器默认的样式不一定相同
3. 属性:
   1. value：是当前进度的值
   2. max：是总进度的长度

<progress max="100" value="80"></progress>