HTML5简介

八、HTML5简介
1.发展
W3C于1992年12月发布了HTML4.0.1标准
W3C于2014年10月发布了HTML5标准
2.特点
·取消了过时的标签，如font、center等，它们仅具有展示外观的功能
·增加了一些更具有语义化的标签，如header、footer、aside等
·增加了一些新功能标签，如canvas、audio、vide
·增加了一些表单控件，如emall、data、time、url、search等
·可以直接在浏览器中绘画(canvas)，无需flash
·增加了本地存储的支持
3.兼容性
http://caniuse.com
提供了各种浏览器版本和对HTML和CSS规范的支持力
九、HTML5新增内容
1.结构相关的标签
用来进行页面结构布局，本身无任何特殊样式，需要使用CSS进行样式设置
·article定义一个独立的内容，完整的文章
·section定义文档的章节、段落
·header文章的头部、页眉、标题
·footer文章的底部、页脚、标注
·aside定义一个侧边栏
·figure图片区域
·figcaption为图片区域定义标题
·nav定义导航菜单

结构标签只是表明各部分的角色，并无实际的外观样式，与普通div相同
2. 语义相关的标签
2.1 mark标签
标注，用来突出显示文本，默认添加黄色背景
2.2 time标签
定义日期和时间，便于搜索引擎智能查找
2.4 meter标签
计数仪，表示度量
常用属性：
·max定义最大值，默认为1
·min定义最小值，默认为0
·value定义当前值
·high定义限定为高的值
·low定义限定为底的值
·optimum定义最佳值

规则：
​当value大于high时为绿色
​当value在low和high之间时为黄色
​当value小于low时为红色
​ 2、如果optimum小于low，则表示值越小越好
​ 当value小于low时为绿色
​ 当value在low和high之间时为黄色
​ 当value大于high时为红色
​ 3、当optimum介于high和low之间，则表示值在low和high之间最好
2.5 progress标签
进度条，表示运行中的进度
常用属性：
·value定义当前值
·max定义完成的值
3.表单相关
3.1 新增表单元素
新增以下type类型
·email接收电子邮件
·url接收URL
·tel接收电话号码，目前仅在移动设备上有效
·search搜索文本框
·number/range接收数字/数字滑块，包含min、max、step属性
·date/month/week/time/datetime日期时间选择器，兼容性不好
·color颜色拾取
作用：
·具有格式校验的功能
·可以与移动设备的键盘进行关联
3.2新增表单属性
form标签的属性：
·autocomplete是否启动表单的自动完成功能，取值：on(默认)、off
·novalidate提交表单时不进行校验，默认会进行表单校验
3.3新增表单元素的属性
新增表单元素属性：input/select/textarea等
·placeholder提示文字
·required是否必填
·autocomplete是否启用该表单元素的自动完成功能
·autofocus设置初始焦点元素
·pattern使用正则表达式(RegExp后面会讲解)，进行数据校验
·list使文本元素具有下拉列表的功能，需要配置datalist和option标签一起使用
·form可以将表单元素写在form标签外面，然后通过该属性关联指定的表单
4. 多媒体标签
4.1 audio标签
在页面中插入音频，不同的浏览器对音频格式支持不一样
audio常用属性
·src音频文件的来源
·controls是否显示控制面板，默认不显示
·autoplay是否自动播放，默认不自动播放
·loop是否循环
·muted是否静音
·preload是否进行预加载，取值：none不预加载、auto预加载(默认)、metedata只加载元数据如果设置了autoplay属性，则该属性无效
可以结合source标签使用，指定多个音频文件，浏览器会检测并使用第一个可用的音频文件
4.2 video标签
在页面中插入视频，不同的浏览器对视频格式的支持不一样
用法和audio标签基本相同，增加属性：
·widht/height视频播放器的宽度/高度
·poster在视频加载前显示的图片