-
单页应用通过HistoryAPI实现无刷新跳转，利用pushState、replaceState修改URL并监听popstate事件响应路由变化，摆脱hash依赖，结合服务端配置处理404和SEO，构建流畅用户体验。
-
外部样式表是独立的.css文件，通过<link>标签在HTML中引用，实现多页面共享样式。它集中管理CSS规则，如字体、颜色和布局，确保网站风格统一。修改时只需更新单个文件，所有关联页面自动同步。优势包括减少代码冗余、提升加载速度（浏览器缓存）、支持结构与表现分离，并便于团队协作。最佳实践为使用相对路径或CDN确保文件可访问。
-
Vue路由无法直接跳转外部链接，必须用原生方式：当前页用window.location.href，新标签页推荐window.open(url,'_blank','noopener,noreferrer')，模板中用标签并添加rel="noopenernoreferrer"。
-
用box-shadow模拟边框能绕过对齐问题，因为box-shadow不参与盒模型计算，不会改变元素宽高、padding或border-box尺寸，可严格保持Grid/Flex布局承诺，且天然兼容border-radius，但不支持虚线、点线及outline行为。
-
index.html无法真正加密，本质是可逆混淆；真正防护需服务端控制内容分发与权限校验，并对外链资源做混淆、路径鉴权及敏感信息剥离。
-
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影响。
