HTML文件是网页的基础载体，所有网页内容都需要放在符合规范的HTML结构中才能被浏览器正确解析和渲染。一个标准的HTML文档有固定的组成部分，每个部分都有明确的作用，缺失或者写错都可能导致页面显示异常。
HTML文件的核心结构
一个完整的HTML文档主要包含以下几个部分：
- DOCTYPE声明：放在文档最开头，用于告诉浏览器当前文档使用的HTML版本，让浏览器用对应的标准模式渲染页面。
- html根元素：整个HTML文档的最外层容器，所有其他内容都放在<html>标签内部，通常会设置lang属性指定文档的语言，比如中文文档可以设置lang="zh-CN"。
- head头部区域：放在<html>标签内的开头部分，用来存放文档的元数据，比如字符编码、标题、引入的样式和脚本等，这些内容不会直接显示在页面上。
- body主体区域：放在<html>标签内的头部之后，所有需要在页面上展示的内容，比如文字、图片、按钮、表单等，都放在<body>标签内部。
DOCTYPE声明的作用与写法
DOCTYPE声明不是HTML标签，它是一条指令，浏览器会根据它来判断用什么文档标准解析页面。如果没有写DOCTYPE，浏览器可能会进入怪异模式，导致页面渲染效果和预期不符。
现在最常用的HTML5标准的DOCTYPE写法非常简单，只要放在文档第一行即可：
<!DOCTYPE html>
如果是更早的HTML版本，DOCTYPE的写法会更复杂，需要包含对应的文档类型定义链接，比如HTML4.01的严格模式写法：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.ipipp.com/TR/html4/strict.dtd">
不过现在基本都使用HTML5标准，所以只需要写<!DOCTYPE html>就可以满足绝大多数场景的需求。
完整的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>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是页面上的第一段文字内容。</p>
<img src="https://picsum.photos/200/300?random=2" alt="示例图片">
</body>
</html>结构验证方法
写完HTML文件后，可以通过浏览器的开发者工具检查结构是否正确。打开页面后按F12键，在Elements面板中可以看到解析后的DOM结构，如果DOCTYPE和各个标签的嵌套关系正确，就说明文档结构没有问题。另外也可以在<head>区域添加<meta>标签指定字符编码为UTF-8，避免出现中文乱码的问题。