面包屑：一个 div 套 ol 的故事
一段“合法但不合法”的代码
caogenbj 的 single.php 里，面包屑是这样写的：
<ol class="breadcrumb">
<?php lingfeng_breadcrumbs(); ?>
</ol>而 lingfeng_breadcrumbs() 输出的是：
<div class="breadcrumbs">
<a href="/">网站首页</a> »
<a href="/category/xxx">分类</a> »
<span>文章标题</span>
</div>把 <div> 塞进 <ol> 里——这是非法的 HTML 嵌套。<ol> 里只能放 <li>。
为什么浏览器不报错
浏览器会“自动纠错”。它看到 <ol> 里出现 <div>，会把 div 挪到 ol 外面（或者忽略 ol），页面看起来“正常”。
但“看起来正常”不等于“真的正确”。后果有两个：
- HTML 不合法：W3C 校验过不了，某些浏览器/设备可能显示异常；
- SEO 有风险：搜索引擎解析 HTML 时，结构混乱可能影响内容理解。虽然影响不大，但没必要留这个坑。
修复：把 ol 改成 div
既然面包屑函数输出的是 div，外面的容器也应该是 div：
<div class="breadcrumb">
<?php lingfeng_breadcrumbs(); ?>
</div>就这么一改，嵌套就合法了。
为什么视觉上没变化
你可能会担心：“.breadcrumb 这个 class 是 Bootstrap 给 <ol> 写的样式，换成 div 会不会变样？”
不会。因为 Bootstrap 的规则是 .breadcrumb（类选择器），不限定标签。它不管你是 ol 还是 div，只要 class 里有 breadcrumb，就套用同样的背景、内边距、圆角。
真正依赖 <li> 的那几条规则（列表符、/ 分隔符），本来就没生效——因为函数输出的是 <a> 和 <span>，里面根本没有 <li>。
你看到的分隔符 »，是函数自己 echo 的文本，跟标签无关。
所以换标签，视觉零变化，只是 HTML 合法了。
一个判断方法
以后看到类似问题，问自己两个问题：
- 这个容器的父级，允许放哪些标签？（
<ol>只允许<li>，<ul>也只允许<li>） - 里面实际放的是什么？（如果是 div，就说明父级选错了）
两个答案对不上，就是非法嵌套。
小结
一句话记住：ol/ul 里只能放 li；面包屑函数输出 div，外面就别用 ol 包，用 div 包。
下一篇讲文章页里那些“小零件”：分类、标签、作者、日期怎么输出。
本系列导航
相关文章
搜索文章：
联系方式：
近期文章