按图索骥系列之——HTML 简述

1. HTML 的来历
2. HTML 如何工作
3. HTML 基础架构
推荐阅读

本篇内容主要简述 HTML 的背景来历，以及一些基础架构规范。

1. HTML 的来历

HTML 是 HyperText Markup Language 的缩写。它有两个特点构成了它的名字：1. 超文本 2. 标记语言。超文本意味着可以链接网站的页面。标记语言则是指一系列在 web 浏览器中展示的元素可以通过标记来表示。比如，表示一张图片，我们使用 img 标签，表示段落用 p 标签等等。

HTML 最开始只是用来描述一种文档的规范。后来经过 web 的发展和移动应用的崛起，现在也成为了应用软件的代名词。比如：H5 应用指的就是以 HTML 5 为规范的一系列适配移动端的网页，但其本质，仍然是 HTML。另外，我们在 PC 端常见的 HTML，默认使用了 HTML 4.01 的规范。这里与 HTML 5 的差别，主要表现在更好的语义化标签和更丰富的标记元素等等。具体部分，我们以后有机会再分析。

2. HTML 如何工作

这里有一段 HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>Sample page</title>
  </head>
  <body>
    <h1>Sample page</h1>
    <p>This is a <a href="demo.html">simple</a> sample.</p>
    <!-- this is a comment -->
  </body>
</html>

HTML 文档由标签和文本组成的树组成。每个标签有一个开始标签 <body> 和结束标签 </body>。有些结束标签可以省略，比如 <img />。

标签之间必须满足嵌套关系，不能相互重叠。

比如，这个就是错误的：

<p>This is <em>very <strong>wrong</em>!</strong></p>

这个是正确的：

<p>This <em>is <strong>correct</strong>.</em></p>

感兴趣的小伙伴可以打开复制下面代码在你的浏览器的地址栏中粘贴看看。

data:text/html,<p>This is <em>very <strong>wrong</em>!</strong></p>

在 Chrome 下上面的代码会被如下显示，小伙伴可以自行比较其中差异。

<p>This is <em>very <strong>wrong</strong></em><strong>!</strong></p>

元素可以拥有属性，属性用来控制元素如何工作。最典型的例子就是 <a> 标签。如下， a 标签同时具备了 href 属性，它保存了标签指向的链接。

<a href="demo.html">simple</a>

HTML 用户代理（通常指浏览器）工具会把文档解析成 DOM 树。没错，就是前端同学十分熟悉的 DOM（Document Object Model）。DOM 在内存中代表了一个文档。它也是浏览器渲染的重要环节之一。

最开始的例子中，DOM 树的生成如下：

DOCTYPE: html
- html
  - head
    - #text: ⏎␣␣
    - title
      - #text: Sample page
    - #text: ⏎␣
    - #text: ⏎␣
  - body
    - #text: ⏎␣␣
    - h1
      - #text: Sample page
    - #text: ⏎␣␣
    - p
      - #text: This is a
      - a href="demo.html"
        
        #text: simple
      - #text: sample.
    - #text: ⏎␣␣
    - #comment: this is a comment
    - #text: ⏎␣⏎

关于 DOM 树的特点，我们将在后续详细介绍。直观的看上图， DOM 树的根节点总是 html 节点。节点类型有很多种，常见的有元素节点，html ，注释节点，文本结点等。任何一段 HTML 代码在 DOM 树中都有对应的对象，甚至是换行符。DOM 树

DOM 树可以被页面中的脚本操作。脚本，通常指 JavaScript，是一段使用 script 标签嵌入的程序代码，当然也有部分代码通过事件处理属性比如: onclick="javascript: alert('1')" 写入。复制下面的代码到浏览器的地址栏，来感受下 JavaScript 是如何作用于页面元素的。

data:text/html,<form name="main"> Result: <output name="result"></output> <script> document.forms.main.elements.result.value = 'Hello World'; </script> </form>

操作 DOM 会直接影响页面的渲染，注意这里并不一定会影响页面表现比如操作一个 display:none 的元素的属性。在页面上我们不会直接看到什么变化，但实际上，浏览器已经执行过了 DOM 树的重新计算，只是没有引发渲染。

最后，关于如何书写健康的 HTML 页面。请访问这个链接使用工具来辅助查询，自己改过的错误，印象才会更深刻。

Nu Html Checker

3. HTML 基础架构

这章内容相对而言有点枯燥，主要参考 2 Common infrastructure 官方文档中对 HTML 技术架构的定义来谈谈自己的理解。

HTML 基础架构里，定义了资源，XML 兼容性， DOM 树，脚本和 URL 等一系列术语的规范。

拿 URL 来说，如果想要详细了解浏览器中的 URL 的限定。在这个规范里，有着十分明确的定义：

如果URL符合WHATWG URL规范中的创作一致性要求，则它是有效的URL。
如果字符串是有效的URL，但不是空字符串，则它是有效的非空URL。
字符串是一个有效的URL，如果从字符串中删除开头和结尾的空格后，则该字符串可能被空格包围。
字符串是有效的非空URL，如果从字符串中删除开头和结尾的空格后，它是有效的非空URL，则该字符串可能会用空格包围。

URL 除了常存在于我们熟悉的地址栏之外，还在 img script 标签的 src 中和 a 标签的 href 中。在查阅文档的时，还发现一个冷门的知识点： q blockquote ins del 元素有个 cite 属性，也可以存储 URL。它的作用是定义一个链接来记录该标签的为什么存在的原因。

解析 URL 也是有一系列规则的在背后执行的。在解析 URL 之前，会执行以下几步：

如果指定了文档，则将编码设为文档的字符编码，否则将环境设置对象设为 API URL 字符编码。
如果指定了文档，则将 baseURL 设为文档的基本 URL，否则，设为环境设置对象的API基本URL。
让 urlRecord 作为使用 baseURL 和编码将 URL 解析器应用于url的结果。
如果 urlRecord 失败，则中止这些步骤并出现错误。
让 urlString 作为将 URL 序列化程序应用于 urlRecord 的结果。
返回 urlString 作为 URL 字符串的结果，并返回 urlRecord 作为 URL 记录的结果。

基础架构一章中还定义了命名空间，什么是 HTML 的命名空间呢？这个知识点更爆冷，感觉知道了也没有用。在这里纯粹分享下，以做杂谈。

命名空间其实来自于 XML 的概念。在 XML 中，是可以书写自定义标签的，这时候难免就会存在自定义重复的标签。为了 XML 能够正常解析，就需要书写具备命名空间的格式，代码如下：

<namespace:tag>content</namespace:tag>

以上就是本次的整理内容。下一章，我们将主要围绕 DOM 对象开始介绍 HTML 语义和结构以及 HTML 文档 API 部分。

按图索骥系列之——HTML 简述

1. HTML 的来历

2. HTML 如何工作

3. HTML 基础架构

推荐阅读