常用语义化标签及其在流式布局中的应用

在流式布局（宽度多用百分比或弹性单位）中，语义化标签与CSS结合，既能保持结构清晰，又能灵活适配不同屏幕。

• ：用于页面或区块的头部，通常包含标题、logo或主导航。在流式布局中可设置 width: 100% 或 flex 布局实现自适应。
• ：专用于导航链接组。配合媒体查询可在小屏下折叠为汉堡菜单，保持结构语义不变。
• ain>：表示页面主体内容，一个页面应只有一个
  。在流式设计中常设为弹性主区域，随视口变化调整宽度。
• ：适合独立内容模块，如博客文章、新闻条目。在流式网格中每个 可设为百分比宽度的浮动或网格项。
• ：表示文档中的一个区域，有明确主题。例如首页的“推荐内容”区块可用
  包裹，内部再嵌套 。
• ：侧边栏或附加信息，如相关文章、广告。在流式布局中可设为右侧自适应窄栏，大屏显示，小屏隐藏或下移。
• ：页脚信息，版权、联系方式等。通常全宽展示，语义清晰，利于屏幕阅读器识别。

语义化与CSS布局的结合建议

语义化标签不替代CSS布局，而是与之协同工作。以下是一些实用技巧：

• 避免为了样式而破坏语义。不要因为某个效果常用div就放弃使用
  或 。
• 用CSS控制布局，HTML专注结构。例如用Flexbox或Grid布局时，仍保留 和
  的语义。
• 为兼容旧浏览器（如IE），可搭配polyfill或确保降级显示正常，不影响内容获取。
• 配合ARIA属性增强可访问性，如 aria-label 在简洁导航中补充说明。

实例：简单流式语义化布局

以下是一个基础的流式语义结构：

<header style="width: 100%; padding: 1rem; background: #f0f0f0;">
  <h1>网站标题</h1>
  <n*><a href="#">首页</a> <a href="#">关于</a></n*>
</header>

<main style="display: flex; flex-wrap: wrap; gap: 1rem; padding: 1rem;">
  <article style="flex: 2; min-width: 300px;">
    <h2>文章标题</h2>
    <p>这是主要内容……</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1084">
                            <img src="https://img.php.cn/upload/ai_manual/001/503/042/68b6c8f303e59213.png" alt="Kreado AI">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1084">Kreado AI</a>
                            <p>Kreado AI是一个多语言AI视频创作平台，只需输入文本或关键词，即可创作真实/虚拟人物的多语言口播视频。 为创作者提供AI赋能</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Kreado AI">
                                <span>182</span>
                            </div>
                        </div>
                        <a href="/ai/1084" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Kreado AI">
                        </a>
                    </div>
                
  </article>
  <aside style="flex: 1; min-width: 200px; background: #eee;">
    <p>侧边推荐内容</p>
  </aside>
</main>

<footer style="width: 100%; text-align: center; padding: 1rem; background: #333; color: white;">
  &copy; 2025 版权信息
</footer>

这个结构在不同设备上都能良好流动显示，同时HTML标签准确表达了各部分用途。

基本上就这些。用对标签，结构清晰，流式布局也能既美观又语义明确。