HTML5、CSS3新特性

---

1、HTML5的新特性

• HTML5新增特性主要是针对以前的不足，增加了一些新的标签、新的表单和新的表单属性等
• 这些新特性都有兼容性问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性
• 新特性增加了很多，但是这里主要以开发常用的新特性为主
• 1.1 HTML5新增的语义化标签
  • <header></header>头部标签
  • <nav></nav>导航标签
  • <article></article>内容标签
  • <section></section>定义文档某个区域
  • <aside></aside>侧边栏标签
  • <footer></footer>尾部标签
  • 这些语义花标准主要是针对搜索引擎的
  • 这些新标签页面中可以使用多次
  • 在IE9中，需要把这些元素转换为块级元素
  • 其实，移动端更喜欢这些标签
  • HTML5还能增加了很多其他的标签，可以去菜鸟教程看看
• 1.2 HTML5新增的多媒体标签
  • 新增的多媒体标签主要包含两个：
  • 音频：<sudio>
  • 视频：<video>
  • 使用他们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件
  • HTML5在不使用插件的情况下，也可以原生的支持视频格式文件的播放，当然，支持的格式是有限的
• 1.3 视频<video>
  • 当前视频标签元素支持三种视频格式： MP4 、WebM、Ogg（尽量使用mp4格式）
  • 语法：<video src="文件地址" controls="controls"></video>
  • 谷歌浏览器默认不自动播放视频，需要添加muted来解决自动播放问题
  • 支持多个视频格式的写法：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

• 1.4 音频<audio>
  • 当前<audio> 元素支持三种音频格式：MP3 、Wav、Ogg（尽量使用mp3格式）
  • 语法：<audio src="song.ogg" controls="controls"></audio>
  • 支持多个音频格式的写法：

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
	Your browser does not support the audio tag.
</audio>

• 1.5 多媒体标签总结

  • 音频标签和视频标签使用方式基本一致
  • 浏览器支持情况不同
  • 谷歌浏览器把音频和视频自动播放禁止了
  • 可以给视频标签添加muted属性来静音播放视频，音频不可以（可以通过JavaScript解决）
  • 视频标签是重点，开发中，经常设置自动播放，不使用controls控件，循环和设置大小属性

• 1.6 HTML5新增的input类型

  • type="email"：用于应该包含 e-mail 地址的输入域。
  • type="url":用于应该包含 URL 地址的输入域
  • type="number"用于应该包含数值的输入域。
  • type="date"用于应该包含日期类型输入域
  • type="time"用于应该包含时间类型输入域
  • type="month"用于应该包含月类型输入域
  • type="week"用于应该包含周类型输入域
  • type="tel"用于应该包含手机号码输入域
  • type="search"用于应该包含搜索框输入域
  • type="color"用于生成一个颜色选择表单
  • 重点是number、search、tel

• 1.7 HTML5新增的表单属性

  • multiple="multiple"可以多选文件提交
  • placeholder="提示信息"表单的提示信息，存在默认值将不显示
  • required="required"表单拥有该属性表示其内容不能为空，必须填写
  • autofocus="autofocus"自动聚焦属性，页面加载完成自动聚焦到指定表单
  • autocomplete="on"保存输入记录，off为关闭该功能
  • 可以通过以下设置方式修改placeholder里面的字体颜色

<style type="text/css">
	input::placeholder {
		color: red;
	}
	

---

2、CSS3的新特性

• 2.1 CSS3的现状
  • 新增的CSS3特性有兼容性问题，IE9+才支持
  • 移动端支持优于PC端
  • 不断改进中
  • 应用相对广泛
  • 这里只关注：新增选择器、盒子模型以及其他特性
• 2.2 新增选择器
  • CSS3给我们新增了选择器，可以更加便捷，更加*的选择目标元素
  • 属性选择器
  • 结构伪类选择器
  • 伪元素选择器