当你在 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把内容（文字，图片，语言，影片等等）和「presentation」（这个内容是如何显示，比如文字用什么颜色显示等等）分开。HTML使用预先定义的元素集合来识别内容形态。 元素包含一个以上的标记来包含或者表达内容。标记利用尖括号表示，而结束标记（用来指示内容尾端）则在前面加上斜线。
举例来说，段落元素包含起始标记“<p>”和结束标记“</p>”。下面的例子展示一个包含HTML段落元素的段落
<p>You are beginning to learn HTML.</p>
当此内容显示在网页浏览器中，它看起来会像这样：
浏览器利用标记来当作指示如何显示标记中的内容。
包含内容的元素同时可以包含其他的元素，比如强调元素(<em>) 可以包裹在段落元素里面：
<p>You are <em>beginning</em> to learn HTML.</p>
展示的时候它看起来是这样的：
有一些元素是不能包含其他元素的，比如图片标签(<img>)，它只需要简单的指定文件名，作为他的一个属性即可。
<img src="smileyface.jpg">
通常而言，尖括号括起的内容前面有斜线意味着一个标签的结束。这在HTML中是可选项，而在XHTML是必须的，包括XML模式下的HTML元素。
下文将阐述上面介绍这些概念的细节。如果你想动态地学习HTML，请点击Mozilla Thimble，一个在线html编辑器。同时你可以参考HTML Elements来查看可用的HTML标签以及他们的用法。
元素——基本的构造区块
HTML由不同元素的集合组成。元素定义了它们所包含内容的语义。元素包含了两个相匹配的元素标签（tag）之中所有的内容，当然也包含了标签本身。例如，"<p>"标签表示一个段落的开始；"<img>"标签表示一张图片。访问HTML Elements页面以查阅完整的列表。
一些元素都有着明确的含义， 例如 ”这是一张图片”，“这是一个标题” 或者 “这是一个有序列表”。 另外一些则没这么特殊，例如 "这是本页面的一个节" 或者 "这是文本的一部分"，但是就技术层面上而言它们都是必不可少的， 例如标记一些在网页中不会被显示的内容。不论如何,所有的html元素都有其特定的语义及存在价值。
大部分的元素都支持元素嵌套，构成了一个层次结构。 一个简单的完整的网页结构例子如下所示：
<html>
<body>
<p>My dog ate all the guacamole.</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>This is text within a paragraph.</p>
上述例子中有一个起始标签（start tag）和一个结束标签（end tag）。结束标签与起始标签在内容上是一样的，但结束标签会在小于符号（<）后多一个整斜线/。 大多数 HTML 元素由一个起始标签和一个结束标签标识。起始标签和结束标签应成对出现，也就是说在一个起始标签之后应有其对应的结束标签。 由连个标签（起始标签和结束标签）构成的元素而言，缺少其中之一，这个元素都可能会被认为是无效的。
注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag)
有效代码示例:
<em>I <strong>really</strong> mean that</em>.
无效代码示例:
Invalid: <em>I <strong>really</em> mean that</strong>.
有效实例代码里的em的结束标签写在它内嵌标签strong的结束标签之后。
HTML5之前的浏览器在遇到没有正确嵌套的标签时，它们的解析方式是不一样的，所以显示结果也不一样。现代浏览器（）对没正确嵌套的标签已经能解析出统一的文档模型了
有些元素没有包含文本内容或者其他元素，这称为空元素。它们没有结束标签，请看下面例子:
<img src="smileyface.jpg">
一般在结束标签后面空格加上个斜杠（这在XHTML是必需的）
<img src="smileyface.jpg" />
而在HTML就没这么严格的规定，加上斜杠只是好看点而已，没什么作用
属性
开始标签可能包含一些信息，这些信息叫做元素的特性，包括两部分:
- 特性名.
- 特性值.
一些元素可以只有特性名没有特性值。它们的特性名类似“是否”，“有或没有”，所以可以省略特性值，所以下面三种写法都是一样的意思:
<input required="required"> <input required=""> <input required>
特性值如果有包含空格就要用引号，单双引号都可以。如果特性值是单个词就可以不用引号，但为了避免出错和易于识别一般会加上引号:
<p class=foo bar> (Beware, this probably does not mean what you think it means.)
上面的例子就是没加引号，浏览器错误地解析成下面的:
<p class="foo" bar="">
命名字符参考
命名字符参考 (一般被称作实体) 用于表示在HTML中具有特定含义的字符. 举例说，HTML将“>”和“<”符号理解为标签分隔符。所以，当你想在文本中用">"符号表达“大于”的含义时，你可以使用命名字符参考来作为替代。 以下例举了四个非常重要的常用实体：
>表示大于符号">" (>)<表示小于符号"<" (<)&表示和符号"and"(&)"表示引用符号" (")
除这四个外，还有许多其他的实体符号, 但以上所举的例子是实体符号中最为重要的几个，原因在于他们所表示的原本字符在HTML中具有特定的含义。（即是说，如果你没有在HTML文本中使用实体符号来替代原本符号的话，浏览器可能会错误地理解你的意图。）
文档类型和注释
除标签，文本内容和实体外，一个HTML文档一定需要在第一行做出文档类型声明(doctype declaration)。在现代HTML中，这句声明书写如下：
<!DOCTYPE html>
文档类型声明的演变有着复杂深长的历史，但今天的我们只需知道上方的文档类型声明告诉了浏览器需要遵循W3C标准来解析HTML和CSS代码，且不必尝试去模拟90年代的IE环境。（参见quirks mode）
HTML拥有一个允许我们在HTML文档添加注释的机制。注释并不会在浏览器渲染页面时一并呈现给用户，而是隐藏在源代码内。这个机制使我们能十分方便地为HTML文档的某个部分添加注释信息、给你的同事预留便笺、或者给你自己做个提示。HTML注释被如下符号封闭：
<!-- This is comment text -->
一个完整且精简的文档
如下是一个迷你的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>