HTML 教程：十分钟入门 HTML 语言

本文是一篇面向编程小白和新人的快速入门文章，主旨是希望能用一篇文章的篇幅来介绍清楚 HTML，并让其能上手写一个简单的网页。在此条件下，让我们省略一些语言起源和历史这类花里胡哨的信息，直奔主题。

HTML 是什么

HTML 是 HyperText Markup Language 的缩写，翻译为中文名为超文本标记语言。从这个名称里面可以看出它有两个基础概念：

HTML 是一个文本语言。
HTML 是一个标记语言。

文本语言意味着我们以通过任何文本编辑器来写 HTML 代码。而标记语言则阐明了 HTML 的语言特性，他通过类似「标注」的方式来组织代码。至于「超文本」的意思，等下后面解释。

在知道了 HTML 是什么后，让我们来思考一个比较实际的问题：我们用 HTML 能做什么？

HTML 的用途

从语言层面讲，HTML 就两个作用：

定义内容和结构。
实现任意 HTML 页面之间的连接。

第二点正是 HTML 名字中 HyperText 超文本所代表的意思。没有这个，那 HTML 就跟普通的文本文件一样没什么区别了。

以上两点作用看似简单，但却是构建网页的基石。各种大大小小的网站则是由不同功能的网页组合在一起而实现的。所以把 HTML 理解为当今互联网的基石……之一，也并不过份。

了解了以上，HTML 的用途也就很清楚了，它最擅长的场景是制作网站。不过随着它的好兄弟 JavaScript 到处抢地盘，HTML 的使用领域也扩张了，这说起来是另外一个故事，这里暂且不表。我们只需要知道，目前借助 JavaScript 的力量，HTML 已经延伸到了手机 APP 和桌面软件的开发领域。

综上，HTML 应该是每个程序员或是对编程有兴趣的人都应该掌握的一项技能。你可以不懂 Go，可以不会 Python，也可以不学 PHP，但你不能不会 HTML。

认识 HTML 代码

下面是一行简单的 HTML 代码，用来把 zzxworld 这串文本标记为标题元素：

<h1>zzxworld</h1>

观察这行代码，你会有什么发现？

首先你一定会注意到 <h1> 这种用尖括号包起来的东西，这叫 HTML 标签。尖括号中抱起来的字母叫 HTML 标签名称。HTML 标签大多数时候都是成对出现的，前面尖括号以什么标签名称开始，后面就会出现一个同样标签名称的结束标签。结束标签和开始标签相比，在标签名称前会多一个 / 符号。在它俩之间的是 HTML 标签内容。

如果觉得上面这段关于 HTML 代码的描述有点难懂，可以通过下面这张图来理解：

掌握了这个规则，可以自己随便试试看。比如下面这两行 HTML 代码：

<p>HTML 很简单。</p>
<div>掌握开始标签和结束标签就入门了。</div>

对照上面的代码解释多观察，相信一定能发现其中的规律。

注意上面说的：HTML 标签大多数时候成对出现的，但还有些比较特殊的标签，它不需要提供标签内容，这种标签叫做「空标签」。来看这个例子：

<p>这时第一行文字。<br /> 这是第二行文字。</p>

<br /> 的用途是让内容换一行显示，它不需要结束标签。这种不需要换行的标签通常会把 / 斜杠符号放到开始标签的名称后面。因为 HTML 的语法宽容度，也可以省略这个符号。所以 <br/> 或是 <br> 也是同样的。要注意：只是部分 HTML 标签支持这种不需要结束标记的写法。

HTML 标签名称

对于标签名称，好奇的朋友可能会想：可不可以自己随便来定义呢？比如这样：

<abc>我要用 abc 作为标签名称。</abc>

当然是可以的，不过使用这种自定义标签已经属于 HTML 的高级应用领域，超出本文知识范畴了。我们暂且认为标签只能使用预定义好的名称。比如上面使用过的几个，它们就有自己各自的意义：

h1: 表示标记的内容为一个标题。
p: 表示标记的内容为一个段落。
div: 表示标记的内容为一个区块。
br: 换行显示。

HTML 目前有上百个预定义标签，具体可参考这篇《HTML 标签大全》的文章来了解。不要被这个数量的记忆负担所吓到，这其中大部分标签日常都很难用到。而常用的基本上随着使用次数的增加自然而然就记住了。

HTML 标签属性

在 HTML 开始标签的名称后面可以定义标签属性，它的格式如下：

<div class="container"></div>

上面就为 div 标签定义了一个 class 属性，属性值为 container。先不要在意这个属性的用途，在入门阶段，我们只要记住这个格式即可。

属性对于大多数 HTML 标签来说是可有可无的，但对于有些 HTML 标签就是必须的了。比如要定义一个可以点击到其他网站的超级链接：

<a href="https://www.zzxworld.com">zzxworld</a>

a 标签用来定义超链接，对于链接来说，显然需要给它一个可用的链接地址，否则就不是一个有效的链接标签了。所以这个 href 属性就是使用 a 时必须要提供的。

HTML 标签内容

上面被 HTML 标签中包住的内容都是一段文字，但不要认为 HTML 标签就只能使用文字内容。事实上把 HTML 标签作为标签内容也是可以的。来看下面这个例子：

<div>
    <h1><a href="https://www.zzxworld.com">zzxworld</a></h1>
    <p>一个分享编程技术和知识的个人网站。</p>
</div>

我用区块标签 div 包住了 h1 和 p，这可以理解为编组，把一些有关联的标签放到一起来。

块级标签和内联标签

「块级(block)」和「内联(inline)」是在使用 HTML 时需要理解的两个重要概念。

块级标签：代表一个完整的内容区域，在浏览器上的默认显示效果为完整的一行。即便内容块种只有一个字，它也会占据一整块内容区域。挨着它的标签内容会换行显示。div 是这种标签的代表。
内联标签：代表一个文字级别的内容区域。内联元素会挨着一个一个的显示，没有超出父容器标签的宽度时默认不会换行。span 是这种标签的代表。

除了上面的区别，两者在嵌套使用上也不一样。原则上块级标签的内容区域可以包含块级和内联标签，但内联标签不能包含块级标签。

HTML 文件

HTML 代码有自己专门的存储文件格式。这种文件格式以 .html 或 .htm 作为后缀。作为一门文本标记语言，使用任何文本编辑器都可以编写 HTML 代码，比如 Windows 系统上的记事本软件。

HTML 标签代码虽然可以单独使用，但要作为一个完整文档来呈现时，有一个统一的模板：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文档标题</title>
    </head>
    <body>
        <p>文档内容</p>
    </body>
</html>

这个标准的要点如下：

第一行代码必须是 <!DOCTYPE html>，它表示当前 HTML 文档的类型。
<html> 是文档的根元素，所有 HTML 标签代码都应该包含在它里面。
<head> 是文档的头元素标签，与文档属性信息相关的标签都会放在这个标签中。
<body> 是文档的内容标签，所有文档内容都会放在此标签中。这也是 HTML 标签的主要位置。

一个简单的网页

在掌握了以上知识后，就算是已经入门了 HTML 了。接下来将应用上面学到的知识，来写一个简单的 HTML 个人介绍网页。

来看完整的 HTML 代码：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>关于 zzxworld 的介绍</title>
    </head>
    <body>
        <div>
            <h1>zzxworld</h1>
            <p>一个分享编程技术和知识的个人网站。</p>
            <a href="https://www.zzxworld.com">访问主页</a>
        </div>
    </body>
</html>

把上面的 HTML 代码保存为 HTML 文件后，用浏览器打开，显示效果如下：

作为一个测试，根据上面介绍的 HTML 概念，试试看能否解释出上面各行代码分别代表了什么？先尝试自己来解答，最后可以点开下面的「查看提示」来验证一下其中的陌生标签和属性是否和你理解的一致。

查看提示

<html> 根标签中的 lang="zh" 属性定义了此文档为中文。
<meta> 标签为文档元信息设置标签，它的 charset="UTF-8" 定义了文档字符集编码。
<title> 是文档标题标签，它的内容会显示在浏览器的标题栏。

利用好浏览器

浏览器是 HTML 代码的显示软件，所以通过浏览器就能查看各大网站的 HTML 代码。通过查看它们的代码，可以学习到更复杂的网站是如何通过 HTML 来组织内容的。

需要注意，不是所有浏览器都能很友好的查看源代码。建议选择火狐浏览器或是谷歌浏览器。以火狐为例，在打开网站后，在页面上点击右键，然后选择查看源码功能，就能看到当前网站的 HTML 源码了。