HTML零基础入门教程， 零基础学习HTML网页制作（HTML基本结构）
时间：2023-09-25 20:48:01 | 来源：网站运营
时间：2023-09-25 20:48:01 来源：网站运营
HTML零基础入门教程， 零基础学习HTML网页制作（HTML基本结构）：
HTML 基本结构：前端拼图的第一块碎片
为什么要学习 HTML 基本结构？ 因为，你以后编写的每一个网页都是以HTML的基本结构为基础。因此，HTML 基本结构是 HTML 语言必学内容。 本课程通过通俗易懂的语言及小案例帮你快速掌握 HTML 基本结构，并使用网页开发神器VSCode 实现简单的网页
第一关：HTML 标签语法规范
本门文程我们学习 HTML 的基本结构。
在正式学习之前，我们需要先明确一个问题，
为什么要学习 HTML 基本结构？因为身为开发人员，你以后编写的每一个网页都是基于 HTML 的整体结构。所以说，HTML 基本结构至关重要。
在此基础上，我们将学习标签的书写规范及注意事项，完成对于 HTML 基本结构的整体认知。
最后，我将向大家介绍一个非常牛逼的工具-VSCode，其能够快速的编写 HTML 代码，提高开发效率，在实际工作中发挥重要作用。
学完本课程，你将有如下收获：
（1）掌握 HTML 标签的书写规范以及注意事项 （2）能够写出 HTML 骨架标签 （3）能够使用 VSCode 工具开发网页
1.网页文件创建
在讲解标签的具体语法规范前，我们首先要创建一个网页文件。 说到文件，我们知道文件有类型，也就是有扩展名。例如，记事本文件，它的扩展名为：.txt。
那么，
网页文件的扩展名是什么呢？网页文件的扩展名为：'.html' 或者是'.htm'。所以，看到以'.html'或'.htm'结尾的文件，就应该马上get到一个重要的信息：这是网页文件，可通过浏览器打开对应文件，查看具体的网页内容。 但是，需要注意的是：
不能随意创建网页文件！为什么呢？因为一个网站包含众多网页，相对应的是也会有很多的网页文件；若随意创建，不利于后期管理。
那应该如何做？在桌面、D盘或E盘(当然，你也可以选择你喜欢的一个盘)中创建一个文件夹，将创建的网页文件都放在该文件夹中统一管理；后期即使文件再多，也能及时找到并易于分类管理。
接下来，我们就创建第一个网页文件：Step1：在电脑桌面上新建 一个文件夹，命名为：MyWeb；
注意：后续创建的网页文件，均放在此文件夹中进行管理。该文件夹的名称，也可根据自身需求命名。
Step2：在该文件夹内，创建一个文本文件，即扩展名为'.txt'的文件；文件可随意命名，此处命名为：index.txt。
文本文件创建完成，如下图所示：
Step3：修改文本文件的拓展名；网页文件的扩展名为:'.html'或'.htm'，因此，需要将创建的文本文件拓展名改为网页文件的拓展名，即改变其类型。
最终修改后的结果如下图所示，至此，网页文件创建完成：
可以看到，修改完扩展名，文件名前面出现了一个浏览器的图标；显而易见，我们创建的文件就是一个网页文件。
双击该文件，通过浏览器就能打开该文件：
嗯~小朋友，此时你是否有很多问号？？？？怎么空白一片，没有任何内容？
不要着急，这就是我们接下来要解决的问题啦！
不过，为了能够更好的解决问题，我们先对本小节内容做个回顾：
（1）网页文件的扩展名为:'.html' 或'.htm'
（2）创建网页文件
（3）通过文件夹来管理创建的网页文件
2.HTML 标签语法规范
本小节我们来解决前边遇到的问题：
向空白的网页文件内添加内容！Step1：选中‘index.html’文件，右击，在弹出的快捷菜单中，选择‘打开方式’--‘记事本’；
注意：若没有记事本，可点击“选择其他应用（C）”，查找记事本工具。
如下图所示：Step2：打开 ’记事本‘，即可开始在记事本中编写 HTML 标签。
但是，此时你发现了一个问题：
你好像还不会写，连最基本的规范也不知道！！！！！不要着急，这就告诉你！
书写 HTML 标签时，有一定的规范要求：（1）所有的标签都包含在一对尖括号中，尖括号必须在英文状态下输入；
（2）标签一般情况下都是成对出现，这种情况称为“双标签”；
（3）第一个标签为：开始标签；第二个标签为：结束标签；
（4）必须要有结束标签，结束标签是一个斜杠：“/”；
如下图所示：当然，
HTML 中，也有单个标签的出现，这种情况称为：“单标签”；如下图所示：
注意：单标签，也是用’斜杠‘结束，并且与标签名 br 之间用一个空格进行分隔。
当然，在 HTML 标签中，单标签非常少（在后面的课程中会重点讲解），在这里有基本的了解即可。
本小节你需要掌握：
（1）HTML 标签是由尖括号包围的关键词，例如：<html>；
（2）HTML 标签通常成对出现，例如，<html>与</html>，我们称之为双标签，标签对中的第一个标签是开始标签，第二个标签是结束标签；（3）有些特殊标签必须是单个标签（当然这种情况比较少），例如， ，称为单标签。
3.HTML 标签的关系
掌握了 HTML 标签的书写规范，本小节我们继续学习
标签的关系。
HTML 中，双标签的关系可以分为两类：
包含关系与并列关系。那么，
如何理解包含关系呢？如下图所示：例如：上图的<title>标签嵌套在<head>标签内部，也就是<head>标签与<title>标签是包含关系，
包含关系也可称为“父子关系”。下面这张图能够帮助你理解标签的包含关系：
那么，什么是并列关系？我们来看一个例子，如下图所示：
我们可以发现
标签与标签位置并列，并不是从属关系，像这种情况，我们称之为“并列关系”可以将这种并列关系理解为“兄弟关系”，就像“熊大与熊二”。
理解了标签的关系后，我们通过一个练习题检测一下你对本小节内容的掌握情况：
互动专区转动你的小脑袋，说出下列 HTML 中标签、标签、标签之间的关系。 <html> <head> </head> <body> </body> </html>不要着急点击下一步，好好思考一下哦！！
答案解析：由于<head>标签与<body>标签都是嵌套在<html>标签内部，所以说<html>标签与<head>标签、<body>标签是包含关系，而<head>标签与<body>标签的位置并列，所以是并列关系。
HTML整体结构
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 骨架，说法正确的是【】？
- A. 在 VSCode 中输入!号，然后按住 tab 键；
- B. 在 VSCode 中没办法自动生成 HTML 骨架；
- C. 在 VSCode 需要安装一个插件后才能自动生成 HTML 骨架；
- D. 在 VSCode 中按 tab 键就可以自动生成 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>现在，用浏览器打开该网页，查看具体的显示效果。效果如下图所示：
通过上图可以看到，在浏览器的右上角给出一个提示框，单击‘选项’按钮给出一个提示，询问是否‘翻译成法语’。因为我们指定的 lang=fr，而当前的网页中没有法语，所以会给出这样的提示。
现在你可以自己尝试一下，将 lang 的值修改成 fr，在浏览器中打开网页，看一下是否会有如上的提示？
【注意】我们目前所做网站均为中文网站，因此，
建议将 lang 的值定义为：zh-CN。3.charset字符集
我们还有一个新发现，如下所示：
<meta charset="UTF-8" />
它代表什么意思呢？
charset：表示字符集。
UTF-8：表示字符集中的一种
那么，什么是字符集呢？字符集是多个字符的集合，以便计算机能够识别和存储各种文字。 网页中有多种类型的字符，而我们需要将多种字符存储到计算机中，就需要按照一定的方式来存储这些字符。
charset的取值除了有 UTF-8 以外，还有很多的取值，例如：GB2312 (表示简体中文)，BIG5（表示繁体中文），GBK（包含简体中文与繁体中文）等。
目前，
使用最多的是 UTF-8，被称之为‘万国码’，基本上包含了全世界所有国家需要用到的字符。
UTF-8 带来的好处：从国外访问国内网站时，不会出现乱码。
注意： <meta charset="UTF-8" />
这行代码是必须要写的代码，若不写，网页有可能会出现乱码的情况。同时要注意写法，统一写为：UTF-8，不要写为：utf8 或 UTF8 等形式。
下面对本小节进行总结，帮助你巩固巩固：
<!DOCTYPE html>：表示文档类型声明标签，告诉浏览器这个网页使用的是HTML5版本来显示网页。
<html lang="en">：告诉浏览器这是一个英文的网站，本页面采取英文来显示。
<meta charset="UTF-8" />：本行代码必须要写，采用UTF-8来保存文字，若不写可能会出现乱码。
作业题
作业：使用 VSCode 编辑器创建页面
问题描述：使用 VSCode 编辑器，创建网页框架代码结构，在此基础上完成网页内容的填充，并通过浏览器预览网页效果。
过程分析：通过 VSCode 可以快速创建网页框架代码，具体过程是：通过 VSCode 创建一个 HTML 网页文件，然后在英语输入法状态下，输入一个叹号（！）；输入完成后，会出现一个提示框；在提示框中，用鼠标右键第一个叹号，即可创建好一个网页的骨架代码。最后，可根据个人意图修改
<title>标签与
<body>标签的内容，并通过浏览器查看实现效果。
实现框架：恭喜！你已经完成了【 HTML 基本结构】课程的学习，我们对本门课做一个简单的总结，如下图所示：
通过本课程的学习，我们掌握了 HTML 整体结构，网页开发的标签语法规范，使用网页开发工具 VSCode 完成案例开发，并掌握了网页开发的实用性技巧，其都属于网页开发的基本功能方面。
很多人可能会对基础知识嗤之以鼻，但是，相信我扎实的基础知识能够让你走的更快更远，让你少走弯路！！
我相信大家肯定都有了一定的收获，好的开始是成功的一半，希望本门课程能够为你后续的学习树立信心。奋进吧，后浪！！
在线咨询
