HTML5的新特性部分

 

目标:
能够说出 3~5个HTML5 新增布局和表单标
能够说出 CSS3 的新增特性有哪些

HTML5的新特性

一. HTML新增的语义化标签

1 ) HTML新增的语义化标签的特点

二.HTML 新增的多媒体标签
1 ) 视频:<video>
2 ) 音频:<audio>

多媒体标签总结

表单新增类型

HTML5的新特性

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

这些新的特性都有兼容性问题, 基本是IE9+ 以上版本的浏览器 以及移动端(可以任意使用)才支持, 如果不考虑兼容性问题, 可以大量使用新特性。

一.HTML新增的语义化标签

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

可以借助新增的语义化标签 实现布局

1 )新增的语义化标签的特点:

          1) 在IE9中, 需要把这些元素转换为 块级元素
          2) 这些语义标签可以在页面中 多次使用
          3) 这种语义化标准主要是针对 搜索引擎

二. HTML 新增的多媒体标签

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

1. 音频: <audio>
2. 视频: <video>

新增的多媒体标签 可以方便的在页面中嵌入音频和视频, 而不再去使用flash和其他浏览器插件
注: 常见的视频格式为三种: MP4 WebM Ogg
      一般推荐使用 MP4 因为MP4在大部分的浏览器中均可以是适用

1) 视频

视频<video>

实例

语法:

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

经验之谈:
1 ) 完全可以把 <video>标签当作一个盒子来进行书写CSS
2 ) 考虑兼容性可以使用 <source>标签 (实际操作如下)

举个栗子:

以下为 <video>常用属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放 (谷歌浏览器是禁用自动播放的 添加 muted="muted"来解决自动播放的问题)
controls	controls	向用户显示播放控件 会提供用户控制，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放.
width	pixels(像素)	设置播放器宽度
height	pixels(像素)	设置播放器高度
loop	loop	播放完是否继续播放该视频, 说白了就是是否循环播放
preload	auto(预先加载视频) 或者是 none(不应加载视频)	规定是否预加载视频(如果有了 autoplay 这个属性就会被忽略)
src	url	视频url地址
poster	lmgurl	加载等待的画面图片
muted	muted	静音播放(解决了在Google不能自动播放的问题 )

拓展:
什么是MP4?
MP4是一套用于音频, 视频信息的压缩编码标准


什么是ogg(OGG)?
Ogg全称是OGGVobis(oggVorbis)是一种音频压缩格式, 类似于MP3等的音乐格式

音频

2 ) 音频 <audio>
音频与 视频语义标签类似 所以不再多赘述 可以跳转以下链接去深入学习

菜鸟教程实例与基本属性的使用

多媒体标签总结:

         音频标签和视频标签使用基本一致
         谷歌浏览器把音频和视频自动播放禁止了
          我们可以给视频添加 muted="muted"属性来静音播放视频, 但是音频不可以(不过我们可以通过JavaScript来解决)

---

表单新增类型

三 . <input>类型

经验之谈:
           敲的时候回来查就好了 还是多用一遍其实就记住了 其中比较常用的 tel, search,email

新增的表单属性如下: