<details>-可展开细节

HTML5中的details标签用于创建可折叠内容区块需与summary标签配合使用默认状态下内容隐藏可通过open属性设置默认展开支持嵌套使用和多级折叠可通过CSS自定义样式支持JavaScript交互监听toggle事件现代浏览器基本支持但IE和旧版Edge不兼容可通过polyfill解决常用于FAQ代码展示表单可选字段等场景需考虑无障碍访问和性能优化避免在折叠内容中嵌入过多资源可与其他HTML元素结合使用但需注意结构完整性可通过CSS和JavaScript实现动画效果在ReactVue等框架中也可使用还可创建自定义Web组件增强功能

<summary>-细节摘要

HTML5中的summary元素与details标签配合使用用于创建可点击的摘要标题点击后可展开或折叠隐藏内容它必须作为details的第一个子元素默认情况下details内容隐藏点击summary切换显示状态可通过open属性设置默认展开支持嵌套使用和JavaScript交互通过toggle事件响应状态变化适用于FAQ代码示例表单选项等场景可自定义样式需考虑无障碍访问大多数现代浏览器支持可通过polyfill兼容旧浏览器大量使用时需注意性能优化可与多种HTML元素结合支持动态内容加载打印时默认隐藏内容可通过CSS强制显示

<mark>-高亮文本

HTML5中的mark标签用于高亮显示文本内容具有语义化意义不仅限于样式效果浏览器默认显示黄色背景但可通过CSS自定义样式它常用于搜索结果关键词标注教育内容重点突出等场景与span加CSS实现相比mark更具语义化优势支持嵌套使用和动态操作兼容现代主流浏览器可通过JavaScript交互实现动态高亮功能在可访问性和打印样式方面也有特殊考虑合理使用可以增强内容可读性和用户体验但不直接影响SEO排名创意用法包括渐进式高亮多色分类系统和笔记标注等

<figcaption>-媒体内容标题

HTML5的figcaption标签专门用于为figure元素提供标题或说明文字必须与figure配合使用形成媒体内容加说明的完整结构它必须是figure的直接子元素且一个figure中只能包含一个figcaption可以放在第一个或最后一个子元素位置文章详细展示了figcaption与图片代码块视频等不同媒体类型的配合使用方法提供了样式定制技巧包括基础样式图片标题特殊样式和代码块标题样式等还介绍了响应式设计中的应用通过媒体查询实现不同屏幕尺寸下的标题优化强调了无障碍访问的重要性确保与关联内容在DOM顺序上合理避免仅通过视觉样式传达信息最后展示了与表格的结合使用以及通过JavaScript实现交互式标题的方法并提供了针对打印媒体的样式优化建议

<figure>-媒体内容组合

HTML5的figure标签是用于包裹独立媒体内容及其标题的语义化容器 典型应用包括图片代码视频和图表等内容展示 基本结构由媒体元素和可选的figcaption标题组成 支持多内容组合与响应式设计 通过CSS可以自定义样式和布局 JavaScript可实现交互功能 强调无障碍访问需注意alt文本和键盘导航 相比div等通用容器更具语义优势 有利于SEO优化和阅读器识别 所有现代浏览器均良好支持 对于旧版IE需添加特定CSS声明 实际应用场景涵盖博客插图和产品展示等 语义化特性使其成为结构化媒体内容的理想选择

<aside>-侧边内容

HTML5的aside标签是语义化标签用于定义页面非主要内容通常表现为侧边栏或补充内容它适合展示广告引用注释等辅助信息基本用法是双标签包裹文本图像等元素需CSS自定义样式核心价值在于语义化明确标识与主内容相关但独立的部分典型应用场景包括侧边栏导航文章附加信息和广告区域布局实现依赖CSS可通过flex等方案创建响应式设计需注意与div的语义区别应优先使用aside提升可访问性建议配合aria属性使用浏览器兼容性良好现代浏览器均支持可与其他语义标签如mainarticle等协同使用打印时可隐藏非必要内容

<section>-文档章节

HTML5的section标签是语义化标签用于定义文档中的独立章节或区块包含相关内容如文章章节或功能模块与div不同section具有明确语义提升可读性和SEO效果基本用法是将内容包裹在section标签内通常搭配标题使用section适合划分逻辑独立的内容区块与article不同article用于完整独立内容section用于文档章节section可嵌套使用表达复杂结构适用于文章章节功能区块或标签页等内容使用时避免滥用需搭配标题不要替代article可通过CSS自定义样式其语义化特性有助于提升可访问性可结合ARIA属性进一步优化

<article>-独立内容块

HTML5的article标签用于定义独立自包含的内容块如新闻文章或博客帖子其内容脱离上下文仍能保持完整性与通用容器div不同它具有明确的语义价值适合增强文档结构和可访问性article内部可包含多个section并支持嵌套使用如评论回复场景每个article应包含标题元素以提升可访问性实际应用包括新闻聚合页面和电商产品列表结合Schemaorg标记可优化SEO效果动态内容加载时可通过JavaScript插入article元素浏览器默认将其渲染为块级元素响应式设计中可与CSSGrid配合使用也可作为Web组件ShadowDOM的容器使用article标签能有效提升网页语义化和机器可读性

<main>-文档主要内容

HTML5的main标签用于定义文档主要内容帮助识别页面核心提升无障碍访问每个文档应只有一个main标签不应嵌套在article等标签内它与body不同仅聚焦核心内容常与article等标签配合使用在博客电商等场景有实际应用需要注意无障碍访问如添加跳过链接浏览器兼容性良好旧版IE需polyfill可通过JavaScript动态更新内容默认是块级元素可进行样式化在ReactVue等框架中也有特定使用方式

<nav>-导航链接

HTML5的nav标签是专门用于定义导航链接的语义化标签它能提升网页可访问性和SEO效果nav通常包含主导航菜单面包屑导航或页脚导航等基本用法是在nav内放置无序列表或直接链接与传统div实现相比nav具有更强的语义价值使用时应注意主要导航场景避免过度使用增强可访问性可通过ARIA标签和键盘导航支持响应式设计可结合汉堡菜单实现移动端适配高级用法包括下拉菜单和粘性导航栏需注意避免嵌套过深和忽略无障碍等常见错误所有现代浏览器都支持nav标签性能优化可减少DOM节点和使用CSS精灵图SEO方面建议使用结构化数据和描述性链接文本实际案例展示了电商网站和单页应用的导航实现方式