-
用computed实现购物车金额自动汇总，核心是定义totalPrice计算属性，通过reduce遍历cartItems累加price×count，自动响应数据变化并实时更新显示。
-
点击下载证书时浏览器直接打开PDF而非保存是因Content-Disposition响应头缺失或前端未用download属性；纯前端需jsPDF+html2canvas生成，注意跨域图片、中文乱码（须嵌入NotoSansCJK字体）及微信拦截（需降级提示）。
-
:focus-within在Bootstrap表单中失效，因父容器未直接包含可聚焦子元素或结构不合规；应确保label包裹input、或给容器设tabindex="-1"，优先使用v5.3+的.form-floating组件。
-
如何用HTML+CSS+JavaScript实现弹窗？首先，使用HTML构建弹窗结构，包含弹窗容器、内容区域和触发按钮；其次，通过CSS设置隐藏状态、遮罩层和样式布局；最后，利用JavaScript控制显示与隐藏，包括点击按钮打开弹窗、点击关闭按钮或遮罩层隐藏弹窗。此外，可添加防止页面滚动、层级管理和移动端适配等优化细节。
-
HTML本身无法直接放地图标记点，必须依赖外部地图服务的JavaScriptSDK，如Leaflet+OpenStreetMap（适合快速验证）或百度/高德地图（推荐国内上线项目）。
-
HTML源码中的换行与空格被浏览器当作空白字符参与排版，导致浮动元素间出现4px左右间隙；根本原因是inline/inline-block上下文中空白符生效，而非清除浮动失效。
-
本文介绍如何使用现代HTML/CSS/JavaScript构建可拖拽、自动吸附到棋盘格的国际象棋界面，摒弃传统<table>布局，采用语义化<div>结构配合原生drag-and-dropAPI与坐标计算逻辑，实现流畅、可控的棋子移动体验。
-
必须加preload="auto"，因浏览器默认preload="metadata"只加载元数据，导致全屏背景视频首帧延迟渲染；需搭配muted、autoplay、loop、object-fit:cover、playsinline及正确编码格式。
-
id是唯一标识，class是复用标签；id用于锚点、label绑定和高频JS访问，class适用于样式复用、组件化开发及行为解耦，重复id会导致getElementById返回首个匹配元素且难以排查。
-
WebSockets适用于客户端与服务器间的实时文本通信，如聊天室；WebRTC用于点对点音视频通话和低延迟数据传输，需WebSocket辅助信令交换。
-
小屏通知浮窗被截断应通过媒体查询动态调整fixed定位偏移和宽度：在768px及480px断点下调小top/right值，480px下设width:calc(100vw-16px)并显式left:auto，禁用transform替代定位，键盘弹出时需JS配合处理。
-
迭代器是JavaScript中按需逐个获取序列值的统一遍历机制，可迭代对象则需实现[Symbol.iterator]方法；迭代器必须有返回{value,done}对象的next()方法，可迭代对象须通过该方法返回合法迭代器，生成器函数可简化实现。
-
统一表单控件样式需重置appearance、显式定义边框背景内边距，自绘select箭头，用CSS变量暴露主题色等可覆盖属性，配合:focus-visible与键盘测试保障可访问性。
-
JavaScript变量是词法环境中的绑定名称；var具函数作用域、提升且初始化为undefined，let/const具块级作用域、提升但受TDZ限制，访问未初始化会抛ReferenceError，应默认用const、次选let、弃用var。
-
现代事件绑定首选addEventListener，支持多监听器、可移除、语义清晰；避免onclick属性或赋值覆盖；动态元素需事件委托；慎用preventDefault和stopPropagation；移动端可禁用缩放消除click延迟。
