前端学习 HTML5和CSS3新特性 高级技巧 JavaScript基础语法

HTML5和CSS3提高

HTML5的新特性

HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签，新的表单和新的表单属性等；
这些新特性都有兼容性问题，基本是IE9+以上的版本浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性；

1. HTML5新增的语义化标签
   之前布局，基本用div来做，div对于搜索引擎来说，是没有语义的；
   <header>：头部标签
   <nav>：导航标签
   <article>：内容标签
   <section>：定义文档某个位置
   <aside>：侧边栏标签
   <footer>：尾部标签
   注意：
   这种语义化标签主要是针对搜索引擎的；
   这些新标签，页面中可以使用多次
   在IE9中，需要把这些元素转换为块级元素
   移动端更喜欢使用这些标签
   HTML5还增加了许多标签

2. HTML5新增的多媒体标签
   使用他们可以很方便的在页面中嵌入音频和视频，而不再使用flash和其他浏览器插件，主要包含两个：

   1. 音频标签<audio>
      当前<audio>标签支持三种视频格式：MP3，Wav，Ogg，尽量使用MP3格式
      <audio src="URL" controls="controls"> </audio>

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

   audio常见属性：
   autoplay="autoplay" 音频就绪自动播放（谷歌禁用）
controls="controls" 向用户显示播放控件
loop="loop" 播放完是否继续播放该音频，循环播放
src="URL" 音频URL
   2. 视频标签<video>
   当前<video>标签支持三种视频格式：MP4，WebM，Ogg，尽量使用MP4格式
   <video src="URL" controls="controls"> </video>

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

   video常见属性：
   autoplay="autoplay" 视频就绪自动播放（谷歌禁用，谷歌浏览器需要添加muted来解决自动播放问题）
controls="controls" 向用户显示播放控件
width="像素" 设置播放器宽度
height="像素" 设置播放器高度
loop=