想起好久没有更新部落格了，恰逢今年部门新人不少，想起之前在旧部落格中的一些文章没有来得及迁移过来，永远丢失了。这其中就包括了 Web 前端的基础知识。不过去年写的那几篇关于 Web 前端开发三件套的文章似是繁中版，对读者主要来自中国大陆这一点可能不算友好，因此打算用简中重新写一遍，算作今年授课资料。
对于 Vue.js 部分的内容，我是在部落格迁移之后才写的，因而你可以直接在本站中找到，就是下面三篇：
语言也都是繁中，老同事们如有问题可回头去看。
此外，对于我繁简不分这件事，老同事们都给予了我相当的包容，在此谢过，也祈求新同事的多多包涵，陈某顿首。
关于网页和网站，基础知识的复习
我应该有在 2024 中心 Web 开年第零课中提到过关于网站和网页的相关概念。
简单来说，网页就是一个 HTML 文件在浏览器中被以解释的方式执行的结果。对于“解释”这个概念，我也有在第零课中阐述，如有遗忘，请回复习。这个解释的过程，我们可称之为渲染。
而所谓的网站，即是由多个网页组成的集合。这些网页之间可以通过超链接（Hyperlink）相互连接并导航，形成一个网站。
接下来，请允许我带领大家一探网页之本质。
请打开你电脑上的浏览器（相信经过我们苦口婆心的劝说，你应当已经有卸载掉电脑上诸如 360 浏览器的一众妖魔鬼怪），随意打开一个网站，比如我们母校的官网山东大学。
然后按下键盘上的“⌘ + S”按键，Windows 则是 “Ctrl + S”，然后保存这个网页。
你会发现保存的位置出现了一个文件和一个资料夹。
这个文件就是一个 HTML 文件，而这个资料夹则是这个 HTML 文件所引用的资源文件，比如图片、样式表、脚本等，暂时可以忽略它，因为它是为这个 HTML 文件服务的，HTML 文件才是核心。
接下来，我们双击打开这个 HTML 文件，你会发现它默认从浏览器中被打开了，而浏览器上显示的赫然就是我们刚才看到的网页。只是这次，如果你留心网址的话，你会发现是一个以“file://”开头的地址，而不是“https”，这意味着这个网页是从你的本地文件系统中被打开的。
以上的例子成功说明了，网页就是一个 HTML 文件在浏览器中被以解释的方式执行的结果。网页的本质就是一个 HTML 文件。
接下来，我们来探一探这个兔子洞到底有多深。相信大家的电脑上已经有安装好 VS Code，或者即使没有安装好，在 Windows 上或 macOS 上也都有自带的文本编辑器。
我们打开 VS Code，然后将这个 HTML 文件拖拽到 VS Code 的窗口中，你会看到这个 HTML 文件真正的样子。
没错，事实上，这个 HTML 文件不是别的，正是我们每个人都非常熟悉的文本文件。只不过，我们在其中不是写普通的文字，而是写一些代码，这些代码被浏览器解释后，就成了我们看到的网页。
事实上，所有的编程语言写成的代码文件，都是最普通的文本文件，只不过通过约定好的特殊语法规则，让相应的解释器或编译器能够认识并翻译成机器语言而已。这一点在大家之后的开发之路上会无数次地体会到。
VS Code 的初步配置
对于 VS Code 是什么这一点，我想应该对大家做出一些解释——有关于在我们开发过程中涉及到的一些工具。
任何一门编程语言，想要被电脑看懂并执行，至少需要两个工具的辅助。一个是编辑器，另一个是解释器或编译器。
首先，你想要让你的指令让计算机得以理解，你至少得把它写出来吧？这就需要一个文本编辑器。最简单的文本编辑器莫过于 Windows 自带的记事本，或者 macOS 自带的文字编辑软件。但是它们功能太过简陋，对于编程来说，我们需要一个功能更加强大的文本编辑器，在我们写代码的过程中，能够提供一些辅助功能，比如代码高亮、自动补全、代码折叠等等。VS Code 就是一个这样的文本编辑器。所以通俗来讲，VS Code 其实在本质上与 Windows 或 macOS 自带的记事本没有太大的区别，只不过它在功能上更加强大，更加适合我们写代码。
其次，你写好了代码，你得让计算机能够理解你写的代码，这就需要一个解释器或编译器，将你的编程语言翻译成机器语言。这一点我也有在第零课中解释过，这里就不再赘述。如有遗忘，请复习。
对于 HTML、CSS、JavaScript 这些前端语言，浏览器就是一个解释器。你写好了 HTML 文件，然后在浏览器中打开，浏览器就会解释这个 HTML 文件，然后显示出网页。而对于 Python、Java、C++ 这些后端语言，我们需要安装相应的解释器或编译器，然后将我们写好的代码交给它，它就会翻译成机器语言并交由 CPU 执行。
当然，VS Code 作为业内的一朵奇葩，最为知名的就是它的插件系统。简单来说，你可以通过在 VS Code 中安装各种各样的插件，来扩展 VS Code 的功能。这些插件有不少可以让你直接在 VS Code 中调用电脑上安装好的解释器或编译器，从而在 VS Code 中执行你的代码。
接下来我们就来安装一下我们目前这个阶段所需要的前端插件。
打开你的 VS Code，按照下图的步骤安装 Live Server 插件。
安装完成后重启 VS Code，如果你在右下角看到一个 Go Live 的按钮，即说明安装成功。
这个插件的作用是在你的本地创建临时的 Web 服务程序，相对于直接打开 HTML 文件来说，这种方式可以做到热更新，即你修改了 HTML 文件，浏览器中的网页会立即更新，方便开发。
开发你的第一个 HTML 网页
[⚠️ Attention] 以下内容请务必按照步骤，一步不落地做下来。如有丝毫差池，都将直接影响项目的运行！
打开一个新的 VS Code 窗口，然后“文件
然后在这个资料夹中新建一个 HTML 文件，命名为 index.html。注意，只能叫这个名字！
将输入法切换至英文模式，在 Windows 上这个操作是按一下 Shift，而在 macOS 上则是按一下 Caps Lock。
然后在刚刚创建的 index.html 文件中输入一个英文的感叹号 !，然后按下 Tab 键，你会看到 VS Code 自动帮你补全了一个 HTML 的基本结构。
我们定位到 <body>和</body>之间的那一行，输入一行代码：1
<div>Hello, world.</div>
然后点击右下角的 Go Live 按钮，你会看到浏览器自动打开，并显示出一句“Hello, world.”。
关于“Hello, world.”这句话，其实是圈内的一个典故和习俗，感兴趣的朋友可以自行去了解。
恭喜你，你已经成功地开发了你的第一个 HTML 网页！虽然它很简单，但这是你的第一步，你已经踏上了 Web 前端开发的征程。
HTML 的基本结构
兴奋过后，我们来看看我们刚才到底干了什么不得了的事情。这个 HTML 文件怎么就水灵灵地被我们写出来了。
以上便是我们刚刚那个 HTML 文件的基本的结构。其中默认生成的内容大部分都是不用动的，我们只需要关注 <body> 和 </body> 之间的部分。因为只有它们之间的部分是渲染到浏览器中的内容。
HTML 标签的概念
我们刚刚看到的 HTML 文件中，相信大家已经看到了一些尖括号 < 和 >，以及一些英文单词。比如<body>、<div>等等。这些是什么呢？
HTML 语言的创造者规定，使用尖括号包裹的部分为 HTML 标签。HTML 标签是 HTML 语言的基本组成单位，是用来描述网页的结构的。通俗地讲，HTML 标签用来定义一个网页中“有什么”。
比如，如果一个网页中有一张图片，那么它就一定有一个<img>标签用来定义这个图片。如果一个网页中有一个视频，那么它就一定有一个<video>标签用来定义这个视频。
定义一个网页中“有什么”，就是 HTML 标签做的事情。
HTML 语言中有很多标签，每个标签都有自己的作用。你可以在这个网站上查看所有的 HTML 标签：MDN Web Docs。
单叶标签和双叶标签
这两个名字是我自创的，但很形象。在上面的文件中，我们察觉到，有许多标签似乎是成对出现的，比如<div>后面一定跟着一个</div>，<body>后面一定跟着一个</body>，即使隔得很远，也一定会有。而有的标签却不是这样，比如<meta>标签，它只有一个<meta>，没有</meta>。
像这种成对出现的标签，我称之为双叶标签，而像<meta>这种没有成对出现的标签，我称之为单叶标签。
为什么要有双叶和单叶呢？聪明的你估计很快就想到了，双叶标签有两个“叶子”，中间是可以夹东西的嘛！单页标签则只有一个叶子，也就没有“中间”这个概念，自然不能夹什么东西。比如我们刚刚的<div>标签，不就在它两个叶子之间夹了一个“Hello, world.”吗？
对于双叶标签来说，它的两个叶子之间夹的东西，就是要显示在浏览器中的内容，这很好理解。比如我们刚刚在<div>两个叶子中夹的“Hello, world.”，就显示在浏览器中。
而对于单叶标签来讲，它要么是做网页配置用的，根本没有什么东西要显示在浏览器中，要么就是无需夹东西，就能在浏览器中显示内容。
单叶标签的典型例子就是<img>标签。<img>标签用来显示图片，但是它只有一个叶子，通过src属性来指定图片的地址。这个src属性就是<img>标签的配置，而不是要显示在浏览器中的内容。
1 | <img src="https://xxx.xxx.xx" > |
标签的嵌套
聪明的你肯定又要提个问题了：既然双叶标签的两个叶子之间可以夹东西，那么可不可以在其中夹别的标签呢？
显然。
我们来看下面一段代码：
1 | <div> |
我们在<div>标签的两个叶子之间夹了一个<h1>标签和一个<img>标签。这是完全合法的，而且是非常常见的。这种在一个标签的两个叶子之间夹另一个标签的行为，就叫做标签的嵌套。几乎所有的双叶标签都支持这种嵌套。
除了二级嵌套之外，我们还可以多级嵌套，让页面变得更加复杂：
1 | <div> |
标签的属性
HTML 标签中，属性的概念是非常重要的。我们刚刚实际上已经接触到了“属性”。还记得刚刚的<img>标签吗？它是这样写的：
1 | <img src="https://xxx.xxx.xx" > |
这个src就是<img>标签的一个属性。
根据 HTML 语言规范，在头标签名字后面以空格分隔，格式形如 xx=”xx” 的部分，是标签的属性。
对于单叶标签，属性即定义在唯一的那个叶子里，比如<img>标签的src属性。而对于双叶标签，属性定义在“头标签”中，即第一个叶子里。比如：
1 | <div id="hello" class="hello">Hello, world.</div> |
标签的属性定义了这个标签的一些配置，比如<img>标签的src属性定义了这个图片的地址，<div>标签的id属性定义了这个<div>标签的唯一标识符。
有的属性是通用属性，即所有的标签都有的属性。这些属性包括id、class、style等等。而有的属性是特定标签的属性，比如<img>标签的src属性、<a>标签的href属性等等。
id 和 class
这里我们着重讲一下id和class这两个属性。它们是通用属性，所有的标签必定都有这两个属性。
我们顾名思义，id属性是用来给标签一个唯一的标识符。这个标识符是全局唯一的，即整个 HTML 文件中，不会有两个标签有相同的id属性（如果你写了两个拥有相同 id 的标签，则第二个标签的 id 属性自动被忽略）。id属性的值是一个字符串，可以是任意的字符串，但是不可以有空格。比如abc、123abc、xszx_2024等都是合法的id属性值，而xszx 2024则非法。
id 就像人的身份证号一样，也像身份证号一样重要。在后面我们要讲的 CSS 和 JS 中，很多操作都是依赖 id 在整个文档中精准找到唯一的那个标签的。
class这个单词，我们最早接触到的意思应该是“班级”，但如果你去查 Oxford Dictionary，你会发现它还有好多其他的意思，在众多的释义中，有一个“类，类别”的释义。这个释义就是我们要讲的class属性的意思。
那么我们继续顾名思义，所谓class，就是给标签分一个类。当然，分类嘛，每一个类别肯定是可以有一个或者多个子元素的。因此，在一个 HTML 文档中，相同的 class 可以被多个标签使用，而一个标签也可以拥有多个 class。比如：
1 | <div class="animal pet">小狗</div> |
这么做的意义是什么呢？别急，我们在后面的 CSS 和 JS 中会讲到。