-
首先安装gulp及gulp-webserver插件，初始化项目后创建gulpfile.js配置文件。接着定义'serve'任务启动本地服务器并设置自动打开浏览器，通过gulp.src指定HTML文件目录，如根目录或src。配置端口和open参数确保浏览器自动访问http://localhost:8080。然后添加默认任务，运行gulp命令即可启动服务。最后使用gulp.watch监听HTML文件变化，结合browser-sync实现保存后浏览器自动刷新，实现实时预览功能。
-
TreeShaking是构建时基于ES模块静态结构移除未使用导出的优化技术，依赖具名导入、字面量导出和无副作用声明，并需正确配置构建工具。
-
::first-letter失效主因是DOM或CSS环境不合规，如父元素display:flex/grid、首字符被内联标签包裹、HTML前有空白或注释；实现下沉需float:left、line-height:0.75、font-size≥2.5em协同。
-
ShadowDOM中<link>无效因样式隔离机制阻断外部CSS注入；唯一合法通道是adoptedStyleSheets，需用CSSStyleSheet对象加载后显式挂载。
-
应使用document.addEventListener('DOMContentLoaded',...)，因其在HTML解析完成、DOM树建好后立即触发，不依赖CSS、图片等资源加载；而onload仅适用于body、img等少数元素，且需等待所有资源加载完毕，易导致延迟或失效。
-
object-fit是什么，为什么不能用background-image替代它控制的是或这类替换元素（replacedelement）在容器内如何缩放和裁剪，不是背景图的填充逻辑。background-image的background-size看似功能重叠，但语义和渲染行为完全不同：前者影响内容流、支持宽高比保持、能响应父容器尺寸变化；后者只是装饰层，不参与文档流，也不触发img的加载/错误事件。常见错误现象：拉伸变形、上下留白、被父容器裁掉一半却没反应——本质是默认ob
-
footer是语义化标签，表示内容结尾信息区，必须闭合且位置决定语义范围；联系信息须用address包裹，页脚导航需嵌套带aria-label的nav；视觉贴底需CSS实现，语义正确性优先于视觉位置。
-
CSS自定义属性是主题切换最轻量灵活的方式，通过:root定义变量、data-theme控制切换、localStorage持久化，并需确保回退值、作用域和层叠顺序正确。
-
答案：border-radius通过调整圆角大小、使用百分比适配形状、结合交互反馈和考虑可访问性，提升按钮美观与用户体验。
-
MathJax是当前最稳妥的HTML5数学公式嵌入方案，通过JavaScript自动适配浏览器能力并回退渲染，需正确引入脚本、标记公式及动态触发typeset。
-
纯HTML无法控制智能设备，因其无硬件访问、网络请求及后台逻辑能力；实际依赖JavaScript调用API（如fetch）向设备网关发指令，且须运行在支持CORS的服务器环境（如localhost:3000），file://协议下直接打开必然失败。
-
OG标签不生效主因是og:url与分享链接不一致或og:image不可访问，而非字段遗漏；需确保og:url为HTTPS绝对路径且完全匹配、og:image返回200且允许爬虫访问，并通过平台调试工具验证原始HTML。
-
Canvas动画流畅的核心是精准控制绘制时机与工作量，需用requestAnimationFrame配合deltatime计算、对象复用、高DPI适配及避免隐式开销。
-
相邻兄弟选择器通过“+”连接，仅对紧接在另一同级元素后的元素生效。例如h2+p会选中紧跟h2的首个p元素并应用样式，适用于标题后首段样式、表单提示高亮及结合:checked实现折叠面板等场景，要求两元素同父且相邻，不支持向前选择，兼容IE7及以上浏览器。
-
place-content不能居中模态框，因其仅控制多行/列轨道组在容器内的对齐；模态框通常单子项且无显式多轨，故无效；应改用place-items:center（父设display:grid）或position:fixed+transform降级。
