第一篇
基础篇
第2章
HTML5基础
第1章介绍了关于互联网的一些基础知识。制作网页时最基础的两个规范是HTML和CSS，它们在网页中起着不同的作用。本书正是围绕着这两个规范进行讲解的。本章先对HTML进行讲解，包括HTML的基本概念及一些简单的应用。此外，Visual Studio Code（以下简称VS Code）是目前流行的网页制作软件，因此本章还会对VS Code软件的使用进行简单的介绍。
通过本章的学习，读者将会清楚地了解HTML的作用，从总体上把握HTML，并熟悉VS Code软件的基本操作，为后面章节的学习打下基础。本章的思维导图如下。
本章导读
2.1
HTML5基础知识
知识点讲解
前面提到过网页的基础规范之一是HTML，其全称为hypertext markup language，译为超文本标记语言。读者应该先明确一个概念，即HTML不是一种编程语言，而是一种描述性的标记语言，用于描述超文本中内容的显示方式。例如如何在网页中定义一个标题、一段文本或者一个表格等，这些都是利用一个个HTML标记完成的。HTML最基本的语法就是：<标记>内容</标记>。标记通常是成对使用的，有一个开头标记就对应有一个结束标记，在开头标记的前面加一个斜杠“/”即可得到结束标记。当浏览器从服务器接收到HTML文件后，就会解释里面的标记，然后把标记对应的功能表达出来。
例如，在HTML中以<p>标记来定义一个文本段落，以<table>标记来定义一个表格。当浏览器碰到<p>标记时，就会把<p>标记之间的所有文字以一个段落的样式显示出来。
上面说的<p>标记和<table>标记都属于结构标记，也就是说它们用于定义网页内容的结构。此外，还有一类标记被称为“形式标记”，用于定义网页内容的形式。例如浏览器遇到<b>标记时，就会把<b>标记中的所有文字以粗体样式显示出来。或者，“<i>网页</i>”这样一个HTML语句的显示结果就是斜体的“网页”两个字。
读者可以看到，HTML具有易学易用的特点。总的原则就是：用什么样的标记就能得到什么样的效果。希望获得什么效果，就要用相应的标记。因此，学习HTML实际上就是学习如何使用各种HTML标记。
2.1.1 HTML文件结构
作为学习的第一个实例，我们看一个简单的网页代码，如下所示，实例文件参见本书配套资源“第2章/02-01.html”。
1 <!DOCTYPE html>
2 <html>3 <head>4 <title>test</title>5 </head>6 <body>7 <p>8 互联网，我来了！9 </p>10 </body>11 </html>
上面的HTML文件中用到了5个HTML标记，以及一个特殊的<!DOCTYPE>声明，它们构成了简单的、完整的HTML文件。下面依次讲解它们的作用。
1. <!DOCTYPE>声明
在整个HTML文件的第1行应该使用<!DOCTYPE>声明，使浏览器知道这个文件的类型。HTML5中对此进行了简化，简单写作<!DOCTYPE html>就可以了。注意，它不能出现在文档的任何其他位置。
2. <html>标记
<html>标记位于HTML文件的开头，它并没有什么实质性的作用，只是一个形式上的标记。在HTML文件开头使用<html>标记来表示文件的开始。
3. <head>标记
<head>被称为“头标记”，放在<html>标记的内部，其内部放置关于此HTML文件的信息，如提供关于该网页的索引（meta）信息、定义CSS样式等。
4. <title>标记
<title>被称为“标题标记”，包含在<head>标记内。它的作用是设置HTML文件标题。可以在浏览器左上方的标题栏中看到这个标题，此外在Windows任务栏中显示的也是这个标题，如图2.1所示。