Table des matières
回复内容:
Maison interface Web Tutoriel H5 从语义化的角度,<li> 标签中的内容应该使用 <p> 标签吗?

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

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

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

    ps想到一句话,多读一点书,少写一行代码。 若你用了p,为何又要用li?
    若你用了li,为何又要用p?
    你的内容到底是列表还是段落分不清吗?…
  • Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

    Outils d'IA chauds

    Undresser.AI Undress

    Undresser.AI Undress

    Application basée sur l'IA pour créer des photos de nu réalistes

    AI Clothes Remover

    AI Clothes Remover

    Outil d'IA en ligne pour supprimer les vêtements des photos.

    Undress AI Tool

    Undress AI Tool

    Images de déshabillage gratuites

    Clothoff.io

    Clothoff.io

    Dissolvant de vêtements AI

    AI Hentai Generator

    AI Hentai Generator

    Générez AI Hentai gratuitement.

    Article chaud

    R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
    4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Meilleurs paramètres graphiques
    4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Comment réparer l'audio si vous n'entendez personne
    1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Commandes de chat et comment les utiliser
    1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

    Outils chauds

    Bloc-notes++7.3.1

    Bloc-notes++7.3.1

    Éditeur de code facile à utiliser et gratuit

    SublimeText3 version chinoise

    SublimeText3 version chinoise

    Version chinoise, très simple à utiliser

    Envoyer Studio 13.0.1

    Envoyer Studio 13.0.1

    Puissant environnement de développement intégré PHP

    Dreamweaver CS6

    Dreamweaver CS6

    Outils de développement Web visuel

    SublimeText3 version Mac

    SublimeText3 version Mac

    Logiciel d'édition de code au niveau de Dieu (SublimeText3)

    Quelles sont les différences entre Huawei GT3 Pro et GT4 ? Quelles sont les différences entre Huawei GT3 Pro et GT4 ? Dec 29, 2023 pm 02:27 PM

    De nombreux utilisateurs choisiront la marque Huawei lors du choix des montres intelligentes. Parmi eux, les Huawei GT3pro et GT4 sont des choix très populaires. De nombreux utilisateurs sont curieux de connaître la différence entre Huawei GT3pro et GT4. Quelles sont les différences entre Huawei GT3pro et GT4 ? 1. Apparence GT4 : 46 mm et 41 mm, le matériau est un miroir en verre + un corps en acier inoxydable + une coque arrière en fibre haute résolution. GT3pro : 46,6 mm et 42,9 mm, le matériau est du verre saphir + corps en titane/corps en céramique + coque arrière en céramique 2. GT4 sain : en utilisant le dernier algorithme Huawei Truseen5.5+, les résultats seront plus précis. GT3pro : ajout d'un électrocardiogramme ECG, d'un vaisseau sanguin et de la sécurité

    Correctif : l'outil de capture ne fonctionne pas sous Windows 11 Correctif : l'outil de capture ne fonctionne pas sous Windows 11 Aug 24, 2023 am 09:48 AM

    Pourquoi l'outil Snipping ne fonctionne pas sous Windows 11 Comprendre la cause première du problème peut aider à trouver la bonne solution. Voici les principales raisons pour lesquelles l'outil de capture peut ne pas fonctionner correctement : L'assistant de mise au point est activé : cela empêche l'ouverture de l'outil de capture. Application corrompue : si l'outil de capture plante au lancement, il est peut-être corrompu. Pilotes graphiques obsolètes : des pilotes incompatibles peuvent interférer avec l'outil de capture. Interférence provenant d'autres applications : d'autres applications en cours d'exécution peuvent entrer en conflit avec l'outil de capture. Le certificat a expiré : une erreur lors du processus de mise à niveau peut provoquer ce problème. Solution simple. Celles-ci conviennent à la plupart des utilisateurs et ne nécessitent aucune connaissance technique particulière. 1. Mettez à jour les applications Windows et Microsoft Store

    Quel élément est li ? Quel élément est li ? Aug 03, 2023 am 11:19 AM

    li est un élément du langage de balisage HTML et est utilisé pour créer des listes. li représente un élément de liste, qui est un élément enfant de ul ou ol. Le rôle de la balise li est de définir chaque élément de la liste. En HTML, l'élément li est généralement utilisé avec l'élément ul ou ol pour créer une liste ordonnée ou non. Les listes non ordonnées utilisent l'élément ul, et les éléments de liste sont représentés par l'élément li, tandis que les listes ordonnées utilisent l'élément ol, en utilisant également. li Représentation des éléments.

    Qu'est-ce que Li en HTML Qu'est-ce que Li en HTML Nov 19, 2021 pm 03:31 PM

    En HTML, le nom anglais complet de li est "list item", ce qui signifie "list item". Il s'agit d'une balise d'élément qui définit un élément de liste. La syntaxe est "<li>list item content</li>" ; Balise <li>" Disponible en liste ordonnée "<ol>" et en liste non ordonnée "<ul>".

    Comment réparer l'erreur Impossible de se connecter à l'App Store sur iPhone Comment réparer l'erreur Impossible de se connecter à l'App Store sur iPhone Jul 29, 2023 am 08:22 AM

    Partie 1 : étapes de dépannage initiales Vérification de l'état du système Apple : avant d'aborder des solutions complexes, commençons par les bases. Le problème ne vient peut-être pas de votre appareil ; les serveurs Apple sont peut-être en panne. Visitez la page État du système d'Apple pour voir si l'AppStore fonctionne correctement. S'il y a un problème, tout ce que vous pouvez faire est d'attendre qu'Apple le résolve. Vérifiez votre connexion Internet : assurez-vous que vous disposez d'une connexion Internet stable, car le problème "Impossible de se connecter à l'AppStore" peut parfois être attribué à une mauvaise connexion. Essayez de basculer entre le Wi-Fi et les données mobiles ou de réinitialiser les paramètres réseau (Général > Réinitialiser > Réinitialiser les paramètres réseau > Paramètres). Mettez à jour votre version iOS :

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

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

    Watch4pro est-il meilleur ou gt ? Watch4pro est-il meilleur ou gt ? Sep 26, 2023 pm 02:45 PM

    Watch4pro et gt ont chacun des fonctionnalités et des scénarios applicables différents. Si vous vous concentrez sur des fonctions complètes, des performances élevées et une apparence élégante, et que vous êtes prêt à supporter un prix plus élevé, alors Watch 4 Pro peut être plus approprié. Si vous n’avez pas d’exigences fonctionnelles élevées et que vous accordez plus d’attention à la durée de vie de la batterie et à un prix raisonnable, la série GT peut être plus adaptée. Le choix final doit être décidé en fonction des besoins personnels, du budget et des préférences. Il est recommandé d'examiner attentivement vos propres besoins avant d'acheter et de vous référer aux critiques et aux comparaisons des différents produits pour faire un choix plus éclairé.

    Comment supprimer le style par défaut de Li en CSS Comment supprimer le style par défaut de Li en CSS Jan 28, 2023 pm 02:09 PM

    Comment supprimer le style par défaut li en CSS : 1. Créez un exemple de fichier HTML ; 2. Ajoutez le contenu de la balise li ; 3. Définissez l'attribut "list-style-type" sur "aucun" en CSS pour supprimer le style par défaut li. .

    See all articles