下载掌阅APP，畅读海量书库
立即打开
HTML的全称为HyperText Mark-up Language，中文名称为超文本标记语言。HyperText意为超文本，是指使用超链接的方法将各种处于不同空间的文字信息组织在一起形成的网状文本；Mark-up意为标记，就是使用一些标记标识出网页中的一些内容。假设2个感叹号表示帅哥，那么只要是被2个感叹号包裹起来的内容，就被认为是帅哥，如“！小尚！”。HTML是构成Web的重要组成部分，它主要定义了网页中的内容的含义和结构。我们可以将HTML理解为使用一些特殊的标记将网页中需要表示的内容标记出来，然后将标记出来的多个文档使用超文本链接起来。
本章将初次带领读者学习HTML中的一些基础语法和文档结构。
从本节开始，我们将为读者正式介绍HTML的基础语法，带领读者走进HTML！基础语法将通过一个案例进行穿插讲解，现在让我们开始吧！
千里之行，始于足下。从本节开始，我们将学习如何创建HTML文件、如何运行代码等，下面将依次展开讲解。请读者先在Visual Studio Code中自行安装“Live Server”插件，然后再阅读下面的内容。
创建一个HTML文件的过程十分简单，点击“右键”→“新建文本文件”，可以将文件命名为“test1.html”或“test1.htm”，然后使用Visual Studio Code打开test1.html文件，并在文件中输入任意一段文字，例如，欢迎来到尚硅谷前端世界！最后点击右键，选择“open with Live Server”（Live Server是一个本地的服务器，可以在测试代码发生更改时自动刷新页面，其可以通过Visual Studio Code的应用商店进行安装，还可以通过本书附赠的资源包进行下载并本地安装），就会弹出我们运行的网页，如图2-1所示。
图2-1 运行的网页
此时浏览器的URL地址为http://127.0.0.1:8848/web/test1.html。由于是普通文本，所以这段代码在运行之后就能够看到，它只是静态地显示在浏览器窗口上。
此时在文本外嵌套标签，如下所示，再重新运行代码。
在运行代码后，可以发现文本不再是静态显示的，而是“动”起来了。代码中的“<marquee></marquee>”就是标签，它是HTML最基本的单位，同时也是最重要的组成部分。
标签由小于号“<”开始，由大于号“>”结束，其中包含的是指定的字母，如“<marquee>”里面包含的是marquee。需要注意的是，标签名不区分大小写，因此案例的代码修改为“<MARQUEE>欢迎来到尚硅谷前端世界！</MARQUEE>”也可以运行。
这里需要注意下面几点。
● .html和.htm的文件后缀名没有本质上的区别，使用.htm后缀名只是为了兼容老的文件系统格式。
● 关于文件的后缀名，Windows操作系统默认会将已知的文件类型扩展名进行隐藏。可以通过“文件”→“更改文件夹和搜索选项”→“查看”找到“隐藏已知文件类型的扩展名”并将其勾选去掉，如图2-2和图2-3所示。
图2-2 更改文件夹和搜索选项
图2-3 隐藏已知文件类型的扩展名
● 在运行代码时，为了避免网络问题，不要使用双击浏览器图标的方式来打开HTML文件。
2.1.1节介绍了标签是由“<”开始，由“>”结束的。其实，标签可以分为双标签和单标签（也叫作自结束标签）。下面将依次进行讲解。
双标签就是2.1.1节中案例所使用的标签形式，由2个标签组成，一个代表开始，一个代表结束。结束的标签要使用正斜线“/”并在后面添加标签名，例如，“</MARQUEE>”。需要注意的是，双标签的标签名都是相同的，成对出现，代码如下所示。
单标签也叫作自结束标签，顾名思义，单标签不是成对出现的，而是只需要一个标签，结尾以正斜线“/”来结尾。例如，<br/>标签就是一个单标签，该标签表示的是换行。
值得一提的是，添加正斜线“/”是XHTML的标准，HTML5已实现向前兼容。在“HTML5篇”中，单标签不再使用正斜线“/”结尾。
继续使用上面的案例，将test1.html的代码改为下方代码。
运行页面可以发现，在“欢迎来到”和“尚硅谷前端世界！”之间出现了换行。
从这个案例中可以看出另外一点，即在双标签中嵌入了单标签。在后面的编码过程中，我们经常会遇到“在双标签中嵌套单标签”和“在双标签中嵌套双标签”的情况。
在上面案例的基础上，再来看下面这行代码。
在这行代码的标签中出现了一个新“面孔”——“loop="3"”。其实它是用来修饰、控制标签的，我们称这种语法为属性，它的整体格式为“属性="属性值"”。需要注意的是，某些属性是具有默认值的，也就是说，即使不写某个属性，它也会生效。
这里的“loop="3"”用来控制<marquee>标签中的内容的滚动次数，属性值为3，代表要滚动3次。如果不写该属性，就默认执行值为0，即会一直执行。
继续使用上面的案例进行讲解，再来观察下面这行代码。
代码中出现了一个新的属性，即“width="50"”。width意为宽度，顾名思义，该属性用于控制<marquee>标签的宽度。运行代码后，观察页面可以发现，滚动的区域变窄了，即“width="50"”生效了。因此，在标签中可以存在多个属性，并且不区分先后。
在书写标签属性时需要注意以下3点。
（1）属性要写在开始标签里面。
（2）写属性值的时候可以使用单引号或双引号将其包裹起来，甚至可以不书写引号进行包裹。但是我们还是建议在书写属性值时，使用双引号进行包裹。
（3）在同一标签中设定多个属性时，多个属性之间需要使用空格进行分隔。
HTML对空格和换行的处理较为特殊。在HTML中，一个空格和多个空格都会被当作一个空格来处理，代码如下所示。
这行代码在“欢迎来到”和“尚硅谷前端世界！”中插入了多个空格，由于HTML会将其当作一个空格来处理，所以页面上只显示了一个空格，如图2-4所示。
图2-4 页面效果（1）
在HTML中，一次换行和多次换行也会被当作一个空格来处理，代码如下所示。
这行代码在“欢迎来到”和“尚硅谷前端世界！”中插入了多个换行，由于HTML将其当作一个空格来处理，所以页面上只显示了一个空格，如图2-5所示。
图2-5 页面效果（2）
如果想要在HTML中显示多个空格，就要通过实体来实现。什么是实体呢？
其实在HTML中，有些字符是系统预留下来的，如果想要使用这些预留下来的字符，就要使用实体将它们表示出来。实体的格式是，在“&”后接字母并以分号结尾。下面以表格的形式列出了一些常用实体，如表2-1所示。
表2-1 常用实体
书写测试代码，如下所示。
运行代码后，页面输出效果如图2-6所示。
图2-6 页面输出效果
任何程序、代码都有注释，注释是给程序员看的，不影响程序的运行。在HTML中，注释符的格式由小于号“<”后接感叹号“！”和2个短横线“--”并加上注释的内容，再接2个短横线“--”和大于号“>”构成，如下所示。
通常在说明代码含义或调试代码的时候会使用注释。在实际开发中，书写注释不仅可以帮助程序员记忆代码的功能，还可以大大提升代码的可读性。建议多书写代码注释，以此提升代码的质量。
书写代码，如下所示。
上述结构包含文档头、<html>标签、<head>标签、<body>标签，本节将对这4个部分依次展开介绍。
本节将为读者介绍文档头的相关内容。所谓文档头，就是告诉浏览器应该以什么方式来解释这个HTML文档，简单地说，就是文档类型的声明，如下所示。
在之后的HTML5中可对其进行简化，修改为“<！DOCTYPE html>”。因为HTML5是向前兼容的，所以现在我们普遍使用这种方式书写文档声明语句。
需要注意的是，文档声明语句必须放在文档的第一行，而且不需要区分大小写。
在文档头的下方会有一组<html>标签成对出现。这个标签对是唯一的，它是最外层的标签，所有的其他标签都应该写在这对<html></html>标签对中。简单地说，所有的网页内容都需要编写到<html></html>标签对中。
关于<html>标签，我们需要注意以下3点。
（1）<html>标签告诉浏览器这是HTML文件的起点。
（2）</html>标签告诉浏览器这是HTML文件的结束点。
（3）HTML文件中的所有标签都应该放在<html></html>标签对中。
<html></html>标签对中包含2个子标签，即<head>标签和<body>标签，它们分别代表头标签和主体标签。<head>头标签里面的内容不会显示在浏览器中，包括当前页面的描述性语句，简单地说，里面的语句是网页的公共属性。在<body>主体标签中放置的是网页的真正内容，如文字、图片等。
还是使用前面的案例进行讲解，将前面书写的内容放入整体的文档结构中，代码如下所示。
运行代码后，可以发现其运行效果和前面的案例在页面上的效果相同，如图2-7所示。
图2-7 页面效果
本节案例只演示<body>标签中的内容，关于<head>标签中的内容，在2.3节会详细讲解。
<head>标签作为<html>标签的子标签出现，其标签内放置的是当前网页的一些描述性信息。需要注意的是，一个网页只能有一个<head>标签。
在2.2节，我们演示了新建的HTML文件。除了这2个标签，实际上还可以在<head></head>标签对中自己书写一些标签。下面将会为读者依次进行讲解。
<title>标签用来定义整个HTML文档的标题，其中书写的内容会显示在网页的标题栏上。需要注意的是，该标签在整个HTML文档中只有一个。简单地说，<title>标签可以用来显示网页的标题，让用户在使用网页期间可以明确地知道网页想要表达的意思，代码如下所示。
联想我们在生活中使用网页的场景，当你想要收藏一个网页的时候，网页的标题会作为默认的内容存在。继续思考，搜索引擎其实也会用到<title>标签中的内容，因此在设置格式的时候，我们通常将其设置为“文章标题-栏目标题-网站名”，或者为“文章标题|栏目标题|网站名”。
在正式学习<meta>标签之前，读者需要先对字符、字符集和编码有简单的了解。
其实各国的文字都是字符，字符集就是字符的集合，而编码则会规定字符集中的每个字符应该怎么存储，具体地说，是将字符集中的字符映射为具体的编码。这样说可能有些晦涩，我们通过一个简单的案例来帮助读者理解，如“尚硅谷”转换为二进制编码就是“10100101”。
字符集的发展历程如下。
● ASCII码（American Standard Code for Information Interchange）是美国信息交换标准代码，它基于26个基本拉丁字母、阿拉伯数字和英文标点符号形成，只能显示美式英语。
● 亚洲国家的文字会使用到比较多的符号，如中文，因此出现了GB2312编码、GBK编码。
● 由于世界上出现了太多字符集，无法统一使用，所以出现了Unicode字符集，它可以将所有字符都表示出来。Unicode字符集包含各国家的字符，也被称作为万国码。此时问题又出现了，由于Unicode只是一个字符集，它没有规定该怎么存储字符，所以又出现了UTF-8编码，可以用来规定如何存储Unicode字符集中的字符。
值得一提的是，UTF-8编码也是当今互联网上的一种统一的编码方式。
在掌握了前置知识以后，我们开始正式学习<meta>标签。
<meta>标签主要提供有关页面的元数据。所谓元数据，就是描述数据的数据。具体来说，<meta>标签的属性定义了与文档相关联的一些描述性数据，如用来定义针对搜索引擎和更新频率的描述和关键词。<meta>标签位于文档的头部，其不包含任何内容。
当使用<meta>标签来规定HTML的编码时，需要书写代码如下。
在代码中出现了“http-equiv="Content-type"”和“content="text/html；charset=UTF-8"”这2个属性。“http-equiv="Content-type"”属性定义了一个指示命令，其对应值Content-type表示定义文档内容的类型。“content="text/html；charset=utf-8"”属性规定了Content-type的具体内容，其中，文件类型是text/html，文件编码是UTF-8。
总结一下，就是当前文档的内容类型为text/html类型，文档的编码方式是UTF-8。可以发现，因为这种编码方式较为烦琐，所以HTML5进行了一些改进，使其更容易书写。
当使用<meta>标签来定义对页面的描述时，需要配合书写name属性和content属性。下面对这2个属性进行介绍。
（1）name属性。
name属性用来规定页面的一些描述项。name属性的属性值是已经规定好的，这里为读者介绍2个常用值——keywords和description。当属性值为keywords时，其用来规定与页面内容相关的关键字；当属性值为description时，其用来规定一段对页面内容的简短描述。
（2）content属性。
content属性用来定义具体的描述内容。对应的内容是根据name属性值来决定的。不管name属性值为keywords还是description，其值都是自定义的。
当name属性值为keywords时，代码如下所示。
这代表该文档内容的关键字为“前端”或“尚硅谷”。也就是说，当使用搜索引擎搜索“前端”或“尚硅谷”时，会查找出一些相关的页面。需要注意的是，如果keywords的值（网页关键字）有多个，那么重要的关键字要放在最前方，而且尽量不超过3个。多个关键字之间使用英文、半角逗号进行分隔。
当name属性值为description时，代码如下所示。
这代表该文档内容的描述为“该文档描述了常用的HTML基本语法”。值得一提的是，description中的内容更多的是给搜索引擎提供一些引导，在运行代码时，页面上是看不出来的。
其实在<head>标签中还可以设置一些其他标签，例如，可以通过书写<script></script>标签对来定义一段JavaScript脚本，代码如下所示。
书写<style></style>标签对，并以此定义一段CSS样式，代码如下所示。
还可以通过使用单标签<link/>来设置外部文件的链接标志，用于确定本页面和其他文档的关系，代码如下所示。
在阅读上面3个标签的对应案例时，不必理解其含义是什么，只需知道在<head></head>标签对中可以书写3种标签即可。本章只对其做简单介绍，在讲解CSS及JavaScript时，会进行着重介绍。
本章主要对HTML的基本语法和结构进行了介绍，首先在2.1节通过一个案例的穿插讲解，从创建一个HTML文件开始，依次对标签的分类、标签属性、实体、HTML的注释符等知识的运用进行了演示。其次在2.2节对HTML文档的结构进行了介绍，使读者对HTML文档的大体结构有了基本了解。最后在2.3节介绍了<head>标签中可以包含的标签，使读者了解了HTML中的一些标签与浏览器的关系。
千里之行，始于足下，要想学好一门语言，扎实的基本功必不可少。本章是HTML中最基础的部分，建议读者多次阅读学习本章内容，以达到掌握的程度。