前端之HTML5新特性以及多媒体

HTML5的新特性（注意）

1、增加了audio和video,抛弃了flash；

2、新增了canvas画布，（绘图，制作动画（如小游戏开发））

3、增加了离线缓存

4、地理等位

5、硬件加速

6、Web Socket（全双工通信）

7、增加本地储存；

8、新增了一些语义化标签

二、网页布局标签

header :页首

nav：导航栏

aside：侧边栏

mian；主体

section：区块

article：文章

fooder：页尾

---

语义化标签：

1、mark：高亮显示，行级标签

2、details(描述)和summary（摘要）：一般用于名词解释；

<details><summary>菜单</summary>
    <ul>
        <li>上衣</li>
        <li>裤子</li>
        <li>鞋子</li>
        <li>帽子</li>
    </ul>
</details>

3、meter:显示计数仪表；（value:当前值 min{number}最小值； max{number}最大值； low {number}：指定范围的最小值； high {number}：指定范围的最大值）

4、progress:进度条（value:当前值 min{number}； max{number}； low {number}； high {number}）

5、dialog:对话框窗口

6、figure:用于对元素进行组合，一般用于组合一张图的标题、图片和图片描述等；

HTML5多媒体7

1、audio:用来播放音乐或者音频，IE9以下不支持；

<audio src="menu.ogg" controls autoplay loop></audio>

a、支持格式， .mp3/.ogg/.wav

b、属性：src; 文件路径

autoplay; 自动播放

loop;循环

controls:控制条

muted:静音

preload:预加载（使用autoplay时，就会失效）

2、video:用来加载视频

a、支持的格式： .mp4/ogg/.webm

b、属性：autoplay; 自动播放

loop;循环

controls:控制条

muted:静音

preload:预加载（使用autoplay时，就会失效）

width:宽度

height:高度

poster:海报

3、embed:嵌入内容或者加载插件

属性：src:文件路径

width:宽

height:高度

type:类型

<!--<embed src="run.swf" type="application/x-sockwave-flash">-->
<embed src="movie.ogg" type="video/ogg" autostart="true" loop-hiden="true" >

4、canvas:画布：是一个容器元素；

a、单独使用没有意义，必须结合javascript使用；

b、宽高最好不要通过css实现，直接使用标签属性width和height；

1、contentEditable:将标签可编辑状态（默认false），不能编辑;

2、hidden:对元素进行隐藏：一般用来传值或某个条件成立的时候，执行内容显示；默认值为hidden;

3、data-*:用于存储页面或者应用程序的私有自定义数据，一般用于传值；

4、multiple:规定输入域中可选择多个内容，用于表单组件（如file/select

<select multiple>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

5、required:约束表单元素必须输入，需要结合提交按钮使用；

<form action="#">
    <input type="color" placeholder="请输入喜欢的颜色">
    <input type="姓名"  placeholder="请输入姓名" required>
    <input type="性别"  placeholder="请输入性别">
    <input type="submit">  //提交按钮
</form>

6、pattern:用于验证输入字段的模式，用于表单组件，结合提交按钮使用；

<input type="text" placeholder="请输入账号" pattern="[A-Za-z0-9]{4,7}">

---

表单组件：

color:颜色

email:邮箱 tel:电话号码

url:网址

number:数字

range:范围

search:搜索

date:日期

datetime:日期时间

datetime-local:本日期时间

year:年份

month:月份

---