关注HTML5有一段时间了，一直没系统的去学习过。

对于HTML5的理解，之前停留在一些新的标签，一些api可以完成部分js完成的事情，仅此而已。

前段时间HTML5定稿了，看了一些这方面的报道，进行了系统的学习，HTML5能做的远比你想象的多。

是时候开始学习了。

本系列内容主要参考"HTML5高级程序设计"和W3SCHOOL.

本文是系列的第一篇： HTML5初窥。

文章提纲

  • 概述
  • HTML5发展史 & 设计理念
  • HTML5新功能快速预览
  • 总结

概述

随着未来桌面移动化进程的逐渐普及， 移动设备与桌面设备使用的技术架构不可避免会有趋同的走势，HTML5 是唯一通吃 PC、Mac、iPhone、iPad、Android、Windows Phone 等主流平台的跨平台语言， 是时候采用HTML5+CSS3+JS构建新的Web应用了。

作为下一代Web语言，HTML5不再只是一种标记语言，它为下一代Web提供了全新的框架和平台，包括提供免插件的音频视频、图像动画、本地存储及更多酷炫的功能，是Web能够轻松实现native的体验。

HTML5发展史&设计理念

HTML5发展史

我把HTML5的发展史概括成三句话，详细内容有兴趣自己查阅，我就不多说了。

1993年HTML首次以因特网草案的形式发布，从2.0，3.2，4.0直到1999年的4.01版，4.01后开始停滞不前，W3C掌握着HTML规范的控制权。

一组人2004年成立了WHATWA(Web Hypertext Application Technology Working Group), 他们创立了HTML5规范, 同时针对Web应用开发新功能。（Web 2.0就是这个时候被发明的）

2006年,W3C又重新介入HTML，并于2008年发布了HTML5的工作草案，上个月正式定稿。

HTML5设计理念

1. 兼容性

支持现有文档并保持平滑过渡。

例如Google分析了上百万的页面，从中分析出DIV标签的通用ID名称，发现其中重复量很大， 很多开发人员都喜欢用DIV id="header"来标记页眉区域。HTML5于是直接定义了一个<header>标签。

2. 实用性（效率和用户优先）

HTML5规范是基于用户优先准则编写的，其宗旨是"用户至上"，这意味着遇到无法解决的冲突时，规范会把用户放到第一位，其次是页面作者，再次是实现者（浏览器）,最后才考虑到理论的纯粹性。

3. 化繁为简

主要做了以下改进：

以浏览器原生能力代替复杂的js代码;

新的简化的DOCTYPE;

新的简化的字符集声明;

简单而强大的HTML5 API;

4. 通用访问性

这个原则分为三个概念。

可访问性：出于对残障人士考虑，HTML5和WAI(Web Accessibility Initiative)和ARIA（Accessible Rich Internet Applications）做了紧密结合，WAI-ARIA中以屏幕阅读器为基础的元素已经被添加到HTML中。

媒体中立：如果可能的话，HTML5的功能在所有不同的设备和平台上应该都能正常运行。

支持所有语种：例如，新的<ruby>元素支持在东亚页面排版中会用到的Ruby注释。

Note

<ruby>定义和用法：

<ruby> 标签定义 ruby 注释（中文注音或字符）。

在东亚使用，显示的是东亚字符的发音。

与 <ruby> 以及 <rt> 标签一同使用：

ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。

HTML5新功能快速预览

新的DOCTYPE和字符集

根据上面提到的HTML5设计准则化繁为简，Web页面的DOCTYPE被极大的简化了。

HTML4 DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE>

谁能记得住？

请看HTML5 DOCTYPE

<!DOCTYPE html>

跟DOCTYPE一样，字符集的声明也被简化了。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

现在成了

<meta charset=utf-8" />

新元素和旧元素

HTML5标记元素根据内容类型的不同，分成7大类：

内嵌

像文档中添加其他类型的内容，例如audio、video、canvas和iframe等

流

在文档和应用的body中使用的元素，例如form、h1和small等

标题

段落标题，例如h1、h2和hgroup等

交互

与用户交互的内容，例如button和textarea等

元数据

通常出现在页面的head中，设置页面其他部分的表现和行为，例如script、style和title等

短语

文本和文本标记元素，例如mark、kbd、sub和sup等

片段

用于定义文档中片段的元素，例如article、aside和title等

语义化标记

HTML5新的片段类元素介绍

header

标记头部区域的内容（用于整个页面或页面中的一块区域）

footer

标记脚部区域的内容（用于整个页面或页面中的一块区域）

section

web页面中的一块区域

article

独立的文章内容

aside

相关内容或引文

nav

导航类辅助内容

下面是一个标签位置的示意图

使用Selectors API简化选取操作

除了语义化元素外，HTML5还引入了一种用于查找页面DOM元素的快捷方式。

HTML5之前查找元素的js举例：

函数：getElementById()

举例：<div id="foo"> getElementById("foo")

HTML5有了新的Selectors API, 可以用更精确的方式来指定希望获取的元素，而不必再用标准的DOM的方式循环遍历。使用方式类似于CSS中使用的选择规则一样。举例：

函数1：querySelector()

描述：根据指定的选择规则，返回在页面中找到的第一个匹配元素

示例：querySelector("input.error")

结果：返回第一个CSS类名为"error"的文本选择框

------------

函数2：querySelectorAll()

描述：根据指定规则返回页面中所有相匹配的元素

示例：querySelectorAll("#results td")

结果：返回id值为results的元素下所有的单元格

Note

1. 可以为Selector API函数同时指定多个规则，例如

//选择文档中名为highClass或lowClass的第一个元素

var x= document.querySelector(".highClass",".lowClass");

2. Selectors API不仅仅只是方便，在遍历DOM的时候，

Selectors API通常会比以前的遍历搜索更快，浏览器对选择器匹配进行了高度优化。

window.JSON

JSON作为js语法的一个子集，它将数据表示为对象字面量。

由于其语法简单和在js编程中与生俱来的兼容性，JSON变成了HTML5应用内部数据交换的事实标准。

典型的JSON API包含两个函数，parse()和stringify(), 分别用于将字符串序列化成DOM对象和将DOM对象转换成字符串。

如果旧的浏览器使用JSON，需要js库。

在js中执行解析和序列化效率往往不高，所以为了提高执行速度，新的浏览器原生扩展了对JSON的支持，可以直接通过js来调用JSON了。

总结

本文首先介绍了HTML5的一些重要特点，HTML的历史和设计理念。

最后对HTML5的新功能进行了快速预览。

赶紧抽时间学习HTML5吧！

好了，今天就到这里。

欢迎大家多多评论，让下一篇文章更好 ：）

HTML5 快速学习一的更多相关文章

  1. HTML5 快速学习二 Canvas

    本篇文章开始讲解HTML5的核心功能之一:Canvas 通过Canvas可以动态生成和展示图形.图表.图像以及动画. Canvas API功能非常多,我们将讨论最常用的功能. 我们先新建一个canva ...

  2. 数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇

    <数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>一文让读者了解了 HT的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT ...

  3. 数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇

    HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打 ...

  4. HTML5 例子学习 HT 图形组件

    HTML5 例子学习 HT 图形组件 HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心 ...

  5. 数百个 HTML5 例子学习 HT 图形组件 – 3D建模篇

    http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...

  6. 数百个 HTML5 例子学习 HT 图形组件 – 3D 建模篇

    http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...

  7. 60分钟Python快速学习(给发哥一个交代)

    60分钟Python快速学习 之前和同事谈到Python,每次下班后跑步都是在听他说,例如Python属于“胶水语言啦”,属于“解释型语言啦!”,是“面向对象的语言啦!”,另外没有数据类型,逻辑全靠空 ...

  8. LinqPad工具：帮你快速学习Linq

    LinqPad工具:帮你快速学习Linq 参考: http://www.cnblogs.com/li-peng/p/3441729.html ★:linqPad下载地址:http://www.linq ...

  9. HTML5 CSS3学习

    HTML5 CSS3学习 :http://www.1000zhu.com/course/css3/ HTML5 相关书籍:   http://www.html5cn.com.cn/news/gdt/2 ...

随机推荐

  1. 11.8 开课二个月零四天 （Jquery取属性值，做全选，去空格）

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  2. Spring+SpringMVC+MyBatis整合优化篇

    优化篇 Spring+SpringMVC+MyBatis+easyUI整合优化篇(一)System.out.print与Log Spring+SpringMVC+MyBatis+easyUI整合优化篇 ...

  3. 《Effective Java》学习笔记 ——异常

    充分发挥异常的优点,可以提高程序的可读性.可靠性和可维护性. 第57条 只针对异常的情况才使用异常 第58条 对可恢复的情况使用受检异常,对编程错误使用运行时异常 * 如果期望调用者能够适当的恢复,使 ...

  4. JVM源码---教你傻瓜式编译openjdk7（JAVA虚拟机爱好者必看）

    LZ经过一个星期断断续续的研究,终于成功的搞定了JDK的成功编译与调试.尽管网络上的教程也有不少,包括源码中也有自带的编译步骤说明,但真正自己动手的话,还是会遇到不少意料之外的错误. 为了方便各位猿友 ...

  5. 在WebGL场景中建立游戏规则

    在前三篇文章的基础上,为基于Babylon.js的WebGL场景添加了类似战棋游戏的基本操作流程,包括从手中选择单位放入棋盘.显示单位具有的技能.选择技能.不同单位通过技能进行交互.处理交互结果以及进 ...

  6. Windows7下Java运行时环境搭建

    第一步:下载JDK 地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html,(由于Sun于2009年被oracle收 ...

  7. Windos 下python2.7安装 pymssql 解决方案

    最近在学python,到安装pymssql这一块遇到了不少问题. 第一:如何安装python 模块,也是最主要的问题. 可以这么理解:在安装python其它模块之前,可以先安装一个负责安装模块的模块. ...

  8. PAT甲题题解-1030. Travel Plan (30)-最短路+输出路径

    模板题最短路+输出路径如果最短路不唯一,输出cost最小的 #include <iostream> #include <cstdio> #include <algorit ...

  9. PAT甲题题解-1074. Reversing Linked List (25)-求反向链表

    题意说的很清楚了,这种题的话,做的时候最好就是在纸上自己亲手模拟一下,清楚一下各个指针的情况, 这样写的时候就很清楚各个指针变量保存的是什么值. PS:一次AC哈哈,所以说自己动手在纸上画画还是很有好 ...

  10. C++ 实验 使用重载运算符实现一个复数类

    实验目的: 1．掌握用成员函数重载运算符的方法 2．掌握用友元函数重载运算符的方法 实验要求: 1．定义一个复数类,描述一些必须的成员函数,如:构造函数,析构函数,赋值函数,返回数据成员值的函数等. ...