HTML5/CSS3 初学者指南 - 第 1 部分（共 12 部分）
4.83/5 (33投票s)
编写你的第一个 HTML 代码
系列文章列表
- 编写你的第一个代码
- 构建基础
- 为你的第一个网页添加样式
- 布局你的第一个网页
简史
HTML - 超文本标记语言
HTML 诞生于 1989 年，当时它被设计成用于新创建的万维网的发布语言。它采用了所有标记语言的方法，这些语言起源于经典的纸质出版，编辑们在那里“标记”手稿以进行修订。那时，HTML 并不是一个严格的定义，而更多的是关于如何在网络上传输和链接信息的想法。
在 90 年代早期，每个人都对网络产生了兴趣。不同的用户代理（用户代理是用于在特定设备上呈现 HTML 文档内容的软件，今天我们大多用“浏览器”来指代用户代理，我从现在开始也会这样做）随着 HTML 思想的略微不同实现而诞生（ENQUIRE、NeXT、HyperCard）。
随着兴趣的增长，网络的早期发明者正在寻找一种商定的标准化 HTML 方法。为了实现这一目标，第一个 HTML 标准（HTML+）于 1993 年创建。它基于众所周知的SGML。然而，HTML 虽然基于 SGML，但它并非(!)在所有方面都符合 SGML。
1994 年是 HTML 方面繁忙的一年。那一年在日内瓦举行了第一次万维网会议。会议期间，讨论了更新 HTML 标准的必要性。作为回应，ITEF 成立了一个工作组，开始流传即将发布的 HTML 2 的草案。同年，W3C 成立，代表那些投票支持开放标准的开发者群体。在各方的共同努力下，HTML 2 于 1995 年问世。HTML 2 奠定了我们今天所知的 HTML 的基础。
随着网络的巨大普及，1995年，浏览器制造商的权力日益增长。这以及ITEF工作组中成员数量极其庞大，促使标准化过程进行了重组。在W3C的协调和管理下，一个由浏览器公司代表和网络关键人物组成的新小组诞生了。这种决策模式至今仍在W3C的标准化过程中使用。由于这些变化，HTML 3标准的制定被放弃，并在两年后重新制定——HTML 3.2于1997年发布。
在浏览器大战期间，W3C 不断更新 HTML，并于 1999 年末发布了 HTML 4 标准。
这些标准的强大和成功可以从 HTML 4 和 HTML 5 之间的时间间隔看出——HTML 5 的第一个草案直到 2008 年才发布！HTML 5 旨在取代所有以前的版本（其中 HTML 2 及更早版本被声明为已弃用），同时提供完全的向后兼容性。
HTML 5 标准的当前状态是“候选推荐”（于 2014 年 2 月发布）——根据作者的说法，它将是成为“推荐”之前的最后一个版本…
尽管我们不会在本文中见到 HTML 5 的真面目，但重要的是要理解 HTML 5 不仅仅是超文本标准的新版本，它还是 W3C 为将网络开发提升到新水平所做所有努力的全球名称。它不仅包括 HTML 本身，还包括 CSS 3 和大量的 JavaScript 库。这种方法背后的主要思想是将浏览器提升到一个水平，使其能够开发出可以与桌面应用程序竞争的网络应用程序，而无需不同的（非标准）插件。
CSS - 层叠样式表
在开发 HTML 2 时，关注点分离的问题出现了。答案是 1996 年的 CSS 1。由于新的决策制定方式已经到位，W3C 能够在很短的时间内定义 CSS 1，而后续版本则花费了与 HTML 几乎相同的时间……CSS 2 于 1998 年，即 HTML 3.2 发布一年后发布。此版本经历了多次更新，直到 2011 年成为 CSS 2.1。这些更新的原因是用于显示网页的设备种类日益增多。
W3C 大约在 1999 年开始着手 CSS 3，但对于这个版本，他们采取了不同的方法。W3C 没有创建单一规范，而是将 CSS 分解成多个部分，并为每个部分单独定义推荐。W3C 还采取了一个前所未有的步骤，在 2005 年召回了所有已批准的推荐，进行第二次审查，并再次将其标记为“工作草案”。这样做是为了确保推荐的质量。
如今，CSS 3 的所有部分（超过 20 个）中，只有 7 个获得了“推荐”状态。
HTML 和 CSS 的用途是什么？
HTML 是一种标记语言，它使用标签（通常成对的开标签和闭标签）来实现“标记”部分。这些标签用于定义信息的内容（有时也定义布局）。理论上，HTML 可以用于几乎所有类型的内容，但实际上它几乎只用于——并成为了——网页的标准。
任何 HTML 标签的伪声明应如下所示
<tag-name [attribute-list]>[tag-content][</tag-name>]
例如，要将文本的一部分声明为段落，我们使用 P 标签，如下所示
<p>This is a paragraph about nothing.</p>
在我们的 HTML 文档中插入图像时，我们使用 IMG 标签
<img src="my_image.png" alt="It's me!">
对于每个标签，都有一个声明解释其使用方式。它是否可以、必须或不能有闭合标签。它是否可以、必须或不能使用属性等等。有关 HTML 标签及其使用方法的完整列表，请参阅：HTML 参考 - w3schools.com。
CSS 用于定义与其关联的 HTML 页面的外观（有时也包括布局）。通过 CSS，您可以定义内容（由包含的 HTML 标签标识）将如何呈现给最终用户。CSS 文件由分配给 HTML 标签的规则列表组成，这些规则使用选择器（这些选择器旨在识别一个或多个 HTML 标签）。由于 CSS 独立于内容（HTML），因此可以轻松地为不同的设备提供不同的格式。
CSS 规则可以这样定义
selector {
attribute-name: attribute-value [attribute-value [...]];
[attribute-name: attribute-value [attribute-value [...]];]
}
例如，Google Chrome 中 H2 标签的默认 CSS 声明如下所示
h2 {
display: block;
font-size: 1.5em;
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
重要的是要明白，在现代浏览器中，CSS 总是存在的。即使您不指定自己的 CSS（在本文中您也不会），浏览器也会提供一组基本规则，为每个 HTML 文档实现一些基本格式。
现在您可能会问，如何更改那些已经定义的样式呢？CSS 规则是根据优先级方案解释的，默认情况下，对于相同的选择器，新规则会覆盖旧规则。因此，由于第一个 CSS 是浏览器的，而您的所有规则都在其之后，所以您的规则能够改变默认设计。
要获取更多关于 CSS 的信息，您可以从这里开始：CSS3 简介。
布局问题…有时也会发生
在 HTML 的早期阶段（HTML 2 - 3.2），大多数布局都是使用 HTML TABLE 标签定义的（因为 HTML 是对设计一无所知的开发者的游乐场）。TABLE 标签能够将页面分解成不对称的区域，并制造出真实布局的假象。然而，这种混合关注点的方式并不令 W3C（以及新兴的设计师大军）满意，该组织推动使用 CSS 进行布局，尤其是在 CSS 2 问世之后。
我们将在后续文章中讨论这一点，但目前，您只需记住正确的布局方式是使用 CSS 而不是表格。
你需要什么？
对于简单的 HTML，您只需要一个文本编辑器（vim、记事本）和一个网络浏览器（IE、FF、Chrome）。然而，如今 HTML 很少单独用于真正的开发。它总是与一些 JavaScript 和某种服务器端技术（如 PHP 或 ASP.NET）配对使用。对于更复杂的开发，建议使用一些 IDE（适合您选择的环境）。此类工具的部分列表（由 CodeProject 成员编译）可以在这里找到：您的开发工具。
如果您选择某种 IDE 进行开发，该 IDE 将帮助并指导您如何存储和查看您的页面。但是，如果您选择简单的文本编辑器作为 HTML 开发的第一步，请记住：将 HTML 文件保存为 HTML 扩展名，将 CSS 文件保存为 CSS 扩展名。这将使您能够通过任何浏览器自动打开它们。
基础 HTML
HTML 不仅识别其标签的含义，还强制执行基本结构。最小的 HTML 页面必须包含文档类型声明、head 和 body。Head 反过来又必须包含 title 声明。
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
</body>
</html>
这段代码代表一个有效的，但完全无用的 HTML。它无用因为它什么都不显示。现在让我们添加有价值的内容。
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Introduction</h1>
<h2>The first decade</h2>
<p>History of the first decade...</p>
<h2>Later years</h2>
<p>What happened later...</p>
<h1>Why we doing it?</h1>
<p>Some explanation...</p>
<p>Extended explanation...</p>
<h1>Summary</h1>
<p>Summary...</p>
<h1>Contact details<h1>
<h2>Support</h2>
<p>123-123456789</p>
<h2>Development</h2>
<p>123-123456789</p>
</body>
</html>
上面的代码在 Google Chrome 浏览器中渲染此页面。
我们使用的标签...
现在我们将解释我们在前面的简单 HTML 示例中使用的基本标签。
DOCTYPE
DOCTYPE 是文档类型声明的缩写。它用作版本戳，告诉浏览器如何解释后续的 HTML 内容，并且它将始终是您代码的第一行。对于 HTML 5，它始终是 <!DOCTYPE html>。早期版本的 HTML 使用一些更复杂的其他字符串，您不需要了解它们，因为您现在只会使用 HTML 5！
<!DOCTYPE html>
HTML
HTML 标签是任何 HTML 文档的主要容器（根）。所有 HTML 文档（DOCTYPE 除外）都必须包含在 HTML 的开始标签和结束标签之间。在 HTML 标签内部，文档组织成两个强制性标签 HEAD 和 BODY。
<!DOCTYPE html>
<html>
</html>
HEAD
HEAD 标签是一个分组标签，包含所有所谓的“head 元素”。这些元素用于定义关于文档的信息。它可能包括元数据（例如，用于搜索引擎）、指向外部资源的链接（例如，CSS 文件）等。唯一强制性的“head 元素”是 TITLE 标签，它用于定义 HTML 文档的 title。
<!DOCTYPE html>
<html>
<head>
</head>
</html>
标题
TITLE 标签是强制性的，你必须有一个且只能有一个。没有它，HTML 文档将无效。它将包含一个人类可读的 字符串，作为浏览器和搜索引擎的文档标题。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
</html>
主体
BODY 是任何 HTML 文档的第二部分。它是用于定义 HTML 文档内容（“body 元素”）的所有标签的容器。令人惊讶的是，BODY 不是强制性的，并且在提供时可以完全为空。我相信 W3C 没有将其设为强制性，因为创建一个空的 HTML 文档没有多大意义，所以没有人会无缘无故地省略它，但如果他有充分的理由，它可以省略。然而，当它出现时，它必须是第二个元素——在 HEAD 之后——在 HTML 标签内部。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
标题
BODY 可以包含多个标签来标记内容，在这些标签中，标题标签用于创建标题，换句话说，为 HTML 文档内容创建标题级别（就像本文中一样）。标题由标签 H1 到 H6 表示，其中 H1 代表最重要的标题，H6 代表次重要的标题。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1></h1>
<h2></h2>
? </body>
</html>
段落
段落是所有文本内容的主要构成部分。它用于将文本分解成可读的块。在 HTML 文档中，段落是使用 P 标签创建的。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1></h1>
<h2></h2>
<p></p>
<p></p>
? </body>
</html>
示例代码
文章顶部的 zip 文件中的代码包含文章本身的 HTML 和 CSS。它主要使用我文章中谈到的那些标签。继续深入研究吧...
您可能还会注意到，当我解释标签的作用时，我添加了一个指向 w3schools.com 中相应页面的链接。这些链接可以为您提供有关该标签的更多信息。
摘要
我敢肯定您读完这一部分后会有更多问题而不是答案，但请耐心等待，请记住这只是十二篇文章中的第一篇，希望您最终能得到所有您需要的答案。