HTML 是什么:如何编写并运行你的第一个网页
HTML（HyperText Markup Language，超文本标记语言）是用来描述网页结构的标记语言。它用一对对标签把内容标记成标题、段落、链接、图片等元素，浏览器读取这些标签后渲染出页面。如果你想快速看到效果，可以新建一个 .html 文件用浏览器直接打开，也可以打开 JSFiddle 这类在线编辑器，在 HTML 面板里写代码并即时预览。下面从最小可运行页面讲起，再到常用标签和在线工具的使用方式。
HTML 在网页中扮演什么角色
一个网页通常由三种技术分工完成：
| 技术 | 负责的内容 | 例子 |
|---|---|---|
| HTML | 结构：页面上有什么 | 标题、段落、图片、链接 |
| CSS | 表现：这些东西长什么样 | 颜色、字号、间距、布局 |
| JavaScript | 行为：交互和动态逻辑 | 点击响应、数据请求、动画 |
HTML 本身不是编程语言，它没有变量、循环、条件判断，只负责“标记结构”。浏览器解析 HTML 后生成页面骨架，再由 CSS 和 JavaScript 补充样式与行为。所以学网页的第一步通常是先写出一段结构正确的 HTML。
一个最小可运行的 HTML 页面
把下面这段代码保存为 index.html，双击用浏览器打开，就能看到一个带标题和段落的页面：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
<h1>你好，HTML</h1>
<p>这是我用标签写出来的第一段文字。</p>
</body>
</html>
各部分的含义：
<!DOCTYPE html>：声明这是 HTML5 文档，浏览器据此进入标准渲染模式。<html>：整个文档的根元素，lang属性说明页面语言。<head>：存放不直接显示在页面上的信息，比如字符编码meta charset和浏览器标签页标题<title>。<body>：所有可见内容的容器。
输入这段代码、保存、在浏览器打开，预期结果是标签页显示“我的第一个网页”，页面正文显示一行大标题和一段文字。如果中文变成乱码，通常是漏了 <meta charset="UTF-8">，或者文件保存时用的编码与声明不一致。
常用标签：先把结构写对
掌握几个高频标签就能表达大部分基础内容：
<h1>一级标题</h1>
<h2>二级标题</h2>
<p>这是一个段落，段落之间会自动换行并留出间距。</p>
<a href="https://jsfiddle.net">这是一个链接</a>
<img src="photo.jpg" alt="图片加载失败时的替代文字">
<ul>
<li>无序列表第一项</li>
<li>无序列表第二项</li>
</ul>
<ol>
<li>有序列表第一项</li>
<li>有序列表第二项</li>
</ol>
几个容易踩的点：
- 标签大多成对出现，
<p>内容</p>，忘记闭合会让后续内容被错误嵌套。 <img>是自闭合标签，不需要</img>；alt属性在图片加载失败或读屏时起作用，建议始终填写。- 标题标签
h1到h6表示层级，不要为了字号大小而跳级使用，字号交给 CSS 控制。 - 属性写在开始标签内，格式是
属性名="值"。
用浏览器直接运行
不需要安装任何软件，浏览器本身就是 HTML 的运行环境：
- 用任意文本编辑器（记事本、VS Code 等）新建文件，写入上面的示例代码。
- 保存时把文件名设为
index.html，注意扩展名是.html而不是.txt。 - 在文件管理器里双击该文件，或把它拖进浏览器窗口。
- 修改代码后保存，回到浏览器按 F5 刷新即可看到更新。
验证方法：右键页面选择“查看网页源代码”，确认浏览器读到的就是你写的标签；如果看到的是原始代码而不是渲染结果，说明文件扩展名可能不对。
用 JSFiddle 在线编写和分享
如果不想在本地建文件，或者想把代码片段发给别人看，可以用在线编辑器。JSFiddle 是一个在浏览器中运行的代码编辑器，支持 HTML、CSS、JavaScript，也支持 React 和 Tailwind 等，适合测试片段和分享示例。
基本流程：
- 打开 jsfiddle.net，页面通常分为 HTML、CSS、JavaScript 和 Result（结果）几个面板。
- 在 HTML 面板里写标签内容。注意这里只需要写
<body>内部的部分，doctype、html、head等骨架由平台自动补全。 - 点击 Run 或等待自动刷新，Result 面板会即时显示渲染效果。
- 点击 Save 保存，会得到一个可分享的链接，别人打开就能看到你的代码和运行结果。
例如在 HTML 面板输入：
<h1>在线测试 HTML</h1>
<p>这段文字会立刻出现在结果区。</p>
预期结果是 Result 面板马上渲染出标题和段落。如果没变化，先确认是否点了 Run，以及代码是否写在了正确的面板里。
需要留意的是，JSFiddle 提供升级到 PRO 的入口（见 jsfiddle.net/pro），但基础编辑和运行功能无需付费即可使用；具体功能差异以网站页面说明为准。
什么时候用本地文件，什么时候用在线编辑器
| 场景 | 更合适的方式 |
|---|---|
| 学习标签、做完整小项目 | 本地 .html 文件，便于管理多个文件和资源 |
| 快速验证一个片段 | 在线编辑器，打开即写，无需建文件 |
| 把代码发给别人复现问题 | 在线编辑器，保存后直接分享链接 |
| 需要引用本地图片、多个 CSS/JS 文件 | 本地文件，路径管理更直观 |
两者并不冲突：日常练习可以用本地文件打基础，遇到“想快速试一下这段标签对不对”或“需要贴给别人看”时，在线编辑器更省事。
常见卡点
- 中文乱码：检查
<meta charset="UTF-8">是否存在，以及文件保存编码是否为 UTF-8。 - 标签没生效：确认标签名拼写正确、成对闭合，属性值用引号包裹。
- 改了代码页面没变：本地文件记得保存后刷新；在线编辑器确认已触发运行。
- 图片不显示：检查
src路径是否正确，本地图片和 HTML 文件的相对位置是否匹配。 - 把 HTML 当编程语言：需要计算、判断、循环时，那是 JavaScript 的职责，HTML 只描述结构。
把结构、样式、行为分开理解，是继续学习 CSS 和 JavaScript 的前提。先能独立写出并运行一个结构正确的 HTML 页面，再往上叠加样式和交互，路径会清晰很多。