(Frontend Newbie) Web三要素（一）
上一篇简单了解了Web发展的简要历史，本篇简单介绍前端开发的基本三要素：HTML、CSS、JavaScript中的HTML以及一些在开发、学习过程中易被忽视的知识点。
HTML
HTML全称是超文本标记语言 (Hyper Text Markup Language)，是一种包含多种标签的标记语言，用来描述网页。浏览器读取HTML文档，并以网页的形式显示它们，浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。因此，一个网页可以简单的理解为HTML标签和纯文本的集合，通常，我们把一个HTML文档称为一个网页。
HTML是一种标记语言，有一套标记标签，几乎每一种标签都有一个开始标签（start tag）和结束标签（end tag）。通过开始标签和结束标签定义HTML元素。因此，在绝大多数情况下（空元素以开始标签结束而结束），HTML元素以开始标签起始，以结束标签终止，开始标签与结束标签之间的内容为HTML元素的内容。大多数HTML元素允许嵌套，正是因为HTML元素的嵌套，才构成了HTML文档。
上面简单介绍了一下HTML语言以及基本的语法，想要了解更多HTML元素、属性等相关内容，请参考W3CSchool,那里有详细的说明和示例。
下面我们说一说在开发过程中易被忽视的，但又非常重要的几个知识点。对于没有说到的，后续再做补充。
1. 文档类型 <!DOCTYPE>
声明帮助浏览器正确地显示网页。注意，<!DOCTYPE>声明不是HTML标签，它的作用是为浏览器提供一项信息，即这个HTML文档是用什么版本编写的。由于HTML存在多个版本，只有知道了HTML文档的确切版本，浏览器才能正确的显示HTML文档。
下面列举几个常用的DOCTYPE声明。
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
在HTML 4.01版本中，我们看到每种DOCTYPE声明中都含有一个DTD，那什么是DTD呢？DTD就是文档类型定义（Document Type Definition），是一套为了进行程序间的数据交换而建立的关于标记符的语法规则。它是标准通用标记语言（SGML）规格的一部分，文档可根据某种DTD语法规则验证格式是否符合此规则。文档类型定义也可用做保证标准通用标记语言文档格式的合法性，可通过比较文档和文档类型定义文件来检查文档是否符合规范，元素和标签使用是否正确。一言以蔽之，DTD就是定义了这个文档中允许有什么，不允许有什么，用的对不对等内容(详情请参考)。
那为什么HTML5中不需要引用DTD呢？上一篇中我们知道，HTML4基于SGML，DTD是SGML的一部分，所以HTML4需要引用DTD，而HTML5是基于XML（SGML的一个子集），因此不需要对 DTD 进行引用，但是需要!DOCTYPE来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。
关于SGML、HTML和XML的关系，可以参考这篇文章。
2. META元素
标签始终位于head元素中，提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。meta元素不包含任何内容，它的属性定义了与文档相关联的名/值对。
meta元素必须包含content属性，常与之搭配使用有http-equiv属性和name属性。
以下是http-equiv和name的常用取值表。
| 属性 | 值 | 说明 |
|---|---|---|
| http-equiv | content-type expires refresh set-cookie |
把 content 属性关联到 HTTP 头部。 |
| name | author description keywords generator revised others |
把 content 属性关联到一个名称。 |
3. HTML字符实体
在 HTML 中，某些字符是预留的。比如用于定义标签的尖括号（<>）。要正确显示这些字符，就必须借助于字符实体（character entities）。那什么是字符实体呢，可以简单的理解为用于表示一些保留字符和特殊符号的代码。比如我们需要显示一些键盘无法输入的符号，此时就必须借助于字符字符实体来完成。另一种常见的情况就是，出于安全的考虑，我们在显示用户输入的信息的时候，需要将信息转化成字符实体才能进行显示，防止注入攻击。
以下是常见的HTML字符实体。
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 日圆 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
更过实体请参考HTML 实体符号参考手册
4. URL编解码
说到URL就不能不提另一个容易混淆的概念URI。URI即统一资源标识符（Uniform Resource Identifier），用于表示web上某一个具体的资源。而URL即统一资源定位符（Uniform Resource Locator),是URI的一种形式（另一种形式是URN，统一资源名）,也是最常用的形式。URL用来表示Web上某个资源的特定位置。例如：
http://www.cnblogs.com/bingooo/p/5080137.html
表示(Frontend Newbie) Web简史这篇博文的具体位置。
关于更多的URI、URL和URN的比较，网上有很多文章，参考这篇 你知道URL、URI和URN三者之间的区别吗？
在日常开发过程中，我们需要关注的更多的是URL的编解码的问题。
首先我们要弄清楚URL编码问题的由来。
既然URL要统一地命名网络上所有的资源，就要通过各种不同的协议来传送这些资源，也就是说，URL是可移植的（portable）。然而这些协议在传输数据时往往会使用不同的机制，所以URL要确保能通过这些协议进行安全传输即不能丢失信息。有些协议，比如传输电子邮件的简单邮件传输协议（Simple Mail Transfer Protocal， SMTP）所采用的传输方法就是略去一些特定的字符。为了避开这些问题，URL只能使用一些相对较小的、通用的安全字母表中的字符。另外，为了能供人类阅读，一些不可见、不可打印的字符即使能够安全的传输也不能在URL中使用。最后，URL还必须是完整的，即能包含安全字母表之外的二进制数据或字符，所以，需要引入一种转义机制。
为了满足URL的可移植性、完整性、能够安全的传输并能被人类阅读，URL的设计者最终在ASCII码表的基础上集成了转义序列。通过转义序列，可以将任何字符值或数据通过ASCII字符集的有限子集进行编码。
除了不安全字符以外，还有一种情况我们要对URL进行编码，那就是当要传输的数据中包含保留及受限字符的时候，要对这些字符进行编码。
下面我们看通过什么方法来完成URL的编解码。
前端开发中，我们通常通过encodeURI()和encodeURIComponent()对URL进行编码，通过decodeURI()和decodeURIComponent()对URL进行解码。
encodeURI()和encodeURIComponent()的区别在于，encodeURI()只对于整个URL进行编码，即对于URL字符集中的保留字符不会进行编码，但是encodeURIComponent()则将对于这些保留字符也进行编码。
我们在使用encodeURI()和encodeURIComponent()的时候要根据具体的业务场景进行选用，要分清楚哪些字符需要编码，哪些字符需要不能编码。
更多的关于
encodeURI()和encodeURIComponent()的比较，请参考这篇文章
下表列出了URL的保留及受限字符。
| 字符 | 保留/受限 |
|---|---|
| % | 保留作为转义字符的转义标志 |
| / | 保留作为路径组件中分隔路径段的定界符 |
| . | 保留在路径组件中使用 |
| .. | 保留在路径组件中使用 |
| # | 保留作为分段定界符使用 |
| ? | 保留作为查询字符串定界符使用 |
| ; | 保留作为参数定界符使用 |
| : | 保留作为方案、用户/口令，以及主机/端口组件的定界符使用 |
| $,+ | 保留 |
| @&= | 在某些方案的上下文中有特殊的含义，保留 |
| {}|\^~[]' | 由于各种传输Agent代理，比如各种网关的不安全处理，使用受限 |
| <>" | 不安全；这些字符在URL范围之外通常是有意义的，比如在文档中对URL自身进行定界，所以要对其进行编码 |
| 0x00-0x1F,ox7F | 受限，这些十六进制范围内的字符都在ASCII字符集的不可打印区间内 |
| >0x7F | 受限，十六进制在此范围内的字符都不在ASCII字符集的7比特范围内 |
小结
HTML是整个Web三要素中最简单也是最基本的。只有将HTML搞清楚之后，在学习CSS和JavaScript的时候，很多概念就能轻松的理解了。
需要强调一点的是，HTML提供了一些控制显示效果的标签，HTML本身的某些标签也可以用来控制页面布局，但是在开发过程中我们应该坚决避免这样做。后面我们会了解到，可以通过CSS来控制页面的显示，并且使用更加方便，功能更加强大。
HTML只用来表示最原始的文档含义就够了。
