HTML5新标签

   最近在学习Vue的基础知识, 发现有关H5的新内容不是很熟悉, 再次整理一下

1.头部标签 <header >

<header > </header>

 

2. 导航标签<nav>

<nav>导航</nav>

 

3.主要内容标签<main>

<main></main>

特点：

高版本浏览器兼容
main能包含别的标签
只能在文中出现一次，且只能当别人的父元素

4.内容标签 <article>

<article></article>

 

文章段落， 和段落p相似

5.<section>定义文档某个区域

<section> 节</section>

 

6.<aside>侧边栏标签

<aside>侧边栏</aside>

 

7.<footer>脚注标签

<footer>脚注 </footer>

 

块级标签02
1.<details>关于查看详情出现与隐藏的情况

<details>
<summary>标题</summary>
</details>

 

2. <figure>标签规定独立的流内容（图像、图表、照片、代码等等）

<figure>
<img src="img/01.jpg" >
<figcaption>
图片标题
</figcaption>
</figure>

 

行内块元素标签
1.进度条<progress>

<progress value="20" min="1" max="100"></progress>

 

value表示进度值
max表示最大进度值
min表示最小进度值
行内块元素，可以定义宽和高
双标记标签
ie浏览器9以及以下不认识这个标签

2. 度量衡<meter>

<meter value="72" min="1" max="100" low="60" high="80"> </meter>

low 低 低于这个值的value还是原来的颜色
high 高 高于这个值的value是红色
在这两个值中间的value是黄色
不加不变颜色
Value 如果标签内没有数字，那么标量的实际值就是0

IE就不支持这个啦
标签中的内容可以不包含任何数字，这时最大值会被认为是1；

 

行内标签
1. <time> 标签定义公历的时间（24 小时制）或日期

我们早上<time>12:00</time>上课
今年的<time datetime="2022-2-14 00:00：00">情人节</time>我是一个人过

 

如果不是具体时间就加上datetime
<time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。
该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

2.标记标签<mark>

今年的<time datetime="2022-2-14 00:00：00">情人节</time>我是<mark>一个人</mark>过

 

template

<template>标记将其内容从客户端隐藏起来。

<template>标记内的内容将不会呈现。