02语义化 HTML：标签是有含义的

新手写 HTML 最常见的样子：从上到下全是 <div>，类名区分一切。能跑，但三个角色都读不懂它——搜索引擎、屏幕阅读器，和三个月后的你自己。

一页骨架

<header>站名和导航</header>
<main>
  <article>
    <h1>文章标题</h1>
    <p>正文……</p>
  </article>
</main>
<footer>版权和链接</footer>

规则很简单：用什么标签，取决于内容是什么，而不是你想让它长什么样。 样式全部交给 CSS。

几个高频误用

• 按钮就是 <button>，不要用 <div onclick>——前者自带键盘焦点和回车触发
• 列表就是 <ul>/<ol>，不要用一排 <p>
• 每页只应该有一个 <h1>，标题层级按顺序往下走，别跳级

练习

把这个博客的首页（或任意你喜欢的页面）用语义标签重写一遍骨架，不写一行 CSS，看裸结构是否依然能读懂。

下一课进入 CSS：先学布局，再学装饰。