HTML 入门

开始之前

为了更清晰的理解这篇文章，你应该学会使用browser，如果你了解如何创建并编辑文本文件，你就可以自己动手测试本文中的例子了

当你在 web 浏览器中浏览网页时，你看到的最基本的内容是文字。这些文字一般有着一些样式特性，比如不同的文字大小和颜色。在多数情况下，页面还会展示图片或者还可能带有视频；有时候会有一个表单，你可以填写信息（或者搜索内容）；或者可以依据喜好自定义页面的展示效果；页面也经常会带有包含动画效果的内容；页面上有些内容会不断变化而有些内容会保持不变。

一些技术（如CSS，JavaScript，Flash，AJAX，JSON）可以用来定义网页中的一些元素。但是，网页的基础是由HTML（HyperText Markup Language 超文本标记语言）来定义的。没有了HTML，网页不可能存在。HTML是一个把所有东西包含起来的外壳：HTML是一个国际化的标准，由万维网联盟（W3C）和网页超文本技术工作小组 (WHATWG)维护。WHATWG认为HTML是一个“活着的标准”，它应该不断地在进化。而W3C则致力于维护HTML的“多个版本快照”，即当前最新的版本HTML5和HTML的进化版HTML 5.1。

HTML规范所定义的这种语言，既可以使用较为松散的HTML语法，也可以使用更为严格的XML（Extensible Markup Language 扩展标记语言）语法，同时也解决了Web应用的需求。HTML没有描述内容的样式和格式，只是内容本身和其意义。如果你想要在网站中加入样式和格式，需要通过层叠样式表（CSS）来定义和控制。

这篇文章提供了一个HTML的入门简介。如果你想要了解浏览器背后的工作原理，这篇文章是一个很好的开始。

HTML 简史

蒂姆·伯纳斯-李，一名CERN（欧洲核子研究组织）的物理学家，在80年代后期设计了一种能在网路上分享文档的方式。在这之前，网路上沟通的方式仅限于纯文本传递，比如：电子邮件、FTP(文件传输协议)和Usenet讨论版。HTML是利用内容档案储存至中央服务器的方式，然后再将内容透过浏览器传递至本机工作站。 它简化了内容存取的方式，也让更多丰富内容能够显示（诸如较复杂的文本格式与图片的显示）。HTML 源自于SGML——它是一种复杂的文档结构定义和内容描述（文本或图像）语法；从HTML5起，HTML不再坚守SGML的语法。

什么是 HTML？

HTML 是一种标记语言（markup language）。它告诉浏览器如何显示内容。HTML把内容（文字，图片，语言，影片等等）和表现（这个内容是如何显示，比如文字用什么颜色显示等等）分开。HTML使用预先定义的元素集合来识别内容形态。 元素包含一个以上的标记来包含或者表达内容。标记利用尖括号表示，而结束标记（用来指示内容尾端）则在前面加上斜线。

基础的HTML编码结构如下：

<html>
<head>
    <title>这是标题</title>
</head>
<body>
    这是示例文本...
    <!-- 我们使用这种写法来标记注释 -->
    <!-- 页面标签和其他的内容都在这里.... -->
    <!-- 这是在浏览器中显示的实际区域 -->
</body>
</html>

大多数浏览器允许用户查看网页的HTML文本，在Firefox中，使用快捷键Ctrl + U来查看页面信息，初学者可能会发现复杂页面的代码几乎不可读，但如果你花了时间学习简单页面的代码并对照页面代码渲染，你很快就能理解HTML语法是如何工作的

举例来说，段落元素包含起始标记“<p>”和结束标记“</p>”。下面的例子展示一个包含HTML段落元素的段落

<p>你开始学习HTML了.</p>

当此内容显示在网页浏览器中，它看起来会像这样：

浏览器利用标记来当作指示如何显示标记中的内容。

包含内容的元素同时可以包含其他的元素，比如强调元素(<em>) 可以包裹在段落元素里面：

<p>你<em>开始</em>学习HTML了.</p>

展示的时候它看起来是这样的：

有一些元素是不能包含其他元素的，比如图片标签(<img>)，它只需要简单的指定文件名，作为他的一个属性即可。

<img src="smileyface.jpg">

通常而言，尖括号括起的内容前面有斜线意味着一个标签的结束。这在HTML中是可选项，而在XHTML是必须的，包括XML模式下的HTML元素。

下文将阐述上面介绍这些概念的细节。如果你想动态地学习HTML，请点击Mozilla Thimble，一个在线html编辑器。同时你可以参考HTML 元素参考来查看可用的HTML标签以及他们的用法。

元素——基本的构造区块

HTML由不同元素的集合组成。元素定义了它们所包含内容的语义。元素包含了两个相匹配的元素标签（tag）之中所有的内容，当然也包含了标签本身。例如，"<p>"标签表示一个段落的开始；"<img>"标签表示一张图片。访问HTML 元素参考页面以查阅完整的列表。

一些元素都有着明确的含义， 例如 ”这是一张图片”，“这是一个标题” 或者 “这是一个有序列表”。 另外一些则没这么特殊，例如 "这是本页面的一个节" 或者 "这是文本的一部分"，但是就技术层面上而言它们都是必不可少的，  例如标记一些在网页中不会被显示的内容。不论如何,所有的html元素都有其特定的语义及存在价值。

大部分的元素都支持元素嵌套，构成了一个层次结构。 一个简单的完整的网页结构例子如下所示：

<html>
  <head>
    <title>一个小型web页面</title>
  </head>
  <body>
    <p>你在学习HTML的起始页面</p>
  </body>
</html>

显而易见, <html> 元素将其他元素括起,，<body> 元素中包含网页内容。 该结构通常被视为由主干（<html>）发展而来的具有分支(本例中分支为， 元素 <body> 和<p> )的树形结构。 该层次化结构称为 DOM: Document Object Model--文档对象模型。

标签

HTML文档由纯文本表示。 你可以使用任意支持纯文本编写保存的文本编辑器来编写HTML文档，但大部分HTML程序员更倾向于使用专门的编辑器，这些编辑器支持语法高亮和DOM显示，例如Notepad++和sublime Text。 标签(Tag)的名字不区分大小写。 但是,W3C (维护了HTML标准的国际性性联盟)建议使用小写 ( XHTML 同样要求使用小写).

HTML 为由一对尖括号（<>）所括起来的内容赋予了特定含义. 这样的标识称为一个 标签（tag）. 例如:

<p>这是段落中的文本。</p>

上述例子中有一个起始标签（start tag）和一个结束标签（end tag）。结束标签与起始标签在内容上是一样的，但结束标签会在小于符号（<）后多一个整斜线/。 大多数 HTML 元素由一个起始标签和一个结束标签标识。起始标签和结束标签应成对出现，也就是说在一个起始标签之后应有其对应的结束标签。  由两个标签（起始标签和结束标签）构成的元素而言，缺少其中之一，这个元素都可能会被认为是无效的。

注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag)

有效代码示例:

<em>我<strong>真的</strong>是这个意思</em>.

无效代码示例:

<!-- 无效: --> <em>我<strong>真的</em>是这个意思</strong>.

有效实例代码里的em的结束标签写在它内嵌标签strong的结束标签之后。

HTML5之前的浏览器在遇到没有正确嵌套的标签时，它们的解析方式是不一样的，所以显示结果也不一样。现代浏览器（）对没正确嵌套的标签已经能解析出统一的文档模型了

有些元素没有包含文本内容或者其他元素，这称为空元素。它们没有结束标签，请看下面例子:

<img src="smileyface.jpg" alt="Smiley face" >

一般在结束标签后面空格加上个斜杠（这在XHTML是必需的）

<img src="smileyface.jpg" alt="Smiley face" />

而在HTML就没这么严格的规定，加上斜杠只是好看点而已，没什么作用

属性

开始标签可能包含一些信息，这些信息叫做元素的特性，包括两部分:

  • 特性名.
  • 特性值.

一些元素可以只有特性名没有特性值。它们的特性名类似“是否”，“有或没有”，所以可以省略特性值，所以下面三种写法都是一样的意思:

<input required="required">
<input required="">
<input required>

特性值如果有包含空格就要用引号，单双引号都可以。如果特性值是单个词就可以不用引号，但为了避免出错和易于识别一般会加上引号:

<p class=foo bar> <!-- (当心，这可能不意味着你想象的意思。) -->

上面的例子就是没加引号，浏览器错误地解析成下面的:

<p class="foo" bar="">

命名字符参考

命名字符参考 (一般被称作实体) 用于表示在HTML中具有特定含义的字符. 举例说，HTML将“>”和“<”符号理解为标签分隔符。所以，当你想在文本中用">"符号表达“大于”的含义时，你可以使用命名字符参考来作为替代。 以下例举了四个非常重要的常用实体：

  • &gt; 表示大于符号">" (>)
  • &lt; 表示小于符号"<" (<)
  • &amp; 表示和符号"and"(&)
  • &quot; 表示引用符号" (")

除这四个外，还有许多其他的实体符号, 但以上所举的例子是实体符号中最为重要的几个，原因在于他们所表示的原本字符在HTML中具有特定的含义。（即是说，如果你没有在HTML文本中使用实体符号来替代原本符号的话，浏览器可能会错误地理解你的意图。）

文档类型和注释

除标签，文本内容和实体外，一个HTML文档一定需要在第一行做出文档类型声明(doctype declaration)。在现代HTML中，这句声明书写如下：

<!DOCTYPE html>

文档类型声明的演变有着复杂深长的历史，但今天的我们只需知道上方的文档类型声明告诉了浏览器需要遵循W3C标准来解析HTML和CSS代码，且不必尝试去模拟90年代的IE环境。（参见quirks mode）

HTML拥有一个允许我们在HTML文档添加注释的机制。注释并不会在浏览器渲染页面时一并呈现给用户，而是隐藏在源代码内。这个机制使我们能十分方便地为HTML文档的某个部分添加注释信息、给你的同事预留便笺、或者给你自己做个提示。HTML注释被如下符号封闭：

<!-- 这是评论文本 -->

一个完整且精简的文档

如下是一个迷你的HTML示例文档。你可以把这些代码复制到文本编辑器中，另存为myfirstdoc.html，然后用浏览器打开它。另外请注意，你需要确保使用了utf-8的编码格式保存了这份HTML示例文档。虽然我们没有为这份文档添加任何样式信息（从而让视觉效果显得十分朴素），但这总归算一个不错的开始，不是吗？祝你前路好运！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>A tiny document</title>
</head>
<body>
  <h1>Main heading in my document</h1>
  <!-- Note that it is "h" + "1", not "h" + the letter "one" -->
  <p>Loook Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p>
</body>
</html>

文档标签和贡献者