목차
回复内容:
웹 프론트엔드 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 기반 앱

    AI Clothes Remover

    AI Clothes Remover

    사진에서 옷을 제거하는 온라인 AI 도구입니다.

    Undress AI Tool

    Undress AI Tool

    무료로 이미지를 벗다

    Clothoff.io

    Clothoff.io

    AI 옷 제거제

    AI Hentai Generator

    AI Hentai Generator

    AI Hentai를 무료로 생성하십시오.

    인기 기사

    R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
    1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. 최고의 그래픽 설정
    1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
    1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. 채팅 명령 및 사용 방법
    1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

    뜨거운 도구

    메모장++7.3.1

    메모장++7.3.1

    사용하기 쉬운 무료 코드 편집기

    SublimeText3 중국어 버전

    SublimeText3 중국어 버전

    중국어 버전, 사용하기 매우 쉽습니다.

    스튜디오 13.0.1 보내기

    스튜디오 13.0.1 보내기

    강력한 PHP 통합 개발 환경

    드림위버 CS6

    드림위버 CS6

    시각적 웹 개발 도구

    SublimeText3 Mac 버전

    SublimeText3 Mac 버전

    신 수준의 코드 편집 소프트웨어(SublimeText3)

    화웨이 GT3 Pro와 GT4의 차이점은 무엇입니까? 화웨이 GT3 Pro와 GT4의 차이점은 무엇입니까? Dec 29, 2023 pm 02:27 PM

    많은 사용자들이 스마트 시계를 선택할 때 Huawei 브랜드를 선택하게 됩니다. 그 중 Huawei GT3pro와 GT4가 가장 인기 있는 선택입니다. 두 제품의 차이점을 궁금해하는 사용자가 많습니다. Huawei GT3pro와 GT4의 차이점은 무엇입니까? 1. 외관 GT4: 46mm와 41mm, 재질은 유리 거울 + 스테인레스 스틸 본체 + 고해상도 섬유 후면 쉘입니다. GT3pro: 46.6mm 및 42.9mm, 재질은 사파이어 유리 + 티타늄 본체/세라믹 본체 + 세라믹 백 쉘입니다. 2. 건강한 GT4: 최신 Huawei Truseen5.5+ 알고리즘을 사용하면 결과가 더 정확해집니다. GT3pro: ECG 심전도, 혈관 및 안전성 추가

    수정: Windows 11에서 캡처 도구가 작동하지 않음 수정: Windows 11에서 캡처 도구가 작동하지 않음 Aug 24, 2023 am 09:48 AM

    Windows 11에서 캡처 도구가 작동하지 않는 이유 문제의 근본 원인을 이해하면 올바른 솔루션을 찾는 데 도움이 될 수 있습니다. 캡처 도구가 제대로 작동하지 않는 주요 이유는 다음과 같습니다. 초점 도우미가 켜져 있습니다. 이렇게 하면 캡처 도구가 열리지 않습니다. 손상된 응용 프로그램: 캡처 도구가 실행 시 충돌하는 경우 응용 프로그램이 손상되었을 수 있습니다. 오래된 그래픽 드라이버: 호환되지 않는 드라이버가 캡처 도구를 방해할 수 있습니다. 다른 응용 프로그램의 간섭: 실행 중인 다른 응용 프로그램이 캡처 도구와 충돌할 수 있습니다. 인증서가 만료되었습니다. 업그레이드 프로세스 중 오류로 인해 이 문제가 발생할 수 있습니다. 이 문제는 대부분의 사용자에게 적합하며 특별한 기술 지식이 필요하지 않습니다. 1. Windows 및 Microsoft Store 앱 업데이트

    리(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의 전체 영어 이름은 "목록 항목"을 의미합니다. 이는 목록 항목을 정의하는 요소 태그입니다. 구문은 "<li>list item content</li>"입니다. <li>" 태그 정렬된 목록 "<ol>" 및 정렬되지 않은 목록 "<ul>"에서 사용할 수 있습니다.

    iPhone에서 App Store 오류에 연결할 수 없는 문제를 해결하는 방법 iPhone에서 App Store 오류에 연결할 수 없는 문제를 해결하는 방법 Jul 29, 2023 am 08:22 AM

    1부: 초기 문제 해결 단계 Apple 시스템 상태 확인: 복잡한 솔루션을 살펴보기 전에 기본 사항부터 시작해 보겠습니다. 문제는 귀하의 기기에 있는 것이 아닐 수도 있습니다. Apple 서버가 다운되었을 수도 있습니다. 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