HTML 文档的结构是构建网页的基础，通过合理使用标签，我们能够清晰地定义文档的各个部分。在这篇博客中，我们将介绍 HTML 文档的基本结构，包括 <!DOCTYPE>, <html>, <head> 和 <body> 等标签。
1.<!DOCTYPE>
<!DOCTYPE> 声明位于 HTML 文档的最顶部，它并不是 HTML 标签，而是一种告诉浏览器文档类型和版本的声明。它的作用是确保浏览器按照正确的文档类型解析页面，以保证页面的正确渲染。
<!DOCTYPE html>
这个声明告诉浏览器使用 HTML5 标准解析页面。在过去，不同的 HTML 版本有不同的文档类型声明，但 HTML5 的普及使得大多数网页都采用这个简单的声明。
2. <html>
<html> 元素是整个 HTML 文档的根元素，包含了文档的全部内容。它有两个子元素：<head> 和 <body>。
<!DOCTYPE html>
<html>
<!-- head 和 body 元素都是写在 html 标签里面 -->
</html>
3. <head>
<head> 元素用于包含与文档相关的元信息（meta-information），而非实际的页面内容。在 <head> 中，我们可以设置文档的标题、引入外部样式表和脚本、定义字符集等。
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<meta charset="UTF-8">
<!-- 其他元信息和引入外部资源的标签 -->
</head>
<!-- body 元素在这里 -->
</html>
4. <body>
<body> 元素包含了 HTML 文档的实际内容，如文本、图像、链接等。这是用户直接看到和与之交互的部分。在 <body> 中，我们可以使用各种 HTML 标签来组织和呈现内容。
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<meta charset="UTF-8">
<!-- 其他元信息和引入外部资源的标签 -->
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>Hello World！</p>
<!-- 其他页面内容 -->
</body>
</html>
执行效果
总结
通过合理使用这些标签，我们能够创建结构良好、清晰易读的 HTML 文档。这种结构不仅有助于浏览器正确解析页面，还使得代码易于维护和理解。在学习和使用 HTML 时，深刻理解文档结构是迈向更高级前端技术的关键一步。
