-
浮动元素脱离文档流导致父容器高度坍缩，使背景和边框无法正常显示；通过清除浮动或触发BFC可解决此问题；推荐使用伪元素清除法或现代布局如Flexbox、Grid替代传统浮动。
-
Flex布局标签页头部最可控，需设flex容器、防换行、处理min-width；切换内容用visibility:hidden更优；必同步aria-selected和role属性；移动端优先用scroll-snap实现滑动。
-
将HTM文件转换为PPT可通过三种方法实现：一是用PowerPoint直接打开HTM文件，保留基本格式；二是复制网页内容粘贴到幻灯片，适合少量内容；三是使用Zamzar等在线工具转换，操作便捷但需注意隐私。转换前建议简化代码、确保图片路径正确，并在PPT中优化排版与设计，以提升演示效果。
-
谷歌字体必须使用官方生成的完整URL，含css2路径、URL编码的family值及&display=swap参数；禁用file://协议本地打开，应通过HTTP服务调试；font-family需设回退字体且匹配引用名称。
-
csscolor-contrast()通过自动计算背景色与备选色的对比度，选择符合WCAG标准的颜色，确保文本可读性；在响应式设计中实现主题切换时的文本自适应；结合LCH/OKLCH等现代颜色空间，提升视觉一致性与设计自由度，优化无障碍体验。
-
浏览器提示“建议启用HTTPS”是因为页面通过HTTP非加密协议加载，而非HTML代码问题；解决方法是服务器配置TLS证书并设置HTTP到HTTPS的301重定向，而非修改HTML标签。
-
正确写法是grid-template-columns:repeat(auto-fit,minmax(250px,1fr)))，配合img{width:100%;height:auto;}，确保图片等比缩放不拉伸、不溢出，auto-fit自动填满且不留空列。
-
float固定宽度布局仍值得用，因其在后台管理页侧边栏+主内容区等场景下最轻量且IE8+兼容性最佳；需手动处理高度塌陷与响应式降级，推荐伪元素清除浮动，主内容用margin-left避让定宽侧栏而非calc()，IE6兼容需注意zoom:1与空白节点问题。
-
新建index.html文件夹并用LiveServer插件启动本地服务即可，无需项目配置、build工具或launch.json等冗余文件；核心是路径正确和通过http协议访问。
-
Foundation在快速原型开发中通过响应式网格、语义化组件和Sass深度集成，提升开发效率。其XYGrid支持多设备自适应布局，内置可访问性友好的UI组件减少重复编码，Sass变量与模块化结构实现品牌风格一键切换和代码轻量化。相比Bootstrap等框架，Foundation类名更语义化，定制更灵活，尤其适合需高自由度和后期可维护性的项目。尽管存在学习曲线和集成挑战，但通过渐进学习、按需编译、合理组织Sass文件及封装JS插件可有效应对。利用\_settings.scss统一配置、Mixins复用样式
-
playsinline属性用于视频内联播放，避免移动设备自动全屏；添加playsinline和webkit-playsinline可提升兼容性，适用于短视频嵌入等场景，需注意安卓厂商实现差异及autoplay时需静音。
-
window.location.href在非用户直接触发的异步上下文中（如fetch回调、setTimeout）会被浏览器静默拦截，这是防钓鱼策略；必须在用户事件同步路径中执行才安全。
-
alt属性是图片无法显示时替代显示的文本，为视觉障碍用户和搜索引擎提供关键信息；2.它通过帮助搜索引擎理解图片内容、提升页面相关性与用户体验，间接提高网站搜索排名；3.撰写时应做到描述准确、简洁自然，避免关键词堆砌，不以“图片显示”开头；4.缺失或不当的alt文本会损害网站可访问性，违反无障碍法规，降低SEO效果，破坏用户体验和专业形象。
-
JavaScript模块是ES6引入的代码拆分机制，支持import/export语法实现静态依赖管理与作用域隔离，具备严格模式、无全局污染、tree-shaking优化等特性。
-
使用type="password"可创建密码输入框，通过小眼睛图标用JS切换显示隐藏，结合HTTPS、长度限制和确认框提升安全与体验。
