Jadual Kandungan
回复内容:
Rumah hujung hadapan web Tutorial H5 从语义化的角度,<li> 标签中的内容应该使用 <p> 标签吗?

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

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

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

    ps想到一句话,多读一点书,少写一行代码。 若你用了p,为何又要用li?
    若你用了li,为何又要用p?
    你的内容到底是列表还是段落分不清吗?…
  • Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

    Alat AI Hot

    Undresser.AI Undress

    Undresser.AI Undress

    Apl berkuasa AI untuk mencipta foto bogel yang realistik

    AI Clothes Remover

    AI Clothes Remover

    Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

    Undress AI Tool

    Undress AI Tool

    Gambar buka pakaian secara percuma

    Clothoff.io

    Clothoff.io

    Penyingkiran pakaian AI

    AI Hentai Generator

    AI Hentai Generator

    Menjana ai hentai secara percuma.

    Artikel Panas

    R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
    4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Tetapan grafik terbaik
    4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
    4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Arahan sembang dan cara menggunakannya
    4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

    Alat panas

    Notepad++7.3.1

    Notepad++7.3.1

    Editor kod yang mudah digunakan dan percuma

    SublimeText3 versi Cina

    SublimeText3 versi Cina

    Versi Cina, sangat mudah digunakan

    Hantar Studio 13.0.1

    Hantar Studio 13.0.1

    Persekitaran pembangunan bersepadu PHP yang berkuasa

    Dreamweaver CS6

    Dreamweaver CS6

    Alat pembangunan web visual

    SublimeText3 versi Mac

    SublimeText3 versi Mac

    Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

    Apakah perbezaan antara Huawei GT3 Pro dan GT4? Apakah perbezaan antara Huawei GT3 Pro dan GT4? Dec 29, 2023 pm 02:27 PM

    Ramai pengguna akan memilih jenama Huawei apabila memilih jam tangan pintar Antaranya, Huawei GT3pro dan GT4 adalah pilihan yang sangat popular. Apakah perbezaan antara Huawei GT3pro dan GT4? 1. Rupa GT4: 46mm dan 41mm, bahan cermin kaca + badan keluli tahan karat + cangkang belakang gentian resolusi tinggi. GT3pro: 46.6mm dan 42.9mm, bahannya ialah kaca nilam + badan titanium/badan seramik + cangkerang belakang seramik 2. GT4 yang sihat: Menggunakan algoritma Huawei Truseen5.5+ terkini, hasilnya akan lebih tepat. GT3pro: Penambahan elektrokardiogram ECG dan saluran darah serta keselamatan

    Betulkan: Alat snipping tidak berfungsi dalam Windows 11 Betulkan: Alat snipping tidak berfungsi dalam Windows 11 Aug 24, 2023 am 09:48 AM

    Mengapa Alat Snipping Tidak Berfungsi pada Windows 11 Memahami punca masalah boleh membantu mencari penyelesaian yang betul. Berikut ialah sebab utama Alat Snipping mungkin tidak berfungsi dengan betul: Focus Assistant dihidupkan: Ini menghalang Snipping Tool daripada dibuka. Aplikasi rosak: Jika alat snipping ranap semasa pelancaran, ia mungkin rosak. Pemacu grafik lapuk: Pemacu yang tidak serasi mungkin mengganggu alat snipping. Gangguan daripada aplikasi lain: Aplikasi lain yang sedang berjalan mungkin bercanggah dengan Alat Snipping. Sijil telah tamat tempoh: Ralat semasa proses naik taraf boleh menyebabkan penyelesaian mudah ini sesuai untuk kebanyakan pengguna dan tidak memerlukan sebarang pengetahuan teknikal khusus. 1. Kemas kini apl Windows dan Microsoft Store

    Apakah unsur li? Apakah unsur li? Aug 03, 2023 am 11:19 AM

    li ialah elemen dalam bahasa penanda HTML dan digunakan untuk membuat senarai. li mewakili item senarai, yang merupakan elemen anak ul atau ol Peranan tag li adalah untuk menentukan setiap item dalam senarai. Dalam HTML, elemen li biasanya digunakan dengan elemen ul atau ol untuk mencipta senarai tersusun atau tidak tersusun menggunakan elemen ul, dan item senarai diwakili oleh elemen li, manakala senarai tersusun menggunakan elemen ol, juga menggunakan. li Perwakilan unsur.

    Apakah li dalam html Apakah li dalam html Nov 19, 2021 pm 03:31 PM

    Dalam HTML, nama penuh bahasa Inggeris li ialah "item senarai", yang bermaksud "item senarai". Teg <li>" Tersedia dalam senarai tersusun "<ol>" dan senarai tidak tersusun "<ul>".

    Cara Membetulkan Ralat Tidak Dapat Menyambung ke App Store pada iPhone Cara Membetulkan Ralat Tidak Dapat Menyambung ke App Store pada iPhone Jul 29, 2023 am 08:22 AM

    Bahagian 1: Langkah Penyelesaian Masalah Awal Menyemak Status Sistem Apple: Sebelum menyelidiki penyelesaian yang rumit, mari kita mulakan dengan asas. Masalahnya mungkin tidak terletak pada peranti anda; Lawati halaman Status Sistem Apple untuk melihat sama ada AppStore berfungsi dengan betul. Jika terdapat masalah, anda hanya boleh menunggu Apple membetulkannya. Semak sambungan Internet anda: Pastikan anda mempunyai sambungan internet yang stabil kerana isu "Tidak dapat menyambung ke AppStore" kadangkala boleh dikaitkan dengan sambungan yang lemah. Cuba tukar antara Wi-Fi dan data mudah alih atau tetapkan semula tetapan rangkaian (Umum > Tetapkan Semula > Tetapkan Semula Tetapan Rangkaian > Tetapan). Kemas kini versi iOS anda:

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

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

    Adakah watch4pro lebih baik atau gt? Adakah watch4pro lebih baik atau gt? Sep 26, 2023 pm 02:45 PM

    Watch4pro dan gt masing-masing mempunyai ciri yang berbeza dan senario yang berkenaan Jika anda menumpukan pada fungsi yang komprehensif, prestasi tinggi dan penampilan yang bergaya, dan sanggup menanggung harga yang lebih tinggi, maka Watch 4 Pro mungkin lebih sesuai. Jika anda tidak mempunyai keperluan fungsi yang tinggi dan memberi lebih perhatian kepada hayat bateri dan harga yang berpatutan, maka siri GT mungkin lebih sesuai. Pilihan terakhir harus diputuskan berdasarkan keperluan peribadi, belanjawan dan keutamaan Adalah disyorkan untuk mempertimbangkan dengan teliti keperluan anda sendiri sebelum membeli dan merujuk kepada ulasan dan perbandingan pelbagai produk untuk membuat pilihan yang lebih termaklum.

    Bagaimana untuk mengalih keluar gaya lalai li dalam css Bagaimana untuk mengalih keluar gaya lalai li dalam css Jan 28, 2023 pm 02:09 PM

    Cara mengalih keluar gaya lalai li dalam css: 1. Buat fail sampel HTML 2. Tambah kandungan tag li 3. Tetapkan atribut "jenis-gaya senarai" kepada "tiada" dalam css untuk mengalih keluar gaya lalai; .

    See all articles