HTML5 和 CSS3 新手指南：编写你的第一个代码

Akinmade Bond

4.90/5 (13投票s)

2014 年 3 月 30 日

CPOL

13分钟阅读

61363

学习 HTML5 和 CSS3 的入门文章。

HTML5 简介

HTML 是超文本标记语言的缩写。 HTML 是用于构建和呈现 WWW 内容的标准，换句话说，它是编写网页的语言。 HTML5 是 HTML 的最新且功能最完善的版本，由 WHATWG 于 2004 年开发，用于取代 HTML 版本 4.01。

将鼠标悬停在大写缩略词上可查看其完整含义。这是使用我们稍后将讨论的 HTML 标签（<abbr>）完成的。

HTML5 与 XHTML 和 HTML 4.01 兼容，并且比两者都更容易编写。作为一个开放标准，HTML5 融合了 Web 的一些最佳特性：它适用于任何地方，任何拥有现代浏览器的设备上，并原生支持视频和音频播放、拖放功能、允许用户在没有互联网连接时也能与 Web 应用交互的离线功能、3D 图形和动画、MathML 等，其中大部分在早期版本的 HTML 中需要 Adobe™ Flash、Microsoft™ Silverlight 或 Google™ Gears 等插件。

浏览器是用于显示网页（解析标记）的程序。现代浏览器是支持 HTML5 功能的最新浏览器，速度更快，安全性更高。最新版本的 Internet Explorer、Mozilla Firefox、Apple Safari、Google Chrome。现代浏览器对 Web 的发展至关重要，因此，请花点时间更新您的浏览器 – 关于浏览器和 Web 的 20 件事

然而，并非所有浏览器都支持 HTML5 的所有功能 – HTML5 测试

CSS3 简介

CSS 是层叠样式表的缩写。 CSS 为程序员提供了一种简单有效的方式来定义网页的布局，并使用颜色、圆角、渐变和动画等设计元素来美化页面。使用 CSS，我们可以在几分钟内完全改变网页的外观，而无需触碰标记。本质上，CSS 控制着内容如何呈现给网页浏览器。

图片由 Christoph Niemann.com 提供

CSS3 与... 你猜对了，也是 CSS 版本 3，它比以前的版本有更多的功能，允许 Web 开发人员使用 CSS 单独轻松地执行动画和其他操作，并且代码量比其前代产品少得多。 CSS 文件具有 example.css 扩展名，并在您的 HTML 代码中引用该文件，浏览器会加载该文件来呈现内容。

CSS 是包含样式的样式表。这些样式不一定非要放在外部文件中。它们也可以内联使用，即直接在 HTML 文件中使用。稍后我们会看到如何实现。但是，建议将大型样式保留在外部样式表中。

HTML 与 CSS 有何不同？

简单来说，HTML 告诉 Web 浏览器要呈现的内容，而 CSS 告诉 Web 浏览器如何呈现它。简而言之，HTML 告诉浏览器创建一个标题，CSS 告诉浏览器如何显示标题，例如字体、颜色等。在语法上，HTML 的语法与 CSS 完全不同。

文本编辑器或编写代码的地方。

编辑器是一个旨在执行编辑功能的程序。您将在此处编写 HTML5 标记和 CSS3 样式，以便浏览器显示。大多数 OS 都自带编辑器（Windows OS 上的记事本和写字板，Mac OS X 上的文本编辑器）。

虽然您可以在操作系统的默认文本编辑器中编写 HTML 标记和 CSS 样式，但大多数设计师更喜欢使用更友好、更易于使用的编辑器，如 Mac 和 Windows 的 Sublime Text 或 Windows 的 Notepad++，它们提供行号、语法高亮等功能。要开始编写 HTML 代码，您应该下载其中一个编辑器，或者检查您当前使用的编辑器是否令您满意。

还有其他高级编辑器，如 Microsoft Visual Studio、Adobe Dreamweaver、JetBrains WebStorm，如果您需要高级功能。

编写 Web 内容时，文件扩展名很重要。HTML 文件具有 .html 或 .htm 扩展名，CSS 文件具有 .css 扩展名，因此，在保存 HTML 文件时，应将其保存为 example.html 或 example.htm，但请保持一致，两种文件在浏览器中都被视为不同。建议设置您的操作系统以显示所有文件扩展名。

编写代码

打开您的编辑器并输入以下内容

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My HTML5 enabled web page</title>
</head>
<body>
    <!-- This is a comment -->
    Hello World
</body>
</html>

要获得语法高亮

Notepad++：点击“语言”菜单，选择 H → HTML

Sublime Text：点击 View → Syntax → HTML，或者在程序右下角，在“Tab Size”旁边，点击“Plain Text”并选择 HTML

上面的代码是一个骨架 HTML5 模板，我们稍后将逐行讨论。在尖括号 < 和 > 中，空格前的第一个单词或字母（或字母组合）称为标签，用于告诉浏览器显示什么。其余的单词，用空格分隔，位于等号 (=) 左侧和第一个 > 字符之前，称为属性。用空格分隔的单词或数字，位于等号 (=) 右侧，称为值。第一个尖括号 <> 和最后一个尖括号 </> 之间的字符集称为标签内容。在具有与第一个单词相同的名称的 </ > 之间的字符集称为闭合标签，它不应包含属性。

信息量有点大，也许这会让它更简单……

<article class="breaking-news" data-item="first">This text is too short to make the news.</article>

在这里，article 是标签名。这部分告诉浏览器您想创建一个 article。

Class 和 data-item 是属性，它们是关于标签名以及浏览器如何处理它的额外信息。例如，class 属性告诉浏览器如何使用提供的样式来标记内容。 class 属性的值是 breaking-news，而 data-item 的值是 first。大多数时候，属性及其值对用户是不可见的。

字符串“This text is too short to make the news.”是标签内容，这是页面由浏览器渲染后通常对用户可见的部分。内容也可以包含另一个 HTML 标签，这称为嵌套。

最后，</article> 是闭合标签，不应包含任何属性。这有效地告诉浏览器内容结束了。

HTML 标签数量众多，本章只能介绍其中一部分。有关所有 HTML 标签的完整列表，请访问 W3C，有关 HTML5 中新增标签的完整列表，请参阅 W3C HTML5 Elements，有关更多示例和某些元素的用法，请参阅 SitePoint HTML reference。

在另一个 HTML 标签的内容部分中的 HTML 标签应以与其创建相反的顺序关闭。否则会导致行为异常和内容显示不正确。

例如

正确嵌套

<body><div><p><a href="http://www.google.com">Google</a> is the world's most used search engine.</p></div></body>

不正确的嵌套

<body><div><p><a href="http://www.google.com">Google is the world's most used search engine.</p></a></div></body>

不正确的嵌套示例是因为 <a> 标签是在 <p> 标签之后创建的，因此应先于 <p> 标签关闭，而不是在其之后。

现在，让我们检查一下我们刚刚编写的代码。

第 1 行； <!doctype html>：这一行通知浏览器该文档的其余部分使用的语法是 HTML5，就像文件扩展名与计算机上的程序关联一样。这是 HTML5 的新文档声明，与旧的繁琐声明方式不同。

HTML 4.01 中的旧写法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

或者在 XHTML 1.0 中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

新方法更简单易记，对吧？对吧？

第 2 行； <html lang="en-GB">：这一行告诉 Web 浏览器这是一个 HTML 页面的开始。请注意，此标签在第 11 行关闭，所有其他 HTML 标签都嵌套在其内部。

属性 lang="en-GB" 定义文档的主要自然语言。自然语言，我的意思是人类语言，例如法语、泰语或英语。这有助于屏幕阅读器，因为例如“six”一词的发音在法语和英语中截然不同；这也有助于搜索引擎。定义文档的主要语言是个好主意，特别是当您为国际受众编写页面时。 - 设置文档的主要语言。您还可以使用 dir="rtl" 属性将文档的方向从默认的从左到右更改为从右到左。

语言标签总是定义人类用于交流信息的语言。计算机语言明确排除在外。要帮助选择语言标签，请参阅 W3C 选择语言标签

第 3 行：head 部分包含头部信息或元信息。这些信息向浏览器描述您的网页，用户看不到。您可以使用头部部分指定诸如网页的字符编码、作者信息、页面到期时间、页面刷新时间、内容描述、搜索关键词、脚本位置、CSS 文件位置等信息。该标签在第 6 行关闭。

第 4 行：<meta charset="utf-8"> 此标签用于设置网页的字符编码。 UTF-8 Unicode 是一项大胆的尝试，旨在创建一个包含地球上所有合理书写系统甚至一些虚构的（如克林贡语）的单一字符集 – 所有软件开发人员绝对、肯定必须了解的 Unicode 和字符集的最基本知识。因此，声明此项以确保您的 HTML 具有完整的国际化功能是个好主意。

请注意，meta 标签没有内容和闭合标签。这些类型的标签称为空标签或自闭标签。例如 img、br 等，我们稍后会讨论。

第 5 行：<title>...</title> 用于指定文档的标题。它通常显示在浏览器窗口或标签页的顶部。此标签的内容是用户看到的内容，目前不接受属性。

第 7 行：<body>...</body> 包含对用户可见的内容。您可以在此处编写演示文稿的所有内容（视频、音频、图像、段落、标题等）。

第 8 行： 这是一个 HTML 标签，用于指定注释。注释对用户不可见，也不会被浏览器处理，但可用于代码中以提高可读性。请注意，注释标签内的空格无关紧要，以下都是有效的 、。您可以以任何您想要的方式编写它们，但请务必始终正确关闭注释标签；使用 -->

请注意子元素如何相对于父元素缩进。这不是强制性的，但它使您和其他查看和/或使用您代码的人更容易阅读。也就是说，大多数开发人员倾向于将子元素与父元素保持缩进。

好的，现在让我们在浏览器中看看我们刚刚写的东西，将文件保存为 hello.html 或您喜欢的任何文件名，但正如我们之前讨论的，.html 部分至关重要，并且必须是文件名的最后几个字符。您应该看到这个

要查看您的代码以及浏览器中的任何其他 HTML 代码，请按 Control + U。学习的最佳方法是阅读他人的代码以及它们如何在浏览器中工作。如果您不知道某个特定命令是如何显示的，大多数现代浏览器都有一个名为检查元素的便捷工具，右键单击页面并在菜单中选择它。

您可能有的问题

标签和属性都必须是小写字母吗？

问题是，HTML5 很灵活，您可以选择以任何您想要的方式编写标签和属性。 <Head>、<head>、<HEAD> 和 <hEAd> 都是一样的，同样 Class、class 和 CLASS，但通常的约定是使用小写字母编写标签和属性。

我必须使用双引号来包含属性值吗？

您可以两者都使用。单引号 ' 和双引号 " 都是有效的。事实上，HTML5 允许您在编写不包含空格的属性值时完全省略引号。

如何编写 <> 而不让浏览器认为是 HTML 标签？

像这样的文章一直在向您展示不同的标签，而浏览器并没有认为它们是标签，对吗？如果您必须在 HTML 中编写尖括号或键盘上没有的任何其他字符，您将不得不使用 HTML 实体或字符实体。下面是常用 HTML 实体的表格。

字符	实体名称	实体编号
<	`<`	`<`
>	`>`	`>`
©	`©`	`©`
®	`®`	`®`
™	`™`	`⊊`
"	`"`	`"`
(空格)	` `	` `
&	`&`	`&`

示例

Microsoft® Visual Studio ™ 编写为 Microsoft ® Visual Studio ™

2 > 3 编写为 2 > 3

在您的代码中，2 <1 编写为 在您的代码中，2 < 1

因此，要在 HTML 代码中编写任何字符，您需要编写实体名称或实体编号中的那个。注意，实体名称是区分大小写的，您必须精确输入（它们通常是小写，但）实体编号在 ampersand (&) 符号后跟一个 #。

浏览器会删除文档内容中不必要的空格，您必须使用 HTML 实体（非断开空格）来保留空格（ ）。

有关 HTML 实体名称和编号的完整列表，请参阅 Free Formatter 实体列表

HTML5 元素

HTML5 在现有元素的基础上添加了新元素，这使得我们可以像之前讨论的那样轻松使用新的 Web 技术。

我们还知道 HTML 元素是这样编写的：<tag attribute="value">content</>。在某些情况下，内容和闭合标签不是必需的。

HTML 就像任何文字处理器一样，您可以创建标题和段落，插入超链接和图像，设置文本样式等。只是这一次我们将使用标签而不是命令。

要编写标题，请使用 <h1>、<h2>、<h3> 到 <h6>。例如

HTML5 元素写为 <h1>HTML5 Elements</h1>

HTML5 元素写为 <h2>HTML5 Elements</h2>

HTML5 元素写为 <h3>HTML5 Elements</h3>

要倾斜文本或强调文本，请使用 <i> 或 <em>。例如。

This Text is italicized 写为 <i>This Text is italicized</i>
This Text is emphasized 写为 <em>This Text is italicized</em>

要删除/划掉文本，请使用 <del>。例如。

~~This is no longer important~~ 写为 <del>This is no longer important</del>

要创建段落，请使用 <p>。例如

This is a paragraph 写为 <p>This is a paragraph</p>

要解释缩写，请使用 <abbr>。此标签使用 title 属性显示一个工具提示，解释缩写的含义。例如

HTML 写为 <abbr title="HyperText Markup Language">HTML</abbr>

我们将在另一篇文章中讨论其他标签，您可以使用提供的链接阅读更多关于 HTML 标签的信息。

在编写代码时避免使用已弃用的标签，这些标签将在未来版本中删除。

历史

2014 年 3 月 30 日 - 版本 1。