Home > Article > Web Front-end > 从语义化的角度,<li> 标签中的内容应该使用 <p> 标签吗?
属于终端块状元素,它下面不能再出现其他块级元素,只能包含内容。
不被推荐的是这种写法:
<code class="language-html"><span class="nt"><li></span>text<span class="nt"><p></p></span>text<span class="nt"></span>
</code>
从题主给的例子来看,两者从语义上是等价的。而改变本身的语义,所以有时候
是多余的。
如果你的 li 里面只有一个 p,显然就是多此一举啊。
个人感觉实际项目中强求语义化和通过标准测试的强迫症是病,得治。
具体情况具体分析吧,如果只是楼主这种情况P标签应该是多余的,但是如果用li进行布局的话,里面是可以用p标签的,比如下面这个布局应该是正常的:
<code class="language-html"><span class="nt"><ul></ul></span>
<span class="nt"><li></span>
<span class="nt"><img alt="从语义化的角度,<li> 标签中的内容应该使用 <p> 标签吗?" > <span class="na">src=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><p></p></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, facilis, voluptates, architecto quidem aut quam quos quia perferendis dolorum recusandae nemo consectetur atque officiis dolor asperiores aperiam officia tempora ad!<span class="nt"></span>
<span class="nt"></span>
<span class="nt"><li></span>
<span class="nt"><img alt="从语义化的角度,<li> 标签中的内容应该使用 <p> 标签吗?" > <span class="na">src=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><p></p></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, facilis, voluptates, architecto quidem aut quam quos quia perferendis dolorum recusandae nemo consectetur atque officiis dolor asperiores aperiam officia tempora ad!<span class="nt"></span>
<span class="nt"></span>
<span class="nt"><li></span>
<span class="nt"><img alt="从语义化的角度,<li> 标签中的内容应该使用 <p> 标签吗?" > <span class="na">src=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><p></p></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, facilis, voluptates, architecto quidem aut quam quos quia perferendis dolorum recusandae nemo consectetur atque officiis dolor asperiores aperiam officia tempora ad!<span class="nt"></span>
<span class="nt"></span>
<span class="nt"><li></span>
<span class="nt"><img alt="从语义化的角度,<li> 标签中的内容应该使用 <p> 标签吗?" > <span class="na">src=</span><span class="s">""</span><span class="nt">></span>
<span class="nt"><p></p></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, facilis, voluptates, architecto quidem aut quam quos quia perferendis dolorum recusandae nemo consectetur atque officiis dolor asperiores aperiam officia tempora ad!<span class="nt"></span>
<span class="nt"></span>
<span class="nt"></span>
</span></span></span></span></code>
li 列表也! p段落也!
首先p代表的是一个段落,纵观整个li,是否有其他内容需要与这句话"断",要是没有的话,那你要段就必然显得多此一举,就好比多讲了一句废话,废话当然是木意义的。
这两种里加不加p标签效果都一样呀
如无必要,勿增实体
两者表现都一样,所以不需要用p标签。