-
实现HTML侧边栏布局的方法有浮动、定位、Flexbox和Grid四种方案。1.浮动方案通过设置.sidebar的float:left和.content的margin-left来实现，优点是兼容性好，但需清除浮动；2.定位方案使用position:absolute让侧边栏脱离文档流，需配合position:relative的容器，灵活性更强但复杂度较高；3.Flexbox方案通过display:flex和flex:1自动填充内容区域，结构清晰且现代浏览器支持良好；4.Grid方案采用grid-templa
-
data属性是HTML5原生支持的自定义数据容器，用于在DOM元素上安全挂载私有业务数据；它以data-开头，浏览器忽略但JS可通过datasetAPI读写，自动连字符转驼峰，值恒为字符串，适用于纯JS逻辑驱动场景，避免滥用存复杂数据。
-
CSS变量本身不响应，需配合@media在:root中按断点重定义值；移动端优先设默认值，再用min-width覆盖；语义化命名、避免重复覆盖；适用于设计系统，不适用单元素特殊响应。
-
justify-content:space-evenly不生效的首要原因是父容器未设置display:flex；它将总空白均分给n+1个间隙，实现首尾与中间间隙完全等宽。
-
适配器模式通过创建中间层解决接口不匹配问题，将不同数据源的字段格式统一，使原本不兼容的接口能协同工作，提升系统解耦性与扩展性。
-
JavaScript变量是词法环境中的绑定名称；var具函数作用域、提升且初始化为undefined，let/const具块级作用域、提升但受TDZ限制，访问未初始化会抛ReferenceError，应默认用const、次选let、弃用var。
-
现代事件绑定首选addEventListener，支持多监听器、可移除、语义清晰；避免onclick属性或赋值覆盖；动态元素需事件委托；慎用preventDefault和stopPropagation；移动端可禁用缩放消除click延迟。
-
iOSSafari全屏失效主因是video标签缺失playsinline和webkit-playsinline属性，且需绑定用户手势调用requestFullscreen()，同时排除父容器CSS限制、插件配置干扰及WebView策略影响。
-
遮罩层未铺满全屏的根本原因是fixed元素默认尺寸为内容自适应，应设inset:0或宽高100%；需确保z-index足够大、pointer-events正常、背景色不透明，并注意iOSSafari视口变化及深色模式适配。
-
最常见的原因是href属性值无效，如为空、空格、javascript:void(0)未配事件、协议或路径拼写错误；其次为缺少rel="noopener"被安全策略拦截；再者是JS阻止默认行为后未兜底跳转；最后是页面被sandboxiframe嵌入导致外链禁用。
-
JavaScript是XSS和CSRF攻击的主要执行载体，防范需控制数据流向、限制执行上下文、切断攻击链路：XSS防御重在输入过滤、输出编码、执行隔离；CSRF防御核心是校验不可预测且绑定会话的凭证；还需关注第三方库风险、本地存储安全、重定向校验及错误信息泄露。
-
应选用TinyMCE、Quill或CKEditor5等富文本编辑器直接替换textarea，初始化时绑定DOM节点，通过getData()获取HTML并同步至hiddeninput，确保表单提交含格式数据。
-
柯里化是将多参数函数转换为单参数函数序列的技术。例如，curry(add)(1)(2)(3)返回6，通过fn.length判断参数是否收集完毕，支持参数复用，如预设日志级别或校验规则，提升代码灵活性与复用性。
-
使用灵活单位如auto、minmax()替代固定尺寸可解决CSSGrid中内容截断问题，确保grid-template-rows和grid-template-columns具备弹性，避免因轨道空间不足导致溢出。
-
浏览器不报错但可访问性失效，ChromeDevTools“Accessibility”面板标红提示对比度不足；实际表现为屏幕阅读器忽略文字，文字“看不见但存在”；需用color-mix()、明度控制和微阴影等手段确保稳定可读。
