本文所有图片均来自网站 lifehacker.com

在当今的网络时代，每个人都和互联网之间有着或多或少的联系。但不管你是以开发网页为生，还是想制作个人主页，或仅仅想让评论内容按设想显示，都必须要通晓HTML语言。基于这一点，为使更多的童鞋能读懂网页开发语言，看穿网页的“内幕”，我们就将逐步拨开这个坚硬的果壳。今天的第一课就以如何制作网页为题，来介绍网页标记语言——HTML。

也许你会有疑问，现在网络这么便利，我们在博客网站开办个人主页很简单呀，也没发现需要用HTML语言什么的啊。没错，但是如果你想制作自己的独立网页，就没那么容易啦，因为HTML是网页开发的基础，所以要是不懂HTML语言就只能望洋兴叹了。不过，如果你有兴趣可以跟着果壳从零学起，相信会有所收获的。

上面这段视频从选择文本编辑器开始，逐步深入到HTML文件结构，并介绍了一些你可能需要的相关内容。如果认真看下来，你一定会对HTML页面有个大概的认识。另外想要学习HTML你还需要具备以下几个必备条件。

必备条件

一个用来编写HTML的纯文本编辑器

一个用来测试HTML文件的网页浏览器

对网页工作模式感兴趣，并希望能深入了解

仅此而已，可以看到学习HTML的门槛很低，无需太多的准备，你就能开始学着编辑自己的网页了。

选择纯文本编辑器

想编写HTML，首先要有一个纯文本编辑器。上述视频中用的纯文本编辑器叫做TextMate，是需要付费的。作为新手，我们可以先选用免费的编辑器，比如Notepad++ (Windows), Kod (Mac), 或者是Sublime Text（Windows、Mac通用）。如果这几个都不满意，你也可以选用其他的编辑器，只要是纯文本的就行。

其实严格意义上讲，纯文本这个术语用在这里不太恰当。纯文本的定义是不包含任何样式的文字、数字和标点。这意味着文字不能加粗、不能倾斜、不能改变尺寸等。而我们所用的这些纯文本编辑器为方便阅读，可能会对语法进行高亮显示，不过它们不会将这些特征存储到文件中。所以我们需要的纯文本编辑器其实是只保存文本的编辑器，而不是Microsoft Word之类的。

注：为了能在浏览器中正常显示，你需要把编辑的文档保存为.html格式——如“my_first_web_page.html”。在编辑器里生成的.html文件也可以用浏览器打开。但是显示形式会大不相同。

什么是HTML文档

如果理解了上述内容，你很可能已经猜到了HTML—即超文本标记语言（HyperText Markup Language）只是一簇保存为特殊格式的文本，而浏览器可以根据语言规则对其进行识别。比如网页上显示出的图片，仅仅是被HTML文件引用，而并没有包含在HTML文件中。HTML文档实际所做的工作就是为网页浏览器提供基于文本的可识别指令集。

接下来你会看到，它是如何通过标签来实现各种功能的，比如通过标签在浏览器中显示图片，添加换行符等。而在下一讲，我们还将探讨用于控制HTML样式的CSS（层叠样式表）规则。而现在你只需理解HTML是为浏览器提供指令集的文件即可。

什么是标签

标签用于在HTML中标记页面上的特定元素，这样浏览器就能按要求进行显示。标签的样式如下：

这一对是HTML标签。整个HTML文档都要包含在该标签内。你可以看到，所有标签都以小于号开始，以大于号结束。它们之所以这样命名，部分原因正是由于这些符号看起来像是标签。

你还会发现，起始标签中仅包含HTML术语，而结束标签中的HTML前还有一个/， 这个/表明它是结束标签。HTML标签会告诉浏览器文档以＜html＞为开头，以＜/html＞为结尾。其他标签也大都如此，比如你想加粗文字时可能会用到下面这个标签：

注：还有其他方法也可以加粗文本，应注意不同方法之间的差异，这些差异有时会非常重要。

还有这样的标签：

你可能已经看出来了，这是一个图片标签，顾名思义它的作用是让浏览器显示图片。与其他标签相比，图片标签有两处显著的差异。

其一，它是一种自关闭标签，在开始标记和结束标记之间没有任何多余的东西，因此它不需要结束标签。不过你会发现图片标签的结尾处也有一个/，其实这就算是它的结束标记了。而实际上即使不在标签末尾添加/，浏览器也能正确进行识别。

其二，图片标签中包含有一些属性，如src="" 和height=""，这些属性中携带了更多的信息，不过各项属性的重要程度不尽相同，其中只有源属性(src)是不可或缺的。

src=" image.jpg "表明我们想要显示的图像文件是image.jpg。这里给出的仅仅是文件名，浏览器会去存放HTML文档的位置寻找该图片。

而假如你把图片存放在一个名为image的文件夹，image文件夹又与HTML文档同目录。此时，你便可以把scr设置为“images/image.jpg”，这里的/表明图片文件在某个文件夹内。如果你想从外部网络上加载图片，那也没问题，只要把scr设置为图片的网络地址即可（如http://website.com/image.jpg）。

图片标签的其他属性定义了图片的高度和宽度。虽然只有scr属性是必须属性，但是定义图片的高、宽属性也很有必要。因为如果不进行定义，浏览器就不知道要为图片预留多大空间，这样就可能造成整个页面混乱不堪。

想快速查询常用标签？查看 标签小贴士 。

基本的HTML文档结构

现在，你已经了解了标签的基本结构，接下来我们再看看HTML文档的基本结构。下面显示的是一个最基本的网页，没有任何附加的东西，但尽管如此它一样运行得很好，很简洁。下面我们就来看看它的基本构成：

上图中的HTML标签内还嵌套有HEAD标签和BODY标签。HEAD标签中通常包含：页面标题，CSS样式，和其他一些元数据。不过这些信息并不一定直接显示在页面上，例如页面标题的显示位置一般是在浏览器窗口或标签上。

而BODY标签的内容都将显示到页面上，如文字，图片和多媒体信息等。该HTML文件在网页浏览器（只需双击html文件或拖曳到浏览器窗口）中打开后显示如下：

如示例所示，BODY标签中还包括一些其他信息。它包含有一个ID为header（标题）的DIV标签。DIV标签用来包含文字，图象等元素，这些元素可以用CSS进行渲染。CSS的相关内容将在下一讲介绍。

标题DIV标签的内部是一些文本。其中有部分文本在H1标签内。H1，H2，H3，H4，H5和H6标签都用于定义标题文字大小，H1最大，H6最小。标题在默认情况下是加粗的大字体文本，不过你可以通过CSS给它们添加样式。因为示例中的HTML文件不包括CSS样式信息，所以标题仅显示为加粗效果。这种效果和我们这篇文章的章节标题类似。

标题的下面是一行规则的，无样式文本，在多数浏览器中它们将显示为12磅的Times New Roma字体。而如若适当添加CSS样式，它们的样式也可以进行改变。

以上就是今天要讲的HTML基础知识。在下一讲中，我们将继续讨论层叠样式表——CSS。之后，还会综合运用这些知识来制作一个网站，另外还会提供一些额外的资源来帮助你了解更多的网页制作内容。下期再见！

来源: lifehacker