HTML5、CSS3新特性一览（上）

• 2019-12-13
  要写这个的时候才发现这个想写清楚内容真的好多… 估计我能写到明年去…
  所以这里就列举比较基础和常用的新内容。
• 本篇讲HTML5，CSS3在下篇讲，放上链接 HTML5、CSS3新特性一览（下）。

---

— 浏览器支持 —

• 最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
• 如果想兼容IE6，可以手动“教会”浏览器识别新元素。详情见参考文档。

---

— 新增元素 —

• 为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者等。

1.语义元素

HTML5 添加了很多语义元素，常用的有：

• < header > 定义了文档的头部区域
• < footer > 定义 section 或 document 的页脚。
• < mark > 定义带有记号的文本。
• < nav > 定义导航链接的部分。
• < progress > 定义任何类型的任务的进度。
• < section > 定义文档中的节（section、区段）。
• < time > 定义日期或时间。

2. Input 类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week

3. 表单元素

• < datalist> 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
• < keygen> 规定用于表单的密钥对生成器字段。
• < output> 定义不同类型的输出，比如脚本的输出。

4. 表单属性

HTML5 的 和 标签添加了几个新属性.

• < form> 新属性：
  autocomplete、novalidate
• < input> 新属性：
  autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height and width、list、min and max、multiple、pattern (regexp)、placeholder、required、step

3. 绘图元素

• < canvas > 画布
  canvas本身没有绘图能力，可以通过js等脚本语言控制画图。
• < svg > 可缩放矢量图形
  iconfont里面的Symbol 引用就是用了svg绘画。
  相比添加 img 来说，svg 类似矢量图，缩放不会模糊而且可以设置颜色。
• 使用 CSS3 2D 转换、CSS3 3D 转换。

4. 多媒体元素

• < audio > 定义音频内容。
• < video >定义视频（video 或者 movie）。
• < source> 定义多媒体资源 < video> 和 < audio>
• < embed> 定义嵌入的内容，比如插件。
• < track> 为诸如 < video> 和 < audio> 元素之类的媒介规定外部文本轨道。

---

— 已移除元素 —

以下的 HTML 4.01 元素在HTML5中已经被删除:

• < acronym >
• < applet >
• < basefont >
• < big >
• < center >
• < dir >
• < font >
• < frame >
• < frameset >
• < noframes >
• < strike >

---

— 新功能 —

1.完全支持CSS3

html5使用css3有很多新的功能和效果，这里先放个目录，具体的在下篇详细说明。

• 新选择器
• 新属性
• 动画
• 2D/3D 转换
• 圆角
• 阴影效果
• 可下载的字体

2. 拖放

• 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

<img draggable="true">

• 为了使元素可拖动，把 draggable 属性设置为 true
  拖动什么 - ondragstart 和 setData()
  放到何处 - ondragover
  进行放置 - ondrop

3. 地理定位

• HTML5 Geolocation API 用于获得用户的地理位置。
  鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

var x=document.getElementById("demo");
function getLocation(){
	if (navigator.geolocation){
		navigator.geolocation.getCurrentPosition(showPosition);
	}else{
		x.innerHTML="该浏览器不支持获取地理位置。";
	}
}
function showPosition(position){
	x.innerHTML="Latitude: " + position.coords.latitude +
	"
Longitude: " + position.coords.longitude;
}

4. 本地存储

• sessionStorage—客户端数据存储，只能维持在当前会话范围内。
  sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
• localStorage—客户端数据存储，能维持在多个会话范围内。
  localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

---

— 其他新特性（持更）—

• HTML5 离线Web应用（应用程序缓存）
• Manifest 文件
• HTML5 Web Workers
• HTML5 SSE
• HTML5 WebSocket
• 本地 SQL 数据
• Web 应用
• 服务端事件推送事件