HTML5 和 CSS3 第 1 部分：编写您的第一个代码

Tim Corey

4.93/5 (38投票s)

2014年3月27日

CPOL

19分钟阅读

47676

开始学习 HTML 和 CSS，不再迷茫。

引言

如今，每个人都在谈论 HTML5 和 CSS3。您想了解更多，但似乎越学越远。您最初只想学习如何制作一个简单的网页，不知不觉中，教程告诉您，您需要了解 HTML、CSS、JavaScript、Bootstrap 和 Git 才能入门。您发现，这些主题中的每一个似乎都有自己需要学习的一系列主题才能入门。不知不觉中，您就感到不知所措，想要放弃。

如果这描述了您，请不要害怕，您并不孤单。我曾经历过，我知道那种感觉。这就是为什么本教程与众不同。我的重点是陪伴您从一开始就走到一个让您感到自在地独立编写 HTML 和 CSS 的地方。在此过程中，我会指出各种分支。我会为您提供有关它们的初步信息，以便您知道它们是什么以及如何开始。但是，我们将专注于让您快速掌握 HTML 和 CSS。这些文章将帮助您达成目标。

基础

让我们从头开始。HTML（超文本标记语言）在技术上并非编程语言。相反，它最初是显示文本、图像和其他类型数据的一种方式。随着时间的推移，该标准得到了开发和完善，以扩展 HTML 的功能。这些变化导致了 HTML 规范的重大修订。最新的规范仍在最后定稿中，它是 HTML5。负责 HTML 规范修改的组织称为 W3C（万维网联盟）。

是不是很枯燥？在我们深入探讨 CSS 的历史之前，让我们退一步，弄清楚到目前为止这意味着什么。基本上，HTML 最初是作为研究人员之间共享文档的一种方式而开发的。在早期阶段，它只不过是微软 Word 的一个非常基础的手动版本。您可以加粗文本、斜体、添加图片以及执行其他基本的文档“标记”操作。很多人忽略的是，HTML 的这种简单基础至今仍然存在。这就是我们将要从您开始的地方。我们可以在几分钟内取得快速的胜利，您将真正看到进展。所以，请坚持下去，我们将继续学习 CSS 的基础知识，然后我们将直接深入。

CSS（层叠样式表）是一种修改 HTML 页面外观的方法。实际上，CSS 不必仅应用于 HTML，但这是它最主要的应用方式。就像 HTML 一样，CSS 也经历了多次迭代。与 HTML 规范一样，CSS 规范也由 W3C 维护。目前，CSS3 正在最后定稿中。

这样我们就有了一个对 CSS 起源的了解，但它实际做什么呢？我很高兴您问了。CSS 的设计目的是将您的设计与内容分离。您的内容放在 HTML 中，然后 CSS 使内容看起来更美观。由于这种分离，您可以轻松地更换网站的外观，而无需更改结构或内容。

您现在可能已经注意到，HTML5 是 HTML 的最新修订版，因此称其为 HTML 完全可以接受。CSS 也是如此，因为 CSS3 仅指定了 CSS 规范的最新版本。总的来说，当我们讨论 HTML 和 CSS 时，我们指的是规范的最新版本。

浏览器

浏览器的作用是解释您提供的 HTML 和 CSS。这似乎是一项简单的任务，尤其是因为有明确的规范。不幸的是，事情并非如此简单。每个浏览器都必须弄清楚如何最好地实现规范中的功能。它们还必须弄清楚要实现哪些潜在的即将到来的规范。例如，HTML5 和 CSS3 尚未完成，但主流浏览器目前都支持规范中的大部分功能。这意味着浏览器开发人员有时必须猜测哪些功能将被批准以及它们将如何工作。其他时候，浏览器开发人员会决定在其浏览器中添加一项功能，从而实现技术飞跃。如果该功能成功，其他浏览器开发人员也可能会实现该功能，并且它可能会出现在规范中。

所有这些都说明了浏览器是不同的。这些差异会导致您的网页在不同的浏览器中看起来不同。不过，请不要担心，这些差异大部分都是微小的，我们将讨论如何解决这些差异。届时，我们还将介绍有助于指出潜在痛点的资源。

入门

好的，就这些。我们完成了介绍，准备好动手实践了。这始终是我最喜欢的部分。所以，这是前进的计划：

我们需要设置我们的开发环境。
我们需要快速了解开发环境的基础知识。
我们构建一个基本的“Hello World”网页（太棒了！）。
我们拆解网页以识别所有部分。

这将帮助我们顺利开始。从那里，我们将进入更多的 HTML 标记，然后我们将混合我们的第一个 CSS，看看它如何开始改变事物。

设置我们的开发环境

开发环境是一个非常私人的事情。每个人对哪个 IDE 是最好的都有自己的想法。HTML 和 CSS 不需要编译（像 C# 和其他语言那样）。这极大地扩展了您可用的编辑器选项。这意味着即使是记事本也是一个有效的 HTML 和 CSS 编辑器。在本教程中，我们将使用 Microsoft 的 Web Matrix。原因有很多。首先，它是免费的。其次，它附带了 IIS（Internet Information Server）的精简版，我们使用它来运行我们的网页。这使得测试我们的网页更加容易。第三，您可以使用 Web Matrix 开发多种不同的 Web 语言（JavaScript、PHP 等）。这意味着您可以为多个类似的任务使用相同的编辑器。我发现，当我只需要学习一个编辑器时，我学习它的效果比我不断切换要好。

尽管如此，您可以随意使用任何您想要的编辑器。有些屏幕截图可能不相关，但总的来说，本教程将与您选择的任何编辑器配合使用。本着这种精神，以下是一些流行的推荐：

JetBrains 的 WebStorm（购买需 49 美元）
Eclipse（免费）
Sublime（购买需 70 美元）
Aptana Studio 3（免费）
Visual Studio Express 2013 for Web（免费）

操作步骤 - 安装 Web Matrix（或您选择的 IDE）。安装 Web Matrix 时，只需接受默认设置。这将设置您所需的一切。

Web Matrix 快速导览

对于已安装 Web Matrix 的各位，让我们看一下基础知识。当您首次打开 Web Matrix 时，您会看到以下屏幕：

选择“新建”选项，然后选择“空站点”。

现在您有了一个空的站点，可以从中构建您的网站。

这款 IDE 的优点是不会让人感到困惑。在您开始的页面上，顶部有三个菜单选项卡。我们不会使用第二个和第三个选项卡。第二个选项卡（远程）用于发布到远程服务器。当您想将完成的网站发布到您的 Web 主机时，可以使用它。第三个选项卡（源代码管理）是您可以为该项目配置 git 或 TFS 的地方。源代码管理本身就是一个完整的课题。它是一个非常棒的资源，在理想情况下，您应该知道如何使用它。然而，我们才刚刚开始学习 HTML 和 CSS，我们不想偏离主题。只需注意，这是一个您将来想进一步了解的课题。不过，不了解它并不会阻碍您的 Web 开发。

在“主页”菜单选项卡（已打开的选项卡）上，我们只会使用几个选项。从左侧开始，有站点控件，包括运行、发布和重启。这是我们的 Web 服务器（IIS Express）的控件。Web 服务器是托管网站并允许其在浏览器中正确查看的服务器。这是安装 Web Matrix 的好处之一（它附带了一个 Web 服务器）。我们通常的做法是更改站点的修改，然后按“运行”按钮在浏览器中查看站点。如果 Web 服务器出现问题，您可以随时按重启或停止/启动按钮。接下来是文件控件。这里的关键选项是“新建”按钮。我们将通过它添加所有文件和文件夹。菜单选项卡上的其他所有内容要么不言自明，要么我们不使用它。

创建我们的“Hello World”页面

准备好构建您的第一个网页了吗？我们开始吧。按“新建”按钮创建一个新文件。选择文件类型时，选择 HTML。在按“确定”之前，请确保将文件命名为“index.html”。

我们选择 index.html 这个名字是因为 Web 服务器会查找某些文件名作为网站的入口点。通常，它们会查找 index.html、index.htm、default.html 和 default.htm。虽然这意味着我们可以将页面命名为 default.htm，但目前公认的标准入口点名称是 index.html。当您将页面命名为 index.html 时，当没有明确指定页面时，它将是默认加载的页面。这意味着 index.html 将是我们的主页。

当您的页面创建完成后，它默认包含以下 HTML：

<!DOCTYPE html>

<html lang="en">
   <head>
      <meta charset="utf-8" />
      <title></title>
   </head>
   <body>

   </body>
</html>

这是网页的基本骨架。我们将回过头来详细分析每一行，但首先，让我们集中关注一个部分：body。HTML 主要由“标签”组成。大多数标签都有一个开始标签和一个结束标签。例如，<body> 是一个标签。它的结束标签是 </body>。注意 body 前面的斜杠。每当您在标签名称前看到此斜杠时，您就知道这是结束标签。当您遇到像 body 这样的标签对时，开始标签和结束标签之间的所有内容都在该标签内。这意味着，如果我们把一些东西放在 body 标签之间，那么这些东西就会出现在我们页面的 body 部分。

在我们的例子中，我们想开始成为 Web 开发者，所以让我们在 HTML 页面的 body 中放入一些内容。在开始和结束 body 标签之间输入“Hello World”（不带引号），如下所示：

   <body>
      Hello World
   </body>

就是这样。现在按左上角的“运行”按钮来保存此页面并在浏览器中运行它。完成后，我们应该会看到类似以下内容：

不是很壮观，但这是个开始。恭喜您，您刚刚创建了您的第一个网页。

拆解一个基本网页

现在我们已经初步了解了，让我们回头更详细地看看 HTML 标记：

<!DOCTYPE html>

<html lang="en">
   <head>
      <meta charset="utf-8" />
      <title></title>
   </head>
   <body>

   </body>
</html>

第一行是一个特殊的指令，称为 DocType。此指令告诉浏览器该页面是基于哪个 HTML 规范构建的。还记得我说我们目前处于 HTML5 吗？好吧，显然随着规范的变化，标签及其用法也发生了变化。为了防止新规范破坏现有页面，DocType 用于标识用于构建页面的规范。DocType 现在实际上不再用于此目的。现在，我们包含它只是为了表明该页面符合最新标准。如果您不包含 DocType，您的页面将以“Quirks”模式呈现，浏览器将使用它拥有的最旧规范来呈现您的页面。这里的要点是，您需要包含这一行，但永远不需要更改它。

接下来是“html”标签。这个标签很有趣，因为我们还引入了一个属性。属性以某种方式扩展或作用于标签。在这种情况下，它指定 html 标签之间的所有内容的PRIMARY 语言是英语。html 标签本身包装了整个文档。除了 DocType，您不应该在 html 标签之外放置任何其他标签。

接下来是 head 标签。将 head 部分想象成电子邮件的标题。它包含了关于页面的所有信息。head 部分中的大多数项目都是可选的，但 title 是必需的。这引出了我们开始看到的另一个观点：标签可以相互嵌套。这里唯一需要注意的是，要以正确的顺序关闭标签。例如，您需要在关闭 head 标签之前关闭 title 标签。

我们看到的下一个标签是 meta 标签。这个标签因几个原因而有趣。首先，它有一个属性（charset）。其次，它没有结束标签。最后，它以斜杠结尾（提示：后两个是相关的）。让我们从头开始。Meta 标签通常是关于页面的信息。这些标签对用户不可见。相反，它们由浏览器、Web 服务器和其他机器读取器用于了解页面。在我们的例子中，我们告诉浏览器该页面使用 utf-8（Unicode）作为其字符集。这是一个广泛使用的字符集，可以处理大多数语言。其他 meta 标签可以提供网站的描述、作者等。默认情况下，至少包含此 meta 标签。不包含其他 meta 标签不会对您的网站产生负面影响。当您更多地了解 SEO（搜索引擎优化）和其他主题时，您可能会重新审视这一部分。

现在，meta 标签没有结束标签，但它以斜杠结尾。当您看到这个时，意味着该标签是自闭合的。对于 meta 标签，不应该有真正的结束标签。在 HTML5 中，某些标签技术上可以没有结束标签。然而，以前，当一个项目没有结束标签时，我们像您在此处看到的，在末尾用斜杠表示。HTML5 能够很好地处理末尾带有斜杠的项目。这意味着这是处理没有结束标签的标签的首选方法。

head 中的 title 部分是我们放置页面标题的地方（哇，真的吗？）。标题是显示在我们浏览器标题栏或选项卡标题上的内容。例如，如果我们修改标题如下：

      <title>Our First Website</title>

我们的网页现在看起来像这样（请注意顶部选项卡名称的变化）：

这结束了我们对 Web Matrix 在默认网页中包含的默认标记的考察。这也是我喜欢 Web Matrix 的另一个原因：默认模板非常小。随着您在 Web 开发方面的进步，您可能最终会想要在您的入门模板中包含更多内容，但目前来说，它保持模板精简，并将混淆降至最低。

总结一下，HTML 由标签组成。大多数标签都有开始标签和结束标签。嵌套标签需要在其父标签关闭之前关闭。HTML 页面的两个主要部分是 head 和 body。关于页面的数据通常放在 head 中，而页面数据通常放在 body 中。

其他 HTML 标签

这是一篇介绍性文章，所以我们不会深入探讨 HTML 标签。但是，当您刚开始时，有一些标签您应该知道如何使用。

标题标签

标题标签允许您识别网页的大纲。共有六个不同的标题标签（h1 到 h6）。每个标签都表示一个标题级别（h1 是最高的，通常最大，h6 是最小的，通常最小）。为了演示这一点，让我们修改页面，使其具有一个整体标题和几个部分标题，如下所示：

<body>
    <h1>Sample Hompeage</h1>
    <h2>Section One</h2>
    Hello World
    <h2>Section Two</h2>
</body>

由于“Hello World”只是内容而不是标题，所以我将其放在标题标签之外。这会将文档分成几个部分，如下所示：

注意字体大小的差异。这些是 HTML 的默认设置。

段落标签

当您有要显示在网页上的普通文本时，标准做法是将其放在段落标签内，如下所示：

<p>Hello World</p>

段落标签将文本保留在一起，并且（通常）在文本后换行。因此，如果我们像这样修改标记：

<p>Hello World</p>
<p>How are you?</p>

它会看起来像这样：

基本 CSS

现在您可能在想我们是不是忘了 CSS。我们已经构建了页面并且基本功能正在运行，但我们还没有用到 CSS。实际上，我们技术上不需要使用 CSS 来构建网页。但是，我们不应该丢掉它，让我们看看为什么要使用 CSS。

现在我们的网页非常普通。它是黑白的，单调乏味。CSS 是我们改变这一切的地方。让我们开始添加一个新文件。这次我们选择 CSS，并将其命名为 site.css。

这里的名称不像主页那样重要。我的习惯是称我的主 CSS 文件为 site.css。添加新 CSS 文件后，它将打开，您将看到我们 CSS 文件的默认起始文本：

body {
}

这是一个讨论 CSS 功能的好时机。CSS 以某种方式修改您 HTML 的部分。例如，它可以更改某个部分的字体，更改另一个部分的背景颜色，或者在某些标签周围添加额外的空间。所以，这意味着 CSS 规则有两个部分：受影响的项目以及您想改变的项目。看看我们上面的默认 CSS，我们看到“body”。这很熟悉。这个 CSS 规则会影响我们 HTML 页面的 body。现在，我们通常会在大括号内（要更改的内容）有东西，但目前我们的规则是空的。为什么我们不改变它，然后看看会发生什么。我将把 body（以及它里面的所有内容）的字体改为“Comic Sans MS”。

body {
   font-family: 'Comic Sans MS';
}

当您刷新页面时，什么都没改变。怎么回事？嗯，还记得我说过当 Web 服务器运行时，它默认运行 index.html 吗？它就是这样做的（这也是我们想要的）。但是，它不知道包含我们的 CSS 文件。我们需要将我们的 CSS 文件作为资源链接到我们的 index 页面。我们通过像这样链接到它来做到这一点：

<head>
    <meta charset="utf-8" />
    <title>Our First Website</title>
    <link rel="stylesheet" type="text/css" href="site.css" />
</head>

请注意第四行的“link”标签。这就是我们引入 CSS 文件的地方。现在这个标签上有一些属性。第一个属性 rel 指定了两个文档之间的关系。在这种情况下，我们说 site.css 是我们在此网页中使用的样式表。接下来是文档的类型。我们指定“text/css”来表示它是一个 CSS 文档。最后，href 是指向我们 CSS 文件的路径。在我们的例子中，由于这两个文件在同一级别（它们在同一个文件夹中），我们可以只指定文件名而无需输入路径。这也可以是一个指向外部站点的完整 URL。例如，如果我们的样式表存储在网络的其他地方。

现在当我们刷新页面时，我们会得到预期的（滑稽的）结果：

所以这就是 CSS 的基本原理。我们指定要影响哪个标签，然后在花括号内，我们指定要更改的项，格式为“项：值;”（font-family: 'Comic Sans MS';）。但这引出了一个问题：如果我们只想更改一个部分怎么办？例如，如果我们想更改我们的“Hello World”段落，而不是“How Are You？”段落？这就是属性发挥作用的地方。在 HTML 中，您可以向任何标签添加一个 id 属性来唯一标识它，如下所示：

<p id="intro">Hello World</p>
<p>How are you?</p>

然后，我们可以像这样仅针对第一个段落使用 CSS：

#intro {
   font-weight: bold;
}

请注意，井号（#）表示 id 标签。这将改变我们的页面，如下所示：

ID 标签很棒，但它们确实有一个缺点：它们只能使用一次。您不能有两个具有相同 id 属性的标签。这就是 class 属性让事情变得更容易的地方。class 属性可以应用于多个标签。例如，如果我们向页面添加第三个段落，我们可以像这样在最后两个段落上添加 class 属性：

<body>
    <h1>Sample Hompeage</h1>
    <h2>Section One</h2>
    <p id="intro">Hello World</p>
    <p class="sub-paragraph">How are you?</p>
    <p class="sub-paragraph">I am good.</p>
    <h2>Section Two</h2>
</body>

请注意，最后两个段落都有一个名为“sub-paragraph”的类。我们可以像这样为这个类创建一个 CSS 规则：

.sub-paragraph {
   color:  red;
}

请注意，sub-paragraph 前面的句点表示这是一个类名。现在当我们刷新我们的网页时，我们会得到以下结果：

CSS 可以修改很多不同的项目。虽然详细介绍所有这些超出了本文的范围，但我们将在未来的文章中更详细地介绍。在此期间，如果您想使用 CSS 修改某些内容，可以使用 Web Matrix 中的智能感知来查找选项，或者使用 Google。

结论

就是这样。在很短的时间内，您已经从一无所有变成了在浏览器中运行的实际网页。当然，它看起来并不多，但这是个开始。我们也没有陷入源代码管理、SEO 或 JavaScript 等所有周边事物。希望您学到了有用的东西，并且已经准备好在下次深入学习。