(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只用来表示最原始的文档含义就够了。