必须用于语义上的引导性内容区块，如页面级标题+导航、文章级标题+作者信息等；纯样式需求应改用，且禁止嵌套或无标题滥用。

超过三层 <div> 嵌套，基本可以判定结构失焦——不是浏览器限制你，而是语义没理清、CSS 没抽离、或组件封装逻辑混乱。 <h3>什么时候该用 <code><header></header> 而不是 <div class="header"> <p>浏览器和屏幕阅读器完全忽略 <code>class="header"；<header></header> 则自带语义与隐式 ARIA 角色，是无障碍跳转的关键地标。

• 顶层 <header></header> 应直接子级于 ，一个页面只出现一次
• 内部区块（如文章标题栏）可再嵌套 <header></header>，但必须有明确引入性内容（logo、标题、副标题等）
• 别加冗余 class：<header class="header-wrapper"></header> 是典型反模式 —— 语义已存在，额外 class 只会干扰 CSS 选择器意图
• 纯为 padding 或背景色加的包裹层？直接写 header { padding: 1rem; background: #fff; } 即可

<section></section> 和 <article></article> 的核心区别在哪

关键不在视觉分块，而在内容是否「可独立分发」：搜索引擎抓取 <article></article>，RSS 阅读器订阅它；<section></section> 只是页面内逻辑分组，依赖上下文。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• <article></article> 必须能单独成篇：博客正文、新闻条目、用户评论、商品卡片都适用
• <section></section> 必须带一个 <h2></h2>～<h6></h6> 标题，且该标题能准确概括整块内容（如「服务流程」「客户评价」）
• 没有标题的「区块」？用 <div> 更诚实 —— 强行套 <code><section></section> 会让文档大纲（Accessibility → Outline）产生无意义节点
• 嵌套最多两层 <section></section>：<section><section></section></section> 已属信号过载，应重构内容边界

哪些场景下还非得用 <div> <p><code><div> 不是坏标签，而是“无语义容器”的正确解法——当删掉它不影响内容角色理解时，它就是对的。 <ul><li>Flex/Grid 布局中需要控制对齐或间距的中间层：<code><div class="card__body"> <li>Vue/React 组件根节点约束（如需返回多个元素但框架要求单根）</li> <li>需要 <code>display: contents 行为，而语义标签自带默认样式或隐式 role（如 <nav></nav> 会触发 navigation landmark）

BEM 命名隔离样式作用域：<div class="button__icon"> 比硬套 <code><span class="button__icon"></span> 更可控

真正难的不是记住七个语义标签，而是每次写 <div> 前问一句：这个盒子有没有不可替代的语义职责？如果没有，它大概率该被删掉、升维、或交给 CSS 解决。</div>