-
flex-basis:0强制初始尺寸为0，空间全由flex-grow分配，适用于严格等分；flex-basis:auto则先按内容或width确定初始尺寸，再分配剩余空间。
-
toLowerCase()搜索匹配需同时转换用户输入和目标字符串，仅转一边会导致漏匹配；ASCII场景有效，但土耳其语等locale下会出错，推荐用/i正则或toLocaleLowerCase('en-US')。
-
使用伪类:after清除浮动可解决父容器高度塌陷问题。通过为.clearfix:after设置content:""、display:block和clear:both等样式，生成虚拟节点闭合浮动，无需添加额外HTML标签，配合*zoom:1兼容IE，适用于多栏布局、文字环绕等场景。
-
要运行HTML代码需确保其被正确解析，最直接方法是将代码保存为.html文件后用浏览器打开；也可通过JavaScript操作DOM动态插入HTML内容；还可利用PHP、Python等服务器端语言输出HTML响应，由浏览器解析；此外，使用JSFiddle、CodePen等在线平台可实现实时预览与调试，便于快速测试和开发。
-
浏览器无法真正导出可运行的HTML5文件，只能保存静态HTML快照；要离线运行需用开发者工具复制完整DOM、手动处理资源路径，并通过本地服务器（如http-server）而非双击打开。
-
浮动导致父容器高度塌陷，border-radius看似失效实为渲染区域缺失；清除浮动推荐::after伪元素（content:"";display:table;clear:both）；现代布局应优先使用Flex/Grid替代浮动。
-
可选链操作符（?.）解决深层嵌套属性访问时因null/undefined导致的运行时错误问题，通过自动短路返回undefined，避免层层判空；支持属性访问、方法调用、数组索引，并常与??配合提供精准默认值。
-
X-UA-Compatible已完全失效，仅对IE8–IE11有效，现代浏览器及Edge均忽略；IE11停更后该标签被弃用，正确设置需放<head>最前或通过HTTP头发送，真正兼容难点在于CSS、JS等底层特性支持。
-
在HTML中添加TwitterCards需在head中设置meta标签，包括card类型、site账号、title、description和image等信息，并通过TwitterCardValidator验证效果。
-
vertical-align用于控制inline或inline-block元素的垂直对齐，常见取值有baseline、top、middle等，适用于图片与文本对齐、表单布局等场景，需注意其仅对行内元素有效且受line-height影响。
-
BEM能防CSS类名冲突，因其通过块-元素-修饰符三段式命名（如.header__title--large）实现天然隔离；需配合ESLint、Stylelint等工具强制约束，禁用后代选择器与ID/标签选择器，并匹配严格正则；与CSS-in-JS、ShadowDOM不冲突，可共存互补；超小项目或动态样式场景则不宜硬套。
-
flex-grow:1在flex-wrap:wrap下无法实现跨行等高，仅在同一行内按比例拉伸；真正起效的是align-items:stretch，但需父容器有交叉轴尺寸参照且卡片内部不破坏高度继承链。
-
表单自动填充应按语义开启，密码类等特殊字段必须关闭；autocomplete="off"常失效，应改用语义化值如new-password、tel、cc-number等，并确保前后端语义一致。
-
HTML5不提供音频元数据加密能力，真正防护需服务端策略与前端限制结合：避免明文嵌入敏感信息、动态注入脱敏元数据、剥离ID3标签；MediaMetadata仅用于显示，非加密机制；高安全需求应采用DRM或流式混淆方案。
-
正确插入网络图片需用完整URL（含https://协议），避免混合内容、缺失alt属性及CORS限制；外链图片存在失效风险，关键内容不宜依赖。
