HTML（HyperText Markup Language，超文本标记语言）是构建网页的基础骨架 ，它的核心作用是定义网页的结构和内容，而非实现交互或样式（这部分由 CSS 和 JavaScript 负责）。
一、基础介绍
1、VS Code中有一个标准的HTML5基础模板
操作：在空白.html文件中，输入**!** （英文感叹号），然后按下 Tab 键 或 Enter 键。
html
<!DOCTYPE html> <!--告诉浏览器这是一个HTML5页面-->
<html lang="en"> <!--网页最外层容器-->
<head> <!--头部：存放网页信息-->
<meta charset="UTF-8"> <!--确保中文不乱码-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 移动端视口适配完整配置：
width=device-width：视口宽度适配设备屏幕宽度
initial-scale=1.0：初始缩放比例100%
maximum-scale=1.0：最大缩放比例100%（禁止用户放大）
user-scalable=no：禁止用户手动缩放页面
作用：保证移动端页面固定尺寸，避免用户缩放导致布局错乱 -->
<title>Document</title> <!--网页标题（可更改）-->
</head>
<body> <!--身体：存放网页显示内容-->
</body>
</html>注：*<!-- --> * 这是注释标签(不显示在页面)，可以使用快捷键"Ctrl+/"
2、如何在VS Code中运行html
在代码区域空白处点击鼠标右键，弹出上下文菜单，点击Open Default Browers （默认浏览器打开）选项，或者使用快捷键是Alt+B。
二、标签语法
标签成对出现，中间包裹内容
<>里面放标签名
结束标签比开始标签多/（如：开始标签"<h1>",结束标签"</h2>"）
标签分类： 单标签：成对出现的标签
双标签：只有开始标签，没有结束标签（<br>、<hr>）
三、标题标签
标签名：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>标题标签</title>
</head>
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
</body>
</html>
四、段落标签
标签名：p（双标签）
显示特点：独占一行、段落之间存在间隙
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>段落标签</title>
</head>
<body>
<p>1930 年，克莱德・汤博根据洛厄尔等人的预测发现了冥王星。随后，英国 11 岁的维尼蒂亚・伯尼建议将其命名为 Pluto，源自罗马冥界之神。</p>
<p>冥王星有五颗卫星，分别为卡戎、尼克斯、许德拉、科波若斯和斯提克斯。其中卡戎是最大的卫星，直径约为冥王星的一半，两者常被视为双行星系统。</p>
</body>
</html>
五、换行与水平线标签
换行：<br>（单标签）
水平线：<hr> （单标签)
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>换行与水平线标签</title>
</head>
<body>
<hr>
太阳系
<br>
冥王星Pluto
</body>
</html>
注：因为浏览器无法识别换行符，所以在body中直接使用回车进行换行，无法在网页中实现换行效果（如下图所示）
六、文本格式化标签
作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗 （strong）、倾斜 （em）、++下划线++ （ins）、删除线（del）等。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本格式化标签</title>
</head>
<body>
<strong>加粗</strong>
<em>倾斜</em>
<ins>下划线</ins>
<del>删除线</del>
</body>
</html>
七、综合使用
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pluto</title>
</head>
<body>
<h1><ins><em>冥王星Pluto</em></ins></h1> <!--标题1及斜体-->
<del>矮行星</del> <!--删除线-->
<br><br>
<p><strong>基本信息：</strong>1930 年，克莱德・汤博根据洛厄尔等人的预测发现了冥王星。随后，英国 11 岁的维尼蒂亚・伯尼建议将其命名为 Pluto，源自罗马冥界之神。</p> <!--段落1及加粗-->
<p><strong>卫星：</strong>冥王星有五颗卫星，分别为卡戎、尼克斯、许德拉、科波若斯和斯提克斯。其中卡戎是最大的卫星，直径约为冥王星的一半，两者常被视为双行星系统。</p> <!--段落2及加粗-->
</body>
</html>