html5基础与简介

一 什么是HTML5
1 HTML历史

2 什么是HTML5

官方概念：HTML5草案的前身名为WebApplications 1.0，是HTML4的更新加强版本。它增加了新的标签和属性，强化了网页的标准、语义化、图像表达能力和交互效果。

广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，这些技术包括：HTML5，DOM3，CSS3，JS API，SVG，WebGL（3D）等

二 HTML5新特性和应用

1.媒体支持：Video，Audio，webRTC

<video>标签定义视频，比如电影片段或其他视频流。

<audio>标签定义声音，比如音乐或其他音频流。

WebRTC（WebReal-Time Communication） 是应用在视频会议、实时广播、多方会谈、点对点应用程序等等的新的协议与 API（用 navigator.getUserMedia 启动用户计 算机的摄影机，用 PeerConnection 进行点对点传输等等）

2.画布元素-Canvas以及WebGL视频加速

图1 矢量平面流程图的创建 图2 网络3D图的展现

canvas ，HTML5最期待元素之一，可以通过脚本可以任意创建图形，编辑图形，导入图片，导出图片。其中分2D与3D：

2Dcontext API：基本线条、路径、插入图像、像素级操作、文字、阴影、颜色渐变等提供图形绘制功能。

3Dcontext API（WebGL）： WebGl 定义了一套API, 能够允许在网页中使用类似于Open GL，实际上是一套基于OpenGLES 2.0的3d图形API。这些API是通过HTML 5的canvas标签来使用的。

图3 Canvas基本作图API之画板 图4构造一个简单的Canvas3D物体

3.增强的表单Form

新的Form元素

HTML5的表单定义了十几个新的元素和特性，这些新增元素可以代码更为易用、简洁和高效。这些新的东西包括：

1 新元素：Email、Number、Range，color picker等

2 新属性：placeholder、pattern、required、autofocus 、multiple等特性

3 新样式：新的伪类样式，比如:focus,:required,:valid等

4 新的输入方式-语音输入： x-webkit-speech可以让标签接受语音并转化为数字

4.更炫的平面动画-CSS3页面渲染及 CSS33D

图6 通讯录管理-图片墙 图7 首页portal展现
CSS3新特性

选择器

RGBA和透明度

多栏布局：弹性布局（水平布局、垂直布局）

多背景图

WordWrap

文字阴影

@font-face属性

盒阴影：阴影，文本阴影

盒模型：，多背景，圆角(边框半径)，边框图片

2D：旋转，缩放，倾斜

3D：透视，transform3D，等等

媒体查询

语音

5.矢量支持-SVG

构建多样的矢量图形-SmartUE图表
SVG（Scalable Vector Graphics）：可缩放矢量图形，使用 XML 来描述二维图形和绘图程序的语言。可以在浏览器中构造 矩形、圆形、椭圆、线条、多边形、折线、路径、滤镜效果、渐变效果，和动画等

6.HTML5的图形机制比较-SVG vs Canvas
相同点：
均是HTML5规范的一部分

均能实现图形和动画

均可以通过脚本编程控制显示

不同点：

	SVG	Canvas
DOM	是！	非！最大的区别！Everything is pixel
是否矢量	矢量，放大不失真	像素操作，放大失真
图形内存模式	保留模式	即发即弃。直接向它的位图呈现它的图形，然后对所绘制的形状没有任何认知，只会得到最终的位图。
基本图形种类	丰富（线，圆，矩形，多边形，路径等）	除了矩形，只有路径
原生动画支持	支持	不支持。需要js去模拟，即刷屏
3D	不支持	支持
交互	支持Dom事件	只能用js根据坐标进行编程
可访问性	好。Xml结构易于分析	差。程序无法感知内容，除非图像识别或专门做canvas内容映射
最终实现的代码特征	Svg标签+css，少量依赖js	基本上是完全依赖js

互有所长，均适用不同应用场景：

SVG更适合规则图形的绘制和动画，更好管理。

典型场景：图表，流程图等高保真度矢量文档。

Canvas更适合不规则或涉及像素级的变化场景，更高效。

典型场景：图片编辑和图形数据分析，位图动画，2D游戏，3D虚拟空间等像素操作。

7.离线应用
离线保存桌面和通讯录数据，定时和服务器同步

离线应用：让网络应用变为桌面应用

离线存储使得你的web应用可以在用户离线的状况下进行访问。离线存储的两个特性：

1 离线资源缓存

2 本地数据存储 localstorage

离线存储技术技术显然至少有三个好处：

1 最直接的好处就是用户可以离线访问你的web应用

2 因为文件被缓存在本地使得web页面加载速度提升许多

3 离线应用只加载被修改过的资源，因此大大降低了用户请求对服务器造成的负载压力

8.原生的拖拽

Drag&Drop简介

HTML5为元素新增了用于拖拽的属性draggable，这个属性决定了元素是否能被拖拽，或只能选择元素的文本。同时HTML5使用dataTransfer接口用来支持拖拽数据存储。三个重要特性：

draggable属性：就是标签元素要设置draggable=true，否则不会有效果，例如：<divtitle="拖拽我" draggable="true">列表1</div>

DataTransfer对象：退拽对象用来传递的媒介，使用一般为Event.dataTransfer。

Drag事件：ondragstart、ondragenter、ondragover、ondrop、ondragend


图8 网页内拖拽事件演示 图9 实现本地文件拖拽至网页