最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

从语义化的角度,<li> 标签中的内容应该使用 <p> 标签吗?-H5教程

来源:http://erdangjiade.com/topic/133433.html H5程序员 2017-10-27 12:55浏览(120)

<ul>
    <li> Hi I am an item. </li>
    <li> And I am another one. </li>
</ul>

回复内容:

都可以。
以前我也纠结什么元素应该放什么元素里面,直到《精通 CSS 与 HTML 设计模式》的作者提出了三个名词,把块级元素划分成三类:结构化块状元素、终端块状元素、多目标块状元素。
<li> 属于结构化块状元素和多目标块状元素,它让文档形成结构,也是多目的的,即能包含内容也能包含其他块级元素。
<p> 属于终端块状元素,它下面不能再出现其他块级元素,只能包含内容。
不被推荐的是这种写法:

<li>text<p>text</p></li>
从题主给的例子来看,两者从语义上是等价的。
4.4 Grouping content
3 Semantics, structure, and APIs of HTML documents
一句或多句话组成段落,不会因为有没有 <p> 而改变本身的语义,所以有时候 <p> 是多余的。 如果你的 li 里面只有一个 p,显然就是多此一举啊。
个人感觉实际项目中强求语义化和通过标准测试的强迫症是病,得治。 具体情况具体分析吧,如果只是楼主这种情况P标签应该是多余的,但是如果用li进行布局的话,里面是可以用p标签的,比如下面这个布局应该是正常的:

<ul>
		<li>
			<img src="">
			<p>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!</p>
		</li>
		<li>
			<img src="">
			<p>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!</p>
		</li>
		<li>
			<img src="">
			<p>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!</p>
		</li>
		<li>
			<img src="">
			<p>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!</p>
		</li>
		
	</ul>
li 列表也! p段落也! 首先p代表的是一个段落,纵观整个li,是否有其他内容需要与这句话"断",要是没有的话,那你要段就必然显得多此一举,就好比多讲了一句废话,废话当然是木意义的。 这两种里加不加p标签效果都一样呀 如无必要,勿增实体 两者表现都一样,所以不需要用p标签。
在实现了功能的前提下,能少写代码就少写,越精简越好。

ps想到一句话,多读一点书,少写一行代码。 若你用了p,为何又要用li?
若你用了li,为何又要用p?
你的内容到底是列表还是段落分不清吗?…
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2