底部导航必须用包裹，因其是HTML5语义化标签，浏览器、读屏器和搜索引擎依赖它识别导航区；用会导致可访问性失效、Tab顺序错乱、SEO权重下降。

底部导航必须用

包裹，不是可选项

浏览器、读屏器、搜索引擎靠

识别“这是导航区”，写成

看起来一样，但键盘 Tab 顺序可能错乱，辅助技术直接忽略整个区域。常见错误包括把版权信息、联系方式塞进同一个

——它们属于页脚（

），语义混杂会导致读屏器播报混乱。

display: flex 是当前最稳的横向布局方案

老式 float: left 或 display: inline-block 在小屏下极易崩：换行空格产生间隙、父容器高度塌陷、点击区域错位。Flex 布局现代浏览器全覆盖（IE11 除外），一行代码就能对齐、等宽、居中。

• 用 gap 控制项间距，比给每个 加 margin-right 干净得多，也避免“最后一个要不要清 margin”的纠结
• 别在
  上设 white-space: nowrap——小屏会强制横向滚动；改用 flex-wrap: wrap + 媒体查询自然折行
• 移动端若需图标+文字垂直堆叠，给 .item 设 flex-direction: column，再用 align-items: center

当前页高亮必须靠 JS 动态判断路径

HTML 本身无法感知“我现在在哪一页”，硬编码 class="active" 到所有页面里是典型维护噩梦。路径匹配稍有偏差（比如 /about vs /about/ 或哈希路由 #!/projects）就会失效。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 前端简单判断逻辑（建议放

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！