你好，我是云桃桃，今天，来写第一个网页啦，并详细介绍一下网页框架构成以及简单调试。
一、开发网页以及预览方法
在 vscode 左侧资源管理区的文件夹下，建立 1 个文件。比如，01-firstPage.html
然后先自己键入一遍代码，理解了的话，后续可通过按英文感叹号!并回车，可生成 html 关键代码，然后补充下面 body 中的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>一起学习前端，一起成长！</title>
</head>
<body>
<h1>这是一个大标题</h1>
<p>这是一个段落</p>
</body>
</html>
写完后如何查看效果呢？
在页面按右键菜单，选择 open-in-default-browser，效果如图。注：浏览器尽量用 google 的哈。
上述方法，每次我们写完按 ctrl+s保存以后，需要在浏览器按F5刷新一下，才会出现改动的内容，那能不能保存之后直接就看到改动的效果呢？能。
这时候就要用到实时预览了。怎么做呢？在页面按右键，选择 open with live server，当改动内容可以实时看到网页变化，如动图。
二、什么是 HTML 标签？
HTML 页面由一系列 HTML 标签组成，而 HTML 标签是构建页面结构和内容的基本元素。每个 HTML 标签由尖括号 < 和 > 包围。
HTML 页面和 HTML 标签元素之间的关系呢，就像是人体和人体的各个器官和组织之间的关系一样，HTML 页面是整体，而 HTML 元素则是构成整体的各个部分。
接下来我们就来看看这些重要部分的写法和含义。
三、代码解释
1、声明部分
<!DOCTYPE html> ：这是文档类型声明，告诉浏览器正在使用的 HTML 版本，本次声明的"html"是最新标准 HTML5 , 直到有新版本出现之前，我们以后也务必这样声明。
从 1991 年网络诞生后，HTML 版本已经经历了 2.0,3.2,4.0.1，直至现在的咱们常听到的 html5。为什么要迭代呢？
就像机器需要每次迭代使效率更高一样，旨在改进 HTML 的语法和特性，使其更适合现代 Web 应用的开发需求，并提升用户体验。
HTML5 是目前最新的 HTML 标准，也是开发者们通常所采用的标准版本。
2、页面根元素
<html lang="en"> ：这是 HTML 顶级根元素，它包裹了整个 HTML 文档的内容，指定了文档的主要语言为英语（"en"代表英语）。HTML 根元素 <html> 是 HTML 文档的必要组成部分，HTML 根标签就像是什么呢？
它是一座高楼的地基，为整个网页提供了稳固的基础，确保网页结构的稳定和完整。
它提供了文档的整体结构和语义，并且定义了文档的起始和结束，确保文档能够被正确地解析和显示。
3、头部部分
<head>：这是文档的头部部分，用于包含一些元数据和引用外部资源，如字符编码、样式表、脚本等。
<meta charset="UTF-8" />：这个元标签指定了文档的字符编码为 UTF-8。这个是必须设置的，确保众多浏览器正确解析和显示文档中的字符。
如果页面乱码，就要看一下是否设置了字符编码，最通常的是 UTF-8，当然还有一种叫GBK。2者的区别在于——
UTF-8可以表示Unicode 中的所有字符，包括世界上所有的语言文字、符号和表情。而GBK（Guojia Biaozhun Kuozhan）只是用于表示中文字符集，包括简体中文、繁体中文和一些特殊符号。
由此可看出， UTF-8 具有更广泛的字符覆盖范围和更好的兼容性，
因此，我们编程大都使用 UTF-8 编码方式。否则，在部分情况下，可能会乱码，如下图所示。
<meta http-equiv="X-UA-Compatible" content="IE=edge" />：这个元标签设置了浏览器的兼容模式，告诉 IE 浏览器使用最新的渲染引擎来渲染页面。
<meta name="viewport" content="width=device-width, initial-scale=1.0" />：这个元标签定义了页面的视口设置，指定了页面在移动设备上的宽度等于设备的宽度，并且初始缩放比例为 1.0，确保页面在移动设备上显示正常。
<title>：这是页面的标题标签，定义了网页在浏览器标签栏上显示的标题。如图。
4、可见的内容部分
<body>：这是 HTML 文档的主体部分，包含了页面上要显示的所有内容，如文本、图片、链接，视频等等。
<h1> ：这是标题标签，定义了页面中的一个一级标题，通常显示为较大的字体。
<p>：这是段落标签，定义了页面中的一个段落，用于显示文本内容。
这些标签是 HTML 中常用的一些基本标签，用于构建网页的结构和内容。
那么，如何看到这些标签元素之间的层级关系呢？答案是在浏览器里。
四、在浏览器查看结构/调试代码
刚刚，我们写完代码以后，通过在 google 浏览器打开。
为什么使用 Google Chrome 作为主要的 Web 浏览器，而不是微软带的 IE 或者 火狐（Mozilla Firefox） 呢？
因为它可以提供更好的开发体验和效率，帮助开发者更快速地构建高质量的网站和 Web 应用，我们以后的电脑端调试工具就用 google 。
除了查看页面效果，通过调试，可以方便查看或者解决页面布局、样式，或者后续 JavaScript 的交互功能方面的问题。
那如何，调出调试工具呢？
在浏览器按 F12，或者在浏览器右上角的设置-更多工具-开发者工具，会出现如图的界面。
依次展开可以看到我们写的标签以及标签之间的层级关系，我们后续也会在浏览器里调试代码。
那如何退出调试模式呢？还通过 F12 来快捷关闭即可退出。
好了，以上，本节完。
排版：云桃桃 | 图片设计：云桃桃
作者介绍：
云桃桃，在写作的程序媛。终身学习者，陪你一起编程，一起写作❤️
1128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
