装好编辑器,新建文档,再次迫不及待把刚学会的代码写了进去,保存,然后用浏览器打开,非常不错,有效果了呢!

是的,要说简单,就是这么简单。但是我们真正的写网页,不可能这样直接去写内容,总要严谨一些,先准备一个模板。首先这个操作一点都不麻烦,依然是像刚才一样,新建文档,设置好文档的语言(上一章我们讲过的两种方法),然后先别急着写内容,按照我所说的进行操作:

首先输入一个英文的感叹号: !,会出现如下的提示。(如果提示没有出现,那么检查,是否已经将文档的语言设置为 HTML,并将输入法切换到英文,然后清空文档,输入感叹号,提示就会出现了)

Emmet

这时候按一下 Tab 键,就会出现如下内容:

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

</body>
</html>

那么我们一共按了两个键,就出来这么一大堆内容,看来写代码实在不要太简单啊~刚才用到的功能是 Emmet[1] 的快速补全代码,它可以极大的提升我们输入的速度,非常值得学习,而且也非常简单,不过现在我们能够用到的还非常非常少,大概要等到我们 CSS 部分完结之后才行,因为到那时,才能基本掌握使用它所必备的一些基础知识。

可能好多朋友,首先是觉得一下出来这么多代码,好厉害,然后又觉得这么一堆代码让人头大。那么我们先来记住关键的几点就好:

第一、先把他当做固定格式来用

反正按两下就出来,用起来也不麻烦喽~

第二、修改一下语言

第二行 <html lang="en"> 里面的 en 表示英文,当然中文就是 zh 了,这个说的是网页内容的主要语言,不是说代码哦,所以一般我们都改为 zh[2]

第三、title 就是标题

第七行 <title>Document</title> 是用来设置网页的标题的,这个内容会显示在浏览器的标签上,如下图:

HTML 标题

当然你也可以把 Document 改成其他内容试试看。

第四、编码要保持一致

第四行的 <meta charset="UTF-8">,这里的 UTF-8 要和 编辑器右下角这个位置保持一致,否则就会乱码。反过来,网页出现乱码,先看是不是这里出了问题。

网页编码设置

最后、我们网页的内容写在 body 里面

就是这样:

<!-- 上面的省略,要不然太长了,假装我写了 -->
<body>
  在这里写我们的代码……
</body>
<!-- 下面的省略,要不然太长了,假装我写了 -->

所以从模板开始规范的写代码,一点都不难。按两下按键,出来了模板,修改一下语言和标题,检查一下网页编码,然后就可以开始写我们的内容。

因为刚刚开始接触这些代码,如果上来我把它们都进行一个非常详细的解释,看起来好像是我讲的非常到位,但至少一半的同学并不能够得到理解,甚至会被这些东西绕晕,毕竟我们对这一切还很陌生。所以本章只先指明其中需要修改和注意的点,让大家先用起来。而关于这个模板的详细解释,我会在以后附上。

【本章助记卡片:卡片 for 第七章

>注释 1: Emmet 原名 Zen Coding,是一个主要针对 HTML 和 CSS 的快速输入插件,简单而强大。不过在 VSCode 里面,是通过编辑器的自动补全功能进行实现,所以有一些地方实现得并不完美,以及和各种自动补全的插件之间,可能有一些冲突,让人略感遗憾,即便如此,它所带来的效率提升,也是极其惊人的。

>注释 2: 对于网页语言的说明,是一个比较容易被忽视的地方,但其实它还是会产生很多影响的,作为入门课程,这里只讲了最简单笼统的设置方式,有兴趣的同学可以在网上自行查询,深入了解一下。