第五篇、盒子标签

6 阅读1分钟

块级盒子

<div></div>

行内盒子

<span></span>

语义盒子

<header></header>:定义网页 / 区块的页眉(包含 logo、导航、标题等)
<nav></nav>:定义页面导航链接区域(如主导航、侧边导航)
<main></main>:定义网页的核心 / 主要内容(一个页面仅一个)
<section></section>:定义文档中的独立内容区块(如新闻板块、产品模块)
<article></article>:定义独立完整的内容(如文章、评论、商品卡片)
<aside></aside>:定义页面主内容外的附属内容(如侧边栏、广告、相关推荐)
<footer></footer>:定义网页 / 区块的页脚(包含版权、联系方式、备案信息等)
<hgroup></hgroup>:组合多个标题(如 h1+h2),优化标题层级语义

<details></details>:定义可展开 / 折叠的详情面板(需配合 summary 使用)
<summary></summary>:定义 details 元素的可见标题(点击可展开 / 折叠详情)
<dialog></dialog>:定义弹窗 / 对话框(原生模态框,替代自定义弹窗的语义化标签)
<search></search>:定义页面的搜索区域(如搜索框 + 搜索按钮组合)
<data></data>:为内容添加机器可读的数值(如<data value="2026">2026年</data><time></time>:定义时间 / 日期(含 datetime 属性,如<time datetime="2026-03-01">2026年3月1日</time>