-
纯HTML页面无法实现百度热榜，因其无网络请求能力；需Node.js代理中转绕过反爬与跨域限制，并处理数据嵌套、HTML实体解码及PC/移动端接口差异。
-
逻辑运算符短路是指JavaScript中||和&&在确定结果后停止执行后续表达式。||返回第一个真值，常用于设置默认值；&&返回第一个假值，可用于安全访问对象属性或条件执行函数，提升代码简洁性与安全性。
-
[attr]选择器仅匹配声明了指定属性的HTML元素，无论属性值是否存在或是否为空；它不检查值内容，与[attr=""]（要求值为空字符串）有本质区别，且属性名在HTML中不区分大小写，但建议统一用小写以保证兼容性和可维护性。
-
::after伪元素通过content属性在元素后插入装饰性内容，常用于添加图标、动画下划线、气泡三角等视觉效果，提升页面美观与可维护性。
-
SSE基于HTTP实现服务端向浏览器的单向实时推送，使用EventSourceAPI建立连接，服务端以text/event-stream格式持续发送数据，支持自动重连与自定义事件，适合通知类低频实时场景。
-
推荐将HTML结构与JS逻辑分离：index.html仅保留结构和挂载点，main.js单独编写并用script标签引入；务必通过LiveServer启动，确保DOM加载完成后再绑定事件，优先使用addEventListener而非内联onclick。
-
本文介绍因HTML结构不当导致的图像悬停抖动及热点区域（area）偏移问题，通过移除冗余换行符、统一容器布局与优化交互逻辑，彻底解决地图切换时的位置跳变与“hitbox”失效问题。
-
为什么BEM能减少样式冲突BEM（Block-Element-Modifier）不是魔法，它靠命名规则强行切断CSS选择器的隐式依赖。传统写法里.header.nava这种嵌套选择器，一旦组件挪位置、父级加类、甚至只是引入第三方UI库，就可能意外覆盖或被覆盖。BEM强制每个类名自包含：header__nav、header__nav-link、header__nav-link--active——没有层级假设，不依赖DOM结构，自然不怕嵌套变动或第三方干扰。怎么写才算合规的BEM类名三个部分必须严
-
transform-origin的默认值是50%50%，即元素盒模型的几何中心；若元素存在padding、border、裁剪或定位偏移，视觉中心与几何中心不一致，会导致旋转“歪了”。
-
:has()伪类仅在Chrome105+默认可用，Firefox需手动启用标志，Safari完全不支持，仅适用于渐进增强；它不支持伪元素、动态伪类及深层嵌套，权重遵循常规层叠规则，调试时需关注DevTools中的无效提示。
-
grid-row和grid-column未生效的主因是父容器未设display:grid或布局属性干扰；需检查线号范围、避免与grid-area混用，并注意DOM顺序与可访问性问题。
-
<mark>标签本身性能开销极小，真正影响首屏速度的是不当CSS样式、大规模无节制渲染及客户端动态插入等误用行为。
-
元素拖拽时突然跳到页面右侧，通常是因为错误地将视口坐标直接赋值给left/top样式，而未考虑定位上下文（如父容器的position:relative）和单位基准；解决关键是使用相对于父容器的偏移量，并将被拖元素设为position:absolute。
-
<link>引入外部CSS必须写在<head>中，rel="stylesheet"和href缺一不可；href路径需正确（相对路径以HTML文件位置为基准，根目录路径加斜杠），且服务器需返回text/cssMIME类型、CSS语法无误、缓存已更新。
-
采用一体化项目结构，将前端frontend与后端backend整合于同一根目录，通过配置构建工具输出前端资源至backend/src/main/resources/static，实现静态文件自动集成；后端使用@RestController提供/api/v1/前缀的RESTful接口，配合CORS允许前端域名访问；开发阶段前端利用Vite等工具的代理功能将/api请求转发至后端8080端口，兼顾热重载与跨域解决；前后端分离运行、统一接口规范、自动化构建部署，提升协作效率与项目可维护性。
