HTML零基础入门教程，零基础学习HTML网页制作（HTML基本结构）

HTML 基本结构：前端拼图的第一块碎片

为什么要学习 HTML 基本结构？因为，你以后编写的每一个网页都是以HTML的基本结构为基础。因此，HTML 基本结构是 HTML 语言必学内容。本课程通过通俗易懂的语言及小案例帮你快速掌握 HTML 基本结构，并使用网页开发神器VSCode 实现简单的网页

第一关：HTML 标签语法规范

本门文程我们学习 HTML 的基本结构。

在正式学习之前，我们需要先明确一个问题，为什么要学习 HTML 基本结构？

因为身为开发人员，你以后编写的每一个网页都是基于 HTML 的整体结构。所以说，HTML 基本结构至关重要。

在此基础上，我们将学习标签的书写规范及注意事项，完成对于 HTML 基本结构的整体认知。

最后，我将向大家介绍一个非常牛逼的工具-VSCode，其能够快速的编写 HTML 代码，提高开发效率，在实际工作中发挥重要作用。

学完本课程，你将有如下收获：

（1）掌握 HTML 标签的书写规范以及注意事项（2）能够写出 HTML 骨架标签（3）能够使用 VSCode 工具开发网页

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

不要着急点击下一步，好好思考一下哦！！

答案解析：

由于<head>标签与<body>标签都是嵌套在<html>标签内部，所以说<html>标签与<head>标签、<body>标签是包含关系，而<head>标签与<body>标签的位置并列，所以是并列关系。

HTML整体结构

之前我们提到过，每个网页的整体结构基本上一致，也就是说每个网页都会有一个基本的结构标签，也称之为骨架标签，所有的页面内容就是在这些基本标签上进行编写。

我们来看一个网页的整体结构，如下所示：

 <html>
     <head>
         <title>我的第一个网页</title>
     </head>
     <body>
         学习线上编程，就来博学谷。
     </body>
 </html>

通过上面的代码，我们可以看到<html>标签是最大的标签，它包含了其他所有的标签，所以也称为：根标签。

我们都知道，浏览器解析 HTML 可以获取网页。

那么，这些 HTML 标签分别在网页整体结构中代表了什么呢？

<head>标签是页面的头部标签，代表网页的头部区域；

如下图标记区域：

而<head>标签内部包含了一个<title>标签。

<title>标签：表示头部区域内的网页标题或文档标题（HTML 网页也可以称之为 HTML 文档），它可以赋予页面一个属于自己的网页标题。 如下图标记区域：

<body>标签：表示文档的主体，其包含了文档内所有内容，页面内容基本都置于body标签内，也就是说，页面中显示的内容都需要放在body标签内。 如下图标记区域：

下面我们通过一个示例亲自感受一下 HTML 整体结构及标签在网页中的呈现：

练习：创建我的第一个网页

步骤1：将以下代码通过记事本工具写到创建的“ index.html”文件中，并进行保存；

 <html>
     <head>
         <title>我的第一个网页</title>
     </head>
     <body>
         学习线上编程，就来博学谷。
     </body>
 </html>

tep2：通过浏览器打开该文件，查看浏览器解析后的效果；

效果如下图所示：

若出现了以上的效果，那么恭喜你，HTML 代码完全正确，成功创建了第一个网页!

通过该示例，我们应该更加理解本小节所学习的内容，其浓缩为一句话就是：

HTML 文档的后缀名必须是以 .html 或 .htm 结尾，浏览器的作用是读取 HTML 文档，并以网页的形式呈现其内容。

下面，我们再通过一张图，加深对 HTML 整体结构标签的理解：

注意：

（1）在<head>标签中，必须设置<title>标签；

（2）理解每个标签的作用，记住标签之间的层级关系；

当然，为了能够熟练掌握本小节的内容，必备的练习是不可缺少的，所以一定要将对应的代码敲一敲！

第三关：网页开发工具

1.常用网页开发工具

在前面，我们通过记事本工具完成了自己的第一个网页的编写。

那么，除记事本工具，是否有其他工具可用来编写网页呢？

答案是：有的。

对于开发者来说，一个好的开发工具往往能够事半功倍，下面我们介绍常见的网页开发工具。

如下图：

从左上角开始，依次为：Dreamweaver、Sublime、WebStorm、HBuilder、VSCode( Visual Studio Code )；

看到这么多开发工具，是不是脑袋都要大了？

不要担心，我们只需要掌握一款实用性最高的工具即可！（其他工具可作为了解，若有兴趣可自行学习，基本使用方式类似，掌握一款其他的即可触类旁通！）

那，我们该选择哪一款工具呢？
我们推荐掌握 VSCode（Visual Studio Code）工具，其在前端开发中使用比率非常高，成为广大开发者工具库中的必备神器。
公认的优势，了解一下： （1）一款免费的开发工具，可随意下载、分发、商用等；（2）一款轻量级的编辑器，安装包占用内存小，启动速度快，用户体验非常好；（3）拥有丰富的插件，覆盖前端、后端代码、框架的对应插件，有助于提高研发效率；（4）提供远程开发、代码跟踪、调试，实现项目的高效管理及协作开发；
这就是 VSCode 被称为“必备神器”的原因，其更多的功能就等着你亲自去探索啦！

2.VSCode下载安装

接下来我们正式学习如何使用 VSCode 工具。

首先，我们需要下载安装 VSCode，步骤如下：

点击网址： https://code.visualstudio.com ，进入对应的 VSCode 官网；根据电脑系统情况，在该网站中选择合适的版本进行下载；如下图所示：

下载完成，进入 VSCode 安装流程（以 Windows 系统为例）：

（1）找到所下载的安装程序，双击下图应用程序

（2）打开安装界面（如下图），选择安装位置

可根据自己的情况，将 VSCode 安装到磁盘的任意目录下。

（3）确定好安装位置，单击’下一步‘，按照下图进行任务勾选；

【说明】

- 勾选【创建桌面快捷方式】 勾选此项，在电脑桌面出现 VSCode 相应图标；可双击直接启动 VSCode，较为便捷；

- 勾选以下两项： 【将“通过 code 打开“操作添加到 Windows 资源管理器文件上下文菜单】【将“通过 code 打开”操作添加到 Windows 资源管理器目录上下文菜单】

勾选上述两个选项：可在文件、目录上点击鼠标右键，选择打开方式：VScode ；

另外，为了方便网页文件的管理，我们将网页文件存放在同一文件夹中；若在该文件夹上点击“右键”，在弹出的快捷菜单中，选择使用 VSCode 打开，该文件夹中所有文件均会被 VSCode 打开，可直接进行编辑，非常方便。

- 不勾选此选项：【将 code 注册为受支持的文件类型的编辑器】 若勾选，则默认使用 VSCode 打开诸如 txt、py 等文本类型的文件；但一般情况下打开文本文件使用专门的文本工具，例如：记事本工具等。因此，建议不勾选该项。

- 勾选【添加到 PATH（重启后生效）】 该选项默认勾选，即不用配置环境变量，可直接使用。

（4）按要求勾选选项后，可直接单击 ‘下一步’，出现如下界面，并点击“安装”按钮；

（5）开始进行安装操作，进入“正在安装”状态；

（6）安装成功，启动 VSCode；

回到电脑的桌面，然后双击 VSCode 图标就可以启动 VSCode 了。

启动界面如下：

（7）安装中文语言包

启动后，你会发现 VSCode 的界面全部显示英文；若想显示中文，需要安装中文语言包。

安装过程如下图所示：

按照上图提示的步骤顺序即可完成中文语言包的安装。

注意：第3步，点击'install'按钮后，才可进行安装。

中文语言包安装完成后，VSCode 界面的菜单则全部替换为中文，如下图所示：

到此，VSCode 就全部安装配置完成。

整个安装过程比较简单，只要你按照上述步骤操作，即可在自己的电脑中完成 VSCode 的安装。希望大家都能够实际操作，巩固本部分的知识点。

VSCode 安装完成，带领大家体验一下其强大之处！

3.使用VSCode开发网页

小节我们学习使用 VSCode 进行网页开发。

打开 VSCode，新建网页有两种方式：

（1）选择“文件”菜单---“新建文件” ；

（2）选择右侧的‘欢迎使用’窗口中的'新建文件'；

如下图所示：

两种方式任选其一，均可完成网页的新建，会出现如下文件：

注意： 此时只是创建了一个文件，还没有对该文件进行保存。因此，写代码之前必须先保存该文件。

那么，如何保存新创建的文件呢？

（1）选择“文件”菜单中的“保存”命令；

（2）使用“Ctrl+S”快捷键进行保存；

此时，出现如下界面：

在此界面中，我们需要完成三个步骤：

（1）确定文件保存的位置：将文件保存到【桌面】下【MyWeb】文件夹中；

（2）确定网页文件名称：名称建议使用小写英文字母，但不要使用汉语拼音，且起的名字最好要有意义，看到网页的名字即可了解该网页内容，也就是“见名知意” ，例如，“login.html”就是登录页面；注意扩展名为".html"或".htm"；

（3）单击‘保存’按钮，完成新建文件的保存。

最最最重要的时刻就要到啦！我们终于可以正式在文件中编写代码啦！！

我们重新实现“我的第一个网页”，还记得怎么写吗？复习一下：

 <html>
     <head>
         <title>我的第一个网页</title>
     </head>
     <body>
         学习线上编程，就来博学谷。
     </body>
 </html>

将上述代码写到 VSCode 的 default.html 文件中，如下图：

代码已经写完，该怎样查看运行效果呢？

如下图所示：

在 VSCode 编辑器中，右击“文件名 default.html”；在弹出的快捷菜单中，选择“打开默认浏览器”，即可打开浏览器查看网页。

学习到这里，我相信你肯定会有一个疑问：使用 VSCode 与记事本开发网页有什么区别呢？

区别就是：使用 VSCode 开发网页，开发效率要高很多。

下面，咱们亲自体验一下：

再次新建一个网页文件，将其保存。

保存之后，不要着急写代码，而是在英文输入法状态下，输入一个叹号(!)；输入完成之后，会弹出一个提示框；

如下图所示：

在提示框中，用鼠标单击第一个叹号，神奇的事情发生啦！！

 <!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 结构骨架代码已经全部自动生成了，你不需要再一点一点的手敲了！是不是很简单？而你下面要做什么呢？

只需要在 <title> 标签中输入自己想要的网页标题，在 <body> 标签中输入具体的内容就可以了!

是不是非常的方便！！我们再接再厉，

关于在 VSCode 中自动生成 HTML 骨架，说法正确的是【】？

第四关：DOCTYPE 与字符集

之前我们了解到，通过 VSCode 能够快速生成整个 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>
     <head>
         <title>我的第一个网页</title>
     </head>
     <body>
         学习线上编程，就来博学谷。
     </body>
 </html>

细心的同学可能会发现：自动生成的代码，与我们自己写的代码有一定的区别！

那这些多出的内容，它们的作用是什么呢？

本门课中我们先学习最重要的三点（其它内容会在后面的课程中继续讲解）：

（1）标签

（2）lang 语言

（3）charset 字符集

1.<!DOCTYPE>标签

<!DOCTYPE>：表示文档类型声明标签，位于文档的最前面，用于向浏览器说明当前文档中显示网页的 HTML 版本。

从初期的网络诞生后，已经陆续发布多个版本的 HTML，如下表格所示：

目前，市场主流使用的是 HTML5 版本，我们只需记住 HTML5 版本的表示方式即可！

那么，HTML5 版本如何声明表示呢？

如下所示：

<!DOCTYPE html>

编写网页时一定不要忘记将声明写在文档最前边，告诉浏览器该网页是按照 HTML5 的标准编写，是合法的。否则浏览器会按照自己的方式解析代码，最终导致页面无法正常打开。

同时书写时需要注意：DOCTYPE 标签必须全部大写，并前置一个英文半角感叹号!，不要写错了哦！

说明：

通过 VSCode 能够获取 DOCTYPE 声明语句，也就是说，VSCode 能够自动生成市场主流显示网页的 HTML 版本，是不是又get到 VSCode 又一强大之处？

2.lang 语言

如下所示：

 <html lang="en">

在 HTML 标签中多了一个 lang="en"，代表什么呢？

lang：表示语言的意思( language )

en：表示的是英文。

整体的含义就是：定义当前文档显示的语言；此代码中指定的是英文。

那么，lang 除指定英文外，还可以指定哪些语言呢？

 lang="zh-CN" :表示定义的语言为中文。

当然，其可以指定多种语言，目前来说，我们记住中文与英文即可。

如果 lang="en" 可以简单的理解为当前网页为英文网页，lang="zh-CN" 则表示当前网页为中文网页。

其实对于网页文档来说，定义为en的文档也可以显示中文，定义为 zh-CN 的文档也可以显示英文。

那么，lang 属性有什么作用呢？

对浏览器的作用：提示与警示的作用。

示例：将 lang 的值修改为：fr；fr 表示法文，也就是当前网页为法文网页，但是当前网页中并没有法文的内容。

具体代码如下所示：

 <!DOCTYPE html>
 <html lang="fr"> <!--这里将lang的值修改成了fr-->
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>博学谷</title>
   </head>
   <body>线上学习，就来博学谷</body>
 </html>