表单与输入控件全解析

一、按用途分类记，而不是按字母背

文本类： h1～h6 标题、p 段落、strong 强调（重要）、em 强调（语气）、code 行内代码、pre 保留空白。

结构类： header 页头、nav 导航、main 主内容、section 分节、article 独立文章、aside 侧栏、footer 页脚。

通用类： div 无语义块级容器、span 无语义行内容器。这两个是兜底的，能用语义标签就别用它们。

二、语义化的三个实际收益

<!-- 不推荐 -->
<div class="title">文章标题</div>
<div class="text">正文</div>

<!-- 推荐 -->
<h1>文章标题</h1>
<p>正文</p>

1. 可访问性： 读屏软件靠标签判断内容层级，div 本身不提供具体的内容语义。

2. SEO： 搜索引擎更容易理解标题层级和正文结构。

3. 可维护性： 三个月后你自己看结构，一眼就懂，不用翻 class 命名。

三、h 标签的层级规则

一个页面通常应有一个明确的主标题 h1。h2～h6 应根据内容层级合理递进，不要为了字号从 h2 直接跳到 h5。

字号用 CSS 改，标题层级表达的是内容结构。

四、容易踩的坑

• b / i 主要用于呈现视觉上的醒目或不同语气，strong / em 则具有语义。实际开发中应根据表达目的选择标签，样式交给 CSS。

• br 只用于诗歌、地址这类需要强制换行的地方，不要拿它当排版工具，段落间距交给 CSS 的 margin。

• hr 表示主题或内容的分隔，不只是用来画一条线。

五、一个真实结构模板

<body>
  <header><nav>...</nav></header>
  <main>
    <article>
      <h1>标题</h1>
      <p>正文...</p>
      <section>
        <h2>小节</h2>
        <p>...</p>
      </section>
    </article>
    <aside>相关推荐</aside>
  </main>
  <footer>版权</footer>
</body>

照着这个骨架写，结构就不会乱。