HTML5基础（1）
HTML5基础（1）
1.HTML5简介
HTML5≈HTML+CSS+Javascript+API,HTML5是HTML的新版本，是HTML增量式学习。
2.HTML5使Web增强与垄断体现在那些方面？
- WebApp
HTML5新增了离线存储，更丰富的表单、js线程、socket、标准扩展embed、css3....... - 流媒体与多媒体引擎
Audio、Video、Canvas、webgI等等....... - 搜索引擎和无障碍沟通
3.HTML5在移动互联体现哪些优势？
（1）跨平台
HTML5是唯一一个通吃PC、Mac、iPhone、Android等主流平台的跨平台语言。
（2）快速迭代
互联网产品大多数免费、且有网络效应、后入者抢夺用户的难度非常大、
（3）减低成本
HTML5开发比原生App开发成本降低一倍。
（4）导流入口多
HTML5应用导流非常容易
（5）分发效率高
4.HTML5标签的变化
（1）<!DOCTYPE>标签
<!DOCTYPE>声明必须是HTML文档的第一行，位于<html>标签之前。它不是html标签，指示web浏览器关于页面使用哪个HTML版本进行编写的指令。
例如：HTML 4.01 Strict(严格版)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd> 注意：HTML5不基于SGML，所以不需要引用DTD文件 ！
- DTD(文档类型定义)介绍：
DTD可定义合法的XML文档构建模块，它使用一系列合法的元素来定义文档的结构，在HTML中规定了标记语言的规则，使用XML定义html标签的规范。
(2)新增标签
1>结构标签（块状元素）——有意义的div：
<article> 标记 定义一篇文章 <header> 标记定义一个页面或一个区域的头部 <nav> 标记定义导航链接 <section> 标记定义一个区域 <aside> 标记定义页面内容部分的侧边栏 <hgroup> 标记定义文件中的一个区块的相关信息 <figure> 标记定义一组媒体内容以及它们的标题 <figcaption> 标记定义figure元素的标题 <footer> 标记定义一个页面或一个区域的底部 <dialog> 标记定义一个对话框（会话框）类似微信
2>多媒体标签<video> 标记定义一个视频 <audio> 标记定义一个音频 <source> 标记定义媒体资源 <canvas> 标记定义图片 <embed> 标记定义外部的可交互的内容或插件，比如flash 用法： 1.<audio src="../Source/passion.mp3" autoplay="autoplay" loop="-1" controls="controls"> </audio> 属性： autoplay 自动播放 loop="-1" 无限次重复 controls 页面显示控制器 2.<audio autoplay="autoplay"> <source src="../Source/passion.mp3" type="audio/mpeg"> </audio> 属性： type 表示转码器（mp3格式的转码器为mpeg） 3.<video src="../Source/pal4.mp4" autoplay="autoplay" controls="controls" ></video> 属性： autoplay 自动播放 loop="-1" 无限次重复 controls 页面显示控制器 4.<video autoplay="autoplay"> <source src="../Source/pal4.mp4" type="video/mp4"> </video> 属性： type 表示转码器（mp4格式的转码器为mp4） 5.<embed src="../Source/HappBirthday.swf"></embed>3>状态标签<meter> 状态标签（实时状态显示：气压、气温）<浏览器兼容：Chrome 、Opera> <progress> 状态标签（任务过程：安装、加载）<浏览器兼容：Chrome、Firefox、Opera> 用法： 1. <meter value="220" min="20" max="380" low="200" high="240" optimum="220"></meter> 属性： value 当前值 min 最小值 max 最大值 low 低值（当前值低于该值颜色变黄） high 高值（当前值高于该值颜色变红） optimum 最优值 当以上的属性都不定义时，会以小数，百分数的形式自动计算。 例如： <meter value="0.75">75%</meter> 2.<progress value="30" max="100"> <progress max="100"> 会以加载的样式显示