HTML

HTML,即超文本标记语言(Hypertext Markup Language),是在网页中得到广泛使用的文档格式。HTML 文档不仅包含文本,还包含了标签,用于说明文本结构,描述了诸如链接、段落、标题之类的元素。

一个简短的 HTML 文档如下所示:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>My home page</title>
  6. </head>
  7. <body>
  8. <h1>My home page</h1>
  9. <p>Hello, I am Marijn and this is my home page.</p>
  10. <p>I also wrote a book! Read it
  11. <a href="http://eloquentjavascript.net">here</a>.</p>
  12. </body>
  13. </html>

标签包裹在尖括号之间(<>,小于和大于号),提供关于文档结构的信息。其他文本则是纯文本。

文档以<!doctype html>开头,告诉浏览器将页面解释为现代 HTML,以别于过去使用的各种方言。

HTML 文档有头部(head)和主体(body)。头部包含了文档信息,而主体则包含文档自身。在本例中,头部将文档标题声明为"My home page",并使用 UTF-8 编码,它是将 Unicode 文本编码为二进制的方式。文档的主体包含标题(<h1>,表示一级标题,<h2><h6>可以产生不同等级的子标题)和两个段落(<p>)。

标签有几种形式。一个元素,比如主体、段落或链接以一个起始标签(比如<p>)开始,并以一个闭合标签(比如</p>)结束。一些起始标签,比如一个链接(<a>),会包含一些额外信息,其形式是name="value"这种键值对,我们称之为属性。在本例中,使用属性href="http://eloquentjavascript.net"指定链接的目标,其中href表示“超文本链接(Hypertext Reference)”。

某些类型的标签不会包含任何元素,这种标签不需要闭合。元数据标签<meta charset="utf-8">就是一个例子。

译者注:最好还是这样闭合它们:<meta charset="utf-8" />

尽管 HTML 中尖括号有特殊含义,但为了在文档的文本中包含这些符号,可以引入另外一种形式的特殊标记方法。普通文本中的起始尖括号写成&lt;(less than),而闭合尖括号写成&gt;(greater than)。在 HTML 中,我们将一个&字符后跟着一个单词和分号(;)这种写法称为一个实体,浏览器会使用实体编码对应的字符替换它们。

与之类似的是 JavaScript 字符串中反斜杠的使用。由于 HTML 中的实体机制赋予了&特殊含义,因此我们需要使用&amp;来表示一个&字符。在属性的值(包在双引号中)中使用&quot;可以插入实际的引号字符。

HTML 的解析过程容错性非常强。当应有的标签丢失时,浏览器会重新构建这些标签。标签的重新构建已经标准化,你可以认为所有现代浏览器的行为都是一致的。

下面的文件与之前版本显示效果相同:

  1. <!doctype html>
  2. <meta charset=utf-8>
  3. <title>My home page</title>
  4. <h1>My home page</h1>
  5. <p>Hello, I am Marijn and this is my home page.
  6. <p>I also wrote a book! Read it
  7. <a href=http://eloquentjavascript.net>here</a>.

<html><head><body>标签可以完全丢弃。浏览器知道<meta><title>属于头部,而<h1>属于主体。此外,我再也不用明确关闭某个段落,因为新段落开始或文档结束时,浏览器会隐式关闭段落标签。目标链接两边的引号也可以丢弃。

本书的示例通常都会省略<html><head><body>标签,以保持源代码简短,避免太过杂乱。但我会明确关闭所有标签并在属性两旁包含引号。

本书也会经常忽略doctypecharset声明。这并不是鼓励大家省略它们。当你忘记它们时,浏览器往往会做出荒谬的事情。 您应该认为doctypecharset元数据隐式出现在示例中,即使它们没有实际显示在文本中。