2.1 HTML基础文件讲解

再上一节的学习中，我们学到了如何创建一个标准html文件。在本节课中，我们将会通过这个文件来学习HTML的基本架构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

上面所展示的是一个标准HTML空文件。现在让我们进行解读。

首先，让我们去除闲杂信息，只保留下关键结构。

<html>
    <head>
    
    </head>
    <body>
    
    </body>
</html>

在这一个基础代码里，我们可以看到有三组由<XXX>和</XXX>框起来的代码结构。像是<XXX></XXX>这样的结构我们会称之为XXX标签。而在上面这个简单结构中，head和body标签是被html标签包裹进去的。那么这三个标签分别代表什么意思呢？

首先是html标签。html标签是为了告诉浏览器被html标签框起来的部分是html语言。

而在一个网页中，我们会把代码分为head和body两个部分。一个是头部，也就类似于页面的设置之类的，这个部分并不会影响内容。而第二个部分则是body，也就是内容。

接下来，让我们规范代码告诉浏览器这是个html语言。于是就有了第一行

<!DOCTYPE html>
<html>
    <head>
    
    </head>
    <body>
    
    </body>
</html>

接下来，我们需要告诉计算机我们使用的是基于英语的语言，于是我们给html标签加入了一个lang属性，其值为en:

<!DOCTYPE html>
<html lang="en">
    <head>
    
    </head>
    <body>
    
    </body>
</html>

现在，我们开始处理head部分。

首先，我们需要告诉计算机我们使用的是UTF-8字符串。这里的UTF-8类似于一本字典，其中包含全球各种语言，如果不告诉计算机我们使用的是哪本字典可能会导致计算机不能识别中文。在这里我们需要记住三个概念：标签，属性，值。标签通常以一组一组的形式出现在一行代码的开头（<xxx>）和结尾（</xxx>）。而一个标签通常有不同的含义。例如字体标签能够告诉计算机这是个字，但是没告诉计算机是个什么颜色的字，于是属性就出现了。属性一般会出现在开头标签的后面。以这样的格式出现：

<标签 属性1="值1" 属性2="值2" 属性3="值3" ... >

继续引用上面那个例子，如果我们要告诉计算机我们要一个红色的字，那我们就需要在字体标签后加入一个颜色属性并且给他一个红色的值。所以，“aaa是一个颜色为红色的字体”就可以用html语言描述为：

<字体 颜色="红">aaa</字体>

当然，这里的字体标签并不是真的由“字体”来表示，“颜色”，“红“也是同样的道理。这里这样表示只是方便理解。

现在让我们回到正题。这里我们需要告诉计算机一个设置（meta），将字典（charset）设置为UTF-8，于是我们就得到了一个meta标签，属性为charset，charset的值为UTF-8。用代码表示就是：

<meta charset="UTF-8">

当我们进行下一个视点设置的时候也是一样，这里我们暂时不需要知道视点是什么，当我们把这两个设置放进head，我们就会得到这样的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    
</body>
</html>

现在我们将学习head部分唯一一个会显示在浏览器上的内容：title标签。现在我们先尝试加入title标签并且在内容部分写上Document：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

然后用保存键（Windows：Ctrl+S Mac:control+S）快速保存。

接下来，我们在本地（Windows：文件管理器 Mac：访达）中打开我们编写的内容。

然后我们右键使用另一种方式打开，选择任意浏览器打开这个文件。

这时候我们就会在标签页上看到Document。现在，你应该就知道title的用途了吧。

到此为止。我们彻底理解了HTML的基础文件，下一节课我们会探索body标签部分。

上一页1.5 VSCode 基础操作下一页参考文献

最后更新于

这有帮助吗？