-
通过CSSMediaQuery的orientation属性区分横竖屏，结合viewport元标签实现响应式布局，竖屏时适配窄屏样式，横屏时利用宽屏空间优化展示，提升移动端用户体验。
-
CSS动画事件不触发的主因是动画未真实启动或被浏览器优化跳过；需确保有可感知的样式变化、提前绑定兼容性事件监听器、检查动画运行状态并兜底延时回调，同时避免重复绑定导致内存泄漏。
-
第一个HTML文件可用记事本编写，关键要保存为UTF-8无BOM编码、扩展名.html且保存类型选“所有文件”；标准结构需含<!DOCTYPEhtml>、<htmllang="zh-CN">、<metacharset="UTF-8">、<title>和<body>等标签。
-
声明<!DOCTYPEhtml>的核心作用是告诉浏览器以标准模式解析页面，避免进入怪异模式；2.它确保HTML、CSS和JavaScript按统一标准渲染，保障跨浏览器一致性；3.HTML5的DOCTYPE简化为仅一行，不再依赖DTD，提升解析效率；4.不声明或错误声明会导致盒模型异常、布局错乱、CSS和JavaScript行为不一致；5.DOCTYPE虽不直接验证语法，但为HTML验证和可访问性提供基础，确保辅助技术正确解析页面结构，最终实现稳定、可预测、可访问的网页呈现。
-
HTMLselect多选必须添加multiple属性，否则即使按Ctrl/Cmd也仅单选；获取多选值须用selectedOptions而非value；表单提交需name加[]后缀，否则后端仅收最后一个值。
-
首先确认浏览器是否启用JavaScript并使用最新版Chrome或Firefox打开本地HTML文件，若仍无效则检查文件路径、权限设置或尝试通过WebView组件加载页面以确保脚本正常运行。
-
非核心CSS放body底部仍会阻塞渲染，因其被HTML解析器发现即触发下载与CSSOM构建；应通过preload+onload、media切换等方式延迟加载，而非仅调整位置。
-
直接修改<linkrel="stylesheet">的href属性即可生效，浏览器会自动加载并应用新样式；需防缓存（加时间戳参数）、确保路径有效、避免跨域问题，并优先用disabled切换而非增删DOM。
-
HTML文件的charset声明必须与实际保存编码一致，否则注释中中文会乱码；应统一使用UTF-8withoutBOM保存，<metacharset>须置于<head>最开头，且HTTP头与HTML声明需一致。
-
float元素导致父容器高度塌陷，因脱离文档流；推荐用overflow:hidden或display:flow-root触发BFC解决，避免clear:both冗余标签；现代布局应优先使用flex/grid而非float。
-
opacity会使子元素一同变透明，因其作用于整个渲染层；而rgba()仅影响指定颜色属性，不波及后代元素。
-
overflow:auto仅在内容真正溢出限定高度的容器时显示滚动条；需设置height/max-height，避免absolute定位或flex-shrink:0导致计算失效，且需配合white-space、word-break等处理文本溢出。
-
图片容器必须设为position:relative，否则absolute遮罩层会脱离预期位置；遮罩层应使用rgba()设置背景透明度以避免文字发虚；尺寸需设为top:0;left:0;width:100%;height:100%或inset:0确保铺满；图片用display:block和object-fit:cover优化显示。
-
答案是打开浏览器即可运行HTML页面。1.编写index.html文件并保存；2.双击文件或右键用浏览器打开，确保扩展名为.html；3.可拖拽文件到浏览器预览；4.进阶使用本地服务器如LiveServer或Python命令运行，日常测试双击足够。
-
ID选择器只能匹配第一个同名元素，其余被静默忽略；CSS和getElementById均只作用于首个匹配项，重复ID会导致样式失效、JS不可达及SSR报错等问题。
