background-size控制背景图缩放方式：cover完全覆盖（可能裁剪）、contain全部可见（留白）、100%100%强制拉伸（易变形）、200pxauto定宽自适应；background-attachment决定滚动行为：scroll随内容、fixed相对视口、local随局部滚动；二者组合时参照系易混淆，fixed下cover按视口计算，local+100%100%在可滚动容器中会反复拉伸；优先用scroll+cover，调试启用Paintflashing；IE9+支持background

:empty仅匹配完全无内容（不含空格、换行、注释、子元素）的元素，需配合背景色、尺寸或伪元素实现占位；对“视觉为空”需JS预处理或类名控制，不可依赖其响应动态变化。

弹窗CSS定位核心是遮罩层用fixed全屏覆盖，弹窗主体用fixed+transform居中；需设max-width/max-height防溢出，配合overflow-y:auto、body滚动禁用、焦点管理及动画优化以保障响应性与可访问性。

WebComponents是浏览器原生支持的可复用、封装良好的自定义HTML元素，核心包括customElements、HTMLElement和ShadowDOM；需继承HTMLElement、含短横线命名、调用customElements.define()注册，并用attachShadow隔离样式与事件。

装饰器是JavaScript中用于修改类、方法、访问器或参数行为的语法特性，本质为接收目标对象等参数并返回新定义的函数；目前处于TC39Stage3提案阶段，未正式标准化，但已被TypeScript和Babel广泛支持。

浮动导致点击区域错位的本质原因是元素脱离文档流引发父容器塌陷及后续元素上浮；推荐用display:flow-root修复，次选伪元素clearfix，避免overflow:hidden；现代布局应优先使用flex或grid替代浮动。

1.实现视差滚动的核心方法是使用CSS的background-attachment:fixed属性，通过将背景图固定在视口上，而内容正常滚动，形成视觉深度感。2.具体步骤包括：为容器设置背景图并应用background-attachment:fixed、background-size:cover和background-position:center以确保适配性。3.该方法存在局限，如不支持多层不同速度滚动、移动端兼容性问题、图片加载性能影响以及可能引发用户不适。4.优化措施包括图片压缩与格式选择、使用媒体

<summary>标签必须嵌套在<details>内才有效，作为其首个子元素定义可折叠标题，点击触发展开/收起；单独使用无效，且需注意Safari兼容性及手风琴等复杂交互应改用ARIA方案。

懒加载是HTML5页面刚需，应优先用IntersectionObserver实现，并配loading="lazy"降级；对img/iframe用data-src，广告位需防伪懒加载，禁用自动发现并延迟加载SDK。

:nth-of-type选择器根据元素类型和同类型兄弟位置匹配，n可为数字、even/odd或an+b公式，如p:nth-of-type(2)选中第二个p；与:nth-child不同，它只计同类标签；常用于表格隔行变色tr:nth-of-type(even)、首段加大p:nth-of-type(1)等场景，IE9+支持，n从1开始，需确保目标存在。

将HTML文件保存至手机存储，通过浏览器输入file:///路径或用文件管理器点击打开即可预览；2.安装HTMLViewer等应用可增强解析效果；3.电脑端用Python搭建服务器，手机在同一局域网下通过IP:8000访问，可运行完整网页功能。

HTML5页面输出内容有五种方式：一、console.log用于控制台调试；二、document.write仅适用于加载中；三、innerHTML动态更新指定元素HTML；四、textContent输出纯文本防XSS；五、appendChild动态添加新节点。