HTML5的新特性 (黑马程序员)

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

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

新增语义标签

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

---

以前布局，我们基本上用 div 来做，div对于搜索引擎来说，是没有语义的。

---

---

---

注意：

• 这些语义化标准主要是针对搜索引擎的

• 这些新标签页面中可以使用多次

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

• 移动端不存在兼容性，更喜欢使用这些标签

• HTML5新增了很多标签，需要慢慢学习

---

新增多媒体标签

新增的多媒体标签主要包含两个：

• 音频：< audio >

• 视频：< video >

使用他们可以很方便的在页面中嵌入音频和视频，而不再去使用flash或其他浏览器插件

一、视频 video

HTML5在不使用插件的情况下，也可以原生地支持视频格式播放，但是支持的格式有限

浏览器	MP4	WebM	ogg
Internet Explorer	支持	不支持	不支持
Chorme	支持	支持	支持
Firefox	支持（从Firefox21 版本开始、Linux系统从Firefox30 开始）	支持	支持
Safari	支持	不支持	不支持
Opera	支持	支持	支持

---

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

兼容性写法：

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

常见的属性：

属性	值	说明
autoplay	autoplay	视频自动播放（chorme需要添加muted属性才可以自动播放）
controls	controls	向用户展示视频控件
width	像素	设置播放器宽度
height	像素	设置播放器高度
loop	loop	是否循环播放视频
preload	auto(预先加载视频)；none(不预加载视频)	规定是否预加载视频（若设置了autoplay属性则会忽略）
src	视频路径	视频url
poster	图片路径	加载等待时显示的图片
muted	muted	静音播放

---

二、音频 audio

<audio src="url" controls="controls"></audio>

source写法：

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

常见属性：

属性	值	说明
autoplay	autoplay	音频就绪后自动播放
controls	controls	向用户展示音频控件
loop	loop	音频循环播放
src	url	要播放音频的url

---

chorme禁止了音频的自动播放

---

多媒体标签总结

• 音频标签和视频标签使用方式基本一致

• 浏览器支持情况不同

• chorme禁止了音频和视频的自动播放属性

• 视频标签是重点，我们经常设置自动播放，取消控件，循环和设置大小属性

---

新增input表单

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

---

重点记住 number、tel、search

---

新增表单属性

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

---

<form action="#">
    <input type="text" required="required" name="sear" place="请输入内容" autofocus="autofocus" autocomplete="on">
    <input type="submit" value="提交">
  </form>

---

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

input::placeholder {
    color: pink;
}

如果 autocomplete 成功提交之后，不显示之前输入的值，关闭浏览器硬件加速。