不只是Canvas和拖放——HTML5新特性一览

一、增加结构语义化的标签

  • section
  • articel
  • aside
  • header
  • hgroup
  • footer
  • nav
  • figure
  • command
  • progress
  • time
  • ruby
  • rt
  • rp
  • mark
  • wbr
  • ...

二、增加的表单类型

inputy元素增加了以下类型

  • email
  • url
  • number
  • range
  • Date pickers
  • search
  • color

全新增加的表单元素标签

  • datalist
  • keygen
  • output

HTML5还增加了一些form和input的属性,详见参考。

三、增加的富客户端标签

媒体

  • video
  • audio
  • embed

图像

  • canvas 画布
  • SVG 矢量图。比画布更复杂,明显不同是支持事件处理

四、更有用的新Javascript API

1、Web Storage

新Web存储方案,包括localStorage和sessionStorage。关于更多Web存储可见Web存储

2、Application Cache

应用程序缓存,在html标签处添加manifest属性,浏览器会在网络良好时创建manifest缓存文件,离线时读取manifest文件,以实现离线浏览。

3、Web Socket

最小的开销(如没有HTTP首标)实现套接字的全双工通信,目前并不完全支持。为Node.js而生的好用的包:socket.io。

4、SSE

服务器推送事件(server sent event)。服务器单向客户端推送的通信模式。

SSE与Web Scoket都为低时延通信而生,但两者有明显不同。SSE基于现有HTTP/HTTPs协议工作,是文本协议。而Web Scoket更复杂一些,目前需要服务端再做一些工作才能运作(socket.io是个好选择),并且它是二进制协议。效率上,Web Scoket开销更小。

5、Web Workers

HTML中的JavasaScript是阻塞的,执行时页面就不可响应。Web Worker是执行在后台的JavaScript。如在HTML页面指定一个js脚本创建Worker对象w,w监听js中发送的消息。js脚本可进行大量运算却不会阻塞HTML页面。

6、Geolocation 地理位置API

7、Device Orientation 设备方向API

五、废除的标签

1、能用css代替的元素 
basefont、big、center、font、s、strike、tt、u。这些元素纯粹是为画面展示服务的,HTML5中提倡把画面展示性功能放在css中统一编辑。

2、不再使用frame框架。

frameset、frame、noframes。HTML5中不支持frame框架,只支持iframe框架,或者用服务器方创建的由多个页面组成的符合页面的形式,删除以上这三个标签。

3、只有部分浏览器支持的元素

applet、bgsound、blink、marquee等标签。

4、其他被废除的元素

  • 废除rb,树勇ruby替代。
  • 废除acronym使用abbr替代。
  • 废除dir使用ul替代。
  • 废除isindex使用form与input相结合的方式替代
  • 废除listing使用pre替代
  • 废除xmp使用code替代
  • 废除nextid使用guids
  • 废除plaintex使用“text/plian”(无格式正文)MIME类型替代。

参考:

W3School

《HTML5和JavaScript Web应用开发》 Wesley Hales

《HTML5数据推送应用开发》 Darrren Cook

html5新增的标签和废除的标签

时间: 2024-11-07 11:08:49

不只是Canvas和拖放——HTML5新特性一览的相关文章

Html5新特性 <canvas>画板画直线

 下面例子为用canvas标签画多条直线 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

Html5新特性 &amp;lt;canvas&amp;gt;画板画直线

 以下样例为用canvas标签画多条直线 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

HTML5 & CSS3初学者指南(3) – HTML5新特性

介绍 本文介绍了 HTML5 的一些新特性.主要包含以下几个方面: Web 存储 地理位置 拖放 服务器发送事件 Web存储 HTML5 Web 存储的设计与构想是一个更好的机制来存储客户端的网络数据.它是通过一个网络浏览器作为客户端数据库实现的,它允许网页以键值对的形式来存储数据. 它具有以下特征: 每个原始网站/域最多可存储 5MB 的数据. 你可以通过属性和方法来使用 JavaScript 操作 web 存储器中的数据实现访问. 就像 cookies,你可以选择将保持数据(维持),即使你已

HTML5新特性--svg-echarts(重点)-拖动API-WebWorker

一.html5新特性--svg--(折线/渐变特效对象/滤镜) #折线:多个坐标点组件一条折线 <polyline points="50,50 70,55 60,66 " stroke="" stroke-width=""> </polyline> #points 一组坐标点 #渐变特效对象:一种特效样式(从一种颜色慢慢过滤另一种颜色效果) #渐变特效对象:(1)创建渐变对象 <defs> (2)在指定图形应用

HTML5新特性新增功能

HTML5 现如今已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加. 如:绘图canvas:用于媒介回放的video和audio元素:本地存储localStorage;语义化元素:表单控件等等新增的功能,都是HTML5新特性. 下面列举HTML5新特性详细说明: 一.新的文档类型  (New Doctype) 目前许多网页还在使用XHTML 1.0 并且要在第一行像这样声明文档类型: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

HTML5新特性,老生常谈——前端面试常见问题

找工作面试的时候有公司技术人员会问html5新特性,那这里就再复习一遍 1.新的文档类型 <!DOCTYPE html> 2.脚本和链接无需type <link href="css/bootstrap.css" rel="stylesheet"> <script src="js/Angular.js"></script> 3.语义化的Header 和Footer 这里通俗说下什么叫做语义化,就是:明

HTML5新特性小结

HTML5 新特性 新的DocType: <!DOCTYPE html> 不需要声明文档类型: 脚本和链接不需要type属性,如 lingk, script; 语义化标签,如:header, footer, hgroup, mark, figure, small, article, 属性及校验, 新的属性,如:placeholder, required, autofocus, pattern, autocomplete, data, contenteditable 自动校验,如: requir

HTML5新特性data_*自定义属性使用

HTML5 新特性data_*自定义属性使用HTML5规范里增加了一个自定义data属性. 这个自定义data属性的用法非常的简单,就是你可以往 HTML 标签上添加任意以 "data-"开头的属性, 这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的. 使用 data-* 可以解决自定义属性混乱无管理的现状.

HTML5新特性有哪些

HTML5新特性有哪些: 1.新的文档类型 2.脚本和链接无需 3.语义Header和Footer The Semantic Header and Footer 4.Hgroup 10.Autofocus 属性 Autofocus Attribute 12.Video 支持 Video Support 13.视频预载 Preload attribute in Videos element 14.显示控制条 15.正规表达式 5.标记元素 6.图形元素 8.占位符 9.必要属性