H5新增标签
前言
H5的雏形形成于2004年，在2008年发布正式版，并于2014年定稿。目前支持IE9+及绝大多数市场浏览器。同时，它是唯一一个支持PC、Mac、iPhone、Android等主流平台的 跨平台语言。用H5开发的移动软件对比于原生APP应用得名“WebAPP”。
一、新增功能
1、用于绘画的 canvas 元素
2、用于媒介回放的 video 和 audio 元素
3、对本地离线存储的更好的支持
4、语意化更好的内容元素，比如 article、footer、header、nav、section
5、新的表单控件，比如 calendar、date、time、email、url、search
二、<!DOCTYPE>改变
<!DOCTYPE>必须是在HTML文档的第一行，它不是html标签，而是指示web浏览器对页面使用哪个HTML版本进行指令的编写
// 之前版本
// html4.01 严格版doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//en" "http://www.w3.org/TR/html4/strict.dtd">
// 新版本
// HTML 5 版本不需要DTD
<!DOCTYPE html>
三、新增标签
1、结构标签
H5之前有意义的结构标签是div，H5之后扩展了以下的标签。
| 标签 | 描述 |
|---|---|
| article | 定义文章 |
| aside | 定义页面内容以外的内容，如菜单栏 |
| dialog | 定义一个对话框（会话框）类似微信 |
| figure | 规定自包含内容，比如图示、图表、照片、代码清单等。 |
| figcaption | 定义 figure 元素的标题。 |
| footer | 定义一个区域的底部 |
| header | 规定区域的头部 |
| hgroup | 标签用于对网页或区段（section）的标题进行组合 |
| main | 规定文档的主内容 |
| mark | 定义重要的或强调的文本 |
| nav | 定义导航链接 |
| section | 定义文档中的节 |
【注意事项】
- 不要滥用结构标签
- < header > < section > < aside > < article > < footer >这些标签不要嵌套自身
- 标签使用级别：< header > < section > < footer > 优于 < aside > < article > < figure > < hgroup > < nav > 优于
< div > < figcaption >
2、多媒体标签
| 标签 | 说明 |
|---|---|
| video | 定义一个视频 |
| audio | 定义音频内容 |
| source | 替代audio中src属性定义媒体资源 |
| canvas | 一个画布API，绘制酷炫的效果 |
| embed | 定义外部的可交互的内容或插件如flash |
a、视频 video 标签的属性
<video src="./video/demo1.mp4" autoplay="autoplay" controls="control">
当前浏览器不支持HTML5标签
</video>
| 标签 | 说明 |
|---|---|
| autoplay | 自动播放 |
| controls | 控制台，资源使用< source >标签引入则控制台在视频口外 |
| loop | 播放次数。loop或-1表示无限循环 |
| src | 资源路径，若使用了，则该属性失效 |
| width | 视频播放器宽度 |
| height | 视频播放器高度 |
【说明】
- 支持格式 MP4，WebM，Ogg
- 可以使用< sourc >标签解决浏览器格式兼容问题
<video autoplay="autoplay" loop="loop" controls="controls">
<source src=</
最低0.47元/天 解锁文章
2155
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
