-
<metaname="robots">标签仅是建议，生效需页面被成功抓取；若robots.txt屏蔽路径、返回4xx错误、content值大小写/空格/标点错误、或JS动态插入，均导致失效；X-Robots-Tag更可靠且优先级更高。
-
可通过路由守卫配合beforeunload事件实现离开前提醒：监听表单变更设isFormDirty为true，beforeunload触发浏览器原生提示，路由守卫（Vue的beforeRouteLeave或React的useBlock）拦截跳转并自定义提示，再辅以草稿保存和状态同步优化体验。
-
fixed元素相对于视口定位且脱离文档流，滚动时保持位置不变；需设置top/right/bottom/left偏移值才可见，但受transform/perspective/filter等属性影响而退化为相对父容器定位，并在移动端存在软键盘、滚动闪烁等兼容性问题。
-
mark是唯一语义正确、可访问且被搜索引擎识别的高亮方式；直接innerHTML.replace()会导致XSS、DOM损坏及结构错乱；安全做法须用TreeWalker遍历文本节点，结合escapeHtml、matchAll和range.surroundContents()实现。
-
应禁用触摸设备的:hover动画，使用@media(hover:none)或(any-hover:none)精准拦截；卡片默认静态，仅在(hover:hover)且(pointer:fine)时启用transform/opacity动画；iOS点击跳变需加-webkit-tap-highlight-color:transparent和touch-action:manipulation。
-
id是唯一标识，class是复用标签；id用于锚点、label绑定和高频JS访问，class适用于样式复用、组件化开发及行为解耦，重复id会导致getElementById返回首个匹配元素且难以排查。
-
Vue2中watch默认监听不到数组索引赋值（如arr[0]=newValue）和修改length的变化，因Object.defineProperty无法拦截；响应式操作有push、pop、shift、unshift、splice、sort、reverse；非响应式操作包括索引赋值、length修改及直接替换引用（除非deep:true）。
-
首先检查HTML结构是否完整，包含DOCTYPE、html、head和body标签，并确保标签正确闭合；接着通过浏览器开发者工具查看错误信息与资源加载情况，确认文件编码为UTF-8，排除外部资源路径错误导致的空白页问题。
-
原生语义标签比ARIA更可靠；<divrole="button">缺乏键盘支持和表单行为，应优先用<button>；有可见文本用aria-labelledby，纯图标用aria-label；aria-live="polite"用于状态提示，assertive用于关键错误；FontAwesome装饰性图标自动aria-hidden="true"，功能性图标需显式声明语义。
-
需通过标准超链接配合相对/绝对路径实现双向导航：一、用相对路径（如“page2.html”或“../page1.html”）；二、用锚点（如“page1.html#section-a”）；三、用根相对路径（如“/about.html”，需本地服务器支持）；四、用JavaScript动态加载导航；五、验证链接有效性，避免404。
-
直接给width/height加transition会触发重排（reflow），导致卡顿，且height:auto无法插值；应改用max-height、transform或opacity等不触发布局的属性实现平滑过渡。
-
正确做法是将图片嵌入相对定位容器，遮罩层同级绝对定位覆盖，仅对图片应用transform:scale()并设初始值，配合overflow:hidden防溢出、display:block去间隙、opacity过渡遮罩，触屏需JS降级处理。
-
additionalData是注入Sass全局变量最稳妥的方式，因其在Vite编译前统一拼接SCSS代码，确保所有样式块（含scoped）都能访问变量且不污染作用域。
-
table-layout:fixed是CSS中控制表格列宽计算方式的属性，它使浏览器仅依据第一行或col元素的宽度声明来确定列宽，从而实现可控的自适应布局。
-
Notification.requestPermission()必须在用户真实手势（如click、keydown）的同步回调中立即调用，禁止在onload、setTimeout等非交互上下文中执行；需先检查Notification.permission状态，仅当为"default"时才可调用，且不可异步延迟。
