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

时间 2019-11-06

原文原文链接

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

1. HTML 的来历

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

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

2. HTML 如何工做

这里有一段 HTML：html5

<!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 />。java

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

好比，这个就是错误的：浏览器

<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 基础架构

推荐阅读