Inhaltsverzeichnis
回复内容:
Heim Web-Frontend H5-Tutorial 从语义化的角度,<li> 标签中的内容应该使用 <p> 标签吗?

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

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

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

    ps想到一句话,多读一点书,少写一行代码。 若你用了p,为何又要用li?
    若你用了li,为何又要用p?
    你的内容到底是列表还是段落分不清吗?…
  • Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

    Heiße KI -Werkzeuge

    Undresser.AI Undress

    Undresser.AI Undress

    KI-gestützte App zum Erstellen realistischer Aktfotos

    AI Clothes Remover

    AI Clothes Remover

    Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

    Undress AI Tool

    Undress AI Tool

    Ausziehbilder kostenlos

    Clothoff.io

    Clothoff.io

    KI-Kleiderentferner

    AI Hentai Generator

    AI Hentai Generator

    Erstellen Sie kostenlos Ai Hentai.

    Heißer Artikel

    R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
    4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Beste grafische Einstellungen
    4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
    1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Chat -Befehle und wie man sie benutzt
    1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

    Heiße Werkzeuge

    Notepad++7.3.1

    Notepad++7.3.1

    Einfach zu bedienender und kostenloser Code-Editor

    SublimeText3 chinesische Version

    SublimeText3 chinesische Version

    Chinesische Version, sehr einfach zu bedienen

    Senden Sie Studio 13.0.1

    Senden Sie Studio 13.0.1

    Leistungsstarke integrierte PHP-Entwicklungsumgebung

    Dreamweaver CS6

    Dreamweaver CS6

    Visuelle Webentwicklungstools

    SublimeText3 Mac-Version

    SublimeText3 Mac-Version

    Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

    Was sind die Unterschiede zwischen Huawei GT3 Pro und GT4? Was sind die Unterschiede zwischen Huawei GT3 Pro und GT4? Dec 29, 2023 pm 02:27 PM

    Viele Benutzer werden sich bei der Auswahl von Smartwatches für die Marke Huawei entscheiden. Viele Benutzer sind neugierig auf den Unterschied zwischen Huawei GT3pro und GT4. Was sind die Unterschiede zwischen Huawei GT3pro und GT4? 1. Aussehen GT4: 46 mm und 41 mm, das Material ist Glasspiegel + Edelstahlgehäuse + hochauflösende Faserrückschale. GT3pro: 46,6 mm und 42,9 mm, das Material ist Saphirglas + Titangehäuse/Keramikgehäuse + Keramikrückschale 2. Gesundes GT4: Mit dem neuesten Huawei Truseen5.5+-Algorithmus werden die Ergebnisse genauer. GT3pro: EKG-Elektrokardiogramm sowie Blutgefäß und Sicherheit hinzugefügt

    Fix: Snipping-Tool funktioniert unter Windows 11 nicht Fix: Snipping-Tool funktioniert unter Windows 11 nicht Aug 24, 2023 am 09:48 AM

    Warum das Snipping-Tool unter Windows 11 nicht funktioniert Das Verständnis der Grundursache des Problems kann dabei helfen, die richtige Lösung zu finden. Hier sind die häufigsten Gründe, warum das Snipping Tool möglicherweise nicht ordnungsgemäß funktioniert: Focus Assistant ist aktiviert: Dies verhindert, dass das Snipping Tool geöffnet wird. Beschädigte Anwendung: Wenn das Snipping-Tool beim Start abstürzt, ist es möglicherweise beschädigt. Veraltete Grafiktreiber: Inkompatible Treiber können das Snipping-Tool beeinträchtigen. Störungen durch andere Anwendungen: Andere laufende Anwendungen können mit dem Snipping Tool in Konflikt geraten. Das Zertifikat ist abgelaufen: Ein Fehler während des Upgrade-Vorgangs kann zu diesem Problem führen. Diese einfache Lösung ist für die meisten Benutzer geeignet und erfordert keine besonderen technischen Kenntnisse. 1. Aktualisieren Sie Windows- und Microsoft Store-Apps

    Welches Element ist Li? Welches Element ist Li? Aug 03, 2023 am 11:19 AM

    li ist ein Element in der HTML-Auszeichnungssprache und wird zum Erstellen von Listen verwendet. li stellt ein Listenelement dar, das ein untergeordnetes Element von ul oder ol ist. Die Rolle des li-Tags besteht darin, jedes Element in der Liste zu definieren. In HTML wird das li-Element normalerweise mit dem ul- oder ol-Element verwendet, um eine geordnete oder ungeordnete Liste zu erstellen. Ungeordnete Listen verwenden das ul-Element und Listenelemente werden durch das li-Element dargestellt, während geordnete Listen ebenfalls das ol-Element verwenden li Elementdarstellung.

    Was ist li in html Was ist li in html Nov 19, 2021 pm 03:31 PM

    In HTML lautet der vollständige englische Name „list item“, was „Listenelement“ bedeutet. Es handelt sich um ein Element-Tag, das ein Listenelement definiert. Tag „<li>“ Verfügbar in der geordneten Liste „<ol>“ und der ungeordneten Liste „<ul>“.

    So beheben Sie den Fehler „Verbindung zum App Store nicht möglich' auf dem iPhone So beheben Sie den Fehler „Verbindung zum App Store nicht möglich' auf dem iPhone Jul 29, 2023 am 08:22 AM

    Teil 1: Erste Schritte zur Fehlerbehebung Überprüfen des Apple-Systemstatus: Bevor wir uns mit komplexen Lösungen befassen, beginnen wir mit den Grundlagen. Das Problem liegt möglicherweise nicht an Ihrem Gerät; die Server von Apple sind möglicherweise ausgefallen. Besuchen Sie die Systemstatusseite von Apple, um zu sehen, ob der AppStore ordnungsgemäß funktioniert. Wenn es ein Problem gibt, können Sie nur warten, bis Apple es behebt. Überprüfen Sie Ihre Internetverbindung: Stellen Sie sicher, dass Sie über eine stabile Internetverbindung verfügen, da das Problem „Verbindung zum AppStore nicht möglich“ manchmal auf eine schlechte Verbindung zurückzuführen ist. Versuchen Sie, zwischen WLAN und mobilen Daten zu wechseln oder die Netzwerkeinstellungen zurückzusetzen (Allgemein > Zurücksetzen > Netzwerkeinstellungen zurücksetzen > Einstellungen). Aktualisieren Sie Ihre iOS-Version:

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

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

    Ist watch4pro besser oder GT? Ist watch4pro besser oder GT? Sep 26, 2023 pm 02:45 PM

    Watch4pro und GT verfügen jeweils über unterschiedliche Funktionen und Anwendungsszenarien. Wenn Sie Wert auf umfassende Funktionen, hohe Leistung und ein stilvolles Erscheinungsbild legen und bereit sind, einen höheren Preis in Kauf zu nehmen, ist Watch 4 Pro möglicherweise besser geeignet. Wenn Sie keine hohen funktionalen Ansprüche haben und mehr Wert auf Akkulaufzeit und einen angemessenen Preis legen, ist die GT-Serie möglicherweise besser geeignet. Die endgültige Wahl sollte auf der Grundlage persönlicher Bedürfnisse, Budgets und Vorlieben getroffen werden. Es wird empfohlen, vor dem Kauf Ihre eigenen Bedürfnisse sorgfältig zu prüfen und sich die Bewertungen und Vergleiche verschiedener Produkte anzusehen, um eine fundiertere Entscheidung zu treffen.

    So entfernen Sie den Li-Standardstil in CSS So entfernen Sie den Li-Standardstil in CSS Jan 28, 2023 pm 02:09 PM

    So entfernen Sie den Li-Standardstil in CSS: 1. Erstellen Sie eine HTML-Beispieldatei. 2. Fügen Sie den Li-Tag-Inhalt hinzu. 3. Setzen Sie das Attribut „list-style-type“ in CSS auf „none“, um den Li-Standardstil zu entfernen .

    See all articles