第一、二课：从代码模板到基础标签
这是前端课的第 1–2 课作业。那时候我刚知道「网页其实就是一个纯文本文件」， 于是把课上讲的每一个标签都手敲了一遍：代码模板的每个部分负责什么、块级标签和行内标签到底差在哪、 图片和链接该怎么放。当时只会平铺直叙地往下写，连一行 CSS 都没有——现在给它补上外壳和说明， 顺便把写错的地方订正掉。
这份练习包含以下内容
- 代码模板
- 块标签（块级元素）
- 行内标签（行内元素）
- 其他标签
一、代码模板
模板规定了内容范围、网页设置、浏览器渲染方式、移动端视图处理规范，以及网页标题。
每一个 <html> 文件都从这一套固定的骨架开始，少一行都可能在某个浏览器上出问题。
- <!DOCTYPE html> 文档类型声明，告诉浏览器「按标准模式解析」，必须写在最前面。
-
<meta charset>
规定字符编码，写
UTF-8中文才不会变乱码。 - <meta viewport> 移动端视口规范，少了它手机上整页会被自动缩小，字小到看不清。
- <title> 浏览器标签页上的标题，也是搜索结果里显示的那一行。
-
lang 属性
声明页面语言。原作业模板里写的是
lang="en"，而内容全是中文， 这样屏幕阅读器会拿英文规则去读中文，所以本页已改成zh-CN。
二、块级标签
块级元素独占一行，可以设置宽高，默认从上往下依次排列。
- <div> 普通标签，本身没有任何默认样式，只是一个用来装东西的盒子—— 正因为什么样式都没有，它才最百搭。
- <p> 段落标签。同样是块级，但上下自带一段外边距，所以两个段落之间会自然分开。 你是否在查找段落？那就是它。
-
<h1> ~ <h6>
标题标签，按层级划分。注意不能跳级——
从
<h1>直接跳到<h4>，再折回<h3>，语义就乱了（原作业就是这么写的，本页已改成 h1 → h2 → h3 递进）。
👇 下面两个盒子的差别，就是「无默认样式」和「自带段落间距」：
这是一个 <p>：上下自带外边距，所以它会和别的段落自然拉开距离。
三、行内标签
行内元素不独占一行，宽度由内容撑开，默认不能设置宽高， 所以它们可以并排挤在同一行里。
- <i> 斜体。看着不舒服的感觉就对了，它通常用来标记术语、外语、书名之类的「不同语气」内容。
- <b> 粗体，看着很明显就对了。它只负责视觉加粗，不表达强调。
- <span> 行内版的无样式盒子，专门用来给一小段文字套样式。
<b> / <i> 是「看起来粗 / 看起来斜」，
而 <strong> / <em> 才是「语义上要强调 / 要重读」。
前者只影响外观，后者还会被屏幕阅读器用加重语气读出来。要表达重要性应该用
<strong>，只是想加粗就用 CSS 的 font-weight，
<b> 属于「没有更合适标签时的兜底」。
四、其他标签
链接：<a>
比如放一个欺诈型链接：
点我 v 你 50。
target="_blank" 让它在新标签页打开；rel="noopener noreferrer" 是必须补上的——
新页面能通过 window.opener 操作原页面，加上它就能挡掉这个安全漏洞。
图片：<img>
再比如放一张可爱的图。图片用相对路径引用，页面搬到哪儿图就跟到哪儿：
common/huihui.webp）。
当时 alt 是空的，等于对屏幕阅读器和搜索引擎说「这里什么都没有」，
现在补上了对画面的文字描述——alt 不是可选项，它是图片的「文字替身」。
小结
到这里，结束啦。看着很简单很少的样子，实际上……确实也不多 😄。 但这一课立住了后面所有内容的地基：块级负责布局的骨架，行内负责文字里的细节， 后面学的 flex、grid 都是在块级之上做文章。