利用CSS布局与伪元素结合可实现复杂视觉效果，1.通过Flex/Grid定位伪元素添加装饰线；2.使用伪元素创建几何图形如三角形、星形作点缀；3.用伪元素叠加渐变遮罩提升图片文字可读性；4.结合hover实现动画效果，如滑入装饰条。

制作产品对比表的核心是清晰展示差异，帮助用户快速决策。HTML5提供了语义化标签和灵活结构，结合CSS样式控制，能高效实现美观实用的对比表格。关键在于合理组织数据、突出重点信息，并确保在不同设备上都有良好体验。使用语义化标签构建基础结构用table搭配、、、等标签明确数据层级。thead包含表头行，通常放产品名称或类别标题th用于列标题和行首描述，自带加粗效果，适合标注参数项tbody放具体产品数据，结构清晰利于维护为每个产品列添加class，方便单独设置样式或响应

视频元素不必用position:fixed，但可靠视差实现普遍依赖它；需配合top:0、宽高设置及父容器100vh高度，移动端需加will-change:transform；scroll事件应结合requestAnimationFrame节流计算位移；video必须设autoplay、muted、loop、playsinline和preload="auto"；禁用transition才能避免晃动；加载状态和移动端兼容性是最大难点。

响应式布局是现代网页开发的基础需求，Bootstrap的栅格系统提供了一套简单高效的方式来实现跨设备适配。通过预定义的类名结构，开发者可以快速搭建出在手机、平板、桌面等不同屏幕尺寸下都能良好显示的页面布局。理解Bootstrap栅格系统的基本结构Bootstrap栅格基于12列设计，支持多种响应断点。每一行（.row）包含最多12列，列通过.col-*类控制宽度。常见的断点前缀包括：col-：超小屏（

position:absolute的top、left和width、height均相对于最近已定位祖先元素的paddingbox计算，无则相对于视口；top/left定位左上角，width/height从此展开，不互相挤压。

答案是通过浏览器开发者工具查看网络请求状态码和响应头字段来判断CSS缓存情况：1.在Network选项卡中，200（fromdisk/memorycache）表示命中强缓存，304表示协商缓存生效；2.检查ResponseHeaders中的Cache-Control、Expires、ETag和Last-Modified字段确认缓存策略；3.通过勾选Disablecache对比加载速度变化验证缓存效果；4.使用强制刷新观察是否仍返回缓存结果。结合这些方法可准确判断CSS文件的缓存状态。

WebSQL不支持XML类型字段，XML仅作TEXT存储且无结构校验；存前需DOMParser+XMLSerializer转义，查后需重新解析；推荐改用JSON、IndexedDB或服务端解析。

主线程卡死的典型表现是按钮点不动、滚动条拖不了、requestAnimationFrame停摆、开发者工具打不开；WebWorkers通过独立线程执行CPU密集型任务并用postMessage通信来规避此问题。

使用:last-child伪类选择器可改变列表最后一项的字体颜色，如li:last-child{color:red;}将最后一个列表项设为红色，适用于ul、ol等结构，需确保li为连续子元素且无其他类型元素插入，支持现代浏览器及IE9+，可通过添加类名精确控制范围，如.my-listli:last-child{color:blue;}。

本地双击打开HTML文件时video标签无法加载本地视频，因浏览器禁用file://协议下的资源加载以保障安全；需通过本地服务器或input文件选择方式解决。

表单控件需统一重置padding、margin和box-sizing；input/textarea要设line-height防文字偏移；select避免padding-right，推荐appearance:none+自绘箭头；checkbox/radio应vertical-align:middle且margin作用于label。

JIT编译是运行时将热点代码转为优化机器码的技术：先解释执行，再监控标记热点，接着编译优化，最后去优化保障正确性；它通过消除重复解析、利用运行时类型信息、函数内联、内存直接寻址等提升性能。

使用link标签的type属性可显式声明样式表MIME类型，提升代码清晰度与兼容性；2.基本语法为<linkrel="stylesheet"href="styles.css"type="text/css">，其中type="text/css"明确指定CSS文件类型；3.尽管HTML5中type属性可省略，浏览器默认按text/css处理，但在旧版浏览器兼容、代码规范性和特殊场景下建议保留；4.实际开发中仅广泛支持text/css，其他

JavaScript作用域是变量和函数可访问的范围，分为全局、函数和块级三种；全局变量在脚本顶层声明，函数作用域由var定义，块级作用域由let/const在{}中定义；作用域链支持内层访问外层变量。

overflow:hidden直接裁剪内容且不显示滚动条，适用于装饰性溢出；overflow:auto仅在溢出时显示滚动条，overflow:scroll始终强制显示；Flex/Grid中需配合min-width:0等防止容器被拉伸导致overflow失效。