-
ChromeDevToolsLayout面板直观展示元素content（蓝）、padding（绿）、border（橙）、margin（灰）的实际渲染尺寸，悬停可查看数值，但不显示outline和box-shadow等视觉干扰项。
-
选择合适的在线HTML编辑器如CodePen、JSFiddle、StackBlitz等，开启实时预览与分屏模式，结合浏览器开发者工具调试DOM、CSS及JavaScript错误，并通过小技巧提升效率，可实现高效便捷的在线开发与学习。
-
本文介绍使用现代JavaScript和CSS实现点击按钮切换内容块显隐状态的标准方法，避免动态创建DOM元素带来的逻辑缺陷，提升代码可维护性与性能。
-
max-width是响应式设计中防止元素过度拉伸的基础手段，支持px、%、ch等单位；常与width、margin搭配实现居中定宽，适用于图片自适应（max-width:100%;height:auto），但需慎用于Flex/Grid项以免干扰弹性布局。
-
HTML5是当前事实标准，XHTML已基本退出日常开发；HTML5只需<!DOCTYPEhtml>，XHTML需完整DTD和xmlns声明，且严格遵循XML规则，但因浏览器支持有限及生态转向HTML5+JSON，XHTML仅适用于需XML解析的特定场景。
-
装饰器是用于修改类或类成员定义的函数，属Stage3提案，需Babel/TS启用；接收target、name、descriptor等参数，在类定义时执行，支持类、方法、访问器及（TS扩展）属性装饰，常用于日志、权限、自动绑定this等横切逻辑，但浏览器原生不支持，依赖构建配置且多装饰器间需注意执行与覆盖顺序。
-
CSS文字对齐不准主因是line-height与top作用机制混淆：line-height控制行框内单行文字居中，需容器高度≥font-size×1.2；top仅整体偏移元素，受字体基线、margin等影响；精准方案为line-height=容器高后用top微调或改用flex/grid。
-
HTML5不是可安装软件，所谓“安装后变慢”实为误装插件、启用实验功能或混淆播放器库所致；真实原因包括JS库冗余加载、恶意扩展注入、非标准source类型触发fallback及preload设置不当。
-
原生HTML不支持模块化，可通过JavaScript动态加载、服务器端包含（SSI）、构建工具或服务端语言实现复用。1.JavaScript使用fetch将header/footer.html插入页面；2.SSI在.shtml文件中通过<!--#includefile="header.html"-->嵌入内容；3.构建工具如Vite或Webpack配合插件预处理<includesrc="header.html">标签；4.PHP等后端语言用&
-
应显式声明需过渡的属性而非使用transition:all；用class切换替代内联样式修改；避免对不支持过渡的属性（如display）直接设动画；按属性特性差异化设置duration与timing-function。
-
安装LiveSassCompiler扩展后，配置settings.json指定输出路径为/css并设置编译格式，打开.scss文件点击底部WatchSass按钮即可实现实时编译，保存时自动生成CSS和sourcemap文件。
-
::before伪元素必须配合content属性使用，否则不渲染；content可为空字符串或Unicode转义字符；需显式设置display以控制布局；其内容不可被屏幕阅读器识别，关键语义应使用真实HTML元素。
-
可选链操作符（?.）用于安全访问嵌套属性，遇null/undefined返回undefined而不报错；支持属性访问、数组索引、函数调用和动态属性；常与??搭配提供默认值；不可用于赋值或delete等语句。
-
用开发者工具定位样式覆盖源头：先看Styles面板中被划掉的规则及对应文件行号，注意“匹配的CSS规则”列表顺序，最下方为生效样式；检查!important、内联样式、第三方库高特异性选择器；按(a,b,c,d)四元组算权重，避免盲目堆砌选择器；优先使用CSSModules或scoped隔离样式；动态样式需查Computed面板或ShadowDOM。
-
使用Flexbox布局结合伪元素实现导航栏下划线动画：1.用display:flex排列导航项；2.通过::after创建隐藏下划线，hover时width从0放大至100%；3.可选居中对齐或中间展开动画，关键在于定位与过渡控制。
