-
掌握HTML布局需综合运用语义化标签、Flexbox、Grid、浮动及媒体查询：一用header/nav/main/section/footer构建结构；二用Flexbox实现一维弹性布局；三用Grid完成二维网格控制；四以float+clear兼容旧浏览器；五借媒体查询实现响应式断点适配。
-
首先启用内联差异显示，点击“内联差异”按钮以分开展示修改行，删除样式标红、新增样式标绿；接着配置外部比较工具如BeyondCompare，在“首选项→差异”中选择工具后右键文件使用外部工具查看，获得语法高亮与结构对齐的对比效果；最后利用SourceTree自带语法着色，通过颜色区分选择器（黑色）、属性名（蓝色）和值（紫色），结合背景色识别行内变更，精准定位CSS修改内容。
-
CSS:invalid伪类可自动为校验失败的表单控件添加样式，需配合required、type="email"、min/max、pattern等约束属性生效；注意初始空值即触发问题，推荐用.touched类或:user-invalid延迟提示，并结合JS或ARIA提供错误文案。
-
严格模式通过启用限制性规则提升代码质量与可维护性，需在脚本顶部或函数首行添加"usestrict";激活，能捕获未声明赋值、重复参数等错误，并使this指向更明确。
-
Canvas压缩图片需按原始宽高比缩放，用naturalWidth/Height获取真实尺寸，限制长边缩放；iOS需解析EXIFOrientation并旋转校正；读取文件须在onload回调中处理；JPEG压缩优先于PNG以控体积。
-
彻底禁用HTML5表单原生验证的唯一可靠方式是在<form>标签上添加novalidate属性；它必须直接写在<form>元素上，动态添加或写在<input>上均无效，且需确保DOM渲染时该属性已存在。
-
HTML5Dialog的close()方法无效，通常因未调用showModal()/show()或元素未挂载到DOM；open属性只读，应使用hasAttribute('open')判断状态；Safari等旧浏览器需降级处理并手动管理焦点与ESC。
-
用iframe最简单，但要注意跨域和样式隔离直接在当前HTML里嵌另一个HTML文件，iframe是唯一原生支持的方式。它不依赖JS，兼容性好，连IE9都能用。常见错误是写成后发现页面空白——大概率是路径错了，或者被浏览器同源策略拦了（比如本地双击打开的file://协议下，多数现代浏览器会拒绝加载本地iframe）。确保服务端运行（如用python-mhttp.server或VSCodeLiveServer），别双击HTML打开iframe默认有边框和
-
本文详解如何通过现代JavaScript（而非内联onclick）安全、批量地动态替换多个按钮的跳转目标，解决直接操作href失效、ID重复导致选择器失效等常见问题，并提供可复用的事件委托方案。
-
用requestAnimationFrame替代setTimeout可实现平滑动画，因其由浏览器统一调度绘制时机；需在回调末尾递归调用自身，避免耗时操作，并可用performance.now()控制时间差。
-
<p>prefers-color-scheme是CSS媒体查询，用于响应系统暗色偏好：@media(prefers-color-scheme:dark){/暗色样式/}，支持Chrome76+等现代浏览器，值为light/dark/no-preference，需配合data-theme属性避免与手动切换冲突。</p>
-
原生对话框（alert/confirm/prompt）虽零依赖但阻塞主线程、无样式定制且兼容性差，现代项目应优先使用语义化可定制的<dialog>元素或轻量封装方案。
-
移动端表格截断主因是table默认display:table在小屏无法自适应，最优解是不改HTML前提下将table/tr/td/th全设为display:block并用data-label维持行列语义。
-
<aside>是语义标签而非视觉侧边栏，需配合CSS实现布局；Flex推荐main{flex:1}+aside{width:300px;flex-shrink:0}；Grid推荐grid-template-columns:1fr300px并用gap控制间距。
-
Vue.js的readonly是运行时只读提示机制而非硬性访问控制，通过Proxy拦截赋值等操作并在开发环境警告、生产环境静默；无法阻止嵌套对象修改，需递归应用或配合computed、watch、TypeScript等实现可靠保护。
