HTML 文件到底是什么
基础定义与文本标记
HTML 是一种用于描述网页结构和内容的 标记语言，它由一组 标签 和文本内容构成。通过标签来标识头部、段落、链接、图片等元素，浏览器据此呈现页面的外观与布局。
从本质上说，HTML 文件是一份纯文本，只不过其中包含了特殊的标记符号来指示浏览器应如何显示内容。常见的扩展名有 .html 和 .htm，用于区分不同的网页文件。
下面给出一个最小化的 HTML 示例，用以直观理解结构：
示例页面
这是一个简单的段落。
在浏览器中打开这类文件时，标签会被解析成页面的标题、文本、段落等结构，从而形成可视化的网页。该过程的核心在于 标签与文本的组合关系，以及浏览器对这些标签的渲染规则。
新手打开 HTML 文件的步骤
在本地打开 HTML 文件的基本步骤
作为新手，第一步通常是选择一款简单的 文本编辑器，如记事本、或者更强大的编辑器如 VS Code、Sublime Text 等。使用这些工具可以直接编辑文本并保存为 HTML 文件。
第二步是将编辑好的内容保存为 .html 文件，例如 index.html，并将其保存在任意文件夹中，方便管理与备份。
第三步是用浏览器打开该文件。你可以直接双击 HTML 文件，浏览器会在新标签页中呈现页面，或者在浏览器中选择“打开文件”并定位到保存的位置。若需要，可以在浏览器中按 Ctrl+O（或 Cmd+O）快速打开文件。
以下是一个用于保存的基本模板，帮助你快速上手：
我的页面
欢迎来到 HTML 的世界！
浏览器如何打开与浏览 HTML 内容
浏览器渲染的基本原理
当你在浏览器中打开一个 HTML 文件时，浏览器会先读取文本并解析其中的 HTML 标记，进而搭建一个名为 DOM（文档对象模型） 的树状结构。随后，浏览器会将样式信息交给 CSS 引擎，组合出最终的视图布局并呈现给你。
在渲染过程中，内容、结构与样式分离的理念会帮助浏览器以模块化的方式处理页面。JavaScript 还能在页面加载后对 DOM 进行动态修改，从而改变页面的交互与外观。
为了更清晰地理解，下面给出一个简单的事件示例，说明如何在页面加载完成时执行代码：
document.addEventListener('DOMContentLoaded', function() {console.log('页面已就绪，可以操作 DOM。');
});HTML 编码与常见格式
字符编码与正确保存
为确保不同语言字符正确显示，需要在文档中指定字符编码。最常见的是 UTF-8，它支持全球大多数字符集。
在 HTML 的 head 部分使用元数据来声明编码，例如：<meta charset="UTF-8">，这样浏览器在解析内容时就会以UTF-8进行解释。
如果你创建的是多语言页面，最好在文档开头显式声明编码，并尽量避免混用不同编码的文本，以确保兼容性与可访问性。
示例片段展示了常见的编码声明：
编码示例
查看源代码与调试 HTML 内容
查看源代码与开发者工具的使用
你可以通过浏览器的 “查看源代码” 功能直接看到 HTML 的文本源代码。这有助于理解页面的静态结构以及你在文件中输入的标记。
此外，现代浏览器自带 开发者工具，包含 DOM、CSS、网络请求等面板，便于调试与性能分析。通过打开开发者工具，可以实时查看 DOM 树、样式规则以及修改效果，帮助你理解页面的呈现过程。
要快速访问开发者工具，常用快捷键包括 F12 或 Ctrl+Shift+I（在 macOS 上是 Cmd+Option+I）。
下面给出一个用于查看当前文档结构的简单示例：
console.log(document.documentElement.outerHTML);将 HTML 与 CSS、JavaScript 的入门链接
引入 CSS 与脚本的基础方法
HTML 与 CSS、JavaScript 通常是前端页面的三大支柱。你可以通过在 HTML 中链接外部资源，实现样式美化与行为逻辑。那么最基础的做法有两种：将 CSS 放在单独的文件并通过 <link rel="stylesheet" href="styles.css"> 引入，及将 JavaScript 脚本放在单独的文件并通过 <script src="app.js"></script> 引入。
为了确保页面在加载时就获取样式，通常会把 CSS 的链接放在 <head> 标签内；而 JavaScript 的引入可以放在 文档末尾，以减少阻塞渲染，或者使用 defer/async 属性来控制加载时机。
下面给出一个包含 CSS 和 JS 引入的基础模板，供新手参考：
示例页面
这是一个带样式和脚本的示例。
