目录
在前端开发中，HTML 是所有网页的基础，也是每一名前端开发者绕不开的第一步。
本文将从 HTML 是什么 开始，带你认识 HTML 的基本结构、常见标签以及标签之间的关系，并通过简单直观的代码示例，帮助你快速理解 HTML 是如何构建一个网页的。
如果你是 刚接触前端的新手，或者对 HTML 的整体结构还不够清晰，那么这篇文章将非常适合作为你的入门参考。
一、什么是HTML
HTML是超文本标记语言 --- HyperText Markup Language 是一种用来告诉浏览器怎么组织页面的标记语言
HTML由一系列的标签组成，知道了标签如何使用也就知道了如何书写HTML
二、标签语法
例如：
大部分的标签都会有开始标签和结束标签，也称之为双标签，但是也会有少量的单标签
如：< hr> <img>等等,这些标签以后都是会慢慢接触到的
三、初识HTML代码
下来进入代码环节
此系列使用的前端工具为:Trae CN
首先这是在编辑器中输入!,编辑器自动为我们搭的框架
我们来逐句分析是这个架子的每句话是用来干什么的
<!DOCTYPE html>
这句话是用来声明的当前的页面是使用HTML的规范编写的
html标签元素
这个元素包含了页面之中所有的内容 html 是整个文档的根元素，所有页面内容都必须放在它内部。在html中，lang这个属性是用来声明网页的主要语言，帮助浏览器正确处理页面内容
- en 代表英语，这意味着该页面的主要语言是英语
- zh-CN代表的是中文
<head>元素
头部元素，包含了文档的元(meta)数据
字符集
<meta charset="UTF-8">
表示该文档的字符集设置为UTF-8，UTF-8 包括绝大多人类书面语言的大多数字符，在我们平时写代码的时候大多数使用的也是UTF-8
移动端页面适配
<meta name="viewport" content="width=device-width, initial-scale=1.0">
确保网页在移动设备上以最佳状态呈现，提升用户浏览体验
-
<meta>标签
标签用于定义文档的元数据（即关于文档的信息），如字符集、作者、描述、关键字等。这些元数据并不会直接显示在页面内容中，但它们为浏览器、搜索引擎和其他应用提供了必要的信息。
例子：
<meta charset="UTF-8">
这个标签告诉浏览器使用 UTF-8 编码来解析网页的内容，UTF-8 是一种字符编码方式，几乎支持世界上所有的语言字符。它确保网页中所有字符的正确显示。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这是一个专门用于移动端页面适配的 meta 标签。它告诉浏览器如何控制页面的显示区域（viewport）和缩放行为，确保网页在不同设备（尤其是移动设备）上有良好的用户体验。
具体解释：
name="viewport"：这告诉浏览器该 meta 标签是用于控制视口（viewport）的配置。视口是浏览器显示网页内容的区域。在桌面浏览器中，视口通常是整个浏览器窗口的大小，而在移动设备中，视口则通常是屏幕的大小。
content="width=device-width"：这部分指定了视口的宽度，device-width 表示视口宽度应该与设备的屏幕宽度一致。简单来说，width=device-width 告诉浏览器，不要缩放网页，而是使网页宽度与设备屏幕的宽度相匹配。这是移动端适配的关键，因为它可以避免网页被缩小以适应小屏幕，确保网页的元素不会太小，用户能够轻松阅读。
content="initial-scale=1.0"：这个参数设置了页面加载时的初始缩放比例。initial-scale=1.0 表示页面初始时不进行任何缩放，即网页内容按照真实的尺寸显示，而不是自动放大或缩小。这有助于确保用户第一次打开页面时，内容以最适合屏幕的比例显示。
title元素
设置了页面的标题
也就是这里的名字
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html_01</title>
</head>
<body>
</body>
</html>随着我们的更改，我们网页的标题也进行了更改
body元素
包含了页面上所有显示在页面上的的内容
四、标签关系
在日常中，见到的关系分为两种关系
并列关系（兄弟关系）
例如这两个div就输入兄弟关系
嵌套关系（父子关系）
这两个div就是父子关系
五、HTML中的标题和段落
标题标签 h
双标签
在日常网页的中，标题标签的使用可谓是无处不在，下面两个例子，例如，新浪新闻页面
h标签就是用来凸显文章主题的
h标签的语法
共分为h1-h6，下面展示一下
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html_01</title>
</head>
<body>
<h1>这是h1标签</h1>
<h2>这是h2标签</h2>
<h3>这是h3标签</h3>
<h4>这是h4标签</h4>
<h5>这是h5标签</h5>
<h6>这是h6标签</h6>
</body>
</html>
默认是加粗的效果，当然后期我们通过css可以修改这个属性，目前我们就乖乖的使用它的默认吧
段落标签p
双标签
表示html中的一个段落
每行只显示一个，文字显示不开会自动换行，同样的，相关的样式可以使用css进行设置
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html_01</title>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>