详细HTML核心元素信息表

[OpenTK]

元素名	属性及含义（通用属性+独有属性，含义精准说明）	多场景使用示例（覆盖常见用法）	元素定义（明确语义与分类）	元素作用（全面说明核心功能）	备注（补充使用规范、兼容性、注意事项）
a	一、通用属性：同div（id、class、style、title、lang、hidden、tabindex、accesskey、dir）；二、独有属性：1. href：指定链接目标地址，值可分为：① 绝对URL（如https://www.baidu.com）；② 相对URL（如./page.html）；③ 锚点（如#top，定位到页面内id为top的元素）；④ 邮箱（如mailto:[e-mail]）；⑤ 电话（如tel:13800138000）；⑥ 空链接（如javascript:void(0)，取消默认跳转）；2. target：指定链接打开方式，可选值：① _self（默认，当前窗口打开）；② _blank（新窗口打开）；③ _parent（父框架打开）；④ _top（顶级框架打开）；⑤ 框架名称（在指定框架内打开）；3. download：布尔属性（可指定文件名），设置后点击链接触发文件下载，而非跳转；4. rel：指定当前文档与目标链接的关系，常用值：① noopener：防止新窗口获取当前窗口控制权，提升安全性（配合_target="_blank"使用）；② noreferrer：不发送referrer信息（隐藏跳转来源）；③ nofollow：告诉搜索引擎不追踪该链接；5. hreflang：指定目标链接内容的语言；6. type：指定目标链接的MIME类型（如text/html、application/pdf）；7. ping：指定链接被点击时发送POST请求的URL（用于统计点击量）	1. 外部链接：<a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer" title="跳转到百度">百度搜索</a>2. 锚点跳转：<a href="#footer" title="跳转到页脚">回到页脚</a><div id="footer">页脚内容</div>3. 邮件触发：<a href="mailto:[e-mail]?subject=咨询问题&body=我想咨询..." title="发送邮件">联系客服</a>4. 文件下载：<a href="files/资料包.zip" download="学习资料包.zip" title="下载资料">下载资料包</a>5. 电话拨打：<a href="tel:[phone]" title="拨打客服电话">400-123-4567</a>	HTML中的超链接（锚点）元素，属于流内容，核心语义是建立页面内外的关联，实现内容跳转或功能触发	1. 页面导航：实现不同网页之间的跳转（外部链接）、同一网页内的锚点定位（内部导航）；2. 功能触发：触发邮件发送、电话拨打、文件下载等系统或页面功能；3. 交互载体：配合JavaScript绑定点击事件，实现自定义交互（如弹窗、内容切换、表单提交）；4. 信息关联：建立当前内容与其他相关资源（文档、图片、视频）的关联，提升内容完整性	1. 布局特性：默认是行内元素，可通过display:block转换为块级元素实现宽高设置和独占一行；2. 默认样式：未访问链接为蓝色、下划线，已访问链接为紫色、下划线，hover时指针变为手型，可通过CSS重置；3. 安全规范：使用target="_blank"时必须添加rel="noopener noreferrer"，防止恶意网站通过window.opener窃取当前页面信息；4. 兼容性：href、target等核心属性全浏览器支持，ping属性在IE浏览器中不支持；5. 特殊说明：当href属性缺失时，a元素仅为普通行内元素，无链接功能；6. 嵌套规则：可嵌套除自身外的行内元素，嵌套块级元素需先将a转换为块级元素
abbr	一、通用属性：id、class、style、title、lang、hidden、dir；二、独有属性：无（缩写文本语义元素，核心通过title属性展示完整含义）	1. 常见缩写标注：<p>前端开发核心技术包括<abbr id="html-abbr" class="abbreviation" style="text-decoration:underline dotted;" title="HyperText Markup Language">HTML</abbr>、<abbr style="text-decoration:underline dotted;" title="Cascading Style Sheets">CSS</abbr>和<abbr style="text-decoration:underline dotted;" title="JavaScript">JS</abbr>。</p>2. 专业术语缩写：<p>在Web开发中，<abbr style="color:#28a745;" title="Representational State Transfer">REST</abbr>风格的API被广泛应用于前后端数据交互。</p>	HTML中的缩写文本语义元素，行内元素，核心语义是标记页面中的缩写词或首字母缩写，通过title属性展示完整含义，提升文本可读性	1. 缩写语义标识：明确标记缩写文本，区别于普通文本，让用户和辅助设备识别其缩写属性；2. 完整含义提示：通过title属性提供缩写的完整文本（如"HTML"对应"HyperText Markup Language"），用户鼠标悬停时可查看，解决缩写理解障碍；3. 专业术语适配：适配专业领域的缩写术语（如"REST""API"），提升专业文档的可读性；4. 样式区分：可通过CSS添加特殊样式（如下划线），让用户快速识别缩写文本	1. 默认样式：部分浏览器默认添加点状下划线，无其他特殊样式，可通过CSS自定义；2. 核心属性：title属性是关键，必须填写缩写的完整含义，否则元素语义失效；3. 兼容性：全浏览器支持，无兼容问题；4. 与acronym区别：acronym是旧元素（已废弃），用于首字母缩写，abbr可覆盖所有缩写场景，现代开发统一使用abbr；5. 嵌套限制：仅可嵌套行内元素和文本，不可嵌套块级元素；6. 使用规范：仅用于存在理解障碍的缩写，常见通用缩写（如"OK"）无需使用；7. 可访问性：屏幕阅读器会读取缩写文本，并提示用户查看title属性的完整含义，提升无障碍体验
address	一、通用属性：id、class、style、title、lang、hidden、dir、contenteditable；二、独有属性：无（联系信息语义容器，无额外专属属性）	1. 页面联系信息：<footer><address id="site-address" class="contact-info" style="font-style:normal;line-height:1.6;"><p>联系我们：</p><p>地址：北京市海淀区中关村大街1号</p><p>电话：[phone]</p><p>邮箱：[e-mail]</p></address></footer>2. 文章作者信息：<article><header><h2>HTML语义化实践</h2></header><div class="article-content">...</div><address style="margin-top:20px;padding-top:10px;border-top:1px solid #eee;font-style:normal;">作者：张三<br/>邮箱：[e-mail]<br/>发布日期：2024-05-20</address></article>	HTML中的联系信息语义元素，属于块级元素，核心语义是定义与当前文档或文章相关的联系信息（如地址、电话、邮箱、作者信息等）	1. 联系信息语义化：明确标记联系信息，区别于普通文本，让搜索引擎和辅助设备快速识别；2. 信息聚合：集中展示相关的联系信息，形成逻辑统一的联系单元，提升可读性；3. 作者信息标识：用于标记文章、博客等内容的作者信息（姓名、联系方式），语义更清晰；4. 页面布局辅助：作为联系信息的容器，便于统一控制样式，实现整齐的布局	1. 默认样式：默认字体为斜体（font-style:italic），可通过CSS设置font-style:normal改为正常字体；2. 布局特性：块级元素，默认独占一行，无其他默认样式，需通过CSS定义边距、颜色等；3. 内容规范：应包含真实的联系信息，如地址、电话、邮箱、作者信息等，不建议放置无关内容；4. 嵌套规则：可嵌套p、br、a、span等元素，适合展示多行联系信息；5. 兼容性：全浏览器支持，无兼容问题；6. 语义范围：联系信息应与当前文档或最近的article、section相关，若为全局联系信息，建议放在footer内；7. 与div区别：address有"联系信息"的语义，div无语义；仅用于展示联系信息时使用address，否则用div；8. 可访问性：辅助设备会识别address元素为"联系信息"，提升无障碍体验
area	一、通用属性：id、class、style、title、lang、hidden；二、独有属性：1. shape：指定热区的形状，可选值：rect（矩形）、circle（圆形）、poly（多边形）、default（整个图像）；2. coords：指定热区的坐标，格式随shape变化（rect：x1,y1,x2,y2；circle：x,y,r；poly：x1,y1,x2,y2,...xn,yn）；3. href：指定热区点击后跳转的URL，与a标签功能一致；4. target：指定跳转目标窗口（_blank/_self/_parent/_top）；5. alt：指定热区的替代文本，用于图像无法显示时或辅助设备识别；6. nohref：指定热区无跳转功能（已废弃，无需设置href即可实现）	1. 矩形热区图像：<img src="nav-map.jpg" usemap="#nav-map" alt="导航地图" style="width:600px;"><map name="nav-map" id="nav-map"><area shape="rect" coords="0,0,200,100" href="/home" alt="首页" title="点击进入首页"><area shape="rect" coords="200,0,400,100" href="/about" alt="关于我们" title="点击了解我们"><area shape="rect" coords="400,0,600,100" href="/contact" alt="联系我们" title="点击联系我们"></map>2. 圆形+多边形热区：<img src="product-map.jpg" usemap="#product-map" alt="产品分布图" style="width:500px;"><map name="product-map"><area shape="circle" coords="250,150,50" href="/product1" alt="产品1" title="产品1详情"><area shape="poly" coords="100,200,150,250,50,250" href="/product2" alt="产品2" title="产品2详情"></map>	HTML中的图像热区元素，空元素，仅作为map元素的子元素存在，核心语义是为img元素定义可点击的热区区域，实现图像的局部点击交互	1. 局部点击交互：为图像的特定区域（如矩形、圆形、多边形）添加点击事件，实现局部跳转或交互功能；2. 图像导航适配：适配图像导航、图像地图等场景，让用户通过点击图像不同区域实现导航；3. 替代文本支持：通过alt属性提供热区替代文本，提升图像无法显示时的用户体验和可访问性；4. 精准交互控制：通过shape和coords属性精准定义热区范围，实现复杂图像的局部交互	1. 从属关系：必须嵌套在map元素内部，map需通过name属性与img的usemap属性关联（usemap值为"#map名称"）；2. 空元素特性：无内容，自闭合元素，写法为<area/>或<area>；3. 坐标规则：coords属性的坐标以图像左上角为原点（0,0），单位为像素，需准确匹配图像尺寸；图像缩放时坐标可能失效，建议图像固定尺寸或使用响应式坐标计算；4. 兼容性：全浏览器支持，无兼容问题；5. 废弃属性：nohref属性已废弃，无需设置href属性即可实现无跳转热区；6. 交互提示：建议通过title属性添加鼠标悬停提示，提升用户体验；7. 可访问性：alt属性为必设项，辅助设备会读取alt文本，帮助用户了解热区功能；8. 注意事项：热区不可见，需确保用户能直观识别可点击区域；复杂热区建议配合图像本身的视觉提示（如边框、图标）
article	一、通用属性：id、class、style、title、lang、hidden、dir、contenteditable；二、独有属性：无（语义化文章容器，无专属属性）	1. 单篇文章：<article id="news-article" class="article" style="width:800px;margin:20px auto;padding:20px;border:1px solid #eee;border-radius:5px;"><header class="article-header"><h2 style="margin-top:0;">HTML5语义化标签的应用价值</h2><p style="color:#666;">发布时间：2024-05-10 作者：前端君</p></header><div class="article-content" style="line-height:1.8;"><p>随着前端技术的发展，语义化开发越来越受到重视...</p></div><footer class="article-footer" style="margin-top:20px;padding-top:10px;border-top:1px solid #eee;"><p>本文版权归作者所有，转载请注明出处</p></footer></article>2. 评论列表：<article class="comment" style="margin:10px 0;padding:10px;background:#f9f9f9;"><header><span class="comment-author" style="font-weight:bold;">用户123</span><span style="margin-left:10px;color:#999;">2024-05-11 15:30</span></header><p class="comment-content">写得很好，收获很大！</p></article>	HTML5新增的语义化块级元素，属于流内容，核心语义是定义页面中独立的、可复用的文章级内容单元，该内容脱离上下文后仍有完整含义	1. 独立内容语义化：明确标识独立的文章级内容（如新闻、博客、评论、论坛帖子等），提升页面结构的语义清晰度；2. 内容模块化：将独立内容封装为模块，便于复用（如评论列表中的单条评论）和维护；3. 可访问性提升：帮助辅助设备识别独立的文章内容，优化无障碍用户的阅读体验；4. SEO优化：搜索引擎可通过article标签快速识别页面中的核心文章内容，提升核心内容的权重	1. 核心特征：内容必须独立完整，脱离页面其他内容后仍可被理解（如单条评论、单篇新闻）；2. 使用场景：新闻文章、博客帖子、论坛回帖、产品评论、用户投稿等独立内容单元；3. 嵌套规则：可嵌套header（文章头部）、footer（文章底部）、p、h1-h6、section、img等元素，构建完整的文章结构；4. 布局特性：块级元素，默认独占一行，无默认样式，需通过CSS定义外观；5. 兼容性：支持IE9+及现代浏览器，IE8及以下不支持，需降级为div；6. 与section区别：article是"独立完整的文章"，section是"内容区块的划分"，article可嵌套section（文章内的章节划分），section也可嵌套article（区块内的多篇文章）；7. 数量限制：一个页面可包含多个article（如多篇新闻、多条评论），无数量限制
aside	一、通用属性：id、class、style、title、lang、hidden、dir、contenteditable；二、独有属性：无（语义化侧边内容容器，无额外专属属性）	1. 页面侧边栏：<div class="page-container" style="display:flex;width:1200px;margin:0 auto;"><main style="flex:3;padding:20px;">文章主体内容...</main><aside id="sidebar" class="page-sidebar" style="flex:1;padding:20px;background:#f5f5f5;margin-left:20px;"><h3 style="margin-top:0;">相关推荐</h3><ul style="list-style:none;padding:0;"><li style="margin:10px 0;"><a href="/article1" style="color:#333;">CSS布局技巧汇总</a></li><li style="margin:10px 0;"><a href="/article2" style="color:#333;">JavaScript异步编程</a></li></ul></aside></div>2. 文章侧边注释：<article><p>HTML5语义化标签极大提升了页面的可维护性。<aside style="display:block;margin:10px 0;padding:10px;background:#fff3cd;border-left:3px solid #ffeeba;"><strong>提示：</strong>语义化标签不仅利于开发者维护，还能提升SEO效果。</aside>合理使用这些标签能让代码结构更清晰。</p></article>	HTML5新增的语义化块级元素，属于流内容，核心语义是定义页面中与主要内容相关但非核心的侧边内容、辅助内容或注释内容	1. 侧边内容承载：作为页面侧边栏的容器，展示相关推荐、作者信息、目录、广告等辅助内容；2. 辅助信息补充：在文章内部添加侧边注释、提示、说明等内容，补充核心内容的相关信息；3. 语义化结构强化：明确区分核心内容（main、article）和辅助内容（aside），提升页面结构的语义清晰度；4. 可访问性提升：帮助辅助设备识别辅助内容，优化无障碍用户的阅读体验	1. 核心特征：内容与主要内容相关但可独立存在，删除aside后不影响核心内容的理解；2. 使用场景：页面侧边栏、文章注释、相关推荐、作者简介、目录导航、广告区域等；3. 布局特性：块级元素，默认独占一行，通常通过CSS的flex、float等属性实现与核心内容的并排布局；4. 嵌套规则：可嵌套div、h1-h6、ul、p、a等元素，也可嵌套article、section等语义化元素；5. 兼容性：支持IE9+及现代浏览器，IE8及以下不支持，需降级为div；6. 与main区别：main表示页面核心内容，aside表示辅助内容，两者语义互补；7. 与div区别：aside有"辅助内容"的语义，div无语义；仅当内容为辅助性、侧边性内容时使用aside，否则用div；8. 数量限制：一个页面可包含多个aside（如页面侧边栏+文章内注释），无数量限制
audio	一、通用属性：id、class、style、title、lang、hidden、dir；二、独有属性：1. src：指定音频文件的URL（核心属性，指向音频资源）；2. controls：布尔属性，显示浏览器默认的音频控制条（播放/暂停、音量、进度条等）；3. autoplay：布尔属性，页面加载完成后自动播放音频（多数浏览器需配合muted使用）；4. loop：布尔属性，音频播放完毕后循环播放；5. muted：布尔属性，设置音频默认静音；6. preload：指定音频预加载策略，可选值：auto（自动预加载）、metadata（仅预加载元数据，如时长）、none（不预加载）；7. poster：音频封面图URL（部分浏览器支持，播放前显示）	1. 基础音频播放：<audio id="bg-music" class="audio-player" src="bg-music.mp3" controls style="width:300px;margin:20px 0;">您的浏览器不支持音频播放</audio>2. 自动循环静音音频：<audio src="ambient-sound.mp3" autoplay loop muted preload="auto"></audio>3. 多源音频兼容：<audio controls style="width:400px;"><source src="music.mp3" type="audio/mpeg"><source src="music.ogg" type="audio/ogg">您的浏览器不支持音频播放，请更新浏览器</audio>	HTML5新增的音频播放元素，属于流内容，核心语义是在页面中嵌入并播放音频资源，支持多种音频格式，可配合source元素实现格式兼容	1. 音频嵌入与播放：直接在网页中集成音频播放功能，无需依赖第三方插件（如Flash）；2. 播放控制：通过controls属性提供基础播放控制，或通过JavaScript自定义控制逻辑；3. 格式兼容：配合source元素提供多种音频格式，适配不同浏览器；4. 场景适配：支持自动播放、循环播放、静音播放等，满足背景音乐、语音播报等不同场景需求	1. 支持格式：主流浏览器支持MP3、OGG、WAV等格式，MP3格式兼容性最广；2. 备选内容：audio标签内的文本内容在浏览器不支持该元素时显示，提升兼容性；3. autoplay限制：出于用户体验，多数现代浏览器禁止未静音的音频自动播放，需用户交互（如点击）后触发，或配合muted属性；4. 布局特性：行内块元素，默认宽度由控制条决定，可通过CSS设置固定宽度；5. 兼容性：支持IE9+及现代浏览器，IE8及以下不支持；6. 自定义控制：默认控制条样式简单，可隐藏默认controls，通过JavaScript监听play、pause等事件，自定义控制界面；7. 预加载注意：preload="auto"可能增加页面加载压力，非必要音频建议设为preload="none"
blockquote	一、通用属性：id、class、style、title、lang、hidden、dir；二、独有属性：1. cite：指定一个URL，该URL是引用内容的来源（如原文链接、文献地址）	1. 文章引用：<p>关于语义化开发，前端领域有这样的观点：</p><blockquote id="quote-content" class="quote-style" style="border-left:3px solid #ddd;padding-left:15px;margin:15px 0;color:#666;" cite="https://example.com/semantic-article">语义化HTML不仅提升了代码的可读性和可维护性，更重要的是优化了页面的可访问性和SEO效果，是现代前端开发的基础规范之一。</blockquote>2. 文献引用：<blockquote style="margin:20px 0;padding:10px;background:#f9f9f9;border-radius:4px;" cite="https://example.com/research-paper"><p>研究表明，合理使用语义化标签的页面，其搜索引擎收录效率比非语义化页面提升30%以上。</p><p style="text-align:right;margin-top:10px;">——《语义化HTML的实践价值研究》</p></blockquote>	HTML中的引用块语义元素，块级元素，核心语义是定义一段从其他来源引用的内容，通常以缩进或特殊边框的形式与普通文本区分	1. 引用内容标识：明确标记引用的外部内容，区别于作者原创内容，提升文档的语义清晰度和可信度；2. 来源追溯：通过cite属性记录引用内容的来源URL，便于用户查看原文，也利于搜索引擎追溯信息源头；3. 视觉区分：默认样式与普通文本有差异（如缩进、边框），让用户快速识别引用内容；4. 文档结构优化：规范引用内容的呈现形式，提升文档的排版整洁度和可读性	1. 默认样式：不同浏览器默认样式有差异，通常为左缩进、左侧边框，可通过CSS自定义边框、边距、颜色等；2. 布局特性：块级元素，默认独占一行，宽度与父容器一致；3. 嵌套规则：可嵌套p、br、em、strong等元素，适合展示多行引用内容；4. 兼容性：全浏览器支持，无兼容问题；5. cite属性：仅存储来源URL，不直接显示在页面中，可通过CSS::after伪元素或JavaScript将来源信息显示出来；6. 与q标签区别：blockquote用于块级引用（多行、独立段落），q标签用于行内引用（短句、嵌入段落中）；7. 内容规范：引用内容应准确无误，完整保留原文含义，必要时添加引用来源说明（如作者、文献名）；8. 可访问性：辅助设备会识别blockquote元素为"引用内容"，并可读取cite属性的来源信息，提升无障碍体验
br	一、通用属性：id、class、style、title、lang、hidden；二、独有属性：无（换行专属元素，无额外专属属性）	1. 文本换行：<p style="line-height:1.6;">HTML是构建网页的基础语言。<br/>它由标签、属性和内容组成，<br/>与CSS和JavaScript共同构成现代网页的三大核心。</p>2. 表单元素换行：<form><label for="name">姓名：</label><input type="text" id="name" name="name"><br/><label for="phone">电话：</label><input type="tel" id="phone" name="phone"><br/><button type="submit">提交</button></form>	HTML中的换行元素，属于空元素（自闭合元素），核心语义是在文本或元素之间插入一个强制换行符，实现内容的换行显示	1. 文本换行控制：在段落、说明文本等内容中实现精准的换行，避免浏览器自动合并空格和换行导致的排版混乱；2. 表单布局简化：在简单表单中，通过br快速实现表单元素的垂直排列，无需复杂CSS布局；3. 内容分段辅助：在无明确段落划分（无需使用p标签）的场景下，通过br分隔不同行的内容，提升可读性；4. 特殊格式保留：对于需要固定换行格式的内容（如诗歌、代码片段预览），通过br保留原始换行结构	1. 空元素特性：无内容，属于自闭合元素，正确写法为<br/>（HTML5中可省略斜杠写为<br>），无需闭合标签；2. 布局特性：仅影响垂直方向的换行，不产生额外的间距（区别于p标签的上下margin）；3. 使用规范：避免过度使用br实现间距控制（应使用CSS的margin、padding），仅用于必要的换行；4. 兼容性：全浏览器支持，无任何兼容问题；5. 与p标签区别：p标签用于划分独立段落（自带间距），br标签仅用于同一段落内的换行（无间距）；6. 嵌套限制：无法嵌套任何元素，也不能被嵌套在void元素（如img、input）内部；7. 样式影响：可通过CSS的line-height属性调整换行后的行间距，但br本身无宽高、边距等盒模型属性
button	一、通用属性：1. id、class、style、title、lang、hidden、tabindex、dir、accesskey、autofocus；2. disabled：布尔属性，禁用按钮（禁用后无法点击，无点击事件）；3. name：按钮名称，提交表单时与value值配对传输（仅type="submit"或"reset"时有效）；4. value：按钮的值（提交表单时传输的值，按钮显示文本由标签内容决定）；5. form：关联的表单id（即使按钮在form外部，也能触发该表单的提交或重置）；二、独有属性：1. type：按钮类型（核心属性），可选值：① button（默认，普通按钮，无默认行为，需配合JavaScript实现功能）；② submit（提交按钮，点击后提交关联的表单）；③ reset（重置按钮，点击后重置关联表单的所有输入项为默认值）；2. formaction：覆盖关联表单的action属性（仅type="submit"有效）；3. formmethod：覆盖关联表单的method属性（get/post，仅type="submit"有效）；4. formtarget：覆盖关联表单的target属性（仅type="submit"有效）；5. formnovalidate：提交表单时跳过验证（仅type="submit"有效）；6. formenctype：覆盖关联表单的enctype属性（指定表单数据编码方式，仅type="submit"有效）	1. 普通按钮（绑定点击事件）：<button type="button" id="show-modal" class="btn btn-primary" style="width:120px;height:40px;background:#4285f4;color:#fff;border:none;border-radius:4px;" onclick="alert('点击了普通按钮')">打开弹窗</button>2. 提交按钮：<button type="submit" form="login-form" class="btn btn-submit">提交登录</button><form id="login-form" action="/login" method="post">...</form>3. 重置按钮：<button type="reset" disabled class="btn btn-reset" style="background:#ccc;color:#333;">重置表单</button>4. 带图标按钮：<button type="button" class="btn btn-icon"><img src="icon-search.png" alt="搜索" style="width:16px;height:16px;margin-right:5px;">搜索</button>	HTML中的按钮元素，属于流内容，核心语义是提供可点击的交互控件，支持表单提交、重置和自定义点击事件，可嵌套内容（文本、图片等）	1. 自定义交互触发：作为普通按钮，配合JavaScript绑定点击事件，实现弹窗、内容切换、数据加载、删除确认等自定义交互功能；2. 表单操作：作为提交按钮提交表单数据，或作为重置按钮重置表单输入项；3. 页面交互入口：作为各类功能的交互入口（如搜索、下载、收藏、分享等），提升用户操作的直观性；4. 多样化外观：可嵌套文本、图片、图标等内容，实现丰富的按钮外观（如图标按钮、文字图标组合按钮）	1. 布局特性：默认是行内块元素（inline-block），可直接设置width和height，不独占一行，多个按钮可同行排列；2. 与input按钮区别：① input type="button"是自闭合元素，无法嵌套内容；button标签可嵌套文本、图片等，外观更灵活；② button的默认类型是submit（若在form内，点击会提交表单），input type="button"默认无默认行为；3. 必设type：建议始终明确设置type属性，避免因默认类型导致意外的表单提交；4. 嵌套规则：可嵌套行内元素（文本、img、span、a等），不建议嵌套块级元素；5. 样式自定义：支持设置background、color、border、border-radius、hover/active状态等，易实现个性化样式；6. 兼容性：全浏览器支持，核心属性无兼容问题；7. 禁用状态：设置disabled后，按钮外观会变灰，无法点击，且不触发点击事件，可通过CSS的:disabled伪类自定义禁用样式
caption	一、通用属性：id、class、style、title、lang、hidden、dir；二、独有属性：1. align：设置表格标题对齐方式（left/center/right/top/bottom），已废弃，建议用CSS的text-align、caption-side替代	1. 表格顶部标题：<table id="student-score" style="width:600px;margin:20px auto;border-collapse:collapse;"><caption class="table-caption" style="font-weight:bold;font-size:16px;margin-bottom:10px;text-align:center;">2024年期中考试成绩表</caption><thead><tr><th>姓名</th><th>语文</th></tr></thead></table>2. 表格底部标题：<table style="width:500px;"><caption style="caption-side:bottom;text-align:left;color:#666;margin-top:5px;">数据来源：教务处（2024-05-20）</caption><tbody><tr><td>张三</td><td>95</td></tr></tbody></table>	HTML中的表格标题元素，块级元素，仅作为table元素的子元素存在，核心语义是为表格提供总标题或说明性文本	1. 表格主题标识：明确表格的核心主题（如"成绩表""数据统计"），让用户快速理解表格用途；2. 辅助说明：补充表格相关信息（如数据来源、统计时间），提升表格内容的完整性；3. 布局优化：作为表格的专属标题容器，便于统一控制标题样式，实现表格与标题的协调布局；4. 语义关联：建立标题与表格的直接语义关联，利于辅助设备识别表格结构	1. 从属关系：必须是table的第一个子元素，否则浏览器会自动调整其位置至表格最前方；2. 布局特性：默认显示在表格顶部，可通过CSS的caption-side属性设置为bottom（底部）；3. 废弃属性：align属性已废弃，对齐方式建议用text-align（水平对齐）、caption-side（上下位置）控制；4. 兼容性：全浏览器支持，无兼容问题；5. 样式自定义：可通过CSS设置字体、颜色、边距等，与表格样式协调统一；6. 内容规范：标题文本需简洁明了，准确概括表格主题，避免冗余信息；7. 嵌套规则：可嵌套行内元素和文本，不可嵌套块级元素（如div、p）
code	一、通用属性：id、class、style、title、lang、hidden、dir、contenteditable；二、独有属性：1. lang：指定代码的编程语言（如lang="html"、lang="css"、lang="javascript"），帮助辅助设备识别代码类型；2. 无其他专属属性	1. 行内代码片段：<p>在HTML中，通过<code class="html-code" style="background:#f8f9fa;padding:2px 4px;border-radius:2px;font-family:monospace;"><div&gt;</code>标签划分页面布局，配合<code class="css-code" style="background:#f8f9fa;padding:2px 4px;border-radius:2px;font-family:monospace;">style</code>属性设置样式。</p>2. 代码块（配合pre）：<pre class="code-block" style="background:#f8f9fa;padding:15px;border-radius:4px;overflow-x:auto;font-family:monospace;"><code lang="javascript">// 简单的JavaScript函数<br/>function sayHello() {<br/> console.log("Hello, HTML!");<br/>}</code></pre>3. 可编辑代码：<p>修改以下代码：<code contenteditable="true" style="background:#f8f9fa;border:1px solid #ddd;padding:5px;">console.log("Hello World");</code></p>	HTML中的代码文本元素，属于行内元素，核心语义是标记页面中的代码片段（行内代码或代码块），明确文本内容为计算机代码	1. 代码语义标识：明确标记代码文本，区别于普通文本，利于开发者理解、辅助设备识别和搜索引擎归类；2. 代码样式统一：默认使用等宽字体（monospace），使代码排版更规范，配合CSS可实现代码高亮效果；3. 行内代码展示：用于展示段落中的短代码片段（如单个标签、属性、函数名）；4. 代码块支撑：配合pre元素（保留空格和换行）展示完整的代码块，实现代码的结构化展示	1. 字体特性：默认使用等宽字体（如Courier New、Consolas），保证代码中字符对齐，提升代码可读性；2. 布局特性：行内元素，单独使用时为行内代码；嵌套在pre内时，随pre成为块级代码块；3. 嵌套规则：可嵌套文本和行内元素，嵌套在pre内时可保留代码的原始缩进和换行；4. 兼容性：全浏览器支持，无兼容问题；5. 代码高亮：原生无代码高亮功能，需通过CSS类或JavaScript插件（如Prism、Highlight.js）实现语法高亮；6. 特殊字符处理：代码中的HTML特殊字符（如<、>、&）需转换为实体字符（&lt;、&gt;、&amp;），否则会被浏览器解析为HTML标签；7. 使用规范：仅用于标记代码内容，不用于其他等宽文本的展示；代码块必须配合pre使用，才能保留原始格式
col	一、通用属性：id、class、style、title、lang、hidden；二、独有属性：1. span：指定当前col元素应用的列数（默认1，即应用于1列；span="3"表示应用于3列）；2. width：设置列的宽度，已废弃，建议用CSS的width替代	1. 单列样式设置：<table style="width:600px;border-collapse:collapse;"><colgroup><col id="name-col" class="col-style" style="background:#f9f9f9;"><col style="background:#fff;"><col style="background:#f9f9f9;"></colgroup><thead><tr><th>姓名</th><th>年龄</th><th>职位</th></tr></thead><tbody><tr><td>张三</td><td>25</td><td>前端开发</td></tr></tbody></table>2. 多列样式设置：<table style="width:700px;"><colgroup><col span="2" style="background:#f5f5f5;"><col style="background:#fff;"></colgroup><thead><tr><th>商品名称</th><th>单价</th><th>库存</th></tr></thead></table>	HTML中的表格列语义元素，空元素，仅作为colgroup的子元素存在，核心语义是为表格的一列或多列指定统一的样式或属性，实现列级样式控制	1. 列级样式统一：为表格的一列或多列统一应用样式（如背景色、边框、宽度），无需为每个单元格单独设置，提升开发效率；2. 列属性定义：集中定义列的相关属性，实现列级别的统一控制；3. 表格结构辅助：配合colgroup明确表格的列分组，提升表格结构的清晰度；4. 动态样式调整：便于通过JavaScript动态修改列的样式（如高亮某一列数据）	1. 从属关系：无法单独使用，必须嵌套在colgroup内部，且colgroup需嵌套在table内部、thead之前；2. 空元素特性：无内容，自闭合元素，写法为<col/>或<col>；3. 样式优先级：col定义的样式会应用于对应列的所有单元格（th、td），但单元格自身的style属性优先级更高；4. 兼容性：全浏览器支持，无兼容问题；5. 废弃属性：width属性已废弃，列宽建议通过CSS的width属性控制；6. span属性：核心属性，用于指定应用的列数，默认1；多个col按顺序依次应用于表格的列；7. 可设置样式：仅支持部分CSS样式（如background-color、border、width），不支持影响文本的样式（如font-size、color，不同浏览器支持有差异）；8. 可选性：非表格必需元素，简单表格可直接为单元格设置样式，复杂表格（多列统一样式）建议使用
colgroup	一、通用属性：id、class、style、title、lang、hidden、dir；二、独有属性：1. span：指定colgroup包含的列数（当内部无col元素时生效，内部有col时，总列数为所有col的span之和）；2. width：设置整个列组的宽度，已废弃，建议用CSS替代	1. 基础列组划分：<table style="width:700px;border-collapse:collapse;"><colgroup id="table-colgroup" class="colgroup-style"><col style="background:#f9f9f9;"><col style="background:#fff;"><col style="background:#f9f9f9;"></colgroup><thead><tr><th>学号</th><th>姓名</th><th>成绩</th></tr></thead><tbody><tr><td>001</td><td>张三</td><td>92</td></tr></tbody></table>2. 复杂列组与样式：<table style="width:800px;"><colgroup><col span="2" style="background:#f5f5f5;border-right:2px solid #333;"><col span="2" style="background:#fff;"></colgroup><thead><tr><th colspan="2">基础信息</th><th colspan="2">成绩信息</th></tr><tr><th>姓名</th><th>年龄</th><th>语文</th><th>数学</th></tr></thead></table>	HTML中的表格列组语义元素，块级元素，仅作为table的子元素存在，核心语义是定义表格的列组，用于包裹col元素，实现对表格列的分组管理和统一控制	1. 列分组管理：将表格的列按逻辑分组（如"基础信息列组""成绩信息列组"），提升表格结构的清晰度；2. 组级样式控制：为整个列组统一应用样式（如背景色、边框），实现列组间的视觉区分；3. 辅助col元素：作为col元素的容器，规范col的嵌套结构，便于开发者维护；4. 复杂表格支撑：适配多级表头、多列分组的复杂表格，提升表格的语义完整性和可访问性	1. 从属关系：嵌套在table内部，需放在thead之前，内部可嵌套col元素（多个col组成列组）；2. 子元素规则：可嵌套一个或多个col元素，也可无col元素（此时通过span属性指定列数）；3. 布局特性：块级元素，但自身无视觉呈现（不可见），仅用于样式和语义控制；4. 兼容性：全浏览器支持，无兼容问题；5. 废弃属性：width属性已废弃，列组宽度建议通过CSS控制；6. 列数匹配：colgroup包含的总列数（所有col的span之和或自身span值）需与表格实际列数一致，否则可能导致布局异常；7. 样式应用：colgroup的样式会作用于整个列组的单元格，但优先级低于col和单元格自身的样式；8. 可选性：非表格必需元素，简单表格可省略，复杂分组表格建议使用以提升语义化程度
datalist	一、通用属性：id、class、style、title、lang、hidden、dir；二、独有属性：无（输入建议容器，核心通过id与input关联）	1. 基础输入建议：<input type="text" list="city-list" name="city" placeholder="输入城市名称"><datalist id="city-list"><option value="北京"><option value="上海"><option value="广州"><option value="深圳"><option value="杭州"></datalist>2. 关联数字输入：<input type="number" list="score-list" name="score" placeholder="输入分数" min="0" max="100"><datalist id="score-list"><option value="60"><option value="80"><option value="90"><option value="100"></datalist>	HTML5新增的输入建议容器元素，属于流内容，核心语义是为input元素提供预设的输入建议列表，仅作为选项载体，不直接显示	1. 输入辅助：为用户输入提供预设建议，减少输入量，提升输入效率；2. 规范输入：引导用户输入符合预期的内容，降低输入错误率；3. 灵活兼容：支持用户自由输入（非强制选择建议），兼顾灵活性与规范性；4. 多输入类型适配：可与text、number、email、tel等多种input类型关联	1. 关联方式：必须通过input的list属性与datalist的id属性关联，两者id值需完全一致；2. 子元素规则：仅可嵌套option元素，option的value属性为建议值，标签内文本为辅助说明（部分浏览器显示）；3. 显示特性：默认隐藏，仅当用户在关联input中输入时，匹配的建议才会下拉显示；4. 兼容性：支持IE10+及所有现代浏览器，IE9及以下不支持；5. 与select区别：datalist支持自由输入+建议，select为强制选择预设选项；6. 匹配规则：浏览器默认按输入内容前缀匹配建议，无法自定义匹配规则（需结合JavaScript）；7. 空建议处理：若无匹配的option，不会显示下拉建议列表
del	一、通用属性：id、class、style、title、lang、hidden、dir、contenteditable；二、独有属性：1. cite：指定一个URL，该URL解释删除内容的原因（如修改记录页面）；2. datetime：指定删除内容的时间（格式符合ISO 8601标准），用于记录修改时间	1. 文本删除标记：<p>原价：<del id="original-price" class="deleted-text" style="color:#999;" datetime="2024-05-01T10:30:00">¥999</del> 现价：¥699</p>2. 内容修改标记：<p>HTML5新增了多个语义化标签，<del cite="https://example.com/update-log" style="text-decoration:line-through red;">包括section、article等</del> 包括section、article、nav等标签。</p>3. 可编辑删除文本：<p contenteditable="true">请修改内容：<del>旧内容</del> 新内容</p>	HTML中的删除文本语义元素，属于行内元素，核心语义是标记页面中被删除或废弃的文本内容，通过删除线样式直观呈现	1. 删除内容标识：明确标记被删除的文本，让用户清晰了解内容的修改痕迹（如价格调整、内容更新）；2. 修改原因记录：通过cite属性记录删除原因的来源，通过datetime记录删除时间，便于追溯修改历史；3. 文本语义强化：区别于普通文本和其他格式化文本（如mark、strong），语义更精准；4. 可编辑场景适配：配合contenteditable属性，在可编辑文档中标记删除内容，辅助内容审核和修改	1. 默认样式：默认显示一条贯穿文本的删除线（text-decoration:line-through），可通过CSS自定义删除线的颜色、样式（如实线、虚线）；2. 布局特性：行内元素，不独占一行，宽高由文本内容决定；3. 嵌套规则：可嵌套行内元素（如span、a、code）和文本，不可嵌套块级元素；4. 兼容性：全浏览器支持，无兼容问题；5. 与ins区别：del标记删除的内容，ins标记插入的内容，两者常配合使用，展示内容的修改过程（删除旧内容，插入新内容）；6. cite属性：仅提供删除原因的URL，不会在页面中显示，需通过JavaScript或其他方式让用户访问；7. datetime属性：格式符合ISO 8601标准，用于机器识别删除时间，页面中不显示，可通过title属性显示给用户（如title="删除时间：2024-05-01 10:30"）
details	一、通用属性：id、class、style、title、lang、hidden、dir；二、独有属性：1. open：布尔属性，控制折叠面板的默认状态（open="open"表示默认展开，无该属性表示默认折叠）；2. 无其他专属属性	1. FAQ折叠面板：<div style="width:600px;margin:20px auto;"><details style="margin:10px 0;border:1px solid #eee;border-radius:4px;"><summary style="padding:10px;cursor:pointer;">如何学习语义化HTML？</summary><div style="padding:10px 10px 15px;"><p>1. 熟悉HTML5语义化标签的含义和使用场景；</p><p>2. 参考行业规范和优秀案例；</p><p>3. 实践中合理运用，避免滥用div标签。</p></div></details><details style="margin:10px 0;border:1px solid #eee;border-radius:4px;"><summary style="padding:10px;cursor:pointer;">语义化标签和div的区别是什么？</summary><div style="padding:10px 10px 15px;"><p>语义化标签具有明确的含义（如header表示头部），div无任何语义，仅用于布局。语义化标签更利于可访问性和SEO，div适合复杂布局中的非语义化容器。</p></div></details></div>2. 详情展示面板：<details open style="border:1px solid #ddd;border-radius:4px;padding:0 15px 15px;width:500px;"><summary style="padding:15px 0;cursor:pointer;font-size:16px;">产品详情</summary><p>产品名称：语义化开发手册</p><p>适用人群：前端开发工程师</p><p>内容简介：涵盖HTML5语义化标签的全面解析和实践案例。</p></details>	HTML5新增的折叠面板容器元素，块级元素，核心语义是定义一个可折叠/展开的面板容器，用于包裹需要折叠展示的内容，配合summary元素实现交互	1. 折叠内容容器：包裹需要折叠展示的内容（如FAQ详情、产品信息），控制内容的显示/隐藏；2. 状态控制：通过open属性控制面板的默认展开/折叠状态，无需JavaScript；3. 交互结构支撑：为summary提供容器，形成"标题+内容"的折叠面板结构，提升内容结构化程度；4. 页面优化：减少页面初始加载的信息量，让用户按需查看详细内容，提升页面整洁度和用户体验	1. 子元素规则：必须包含一个summary元素（标题），后续可嵌套任意块级和行内元素（内容）；2. 交互控制：点击summary可切换open属性状态，从而切换内容的显示/隐藏，原生支持交互，无需额外JS；3. 默认样式：默认有边框或缩进（不同浏览器有差异），可通过CSS自定义容器样式；4. 兼容性：支持IE11+及现代浏览器，IE10及以下不支持，需用CSS+JavaScript模拟；5. open属性：动态修改该属性可通过JS控制面板状态（如element.setAttribute("open", "open")）；6. 嵌套规则：可嵌套其他details元素，实现多级折叠面板，但不建议过度嵌套（影响用户体验）；7. 常见场景：FAQ问答、产品详情、文档说明、隐藏的辅助信息等需要按需展示的内容；8. 可访问性：辅助设备会识别details为"可折叠面板"，并提示用户当前的展开/折叠状态
dfn	一、通用属性：id、class、style、title、lang、hidden、dir；二、独有属性：无（定义术语语义元素，核心通过上下文或title属性提供定义）	1. 术语定义标注：<p>在HTML中，<dfn id="semantic-dfn" class="definition-term" style="font-weight:bold;color:#333;" title="语义化标签：具有明确含义的HTML标签，如header、footer等">语义化标签</dfn>是指具有明确含义，能够被浏览器和辅助设备准确识别的HTML标签，其核心作用是提升页面的可访问性和可维护性。</p>2. 复杂术语定义：<p><dfn style="font-style:italic;">RESTful API</dfn>是一种遵循REST架构风格的API设计规范，它强调资源的标识、统一接口、无状态交互等特性，广泛应用于Web服务开发。</p>	HTML中的定义术语语义元素，行内元素，核心语义是标记页面中被定义的术语、概念，明确其在文档中的定义身份	1. 术语标识：明确标记被定义的术语，让用户快速定位文档中的核心概念；2. 定义关联：建立术语与后续定义内容的语义关联，提升文档结构的逻辑性；3. 理解辅助：帮助用户和辅助设备识别术语的定义属性，便于理解文档核心内容；4. 样式区分：可通过CSS添加特殊样式（如加粗、斜体），突出术语，提升文档可读性	1. 默认样式：部分浏览器默认显示为斜体（font-style:italic），可通过CSS自定义；2. 定义来源：术语的定义可通过两种方式提供：一是术语所在的上下文（如后续紧跟的句子），二是title属性（简洁定义）；3. 兼容性：全浏览器支持，无兼容问题；4. 嵌套规则：可嵌套行内元素和文本，不可嵌套块级元素；5. 使用规范：每个dfn应对应唯一的清晰定义，避免同一术语多次无意义标记；6. 与strong区别：strong用于强调重要性，dfn用于标记被定义的术语，语义功能不同；7. 可访问性：屏幕阅读器会识别dfn元素为"被定义的术语"，并引导用户关注后续定义内容
div	一、通用属性：1. id：元素唯一标识，用于CSS定位和JavaScript获取元素；2. class：元素类名，可批量为多个元素应用相同样式或脚本；3. style：行内样式，直接定义元素外观（优先级高于外部CSS）；4. title：鼠标悬浮时显示的提示文本；5. lang：指定元素内容的语言（如zh-CN表示中文，en表示英文）；6. hidden：布尔属性，设置后元素隐藏（不占据页面空间）；7. tabindex：控制元素通过Tab键导航的顺序（负数不参与导航，0按自然顺序，正数按数值排序）；8. accesskey：设置激活元素的快捷键；9. contenteditable：布尔属性，控制元素内容是否可编辑；10. dir：设置文本方向（ltr从左到右，rtl从右到左）；二、独有属性：无（纯通用块级容器，无专属语义属性）	1. 布局划分：<div id="header" class="page-header" style="height:80px;background:#333;color:#fff;" title="页面头部">网站标题</div>2. 脚本挂载：<div id="content" class="main-content" contenteditable="true">可编辑的主体内容</div>3. 样式分组：<div class="card" style="border:1px solid #ddd;padding:20px;margin:10px;">卡片内容区域</div>	HTML中的块级通用容器元素，属于流内容范畴，无任何固有语义，仅作为内容分组和结构划分的载体	1. 页面布局核心：划分网页的头部、主体、底部、侧边栏等核心区域，构建网页整体结构；2. 内容分组管理：将逻辑相关的元素组合在一起，便于样式统一控制和代码维护；3. 脚本与交互载体：作为JavaScript操作DOM的目标元素，承载动态内容渲染、事件绑定等交互功能；4. 样式隔离：通过class或id区分不同区域，实现样式的精准定位和隔离	1. 布局特性：默认独占一行，宽度为父容器100%，可自由设置width、height、margin、padding等盒模型属性；2. 嵌套规则：可嵌套任何块级元素（如p、h1-h6、table）和行内元素（如span、a、img），也可嵌套其他div；3. 兼容性：支持所有主流浏览器，无兼容性问题；4. 使用规范：避免过度嵌套（影响页面渲染性能），仅在需要分组或布局时使用，不用于无意义的包裹；5. 样式优先级：行内style属性优先级最高，会覆盖外部CSS和内部CSS
fieldset	一、通用属性：id、class、style、title、lang、hidden、dir、disabled；二、独有属性：1. disabled：布尔属性，禁用整个字段集内的所有表单元素（均不可交互，值不提交）；2. form：关联的表单id（使字段集内元素参与指定表单提交）；3. name：字段集名称，用于标识表单中的分组	1. 基础表单分组：<form id="user-form"><fieldset class="form-group" style="margin:15px 0;padding:15px;border:1px solid #ddd;border-radius:4px;"><legend style="font-weight:bold;padding:0 10px;">基本信息</legend><label for="name">姓名：</label><input type="text" id="name" name="name" required><br/><label for="age">年龄：</label><input type="number" id="age" name="age"></fieldset><fieldset class="form-group"><legend>联系方式</legend><label for="phone">电话：</label><input type="tel" id="phone" name="phone"></fieldset></form>2. 禁用字段集：<fieldset disabled style="opacity:0.6;"><legend>历史信息（不可编辑）</legend><label for="reg-time">注册时间：</label><input type="text" id="reg-time" value="2024-01-01" readonly></fieldset>	HTML中的表单字段集元素，属于流内容，核心语义是将表单中的相关表单元素分组，形成逻辑统一的表单模块，通常配合legend元素显示分组标题	1. 表单结构优化：将表单元素按功能分组（如基本信息、联系方式、收货地址），使表单结构更清晰，提升用户填写体验；2. 批量控制：通过disabled属性批量禁用整个分组的表单元素，简化交互控制；3. 语义关联：明确表单元素的分组关系，利于开发者维护和屏幕阅读器识别；4. 样式统一：作为分组容器，便于为同一组表单元素应用统一的样式	1. 核心子元素：通常包含legend（分组标题）和各类表单元素（input、textarea、select等）；legend必须是fieldset的第一个子元素；2. 禁用特性：fieldset设置disabled后，内部所有表单元素均被禁用，包括button、select等，且值不参与表单提交；3. 布局特性：块级元素，默认独占一行，自带边框和内边距，可通过CSS自定义边框、圆角、边距等样式；4. 兼容性：全浏览器支持，核心属性无兼容问题；5. 嵌套规则：可嵌套其他fieldset实现分组嵌套（如大分组包含小分组），但不建议过度嵌套（影响表单可读性）；6. legend样式：legend默认显示在字段集边框的左侧中间位置，可通过CSS设置padding、margin、字体等样式；7. 表单关联：即使fieldset在form外部，通过form属性也可让内部元素参与指定表单的提交
footer	一、通用属性：id、class、style、title、lang、hidden、dir、contenteditable；二、独有属性：无（语义化块级容器，无专属属性）	1. 页面底部：<footer id="page-footer" class="page-footer" style="background:#333;color:#ccc;padding:30px 0;margin-top:50px;"><div class="container" style="width:1200px;margin:0 auto;"><div style="float:left;width:33%;"><h3 style="color:#fff;margin-top:0;">关于我们</h3><p style="line-height:1.6;">专注于前端开发技术分享...</p></div><div style="text-align:center;clear:both;padding-top:20px;border-top:1px solid #444;">版权所有 © 2024 我的网站 备案号：粤ICP备123456号</div></div></footer>2. 文章底部：<article><div class="article-content">...</div><footer class="article-footer" style="border-top:1px solid #eee;padding-top:10px;margin-top:20px;color:#666;"><p>本文转载自前端技术网 编辑：小红</p></footer></article>	HTML5新增的语义化块级元素，属于流内容，核心语义是定义页面或区块的底部区域，通常包含版权信息、联系方式、相关链接等辅助内容	1. 语义化结构划分：明确页面或区块的底部区域，替代传统的div+class="footer"，提升页面结构的语义清晰度；2. 辅助内容聚合：聚合底部相关辅助内容（版权、备案信息、联系方式、友情链接、返回顶部按钮等）；3. 可访问性提升：帮助辅助设备识别页面底部结构，优化无障碍体验；4. 开发维护优化：语义化标签让代码结构更清晰，便于后续开发和维护	1. 使用场景：可用于页面整体底部（全局版权区），也可用于article、section等区块的内部底部（区块辅助信息区）；2. 嵌套规则：可嵌套div、p、a、ul、img等元素，适合聚合各类辅助内容；3. 布局特性：块级元素，默认独占一行，无默认样式，需通过CSS定义外观；4. 兼容性：支持IE9+及现代浏览器，IE8及以下不支持，需降级为div并设置display:block;；5. 数量限制：一个页面可包含多个footer，无数量限制；6. 语义区分：与header对应，分别表示"底部"和"头部"，语义边界清晰；7. 内容规范：通常放置非核心的辅助内容，核心内容应放在main、article等标签内
form	一、通用属性：id、class、style、title、lang、hidden、dir；二、独有属性：1. action：指定表单数据提交的目标URL（服务器处理地址）；2. method：设置表单提交方式，可选值：get（默认，数据拼接在URL后，适用于简单查询）、post（数据放在请求体中，适用于敏感/大量数据）；3. enctype：设置表单数据的编码方式，可选值：application/x-www-form-urlencoded（默认，普通文本编码）、multipart/form-data（文件上传必选）、text/plain（纯文本编码，少用）；4. target：设置提交后响应结果的打开方式，同a标签（_self/_blank/_parent/_top/框架名）；5. novalidate：布尔属性，提交时跳过前端验证（强制提交）；6. autocomplete：控制表单内元素的自动完成（on/off）；7. accept-charset：指定表单提交数据的字符编码（如UTF-8）	1. 基础表单（POST提交）：<form id="login-form" class="login-form" action="/user/login" method="post" enctype="application/x-www-form-urlencoded"><label for="username">用户名：</label><input type="text" id="username" name="username" required><br/><label for="pwd">密码：</label><input type="password" id="pwd" name="pwd" required><br/><button type="submit">登录</button></form>2. 文件上传表单：<form action="/upload/file" method="post" enctype="multipart/form-data"><label for="file">上传文件：</label><input type="file" id="file" name="file" accept="image/*"><button type="submit">上传</button></form>3. 跳过验证表单：<form action="/submit" method="post" novalidate><input type="email" name="email" placeholder="无需验证的邮箱"><button type="submit">提交</button></form>	HTML中的表单容器元素，属于流内容，核心语义是包裹各类表单控件（input、textarea、select等），构建完整的表单交互单元，实现用户数据的收集与提交	1. 数据收集与提交：作为表单控件的容器，统一收集控件数据，按action指定的URL和method指定的方式提交给服务器；2. 提交控制：提供表单级别的提交、重置、验证控制，统一管理表单交互逻辑；3. 编码设置：通过enctype指定数据编码方式，适配普通文本和文件上传等不同提交场景；4. 交互优化：通过target设置响应打开方式，通过autocomplete优化用户输入体验，通过novalidate灵活控制验证逻辑	1. 容器特性：块级元素，默认独占一行，可通过CSS设置宽度、边距等实现表单布局；2. 提交触发：除了submit按钮，按Enter键（部分场景）也会触发表单提交；3. GET与POST区别：① GET：数据可见（URL后），长度有限制，适用于查询；② POST：数据不可见，长度无限制，适用于登录、注册、文件上传等敏感/大量数据场景；4. 文件上传必备：上传文件时，enctype必须设为multipart/form-data，method设为post；5. 前端验证：表单内元素的required、pattern等验证规则，默认在提交时触发，novalidate可跳过；6. 兼容性：全浏览器支持，核心属性无兼容问题；7. 无表单提交：现代开发中，也可通过JavaScript获取表单数据，用AJAX异步提交（无需触发form默认提交）
h1-h6	一、通用属性：id、class、style、title、lang、hidden、tabindex、dir、contenteditable、accesskey；二、独有属性：无（标题层级元素，语义差异通过标签本身区分，无专属属性）	1. 层级标题示例：<h1 class="page-title" style="font-size:28px;color:#222;margin:20px 0;">网站首页</h1><h2 class="section-title" style="font-size:22px;color:#333;margin:15px 0;">产品中心</h2><h3 class="sub-section-title" style="font-size:18px;color:#444;margin:10px 0;">智能手机系列</h3><h4 style="font-size:16px;color:#555;">旗舰机型</h4>2. 可编辑标题：<h2 id="edit-title" contenteditable="true" style="border-bottom:1px solid #ddd;padding-bottom:5px;">可编辑的栏目标题</h2>	HTML中的标题层级元素，包含h1（最高级）到h6（最低级）六个级别，属于流内容，核心语义是定义网页中不同层级的标题，构建内容的标题体系	1. 内容层级构建：通过不同级别的标题，清晰划分网页内容的层级结构（如页面主标题、栏目标题、子栏目标题、段落小标题等），让内容逻辑更清晰；2. 核心信息突出：突出页面的核心内容和关键信息，引导用户快速把握网页的主题和核心模块；3. 搜索引擎优化（SEO）：搜索引擎会优先识别h1-h6标题中的内容，将其作为网页核心主题的重要依据，合理的标题层级有助于提升SEO排名；4. 可访问性提升：屏幕阅读器会根据标题层级导航网页内容，帮助无障碍用户快速理解内容结构	1. 层级规则：h1为最高级（页面主标题），h6为最低级，层级应连续使用，不可跨级（如h1后直接接h3，跳过h2，会破坏内容结构）；2. 数量规范：一个页面建议仅设置一个h1标签（对应页面唯一的主主题），避免多个h1导致搜索引擎混淆核心主题；3. 布局特性：默认是块级元素，独占一行，字号从h1到h6依次减小，且有默认的上下margin间距（h1间距最大，h6最小）；4. 默认样式：默认加粗显示，可通过CSS重置或修改字号、颜色、加粗程度等样式；5. 嵌套规则：内可嵌套行内元素（span、a、img等），不可嵌套块级元素；6. 兼容性：全浏览器支持，无兼容问题；7. 使用规范：仅用于标题，不可用h1-h6标签单纯实现文本加粗或字号放大（应使用CSS）；8. 语义优先级：标题的语义优先级高于普通文本，即使通过CSS修改了外观，其语义层级仍由标签本身决定
header	一、通用属性：id、class、style、title、lang、hidden、dir、contenteditable；二、独有属性：无（语义化块级容器，无专属属性）	1. 页面头部：<header id="page-header" class="page-header" style="background:#333;color:#fff;padding:15px 0;"><div class="container" style="width:1200px;margin:0 auto;"><h1 class="site-title" style="float:left;margin:0;"><a href="index.html" style="color:#fff;text-decoration:none;">我的网站</a></h1><nav style="float:right;"><ul style="list-style:none;margin:0;padding:0;"><li style="float:left;margin-left:20px;"><a href="index.html" style="color:#fff;">首页</a></li></ul></nav></div></header>2. 文章头部：<article style="width:800px;margin:20px auto;"><header class="article-header" style="border-bottom:1px solid #ddd;padding-bottom:10px;margin-bottom:20px;"><h2 class="article-title" style="margin:0;">HTML语义化标签详解</h2><p style="color:#666;margin:10px 0 0 0;">发布时间：2024-05-01 作者：小明</p></header><div class="article-content">...</div></article>	HTML5新增的语义化块级元素，属于流内容，核心语义是定义页面或区块的头部区域，通常包含标题、导航、logo等引导性内容	1. 语义化结构划分：明确页面或区块的头部区域，替代传统的div+class="header"，让页面结构更具语义性，利于开发者理解和维护；2. 内容聚合：聚合头部相关内容（logo、标题、导航、搜索框等），形成逻辑统一的头部单元；3. 提升可访问性：帮助屏幕阅读器等辅助设备快速识别页面结构，提升无障碍体验；4. SEO优化：搜索引擎可通过语义化标签更好地理解页面内容结构，间接提升SEO效果	1. 使用场景：可用于页面整体头部（页面导航区），也可用于article、section等区块的内部头部（区块标题区）；2. 嵌套规则：可嵌套div、h1-h6、nav、a、img等元素，无严格嵌套限制；3. 布局特性：块级元素，默认独占一行，无默认样式，需通过CSS定义外观；4. 与div区别：核心差异是语义，header明确表示"头部"，div无语义；功能上均可实现布局，但header更符合语义化开发规范；5. 兼容性：支持IE9+及所有现代浏览器，IE8及以下不支持，需通过CSS设置display:block;并添加降级样式；6. 数量限制：一个页面可包含多个header（如页面头部+多个文章头部），无数量限制；7. 语义边界：header仅表示头部区域，不包含页脚内容，页脚需用footer标签
hr	一、通用属性：id、class、style、title、lang、hidden；二、独有属性：1. align：设置水平线对齐方式（left/center/right），已废弃，建议用CSS的margin或text-align替代；2. size：设置水平线的高度（厚度），已废弃，建议用CSS的height替代；3. width：设置水平线的宽度，已废弃，建议用CSS的width替代；4. color：设置水平线的颜色，已废弃，建议用CSS的background-color替代	1. 基础分隔线：<p>第一部分内容：HTML语义化标签</p><hr id="divider1" class="content-divider" style="border:none;height:1px;background:#ddd;margin:20px 0;"><p>第二部分内容：CSS布局技巧</p>2. 带样式分隔线：<hr style="border:none;height:3px;background:linear-gradient(to right, #4285f4, #34a853);width:80%;margin:30px auto;">3. 段落分隔：<article><p>第一段文章内容...</p><hr style="margin:15px 0;border-color:#eee;"><p>第二段文章内容...</p></article>	HTML中的水平分隔线元素，属于空元素（自闭合元素），核心语义是在页面中插入一条水平分隔线，用于划分不同的内容区块	1. 内容分区可视化：通过视觉上的水平线条，清晰分隔页面中逻辑独立的内容区块（如不同章节、不同模块），提升页面结构清晰度；2. 视觉引导：引导用户的阅读视线，明确内容的分段边界；3. 页面美化：通过自定义样式的分隔线，丰富页面视觉效果，提升页面美观度；4. 内容层次强化：强化不同内容层级之间的区分，让页面内容层次更分明	1. 空元素特性：无内容，自闭合元素，写法为<hr/>或<hr>，无需闭合标签；2. 默认样式：不同浏览器默认样式有差异，通常为灰色细线条，居中显示，上下有默认margin；3. 样式自定义：推荐通过CSS重置默认样式（设置border:none），再自定义height（厚度）、background-color（颜色）、width（宽度）、margin（边距）等，还可实现渐变、虚线等特殊效果；4. 兼容性：全浏览器支持，核心功能无兼容问题；废弃属性（align、size等）在现代浏览器中仍可能生效，但不建议使用；5. 使用场景：适用于章节分隔、模块分隔、文章段落分隔等需要视觉分区的场景；6. 与div分隔区别：hr是语义化的分隔元素，明确表示"内容分隔"，div分隔无语义，仅用于布局；7. 注意事项：避免过度使用hr（会使页面分割过细，影响阅读连贯性），仅在内容逻辑独立时使用
iframe	一、通用属性：id、class、style、title、lang、hidden、dir；二、独有属性：1. src：指定要嵌入的外部文档的URL（核心属性，可嵌入HTML页面、图片、视频等）；2. width/height：设置iframe的宽/高（单位：px或百分比）；3. frameborder：设置是否显示边框（0=无边框，1=有边框），已废弃，建议用CSS的border替代；4. scrolling：设置是否显示滚动条（auto=自动、yes=显示、no=隐藏），部分浏览器支持；5. sandbox：启用沙箱模式，限制嵌入文档的权限（如禁止脚本、禁止表单提交），提升安全性；6. allowfullscreen：布尔属性，允许嵌入文档全屏显示（如嵌入视频时）；7. seamless：布尔属性，使iframe与父页面样式无缝融合（多数浏览器不支持，已废弃）	1. 嵌入外部页面：<iframe id="external-page" src="https://example.com" width="1000" height="600" style="border:none;" title="示例页面"></iframe>2. 嵌入视频（第三方）：<iframe width="560" height="315" src="https://www.youtube.com/embed/xxx" frameborder="0" allowfullscreen title="YouTube视频"></iframe>3. 沙箱模式嵌入：<iframe src="unsafe-page.html" sandbox="allow-scripts allow-same-origin" width="800" height="400" style="border:1px solid #ddd;" title="沙箱嵌入页面"></iframe>	HTML中的内联框架元素，属于流内容，核心语义是在当前页面中嵌入另一个独立的HTML文档或外部资源，形成页面内的"子页面"	1. 资源嵌入：嵌入外部网页、第三方视频（如YouTube、B站）、地图、文档等资源，丰富页面内容；2. 页面隔离：嵌入的文档与父页面完全隔离（DOM、CSS、JavaScript互不影响），降低开发冲突；3. 模块化开发：将复杂页面拆分为多个独立页面，通过iframe嵌入组合，简化开发和维护；4. 安全控制：通过sandbox属性限制嵌入文档的权限，防止恶意代码攻击，提升页面安全性	1. 隔离特性：父页面与iframe内页面无法直接操作对方DOM（同源策略限制），跨域通信需使用postMessage API；2. 样式控制：默认有边框，建议用CSS的border:none;清除，宽高建议通过CSS设置，更灵活；3. 沙箱模式：sandbox属性值为空格分隔的权限列表，常见权限：allow-same-origin（允许同源）、allow-scripts（允许执行脚本）、allow-forms（允许提交表单）；4. 性能影响：每个iframe会额外加载一个页面，增加页面加载压力，避免过度使用；5. 兼容性：全浏览器支持，核心属性无兼容问题；废弃属性（frameborder、seamless）在现代浏览器中仍可能生效，但不建议使用；6. 可访问性：必须设置title属性，说明嵌入内容的用途，帮助屏幕阅读器识别；7. 安全风险：嵌入不可信的外部页面可能带来安全风险，建议使用sandbox限制权限，或仅嵌入可信资源
img	一、通用属性：同div（id、class、style、title、lang、hidden、tabindex、dir）；二、独有属性：1. src：指定图片资源地址（核心属性），可是绝对URL（如https://xxx.com/logo.png）或相对URL（如./images/bg.jpg）；2. alt：图片加载失败时显示的替代文本（必选属性），同时用于屏幕阅读器识别图片内容，提升可访问性；3. width：设置图片宽度（单位：px或百分比），仅设置width时高度会等比例缩放；4. height：设置图片高度（单位：px或百分比），仅设置height时宽度会等比例缩放；5. loading：控制图片加载方式，可选值：① eager（默认，立即加载）；② lazy（懒加载，当图片进入视口时再加载，提升首屏加载速度）；6. srcset：指定多分辨率图片集合（如"pic-320w.jpg 320w, pic-640w.jpg 640w"），配合sizes属性实现响应式图片；7. sizes：配合srcset，定义不同视口下图片的显示尺寸（如"(max-width:768px) 320px, 640px"）；8. crossorigin：设置跨域资源共享（CORS）策略，可选值：① anonymous（匿名跨域）；② use-credentials（带凭证跨域）；9. usemap：关联图片映射（map元素），实现图片热区点击；10. ismap：布尔属性，指定图片为服务器端图像映射（需配合form元素使用）	1. 基础图片：<img src="logo.png" alt="网站logo" width="200" height="80" class="site-logo" title="网站标志">2. 懒加载图片：<img src="banner.jpg" alt="首页横幅" loading="lazy" style="width:100%;" title="首页轮播图">3. 响应式图片：<img srcset="product-320w.jpg 320w, product-640w.jpg 640w, product-1200w.jpg 1200w" sizes="(max-width:768px) 320px, (max-width:1200px) 640px, 1200px" src="product-640w.jpg" alt="产品图片">4. 图片热区：<img src="map.jpg" alt="地区地图" usemap="#area-map"><map name="area-map"><area shape="rect" coords="10,10,100,100" href="beijing.html" alt="北京"></map>	HTML中的图像嵌入元素，属于替换元素（内容由外部资源替换），核心语义是在网页中嵌入图像资源，直观展示视觉信息	1. 视觉展示：嵌入网站logo、横幅、产品图片、用户头像等视觉内容，提升网页的直观性和美观度；2. 信息辅助：通过图片补充文字内容无法清晰表达的信息（如图表、示意图、地图）；3. 性能优化：通过loading="lazy"实现懒加载，减少首屏资源加载量，提升页面加载速度；4. 响应适配：通过srcset和sizes属性实现不同设备、不同视口下的图片自适应显示；5. 交互扩展：配合usemap实现图片热区点击，为不同区域绑定不同的跳转或交互功能	1. 布局特性：默认是行内替换元素，可设置width和height，不独占一行，与其他行内元素同行排列；2. 必选属性：alt属性为强制要求，缺失会影响网页可访问性，搜索引擎也无法正确识别图片内容；3. 样式注意：默认可能存在边框（在部分浏览器中），可通过style="border:none;"清除；4. 兼容性：src、alt、width、height等核心属性全浏览器支持，loading、srcset、sizes等属性在IE浏览器中不支持；5. 自闭合元素：无闭合标签，正确写法为<img ... />（HTML5中可省略斜杠，写为<img ...>）；6. 错误处理：当src地址错误或图片不存在时，会显示alt文本和破损图片图标，可通过CSS设置error事件自定义错误显示
input	一、通用属性：1. id：唯一标识，用于与label元素关联、CSS定位和JavaScript获取；2. class：类名，批量应用样式；3. style：行内样式；4. title：悬浮提示；5. lang：语言属性；6. hidden：隐藏元素；7. tabindex：Tab导航顺序；8. disabled：布尔属性，禁用元素（禁用后无法交互，值不参与表单提交）；9. readonly：布尔属性，元素只读（可选中但不可编辑，值参与表单提交）；10. required：布尔属性，表单提交时该字段为必填项（未填写会提示验证错误）；11. name：表单字段名称，提交表单时与value值配对传输（核心属性，无name则值无法提交）；12. value：元素的值（文本输入框为输入内容，单选/复选框为预设值，按钮为显示文本）；13. form：指定关联的表单id（即使input在form外部，也能参与该表单的提交）；14. autofocus：布尔属性，页面加载完成后自动聚焦到该元素；15. autocomplete：控制浏览器自动完成功能，可选值：on（启用）、off（禁用）；二、独有属性：1. type：输入类型（核心属性），决定元素外观和功能，常用值：text（单行文本）、password（密码，输入内容隐藏）、radio（单选框）、checkbox（复选框）、button（普通按钮）、submit（提交按钮）、reset（重置按钮）、file（文件选择）、date（日期选择）、number（数字输入）、email（邮箱输入，自带格式验证）、tel（电话输入）、search（搜索框）、range（滑块）、color（颜色选择器）；2. placeholder：输入框内的提示文本（未输入时显示，输入后消失）；3. maxlength：文本输入框的最大输入字符数；4. minlength：文本输入框的最小输入字符数；5. pattern：正则表达式，用于验证输入内容格式（如^\d{6}$验证6位数字）；6. min：数值/日期类型的最小值（如number的min="0"，date的min="2024-01-01"）；7. max：数值/日期类型的最大值；8. step：数值类型的步长（如number的step="0.1"，每次增减0.1）；9. accept：配合type="file"，指定可选择的文件类型（如".jpg,.png,.gif"或"image/*"）；10. checked：配合radio/checkbox，设置默认选中状态；11. multiple：配合type="file"或checkbox，允许多选（file可选择多个文件，checkbox可选中多个）；12. list：关联datalist元素的id，为输入框提供输入建议；13. formaction：覆盖关联表单的action属性（仅type="submit"有效）；14. formmethod：覆盖关联表单的method属性（get/post，仅type="submit"有效）；15. formtarget：覆盖关联表单的target属性（仅type="submit"有效）；16. formnovalidate：提交表单时跳过验证（仅type="submit"有效）	1. 单行文本输入：<input type="text" id="username" name="username" placeholder="请输入用户名" required maxlength="20" minlength="2" class="form-input">2. 密码输入：<input type="password" id="pwd" name="pwd" placeholder="请输入密码" minlength="6" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$" title="密码需包含大小写字母和数字，至少6位">3. 单选框：<label for="gender-male"><input type="radio" id="gender-male" name="gender" value="male" checked>男</label><label for="gender-female"><input type="radio" id="gender-female" name="gender" value="female">女</label>4. 文件选择：<input type="file" id="avatar" name="avatar" accept="image/*" multiple title="可选择多个图片文件">5. 日期选择：<input type="date" id="birthday" name="birthday" min="1900-01-01" max="2024-12-31">6. 数字输入：<input type="number" id="age" name="age" min="0" max="150" step="1" placeholder="请输入年龄">7. 提交与重置：<input type="submit" value="提交表单" class="btn-submit"><input type="reset" value="重置" class="btn-reset">8. 输入建议：<input type="text" list="city-list" name="city" placeholder="选择城市"><datalist id="city-list"><option value="北京"><option value="上海"></datalist>	HTML中的表单输入元素，属于替换元素，核心语义是为用户提供多样化的输入交互接口，收集用户输入的各类数据并提交给服务器	1. 数据收集：收集用户的文本、密码、选择（单选/多选）、文件、日期、数字等各类信息；2. 表单交互：作为表单的核心组件，配合form元素实现数据的提交和重置；3. 前端验证：通过required、pattern、min、max等属性实现基础的前端输入验证，减少无效数据提交；4. 自定义交互：配合JavaScript绑定点击、输入、改变等事件，实现实时数据校验、内容联动、动态提示等自定义功能；5. 多样化输入：通过不同的type属性，提供适配不同场景的输入方式（如日期选择器、颜色选择器、滑块等），提升用户体验	1. 布局特性：默认是行内元素，不同type属性的外观差异较大（如text是输入框，button是按钮，radio是单选圆点）；2. 自闭合元素：无闭合标签，写法为<input ... />或<input ...>；3. 关联label：通过id与label的for属性关联，点击label文本可激活对应的input元素（提升用户体验，尤其适用于radio和checkbox）；4. 表单提交：name属性是数据提交的关键，缺失name的input元素，其值不会被提交到服务器；5. radio特性：同一组radio必须设置相同的name属性，才能实现互斥选择（只能选中一个）；6. file特性：value属性只读，无法通过代码修改，且提交的是文件的路径/信息，而非文件本身（文件上传需配合后端处理）；7. 兼容性：核心type属性（text、password、submit等）全浏览器支持，部分type（date、color、range）和属性（autocomplete、placeholder）在IE浏览器中不支持；8. 样式自定义：部分type（如radio、checkbox）的默认样式较难修改，可通过隐藏原生元素+自定义伪元素的方式实现自定义样式
ins	一、通用属性：id、class、style、title、lang、hidden、dir、contenteditable；二、独有属性：1. cite：指定一个URL，解释插入内容的原因（如修改记录页面）；2. datetime：指定插入内容的时间（ISO 8601格式），记录插入时间	1. 文本插入标记：<p>HTML5新增了多个语义化标签，<del>包括section、article等</del> <ins id="inserted-text" class="added-text" style="color:#34a853;text-decoration:underline;" datetime="2024-05-01T10:35:00">包括section、article、nav等</ins>标签。</p>2. 价格调整补充：<p>活动说明：<ins cite="https://example.com/promo" style="background:#e6f4ea;">新增限时折扣，原价¥999，现价¥699，活动截止2024-06-01</ins></p>3. 可编辑插入文本：<p contenteditable="true">原内容：前端开发核心技术<ins>包括HTML、CSS、JavaScript</ins></p>	HTML中的插入文本语义元素，属于行内元素，核心语义是标记页面中新增或插入的文本内容，通过下划线样式直观呈现	1. 插入内容标识：明确标记新增的文本，让用户清晰了解内容的修改和补充痕迹；2. 修改追溯：通过cite和datetime属性记录插入原因和时间，便于追溯修改历史；3. 语义互补：与del元素配合使用，完整展示内容的修改过程（删除旧内容+插入新内容），语义更完整；4. 重点提示：可用于标记需要用户特别关注的新增内容（如活动补充说明、重要更新）	1. 默认样式：默认显示下划线（text-decoration:underline），可通过CSS自定义下划线颜色、样式，或添加背景色等；2. 布局特性：行内元素，不独占一行，宽高由文本内容决定；3. 嵌套规则：可嵌套行内元素和文本，不可嵌套块级元素；4. 兼容性：全浏览器支持，无兼容问题；5. 与del配合：两者常同时使用，清晰展示内容的修改轨迹，提升文档的可维护性；6. cite和datetime属性：与del元素类似，cite指定原因URL，datetime指定插入时间，均为机器可读属性，页面不直接显示，可通过title属性提示用户；7. 与u标签区别：ins有"插入内容"的语义，u标签仅用于添加下划线（无语义，已废弃用于格式化）；现代开发中，下划线样式优先使用CSS，语义化插入内容使用ins；8. 可访问性：辅助设备会识别ins元素为"插入的文本"，提升无障碍体验
kbd	一、通用属性：id、class、style、title、lang、hidden、dir；二、独有属性：无（键盘输入语义元素，无专属属性）	1. 单个按键提示：<p>复制文本的快捷键：<kbd id="copy-kbd" class="keyboard-key" style="background:#f1f1f1;padding:2px 6px;border-radius:3px;border:1px solid #ddd;">Ctrl</kbd> + <kbd style="background:#f1f1f1;padding:2px 6px;border-radius:3px;border:1px solid #ddd;">C</kbd></p>2. 组合按键与操作提示：<p>操作步骤：</p><p>1. 按下<kbd>Win</kbd>键打开开始菜单；</p><p>2. 输入<kbd>cmd</kbd>，按下<kbd>Enter</kbd>打开命令提示符；</p>	HTML中的键盘输入语义元素，行内元素，核心语义是标记页面中需要用户通过键盘输入的按键、组合按键或命令，通过特殊样式模拟键盘按键外观	1. 键盘操作标识：明确标记键盘输入相关内容，让用户快速识别需要按下的按键或输入的命令；2. 操作指引：为用户提供清晰的键盘操作步骤（如快捷键、命令输入），提升操作指引的可读性；3. 样式模拟：通过CSS可模拟键盘按键的外观（如灰色背景、边框、圆角），让操作提示更直观；4. 语义强化：区别于普通文本，明确其"键盘输入"的语义，利于辅助设备识别	1. 默认样式：部分浏览器默认显示为等宽字体，无其他特殊样式，需通过CSS自定义按键外观；2. 常见用法：常用于标记单个按键（如"Ctrl""Enter"）、组合按键（如"Ctrl+C"）、命令输入（如"cmd""ls"）；3. 兼容性：全浏览器支持，无兼容问题；4. 嵌套限制：可嵌套行内元素和文本，不可嵌套块级元素；5. 样式建议：建议模拟真实键盘按键样式（背景色、边框、圆角、内边距），提升视觉辨识度；6. 与code区别：code用于标记代码片段，kbd用于标记键盘输入内容，语义场景不同；7. 使用规范：仅用于键盘输入相关的内容，避免用于其他操作提示（如鼠标操作）
label	一、通用属性：id、class、style、title、lang、hidden、dir、accesskey；二、独有属性：for：指定关联的表单元素id（核心属性，点击label时激活关联元素）	1. 关联input：<label for="username" class="form-label" style="display:inline-block;width:80px;text-align:right;margin-right:10px;">用户名：</label><input type="text" id="username" name="username">2. 包裹式关联：<label class="radio-label"><input type="radio" name="gender" value="male"> 男</label>3. 关联文本域：<label for="intro" style="display:block;margin-bottom:5px;font-weight:bold;">个人简介：</label><textarea id="intro" name="intro" rows="4" cols="50"></textarea>	HTML中的表单标签元素，属于流内容，核心语义是为表单元素提供描述性文本标签，建立表单元素与说明文本的关联	1. 提升可用性：点击label文本可激活关联的表单元素（如输入框获取焦点、单选框/复选框选中），扩大交互区域，提升用户体验；2. 语义关联：明确说明文本与表单元素的对应关系，让表单结构更清晰，利于屏幕阅读器识别（提升可访问性）；3. 样式承载：作为表单说明文本的容器，便于统一控制表单标签的样式（如对齐方式、字体、颜色）；4. 表单布局：配合CSS实现表单的整齐布局（如固定标签宽度、右对齐）	1. 关联方式：两种关联形式，① for属性+表单元素id（推荐，关联清晰）；② 直接包裹表单元素（无需for和id，简洁）；2. 交互特性：点击label的任何区域，均等同于点击关联的表单元素；3. 布局特性：默认是行内元素，可通过display:block/inline-block转换为块级/行内块级，便于布局；4. 兼容性：全浏览器支持，无兼容问题；5. 使用规范：每个表单元素建议对应一个label，尤其适用于radio、checkbox（提升点击体验）；6. 样式注意：label的样式不会继承给关联的表单元素，需单独设置表单元素样式；7. 多个关联：一个label只能关联一个表单元素，一个表单元素可被多个label关联（不推荐，易混淆）
legend	一、通用属性：id、class、style、title、lang、hidden、dir、accesskey；二、独有属性：无（字段集标题专属元素，无额外专属属性）	1. 基础分组标题：<fieldset><legend class="group-title" style="font-size:16px;color:#333;margin-bottom:10px;">账号信息</legend><label for="username">用户名：</label><input type="text" id="username" name="username"></fieldset>2. 带样式标题：<fieldset style="border:2px solid #4285f4;border-radius:6px;padding:20px;"><legend style="background:#4285f4;color:#fff;padding:5px 20px;border-radius:3px;">安全验证</legend><label for="code">验证码：</label><input type="text" id="code" name="code"></fieldset>	HTML中的字段集标题元素，属于流内容，仅作为fieldset元素的子元素存在，核心语义是为fieldset分组提供直观的标题说明	1. 分组标识：明确fieldset分组的主题（如"账号信息""安全验证"），让用户快速理解分组内表单元素的用途；2. 表单导航：作为表单分组的视觉引导，帮助用户快速定位到需要填写的表单区域；3. 样式载体：承载分组标题的样式，通过个性化样式突出分组主题，提升表单美观度；4. 语义关联：建立标题与分组内表单元素的语义关联，利于辅助设备识别表单结构	1. 从属关系：无法单独使用，必须是fieldset的第一个子元素，否则浏览器会自动调整其位置为fieldset内部最前方；2. 布局特性：默认是行内元素，但其显示位置特殊（悬浮在fieldset边框上），可通过CSS设置display:block转换为块级元素，实现独占一行；3. 样式注意：设置padding、margin等样式可调整标题与边框的间距，背景色、颜色等样式可提升视觉区分度；4. 兼容性：全浏览器支持，无兼容问题；5. 内容限制：建议标题文本简洁明了，仅包含分组主题，不添加复杂内容；6. 交互特性：点击legend不会触发任何默认交互，可通过JavaScript绑定点击事件实现自定义功能（如展开/折叠分组）
main	一、通用属性：id、class、style、title、lang、hidden、dir、contenteditable；二、独有属性：无（语义化核心内容容器，无额外专属属性）	1. 页面核心内容：<body><header id="page-header">网站头部导航</header><main id="page-main" class="main-content" style="width:1200px;margin:20px auto;padding:20px;"><article><h2>HTML5语义化标签详解</h2><p>语义化标签是HTML5的核心特性之一...</p></article><section><h3>语义化标签的优势</h3><p>1. 提升代码可读性...</p></section></main><footer id="page-footer">网站版权信息</footer></body>2. 带侧边栏的核心内容：<main style="display:flex;width:1200px;margin:0 auto;"><div style="flex:3;padding:20px;">核心文章内容...</div><aside style="flex:1;padding:20px;background:#f5f5f5;">相关推荐...</aside></main>	HTML5新增的语义化块级元素，属于流内容，核心语义是定义页面中唯一的核心内容区域，包含与页面主题直接相关的内容	1. 核心内容标识：明确标记页面的核心内容区域，区别于头部（header）、底部（footer）、侧边栏（aside）等辅助区域，提升页面结构的语义清晰度；2. 内容聚焦：聚合与页面主题直接相关的核心内容（如文章主体、产品列表、表单主体等）；3. 可访问性优化：帮助辅助设备快速定位页面核心内容，提升无障碍用户的阅读效率；4. SEO优化：搜索引擎可通过main标签快速识别页面核心内容，提升核心内容的权重	1. 唯一性要求：一个页面只能有一个main元素，用于标识唯一的核心内容区域，避免多个main导致语义混乱；2. 排除内容：main内不应包含页面全局的辅助内容（如导航、版权信息、广告、侧边栏），这些内容应放在header、footer、aside等标签内；3. 布局特性：块级元素，默认独占一行，无默认样式，需通过CSS定义宽度、边距等布局属性；4. 嵌套规则：可嵌套article、section、p、h1-h6、div等元素，构建核心内容的内部结构；5. 兼容性：支持IE9+及现代浏览器，IE8及以下不支持，需降级为div（可添加class="main"标识）；6. 语义优先级：main的语义优先级高于普通div、section等元素，是页面核心内容的最高级语义标签；7. 使用规范：必须放在body内部，不可嵌套在header、footer、aside、nav等辅助元素内部；8. 维护优势：明确的核心内容区域标识，便于后续开发者快速定位和维护核心业务代码
mark	一、通用属性：id、class、style、title、lang、hidden、dir、contenteditable；二、独有属性：无（文本标记专属元素，无额外专属属性）	1. 重点文本标记：<p>HTML5新增了多个<mark class="key-text" style="background:#fff3cd;color:#856404;padding:0 2px;">语义化标签</mark>，如header、footer、nav等，用于提升页面结构的可读性。</p>2. 搜索结果标记：<p>搜索关键词"前端开发"的结果：</p><p>前端开发工程师需要掌握<mark>HTML</mark>、<mark>CSS</mark>、<mark>JavaScript</mark>等核心技术。</p>3. 可编辑标记文本：<p contenteditable="true">请修改<mark style="background:#ffd700;">重点内容</mark>...</p>	HTML5新增的文本标记元素，属于行内元素，核心语义是标记页面中的重点文本、高亮文本或需要特别关注的文本内容	1. 重点内容突出：通过视觉高亮效果，快速吸引用户注意力，突出页面中的核心信息、关键词、重要提示等；2. 搜索结果匹配：在搜索结果页面中，标记与搜索关键词匹配的文本，提升用户查找效率；3. 文本语义强化：为重点文本添加明确的语义标识，区别于普通文本，利于辅助设备识别和搜索引擎理解；4. 编辑辅助：在可编辑内容中，标记需要修改、审核的文本片段，辅助内容编辑流程	1. 布局特性：行内元素，不独占一行，宽高由文本内容决定，默认自带浅黄色背景色（不同浏览器略有差异）；2. 样式自定义：可通过CSS修改background-color（背景色）、color（文本色）、padding（内边距）、border-radius（圆角）等样式，实现个性化高亮效果；3. 嵌套规则：仅可嵌套行内元素（如span、a、code）和文本，不可嵌套块级元素；4. 兼容性：支持IE9+及现代浏览器，IE8及以下不支持，需通过span标签模拟实现；5. 使用规范：仅用于标记真正需要突出的重点文本，避免过度使用（会降低重点效果）；6. 与span区别：mark有"重点标记"的语义，span无语义；默认样式上mark有背景色，span无默认样式；7. 可访问性：辅助设备会识别mark元素为"突出显示的文本"，提升无障碍阅读体验
menu	一、通用属性：id、class、style、title、lang、hidden、dir；二、独有属性：1. type：指定菜单类型，可选值：context（上下文菜单，已废弃）、toolbar（工具栏菜单，已废弃）、list（列表菜单，默认）；2. label：为菜单指定标签文本，用于标识菜单用途（仅在特定场景生效）	1. 基础列表菜单：<menu id="nav-menu" class="menu-list" style="list-style:none;padding:0;margin:20px 0;"><li style="padding:8px 0;border-bottom:1px solid #eee;"><a href="/home" style="text-decoration:none;color:#333;">首页</a></li><li style="padding:8px 0;border-bottom:1px solid #eee;"><a href="/about" style="text-decoration:none;color:#333;">关于我们</a></li><li style="padding:8px 0;"><a href="/contact" style="text-decoration:none;color:#333;">联系我们</a></li></menu>2. 简单操作菜单：<menu style="display:flex;gap:10px;padding:0;margin:0;list-style:none;"><li><button type="button" style="padding:5px 10px;">复制</button></li><li><button type="button" style="padding:5px 10px;">粘贴</button></li><li><button type="button" style="padding:5px 10px;">删除</button></li></menu>	HTML中的菜单语义元素，块级元素，核心语义是定义一组操作选项或导航链接的菜单列表，与ul功能类似，更侧重"菜单"的语义	1. 菜单语义标识：明确标记菜单列表，区别于普通无序列表，提升文档语义清晰度；2. 操作选项聚合：聚合一组相关的操作选项（如复制、粘贴、删除）或导航链接，形成逻辑统一的菜单；3. 布局适配：可通过CSS实现水平或垂直菜单布局，适配导航栏、操作工具栏等场景；4. 辅助设备识别：帮助辅助设备识别菜单结构，提升操作的可访问性	1. 与ul区别：语义上menu侧重"菜单"（操作/导航选项），ul侧重"普通无序列表"；功能上基本一致，浏览器渲染效果无差异；2. 废弃属性：type和label属性在HTML5中已废弃，菜单类型和标识建议通过CSS和语义化结构实现；3. 兼容性：全浏览器支持，无兼容问题，但部分浏览器对废弃属性的支持存在差异；4. 子元素规则：仅可嵌套li元素，li内可嵌套a、button、span等元素；5. 常见场景：页面导航菜单、操作工具栏、上下文菜单（需配合JavaScript）等；6. 样式自定义：默认有列表项标记（disc），需通过list-style:none清除，再自定义菜单样式（如间距、边框）；7. 现代应用：由于与ul功能重叠，现代开发中使用频率较低，导航菜单更常用ul或语义化导航标签（如nav+ul）
meter	一、通用属性：id、class、style、title、lang、hidden、dir；二、独有属性：1. value：当前度量值（核心属性，必须在min和max之间）；2. min：设置度量范围的最小值（默认0）；3. max：设置度量范围的最大值（默认1）；4. low：设置"低"范围的上限值（低于此值为低水平）；5. high：设置"高"范围的上限值（高于此值为高水平）；6. optimum：设置最佳值范围（用于判断度量值的优劣，影响视觉提示）；7. form：关联的表单id（使度量值参与表单提交，较少用）	1. 分数展示：<p>考试分数：<meter id="exam-score" class="score-meter" value="85" min="0" max="100" low="60" high="90" optimum="95" style="width:200px;">85/100</meter></p>2. 磁盘使用率：<p>磁盘使用率：<meter value="0.75" min="0" max="1" low="0.3" high="0.8" optimum="0.2" style="width:300px;">75%</meter></p>3. 健康指标：<p>心率（正常60-100）：<meter value="78" min="60" max="100" low="65" high="95" optimum="80">78次/分</meter></p>	HTML5新增的度量衡元素，属于流内容，核心语义是展示一个已知范围的标量测量值（如分数、使用率、百分比），通过视觉化进度条形式呈现，支持水平高低的语义区分	1. 度量值可视化：将抽象的数值（如分数、使用率）转化为直观的进度条样式，提升用户可读性；2. 水平语义区分：通过low、high、optimum属性定义不同水平范围，浏览器会根据value值自动显示不同颜色（如低水平红色、正常绿色），直观提示数值优劣；3. 表单辅助：可关联表单，将度量值作为表单数据提交（较少用，主要用于展示）；4. 动态更新：支持通过JavaScript修改value值，实现实时度量值展示（如实时使用率监控）	1. 适用场景：仅用于展示已知范围的标量值，不适合展示不确定范围的进度（如文件上传进度，建议用progress）；2. 视觉样式：不同浏览器默认样式有差异，通常为水平进度条，颜色随value值所在范围变化（低=红、正常=绿、高=黄）；3. 兼容性：支持IE10+及现代浏览器，IE9及以下不支持，需用CSS模拟；4. 数值规则：value必须在min和max之间，若超出范围，浏览器会自动修正为min或max；low值必须小于high值，否则规则失效；5. 备选文本：meter标签内的文本在浏览器不支持该元素时显示；6. 样式自定义：可通过CSS修改高度、背景色、边框、颜色等，但不同浏览器的样式钩子有差异，自定义难度较高；7. 交互特性：默认无交互功能，仅用于展示，若需交互需配合JavaScript绑定事件
nav	一、通用属性：id、class、style、title、lang、hidden、dir、contenteditable；二、独有属性：无（语义化导航容器，无专属属性）	1. 顶部主导航：<nav id="main-nav" class="main-nav" style="background:#333;height:50px;line-height:50px;"><ul style="list-style:none;margin:0;padding:0;width:1200px;margin:0 auto;"><li style="float:left;margin-right:30px;"><a href="index.html" style="color:#fff;text-decoration:none;">首页</a></li><li style="float:left;margin-right:30px;"><a href="product.html" style="color:#fff;text-decoration:none;">产品中心</a></li></ul></nav>2. 侧边导航：<nav id="side-nav" class="side-nav" style="width:200px;background:#f5f5f5;padding:15px;"><h3 style="margin-top:0;font-size:16px;">文章分类</h3><ul style="list-style:none;padding:0;margin:0;"><li style="margin:10px 0;"><a href="/category/html" style="color:#333;">HTML</a></li><li style="margin:10px 0;"><a href="/category/css" style="color:#333;">CSS</a></li></ul></nav>3. 页内导航：<nav style="margin:20px 0;border-bottom:1px solid #ddd;padding-bottom:10px;"><a href="#section1" style="margin-right:20px;color:#4285f4;">1. 概述</a><a href="#section2" style="margin-right:20px;color:#4285f4;">2. 核心特性</a></nav>	HTML5新增的语义化块级元素，属于流内容，核心语义是定义页面的导航链接区域，专门用于承载各类导航相关的链接集合	1. 导航区域语义化：明确标识页面中的导航部分，替代传统的div+class="nav"，让页面结构更具语义性；2. 导航链接聚合：集中承载页面主导航、侧边导航、页内导航、面包屑导航等各类导航链接，便于用户快速定位和跳转；3. 可访问性优化：帮助屏幕阅读器等辅助设备快速识别导航区域，提升无障碍用户的导航体验；4. SEO与维护：语义化标签让搜索引擎更好地理解页面导航结构，同时提升代码的可读性和维护性	1. 使用场景：适用于页面主导航、侧边栏导航、页内锚点导航、面包屑导航等所有导航相关区域；2. 嵌套规则：通常嵌套ul/ol（列表导航）、a（导航链接）、div（布局容器）等元素，列表形式的导航更符合语义；3. 布局特性：块级元素，默认独占一行，无默认样式，需通过CSS定义导航外观（如横向/纵向排列、背景色、hover效果）；4. 兼容性：支持IE9+及现代浏览器，IE8及以下不支持，需降级为div；5. 数量限制：一个页面可包含多个nav（如顶部导航+侧边导航），无数量限制；6. 内容规范：仅放置导航相关的链接，不包含非导航内容（如logo、搜索框，可放在header中）；7. 与a标签区别：nav是导航区域的容器，a是单个导航链接，两者是容器与子元素的关系
ol	一、通用属性：同ul（id、class、style、title、lang、hidden、tabindex、dir、contenteditable）；二、独有属性：1. type：设置列表项的序号类型，可选值：① 1（默认，阿拉伯数字1、2、3...）；② a（小写字母a、b、c...）；③ A（大写字母A、B、C...）；④ i（小写罗马数字i、ii、iii...）；⑤ I（大写罗马数字I、II、III...）；可通过CSS的list-style-type替代；2. start：设置序号的起始值（必须是数字），如start="3"表示从3开始计数；3. reversed：布尔属性，设置序号倒序排列（如从5、4、3...开始计数）	1. 基础有序列表：<ol id="step-list" class="guide-step" type="1" start="1" style="margin-left:20px;"><li>打开浏览器，输入网站地址</li><li>点击右上角"注册"按钮</li><li>填写注册信息，点击"提交"</li><li>验证手机验证码，完成注册</li></ol>2. 倒序有序列表：<ol reversed type="1" style="margin-left:20px;"><li>决赛（第三名）</li><li>半决赛（第二名）</li><li>小组赛（第一名）</li></ol>3. 字母序号列表：<ol type="A" start="2"><li>项目规划</li><li>需求分析</li><li>开发实现</li></ol>	HTML中的有序列表元素，属于流内容，核心语义是展示有先后顺序、有优先级或步骤关系的列表项，子元素只能是li（列表项元素）	1. 步骤引导：展示有明确顺序的操作步骤（如注册流程、使用教程、安装指南等），引导用户按顺序完成操作；2. 排名展示：展示有先后排名的内容（如比赛结果、排行榜、评分榜单等）；3. 有序内容分组：将逻辑相关且有顺序要求的内容组合，提升内容的条理性和可读性；4. 自定义序号：通过type、start、reversed等属性，实现多样化的序号展示（数字、字母、罗马数字、倒序等）	1. 布局特性：与ul一致，默认是块级元素，独占一行，列表项有默认间距，左侧有默认缩进；2. 嵌套规则：直接子元素必须是li，li内可嵌套任何元素，ol可嵌套ul或ol实现多级有序列表；3. 序号控制：核心区别于ul的是有序序号，可通过type切换序号类型，start设置起始值，reversed实现倒序；4. CSS替代：type属性的功能可通过CSS的list-style-type实现（如list-style-type:upper-alpha;对应type="A"），更灵活；5. 兼容性：type、start属性全浏览器支持，reversed属性在IE浏览器中不支持；6. 使用场景：仅用于有顺序要求的列表，若列表项无先后关系，应使用ul；7. 特殊说明：即使删除或添加列表项，序号会自动重新排序，无需手动修改
option	一、通用属性：id、class、style、title、lang、hidden、disabled；二、独有属性：1. value：选项的提交值（核心属性，无value时提交标签内文本）；2. selected：布尔属性，设置选项默认选中；3. label：选项的替代显示文本（优先级高于标签内文本，部分浏览器支持）	1. 基础选项：<select name="gender"><option value="male" selected>男</option><option value="female">女</option><option value="other">其他</option></select>2. 禁用选项：<select name="education"><option value="" disabled selected>请选择学历</option><option value="high-school">高中及以下</option><option value="college" disabled>大专（暂不招聘）</option><option value="bachelor">本科</option></select>3. 标签替代选项：<select name="season"><option value="spring" label="春季">3-5月</option><option value="summer" label="夏季">6-8月</option></select>	HTML中的下拉选项元素，属于流内容，仅作为select或datalist元素的子元素存在，核心语义是定义单个可选项目	1. 提供可选值：为select（下拉选择）或datalist（输入建议）提供具体的可选项目，明确用户可选择的内容范围；2. 承载提交数据：通过value属性定义选项对应的提交数据，确保表单提交数据的规范性；3. 状态控制：支持默认选中（selected）和禁用（disabled）状态，适配不同的选择需求；4. 显示优化：通过label属性提供简洁的显示文本，优化页面展示效果	1. 从属关系：无法单独使用，必须嵌套在select或datalist内部；2. value属性：核心属性，建议始终设置，避免因缺失导致提交文本内容（可能包含特殊字符）；3. 选中规则：select中默认仅一个selected有效（单选），multiple时可多个selected；4. 禁用特性：disabled的选项不可选中，视觉上会变灰；5. 兼容性：全浏览器支持，label属性在IE低版本中可能不生效；6. 文本截断：选项文本过长时，浏览器会自动截断并显示省略号，可通过设置select宽度或优化文本长度避免；7. 与datalist配合：嵌套在datalist中时，作为input的输入建议项，不影响input的自由输入功能
p	一、通用属性：id、class、style、title、lang、hidden、tabindex、dir、contenteditable、accesskey；二、独有属性：无（纯文本段落容器，无专属语义属性）	1. 基础段落：<p class="article-content" style="font-size:16px;line-height:1.8;margin:10px 0;color:#333;" title="文章正文段落">HTML是超文本标记语言（HyperText Markup Language）的缩写，是构建网页的基础语言。它通过各类标签定义网页的结构和内容，与CSS和JavaScript共同构成了现代网页的三大核心技术。</p>2. 可编辑段落：<p id="edit-paragraph" contenteditable="true" style="border:1px solid #ddd;padding:10px;">点击此处可编辑段落内容...</p>3. 带样式段落：<p style="text-align:center;font-weight:bold;font-size:18px;margin:20px 0;">段落标题（居中加粗）</p>	HTML中的段落元素，属于流内容，核心语义是定义网页中的独立文本段落，用于划分连续的文本内容	1. 文本排版核心：将网页中的文本内容划分为独立的段落，使文本布局清晰、层次分明，提升阅读体验；2. 内容结构化：区分不同的文本模块（如文章的不同段落、说明文字的不同部分），便于用户快速定位和理解内容；3. 可编辑文本载体：通过contenteditable属性，实现可编辑的文本区域（如简单的富文本编辑场景）；4. 样式承载：为文本段落应用统一的样式（如字体、字号、行高、颜色），保证文本显示的一致性	1. 布局特性：默认是块级元素，独占一行，上下有默认的margin间距（不同浏览器略有差异），可通过CSS修改；2. 嵌套规则：内可嵌套行内元素（span、a、img、code等）和文本，不可嵌套块级元素（如div、p、h1-h6、table等），否则会被浏览器自动拆分；3. 文本特性：段落内的连续空格和换行会被浏览器合并为一个空格，如需保留换行，可使用<br/>标签；4. 兼容性：全浏览器支持，无任何兼容问题；5. 使用规范：仅用于文本段落的划分，避免用div替代p（p有明确的文本段落语义，利于搜索引擎优化和可访问性）；6. 行高设置：建议设置合适的line-height（如1.5-2.0），提升文本的可读性；7. 特殊说明：多个连续的p标签会自动分隔为多个段落，无需额外添加换行标签
pre	一、通用属性：id、class、style、title、lang、hidden、dir、contenteditable；二、独有属性：无（预格式化文本容器，无额外专属属性）	1. 代码块展示：<pre id="js-code" class="code-pre" style="background:#2d2d2d;color:#f8f8f2;padding:20px;border-radius:6px;overflow-x:auto;font-family:monospace;font-size:14px;"><code lang="javascript">// 计算两数之和<br/>function add(a, b) {<br/> return a + b;<br/>}<br/>// 调用函数<br/>let result = add(10, 20);<br/>console.log(result); // 输出30</code></pre>2. 保留格式文本：<pre style="line-height:1.5;margin:15px 0;">用户协议条款：<br/>1. 本服务仅供个人非商业使用；<br/>2. 禁止传播违法、违规内容；<br/>3. 用户需对自身操作承担责任。</pre>3. 可编辑代码块：<pre contenteditable="true" style="background:#f9f9f9;border:1px solid #ddd;padding:15px;"><code lang="html">&lt;div class="container"&gt;&lt;/div&gt;</code></pre>	HTML中的预格式化文本元素，属于块级元素，核心语义是保留文本的原始格式（包括空格、制表符、换行符），不进行自动合并	1. 代码块承载：配合code元素展示完整的代码块，保留代码的原始缩进和换行，实现代码的结构化、规范化展示；2. 固定格式文本展示：展示需要保留原始格式的文本内容（如协议条款、诗歌、日志、ASCII艺术等）；3. 可编辑文本区域：配合contenteditable属性，实现可编辑的固定格式文本区域（如简单代码编辑器）；4. 格式一致性保障：避免浏览器自动合并空格和换行导致的格式混乱，保证文本展示与原始输入一致	1. 格式特性：核心功能是保留原始格式，输入的空格、制表符（Tab）、换行符都会原样显示；2. 字体特性：默认使用等宽字体（monospace），与code元素一致，适合代码展示；3. 布局特性：块级元素，默认独占一行，宽度由父容器决定，内容过长时会横向溢出，可通过CSS的overflow-x:auto添加水平滚动条；4. 嵌套规则：通常嵌套code元素展示代码（语义更清晰），也可直接嵌套文本；不可嵌套块级元素；5. 兼容性：全浏览器支持，无兼容问题；6. 与p标签区别：p标签会合并空格和换行，pre标签保留原始格式；p标签用于普通段落，pre标签用于需要固定格式的文本；7. 样式自定义：可通过CSS修改背景色、颜色、内边距、边框、字体大小等样式，优化展示效果；8. 特殊字符处理：内部文本中的HTML特殊字符需转换为实体字符，避免被浏览器解析
progress	一、通用属性：id、class、style、title、lang、hidden、dir；二、独有属性：1. value：当前进度值（核心属性，用于确定进度百分比，需在0和max之间）；2. max：设置进度的最大值（默认1，用于计算进度百分比，进度=value/max）；3. 无其他专属属性	1. 文件上传进度：<p>文件上传中：<progress id="upload-progress" class="upload-bar" value="0.6" max="1" style="width:300px;height:15px;">60%</progress></p>2. 任务完成进度：<p>任务完成进度：<progress value="75" max="100" style="width:250px;">75%</progress></p>3. 不确定进度（加载中）：<p>加载中...<progress style="width:200px;"></progress></p>	HTML5新增的进度指示元素，属于流内容，核心语义是展示任务的完成进度（确定进度）或加载状态（不确定进度），通过进度条形式直观呈现	1. 进度可视化：将任务进度（如文件上传、数据加载、任务完成度）转化为直观的进度条，让用户清晰了解任务状态；2. 确定/不确定状态切换：设置value时展示确定进度（有具体百分比），不设置value时展示不确定进度（动态加载动画）；3. 动态更新支持：通过JavaScript实时修改value值，实现进度的动态同步（如上传进度实时更新）；4. 用户体验优化：明确的进度提示可减少用户等待焦虑，提升交互体验	1. 与meter区别：progress用于展示任务进度（动态变化，有开始和结束），meter用于展示已知范围的标量值（静态或缓慢变化）；2. 不确定进度：不设置value时，进度条显示动态加载动画（如循环滚动），适用于加载状态未知的场景；3. 视觉样式：默认为水平进度条，不同浏览器样式有差异，通常有进度填充色和背景色；4. 兼容性：支持IE10+及现代浏览器，IE9及以下不支持，需用CSS+JavaScript模拟；5. 数值规则：value必须大于等于0且小于等于max，若超出范围，浏览器会自动修正；max必须大于0，否则进度无法计算；6. 备选文本：标签内的文本在不支持的浏览器中显示，也可作为进度的文字提示；7. 样式自定义：可通过CSS修改宽高、背景色、进度色、边框等，但浏览器兼容性有差异，建议测试后使用
q	一、通用属性：id、class、style、title、lang、hidden、dir；二、独有属性：1. cite：指定引用内容的来源URL，用于追溯引用源头，辅助设备和搜索引擎识别	1. 行内短句引用：<p>前端开发领域常说<q id="dev-quote" class="inline-quote" style="color:#4285f4;" cite="https://example.com/dev-saying">语义化是前端开发的基石</q>，这一观点充分体现了语义化HTML的重要性。</p>2. 带来源提示引用：<p>研究指出<q style="font-style:italic;" cite="https://example.com/study-report" title="来源：《前端语义化实践研究》">合理的语义化标签使用可使页面可访问性提升50%以上</q>，这一数据为语义化开发提供了有力支撑。</p>	HTML中的行内引用元素，行内元素，核心语义是标记页面中嵌入段落内的短引用内容，浏览器会自动为其添加引号，区别于普通文本	1. 短引用语义标识：明确标记段落内的短引用内容，区别于作者原创文本，提升文档语义清晰度；2. 自动格式处理：浏览器自动添加引号（中文双引号、英文双引号，随语言环境适配），简化格式排版；3. 来源追溯：通过cite属性记录引用来源，便于信息溯源；4. 行内融合：作为行内元素，可无缝嵌入段落中，不破坏文本的连贯性	1. 默认样式：无特殊样式，核心特性是自动添加引号，引号样式随浏览器和语言环境变化；2. 与blockquote区别：q用于行内短引用（嵌入段落），blockquote用于块级长引用（独立段落）；3. 兼容性：全浏览器支持，无兼容问题；4. cite属性：仅存储来源URL，不直接显示，可通过title属性添加来源提示，或通过JavaScript展示；5. 样式自定义：可通过CSS修改文本颜色、字体样式等，但自动添加的引号样式修改较复杂（需借助伪元素）；6. 嵌套限制：可嵌套行内元素和文本，不可嵌套块级元素；7. 使用规范：仅用于短引用（短句、短语），长引用需使用blockquote，避免混淆语义
samp	一、通用属性：id、class、style、title、lang、hidden、dir；二、独有属性：无（计算机输出语义元素，无专属属性）	1. 程序输出结果：<p>执行命令<code>echo "Hello World"</code>后，终端输出：</p><p><samp id="output-samp" class="sample-output" style="background:#f8f8f8;padding:5px 10px;border-radius:4px;color:#d73a49;display:block;margin:10px 0;">Hello World</samp></p>2. 错误提示输出：<p>当输入无效参数时，系统会提示：</p><samp style="background:#fff3cd;padding:5px;border:1px solid #ffeeba;border-radius:4px;color:#856404;">错误：参数无效，请输入正确的参数格式（-h查看帮助）</samp>	HTML中的计算机输出语义元素，行内元素，核心语义是标记页面中计算机程序、终端、系统等输出的结果、提示信息（如程序运行结果、错误提示）	1. 输出内容标识：明确标记计算机输出的内容，区别于用户输入、普通文本，提升文档语义清晰度；2. 结果展示：清晰展示程序运行结果、系统提示、错误信息等，便于用户理解程序行为；3. 样式区分：通过CSS添加特殊样式（如特定背景色、颜色），让输出内容与其他文本直观区分；4. 技术文档适配：适配技术文档、教程中的程序输出场景，提升文档的专业性和可读性	1. 默认样式：部分浏览器默认显示为等宽字体，与code、kbd类似，需通过CSS自定义样式；2. 常见场景：程序运行结果、终端命令输出、系统错误提示、日志信息等；3. 兼容性：全浏览器支持，无兼容问题；4. 与code区别：code用于标记需要执行的代码，samp用于标记代码执行后的输出结果，语义场景互补；5. 布局特性：行内元素，可通过CSS设置display:block转为块级元素，便于展示多行输出内容；6. 样式建议：不同类型的输出（正常结果、错误提示、警告）可使用差异化样式（如颜色、背景色），提升辨识度；7. 可访问性：辅助设备会识别samp元素为"计算机输出内容"，帮助用户区分不同类型的文本
section	一、通用属性：id、class、style、title、lang、hidden、dir、contenteditable；二、独有属性：无（语义化区块容器，无专属属性）	1. 页面章节划分：<section id="about-section" class="section" style="width:1200px;margin:0 auto;padding:30px 0;"><h2 style="text-align:center;margin-bottom:20px;">关于我们</h2><div class="section-content" style="display:flex;gap:30px;"><div style="flex:1;"><p>公司成立于2020年...</p></div><div style="flex:1;"><img src="company.jpg" alt="公司环境" style="width:100%;height:auto;"></div></div></section>2. 文章内章节：<article><header><h2>HTML5核心特性</h2></header><section id="feature1" style="margin:20px 0;"><h3>1. 语义化标签</h3><p>HTML5新增了header、footer、nav等语义化标签...</p></section><section id="feature2" style="margin:20px 0;"><h3>2. 本地存储</h3><p>HTML5提供了localStorage、sessionStorage等本地存储方案...</p></section></article>	HTML5新增的语义化块级元素，属于流内容，核心语义是定义页面中的内容区块或文章内的章节，用于对内容进行逻辑划分	1. 内容逻辑划分：将页面内容或文章内容按逻辑关系划分为不同区块（如"关于我们"区块、"产品展示"区块、文章的章节），提升内容结构的清晰度；2. 模块化布局：配合CSS实现页面的模块化布局，便于样式控制和代码维护；3. 语义化增强：替代传统的div+class="section"，让内容划分更具语义性，利于开发者理解和辅助设备识别；4. 内容关联聚合：将逻辑相关的内容聚合在同一section内，使内容关系更明确	1. 核心特征：内容需具有逻辑关联性，同一section内的内容应属于同一主题；2. 使用场景：页面的功能区块（如关于我们、联系我们）、文章的章节划分、表单的不同功能区域等；3. 嵌套规则：可嵌套div、h1-h6、p、article、section、img等元素，支持多层嵌套（如section内嵌套子section划分更细的章节）；4. 布局特性：块级元素，默认独占一行，无默认样式，需通过CSS定义外观；5. 兼容性：支持IE9+及现代浏览器，IE8及以下不支持，需降级为div；6. 与div区别：section是"有逻辑的内容区块"，div是"无语义的通用容器"；仅当内容有明确逻辑主题时使用section，否则用div；7. 与article区别：section侧重"内容划分"，article侧重"独立完整的文章"；section可包含article，article也可包含section；8. 标题要求：通常每个section应包含一个标题（h1-h6），明确区块主题，提升语义完整性
select	一、通用属性：id、class、style、title、lang、hidden、tabindex、disabled、readonly、required、name、form、autofocus；二、独有属性：1. size：设置下拉列表默认显示的选项个数（默认1，为下拉式；大于1为列表式）；2. multiple：布尔属性，允许多选（按住Ctrl键选择多个选项，值以数组形式提交）；3. autocomplete：控制自动完成（on/off）；4. formaction/formmethod/formtarget/formnovalidate：仅在关联表单时，覆盖表单对应属性（较少用）	1. 基础下拉选择：<select id="city" name="city" class="form-select" required><option value="" selected disabled>请选择城市</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option></select>2. 多选列表：<select id="hobby" name="hobby" size="4" multiple style="width:150px;"><option value="reading">阅读</option><option value="sports" selected>运动</option><option value="music">音乐</option><option value="travel" selected>旅行</option></select>3. 分组下拉选择：<select id="product" name="product"><optgroup label="电子产品"><option value="phone">手机</option><option value="computer">电脑</option></optgroup><optgroup label="生活用品"><option value="kitchen">厨具</option><option value="textile">家纺</option></optgroup></select>	HTML中的下拉选择元素，属于流内容，核心语义是提供预设选项的选择交互，需配合option（选项）和optgroup（选项分组）子元素使用	1. 预设选项选择：让用户从预设的选项中选择内容，避免自由输入的错误，提升数据规范性；2. 选项分组：通过optgroup对选项分类，适用于选项较多的场景，提升选择效率；3. 单选/多选切换：支持单选（默认）和多选，适配不同数据收集需求；4. 表单数据提交：作为表单组件，将选中的选项值提交给服务器	1. 核心子元素：必须配合option使用，option的value属性为提交值，标签内文本为显示值；optgroup用于分组，仅作分类展示，不可选中；2. 选中状态：option的selected属性设置默认选中，multiple时可多个selected；3. 布局特性：行内块元素，默认宽度由内容决定，可通过CSS设置固定宽度；4. 兼容性：全浏览器支持，核心属性无兼容问题；5. 样式自定义：默认外观（如下拉箭头）在不同浏览器中差异较大，自定义需通过隐藏原生样式+模拟实现；6. 多选操作：multiple开启后，Windows按Ctrl键多选，Mac按Command键多选；7. 空选项处理：通常添加value为空的disabled选项作为默认提示（如"请选择"），引导用户主动选择
source	一、通用属性：id、class、style、title、lang、hidden；二、独有属性：1. src：指定媒体文件（音频/视频）的URL（核心属性）；2. type：指定媒体文件的MIME类型（如audio/mpeg、video/mp4），帮助浏览器快速判断是否支持该格式，提升加载效率	1. 音频格式兼容：<audio controls><source id="audio-mp3" src="sound.mp3" type="audio/mpeg"><source src="sound.ogg" type="audio/ogg">浏览器不支持音频播放</audio>2. 视频格式兼容：<video controls width="600"><source src="video.mp4" type="video/mp4"><source src="video.webm" type="video/webm"><source src="video.ogv" type="video/ogg">浏览器不支持视频播放</video>	HTML5新增的媒体源元素，属于空元素，仅作为audio或video元素的子元素存在，核心语义是为媒体元素提供多种格式的媒体资源，实现跨浏览器兼容	1. 格式兼容保障：为音频/视频提供多种格式的资源，浏览器会自动选择第一个支持的格式播放，提升页面兼容性；2. 加载效率优化：通过type属性指定MIME类型，浏览器无需加载文件即可判断是否支持，减少无效加载；3. 降级处理支撑：当所有source格式均不被支持时，浏览器会显示audio/video标签内的备选文本，提升用户体验	1. 从属关系：无法单独使用，必须嵌套在audio或video内部，且需放在所有文本内容之前；2. 空元素特性：无内容，自闭合元素，写法为<source/>或<source>；3. 选择规则：浏览器按source标签的顺序依次判断是否支持，选择第一个支持的格式播放，后续source会被忽略；4. 兼容性：支持IE9+及现代浏览器，IE8及以下不支持（因不支持audio/video）；5. MIME类型规范：需正确设置type属性，常见类型：音频（audio/mpeg=MP3、audio/ogg=OGG）、视频（video/mp4=MP4、video/webm=WebM）；6. 不支持嵌套：无法嵌套其他元素，也不能被其他元素嵌套（除audio/video）；7. 配合使用：单个audio/video可包含多个source，但建议按兼容性优先级排序（如MP4在前，WebM在后）
span	一、通用属性：同div（id、class、style、title、lang、hidden、tabindex、accesskey、contenteditable、dir）；二、独有属性：无（纯通用行内容器，无专属语义属性）	1. 文本样式修改：<p>这是一段<span class="highlight" style="color:red;font-weight:bold;" title="重点强调">重点强调</span>的文本</p>2. 行内元素分组：<span id="user-info"><span class="username">张三</span><span class="level" style="color:#ff9900;">VIP3</span></span>3. 脚本操作目标：<span id="count" style="font-size:20px;">0</span><script>document.getElementById('count').innerText = 10;</script>	HTML中的行内通用容器元素，属于短语内容范畴，无固有语义，专门用于行内文本或元素的局部划分	1. 行内文本精准样式：对段落、句子中的局部文本单独设置样式（如颜色、字体、粗细），不影响其他文本；2. 行内元素分组管理：将多个相邻的行内元素组合，便于统一控制样式或进行JavaScript操作；3. 文本信息标记：标记行内的特定信息（如用户名、时间、数值），为后续交互或样式调整提供标识；4. 填充空白行内空间：在需要微调行内布局时，作为占位或间隔元素使用	1. 布局特性：默认不独占一行，与其他行内元素同行排列，宽高由自身内容决定，无法直接设置width和height（需转换为inline-block或block）；2. 盒模型特性：设置margin和padding时，仅水平方向（left/right）有效，垂直方向（top/bottom）不影响页面布局；3. 嵌套规则：仅可嵌套行内元素（如a、img、span）和文本，不可嵌套块级元素；4. 兼容性：全浏览器支持，无兼容问题；5. 使用规范：仅用于行内局部内容的划分，避免替代p、div等有明确语义或布局功能的元素
summary	一、通用属性：id、class、style、title、lang、hidden、dir；二、独有属性：无（折叠面板标题元素，核心与details配合实现折叠功能）	1. 基础折叠面板：<details id="faq-details" class="details-panel" style="width:600px;margin:15px 0;border:1px solid #ddd;border-radius:4px;overflow:hidden;"><summary style="padding:12px;cursor:pointer;background:#f5f5f5;font-weight:bold;">什么是语义化HTML？</summary><div style="padding:12px;"><p>语义化HTML是指使用具有明确含义的HTML标签来构建页面结构，如header（页面头部）、footer（页面底部）、article（文章主体）等。其核心目的是提升页面的可访问性、可维护性和SEO效果。</p></div></details>2. 带默认展开的折叠面板：<details open style="width:600px;margin:15px 0;border:1px solid #ddd;border-radius:4px;"><summary style="padding:12px;cursor:pointer;background:#f9f9f9;">语义化HTML的优势有哪些？</summary><div style="padding:12px;"><ul style="margin:0;padding-left:20px;"><li>提升代码可读性和可维护性</li><li>优化页面可访问性，适配辅助设备</li><li>有利于搜索引擎收录，提升SEO效果</li></ul></div></details>	HTML5新增的折叠面板标题元素，块级元素，仅作为details元素的子元素存在，核心语义是为折叠面板提供可点击的标题，控制面板的展开/折叠状态	1. 折叠控制触发：作为折叠面板的可点击标题，用户点击可切换面板的展开/折叠状态，无需JavaScript；2. 面板主题标识：明确折叠面板的主题（如"什么是语义化HTML"），让用户快速了解面板内容；3. 交互体验优化：自带展开/折叠的视觉提示（如箭头图标），提升用户交互体验；4. 内容结构化：配合details实现内容的折叠展示，减少页面初始信息量，提升页面整洁度	1. 从属关系：必须是details的第一个子元素，无法单独使用；2. 交互特性：默认自带点击交互，点击后切换details的展开状态，无需额外绑定JavaScript事件；3. 默认样式：部分浏览器默认显示箭头图标（指示展开/折叠状态），可通过CSS::marker伪元素自定义图标；4. 兼容性：支持IE11+及现代浏览器，IE10及以下不支持；5. 与details配合：details控制面板的展开/折叠状态（open属性控制默认展开），summary提供触发标题，两者必须配合使用；6. 样式自定义：可通过CSS修改padding、背景色、字体等样式，箭头图标需通过::marker伪元素修改；7. 可访问性：辅助设备会识别summary为"折叠面板标题"，并提示用户点击展开/折叠内容
table	一、通用属性：id、class、style、title、lang、hidden、tabindex、dir；二、独有属性：1. border：设置表格边框的宽度（单位：px），默认值为0（无边框）；2. cellspacing：设置单元格之间的间距（单位：px），默认有一定间距，可设为0消除间距；3. cellpadding：设置单元格内容与单元格边框之间的内边距（单位：px）；4. width：设置表格的宽度（单位：px或百分比）；5. height：设置表格的高度（单位：px或百分比）；6. align：设置表格在页面中的对齐方式（left左对齐、center居中、right右对齐），已废弃，建议用CSS的margin或text-align替代；7. summary：设置表格的摘要信息（不显示在页面上，仅用于屏幕阅读器识别表格内容，提升可访问性）；8. bordercolor：设置表格边框的颜色，已废弃，建议用CSS的border-color替代；9. bgcolor：设置表格的背景颜色，已废弃，建议用CSS的background-color替代	1. 基础表格：<table id="score-table" class="data-table" border="1" cellspacing="0" cellpadding="8" style="width:800px;margin:0 auto;text-align:center;" summary="2025级学生期末成绩表"><caption>2025级学生期末成绩表</caption><thead><tr><th>姓名</th><th>语文</th><th>数学</th><th>英语</th></tr></thead><tbody><tr><td>张三</td><td>95</td><td>98</td><td>92</td></tr><tr><td>李四</td><td>88</td><td>90</td><td>96</td></tr></tbody></table>2. 复杂表格（跨行跨列）：<table border="1" cellspacing="0" cellpadding="8"><tr><th rowspan="2">学科</th><th colspan="2">成绩区间</th></tr><tr><th>优秀（≥90）</th><th>良好（80-89）</th></tr><tr><td>语文</td><td>15人</td><td>20人</td></tr></table>	HTML中的表格元素，属于流内容，核心语义是展示结构化的二维数据（行和列的形式），需配合tr、th、td、caption等子元素使用	1. 数据结构化展示：以清晰的行列形式展示二维数据（如成绩表、员工信息表、产品参数表、统计报表等），便于用户阅读、对比和理解；2. 信息分类汇总：通过表头、表体、表尾的划分，实现数据的分类和汇总（如表头说明字段含义，表尾显示合计数据）；3. 复杂数据呈现：支持跨行（rowspan）、跨列（colspan）单元格，可展示结构复杂的关联数据；4. 可访问性支持：通过summary、caption等属性，为屏幕阅读器用户提供表格信息，提升网页可访问性	1. 核心子元素：必须配合子元素使用，核心子元素包括：① caption（表格标题，位于表格上方）；② thead（表格头部，包含表头行tr和表头单元格th）；③ tbody（表格主体，包含数据行tr和数据单元格td）；④ tfoot（表格尾部，包含汇总行tr和单元格td/th）；⑤ tr（表格行，是th和td的父容器）；⑥ th（表头单元格，默认加粗居中）；⑦ td（普通数据单元格）；2. 布局注意：早期常用table进行网页整体布局，现已废弃（灵活性差、渲染性能低），table仅用于数据展示；3. 样式建议：border、cellspacing、cellpadding等属性建议用CSS替代（如用border-collapse:collapse替代cellspacing="0"，用padding替代cellpadding），更灵活可控；4. 跨行跨列：通过th/td的rowspan（跨行，值为跨越的行数）和colspan（跨列，值为跨越的列数）实现复杂表格布局；5. 兼容性：全浏览器支持，废弃属性在现代浏览器中仍可能生效，但不建议使用；6. 响应式适配：表格在小屏幕设备上易出现横向滚动，可通过设置overflow-x:auto包裹表格，或在移动端将表格转换为列表形式展示
tbody	一、通用属性：id、class、style、title、lang、hidden、dir；二、独有属性：无（表格主体语义容器，无专属属性）	1. 基础表格主体：<table style="width:600px;border-collapse:collapse;"><thead><tr><th>姓名</th><th>年龄</th></tr></thead><tbody id="table-body" class="body-style" style="line-height:1.8;"><tr><td>张三</td><td>25</td></tr><tr><td>李四</td><td>23</td></tr></tbody></table>2. 分组表格主体：<table style="width:700px;"><thead><tr><th>部门</th><th>姓名</th><th>职位</th></tr></thead><tbody style="background:#f9f9f9;"><tr><td colspan="3" style="font-weight:bold;">技术部</td></tr><tr><td>技术部</td><td>王五</td><td>前端开发</td></tr></tbody><tbody style="background:#fff;"><tr><td colspan="3" style="font-weight:bold;">运营部</td></tr><tr><td>赵六</td><td>24</td><td>运营专员</td></tr></tbody></table>	HTML中的表格主体语义元素，块级元素，仅作为table的子元素存在，核心语义是定义表格的主体数据区域，用于包裹表格的实际数据行（tr+td）	1. 表格结构分化：明确区分表格的主体数据与表头、表尾，提升表格结构的语义清晰度；2. 数据样式控制：作为主体容器，便于为数据行统一应用样式，也可按分组为不同tbody应用差异化样式；3. 动态数据处理：便于通过JavaScript动态操作表体数据（如新增、删除、修改数据行，数据排序、筛选）；4. 可访问性提升：帮助辅助设备快速定位表格的核心数据区域，优化阅读体验	1. 从属关系：嵌套在table内部，可与thead、tfoot配合使用，多个tbody可共存（用于数据分组）；2. 子元素规则：仅可嵌套tr元素，tr内通常嵌套td元素（数据单元格）；3. 布局特性：块级元素，宽度与表格一致，无默认样式，需通过CSS定义行高、边框等；4. 兼容性：全浏览器支持，无兼容问题；5. 数据分组：多个tbody可实现表格数据的逻辑分组（如按部门、按类别），每个tbody可单独控制样式；6. 可选性：简单表格可省略tbody，直接在table内嵌套tr，浏览器会自动为tr包裹tbody；7. 性能优化：大数据量表格中，通过tbody分区加载数据，可提升页面渲染性能和交互流畅度
td	一、通用属性：id、class、style、title、lang、hidden、dir；二、独有属性：1. colspan：设置单元格跨列合并的列数（核心合并属性）；2. rowspan：设置单元格跨行合并的行数（核心合并属性）；3. headers：指定一个或多个th的id，明确与表头的关联（多个id用空格分隔）	1. 基础数据单元格：<table style="width:500px;border-collapse:collapse;"><thead><tr><th>姓名</th><th>成绩</th></tr></thead><tbody><tr><td id="name-td" class="data-cell" style="padding:8px;border:1px solid #ddd;" headers="name-th">张三</td><td style="padding:8px;border:1px solid #ddd;">95</td></tr></tbody></table>2. 合并单元格数据：<table style="width:600px;"><tbody><tr><td colspan="2" style="text-align:center;font-weight:bold;padding:8px;border:1px solid #ddd;">2024年第二季度销售数据</td></tr><tr><td style="padding:8px;border:1px solid #ddd;">4月</td><td style="padding:8px;border:1px solid #ddd;">¥50万</td></tr></tbody></table>	HTML中的数据单元格元素，行内块元素，核心语义是定义表格的普通数据单元格，用于展示表格的具体数据内容，是表格数据展示的核心元素	1. 数据承载：展示表格的具体数据内容（文本、数字、简单图标等），是表格数据呈现的基础；2. 单元格合并：通过colspan、rowspan实现复杂的表格布局（如合并表头下方的空白单元格、合并同类数据单元格）；3. 表头关联：通过headers属性明确与对应表头的关联，提升表格的可访问性；4. 样式自定义：作为数据容器，便于按需求为不同数据单元格应用差异化样式（如高亮异常数据）	1. 默认样式：默认文本左对齐（text-align:left）、字体正常，无默认加粗，可通过CSS自定义；2. 布局特性：行内块元素，宽度由表格布局或内容决定，自带默认内边距；3. 嵌套规则：可嵌套行内元素和文本，也可嵌套块级元素（如div、p），但会影响表格布局的整洁性，建议谨慎使用；4. 兼容性：全浏览器支持，无兼容问题；5. 与th区别：td用于展示数据，th用于展示表头；默认样式和语义功能明确区分，不可混淆使用；6. 合并单元格注意：合并后需删除被合并的单元格（如colspan="2"需删除后续1个td），否则会导致表格布局错乱；7. headers属性：当表格结构复杂（如多级表头）时，headers属性可精准关联数据与表头，辅助设备可准确读取对应关系；8. 数据格式：建议数据格式统一（如日期、金额），提升表格可读性
textarea	一、通用属性：1. id：唯一标识，用于关联label、CSS定位和JS获取；2. class：类名，批量应用样式；3. style：行内样式；4. title：悬浮提示；5. lang：语言属性；6. hidden：隐藏元素；7. tabindex：Tab导航顺序；8. disabled：禁用元素（不可编辑，值不提交）；9. readonly：只读（可选中，值提交）；10. required：表单必填项；11. name：表单字段名，核心提交属性；12. form：关联表单id；13. autofocus：页面加载自动聚焦；14. autocomplete：控制自动完成（on/off）；二、独有属性：1. rows：设置文本域的默认行数（高度基准）；2. cols：设置文本域的默认列数（宽度基准）；3. maxlength：最大输入字符数；4. minlength：最小输入字符数；5. placeholder：输入提示文本；6. wrap：设置文本换行方式，可选值：hard（提交时保留换行）、soft（提交时不保留换行，默认）、off（禁止换行）	1. 基础多行输入：<textarea id="remark" name="remark" rows="5" cols="50" placeholder="请输入备注信息（最多200字）" maxlength="200" class="form-textarea"></textarea>2. 只读文本域：<textarea id="info" name="info" rows="3" cols="40" readonly style="resize:none;">用户注册时间：2024-01-01 用户等级：VIP2</textarea>3. 表单关联文本域：<textarea name="feedback" form="feedback-form" rows="6" cols="60" required placeholder="请输入您的反馈意见" wrap="hard"></textarea><form id="feedback-form" action="/submit-feedback" method="post"></form>	HTML中的多行文本输入元素，属于流内容，核心语义是提供可输入多行文本的交互接口，用于收集长文本信息	1. 长文本收集：收集用户备注、留言、反馈、简介等多行文本信息，区别于input type="text"的单行输入；2. 文本展示：配合readonly属性展示多行文本信息（如用户详情、规则说明）；3. 基础富文本雏形：通过简单样式和换行控制，实现基础的多行文本格式化展示；4. 表单交互：作为表单核心组件，配合表单完成长文本数据的提交和验证	1. 布局特性：块级元素，默认可自由调整大小（右下角有拖拽柄），可通过style="resize:none;"禁止拖拽；2. 内容默认：标签内的文本为默认值，提交时会包含该内容；3. 换行处理：用户输入的换行在页面显示为换行，wrap="hard"时提交会转为\n，soft时不保留；4. 与input区别：textarea支持多行输入，可容纳大量文本，input type="text"仅单行；5. 兼容性：全浏览器支持，核心属性无兼容问题；6. 样式注意：默认有边框和内边距，可通过CSS自定义边框、圆角、滚动条等样式；7. 输入限制：maxlength/minlength控制字符数，包含换行符和空格
tfoot	一、通用属性：id、class、style、title、lang、hidden、dir；二、独有属性：无（表格底部语义容器，无专属属性）	1. 表格汇总底部：<table style="width:600px;border-collapse:collapse;"><thead><tr><th>商品</th><th>数量</th><th>单价</th></tr></thead><tbody><tr><td>笔记本</td><td>2</td><td>¥50</td></tr><tr><td>钢笔</td><td>3</td><td>¥20</td></tr></tbody><tfoot id="table-footer" class="footer-style" style="background:#f5f5f5;font-weight:bold;"><tr><td colspan="2" style="text-align:right;">总计：</td><td>¥160</td></tr></tfoot></table>2. 表格说明底部：<table style="width:700px;"><thead><tr><th>学号</th><th>成绩</th></tr></thead><tbody><tr><td>001</td><td>92</td></tr></tbody><tfoot style="color:#666;text-align:center;"><tr><td colspan="2">说明：成绩满分100分，60分及格</td></tr></tfoot></table>	HTML中的表格底部语义元素，块级元素，仅作为table的子元素存在，核心语义是定义表格的底部区域，用于包裹表格的汇总数据或说明文本	1. 汇总数据展示：集中展示表格数据的汇总信息（如总计、平均值、合计），让用户快速获取核心统计结果；2. 表格说明补充：添加表格相关的说明文本（如数据来源、统计规则、备注），提升数据完整性；3. 结构语义强化：明确区分表格底部与表头、表体，完善表格的语义结构；4. 样式统一控制：作为底部容器，便于为汇总行或说明文本统一应用样式（如加粗、背景色）	1. 从属关系：嵌套在table内部，与thead、tbody配合使用，无论代码中顺序如何，浏览器都会将tfoot渲染在表格底部；2. 子元素规则：仅可嵌套tr元素，tr内可嵌套td或th元素；3. 布局特性：块级元素，宽度与表格一致，无默认样式，需通过CSS定义；4. 兼容性：全浏览器支持，无兼容问题；5. 汇总功能：通常用于数据汇总，通过colspan或rowspan合并单元格实现汇总信息的跨列/跨行展示；6. 可选性：非表格必需元素，仅在需要汇总数据或添加说明时使用；7. 与tbody区别：tfoot用于底部汇总/说明，tbody用于主体数据，语义功能明确区分；8. 固定表尾：可通过CSS实现固定表尾效果，但实现难度高于固定表头，需结合表格布局特性调整
th	一、通用属性：id、class、style、title、lang、hidden、dir；二、独有属性：1. scope：指定表头与数据的关联范围（row=关联当前行数据、col=关联当前列数据、rowgroup=关联当前行组、colgroup=关联当前列组）；2. colspan：设置单元格跨列合并的列数；3. rowspan：设置单元格跨行合并的行数；4. abbr：指定表头的缩写文本，用于辅助设备快速读取	1. 基础列表头：<table style="width:500px;border-collapse:collapse;"><thead><tr><th id="name-th" class="header-cell" scope="col" style="text-align:center;padding:8px;border:1px solid #ddd;" abbr="姓名">姓名</th><th scope="col" style="text-align:center;padding:8px;border:1px solid #ddd;" abbr="年龄">年龄</th></tr></thead></table>2. 行表头与合并单元格：<table style="width:600px;"><tbody><tr><th scope="row" rowspan="2" style="background:#f5f5f5;padding:8px;border:1px solid #ddd;">技术部</th><td style="padding:8px;border:1px solid #ddd;">张三</td><td style="padding:8px;border:1px solid #ddd;">前端开发</td></tr><tr><td style="padding:8px;border:1px solid #ddd;">李四</td><td style="padding:8px;border:1px solid #ddd;">后端开发</td></tr></tbody></table>	HTML中的表头单元格元素，行内块元素，核心语义是定义表格的表头单元格，用于展示表格的列/行标题，区别于普通数据单元格（td）	1. 表头标识：明确区分表头与数据单元格，让用户快速识别表格的列/行主题；2. 数据关联：通过scope属性建立表头与对应数据的语义关联，提升表格的可访问性（辅助设备可精准读取表头-数据对应关系）；3. 单元格合并：支持跨列（colspan）、跨行（rowspan）合并，适配复杂表格结构（如多级表头）；4. 样式差异化：默认样式与td不同，便于用户视觉区分表头与数据	1. 默认样式：默认文本居中对齐（text-align:center）、字体加粗（font-weight:bold），可通过CSS自定义；2. 布局特性：行内块元素，宽度由内容或表格布局决定，自带默认内边距（不同浏览器略有差异）；3. 嵌套规则：可嵌套行内元素和文本，不可嵌套块级元素；4. 兼容性：全浏览器支持，无兼容问题；5. 与td区别：th用于表头（语义为"标题"），td用于数据（语义为"数据"）；默认样式不同，语义功能明确区分；6. scope属性：核心语义属性，推荐必设，帮助辅助设备准确关联表头与数据，提升无障碍体验；7. 合并单元格注意：colspan/rowspan合并单元格后，需确保表格的行列数逻辑一致，避免布局错乱；8. 缩写文本：abbr属性的缩写文本仅辅助设备可见，不影响页面视觉展示
thead	一、通用属性：id、class、style、title、lang、hidden、dir；二、独有属性：无（表格头部语义容器，无专属属性）	1. 基础表格头部：<table style="width:700px;border-collapse:collapse;"><thead id="table-header" class="header-style" style="background:#f5f5f5;"><tr><th>产品名称</th><th>价格</th><th>库存</th></tr></thead><tbody><tr><td>手机</td><td>¥5999</td><td>100</td></tr></tbody></table>2. 复杂表格头部（合并单元格）：<table style="width:800px;"><thead><tr><th colspan="3" style="text-align:center;">2024年销售数据</th></tr><tr><th>季度</th><th>销售额</th><th>增长率</th></tr></thead></table>	HTML中的表格头部语义元素，块级元素，仅作为table的子元素存在，核心语义是定义表格的头部区域，用于包裹表格的表头行（tr+th）	1. 表格结构语义化：明确区分表格的头部（表头）、主体（表数据）、底部（表汇总），让表格结构更清晰，利于开发者维护和辅助设备识别；2. 样式统一控制：作为头部容器，便于为所有表头单元格统一应用样式（如背景色、字体加粗）；3. 数据关联：将表头与表格主体数据建立语义关联，提升表格的可访问性；4. 动态操作支撑：便于通过JavaScript单独操作表格头部（如固定表头、筛选表头）	1. 从属关系：必须嵌套在table内部，可与tbody、tfoot配合使用，顺序为thead→tbody→tfoot（浏览器会自动调整顺序）；2. 子元素规则：仅可嵌套tr元素，tr内通常嵌套th元素（表头单元格），也可嵌套td元素；3. 布局特性：块级元素，默认宽度与表格一致，无默认样式，需通过CSS定义；4. 兼容性：全浏览器支持，无兼容问题；5. 与tbody区别：thead用于表头，tbody用于表体数据，语义边界清晰；6. 固定表头实现：可通过CSS设置thead的position:sticky和top:0实现固定表头效果，提升大数据量表格的阅读体验；7. 可选性：不是表格必需元素，简单表格可直接在table内嵌套tr，但语义化开发建议使用
time	一、通用属性：id、class、style、title、lang、hidden、dir；二、独有属性：1. datetime：指定机器可读的时间/日期值（核心属性，格式需符合ISO 8601标准），用于搜索引擎和辅助设备识别；2. pubdate：布尔属性，标记该时间为文档或文章的发布日期（已废弃，建议用语义化标签替代）	1. 简单日期展示：<p>文章发布于<time id="publish-time" class="article-date" datetime="2024-05-20" style="color:#666;">2024年5月20日</time></p>2. 日期时间展示：<p>会议时间：<time datetime="2024-06-10T14:30:00+08:00">2024年6月10日14:30（北京时间）</time></p>3. 持续时间展示：<p>活动时长：<time datetime="PT2H30M">2小时30分钟</time></p>	HTML5新增的时间语义元素，属于行内元素，核心语义是标记页面中的时间或日期信息，提供机器可读的格式，提升时间信息的语义化和可访问性	1. 时间语义标识：明确标记时间/日期文本，区别于普通文本，让搜索引擎和辅助设备快速识别时间信息；2. 机器可读格式：通过datetime属性提供标准化的时间格式，便于数据抓取和处理（如搜索引擎收录发布时间）；3. 显示灵活：datetime属性存储机器格式，标签内文本可显示任意人类易读的格式（如"2024年5月20日"“昨天”）；4. 持续时间支持：支持ISO 8601格式的持续时间（如PT2H30M=2小时30分钟），丰富时间展示场景	1. datetime格式：需符合ISO 8601标准，常见格式：日期（yyyy-mm-dd）、日期时间（yyyy-mm-ddTHH:MM:SS±HH:MM，T分隔日期时间，±表示时区）、持续时间（PTnHnMnS，n为数字）；2. pubdate废弃：pubdate属性在HTML5中已废弃，若需标记发布日期，建议将time放在article的header内，语义更清晰；3. 兼容性：支持IE9+及现代浏览器，IE8及以下不支持，不影响视觉展示，但语义失效；4. 使用规范：仅用于标记真实的时间/日期信息，不用于非时间文本；5. 视觉样式：默认无特殊样式，与普通文本一致，可通过CSS自定义颜色、字体等；6. 辅助设备支持：屏幕阅读器会识别time元素，并读取datetime属性的标准化时间，提升无障碍体验；7. 动态更新：可通过JavaScript修改datetime属性和标签内文本，实现时间的动态更新（如倒计时结束时间）
ul	一、通用属性：id、class、style、title、lang、hidden、tabindex、dir、contenteditable；二、独有属性：1. type：设置列表项的标记类型，可选值：① disc（默认，实心圆点）；② circle（空心圆点）；③ square（实心方块）；已废弃，建议用CSS的list-style-type替代；2. compact：布尔属性，设置列表紧凑显示（减小列表项之间的间距），已废弃，建议用CSS的margin或padding替代	1. 基础无序列表：<ul id="nav-list" class="nav-menu" style="list-style:none;margin:0;padding:0;"><li><a href="index.html">首页</a></li><li><a href="about.html">关于我们</a></li><li><a href="product.html">产品中心</a></li><li><a href="contact.html">联系我们</a></li></ul>2. 多级无序列表：<ul class="category-list"><li>电子产品<ul><li>手机</li><li>电脑</li><li>平板</li></ul></li><li>生活用品<ul><li>厨具</li><li>家纺</li></ul></li></ul>3. 自定义标记列表：<ul style="list-style-type:disc;color:#ff6600;"><li>待办事项1：完成文档编写</li><li>待办事项2：提交审核</li></ul>	HTML中的无序列表元素，属于流内容，核心语义是展示无先后顺序、地位平等的列表项，子元素只能是li（列表项元素）	1. 导航菜单构建：是网页导航菜单（顶部导航、侧边栏导航）的核心构建元素，通过嵌套和CSS样式实现多级导航；2. 无序内容展示：展示无顺序要求的内容列表（如待办清单、产品分类、相关链接等）；3. 内容分组：将逻辑相关的无序内容组合在一起，提升页面结构清晰度；4. 自定义样式扩展：通过CSS修改列表项标记样式，实现个性化的列表展示（如替换为图标、去除标记）	1. 布局特性：默认是块级元素，独占一行，列表项之间有默认间距，左侧有默认缩进（用于容纳列表标记）；2. 嵌套规则：直接子元素必须是li，li内可嵌套任何元素（块级、行内、其他列表等），ul可嵌套ul或ol实现多级列表；3. 标记样式：默认的列表标记（圆点、方块）可通过CSS的list-style-type属性自定义，常用值：none（去除标记）、disc（实心圆）、circle（空心圆）、square（实心方块）、decimal（数字）等；4. 导航常用：在导航菜单中，通常设置list-style:none; margin:0; padding:0;清除默认样式，再通过CSS设置li的浮动、display等属性实现横向或纵向导航；5. 兼容性：全浏览器支持，废弃属性（type、compact）在现代浏览器中仍可能生效，但不建议使用；6. 与ol区别：ul用于无顺序列表（列表项无优先级），ol用于有顺序列表（列表项有先后步骤或排名）
var	一、通用属性：id、class、style、title、lang、hidden、dir；二、独有属性：无（变量语义元素，无专属属性）	1. 数学公式变量：<p>在平面直角坐标系中，直线的斜截式方程为：<var id="math-var" class="variable" style="font-style:italic;color:#6f42c1;">y</var> = <var style="font-style:italic;color:#6f42c1;">k</var><var style="font-style:italic;color:#6f42c1;">x</var> + <var style="font-style:italic;color:#6f42c1;">b</var>，其中<var style="font-style:italic;color:#6f42c1;">k</var>为斜率，<var style="font-style:italic;color:#6f42c1;">b</var>为截距。</p>2. 程序变量标注：<p>在JavaScript中，定义变量<var style="color:#28a745;">userName</var>存储用户姓名，通过<code>console.log(userName)</code>可打印变量值。</p>	HTML中的变量语义元素，行内元素，核心语义是标记页面中的变量（数学公式中的变量、程序中的变量），通过斜体等样式直观区分	1. 变量语义标识：明确标记变量内容，区别于常量、普通文本，提升文档语义清晰度；2. 公式/程序适配：适配数学公式、程序代码相关文档，清晰区分变量与其他内容（如运算符、常量）；3. 样式区分：默认显示为斜体，直观突出变量，提升文档可读性；4. 辅助理解：帮助用户和辅助设备快速识别变量，理解公式或程序的含义	1. 默认样式：默认显示为斜体（font-style:italic），可通过CSS自定义颜色、字体等样式；2. 常见场景：数学公式变量（如x、y、k）、程序中的变量名（如userName、age）、科学公式中的变量；3. 兼容性：全浏览器支持，无兼容问题；4. 与code区别：code用于标记完整代码片段，var仅用于标记代码中的变量部分，语义更精准；5. 嵌套限制：可嵌套行内元素和文本，不可嵌套块级元素；6. 使用规范：仅用于标记变量，避免用于其他斜体文本（普通斜体建议用em或CSS）；7. 数学公式适配：在数学公式场景中，常与其他文本元素（如运算符、常量）配合使用，提升公式可读性
video	一、通用属性：id、class、style、title、lang、hidden、dir；二、独有属性：1. src：指定视频文件的URL（核心属性）；2. controls：布尔属性，显示默认视频控制条（播放/暂停、进度、音量、全屏等）；3. autoplay：布尔属性，页面加载完成后自动播放（多数浏览器需配合muted）；4. loop：布尔属性，循环播放视频；5. muted：布尔属性，默认静音；6. preload：预加载策略（auto/metadata/none）；7. poster：视频封面图URL（播放前显示，提升用户体验）；8. width/height：设置视频播放器的宽/高（单位：px，可通过CSS覆盖）；9. playsinline：布尔属性，在移动端允许视频内联播放（不自动全屏）	1. 基础视频播放：<video id="course-video" class="video-player" src="course.mp4" controls width="800" height="450" style="display:block;margin:0 auto;">您的浏览器不支持视频播放</video>2. 带封面自动静音播放：<video src="promo.mp4" autoplay loop muted playsinline poster="promo-cover.jpg" width="600" style="width:100%;max-width:600px;"></video>3. 多源视频兼容：<video controls width="800"><source src="movie.mp4" type="video/mp4"><source src="movie.webm" type="video/webm">您的浏览器不支持HTML5视频，请更新浏览器</video>	HTML5新增的视频播放元素，属于流内容，核心语义是在页面中嵌入并播放视频资源，支持多种视频格式，是网页视频播放的核心组件	1. 视频嵌入与播放：替代传统插件，原生支持网页视频播放，简化开发；2. 播放控制：提供基础控制功能，或支持自定义控制逻辑，适配不同交互需求；3. 格式兼容：通过source元素提供多格式视频，提升跨浏览器兼容性；4. 场景适配：支持自动播放、循环、静音、内联播放等，满足广告视频、课程视频、宣传视频等多种场景	1. 支持格式：主流支持MP4、WebM、OGV，MP4兼容性最广；2. 宽高设置：width/height属性仅设置播放器尺寸，不改变视频本身比例，建议按视频原始比例设置，避免拉伸；3. autoplay限制：同audio元素，多数浏览器禁止未静音视频自动播放，移动端需配合playsinline实现内联自动播放；4. 布局特性：行内块元素，可通过CSS设置width:100%实现响应式播放；5. 兼容性：支持IE9+及现代浏览器，IE8及以下不支持；6. 自定义控制：需隐藏默认controls，通过JavaScript操作video API（如play()、pause()）实现自定义控制界面；7. 性能优化：大视频建议使用流媒体服务，配合preload="metadata"减少初始加载压力