-
border是结构边框影响布局，outline是视觉标记不占空间；前者支持圆角并用于稳定UI，后者常用于聚焦提示与临时高亮，且始终为矩形。
-
确保HTML在智能电视上的兼容性可以通过以下步骤实现：1)优化HTML和JavaScript代码以适应智能电视的硬件限制，简化DOM结构和减少JavaScript使用；2)使用简单的CSS样式，避免复杂的动画和过渡效果；3)批量处理DOM操作以提升性能；4)针对触摸屏和遥控器优化事件处理，使用touchstart、touchend和keydown事件；5)解决兼容性问题，如使用setTimeout替代requestAnimationFrame；6)实施懒加载技术优化图像和视频加载；7)遵循最佳实践，确保代
-
:first-of-type才是定位首段的可靠选择，它按元素类型计数，无视其他兄弟节点，兼容IE9+，语义清晰且不易受空白文本、注释或隐藏元素干扰。
-
HTML5离线存储通过manifest文件实现，列出需缓存的资源，配合HTML的manifest属性和服务器MIME配置，使页面在无网时仍可访问，尽管现已被ServiceWorker取代。
-
应使用flex:1+min-width实现等宽按钮，配合gap和box-sizing:border-box；文字超长时按需选择white-space:normal、nowrap或clamp()处理，IE11需补-ms-flex前缀及兼容写法。
-
display:none的工具类不能做淡入淡出，因为它会让元素脱离文档流并立即销毁渲染节点，导致transition中断；正确做法是用opacity+pointer-events组合实现可动画隐藏。
-
HTML提供ul、ol、li标签创建列表，CSS通过list-style-type、background-image等属性自定义样式，结合margin、padding、hover等优化布局与交互，提升内容可读性与视觉效果。
-
JavaScript中没有原生SocketAPI，实际使用的是WebSocket；它基于TCP、双向实时通信，与HTTP的请求响应模式有本质区别，需用ws://或wss://协议创建连接。
-
在Vue3CompositionAPI中，使用ref()创建的响应式变量不能直接重新赋值（如variant=ref(newVal)），而必须通过variant.value=newVal更新其内部值，否则响应式连接将丢失，模板和逻辑中无法感知变化。
-
grid-area仅改变视觉顺序，不改变DOM顺序。它通过命名区域、定义模板、分配元素三步实现布局重构，但屏幕阅读器和Tab导航仍按HTML原序处理；拼写错误、模板缺失、未设display:grid等会导致失效。
-
使用slice和reduce或for循环可求数组i到j间元素和，前者代码简洁，后者性能更优。例如sumRange([1,2,3,4,5],1,3)返回9。
-
border-radius属性用于设置元素边框的圆角效果，通过指定半径使盒子四个角变圆润，支持单值统一设置或多个值分别控制每个角，还可单独定义各角属性；当值为50%时可创建圆形或椭圆，常用于按钮、卡片、头像等UI设计；该属性同时影响背景、边框、阴影及子元素溢出裁剪，合理运用可提升界面亲和力与视觉美观。
-
CSS布局应先掌握display、position和文档流：display的block/inline/inline-block决定元素占行与尺寸行为；position的static/relative/absolute/fixed控制是否脱离文档流；float需处理父容器塌陷；Flex/Grid是进阶方案，非起点。
-
可使用CSS的position:fixed实现元素始终悬浮于视口特定位置，需配合top/right/bottom/left定位、z-index提升层级，并通过padding预留空间防遮挡；移动端需添加viewportmeta和transform:translateZ(0)优化；动态控制可用scroll事件+节流；兼容性不足时可用position:sticky替代。
-
Flex子元素垂直居中失效主因是父容器非flex布局或高度未明确；需确保父容器display:flex、有可计算高度，并正确设置align-items:center（配合flex-direction:row）及justify-content:center实现完全居中。
