HTML5新增标签
Posted LiNO3
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML5新增标签相关的知识,希望对你有一定的参考价值。
注:可能有兼容性问题IE9+的浏览器才可以新增标签
1.语义化标签
- <header> :头部标签
- <nav> :导航标签
- <article> :内容标签
- <sectioan>:定义文档中的某个区域
- <aside> :侧边栏标签
- <footer> ;尾部标签
注意:
- 这些标签可以多次使用
- IE9中需要转换成块级元素
2.多媒体标签
音频:<audio>
视频: <video>
视频标签<video>
<video src="地址"></video>
或者
<video width="320px" height="240px" controls>
<source src="xxx.mp4" type="video/mp4">
<source src="xxx.ogg" type="video/mp4">
</video>
其常见属性
属性 | 值 | 描述 |
autoplay | autoplay | 视频就绪自动播放(谷歌需要添加muted属性) |
controls | controls | 向用户显示播放控件 |
width | 像素值 | 设置播放器宽度 |
height | 像素值 | 设置播放器高度 |
loop | loop | 播放完是否继续播放该视频,循环播放 |
preload | auro(预先加载视频) none(不应加载视频) | 规定是否预加载视频(如果有autoplay,就忽略该属性) |
src | url | 视频的地址 |
poster | imgurl | 加载等待的画面图片 |
mutrd | muted | 静音播放 |
音频标签:<audio>
<audio src="地址"></audio>
或者
<audio controls>
<source src="xxx.mp3" type="video/mp4">
<source src="xxx.ogg" type="video/mp4">
</audio>
常见属性:
属性 | 值 | 描述 |
autoplay | autoplay | 音频就绪自动播放(谷歌禁止) |
controls | controls | 向用户显示播放控件 |
loop | loop | 播放完是否继续播放该音频,循环播放(谷歌禁止) |
src | url | 音频的地址 |
3.新增input表格
属性值 | 说明 |
type="email" | 用户输入必须是Email类型 |
type="url" | 用户输入必须是url类型 |
type="date" | 用户输入必须是日期类型 |
type="time" | 用户输入必须是时间类型 |
type="mouth" | 用户输入必须是月类型 |
type="week" | 用户输入必须是周类型 |
type="number" | 用户输入必须是数字类型 |
type="tel" | 手机号码 |
type="search" | 搜索框 |
type="color" | 生成一个颜色选择表单 |
表单新增属性
属性 | 值 | 说明 |
required | required | 其内容不能为空,必填 |
placeholder | 提示文本 | 表单的提示信息,存在的默认值将不显示 |
autofocus | autofocus | 自动聚焦属性,页面加载完成自动聚焦到指定表单 |
autocomplete | off/on | 显示之前输入过的值,默认已经打开 需要放在表单里,加上name属性,同时成功提交 |
mulyiple | multiple | 可以多选文件提交 |
修改placeholder内的文字
input::placeholder
coleor:pink;
以上是关于HTML5新增标签的主要内容,如果未能解决你的问题,请参考以下文章