简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Artikel  >  hujung hadapan web  >  Gaya Senarai HTML

Gaya Senarai HTML

PHPz
PHPzasal
2024-09-04 16:16:13756semak imbas
  • Senarai ialah keperluan biasa untuk meletakkan data dalam cara yang diformatkan, seperti jika anda telah membuat halaman web di mana anda perlu memaparkan kandungan menu piza hotel, kemungkinan besar ia akan menjadi gaya senarai HTML yang akan muncul dalam cara yang jelas dan diskret.
  • Kes lain boleh berlaku apabila anda mempunyai satu set pangkat pelajar yang muncul dalam kalangan berprestasi terbaik dalam kelas; dalam konteks ini, keperluan adalah untuk meletakkan pelajar kedudukan 1 di bahagian atas dan yang lain di bawahnya dalam susunan kedudukan yang semakin meningkat, untuk itu kita perlu memformat ini ke dalam senarai yang diisih.
  • Jenis lain boleh menjadi senarai tersuai yang boleh anda buat menggunakan Javascript dan Html bersama-sama, di mana dinamik dalam objek boleh disediakan juga dan senarai boleh mengambil beberapa pandangan tersuai.

Gaya Senarai Berbeza dalam HTML

Di bawah adalah pelbagai gaya senarai HTML diterangkan.

1) Senarai Tidak Tersusun

Di sini susunan paparan kandungan bukanlah sesuatu yang perlu kita ambil berat; cuma kita perlu meletakkan perkara itu dengan baik, supaya halaman HTML meletakkannya di hadapan pengguna dengan cara yang diformat dengan baik dan jelas.

Terdapat dua teg dalam bahasa HTML yang mengendalikan senarai ini dan kemungkinan besar anda boleh membuat bar navigasi dan bar sisi menegak menggunakan teg ini sahaja.

    1. : ini mewakili senarai tidak tertib; bila-bila masa kita tidak perlu meletakkan apa-apa atau mencari untuk meletakkannya dalam susunan rawak, tag ini digabungkan.
    • : ini mewakili item senarai, set item yang akan diletakkan dalam senarai tidak tersusun iaitu di bawah
        teg muncul di dalam
      • tag. Item yang ditandakan dengan penanda ini akan secara automatik membawa beberapa peluru atau bulatan pada permulaannya; ini ialah ciri HTML asas.

Sekarang mari kita lihat sekeping kod untuk

    dan
  • berdasarkan senarai tidak tersusun dan bagaimana halaman HTML akan kelihatan; sebaik sahaja anda melaksanakan fail itu, ambil perhatian bahawa anda boleh menulis dalam editor seperti notepad dan menyimpan fail dengan sambungan ".html"; oleh itu ia boleh dibuka dengan mana-mana pelayar.

    Contoh Coretan –

    Kod:

    <html>
<head> HTML Lists </head>
<body>
<h2> list of pizzas <h2>
<ul>
<li style="color:red"> farmhouse </li>
<li style="color:green"> peppy paneer </li>
<li style="color:blue"> onion pizza </li>
</ul>
</body>
</html>

    Output:

    Gaya Senarai HTML

    2) Senarai Tempahan

    Sekarang akan melihat kes di mana kami ingin meletakkan pelajar dalam cara yang teratur berdasarkan pangkat mereka dalam kelas, dan ini akan muncul dalam cara yang disusun dengan menggunakan

      teg HTML, dan ia akan mengandungi berbilang
    1. tag, ia akan mempunyai item senarai di dalamnya.

        : teg ini digunakan untuk menyediakan senarai tersusun dan semua elemen diletakkan di dalamnya, dalam
      1. tag.
      2. tag telah dijelaskan di atas.

        Untuk kes ini, mari lihat contoh juga, dan anda perlu menyimpannya seperti yang dilakukan di atas.

        Kod:

        <html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<ol>
<li style="color:red"> John </li>
<li style="color:green"> Harris </li>
<li style="color:blue"> Plunket </li>
</ol>
</body>
</html>

        Halaman Output/ HTML

        Gaya Senarai HTML

        Sekarang mari kita lihat beberapa varian ini di mana kita boleh menyesuaikan atau memformat senarai ini dengan baik hanya dengan menambahkan beberapa sifat CSS ke dalam halaman HTML, yang akan menjadikan penampilan halaman kelihatan lebih baik.

        1. Dalam senarai tidak tersusun, kami mempunyai sifat berikut yang boleh diberikan -
        2. Jenis gaya senarai – boleh berbentuk cakera, bulatan, segi empat sama atau tiada. Jadi kalangan yang anda lihat dalam item senarai tidak tersusun tidak akan muncul jika kami tidak memilih satu pun di sini, mari lakukannya.

        Contoh –

        Kod:

        <html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<ul style="list-style-type:none">
<li style="color:red"> John </li>
<li style="color:green"> Harris </li>
<li style="color:blue"> Plunket </li>
</ul>
</body>
</html>

        Halaman Output/ HTML –

        Gaya Senarai HTML

        Jadi, peluru bulatan tidak lagi wujud; anda boleh menyesuaikannya dengan pilihan yang disediakan di atas.

        Begitu juga, terdapat peruntukan untuk memilih sama ada nilai senarai pesanan akan muncul dengan angka atau Roman atau abjad dalam senarai pesanan.

        Anda boleh menetapkan jenis harta dalam

          tag untuk perkara yang sama dan jenis boleh mengambil nilai berikut.

          Jenis: “1”,” A”,” a”,” I”,” i.”

          Mari lihat Kod Contoh untuk perkara yang sama –

          Kod:

          <html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<ol type = "i">
<li style="color:red"> John </li>
<li style="color:green"> Harris </li>
<li style="color:blue"> Plunket </li>
</ol>
</body>
</html>

          Halaman Output/ HTML –

          Gaya Senarai HTML

          Begitu juga, kami juga mempunyai senarai penerangan di mana kami boleh menentukan item yang kami perlukan untuk meletakkan penerangan; katakan anda membuat halaman yang anda perlu meletakkan beberapa takrifan terhadap beberapa kata kunci, kemudian anda boleh memilih senarai penerangan.

          Tag

          Kami mempunyai teg berikut untuk mengendalikan perkara yang sama.

           – teg ini mentakrifkan senarai penerangan

          – tag ini akan memberikan istilah perihalan

          – this tag carries the description of each term

          Example –

          Code:

          <html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<dl>
<dt style="color:red"> Docker </dt>
<dd> -: this is used to make environment portable application containers </dd>
<br>
<dt style="color:green"> Kubernetes </dt>
<dd> -: this is an orchestrator for those containers make by docker </dd>
</dl>
</body>
</html>

          Output/HTML page –

          Gaya Senarai HTML

          You can also define the start property in the ordered lists in

            tag, which tells from where the count starts. Let’s see an example of the same –

            Code:

            <html>
<head> HTML Lists </head>
<body>
<h2> list of students <h2>
<ol type = "1" start="10">
<li style="color:red"> John </li>
<li style="color:green"> Harris </li>
<li style="color:blue"> Plunket </li>
</>
</body>
</html>

            Output:

            Gaya Senarai HTML

            Conclusion

            So we saw various lists in which we can place data; this data can be rendered from the model to view using javascript frameworks; what we have shown is a static page, and it can be made dynamic with JS. These lists can be formatted with bootstrap to make them look like navbars or sidebars too.

            Atas ialah kandungan terperinci Gaya Senarai HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css bootstrap html Static define if count for format using class Property JS this display ul li outlook
Kenyataan：
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
Artikel sebelumnya：Entiti HTMLArtikel seterusnya：Entiti HTML

Artikel berkaitan

Lihat lagi