每个人的生活中至少有一小部分是在网络上度过的，无论你是以开发网页为生，还是想创建一个名牌网站，或者只是想更多地控制你的评论在网站上的显示方式，在你的指挥下理解HTML都是非常宝贵的。考虑到这一点，在我们关于如何创建网站的第一课中，我们将介绍HTML（web的主要标记语言）的顶级基础知识。

现在，使用社交媒体和个人登录页来组合一个web呈现是很容易的，但是如果你真的想创建自己的网站，你需要学习HTML和CSS。幸运的是，我们可以帮忙。

上面的视频将为您设置一个文本编辑器，引导您了解HTML文档的基本结构，并向您介绍一些您马上就想知道的有关HTML的内容。在本课结束时，您将知道如何创建一个基本的HTML页面。如果你忘记了什么或者想要一些额外的参考资料，请查看下面的文本。它将为您提供所需的有关HTML的基本信息。

你需要什么

• 用于编写HTML的纯文本编辑器
• 您可以选择web浏览器来测试您的HTML
• 希望加强你对网络工作方式的了解

正如你所见，你真的不需要太多的开始。

获取纯文本编辑器

为了编写HTML，您需要一个纯文本编辑器。这段视频使用了一个名为Textmate的纯文本编辑器，但这会让你付出代价。如果你想要一些免费的东西，你有很多很好的选择，包括Notepad++（Windows）、Kod（Mac）或Sublime Text for Windows和Mac。有几个其他的文本编辑器，所以你可以使用任何你想要的，只要它是一个纯文本编辑器。虽然纯文本这个词有点用词不当（原因就在这里），但它基本上是用来描述没有任何样式的文本，只是字母、数字和符号。这意味着没有粗体，没有斜体，没有不同的大小，等等，而您的纯文本编辑器可能有语法突出显示-一个功能，改变颜色的文本根据您键入的内容，使您的代码更容易阅读-这只是一些你会看到在您的文本编辑器，而不是保存到文件。基本上，您需要一个文本编辑器，它除了文本之外什么都不保存（这意味着您不想使用类似microsoftword的东西）。

注意：在本课中，您应该以.html作为文件扩展名保存在文本编辑器中创建的所有文件，例如，“my\u first\u web\u page.html”。您可以在选择的纯文本编辑器中编辑.html文档，但也可以在浏览器中查看它。当您在浏览器中打开它时所看到的内容将与在文本编辑器中打开时所看到的内容非常不同。

什么是html文档(an html document)？

如果您阅读了上面的部分，您可能已经猜到代表超文本标记语言的HTML只是一堆保存为文档类型的文本，您的浏览器将其标识为使用HTML。如果您在网页上看到一个图像，它只是在HTML文档的文本中引用，而不是作为文件的一部分包含在物理上。HTML文档真正做的就是提供一组web浏览器可以解释的基于文本的指令。它通过将页面的文本封装在标记中来实现这一点，稍后我们将进一步了解。它还使用这些标记告诉web浏览器执行诸如显示图像、添加换行符等操作。更进一步说，HTML可以使用CSS进行样式化，CSS代表级联样式表，我们将在下一课中学习。现在，只需理解HTML是一组您将要编写的浏览器指令。

什么是标签(tags)？

标记在HTML中用于指定页面上的某些元素，以便web浏览器知道如何呈现它们。下面是一组标记的外观：

上面的标签是HTML标签。整个HTML文档都放在这些标记中。所有标记以小于符号开始，以大于符号结束。它们被称为标签，部分原因是这些符号使它们看起来像标签。开始标记只是在里面有一个术语HTML，但是您会注意到结束标记在术语HTML之前有一个/。/表示结束标记。此标记告诉您的web浏览器，第一个HTML标记是HTML文档的开始，第二个/HTML结束标记是结束。大多数标签都是这样的。例如，如果要将文本加粗，可能会看到以下内容：

注意：还有其他方法可以使文本加粗，所以一定要看一个完整的解释，因为这些差异有时可能是非常重要的视频。

您还会看到如下所示的标记：

上面的标签是图像标签。您可能已经了解了这一点，但它的工作是显示图像。这个标签有两个值得注意的不同之处。首先，它没有结束标记。这是因为img标签是一个自动关闭标签。它不需要结束标记，因为在开始标记和结束标记之间没有任何东西。但是，您会注意到img标记末尾有一个/，这表示结束。在HTML的早期，你不需要把它/添加到图像标签中，从技术上来说，你仍然不需要，但它是正确的形式。您将注意到的另一个区别是标记有一系列属性。属性是src=“”和height=“”之类的东西，它们包含描述有关标记的更多信息；对于img标记，source（src）属性总是必需的。

src属性指定要显示的图像文件是image.jpg。因为我们只是列出文件名，所以浏览器会假设我们将图像文件保存在与HTML文档完全相同的位置。如果有一个名为images的文件夹与HTML文档放在同一个位置，并将图像保存在其中，那么应该将src设置为“images/image.jpg”，因为/表示我们要进入一个文件夹。如果您想从外部网站加载一个图像，您只需输入图像的完整URL（例如）。其他属性只是指定图像的高度和宽度。图像标记只需要src属性，但是如果不指定图像的高度和宽度，浏览器将不知道要保留多少空间，并且在加载时会不断重新调整页面。这看起来有点奇怪，所以最好在img标签中指定高度和宽度。

对于文档中可以使用的一些基本标记元素的快速参考，这个备忘单是一个很好的开始。

基本html文档的结构

现在，你有了基本的标签结构，让我们来看看一个基本的HTML文档的结构。您应该知道这是一个非常基本的外观，并没有包含您可能在完全开发的HTML文档中找到的所有内容，但是它工作得很好，并且保持了良好和简单。基本结构如下：

您会注意到在HTML标记中有HEAD和BODY标记。HEAD标记封装了不一定会直接显示在页面上的信息，例如页面标题（在web浏览器上显示为窗口或选项卡标题）、CSS样式和其他元数据。BODY标记封装了将在页面上显示文本、图像和富媒体的信息。在web浏览器中打开的结果HTML文档（只需双击保存的文件或将其拖到浏览器窗口中）如下所示：

从示例中可以看到，body标记中包含一些内容。首先是一个ID为header的DIV标签。DIV标签用于包含一些内容，因此您可以使用CSS对它们进行样式设置和移动。当我们在下一课深入研究CSS时，您将了解更多。

在header DIV标签中有一些文本。文本的第一部分在H1标记中。H1、H2、H3、H4、H5和H6标记都用于创建标题文本。H1最大，H6最小。默认情况下，它们会产生粗体、较大的文本，但您可以使用CSS以任何方式设置它们的样式。因为这个HTML文档没有CSS样式的信息，H1标记将使文本My Page看起来粗体。这种效果与您在本文中看到的大标题文本非常相似。

下面的H1文本只是一些常规的，没有样式的文本。大多数浏览器以12磅的****新罗马字体呈现未设置样式的文本。当你开始添加CSS样式时，你可以通过设置一个默认样式来设置这个文本的样式。

这就是你真正需要知道的基本HTML。在下一课中，我们将学习基本的CSS。在此之后，我们将结合这些技能来创建一个网站，然后使用其他资源来帮助您了解更多关于网站创建的知识。明天见！

你可以在Twitter和Facebook上关注这篇文章的作者adamdachis。如果你想联系他，推特是最有效的方式。