HTML文档基本结构写法教程
HTML（超文本标记语言）是构建网页的基础，每一个网页本质上都是一份HTML文档。掌握HTML文档的基本结构是学习前端开发的第一步，本文将详细介绍标准HTML文档的组成部分和编写方法。
一、HTML文档的核心结构
一个完整且符合规范的HTML文档，主要由文档声明、根元素、头部区域和主体区域四个部分组成，各部分各司其职，共同构成网页的完整内容。
1. 文档声明（DOCTYPE）
文档声明位于HTML文档的最顶部，用来告诉浏览器当前文档使用的是哪个版本的HTML标准，确保浏览器以正确的模式解析页面。
对于HTML5标准，文档声明非常简单，只需要写：
<!DOCTYPE html>
注意：文档声明不区分大小写，不过通常习惯写成大写形式，且文档声明不属于HTML标签，不需要闭合。
2. 根元素（html标签）
<html> 标签是HTML文档的根元素，所有其他HTML标签都需要放在 <html> 标签内部。它通常会包含一个 lang 属性，用来指定文档的主要语言，方便搜索引擎和屏幕阅读器识别，比如中文网页可以设置为 lang="zh-CN"。
3. 头部区域（head标签）
<head> 标签用于定义文档的头部，里面包含的内容不会直接显示在网页的页面上，而是用来配置文档的元信息、引入外部资源、设置页面标题等。
头部区域常见的配置项包括：
- 字符编码声明：通过 <meta charset="UTF-8"> 设置，避免出现中文乱码问题，这是现代HTML文档必备的配置。
- 视口配置：通过 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 设置，让网页在移动设备上能正确适配显示。
- 页面标题：通过 <title> 标签设置，标题会显示在浏览器的标签页上，也会影响搜索引擎的收录结果。
- 引入外部资源：比如通过 <link> 标签引入CSS样式文件，通过 <script> 标签引入JavaScript文件。
4. 主体区域（body标签）
<body> 标签是HTML文档的主体部分，所有需要在网页上展示的内容，比如文字、图片、按钮、表格等，都需要放在 <body> 标签内部。
二、完整HTML文档示例
下面是一个符合HTML5标准的完整HTML文档示例，包含了上述所有核心部分，你可以直接使用这个模板开始编写自己的网页：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个HTML页面</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是我的第一个HTML文档，这里可以写网页展示的所有内容。</p>
<img src="example.jpg" alt="示例图片">
<script src="script.js"></script>
</body>
</html>在上面的示例中，我们设置了文档字符编码为UTF-8，适配移动端视口，页面标题为“我的第一个HTML页面”，还引入了外部的CSS样式文件 style.css 和JavaScript文件 script.js，主体部分包含了一个一级标题、一段文字和一张图片。
三、编写注意事项
编写HTML文档时，有几个常见的注意点需要规避：
- 文档声明必须放在文档的最开头，前面不能有其他内容，包括空格和空行。
- <html>、<head>、<body> 标签都需要正确闭合，嵌套关系要清晰，不能交叉嵌套。
- 如果设置字符编码为UTF-8，需要将HTML文件本身也保存为UTF-8编码格式，否则还是可能出现乱码。
- <title> 标签的内容不要过长，尽量简洁地描述页面核心内容，对SEO更友好。
只要掌握了上述基本结构，你就可以基于这个模板扩展更多HTML标签，构建出功能丰富的网页内容了。