你的位置:首页 > 网页设计

[网页设计]HTML5实战 文摘 第一章 从文档到应用的转变


 

1. HTML5的基本特性

  1.1 DOCTYPE声明方式

    HTML5的声明格式非常简单不需要DTD和URL

<!DOCTYPE html>

    就这么一句声明放在文档的开头就可以了。

  1.2 新的元素

    增加新的元素代表新的语义,例如,新增加了<hgroup>标签,这个标签用于对网页或区段(section)的标题进行组合。再例如<nav>标签,它定义了网站导航的链接。有了类似这种新的元素,页面标记结构不仅清晰易读,搜索引擎机器人和辅助技术也能比较好的解读页面的内容。

  1.3 新的表单特性

  HTML引入了新的表单输入类型,例如:

  color: 

  time:

  month:

  date: 

  number: 

  range: 

  除了input元素的type有了丰富,HTML5还引入了新的输入元素属性

  例如: autocomplete, autofocus, placeholder, list 等等

  1.4 进度条 度量器 可折叠内容

  这些是一些常用的显示小部件。个人认为在实际的工程项目中,更多的是用自己构建的组件,这些原生的小组件用的不多。

  1.5 微数据

  搜索引擎和浏览器可以通过微数据提供更多的功能

2. 高级特性

  2.1 HTML的画布Canvas,通过HTML和JS就可以制作丰富的动画,从而代替并不 好的实现方式,例如用Flash技术实现。

  2.2 音频和视频,之前的实现方式都是通过第三方插件的方式来支持视频和音频,现在却可以原生的用HTML支持。这也许就是最近HTML5火起来的重要原因,视频能在移动端方便的传播,而不需要任何第三方插件。

  2.3 拖放功能,之前在页面中的拖放功能是通过JS来实现的,现在结合新的HTML5的拖放API就可以实现拖放的功能。

  2.4 使用WebSockets实现服务器端与客户端的双向通信, 这种通信方式没有HTTP相关的开销,和适合快速传输小规模数据。

  2.5 利用服务器发送事件实现从服务器端到客户端的单向通信。利用EventSource接口,你的web应用能够订阅一个服务器事件流,它只接收服务器发送的更新消息。

  2.6 文档可编辑。通过设置contenteditable属性使得该元素具备可编辑的特性,设置designMode可以使整个文档都具有可编辑的特性。

  2.7 使用Cooki会产生很多负面的问题。Web存储 Web Storage DOM API 为web应用替代Cookie的解决方案。这个API涉及两个接口:sessionStorage和localStorge

  2.8 通过IndexDB可以开发离线web应用。在离线状态时可以调用本地的IndexDB数据库进行操作,等连接到网络后再通过ajax请求更新到服务端

  2.9 可伸缩矢量图形

 

 这一个系列的文章主要是将HTML5实战(HTML IN ACTION)的内容进一步精简和提炼。总结思路和方法,精简内容,进一步了解HTML5规范带来的WEB变革。