Rumah hujung hadapan web html tutorial 详解网页HTML有序列表ol和无序列表ul

详解网页HTML有序列表ol和无序列表ul

Mar 10, 2017 pm 01:23 PM

 本文详解网页HTML有序列表ol和无序列表ul

用于组织数据的列表 学习了这么多控制网页显示的HTML标签,读者可以初步制作纯文章页面了。本节学习HTML中的列表元素,列表形式在网站设计中占有比较大的比重,显示信息非常整齐直观,便于用户理解。在后面的CSS样式学习中将大量使用到列表元素的高级作用。  

 用于组织数据的列表

学习了这么多控制网页显示的HTML标签,读者可以初步制作纯文章页面了。本节学习HTML中的列表元素,列表形式在网站设计中占有比较大的比重,显示信息非常整齐直观,便于用户理解。在后面的CSS样式学习中将大量使用到列表元素的高级作用。

详解网页HTML有序列表ol和无序列表ul

 4.4.1  列表的结构组成

HTML的列表元素是一个由列表标签封闭的结构,包含的列表项由

  • 组成。具体结构如图4.17所示。

     4.4.2  制作无序列表

    顾名思义,无序列表就是列表结构中的列表项没有先后顺序的列表形式。大部分网页应用中的列表均采用无序列表,其列表标签采用

      ,编写方法如下:

         

      • 列表项一
      •  

      • 列表项二
      •  

      • 列表项三
      •  

      • 列表项四
      •  

      • 列表项五

      详解网页HTML有序列表ol和无序列表ul 4.4.3  制作有序列表

      顾名思义,有序列表就是列表结构中的列表项有先后顺序的列表形式,从上到下可以有各种不同的序列编号,如1、2、3或a、b、c等。在D:\web\目录下创建网页文件,命名为ul_ol.htm,编写代码如代码4.17所示。

      代码4.17  列表的设置:ul_ol.htm

        列表的设置

      网页前台技术

         

      • HTML
      •  

      • CSS
      •  

      • JavaScript
      •  

      • FLASH

      网页后台的学习

         

      1. ASP
      2.  

      3. ASP.net
      4.  

      5. PHP
      6.  

      7. CGI
      8.  

      9. Ruby
      10.  

      11. Python

      在浏览器地址栏输入http://localhost/ul_ol.htm,浏览效果如图4.18所示。

      详解网页HTML有序列表ol和无序列表ul

      图4.18  列表的设置

      Atas ialah kandungan terperinci 详解网页HTML有序列表ol和无序列表ul. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

      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)
      1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
      R.E.P.O. Tetapan grafik terbaik
      1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
      Akan R.E.P.O. Ada Crossplay?
      1 bulan 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 tujuan & lt; kemajuan & gt; unsur? Apakah tujuan & lt; kemajuan & gt; unsur? Mar 21, 2025 pm 12:34 PM

      Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

      Apakah tujuan & lt; DATALIST & GT; unsur? Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

      Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

      Apakah tujuan & lt; meter & gt; unsur? Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

      Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

      Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif? Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif? Mar 20, 2025 pm 05:56 PM

      Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.

      Adakah HTML mudah belajar untuk pemula? Adakah HTML mudah belajar untuk pemula? Apr 07, 2025 am 12:11 AM

      HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.

      Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Mar 20, 2025 pm 06:05 PM

      Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.

      Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Apr 08, 2025 pm 07:05 PM

      HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

      Apakah contoh tag permulaan dalam html? Apakah contoh tag permulaan dalam html? Apr 06, 2025 am 12:04 AM

      Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.

      See all articles