靠谱人生茶话会 » 讨论
原来BBCode不止指南里那几种啊

[align=left]左对齐[/align]

[align=center]居中[/align]

[align=right]右对齐[/align]



[left]left-aligned[/left]

[center]center-aligned[/center]

[right]right-aligned[/right]

一些内容

[float=left]左侧

左侧

左侧[/float]

[float=right]右侧

右侧

右侧[/float]

另一些内容

[float=left]!!左侧

!!左侧[/float]

[email][email protected][/email]

[[email protected]]给我来信[/email]

[list][*]列表项目A

[*]列表项目B

[*]列表项目C[/list]

=== 具体的解释 ===

举例:

[*]列表项目A

[*]列表项目B

[*]列表项目C

文本XXX

[*]列表项目D

[*]列表项目E

[*]列表项目F

文本YYY

这看起来是由 文本XXX 分隔的2个列表, 而 文本YYY 是第二个列表结束后的文本内容.

但技术上讲, 这是一个包含6项的列表. (其实更严格地说, 这东西不能算列表..因为缺了外层的list标签)

其中

第1项的内容是 "列表项目A<换行>"

第2项的内容是 "列表项目B<换行>"

第3项的内容是 "列表项目C<换行>文本XXX<换行>"

第4项的内容是 "列表项目D<换行>"

第5项的内容是 "列表项目E<换行>"

第6项的内容是 "列表项目F<换行>文本YYY<换行>"

这是因为没有list标签就没法标记列表的首尾, 计算机就一股脑把后文的内容都当成列表末项的一部分了..

如果写上[list], 变成

[list][*]列表项目A

[*]列表项目B

[*]列表项目C[/list]

文本XXX

[list][*]列表项目D

[*]列表项目E

[*]列表项目F[/list]

文本YYY

那么计算机才会正确识别这两个列表.

更详细的内容可以看这个链接: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/li

里面给出了一个简单的例子

<ul>

    <li>first item</li>

    <li>second item</li>

    <li>third item</li>

</ul>

可以看到ul和li都像括号一样..

其实这里的 <ul> 就相当于 [list], <li> 就相当于 [*].

注意文档里提到：<li> 元素【必须包含在一个父元素里】(无序列表标签<ul>是其中一种父元素)

所以只写[*]不写[list]是错的！只是浏览器必须处理各种情况, 所以它想办法渲染出了这种错误的写法..

虽然这么写目前不会影响阅读, 但势必会造成潜在的问题..比如渲染错误, 或者导致某些代码无法正常工作..(实际上我写的折叠组件 /dev/app/1086 就受到了影响. 我之前还遇到过2楼被挪到1楼右侧去的情况, 虽然我不记得怎么复现了..)



不加list能看到效果是因为浏览器默认的排版效果会在<li>标签前面加个黑点,

那么加了list反而看不到效果的原因是什么?

这是因为bangumi的顶部菜单有好多都是列表(比如 "动画" 菜单下的 "排行榜" "每日放送" 等)..

如果使用浏览器默认的排版效果的话 那每个菜单项前面都会有个黑点, 太丑了..所以当年做排版时这些列表样式都特意被去掉了..

换句话说, 套用bangumi的排版样式的话, 列表项理应不显示前面的黑点.

然而当年程序员偷懒了, 没考虑到BBcode, 只要是列表就一视同仁,

结果加了首尾的list得到正确的列表格式后, bangumi的样式生效, 反而不会显示列表符号 (前面的黑点)

而不加list的错误格式 却导致bangumi的样式没有生效, 于是浏览器采用了默认样式, 反而显示了列表符号..

其实按理来说, 不加list就不该显示列表符号, 因为这是错误的写法. 加了list才应该显示列表符号, 因为这正是BBcode希望获得的效果.

[img=176,62]http://bgm.tv/img/ico/bgm88-31.gif[/img]

[img=75,170]https://bgm.tv/img/ukagaka/shell_1.gif[/img]

[user=313469]这是我[/user]

[photo=###]***.jpg[/photo]

缩进

[indent]被缩进的内容[/indent]



无序列表

[list][*]list item 1

[*]list item 2[/list]



有序列表(数字标号)

[list=1][*]list item 1

[*]list item 2[/list]



有序列表(小写字母标号)

[list=a][*]list item 1

[*]list item 2[/list]



有序列表(大写字母标号)

[list=A][*]list item 1

[*]list item 2[/list]