-
border-radius结合border可提升界面美观度。首先设置border-radius实现圆角，支持统一、分角或椭圆写法；再添加border定义边框样式，增强轮廓；可单独控制每个角的弧度以适应不对称设计；实际用于按钮、卡片、圆形头像等元素时，推荐配合box-sizing:border-box避免布局偏差。
-
iframe依然可用但需谨慎，因其存在安全与性能问题；2.主要安全隐患包括点击劫持、钓鱼和XSS，可通过sandbox、allow属性、X-Frame-Options和CSP来规避；3.性能问题源于独立浏览上下文和资源消耗，可通过loading="lazy"、JavaScript动态加载和内容优化缓解；4.更推荐的替代方案包括API调用+客户端渲染、WebComponents、服务器端包含（SSI/SSR/ESI）和OEmbed协议；5.提升用户体验需采用响应式设计、加载状态提示、错误处理、可访问性支持（
-
外部脚本正常执行需确保script标签位置、加载方式和路径正确；放</body>前最稳妥，放<head>需加defer或async；路径错误致404，模块脚本需带扩展名且不共享全局作用域。
-
<p>HTML注释必须用<!---->包裹，禁止嵌套、禁放标签内、禁跨行至DOCTYPE前；注释中避免连续--或>以防提前截断；JS/CSS中应使用各自语法注释；构建时建议移除注释以优化性能。</p>
-
本文详解如何通过HTML结构优化与CSSFlex布局协同，将搜索栏稳定固定在页面头部右上角，并兼顾响应式表现，避免因嵌套层级错误导致的对齐失效问题。
-
rotate()绕画布原点(0,0)旋转而非图形中心，需用translate()移原点、rotate()、再translate()复位或setTransform()设矩阵，配合save()/restore()避免状态污染。
-
应按需控制flex子项收缩：对文字按钮等设flex-shrink:0，对内容区保留flex-shrink:1，配合min-width/min-height设定压缩底线，并慎用flex:1，优先用flex-basis锚定基准尺寸。
-
padding百分比基于父容器宽度，所有方向的padding百分比均以包含块的宽度为基准计算，避免与高度相关的循环依赖问题，常用于响应式等比例布局设计。
-
clip-path动画不平滑是因浏览器仅支持inset()等少数函数的插值过渡；polygon()坐标列表无法插值，须用inset()替代实现局部放大，配合object-fit和transition:clip-path精确控制。
-
Reflect提供统一对象操作接口，Proxy实现行为拦截，结合WeakMap或reflect-metadata可附加元数据，用于验证、装饰等场景，提升代码灵活性与可维护性。
-
柯里化是将多参数函数转换为一系列单参数函数的过程，通过闭包累积参数直至满足原函数形参个数才执行；支持提前绑定、函数复用与配置化，适用于日志封装、数组操作及高阶函数构建等场景。
-
页面标题必须唯一且置于<head>内；<title>内容为空或含空格将导致标签页显示文件名、SEO失效；动态修改须用document.title而非DOM操作；SPA需手动更新，构建工具配置可能覆盖模板中的<title>。
-
keep-alive组件中watch不失效但需确保监听响应式源：应直接watchprops/computed或用函数形式，避免监听一次性局部变量；在onActivated中同步状态、清理副作用并考虑使用watchEffect自动追踪依赖。
-
dataset属性仅映射HTML中初始声明的data-*属性，动态设置不会同步到DOM；推荐用setAttribute/getAttribute确保数据持久化与兼容性。
-
JavaScript模板字符串是实现动态HTML内容的现代工具，其核心在于${}语法，摘要如下：1.嵌入变量与常量，将变量值直接插入字符串；2.嵌入算术与逻辑表达式，实现动态计算与条件渲染；3.嵌入函数调用，执行复杂逻辑后返回结果；4.访问对象属性与数组元素，处理结构化数据。模板字符串提升代码可读性与维护性，简化动态HTML构建，但需防范XSS风险并注意逻辑复杂度，同时前端框架与DOM操作仍是构建动态内容的其他常见方式。
