前端基础之HTML | 使用WorkBuddy来DIY学习搭子
前言
几天前，看了博主黛琳ghz的一篇玩虾文章(玩虾实战，助力信息搜集写作——我用 WorkBuddy 搭了一条 AI 日报生产线，日更 15 天不间断-CSDN博客)，觉得很有意思，就跟着博主的思路去做了实践。这两天，我还在复习前端基础，写报告文档时想着借用博主玩虾的思路，于是就让WorkBuddy做了下面这篇报告文档。
同时，我想着后续会持续更新前端基础报告，一方面为了自己的学习，另一方面也是希望能帮助有需要的学习者能够对前端知识有一个整体的把握，并且，我想要在这个过程中写一个通用类的WorkBuddy skill（本质上是大模型提示词），角色定位是学习搭子，核心功能是帮助我们生成学习报告文档。
学习报告
HTML 基础知识学习报告
学习时间：2026年5月3日 学习内容：前端三件套之 HTML 基础
一、HTML 基本架构
一个标准的 HTML5 页面由以下核心部分组成：
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>| 组成部分 | 说明 |
|---|---|
<!DOCTYPE html> |
文档类型声明，告诉浏览器使用 HTML5 解析，不是标签 |
<html> |
根标签，包裹整个页面 |
<head> |
页面元信息，用户不可见，浏览器需要 |
<title> |
定义网页标题，显示在浏览器标签栏上 |
<body> |
页面正文，用户看到的所有内容都在这里 |
二、文本与标题标签
2.1 标题标签
HTML 提供六级标题，<h1> 最大，<h6> 最小：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>⚠️ 一个页面通常只使用一个
<h1>，其余按层级递减使用。
2.2 段落与换行
| 标签 | 作用 | 特点 |
|---|---|---|
<p> |
段落标签 | 新起一个段落，段落间有间距 |
<br> |
换行标签 | 自闭合，在段落内换行，无间距 |
<hr> |
水平线标签 | 自闭合，画出一条水平分隔线 |
💡
<p>和<br>的区别：<p>是新段落（有间距），<br>只是换一行。
三、常用文本标签
| 标签 | 作用 | 是否有语义 |
|---|---|---|
<b> |
加粗文本 | ❌ 无语义，纯样式 |
<strong> |
加粗文本 | ✅ 语义强调，表示重要内容 |
<i> |
斜体文本 | ❌ 无语义，纯样式 |
<em> |
斜体文本 | ✅ 语义强调，表示语气重读 |
<del> |
删除线 | ✅ 语义上表示"已删除" |
<span> |
行内容器 | 本身无样式，配合 CSS 单独控制文字 |
语义化优先原则
-
<strong>优先于<b>：两者视觉效果相同，但<strong>有语义，对 SEO 和无障碍阅读更友好 -
<em>优先于<i>：同理，<em>有语义强调 -
<del>典型场景：电商网站划掉原价 ——<del>¥199</del> ¥99 -
<span>定位：行内元素的"万能容器"，可单独给某段文字加样式
四、图片标签与路径
4.1 图片标签
<img src="图片路径" alt="替代文本">| 属性 | 说明 |
|---|---|
src |
图片路径（必需） |
alt |
图片无法显示时的替代文本 |
⚠️
<img>是自闭合标签，不需要</img>。
4.2 路径问题
| 路径类型 | 写法示例 | 说明 |
|---|---|---|
| 绝对路径 | C:\images\pic.jpg 或 https://xxx.com/pic.jpg |
完整地址，本地绝对路径换电脑可能失效 |
| 相对路径 - 同级目录 | ./pic.jpg 或 pic.jpg |
图片和 HTML 文件在同一文件夹 |
| 相对路径 - 子级目录 | ./images/pic.jpg |
图片在当前文件夹的子文件夹里 |
| 相对路径 - 父级目录 | ../pic.jpg |
图片在上一级文件夹，../../ 表示上两级 |
💡 实际开发推荐使用相对路径，项目移植时不会因路径变化而失效。
五、超链接标签
<a href="https://www.example.com">点击跳转</a>
<a href="https://www.example.com" target="_blank">新窗口打开</a>| 属性 | 说明 |
|---|---|
href |
跳转目标地址 |
target |
_self（默认，当前窗口）/ _blank（新窗口） |
六、列表标签
6.1 有序列表 <ol>
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>效果：1. 2. 3. 编号排列
type 属性 —— 自定义编号样式
通过 type 属性可以改变有序列表的编号方式：
<ol type="1"> <!-- 数字编号（默认）：1, 2, 3... -->
<ol type="A"> <!-- 大写字母编号：A, B, C... -->
<ol type="a"> <!-- 小写字母编号：a, b, c... -->
<ol type="I"> <!-- 大写罗马数字：I, II, III... -->
<ol type="i"> <!-- 小写罗马数字：i, ii, iii... -->| type 值 | 编号样式 | 示例 |
|---|---|---|
1（默认） |
阿拉伯数字 | 1, 2, 3 |
A |
大写字母 | A, B, C |
a |
小写字母 | a, b, c |
I |
大写罗马数字 | I, II, III |
i |
小写罗马数字 | i, ii, iii |
6.2 无序列表 <ul>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>效果：圆点排列
type 属性 —— 自定义项目符号
通过 type 属性可以改变无序列表的项目符号样式：
<ul type="disc"> <!-- 实心圆点（默认）● -->
<ul type="circle"> <!-- 空心圆点 ○ -->
<ul type="square"> <!-- 实心方块 ■ -->| type 值 | 符号样式 | 显示效果 |
|---|---|---|
disc（默认） |
实心圆点 | ● |
circle |
空心圆点 | ○ |
square |
实心方块 | ■ |
⚠️
<ol>和<ul>内部不能直接写文字，必须用<li>包裹每一项。 💡 实际开发中，列表样式更多通过 CSS 的list-style-type属性来控制，HTML 的type属性更适用于简单场景。
七、表格标签
7.1 基本结构
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
</tr>
</table>| 标签 | 作用 |
|---|---|
<table> |
表格容器 |
<tr> |
定义一行（Table Row） |
<td> |
定义单元格（Table Data） |
<th> |
定义表头单元格，文字默认加粗居中 |
7.2 单元格合并
| 属性 | 作用 | 示例 |
|---|---|---|
colspan |
横向合并（合并列） | <td colspan="2"> 横跨2列 |
rowspan |
纵向合并（合并行） | <td rowspan="3"> 纵跨3行 |
⚠️ 合并了几个格子，就要在代码中少写几个
<td>，否则表格会多出格子。
八、表单标签
8.1 表单容器
<form action="提交地址" method="post">
<!-- 表单元素 -->
</form>| 属性 | 说明 |
|---|---|
action |
表单数据提交到哪个地址 |
method |
提交方式：get（URL可见）或 post（不可见，更安全） |
8.2 常用表单元素
| 元素 | 作用 | 关键属性 |
|---|---|---|
<input> |
最常用的输入控件 | type 决定类型：text/password/radio/checkbox/submit 等 |
<textarea> |
多行文本输入 | rows、cols 控制大小 |
<select> + <option> |
下拉选择框 | <select> 包裹，<option> 定义选项 |
<button> |
按钮 | 可设置 type 为 submit/reset/button |
九、元素分类：块元素与行内元素
| 类型 | 特点 | 代表标签 |
|---|---|---|
| 块元素 | 独占一行，可设置宽高 | <div>、<p>、<h1>~<h6>、<table>、<form>、<ul>、<ol> |
| 行内元素 | 不换行，宽高由内容撑开 | <span>、<a>、<strong>、<em>、<b>、<i>、<del> |
| 行内块元素 | 不换行，但可设置宽高 | <input>、<img> |
💡 记忆口诀：div 是块级老大哥，span 是行内小弟。
十、学习总结
本次学习覆盖了 HTML 基础的核心内容，整体知识框架如下：
HTML 基础
├── 页面架构：DOCTYPE / html / head / body
├── 文本内容：h1~h6 / p / br / hr
├── 文本样式：b / strong / i / em / del / span
├── 多媒体：img（含路径问题）
├── 链接导航：a
├── 列表：ol / ul + li（含 type 属性：编号样式/项目符号）
├── 表格：table / tr / td / th（含单元格合并）
├── 表单：form / input / textarea / select / button
└── 元素分类：块元素 / 行内元素 / 行内块元素关键注意点回顾
-
语义化优先：
<strong>><b>，<em>><i>，<th>><td>（表头场景） -
路径选择：开发中优先使用相对路径
-
自闭合标签：
<img>、<br>、<hr>不需要闭合 -
列表规范：
<ol>/<ul>内必须用<li>包裹内容 -
单元格合并：合并后要减少对应的
<td>数量
报告生成时间：2026年5月3日
结语
报告内容基于我与大模型的对话，并由大模型生成，如有纰漏，还请海涵，如能指出，在下感激不尽，也希望各位大佬以及同辈学习者能够指出我的不足之处，在下不胜感激。
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
11
0- 0
已为社区贡献1条内容
所有评论(0)