HTML是前端开发的基础标记语言，创建HTML文件并编写基础文档是入门前端的第一步，整个过程不需要复杂的配置，只需要掌握基本的文件操作和标签规则即可完成。
创建HTML文件的准备工作
首先需要准备一个文本编辑器，新手可以选择系统自带的记事本，也可以选择更专业的编辑器比如VS Code、Sublime Text等，专业编辑器会有语法高亮和自动补全功能，能提升编写效率。
选择编辑器的小建议
- 新手初期可以用记事本熟悉基础语法，避免依赖编辑器的自动提示
- 后续学习可以选择VS Code，免费且插件生态丰富，适合长期开发使用
- 不要使用Word这类富文本编辑器，它们会自动添加格式代码，导致HTML文件无法正常运行
HTML基础文档的结构
一个标准的HTML基础文档有固定的结构，所有内容都需要放在对应的标签中，核心结构包含文档声明、html根标签、head头部标签和body主体标签四个部分。
各部分标签的作用
| 标签名称 | 作用说明 |
|---|---|
| <!DOCTYPE html> | 文档声明，告诉浏览器当前文档使用的是HTML5标准，必须放在文件第一行 |
| <html> | 根标签，所有其他HTML标签都需要放在这个标签内部 |
| <head> | 头部标签，存放页面的元数据，比如字符编码、标题、引入的样式和脚本等 |
| <body> | 主体标签，存放页面展示给用户的所有内容，比如文字、图片、按钮等 |
完整的基础HTML文档编写示例
下面是完整的基础HTML文档代码，你可以直接复制内容保存为.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>欢迎来到我的第一个HTML页面</h1>
<p>这是一段普通的文本内容，用来展示HTML基础文档的编写效果。</p>
<p>你可以修改这里的文字内容，保存后刷新浏览器就能看到变化。</p>
</body>
</html>
保存和运行HTML文件
编写完代码后需要正确保存文件才能运行，保存时需要注意两个要点：一是文件扩展名必须是.html或者.htm，二是编码格式要选择和head中声明的一致，通常选择UTF-8编码避免中文乱码。
保存步骤说明
- 点击编辑器的文件菜单，选择另存为选项
- 在保存对话框中，文件名输入
index.html，注意扩展名不要写成.txt - 编码选择UTF-8，然后选择保存路径点击保存
- 找到保存好的index.html文件，双击用浏览器打开就能看到页面效果
常见问题解答
问：保存后双击文件打开是代码不是页面怎么办？
答：通常是文件扩展名没有改对，检查文件属性，确保扩展名是.html，不是.txt.html，系统可能默认隐藏了扩展名，需要在文件夹选项中开启显示扩展名再修改。
问：页面中文显示乱码怎么解决？
答：首先检查head标签里是否有<meta charset="UTF-8">这行代码，然后确认文件保存时的编码是UTF-8，两个设置一致就能解决乱码问题。
掌握以上步骤后，你就可以独立创建和编写基础的HTML文档了，后续可以尝试添加更多标签，比如图片标签<img>、链接标签<a>等，丰富页面的内容。