HTML
HTML,即超文本标记语言(Hypertext Markup Language),是在网页中得到广泛使用的文档格式。HTML 文档不仅包含文本,还包含了标签,用于说明文本结构,描述了诸如链接、段落、标题之类的元素。
一个简短的 HTML 文档如下所示:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My home page</title>
</head>
<body>
<h1>My home page</h1>
<p>Hello, I am Marijn and this is my home page.</p>
<p>I also wrote a book! Read it
<a href="http://eloquentjavascript.net">here</a>.</p>
</body>
</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 中尖括号有特殊含义,但为了在文档的文本中包含这些符号,可以引入另外一种形式的特殊标记方法。普通文本中的起始尖括号写成<
(less than),而闭合尖括号写成>
(greater than)。在 HTML 中,我们将一个&
字符后跟着一个单词和分号(;
)这种写法称为一个实体,浏览器会使用实体编码对应的字符替换它们。
与之类似的是 JavaScript 字符串中反斜杠的使用。由于 HTML 中的实体机制赋予了&
特殊含义,因此我们需要使用&
来表示一个&
字符。在属性的值(包在双引号中)中使用"
可以插入实际的引号字符。
HTML 的解析过程容错性非常强。当应有的标签丢失时,浏览器会重新构建这些标签。标签的重新构建已经标准化,你可以认为所有现代浏览器的行为都是一致的。
下面的文件与之前版本显示效果相同:
<!doctype html>
<meta charset=utf-8>
<title>My home page</title>
<h1>My home page</h1>
<p>Hello, I am Marijn and this is my home page.
<p>I also wrote a book! Read it
<a href=http://eloquentjavascript.net>here</a>.
<html>
、<head>
和<body>
标签可以完全丢弃。浏览器知道<meta>
和<title>
属于头部,而<h1>
属于主体。此外,我再也不用明确关闭某个段落,因为新段落开始或文档结束时,浏览器会隐式关闭段落标签。目标链接两边的引号也可以丢弃。
本书的示例通常都会省略<html>
、<head>
和<body>
标签,以保持源代码简短,避免太过杂乱。但我会明确关闭所有标签并在属性两旁包含引号。
本书也会经常忽略doctype
和charset
声明。这并不是鼓励大家省略它们。当你忘记它们时,浏览器往往会做出荒谬的事情。 您应该认为doctype
和charset
元数据隐式出现在示例中,即使它们没有实际显示在文本中。