艺兔的编程博客

Appearance

编写你的第一个网页 ​

这节课我们先大致看下一个最简单的网页，它里面的代码是怎么样的，然后尝试编写我们的第一句代码。

通常如果我们要开发一个网站，我们都会把与这个网站相关的所有文件都放在一个文件夹中，我们把这个文件夹叫做项目文件夹。

我们先在电脑的桌面上新建一个文件夹，取名为 my-first-webpage, 项目文件夹的命名我们不要用中文去命名，也不要在名字中出现空格或者是特殊字符，否则你的项目在运行的时候可能会出现一些未知问题。通常我们用英文单词来命名，中间用英文的短横线-或英文的下划线_开隔开。当然你也可以用拼音来代替英文。

像这种中间用英文的短横线-隔开单词的命名法，我们叫做 短横线命名法，当然它也有其它的叫法，但我们没必要去过多的纠结这些术语。像中间用英文的下划线_隔开单词的命名法，我们叫做蛇形命名法。

另外你也可以用小驼峰命名法或者大驼峰命名法来命名你的项目文件夹名称。 小驼峰命名法是指第一个单词的首字母小写，后面的单词首字母都大写，如：myFirstWebpage。 大驼峰命名法是指所有单词的首字母都大写，如：MyFirstWebpage。 具体用什么命名法，看你自己的喜好。我们还是使用短横线命名法吧！my-first-webpage.

然后打开我们的VS Code 编辑器， 点击左侧导航栏的资源管理器图标 展开资源管理器，点击打开文件夹 按钮，打开我们刚才新建的my-first-webpage文件夹。

然后我们将鼠标移到资源管理器中，这时候回出现新建文件和新建文件夹两个图标，我们点击新建文件图标，来创建一个index.html的文件。.html 这个扩展名是代表你这个文件一个html文件。 就像你平时经常看见的.txt结尾的是文本文件， .doc 结尾的是Word文件，.mp3结尾的是音乐文件。道理是一样的。 那为什么取名为index呢？ 因为任何网站都会有一个默认的页面，或者叫网站的人口页面，这个页面我们通常都以index来命名。 所以目前在前端基础阶段，你做任何一个前端项目时，你首先就要创建一个index.html页面。

我们本节课不是教你如何编写html，我们要做的就是创建一个index.html文件，然后再文件中添加一些代码，然后在浏览器中查看结果。这样你就可以编写你的第一行代码，并在真实的浏览器中查看代码运行的结果。

通常在正式开发中，我们都会借助VS Code的一个小技巧来快速生成最基础的html结构， 我们在index.html文件中输入英文的感叹号!, 然后在键盘上按tab 键或者是回车键enter，就能生成一个基础的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>

上面的代码具体是什么意思，我们以后会一个个的讲清楚，再次强调下，这节课你不用去理解每句代码的意思。只要跟着做就可以了！

现在我们先把网页标题<title></title>中的内容修改为： 我的第一个网页 ， 然后我们进入到网页的主体部分<body></body> 先输入一组h1标签<h1></h1>, 然后在标签中输入文字 你好，世界 ！。 这句话是编程界的一种传统，通常我们我们学习任何一种编程语言时，都会先写个你好，世界！（Hello World!） 这句话. 然后我们在输入一组<p></p>标签， 当中输入文字 你好，我叫艺兔，这是我的第一个网页！😊。 然后我们按住command + S来保存这个文件。Windows系统的保存快捷键是control + s。 当然上节课我们已经设置了文件的自动保存，但是我们还是要养成随时按command + s的习惯。

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的第一个网页</title>
  </head>
  <body>
  	<h1>你好，世界！</h1>
  	<p>你好，我叫艺兔，这是我的第一个网页！😊</p>
  </body>
</html>

上一节课，我们还安装过一个叫做prettier的扩展，它会在我们保存代码的时候自动格式化我们的代码，比如我们在<p>标签前输入很多的空格，然后我们再保存下文件，我们会发现代码又被正确格式化了。

现在我们就来运行我们刚写的代码。 我们回到桌面，进入我们的项目文件夹，然后用浏览器打开我们的index.html文件， 你可以用鼠标双击index.html， 或者用鼠标的右键点击它，然后选择使用谷歌浏览器打开它。恭喜你， 你已经成功的编写出了你的第一个网页！

四个常用的快捷键 ​

最后，我们还要记住四个常用的快捷键：

  • 全选： Mac: Command + A, Win: Control + A
  • 保存： Mac: Command + S, Win: Control + S
  • 复制： Mac: Command + C, Win: Control + C
  • 黏贴： Mac: Command + V, Win: Control + V