HTML第三天学习总结—— HTML5新特性

H5说法

狭隘H5

广义H5

• 广义的 HTML5 是 HTML5 本身 + CSS3 + JavaScript 。
• 这个集合有时称为 HTML5 和朋友，通常缩写为 HTML5 。
• 虽然 HTML5 的一些特性仍然不被某些浏览器支持，但是它是一种发展趋势。
• HTML5 MDN 介绍：
  https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML

HTML5新特性

HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。

语义化标签

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

注意：

• 这种语义化标准主要是针对搜索引擎的
• 这些新标签页面中可以使用多次
• 在IE9中，需要把这些元素转换为块级元素
• 移动端更喜欢使用这些标签

多媒体标签

多媒体标签分为 音频 audio 和视频 video 两个标签 使用它们，我们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件了。

视频标签- video

当前 <video> 元素支持三种视频格式： MP4、 WebM、 Ogg（尽量使用 mp4格式）。

语法：

 <video src="视频路径"></video>

兼容写法：

由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可

<video  controls="controls"  width="300">
    <source src="move.ogg" type="video/ogg" >
    <source src="move.mp4" type="video/mp4" >
    您的浏览器暂不支持 <video> 标签播放视频
</ video >

上面这种写法，浏览器会匹配video标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本

video 常用属性：

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

音频标签- audio

当前 <audio> 元素支持三种视频格式： 尽量使用 mp3格式

使用语法：

<audio src="media/music.mp3"></audio>

兼容写法：

由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可

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

上面这种写法，浏览器会匹配audio标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本

audio 常用属性：

属性	值	描述
autoplay	autoplay	如果出现该属性，音频在就绪后马上播放
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
loop	loop	如果出现该属性，则每当音频结束后重新开始播放
src	url	音频的URl

多媒体标签总结

• 谷歌浏览器把音频和视频自动播放禁止了
• 我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过JavaScript解决）
• 视频标签中，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性

新增的表单元素

常见输入类型

text password radio checkbox button file hidden submit reset image

新的输入类型

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

新增的表单属性

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

可以通过以下设置方式修改placeholder里面的字体颜色

input::placeholder {
    color: pink;
}