-
答案：使用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无闪屏且兼容主流现代浏览器。
-
hover:-translate-y-1需显式加transition-transform才生效，否则无动画；推荐组合transition-transformduration-300ease-out；阴影应自定义分层控制，避免shadow-xl发灰；布局错位时优先用scale或top替代translate；移动端须用focus-within或active降级。
-
<search>标签不是有效HTML标签，未被HTMLLivingStandard采纳，浏览器视其为未知元素；正确写法是<form>包裹<inputtype="search">并配<label>，语义化且兼容无障碍与搜索引擎。
-
flex:none等价于flex:00auto，表示不放大、不缩小、基准尺寸按内容或宽高计算，并非脱离Flex布局，仍保留对齐与顺序控制能力。
-
移动端优先需HTML核心信息前置+flexorder重排视觉顺序，禁用display:none避免影响可访问性与SEO，通过纯HTML结构验证、屏幕阅读器测试及Lighthouse审计确保实效。
-
-webkit-box-reflect仅限WebKit/Blink浏览器支持，非标准实验属性；语法为-webkit-box-reflect:below10px；需作用于有内容的块级元素，禁用overflow:hidden及触发层叠上下文的父样式。
-
给表单添加标题有两个方法：1.使用<legend>标签配合<fieldset>，适合包裹一组控件并加说明文字，语义清晰且对屏幕阅读器友好；2.直接使用<h1>到<h6>普通标题标签，更常见且易控制样式，适合大多数网页场景。同时要注意标题层级应符合页面结构，保持简洁易读，避免与网页标题混淆，确保表单标题作为页面的一部分用合适的标题级别区分，从而提升易用性和条理性。
-
在HBuilder中开发HTML5Plus应用需启用5+App支持、监听plusready事件后调用plus.barcode.scan扫码、plus.camera.captureImage拍照、plus.gallery.pick选图，所有API仅在真机或5+App环境中生效。
-
纯CSS无法实现真正鼠标跟随，必须用JavaScript监听mousemove事件获取坐标，结合transform平滑移动元素，并推荐使用requestAnimationFrame优化性能。
-
最轻量可控的图片暗角方案是用绝对定位::before伪元素叠加radial-gradient，需父容器设position:relative，伪元素设inset:0和pointer-events:none，并用150%–200%渐变半径适配缩放。
