Table of Contents
回复内容:
Home Web Front-end H5 Tutorial 从语义化的角度,<li> 标签中的内容应该使用 <p> 标签吗?

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

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

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

    ps想到一句话,多读一点书,少写一行代码。 若你用了p,为何又要用li?
    若你用了li,为何又要用p?
    你的内容到底是列表还是段落分不清吗?…
  • Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

    Hot AI Tools

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Clothoff.io

    Clothoff.io

    AI clothes remover

    Video Face Swap

    Video Face Swap

    Swap faces in any video effortlessly with our completely free AI face swap tool!

    Hot Tools

    Notepad++7.3.1

    Notepad++7.3.1

    Easy-to-use and free code editor

    SublimeText3 Chinese version

    SublimeText3 Chinese version

    Chinese version, very easy to use

    Zend Studio 13.0.1

    Zend Studio 13.0.1

    Powerful PHP integrated development environment

    Dreamweaver CS6

    Dreamweaver CS6

    Visual web development tools

    SublimeText3 Mac version

    SublimeText3 Mac version

    God-level code editing software (SublimeText3)

    What are the differences between Huawei GT3 Pro and GT4? What are the differences between Huawei GT3 Pro and GT4? Dec 29, 2023 pm 02:27 PM

    Many users will choose the Huawei brand when choosing smart watches. Among them, Huawei GT3pro and GT4 are very popular choices. Many users are curious about the difference between Huawei GT3pro and GT4. Let’s introduce the two to you. . What are the differences between Huawei GT3pro and GT4? 1. Appearance GT4: 46mm and 41mm, the material is glass mirror + stainless steel body + high-resolution fiber back shell. GT3pro: 46.6mm and 42.9mm, the material is sapphire glass + titanium body/ceramic body + ceramic back shell 2. Healthy GT4: Using the latest Huawei Truseen5.5+ algorithm, the results will be more accurate. GT3pro: Added ECG electrocardiogram and blood vessel and safety

    Fix: Snipping tool not working in Windows 11 Fix: Snipping tool not working in Windows 11 Aug 24, 2023 am 09:48 AM

    Why Snipping Tool Not Working on Windows 11 Understanding the root cause of the problem can help find the right solution. Here are the top reasons why the Snipping Tool might not be working properly: Focus Assistant is On: This prevents the Snipping Tool from opening. Corrupted application: If the snipping tool crashes on launch, it might be corrupted. Outdated graphics drivers: Incompatible drivers may interfere with the snipping tool. Interference from other applications: Other running applications may conflict with the Snipping Tool. Certificate has expired: An error during the upgrade process may cause this issu simple solution. These are suitable for most users and do not require any special technical knowledge. 1. Update Windows and Microsoft Store apps

    What element is li? What element is li? Aug 03, 2023 am 11:19 AM

    li is an element in the HTML markup language and is used to create lists. li represents a list item, which is a child element of ul or ol. The role of the li tag is to define each item in the list. In HTML, the li element is usually used with the ul or ol element to create an ordered or unordered list. Unordered lists use the ul element, and list items are represented by the li element, while ordered lists use the ol element, also using li Element representation.

    What is li in html What is li in html Nov 19, 2021 pm 03:31 PM

    In HTML, the full English name of li is "list item", which means "list item". It is an element tag that defines a list item. The syntax is "<li>list item content</li>"; "<li>" tag Available in ordered list "<ol>" and unordered list "<ul>".

    How to Fix Can't Connect to App Store Error on iPhone How to Fix Can't Connect to App Store Error on iPhone Jul 29, 2023 am 08:22 AM

    Part 1: Initial Troubleshooting Steps Checking Apple’s System Status: Before delving into complex solutions, let’s start with the basics. The problem may not lie with your device; Apple's servers may be down. Visit Apple's System Status page to see if the AppStore is working properly. If there's a problem, all you can do is wait for Apple to fix it. Check your internet connection: Make sure you have a stable internet connection as the "Unable to connect to AppStore" issue can sometimes be attributed to a poor connection. Try switching between Wi-Fi and mobile data or resetting network settings (General > Reset > Reset Network Settings > Settings). Update your iOS version:

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

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

    How to remove li default style in css How to remove li default style in css Jan 28, 2023 pm 02:09 PM

    How to remove the li default style in css: 1. Create an HTML sample file; 2. Add the li tag content; 3. Set the "list-style-type" attribute to "none" in css to remove the li default style.

    Is watch4pro better or gt? Is watch4pro better or gt? Sep 26, 2023 pm 02:45 PM

    Watch4pro and gt each have different features and applicable scenarios. If you focus on comprehensive functions, high performance and stylish appearance, and are willing to bear a higher price, then Watch 4 Pro may be more suitable. If you don’t have high functional requirements and pay more attention to battery life and reasonable price, then the GT series may be more suitable. The final choice should be decided based on personal needs, budget and preferences. It is recommended to carefully consider your own needs before purchasing and refer to the reviews and comparisons of various products to make a more informed choice.

    See all articles