HTML学习笔记4——HTML5新特性(多媒体，表单属性)

HTML5新特性

都有兼容性问题，基本是IE9+以上版本浏览器才支持

语义化标签

• <header>：头部标签
• <nav>：导航标签
• <article>：内容标签
• <section>：定义文档某个区域
• <aside>：侧边栏标签
• <footer>：尾部标签

在IE9中，需要把这些元素转换为块级元素

多媒体标签

1.视频

只支持MP4,WebM,Ogg，并不是所有浏览器都支持这些格式

尽量使用MP4格式

<video src="文件地址" controls="controls"> </video>

常见属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
controls	controls	向用户显示播放控件
width	像素	设置播放器宽度
height	像素	设置播放器高度
loop	loop	播放完是否继续播放该视频，循环播放
preload	auto（预先加载视频）none(不先加载视频)	规定是否预加载视频（如有autoplay就忽略该属性）
src	url	视频url地址
poster	lmgurl	加载等待的画面图片
muted	muted	静音播放

2.音频

支持三种格式：MP3、Wav、Ogg

尽量使用MP3

<audio controls="controls">
	<sourse src="happy.mp3" type="audio/mpeg">
    <sourse src="happy.ogg" type="audio/ogg">
    您的浏览器暂不支持<audio>标签。
</audio>

常见属性

属性	值	描述
autoplay	autoplay	音频就绪后马上播放
controls	controls	向用户显示控件（如播放按钮
loop	loop	循环播放
src	url	要播放音频的url

• 谷歌浏览器把音频和视频自动播放禁止了

• 可以给视频标签添加muted标签，音频不可以（可以通过js解决）

新增的input类型

属性值	说明
type=“email”	限制用户输入必须为Email类型
type=“url”	必须为url类型
type=“date”	必须为日期类型
type=“time”	必须为时间类型
type=“month”	必须为月类型
type=“week”	必须为周类型
type=“number”	必须为数字类型
type=“tel”	手机号
type=“search”	搜索框
type=“color”	生成一个颜色选择表单

验证时父级必须添加form表单域，用就可以验证了

新增的表单属性

属性	值	说明
required	required	表示其内容不能为空
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	页面加载完成自动聚焦到指定表单
autocomplete	off/on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。 默认已经打开，如autocomplete=“on”，关闭autocomplete=“off” 需要放在表单内，同时加上name属性，同时成功提交
multiple	multiple	可以多选文件提交