-
答案：使用CSSFlex布局可高效构建导航栏，通过display:flex设置容器实现水平排列，justify-content与align-items控制对齐，gap设定间距；结合:hover伪类添加背景色变化和transition动画提升交互体验；支持多种对齐方式如flex-start、space-between等；利用媒体查询在小屏幕下切换为flex-direction:column实现响应式垂直布局，确保美观与实用性。
-
rel="preload"用于高优先级预加载关键资源，需指定as属性和crossorigin（字体必需），仅限阻塞关键路径的资源；搭配font-display:optional可避免FOIT/FOUT，JS模块需配合import或type="module"使用。
-
虚拟键盘本质是HTML按钮集合，通过JavaScript绑定目标input的DOM引用，用setRangeText()精准控制光标位置与输入，避免value拼接导致事件丢失或光标错乱。
-
在AndroidStudio中运行HTML文件需将其放入assets目录，并通过WebView加载。首先创建assets文件夹并放入HTML文件，然后在布局中添加WebView组件，接着在Activity中启用JavaScript并使用loadUrl加载本地HTML文件，若HTML涉及网络请求还需在AndroidManifest.xml中添加互联网权限，最后运行项目即可在设备或模拟器中显示页面内容。此方法适用于基于WebView的混合开发场景。
-
<address>标签仅用于标识当前文档或文章作者的联系信息，如博客文末邮箱；不可用于“联系我们”页面客服电话、商品发货地等场景，否则违反HTML5语义规范并损害可访问性。
-
@media(prefers-color-scheme)可原生响应系统深色/浅色偏好，仅需在CSS中声明:root默认值与dark媒体查询覆盖，避免重复定义、硬编码颜色及JS混用，确保SSR无闪屏且兼容主流现代浏览器。
-
auto-fit会收缩空列并将剩余空间分配给有内容的列，auto-fill则保留所有列槽位；二者必须配合minmax()使用才能响应式布局。
-
HTML计算器是轻量级在线工具的前端实现，适合客户端即时运算，但需后端支持历史记录、分享链接等功能；其可用性取决于精度处理、错误防护与响应式设计等细节。
-
2026年前端架构师晋升核心是决策颗粒度与可验证性：需将技术选型转化为可度量业务结果，以连接层能力复盘，绑定三年演进预案完成度，并构建人机校验闭环及反事实推演。
-
Safari10.1完全不支持nomodule属性，将其视为无意义自定义属性，既不识别也不据此跳过脚本；type="module"标签被直接忽略，而nomodule脚本按普通script执行，导致降级行为不可控，需服务端UA判断或探测脚本兜底。
-
Tailwind默认不支持::first-letter，需在tailwind.config.js中通过addComponents手动注入规则；中文首字下沉需预处理HTML、指定带hinting的字体，并用clamp()实现响应式控制。
-
使用CSS可实现网页滚动条透明化，提升视觉美观度。通过::-webkit-scrollbar、::-webkit-scrollbar-thumb和::-webkit-scrollbar-track设置Webkit浏览器滚动条透明样式，结合scrollbar-width和scrollbar-color适配Firefox，实现跨浏览器兼容的透明滚动条效果。
-
image-rendering:pixelated仅在放大时生效，缩小则退化为auto；应改用crisp-edges实现放大和缩小均禁用插值，确保像素图边缘锐利。
-
data-*属性能存数据但不私有，仅适合公开辅助信息；dataset自动驼峰转换且值恒为字符串，getAttribute返回原始字符串；敏感或复杂数据应存JS变量或Map而非DOM。
-
lang属性必须写在<html>标签上且只能出现一次，如<htmllang="zh-CN">；zh-CN最通用，zh-Hans强调简体字适用多地区，禁用单独的zh；多语言页面通过子元素lang属性局部覆盖。
