HTML 快速入门：看懂网页的骨架
什么是 HTML
HTML（超文本标记语言）是网页的骨架。它决定了”页面上有什么”。
基本结构
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个段落。</p>
</body>
</html>常用标签速查
标题
<h1>最大标题</h1>
<h2>二号标题</h2>
<h3>三号标题</h3>→ h1 到 h6，数字越大字越小
段落和文字
<p>这是一个段落。</p>
<span>这是一段内联文字。</span>
<strong>加粗文字</strong>
<em>斜体文字</em>链接
<a href="https://example.com">点我跳转</a>图片
<img src="photo.jpg" alt="一张照片" />按钮
<button>点击我</button>输入框
<input type="text" placeholder="请输入用户名" />列表
<ul> <!-- 无序列表 -->
<li>项目一</li>
<li>项目二</li>
</ul>
<ol> <!-- 有序列表 -->
<li>第一步</li>
<li>第二步</li>
</ol>容器（最常用！）
<div> <!-- 块级容器 -->
<h2>标题</h2>
<p>内容</p>
</div>
<section> <!-- 语义化分区 -->
</section>关键概念
标签与属性
<a href="网址" target="_blank">文字</a>
↑ 属性 ↑ 属性 ↑ 内容属性是用来配置标签行为的额外信息。
嵌套关系
<div> ← 父元素
<h2>标题</h2> ← 子元素
<p>内容</p> ← 子元素
</div>HTML 就是一层一层嵌套的盒子。
在 AI 编程中的应用
你不需要手写 HTML！但你需要能看懂：
- AI 生成了代码 → 扫一眼，大概知道哪里是标题、哪里是按钮
- 想改某个部分 → 找到对应的标签
- 选中标签内容 → 告诉 AI “把这个按钮改成蓝色”
实战：看懂这个页面
<div class="hero">
<h1>AI编程，从零到一</h1>
<p>不需要基础，跟着做就行</p>
<button>开始学习</button>
</div>能读出来吗？
- 有一个 Hero 区域
- 里面有一个大标题、一段描述、一个按钮
小结
你不需要记住所有标签。只需要：
- 见过
h1-h6、p、div、button、a、img、input - 理解嵌套关系
- 看不懂的标签 → 问 AI
下一篇我们学 CSS，让页面变好看。