网页与程序协作
HTML
网页的内容与结构
免费阅读 · 配套小练习 · 更新于
一句话理解
用标签告诉浏览器，哪些内容是标题、段落和链接。
打个比方
写一份自我介绍时，先安排姓名、简介和联系方式。HTML 像这份内容提纲，给不同内容明确的角色，而不是先决定它们的颜色。
HTML 是标记语言。许多元素由开始标签、内容和结束标签组成，例如 <h1>小喵</h1> 表示主标题。属性补充设置，例如链接的 href。head 放页面标题等信息，body 放用户看到的内容；浏览器会把这些标记解析成页面。
看个例子
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>小喵的介绍</title>
</head>
<body>
<h1>你好，我是小喵</h1>
<p>我正在学习 AI 编程。</p>
<a href="https://minicode.uk/">我的学习入口</a>
</body>
</html>这是一种可能的生成结果。看 AI 的改动时，可以找出 title、h1、p 与 a：它们分别对应标签页标题、正文标题、简介和链接。即使代码与示例不同，也应根据实际页面检查需求是否满足。
什么时候会遇到
- 让 AI 增加内容后，确认新增元素和文字是否符合需求。
- 向 AI 说明要修改哪个标题、段落或链接，以及哪些内容应保留。
常见误解
HTML 标签不是越多越好。不要为了让字变大，就把所有文字写成主标题；字号可以交给 CSS。
Vibe Coding 小练习 · 描述需求 → 看懂改动 → 验证结果
动手练一练：让 AI 生成介绍页，找出内容对应的元素
在自己的练习文件夹中操作，准备昵称和一句简介，把下面需求中的“小喵”换成自己的内容。
试着这样告诉 AI
请创建一个单文件 index.html 介绍页。标签页标题是“小喵的介绍”，正文主标题是“你好，我是小喵”，简介是“我正在学习 AI 编程”，再加一个指向 https://minicode.uk/ 的学习链接。使用中文和手机 viewport，只做这些内容。完成后说明 title、h1、p 和 a 各在哪里，并告诉我如何用浏览器查看。可以在你使用的 AI 编程工具中完成；也可以先对照本页代码示例，练习理解需求、识别改动和列出检查项。
跟着做
- 把准备好的需求交给 AI，查看它生成的文件或完整 HTML。
- 在结果里分别找到 title、h1、p 与 a，对照自己的需求理解它们的作用。
- 打开实际页面，检查标签页、正文与链接；若有缺项，把具体位置和期望结果反馈给 AI。
你应该看到
页面展示要求的内容，你也能指出这些内容在 HTML 中的位置。
完成检查
- 标签页标题与正文主标题分别符合需求。
- 学习链接能打开正确地址，AI 的说明与实际文件一致。
遇到卡点？看提示
先把“生成了代码”和“浏览器显示正确”分开检查。看不到结果时，核对文件位置、扩展名与保存状态。
查看参考思路
title 对应标签页，h1 对应正文主标题，p 对应简介，a 的 href 对应链接地址。AI 的实现可以与示例不同；仍要逐项检查内容与实际点击结果。
想一想
修改 title 后，为什么页面里的主标题没有变化？
查看答案
title 位于 head，控制标签页标题；正文主标题通常是 body 里的 h1。它们是两个不同元素。