本章教程无需任何基础。
平常我们看到的网站都是用 HTML 的形式展现的。不过 HTML 是什么？一种可能的解释是“How To Make L***”，但是这并不科学。事实上，它的全称为 Hyper Text Markup Language，即超文本标记语言。它并不算一个编程语言。 HTML 通过各种标签来描述一个网页。网页中有文字、图像、视频、按钮等元素，文字还有加粗、倾斜等格式。怎样让浏览器理解我们的意思呢？例如，我们要显示如下格式的文字：
Hyper Text Markup Language
我们可以用 <b> 标签（英文为 bold，控制加粗）和 <i> 标签（英文为 italic，控制倾斜）来描述这句话：
<b>H</b>yper <b>T</b>ext <b>M</b>arkup <i><b>L</b>anguage</i>
被包在 <b></b> 标签中的文字会加粗，被包在 <i></i> 标签中的文字会倾斜。
有一定初步的了解了吧？现在我们正式地开始学习标签。
HTML中，标签通常是成对出现的。例如刚才的 <b> 和 </b>，前者是开放标签，后者是闭合标签，两者之间是标签里的内容（内容可以为空，但是有意义么？）。bold 是加粗的意思，因此 <b>content</b> 将会显示出一个加粗的单词“content”。但是，有的时候只有一个标签，这就是所谓的单标签，例如 <br> 标签，表示这里需要换一行。可以这么理解：双标签包住一些文字，用来控制文字的一些格式；单标签本身就相当于一个文字。
标签是可以嵌套的，例如 <b><i>L</i>anguage</b> ，将会显示一个倾斜的“Language”，其中字母 L 为粗体。切记一点，嵌套次序一定要正确，一定是一对 x 标签里面是一对 y 标签，即 <x><y></y></x>，如果写成 <x><y></x></y>，虽说有的浏览器也可以大概猜出来你要表达什么，但是这个是不合理的。
标签名称不区分大小写，因此 <b></b> 和 <B></B> 等价。
最后要注意的是 HTML 中的空白字符。如果出现了空白字符，哪怕数量再多，只要空白字符是连续的，就只会被当作一个空格。因此，下面的三段话效果都是一样的，都会显示成 is this a space?：
is this a space? is this a space? is this a space?
那么多个空格怎么办？换行又怎么办？标签是用尖括号括起来的，那么尖括号又怎么办？还有……HTML当然没有放弃它们（注意千万别忘了里面的分号）：
空格： 换行：<br>（只需要这么写，<br> 是单标签） 尖括号：左尖括号为 <，右尖括号为 > & 符号：&
了解了基本知识之后，我们就要开始写第一个网页了。首先，打开你喜欢的纯文本编辑器（例如广受好评的 Sublime Text），新建一个文件，然后以 .htm 或者 .html 的格式保存。注意不要用 DreamWeaver。要想成为高手，它会是你的一大障碍。通过拖拽控件生成的网页结构不会统一，生成的文件中也会有好多奇怪的东西。
Web 上有好多的文档格式，例如 HTML5、XML 等。浏览器需要知道你写的文档是什么格式，才可以正常解析。因此，我们的第一句要写上：
<!DOCTYPE html>
这表示我们写的是一个符合 HTML5 标准的文档。要注意 <!DOCTYPE> 并不是一个标签，它只是一个给浏览器的声明。
以下才是文档的真正内容。一个 HTML 文档当然要以 <html></html> 标签为开头和结尾了。于是我们的文档变成了这样：
<!DOCTYPE html> <html></html>
<html> 标签中会嵌套两个标签：<head></head> 和 <body></body>。前者描述了网页的一些性质，后者才是显示在浏览器页面上的内容。
在 <head> 中可以用 <title> 标签定义网页的标题：
<!DOCTYPE html>
<html>
<head>
<title>My First Page!</title>
</head>
<body></body>
</html>你可以保存之后用浏览器打开看看效果了，注意浏览器上面的标题栏。
接下来，我们要写一句 Hello World，然后将 World 一词加粗并倾斜：
<!DOCTYPE html>
<html>
<head>
<title>My First Page!</title>
</head>
<body>
Hello <b><i>World</i></b>
</body>
</html>效果还好吧？ 标签就是这么用的。常用的 HTML 标签还有：
> 文章的标题
<h1>一级标题</h1>
<h2>二级标题</h2>
....
<h6>六级标题</h6>
h 的英文是 header，善用 h1~h6，搜索引擎会根据这个来整理文章。
> 文章的段落
<p>这是第一段文字。</p>
<p>这是第二段文字。</p>
p 的英文是 paragraph，也就是一个自然段。所以以后分段千万不要用<br>啦！
> 无序列表
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
ul 的英文是 unordered list，里面 li 的英文是 list item，是不是很形象呢？
> 有序列表
<ol>
<li>先学会前端</li>
<li>再学会后台</li>
<li>再尝试将前后台对接</li>
</ol>
同理，ol 的英文是 ordered list。任务：用上本文所讲的标签，写一篇文章吧。
想知道更多的标签和标签的展现方式，请看下一篇。