HTML5 新标签
2023-03-17 09:35:39
HTML5 为了语义化增加了一些新标签,去掉样式能让页面结构清晰呈现、有益于 SEO、便于团队开发和维护。
## 一、块标签
```
<nav>导航栏</nav>
<header>头部</header>
<footer>底部</footer>
<aside>旁边栏</aside>
<section>内容</section>
<main>主要区域</main>
<article>文章</article>
<details>详情</details>
```
以上都是块标签,是给予标签的语义,用法是和块标签相同的,用于在特定语义场景下代替 `<div>` 标签,例如:
```
<div class="nav">这是导航</div>
建议写成:
<nav>这是导航</nav>
```
## 二、表单元素属性
```
date 和 time 分别表示日期和时间
email、url 当 input 的 type 为 email 时,必须输入格式并且需要符合相应的格式
number 必须输入,并且可以设置最小值 min,最大值 max
range: 输入一定范围内的数字值
placeholder: 提示文字
required 定义该 input 为必填项
```
## 三、多媒体标签
```
audio(音频):支持格式:mp3、 wav、ogg
属性:
controls 显示音频控件
autoplay 准备就绪后自动播放
loop 自动单曲循环
muted 静音
src 规定音频文件的路径
source 定义资源类型、由浏览器进行选择
video(视频):支持格式:mp4、webm、ogg
属性:
controls 显示音频控件
autoplay 准备就绪后自动播放
loop 自动单曲循环
muted 静音
src 规定音频文件的路径
source 定义资源类型、由浏览器进行选择
```
例如
```
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签
</video>
```