-
:target是CSS伪类，用于选中URL片段标识符对应的元素。结合::before可在锚点跳转时插入提示内容，如“?您正在查看这里”，通过高亮样式提供视觉反馈。示例中，.highlight:target::before添加醒目提示块，增强单页或FAQ页面的定位体验。需注意布局影响、可访问性及旧版IE不兼容问题。
-
HTML5通过WebCryptoAPI手动实现HKDF（Extract+Expand），需用HMAC-SHA256分两步派生密钥：先以salt为key、IKM为message得PRK，再以PRK为key迭代HMAC生成输出；主流浏览器均支持，但旧版Safari对raw导入有限制。
-
justify-items用于Grid布局中控制项目在行内轴（水平）的对齐，align-items在Grid和Flexbox中均适用，控制块轴（垂直）对齐，Flexbox中主轴对齐由justify-content实现，默认值均为stretch。
-
高阶函数是将函数作为参数或返回值的设计实践，本身不提升可读性；其优势需配合纯函数、无副作用和合理抽象才能体现。
-
本文提供无需媒体查询的纯CSS解决方案，通过合理运用position、z-index和负边距，使英雄图层与悬浮文本框形成独立视觉容器，确保后续内容自然流式排布，彻底摆脱反复调整媒体查询的维护负担。
-
深拷贝在JavaScript中用于完全复制对象，常见方法包括：1.JSON.parse(JSON.stringify())仅适用于纯数据对象，不支持函数、undefined、Symbol、Date等，且无法处理循环引用；2.手写递归实现可支持多种类型并处理循环引用，但性能较低；3.Lodash的_.cloneDeep()功能全面、稳定可靠，支持Map、Set等复杂类型，但需引入库；4.structuredClone()为现代浏览器原生方法，性能好、语法简洁，支持多数类型但不兼容老版本。性能排序为：stru
-
正则表达式是字符串处理的基础设施，本质是描述字符串模式的语法规则；JavaScript中通过String和RegExp对象原生支持，test()返回布尔值用于判断，match()返回数组用于提取，需注意null与空数组的真值差异。
-
vw/vh是视口单位，1vw=视口宽1%、1vh=视口高1%，不依赖父元素或字体大小；而%依赖父容器宽度，em依赖父元素font-size。
-
函数绑定（bind）通过创建新函数显式绑定this指向，适用于需固定上下文的场景；箭头函数则无独立this，继承外层作用域的this，适合无需动态绑定的简洁回调。
-
浏览器渲染流程包括解析HTML生成DOM树、解析CSS生成CSSOM树、合并为渲染树、布局、绘制和合成。任何DOM或CSSOM变更都可能触发重排重绘，影响性能。优化策略包括减少关键渲染路径长度、避免同步重排重绘、使用CSSTransform和Opacity做动画、合理使用will-change、减少JavaScript频繁操作样式。通过ChromeDevTools的Performance、Layers和Rendering面板可分析性能问题。实践建议有优先加载首屏内容、异步加载资源、精简CSS选择器、图片懒
-
答案是：HTML代码美化需以语义化结构为基础，通过CSS实现视觉与性能的平衡。首先，使用语义化标签提升可读性、SEO和可访问性；其次，采用外部样式表、优化选择器、模块化命名（如BEM）及Flexbox/Grid布局提升CSS效率；最后，借助Prettier、Sass、PostCSS、Stylelint等工具自动化格式化、增强可维护性并保障代码质量，从而构建清晰、高效、易维护的前端代码体系。
-
使用:not(:last-child)可精准排除最后一个子元素，常用于添加分隔线、间距控制及类名组合优化，提升样式灵活性与可维护性。
-
使用CSSGrid可直观创建多行多列布局。通过display:grid开启布局，用grid-template-columns和grid-template-rows定义行列结构，支持固定值、fr单位及repeat()函数简化重复设置，如repeat(3,1fr)表示三等分列宽；结合minmax(200px,1fr)与auto-fit实现响应式自适应列数，gap属性设置单元格间距。子元素自动填入网格无需额外定位，掌握核心属性即可快速构建灵活布局。
-
要优化图片画廊在不同设备上的显示效果，核心是实现响应式设计和提升加载性能。1.使用CSS的max-width:100%和height:auto确保图片弹性缩放，结合object-fit:cover或contain统一图片显示效果；2.通过CSS媒体查询动态调整布局，如大屏三列、中屏两列、小屏单列，配合flex布局和gap间距控制；3.优化图片资源，采用压缩、WebP格式和loading="lazy"实现懒加载，提升页面性能；4.添加JavaScript实现灯箱交互，支持点击放大、Esc键关闭和遮罩层操作；
-
HTML中的<progress>标签用于直观展示任务完成进度，提升用户体验；2.它通过value和max属性定义当前进度与总量，支持确定性和不确定性状态；3.动态更新需用JavaScript修改value属性，常用于文件上传等异步场景；4.样式定制依赖浏览器特定伪元素（如::-webkit-progress-value和::-moz-progress-bar），虽有限制但语义化优势显著。
