HTML5 & CSS3 新手指南 - 编写你的第一个代码
4.56/5 (15投票s)
开始网页创作。
引言
万维网（WWW）或简称Web已经成熟。对于地球上的许多凡人，尤其是数字原住民，最常见的日常活动之一就是网上冲浪。
作为日常的仪式，我们启动一个网络浏览器，在地址栏输入看起来像 https://codeproject.org.cn 的文本，然后等待网页加载到浏览器窗口。典型的网页包含文本、图像以及指向其他网页的链接。除了内容差异外，不同网站的网页在外观和感觉上也不同，以在网络上建立自己的身份。
如果你曾经想过这些呈现在你屏幕上的网页是如何被创建和以如此多样的方式呈现的，那么你来对地方了。让我们欢迎构建我们今天在任何浏览器上看到的许多网页的两个核心技术——HTML和CSS。
简而言之，HTML提供了脚手架，而CSS则为网页提供了面部治疗。俗话说：“一图胜千言”。这在图1中得到了最好的说明，通过比较应用CSS之前和之后的网页外观。
| 应用CSS之前 | 应用CSS之后 |
 |
 |
| 图1：应用CSS之前和之后 | |
想了解更多？继续阅读...
曾经
HTML的诞生
时间回溯到1989年，当时一位年轻有才华的CERN软件工程师Tim Berners-Lee发明了万维网。次年，他创建了奠定当今网络基础的三项技术。
- HTML：超文本标记语言。在网络上用于结构化、发布和链接文档的事实标准。
- URI：统一资源标识符。分配给网络上每个资源的唯一“地址”，以方便访问。
- HTTP：超文本传输协议。网络使用的通信协议，用于定义网页和消息的格式和传输方式。
顾名思义，HTML通过将文本用特定的预定义标签（例如<title>、<head>和<p>）括起来，来标记网页上的每个文本。任何浏览器在读取这些标签时，都知道如何正确显示被包含的文本。
随着网络的快速发展，新的HTML标签如<image>和<table>被添加进来以改善用户体验。<table>标签最初是为了数据制表目的而引入的，但后来被用于格式化网页布局。然而，这种混合表示和结构的方式后来被发现是灾难性的。
无政府状态
由于网络的流行，涌现了许多不同的浏览器。Mosaic、Netscape、以及后来的Microsoft纷纷进军浏览器市场，各自带来了自己的专有样式标签，以争取市场份额并满足网络开发者的需求。HTML开始偏离其作为纯结构提供者的原始根基。
20世纪90年代中期发生的浏览器大战给网络带来了混乱和困惑，令用户非常沮丧。使用专有标签的页面在竞争浏览器中显示不同或根本不显示是常见的抱怨。这种无政府状态导致了浏览器兼容性问题。
在20世纪90年代后期，万维网联盟（W3C）终于意识到必须采取措施来控制这种局面。他们决定将HTML净化回其作为结构提供者的原始角色，同时引入一项新技术来承担网页的表示角色。这是一个明智的举动，导致了CSS的诞生。
CSS的黎明
CSS的全称是Cascading Style Sheets（层叠样式表）。它是网络的表示语言。它通过为字体、颜色或布局分配值给相应的HTML标签来为网页添加样式。然而，CSS不仅适用于HTML，它也可以与任何基于XML的标记语言一起使用。
这种关注点的分离带来了许多好处。例如，可以将样式描述“层叠”到网站的不同页面，而无需在每个页面上硬编码相同的信息。换句话说，使用CSS极大地减轻了网站维护的负担。
此外，还可以为同一文档应用不同的CSS，以便在不同的环境中（如大屏幕、小屏幕或打印机）进行展示，极大地满足了用户的需求。
HTML5和CSS3
HTML5是HTML的最新标准，取代了之前的HTML 4.01。
HTML5是在W3C和Web Hypertext Application Technology Working Group（WHATWG）合作下诞生的。HTML5的创建考虑了以下目标：
- 减少对插件（如Flash）的依赖
- 用标记语言取代脚本
- 独立于设备和平台
阅读HTML设计原则有助于更好地理解HTML5为何是今天的样子。
至于CSS，其最新标准是CSS3，它与早期版本完全向后兼容。CSS3规范仍在W3C的开发中，最新版本是Cascading Style Sheets (CSS) Snapshot 2010（层叠样式表（CSS）快照2010）。
HTML编辑器
为了学习HTML的本质，我强烈推荐使用文本编辑器，如PC上的记事本、Mac上的文本编辑，或者任何开源文本编辑器，如Notepad++。在这个阶段，请避免使用任何承诺所见即所得（WYSIWYG）但实际上剥夺你真正学习机会的专业HTML编辑器。
现在就打开你的文本编辑器吧。
-
第一步——“认真”而“忠实”地将图2中的文本输入到文本编辑器中。我故意使用截图而不是文本来显示代码片段，以阻止任何复制粘贴的行为。我将在下一节再解释代码。
图2：编写HTML代码 -
第二步——创建一个新文件夹，例如“mysite”。在此文件夹中，使用.htm或.html文件扩展名保存你新创建的HTML文档。事实上，我建议在第一次打开文件时就创建这个文件夹并保存文件。（所以应该有一个第0步）。我选择的文件名为“hello.html”。
-
第三步——双击你的HTML文件，在浏览器中查看你的第一个网页（图3）。恭喜！你刚刚成功创建了一个HTML网页。
图3：在浏览器中查看 -
第四步——将你的文本编辑器和浏览器并排放置，并仔细比较它们。一方面，你看到你的HTML源代码；另一方面，你看到浏览器是如何解释和渲染它的。你看到包含在相应标签中的内容已显示在浏览器中，但标签本身没有。等等，有些地方似乎不对。为什么你“忠实”插入的额外空格和缩进没有显示出来？标题标签中的“Hello HTML”在哪里？你能找到它吗？继续阅读...
HTML基础
你可能已经注意到，HTML中的内容是包含在一对标签中的，例如<title></title>、<h1></h1>和<p></p>。让我们开始熟悉一些基本的HTML标签。
<!DOCTYPE>
任何HTML文档的第一行必须以<!DOCTYPE>标签开始。它告诉浏览器页面是用哪个HTML版本编写的，以便浏览器能够正确渲染。从这个意义上说，<!DOCTYPE>不是一个HTML标签。
HTML 4.01的<!DOCTYPE>看起来是这样的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
我们示例中的<!DOCTYPE html>将文档类型声明为HTML5，这是HTML的最新标准。它比其前身更简洁、更易读。
有关<!DOCTYPE>的更多信息可以在W3C找到。
<html>
<html>标签标志着HTML文档的开始，并且必须以文档的最后一行</html>标签关闭。
<head>
<head>开始标签和</head>结束标签之间的区域用作其他标签（如<title>、<script>、<style>和<meta>）的容器。
<title>
<title>开始标签和</title>结束标签之间的区域是放置HTML文档标题的地方。<title>标签的内容将出现在浏览器工具栏中。你可能已经注意到我们示例中的标题“Hello HTML”在你的浏览器工具栏上。当你收藏页面时，它也会显示为书签名称。
<body>
<body>开始标签和</body>结束标签之间的区域用作你在浏览器窗口中看到的可视网页内容以及其他HTML标签（如<h1>、<p>、<image>和<table>）的主要容器。
<h1>、<h2>、...<h6>
总共有6个标题标签，从<h1>、<h2>到<h6>。我们在示例中使用了其中4个，即<h1>、<h2>、<h4>和<h6>。它们必须带有相应的结束标签。浏览器会在每个标题的上方和下方自动添加额外的间距。它们的用法不言而喻。
<p>
我们使用<p>标签将网页内容分割和组织成段落。每个<p>标签都必须带有</p>结束标签。我们在示例中有3个段落。与标题标签一样，浏览器会在每个段落的上方和下方自动添加额外的间距。我在段落中故意插入了额外的空格，但它们没有在浏览器中显示出来。你可能会注意到，标签之间的缩进和额外空格也没有显示出来。信息很明确：“额外的空格被忽略”。
注意事项
现在是时候通过记录这些要点来总结今天的学习了。
- 额外的空格被忽略
- HTML标签用尖括号包裹，例如<html>
- HTML标签通常成对出现，但有少数例外
- 每个结束标签在其标签名前面都有一个斜杠，例如</html>
- HTML标签不区分大小写：<H1>与<h1>相同。W3C建议使用小写，我也一样。
- 在代码中出现印刷错误并不少见。One有效缓解查找错误痛苦的方法是通过正确的代码缩进，就像我的示例中所示。
- 最后但同样重要的是，我观察到最常见的错误之一是忘记添加结束标签。我的解决方案是：在写完开始标签后立即写上结束标签，之后你可以花时间插入标签之间的内容。
我们将暂停休息一下。