创建第一个HTML网页

原创

守护最温柔的金木

修改于 2020-07-03 10:19:06

2K0

修改于 2020-07-03 10:19:06

文章被收录于专栏：all web technologyall web technology

打开一个你喜欢的编辑器，这里的话，我用的是VScode，那么接下来我们就要开始写我们的第一个前端demo了。

首先，我们在桌面上新建一个文件夹，我就简单的取名为叫HTML了，就像下面这个样子。

然后，我们就要打开项目了，一种方法是打开编辑器，点击左上角将文件夹选中打开，进入到文件夹里面，还有一种就是直接将桌面上的文件夹选中，拖着进入VScode图标，编辑器就会自动打开了，我的话，第二种居多，懒人做法。

进去之后，文件夹由于我们还没创建文件，所以自然是空的状态，将鼠标点击到下面这幅图的，也就是HTML旁边的第一个图标，新建文件即可。

那么，有很多刚入门的小伙伴可能就直接写名字了，比如就叫demo，然后就回车了，此时，我们的VScode编辑器是无法识别你建的文件到底是什么类型的，举个例子，你保存一张图片，点开属性，后面往往都是xxxxx.jpg的形式，这样才能一眼告诉别人，我是jpg格式的文件，我们这里也是一样的，我们要写的是html网页，所以，我们就要在取的名字的后面加上一个.html，然后再回车，格式就像我下面写的这样。这里的话，我还要强调的一点，就是取名字最好是英文的，写中文是极其不规范的，我这么写是因为是我要写文章所以来区分的，真正做项目的时候要全英文，不会就百度翻译，英文水平瞬间就提升了。

新建好文件，我们会看到右边编辑器里展示出来的是一片空白，不要慌，直接输入一个感叹号"!"，就像下面这样。

此时，我们会看到第一个右边提示的像不像就是我们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>

紧接着，我们就要运行这个网页了，值得一说的就是VScode这个运行网页就非常的不方便，你需要安装一个插件，叫view in browser，意思就是在浏览器中查看，然后我们右键点一下文件，会看到view in browser，点击就会打开我们的默认浏览器，之后就会运行我们编写的代码了。

浏览器运行完代码的样子如下

可以看出，我们刚刚加上的这几个字被编译出来了。

当然了，对于初学者来说，代码缩进还是很重要的。什么是代码缩进？举个例子，我们上学时候写的作文，是不是规定每个段落的开头要空两格。那么，在前端的代码里，我们怎么进行缩进呢？每当一个标签或者内容出现在了另外一个标签的内部，也就是出现嵌套结构的时候就需要缩进了，我们来看下面的代码，就是比较典型的缩进，这些缩进不是用空格敲出来的，而是用tab键进行缩进的，可以自己试试来感受一下。

<!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>

刚开始写代码的小伙伴很多都是写成下面这样子的，就很笔直，俗称瀑布式写法，一泻千里。但是我想该不会真的有人会觉得这样写很有美感吧，不会吧不会吧。如果有人坚持这样写很好看，我建议不要放弃治疗，总有审美康复的一天。再强调一遍代码里没有缩进是不对的。

<!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>

最后，我们来认识一下网页的基本结构，首先呢，一个标准的网页，要写上<!DOCTYPE html>，这句是声明，就是告诉浏览器，请使用HTML5的标准来解析这个网页，是目前所有网页固定的写法，必须写在开头。

然后就是网页的正文内容了，大致上是分为两个部分，第一部分是网页的头部，也就是head标签，这里面的信息都是对网页的整体说明，包括网页的标题和使用的字符集等等。什么是字符集，我们这里的字符集是UTF-8，UTF8 中的字符可以是 1-4 个字节长。UTF-8 可以表示 Unicode 标准中的任意字符。UTF-8 向后兼容 ASCII。UTF-8 是网页和电子邮件的首选编码，简单的了解一下就好了。