【HTML】之基本标签的使用详解
HTML（HyperText Markup Language，超文本标记语言）是构建网页的基础。它不是一种编程语言，而是一种标记语言，用于描述网页的内容和结构。本文将带你了解HTML的基础知识，并通过详细的代码示例和中文注释进行讲解。
本文使用软件：VS Code
相关教程：VS Code安装
1. HTML文档的基本结构
每个HTML文档都遵循一定的结构：
<!DOCTYPE html> <!-- 声明文档类型为HTML5 -->
<html lang="zh-CN"> <!-- 根元素，lang属性指定语言为中文 -->
<head><meta charset="UTF-8"> <!-- 设置字符编码为UTF-8，支持中文 --><title>我的第一个网页</title> <!-- 设置网页标题，显示在浏览器标签页 -->
</head>
<body><!-- 网页的可见内容放在这里 --><h1>这是一个一级标题</h1><p>这是一个段落。</p>
</body>
</html>运行：
<!DOCTYPE html>：声明文档类型为HTML5，这是必须的，它告诉浏览器如何解析HTML文档。
-
<html>：HTML文档的根元素，所有其他元素都包含在其中。lang属性指定文档的语言，方便搜索引擎和屏幕阅读器理解。
-
<head>：包含关于HTML文档的元信息，例如字符编码、标题、样式表链接等。这些信息不会直接显示在网页上。
-
<meta charset="UTF-8">：设置字符编码为UTF-8，确保能够正确显示各种语言的字符，包括中文。
-
<title>：设置网页标题，显示在浏览器标签页或窗口标题栏中。
-
<body>：包含网页的可见内容，例如文本、图像、视频等。
2. 常用HTML标签
2.1 标题标签
<h1>到<h6> 用于定义不同级别的标题，<h1> 表示最重要的标题，<h6> 表示最不重要的标题。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>运行：
2.2 段落标签
<p> 用于定义段落。
<p>这是一个段落。浏览器会自动在段落前后添加空白。</p>运行：
2.3 换行标签
<br> 用于插入换行符。
<p>这是一行文字。<br>这是另一行文字。</p>运行：
2.4 链接标签
<a> 用于创建超链接，href 属性指定链接的目标地址。
<a href="https://www.example.com">点击访问示例网站</a>运行：
2.5 图像标签
<img> 用于插入图像，src 属性指定图像的URL，alt 属性提供替代文本，当图像无法显示时显示。
<img src="image.jpg" alt="这是一张图片">运行：
2.6 列表标签
-
无序列表：<ul> 和 <li>
<ul><li>列表项 1</li><li>列表项 2</li><li>列表项 3</li>
</ul>运行：
-
有序列表：<ol> 和 <li>
<ol><li>列表项 1</li><li>列表项 2</li><li>列表项 3</li>
</ol>运行：
2.7 div 和 span 标签
-
<div>：块级元素，用于组织文档结构，通常用于CSS样式设置。
-
<span>：内联元素，用于对一小段文本进行样式设置。
<div style="background-color:lightblue;">这是一个div，它会占据一行。 <span style="color:red;">这是一个span，它只包裹着文字。</span>
</div>运行：
2.8 表格标签
<table>、<tr>、<th>、<td> 用于创建表格。
<table><tr> <!-- 表格行 --><th>表头 1</th> <!-- 表头单元格 --><th>表头 2</th></tr><tr><td>数据 1</td> <!-- 表格数据单元格 --><td>数据 2</td></tr>
</table>运行：
3. 总结
本文介绍了HTML的基础知识和一些常用的标签，希望能够帮助你入门HTML。学习HTML是一个循序渐进的过程，需要不断练习和实践。记住，熟能生巧！下期见，谢谢~