HTML5标准学习 – 简介

 

最近前端的群都蛮热闹的，但我发现多数讨论的是javascript和css相关的问题，仿佛大家在努力创建各种交互、样式的时候，忘却了这一切的基础 – HTML。

其实我很喜欢HTML，觉得这个语言远比XML来得有趣，其灵活、轻便远非极端规范的XML可以比拟。同时又因为HTML的作用范围极小，规定的标签有限等说不上优点还是缺点的特色，使得HTML有着自己的确定性。

本系列的前面很大一部分会以非常短小的篇幅，介绍HTML5中的一些基本概念，并且：

• 只关心HTML这个语言，其他的javascript或者css完全不会涉及。
• 只关注HTML，对XHTML会简要带过，但不会详细说明，这源于XHTML有着比HTML更严格的规范，对浏览器的解析而言，可以认为是HTML的一个子集。
• 主要参考了whatwg的官方文档，并对现有主流浏览器的兼容性进行了评估。
• 介绍的全是基本的概念，不会涉及文档解析、DOM树构建、脚本执行之类的实现细节。

在这之后，可能会提取部分与浏览器的运行相关的技术细节，如脚本的解析、执行等话题来进行更深入的探讨。

如果你觉得HTML不爽，因为开始标签和结束标签可以随便省略太不规范，那么这个系列会告诉你，HTML的标签省略是有非常严格的规定的……

如果你觉得HTML简单，大不了照着XML来写，那么这个系列会告诉你，HTML里充满着陷阱，即便不考虑各浏览器的实现，你也不见得能安全走过这片雷区……

在开始这个系列以前，有几个非常重要的概念需要介绍。HTML中有着很多很多的概念，具体可以参见Terminology一章，但有一部分并不会在参考手册中被广泛引用，只有其中的一小块有着了解的意义：

浏览上下文 – browsing context

就是我们通常见到的页面，确切地主，浏览上下文是一个环境，在这个环境中，HTML会被解析、构建，CSS样式会被计算、应用，javascript脚本会被加载、执行，最终展现出终端用户可以看到的内容。

通常来说，我们最常接触的上下文有这么几种：

• 一个浏览器窗口，比如一个IE6窗口。
• 多标签浏览器里的一个标签，Firefox、Chrome等浏览器都是这么做的。
• 一个<iframe>元素也是一个独立的浏览上下文。
• 在frameset中，一个<frame>元素也会形成一个独立的浏览上下文。

换行 – new line

和计算机基础课程所学的一样，HTML定义了3种类型的换行符：

• 字符U+000D，即\r字符。
• 字符U+000A，即\n字符。
• 字符U+000D后跟着U+000A，即\r\n字符串。

不同的系统有其默认的换行输出，HTML的规定保证浏览器能正确解析现在主流的3种换行方式。

空格 – space

空格在HTML中有着非常重要的作用，如一个元素的各属性之间可以通过空格分隔。正常情况下，开发人员会按一下空格键来输入一个空格，当属性很多的时候，可能使用回车来将属性更好地排列起来。但是大概很少有人会去思考，为什么回车的效果和空格是一样的，HTML还能解析哪一些字符作为空格呢？

• 字符U+0020，就是普通的空格。
• 字符U+0009，就是\t水平制表符。
• 字符U+000A，就是\n换行符。
• 字符U+000D，就是\r回车符。
• 字符U+000C，这个是分页符，很少见到。

关于空格的问题，其中jQuery也犯过这个问题，甚至至今都存在这个问题。在jQuery 1.5.1的第1738行定义了一个正则表达式/[\n\t\r]/g，用于通过空格来分隔元素的class属性。在1.4.4版本中，这个正则是/[\n\t]/g很显然漏掉了\r，这个BUG项就说明了这个问题。当然很遗憾，1.5.1版本依旧没有照顾到标准中的所有空格字符，即没有对U+000C分页符的处理。