HTML

也常被叫作：超文本标记语言网页骨架页面结构

网页与前端通常止于「主路径」约 2 分钟读完

你可能会这么说

「网页的骨架。我要的东西是放最上面、中间、还是右边，全靠它定。」

HTML HTML

搭建网页内容结构的标记语言，决定一个页面里有什么、谁是谁、按什么顺序排。

HTML 是网页的骨架，只管「页面里有什么、是什么、按什么顺序」，不管「长得怎么样」。一个按钮用 <button> 表示，一段标题用 <h1> 表示，一张图片用 <img> 表示。浏览器读到这些标签，就知道该把哪块内容当按钮、哪块当标题。这就是为什么说它是「标记」语言——你在给每一段内容贴标签，而不是给它写画出来的程序。

它和「好看」完全无关。颜色、间距、圆角是 CSS 的事；点击后的行为、数据保存是 JavaScript 的事。判断一个 AI 写的 HTML 对不对，先不看样子，看两件事：该用的标签有没有用对（是真的 <button> 还是一个被点了才有效的 <div>），以及内容的层级和顺序对不对（标题是不是用标题标签、一个页面的主标题是不是唯一）。

对不用代码的人来说，HTML 最重要的不是会写，而是会看一点：因为你用 AI 做完页面，第一件事就是想知道「它到底给我搭了个什么结构」。能读懂 <div>、<h1>、<p>、<img> 这几样，你就能理解 AI 干了什么，也能看出它有没有糊弄——比如把一个按钮做成了假按钮。

长什么样真实可交互，不是截图

我的文章标题

这是第一段正文，浏览器会把它当普通文字显示。

小标题

列表项一
列表项二

注意：这个区块里用的是真正的标题标签、段落标签和按钮标签。换成大白话：AI 拿「骨架零件」搭出来的才是能被浏览器正确识别的结构。

拆开看，里面有这几块

1
标签 Tag
用尖括号包起来的标记，如 <h1>、<p>。告诉浏览器这一段是什么。
2
元素 Element
一个标签从开始到结束的整块，如 <button>删除</button>。
3
属性 Attribute
写在标签里的额外信息，如 href（跳哪）、src（图从哪来）、disabled（禁用）。
4
文档结构 Document Structure
html → head（看不见的元信息）+ body（看得见的内容）这套框架。

常见的有哪几种

结构化标签Semantic

header、nav、main、footer，表达「这是页眉、这是导航」，读屏和 AI 都更好懂。

用在：内容有明确分区的页面

通用容器Generic

<div> 和 <span>，不带含义，只是拿来包一块东西。

用在：纯排版需要，内容本身没有语义

容易搞混？这样区分

HTML ≠ CSS CSS

HTML 是骨架（有什么、是什么），CSS 是衣服（长什么样）。改颜色、间距、圆角找 CSS；改「这里到底放的是标题还是按钮」找 HTML。

看 CSS

HTML ≠ JavaScript JavaScript

HTML 是骨架，JavaScript 是大脑/手脚（点了以后做什么）。「点这个按钮保存数据」里的「保存数据」是 JavaScript，「这里有个按钮」是 HTML。

看 JavaScript

HTML ≠ DOM DOM

HTML 是写下来的源代码；DOM 是浏览器加载后在你眼前的活结构。JavaScript 改的其实是 DOM，不是 HTML 文件本身。

看 DOM

什么时候用得上

搭页面结构

告诉 AI「首页要有标题、导航、主内容、底部」，让它先用对的标签搭骨架，再谈样式。

检查 AI 的产出

页面做完后自己看一眼结构：按钮是不是真按钮、标题是不是真标题，别被样式骗了。

你可以这样跟 AI 说

直接复制下面这段，把【】里的换成你的情况。它比一句「帮我加个 X」多说清楚了：改哪里、不许动啥、做完交什么。

【任务】帮我搭 [落地页 / 文章页] 的 HTML 结构，先不写任何样式
【范围】只输出 HTML 骨架，用语义化标签（header / nav / main / section / footer），不用 `<div>` 包一切
【内容结构】页面包含：主标题、导航（首页/关于/联系）、一段介绍文字、一个行动按钮、底部版权
【要求】
  - 主标题用且仅用一个 `<h1>`
  - 行动按钮用真正的 `<button>` 元素，不要用 `<div>` 加点击冒充
  - 图片标签写 `alt` 描述
【边界】这一轮不要写任何 CSS 和 JavaScript，不要引入任何框架
【交付】贴出完整 HTML，并告诉我每个块用的什么标签、为什么

「先不写样式」和「不要用 div 包一切」这两句能拦住最常见的偷懒：AI 图省事全用 div，或者一口气把样式也塞进来，结果你分不清骨架到底搭对了没有。

它说「做好了」，你怎么自己验

这是本站的重头戏。AI 最会的不是写代码，是说「已完成」。这一条，它通常最多做到「主路径」这层：真实用户的正常操作能走通，不靠特殊参数。

要亲眼看到这些，才算数

用浏览器打开页面，按 F12 打开开发者工具，切到「元素/检查」面板，确认页面里确实有 <h1>、<header>、<nav> 这些标签，而不是一堆 <div>。
主标题用 <h1>，且全页只有一个。
按钮元素是 <button>：在检查面板点中它，看到的是 button 而不是「div + onclick」。
图片都有 alt 描述文字，不是空的。
把浏览器窗口拖到很窄，确认结构还在（骨架不依赖固定宽度才成立）。

它常这么糊弄你

「HTML 已生成」——但整页是一个巨型 <div> 里塞了所有东西，没有任何语义标签。这叫「长着一副页面样子的空壳」。
「按钮做好了」——其实是 <div> 加了点击事件，读屏和键盘用户根本碰不到它。去检查面板看是不是真 button。
「用了个漂亮的 h1」——如果页面里同时出现三四个 h1，标题层级是错的，AI 只是觉得「字大好看」。

HTML 结构能验到「主路径」层：你亲手用开发者工具看标签，比听 AI 转述可靠得多。这一条不用看代码逻辑，看元素树就够了。

考考你选一个你觉得对的

AI 给你搭好了页面。你想确认按钮是不是「真按钮」，最靠谱的检查是？

想再深挖一点靠谱出处

HTML 文档MDN ↗HTML 元素参考MDN ↗HTML Living Standard（HTML 标准）WHATWG ↗

# HTML (HTML)

> 搭建网页内容结构的标记语言，决定一个页面里有什么、谁是谁、按什么顺序排。

**你可能会这么说**：网页的骨架。我要的东西是放最上面、中间、还是右边，全靠它定。

HTML 是网页的骨架，只管「页面里有什么、是什么、按什么顺序」，不管「长得怎么样」。一个按钮用 <button> 表示，一段标题用 <h1> 表示，一张图片用 <img> 表示。浏览器读到这些标签，就知道该把哪块内容当按钮、哪块当标题。这就是为什么说它是「标记」语言——你在给每一段内容贴标签，而不是给它写画出来的程序。 它和「好看」完全无关。颜色、间距、圆角是 CSS 的事；点击后的行为、数据保存是 JavaScript 的事。判断一个 AI 写的 HTML 对不对，先不看样子，看两件事：该用的标签有没有用对（是真的 <button> 还是一个被点了才有效的 <div>），以及内容的层级和顺序对不对（标题是不是用标题标签、一个页面的主标题是不是唯一）。 对不用代码的人来说，HTML 最重要的不是会写，而是会看一点：因为你用 AI 做完页面，第一件事就是想知道「它到底给我搭了个什么结构」。能读懂 <div>、<h1>、<p>、<img> 这几样，你就能理解 AI 干了什么，也能看出它有没有糊弄——比如把一个按钮做成了假按钮。

**也叫**：超文本标记语言、网页骨架、页面结构

## 你可以这样告诉 AI

```text
【任务】帮我搭 [落地页 / 文章页] 的 HTML 结构，先不写任何样式
【范围】只输出 HTML 骨架，用语义化标签（header / nav / main / section / footer），不用 `<div>` 包一切
【内容结构】页面包含：主标题、导航（首页/关于/联系）、一段介绍文字、一个行动按钮、底部版权
【要求】
  - 主标题用且仅用一个 `<h1>`
  - 行动按钮用真正的 `<button>` 元素，不要用 `<div>` 加点击冒充
  - 图片标签写 `alt` 描述
【边界】这一轮不要写任何 CSS 和 JavaScript，不要引入任何框架
【交付】贴出完整 HTML，并告诉我每个块用的什么标签、为什么
```

## 怎么验证他真的做到了

通常止于层级：**主路径** — 真实用户的正常操作能走通，不靠特殊参数

- [ ] 用浏览器打开页面，按 F12 打开开发者工具，切到「元素/检查」面板，确认页面里确实有 <h1>、<header>、<nav> 这些标签，而不是一堆 <div>。
- [ ] 主标题用 <h1>，且全页只有一个。
- [ ] 按钮元素是 <button>：在检查面板点中它，看到的是 button 而不是「div + onclick」。
- [ ] 图片都有 alt 描述文字，不是空的。
- [ ] 把浏览器窗口拖到很窄，确认结构还在（骨架不依赖固定宽度才成立）。

常见糊弄：
- 「HTML 已生成」——但整页是一个巨型 <div> 里塞了所有东西，没有任何语义标签。这叫「长着一副页面样子的空壳」。
- 「按钮做好了」——其实是 <div> 加了点击事件，读屏和键盘用户根本碰不到它。去检查面板看是不是真 button。
- 「用了个漂亮的 h1」——如果页面里同时出现三四个 h1，标题层级是错的，AI 只是觉得「字大好看」。

来源：https://mickerbook.com/reference/t/html/