WEB之HTML5 系列笔记
HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML
- 是一个新版本的
HTML 语言，定义了新的标签、特性和属性
- 拥有一个强大的技术集，这些技术集是指：
HTML5 、CSS3 、javascript, 这也是广义上的 HTML5
HTML5 新增标签
header --- 头部标签nav --- 导航标签article --- 内容标签section --- 块级标签aside --- 侧边栏标签footer --- 尾部标签
使用语义化标签的注意
- 语义化标签主要针对搜索引擎
- 新标签可以使用一次或者多次
- 在
IE9 浏览器中，需要把语义化标签都转换为块级元素
- 语义化标签，在移动端支持比较友好，
- 另外，
HTML5 新增的了很多的语义化标签，随着课程深入，还会学习到其他的
多媒体音频标签
多媒体标签有两个, 分别是:
说明
- 可以在不使用标签的情况下，也能够原生的支持音频格式文件的播放，
- 但是：播放格式是有限的
audio支持的音频格式
| 格式 |
IE9 |
Firefox3.5 |
Oprea10.5 |
Chrome3.0 |
Safari3.0 |
| Ogg Vorbis |
|
O |
O |
O |
|
| MP3 |
O |
|
|
O |
O |
| Wav |
|
O |
O |
|
O |
audio 的参数
| 属性 |
值 |
描述 |
| autoplay |
autoplay |
如果出现该属性,则音频在就绪后马上播放 |
| controls |
controls |
如果出现该属性, 则向用户显示空间, 比如播放按钮 |
| loop |
loop |
如果出现该属性,则每当音频结束时重新开始播放 |
| src |
url |
要播放的音频的URL |
多媒体视频标签
video视频标签
| 格式 |
IE |
Firefox |
Opera |
Chrome |
Safri |
| Ogg |
No |
3.5+ |
10.5+ |
5.0+ |
No |
| MPEG4 |
9.0+ |
No |
No |
5.0+ |
3.0+ |
| WebM |
No |
4.0+ |
10.6+ |
6.0+ |
No |
语法格式
video 参数
| 属性 |
值 |
描述 |
| autoplay |
autoplay |
视频就绪自动播放(谷歌浏览器需要加muted来解决自动播放问题) |
| controls |
controls |
向用户显示播放控件 |
| width |
pixels(像素) |
设置播放器宽度 |
| height |
pixels(像素) |
设置播放器高度 |
| loop |
loop |
播放完是否继续播放该视频,循环播放 |
| preload |
auto(预先加载视频)
none(不应加载视频) |
规定是否预加载视频(如果有autopay 就忽略该属性) |
| src |
url |
视频url地址 |
| poster |
Imgurl |
加载等待的画面图片 |
| muted |
muted |
静音播放 |
例如:
多媒体标签总结
- 音频标签与视频标签使用基本一致
- 多媒体标签在不同浏览器下情况不同，存在兼容性问题
- 谷歌浏览器把音频和视频标签的自动播放都禁止了
- 谷歌浏览器中视频添加 muted 标签可以自己播放
- 注意：重点记住使用方法以及自动播放即可，其他属性可以在使用时查找对应的手册
| 属性值 type = " " |
说明 |
| email |
限制用户输入必须为 Email类型 |
| url |
限制用户输入必须为 URL类型 |
| date |
限制用户输入必须为 日期类型 |
| time |
限制用户输入必须为 时间类型 |
| month |
限制用户输入必须为 月类型 |
| week |
限制用户输入必须为 周类型 |
| number |
限制用户输入必须为 数字类型 |
| tel |
手机号码 |
| search |
搜索框 |
| color |
生成一个颜色选择表单 |
新增表单属性
| 属性 |
值 |
说明 |
| required |
required |
表单拥有该属性时表示内容不能为空, 必填 |
| placeholder |
提示文本(占位符) |
表单的提示信息, 存在默认值将不再显示 |
| autofocus |
autofocus |
自动聚焦属性, 页面 |
| autocomplete |
off/on |
记录已经提交过的信息 默认值为打开 |
| multiple |
multiple |
可以多选文件提交 |