目錄
回复内容:
首頁 web前端 H5教程 从语义化的角度,<li> 标签中的内容应该使用 <p> 标签吗?

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

Jun 07, 2016 am 08:43 AM
gt li lt

登入後複製
  • Hi I am an item.
  • And I am another one.

回复内容:

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

    属于终端块状元素,它下面不能再出现其他块级元素,只能包含内容。
    不被推荐的是这种写法:

    <span class="nt"><li></span>text<span class="nt"><p></span>text<span class="nt"></p></li></span>
    
    登入後複製
    从题主给的例子来看,两者从语义上是等价的。
    4.4 Grouping content
    3 Semantics, structure, and APIs of HTML documents
    一句或多句话组成段落,不会因为有没有

    而改变本身的语义,所以有时候

    是多余的。 如果你的 li 里面只有一个 p,显然就是多此一举啊。
    个人感觉实际项目中强求语义化和通过标准测试的强迫症是病,得治。 具体情况具体分析吧,如果只是楼主这种情况P标签应该是多余的,但是如果用li进行布局的话,里面是可以用p标签的,比如下面这个布局应该是正常的:

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

    ps想到一句话,多读一点书,少写一行代码。 若你用了p,为何又要用li?
    若你用了li,为何又要用p?
    你的内容到底是列表还是段落分不清吗?…
  • 本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

    熱AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智慧驅動的應用程序,用於創建逼真的裸體照片

    AI Clothes Remover

    AI Clothes Remover

    用於從照片中去除衣服的線上人工智慧工具。

    Undress AI Tool

    Undress AI Tool

    免費脫衣圖片

    Clothoff.io

    Clothoff.io

    AI脫衣器

    AI Hentai Generator

    AI Hentai Generator

    免費產生 AI 無盡。

    熱門文章

    R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.最佳圖形設置
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.如果您聽不到任何人,如何修復音頻
    4 週前 By 尊渡假赌尊渡假赌尊渡假赌
    WWE 2K25:如何解鎖Myrise中的所有內容
    1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

    熱工具

    記事本++7.3.1

    記事本++7.3.1

    好用且免費的程式碼編輯器

    SublimeText3漢化版

    SublimeText3漢化版

    中文版,非常好用

    禪工作室 13.0.1

    禪工作室 13.0.1

    強大的PHP整合開發環境

    Dreamweaver CS6

    Dreamweaver CS6

    視覺化網頁開發工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神級程式碼編輯軟體(SublimeText3)

    華為GT3 Pro和GT4的差異是什麼? 華為GT3 Pro和GT4的差異是什麼? Dec 29, 2023 pm 02:27 PM

    許多用戶在選擇智慧型手錶的時候都會選擇的華為的品牌,其中華為GT3pro和GT4都是非常熱門的選擇,不少用戶都很好奇華為GT3pro和GT4有什麼區別,下面就給大家介紹一下二者。華為GT3pro和GT4有什麼差別一、外觀GT4:46mm和41mm,材質是玻璃鏡板+不鏽鋼機身+高分纖維後殼。 GT3pro:46.6mm和42.9mm,材質是藍寶石玻璃鏡+鈦金屬機身/陶瓷機身+陶瓷後殼二、健康GT4:採用最新的華為Truseen5.5+演算法,結果會更加的精準。 GT3pro:多了ECG心電圖和血管及安

    修復:截圖工具在 Windows 11 中不起作用 修復:截圖工具在 Windows 11 中不起作用 Aug 24, 2023 am 09:48 AM

    為什麼截圖工具在Windows11上不起作用了解問題的根本原因有助於找到正確的解決方案。以下是截圖工具可能無法正常工作的主要原因:對焦助手已開啟:這可以防止截圖工具開啟。應用程式損壞:如果截圖工具在啟動時崩潰,則可能已損壞。過時的圖形驅動程式:不相容的驅動程式可能會幹擾截圖工具。來自其他應用程式的干擾:其他正在運行的應用程式可能與截圖工具衝突。憑證已過期:升級過程中的錯誤可能會導致此issu簡單的解決方案這些適合大多數用戶,不需要任何特殊的技術知識。 1.更新視窗與Microsoft應用程式商店應用程

    li是什麼元素 li是什麼元素 Aug 03, 2023 am 11:19 AM

    li是HTML標記語言中的元素,用於建立清單。 li代表列表項,它是ul或ol的子元素,li標籤的作用是定義列表中的每個項目。在HTML中,li元素通常與ul或ol元素配合使用來建立有序或無序列表,無序列表使用ul元素,列表項以li元素表示,而有序列表則使用ol元素,同樣也用li元素表示。

    html中li是什麼 html中li是什麼 Nov 19, 2021 pm 03:31 PM

    在html中,li的英文全稱為“list item”,意思為“清單項目”,是定義清單項目的元素標籤,語法“<li>清單項目內容</li>”;“<li>”標籤可用在有序列表“<ol>”和無序列表“<ul>”中。

    如何修復無法連線到iPhone上的App Store錯誤 如何修復無法連線到iPhone上的App Store錯誤 Jul 29, 2023 am 08:22 AM

    第1部分:初始故障排除步驟檢查蘋果的系統狀態:在深入研究複雜的解決方案之前,讓我們先從基礎知識開始。問題可能不在於您的設備;蘋果的伺服器可能會關閉。造訪Apple的系統狀態頁面,查看AppStore是否正常運作。如果有問題,您所能做的就是等待Apple修復它。檢查您的網路連接:確保您擁有穩定的網路連接,因為「無法連接到AppStore」問題有時可歸因於連接不良。嘗試在Wi-Fi和行動數據之間切換或重置網路設定(「常規」>「重置」>「重置網路設定」>設定)。更新您的iOS版本:

    php提交表单通过后,弹出的对话框怎样在当前页弹出,该如何解决 php提交表单通过后,弹出的对话框怎样在当前页弹出,该如何解决 Jun 13, 2016 am 10:23 AM

    php提交表单通过后,弹出的对话框怎样在当前页弹出php提交表单通过后,弹出的对话框怎样在当前页弹出而不是在空白页弹出?想实现这样的效果:而不是空白页弹出:------解决方案--------------------如果你的验证用PHP在后端,那么就用Ajax;仅供参考:HTML code

    watch4pro好還是gt好 watch4pro好還是gt好 Sep 26, 2023 pm 02:45 PM

    watch4pro和gt各自具有不使用的特點和適用場景,如果注重功能的全面性、高性能和時尚外觀,同時願意承擔較高的價格,那麼Watch 4 Pro可能更適合。如果對功能要求不高,更注重電池續航力和價格的合理性,那麼GT系列可能更適合。最終的選擇應根據個人需求、預算和喜好來決定,建議在購買前仔細考慮自己的需求,並參考各種產品的評測和比較,以做出更明智的選擇。

    css怎麼去掉li預設樣式 css怎麼去掉li預設樣式 Jan 28, 2023 pm 02:09 PM

    css去掉li預設樣式的方法:1.建立一個HTML範例檔;2、新增li標籤內容;3、在css中透過將「list-style-type」屬性設為「none」即可去掉li預設樣式。

    See all articles