selamat hari!
Dalam artikel ini, anda akan belajar tentang semua kemungkinan senarai, memahami cara membuat senarai bernombor, dan teg induk yang akan membantu anda menukar senarai bertitik tumpu ringkas kepada senarai yang lebih menarik dan ketara dengan peluru sewenang-wenangnya. Selepas melengkapkan pelajaran, anda akan mempunyai pemahaman tentang tempat senarai digunakan dan dalam keadaan apa ia boleh digunakan.
Artikel ini adalah yang ketiga dalam kursus pendek asas HTML ini. Sebelum membaca pelajaran ini, saya cadangkan untuk melalui dua sebelumnya:
Artikel baru sahaja bermula, dan anda sudah dapat melihat penggunaan senarai bertitik tumpu standard. Di tapak web saya ia kelihatan agak mudah: di sebelah kiri terdapat lekukan kecil dengan garisan dan penanda segi empat sama. Kemudian dalam artikel kita akan melihat secara terperinci apa jenis penanda yang ada, cara membuat nombor, dan juga cara membuat penanda anda sendiri.
Dalam setiap bahagian artikel, penciptaan senarai tertentu akan disertakan dengan penjelasan terperinci untuk memasukkan senarai tertentu.
1. Senarai berbulet dalam HTML
Senarai jenis ini digunakan untuk menyenaraikan dalam teks satu set elemen dengan makna yang serupa. Ini boleh menjadi senarai pautan yang berkaitan dengan topik yang sama, penjelasan terperinci untuk bahagian individu teks. Tetapi mari lihat rupa senarai bertitik tumpu dalam kod:
Dan inilah rupanya dalam penyemak imbas:
nasi. 1.1. Paparan standard HTML berbulet senarai tidak tertib dalam penyemak imbas1.1 Bulet standard untuk senarai bertitik tumpu
Dalam imej di atas (Rajah 1.1.) anda boleh melihat bulatan pada permulaan setiap item menu. Ini adalah penanda. Secara lalai, ia muncul sebagai bulatan terisi dalam penyemak imbas. Terdapat beberapa jenis penanda dalam HTML: bulatan terisi, bulatan kosong dan segi empat sama. Mereka tidak memerlukan sebarang CSS atau imej pihak ketiga:
1.2 Senaraikan penanda dalam bentuk bulatan kosong
Anda tahu nilai atribut, tetapi sekarang mari lihat cara membuat senarai bertitik HTML dalam kod. Daripada jadual di atas, kami memilih nilai kedua "bulatan" untuk atribut jenis dan menetapkannya kepada senarai bertitik tumpu kami:
| <html > <kepala > <tajuk > Contoh senarai bertitik tumpu mata dengan penanda bulatan kosong</tajuk> </kepala> <badan > <p> Bintang:</p> <ul type = "bulatan" > <li > Sirius</li> <li > Arcturus</li> <li > Pollux</li> <li > Betelgeuse</li> <li > matahari</li> </ul> </badan> </html> |
Mari lihat dengan segera bagaimana kod ini akan kelihatan dalam penyemak imbas:
nasi. 1.2. Lihat penanda senarai sebagai bulatan dalam penyemak imbas1.3 Senaraikan penanda dalam bentuk segi empat sama
Mari kita lihat juga contoh terakhir dengan penanda segi empat sama untuk senarai HTML:
Perhatikan penanda, ia telah menjadi persegi:
nasi. 1.3. Lihat penanda senarai sebagai segi empat sama dalam penyemak imbasNota PENTING: Kaedah ini tidak lagi digunakan untuk mencipta gaya untuk senarai bertitik tumpu mata. Terdapat pemisahan yang jelas antara CSS (baca apa itu CSS) dan HTML. HTML adalah untuk markup dan CSS adalah untuk mencipta penampilan yang menarik.
Kod yang mengandungi atribut ini apabila menentukan jenis dokumen semasa sebagai HTML5 (""), akan memberikan ralat semasa pengesahan. Jika anda belum mendengar apa itu pengesahan, maka ini adalah tempat untuk anda.
Ralat akan menjadi seperti berikut:
nasi. 1.4. Ralat pada pengesah apabila menggunakan atribut "jenis" senaraiKami telah menyusun senarai bertitik tumpu. Sekarang mari kita beralih kepada senarai bernombor, dan kemudian pertimbangkan senarai bersarang dan beberapa contoh siap sedia yang paling kerap digunakan pada tapak sebenar.
2. Senarai bernombor dalam HTML
Tidak seperti jenis senarai sebelumnya, senarai bernombor mempunyai satu ciri penting: mereka bernombor secara automatik. Ini berguna apabila anda perlu menomborkan senarai yang besar. Melakukannya secara manual akan mengambil banyak masa, dan anda masih boleh keliru. Senarai bernombor ditentukan menggunakan tag. Apa yang kelihatan seperti dalam amalan:
Contoh senarai bernombor:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html > <kepala > <tajuk > Contoh senarai bernombor standard</tajuk> </kepala> <badan > <p> Dari satu hingga lima:</p> <ol > <li > Pertama</li> <li > Kedua</li> <li > Ketiga</li> <li > Keempat</li> <li > Kelima</li> </ol> </badan> </html> |
Inilah rupa senarai bernombor dengan tetapan penyemak imbas standard:
nasi. 2.1. Senarai bernombor dalam penyemak imbas dengan tetapan standardSeperti pendahulunya (senarai peluru), ia mempunyai gaya tersendiri untuk memaparkan nombor. Penomboran biasa bukanlah satu-satunya jenis bullet untuk senarai bernombor dalam HTML.
2.1 Bulet standard untuk senarai bernombor
Di sini kita mempunyai pilihan bukan daripada tiga jenis penanda, tetapi lima:
| Nama penanda | nilai atribut "jenis". | Contoh Senarai |
|---|---|---|
| Penanda dalam bentuk nombor Arab | 1 |
|
| Penanda dalam bentuk huruf kecil Latin | a |
|
| Penanda dalam bentuk huruf Latin besar | A |
|
| Penanda angka Roman huruf kecil | i |
|
| Penanda angka Rom huruf besar | saya |
|
2.2 Penomboran sendiri dalam senarai HTML
Sebagai tambahan kepada keluaran biasa senarai bernombor, kami juga boleh memulakan penomboran kami dari sebarang nombor. Untuk melakukan ini, anda perlu menetapkan atribut tambahan "mula" . Penomboran ini berfungsi pada semua jenis penanda untuk senarai bernombor. Apa yang kelihatan seperti dalam amalan:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html > <kepala > <tajuk > Penomboran tersuai untuk senarai bernombor</tajuk> </kepala> <badan > <p> Kami mula menomborkan daripada dua belas:</p> <ol type = "a" start = "12" > <li > Dua belas</li> <li > Tiga belas</li> <li > Empat belas</li> <li > Lima belas</li> <li > Enam belas</li> </ol> </badan> </html> |
Begini cara ia akan muncul di tapak sebenar:
nasi. 2.2. Penomboran daripada nombor arbitrari dalam senarai bernomborDalam imej di atas, kami menomborkan senarai bermula dari dua belas, sambil membuat penanda dalam bentuk huruf Latin huruf kecil. Sekarang, saya fikir, telah menjadi jelas cara menggunakan atribut ini dalam projek anda.
Nah, sekarang mari kita beralih ke senarai HTML bersarang.
3. Bagaimana untuk membuat senarai berbilang peringkat (bersarang) dalam HTML
Senarai berbilang peringkat digunakan pada tapak untuk membina menu. Menu ini paling kerap kelihatan sama ada menu lungsur ke bawah (pelajaran dihidupkan) atau menu lungsur kiri atau kanan. Menu sedemikian membolehkan anda menyimpan elemen menu lain dalam bentuk yang padat.
Menggunakan model kereta sebagai contoh, kami akan membina senarai berbilang peringkat dalam HTML:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html > <kepala > <tajuk > Senarai Bullet Bersarang HTML</tajuk> </kepala> <badan > <ul > <li > Citroen<ul > <li > Berlingo</li> <li > C1</li> <li > C2</li> <li > C3 Picasso</li> <li > C4 Grand Picasso</li> </ul> </li> <li > KIA</li> <li > Toyota</li> <li > Audi</li> <li > Lexus</li> </ul> </badan> </html> |
Perhatikan bagaimana senarai berbilang peringkat kelihatan dalam penyemak imbas:
nasi. 3.1. Contoh senarai berbilang peringkat dalam HTMLKami membuat senarai berbilang peringkat menggunakan bulleted (tag
- ). Senarai berbilang peringkat dengan model Citroen muncul dengan penanda lain. Senarai utama telah mengisi peluru, dan senarai peringkat ke-2 mempunyai kalangan kosong. Tetapi, seperti yang anda ingat, menggunakan atribut "jenis" kita boleh mentakrifkan semula penanda (lebih baik untuk menetapkan ).
- Menggabungkan cebisan maklumat ke dalam satu struktur untuk mencipta penampilan yang boleh dibaca.
- Penerangan proses langkah demi langkah yang kompleks.
- Susunan maklumat dalam gaya jadual kandungan, dengan perenggan menunjuk ke bahagian dokumen yang berkaitan.
- (LI - Item Senarai, elemen senarai). Tag
- tidak memerlukan tag penutup yang sepadan, walaupun pada dasarnya kehadirannya tidak dilarang. Pelayar biasanya memulakan setiap item senarai baharu pada baris baharu apabila memaparkan dokumen.
Maklumat yang diberikan adalah mencukupi untuk membina senarai bertitik asas. Mari kita berikan contoh dokumen HTML menggunakan senarai bertitik tumpu, paparan yang oleh penyemak imbas ditunjukkan dalam Rajah. 2.1.
Contoh senarai bertitik tumpu mata - Aries
- Taurus
- kembar
- Kanser
- seekor singa
- Virgo
- Penimbang
- kala jengking
- Sagittarius
- Capricorn
- Aquarius
- ikan
Tanda zodiak:
nasi. 2.1. Paparan penyemak imbas senarai bertitik tumpu
Ambil perhatian bahawa sebagai tambahan kepada elemen senarai yang ditandakan dengan teg
- , elemen HTML lain mungkin ada. Dalam contoh di atas, salah satu elemen ini ialah teks biasa, yang bukan item senarai, tetapi bertindak sebagai tajuknya.
Catatan
Sesetengah buku teks dalam bahasa HTML menunjukkan bahawa teg bekas harus digunakan untuk menetapkan tajuk senarai.
(LH - Pengepala Senarai, pengepala senarai). Teg ini pada masa ini tidak dikenali oleh mana-mana pelayar biasa dan bukan sebahagian daripada spesifikasi HTML. Oleh itu, penggunaannya menjadi sia-sia, walaupun ia tidak akan membawa kepada sebarang kesilapan. Dalam tag
- dua parameter boleh ditentukan: COMPACT dan TYPE.
- .
Contoh entri:
-
.
Catatan
Pelayar mentafsirkan spesifikasi jenis titik bagi item senarai individu secara berbeza. Pelayar Netscape menukar rupa penanda untuk ini dan semua yang berikutnya sehingga definisi semula penampilan penanda yang seterusnya ditemui. Internet Explorer menukar rupa penanda hanya untuk elemen ini.
Penanda senarai grafik
Anda boleh menggunakan imej grafik sebagai bulet senarai, yang digunakan secara meluas untuk mencipta dokumen HTML yang menarik dan direka bentuk dengan baik. Sebenarnya, kemungkinan ini tidak disediakan secara langsung oleh bahasa HTML, tetapi dilaksanakan secara buatan. Ini tidak bermakna berbuat demikian tidak disyorkan atau tidak boleh dicela, tetapi hanya tiada binaan bahasa HTML khas akan digunakan di sini.
Untuk memahami idea, anda perlu memahami mekanisme untuk melaksanakan senarai pada halaman HTML. Ia ternyata bahawa tag senarai
- (sememangnya, senarai tag jenis lain, dibincangkan di bawah) melaksanakan satu tugasan - ia memberitahu penyemak imbas bahawa semua maklumat yang terdapat selepas teg ini harus dipaparkan beralih ke kanan (berinden) dengan jumlah tertentu. Tag
- , yang menunjuk kepada item senarai individu, menyediakan penanda item senarai standard.
Jika kita perlu membina senarai dengan penanda grafik, maka kita boleh melakukannya tanpa teg sama sekali
- . Ia akan mencukupi untuk memasukkan imej grafik yang dikehendaki sebelum setiap elemen senarai. Satu-satunya masalah yang perlu diselesaikan ialah memisahkan elemen senarai antara satu sama lain. Anda boleh menggunakan tag perenggan untuk ini
Atau paksa suapan baris
. Contoh pelaksanaan senarai dengan penanda grafik, paparan yang ditunjukkan dalam Rajah. 2.2 ditunjukkan di bawah:Senarai berbulet Tanda zodiak:
Aries
nasi. 2.2. Senarai bertitik tumpu mata dengan titik tumpu grafik
Dalam contoh yang diberikan, fail grafik Green_ball.gif digunakan sebagai penanda item senarai. Ambil perhatian bahawa penggunaan grafik pada halaman HTML boleh meningkatkan jumlah maklumat yang dihantar dengan ketara. Walau bagaimanapun, dalam kes ini peningkatan ini amat tidak ketara. Di sini fail yang sama digunakan untuk semua penanda,
yang akan dihantar sekali sahaja. Saiz fail imej kecil juga sangat kecil.
Catatan
Teknik untuk membuat senarai dengan titik bergrafik dibincangkan secara bergilir dalam Bab 8.
Senarai bernombor
Satu lagi jenis senarai yang dilaksanakan dalam HTML ialah senarai bernombor. Jika tidak, senarai jenis ini dipanggil tertib. Nama akhir sering digunakan sebagai terjemahan rasmi nama tag yang sepadan
- , dengan bantuan senarai jenis ini yang disusun dalam dokumen HTML (OL - Senarai Tertib, senarai tersusun).
- .
Berikut ialah contoh dokumen HTML menggunakan senarai bernombor: paparan yang mana pelayar ditunjukkan dalam Rajah. 2.3.
Contoh senarai bernombor - Sirius
- K anopus
- Arcturus
- Alpha Centauri
- Vega
- K appella
- Rigel
- Procyon
- Achernar
- Beta Centauri
- Wetelgeuse
- Aldebaran
. . .- Mizar
. . .- polar
Bintang paling terang yang boleh dilihat dari Bumi:
nasi. 2.Z. Senarai bernombor
Dalam tag
- Parameter berikut boleh ditentukan: COMPACT, TYPE dan START.
- .
Contoh entri:
- .
START parameter teg
- membolehkan anda mula menomborkan senarai daripada sesuatu selain daripada satu. Nilai parameter START mestilah sentiasa nombor asli, tanpa mengira jenis penomboran senarai. Berikut ialah contoh:
- untuk senarai bernombor, membenarkan penggunaan TYPE dan VALUE parameter. Parameter TYPE boleh mengambil nilai yang sama seperti untuk teg
- .
- .
Catatan
Penyemak imbas mentafsir jenis penomboran untuk item senarai individu secara berbeza. Pelayar Netscape menukar jenis penomboran untuk elemen ini dan semua yang berikutnya sehingga penggantian seterusnya ditemui. Internet Explorer menukar rupa nombor hanya untuk elemen ini.
Znilai parameter teg VALUE
- - membolehkan anda menukar nombor elemen senarai yang diberikan. Ini mengubah penomboran semua elemen berikutnya. Aplikasi biasa ialah senarai dengan beberapa elemen tiada. Contoh senarai sedemikian telah diberikan di atas (Rajah 2.3). Ia menyediakan senarai tersusun bagi bintang paling terang, di mana tempat ke-58 dan ke-75 mengandungi bintang yang boleh dilihat dengan jelas di latitud kami (Mizar ialah bintang paling terang dalam buruj Ursa Major, dan Polaris ialah bintang paling terang dalam buruj Ursa Minor) .
Mari kita berikan satu lagi contoh asal menggunakan pelbagai jenis penomboran. Kod HTML di bawah mengandungi tiga senarai dengan penomboran berbeza. Untuk memudahkan tontonan, setiap senarai diletakkan dalam sel jadual yang berasingan. Ketiga-tiga senarai adalah sama dan berbeza hanya dalam jenis penomboran: di lajur pertama jadual terdapat angka Arab, di kedua - angka Rom, dan di ketiga penomboran adalah dalam huruf Latin. Sila ambil perhatian bahawa elemen senarai kosong, iaitu selepas sebarang teg
- tiada data. Contoh seperti ini boleh digunakan sebagai jadual surat-menyurat antara menulis nombor dalam angka Arab dan Rom. Ternyata mana-mana pelayar yang menyokong senarai boleh digunakan sebagai penjana jadual sedemikian (Rajah 2.4), anda hanya perlu menaip kod HTML yang diberikan. Penomboran dalam angka Rom berfungsi dengan betul sehingga nilai 3999. Dengan mengkaji lajur kanan, anda boleh memahami cara penomboran dalam huruf Rom dilakukan. Setelah penomboran satu huruf (dari A hingga Z) habis, nombor dua huruf pertama diambil sebagai nombor seterusnya - AA, dsb.
Menggunakan pelbagai jenis penomboran dalam senarai -
. . .
-
. . .
-
. . .
nasi. 2.4. Jenis penomboran senarai HTML yang berbeza
Senarai definisi
Senarai definisi, juga dipanggil kamus definisi, adalah jenis senarai khas. Tidak seperti jenis senarai lain, setiap elemen senarai definisi sentiasa terdiri daripada dua bahagian. Bahagian pertama elemen senarai mengandungi istilah yang ditakrifkan, dan bahagian kedua mengandungi teks dalam bentuk entri kamus yang mendedahkan maksud istilah tersebut.
Senarai definisi ditentukan menggunakan teg bekas
- (Senarai Definisi). Di dalam bekas dengan tag
- (Istilah Definisi) istilah yang ditakrifkan ditanda, dan teg
- (Definisi Penerangan) - perenggan dengan definisinya. Untuk tag
- Dan
- Anda boleh meninggalkan teg penutup yang sepadan.
Secara umum, senarai definisi ditulis seperti berikut:
- Penggal
- Definisi istilah
Dalam teks selepas tag
- elemen peringkat blok seperti tag perenggan tidak boleh digunakan
Atau tajuk
-
. Sebagai peraturan, teks istilah yang ditentukan harus terletak pada satu baris. Teks yang mengandungi takrif istilah dipaparkan bermula pada baris seterusnya (atau setiap baris untuk sesetengah penyemak imbas) selepas takrif istilah, diinden ke kanan. Dalam maklumat yang diletakkan selepas tag
- , elemen peringkat blok boleh didapati. Ia berikutan, khususnya, bahawa senarai definisi boleh bersarang.
Dalam tag
- parameter COMPACT boleh ditentukan, tujuannya adalah serupa dengan senarai lain yang diterangkan di atas.
- Orang yang Phlegmatic
- Pasif, sangat rajin, lambat menyesuaikan diri;
mood yang stabil, sedikit terdedah kepada pengaruh luar;
kelesuan tindak balas emosi dan kelambatan dalam aktiviti kemahuan
- Sanguine
- Aktif, bertenaga, mudah menyesuaikan diri, -
keceriaan dan mobiliti tindak balas emosi, kelajuan dan kekuatan manifestasi kehendak
- Kolerik
- Aktif, sangat bertenaga, berterusan;
ketidakupayaan dan kekuatan tindak balas emosi, manifestasi ganas kehendak
- Melankolik
- Pasif, mudah letih, sukar menyesuaikan diri, -
kelemahan manifestasi kehendak dan dominasi mood tertekan, keraguan diri - Zempya
- Bulan
- Mapc
- Phobos
- Deimos
- Uranus
- Ariel
- Umbriel
- Titania
- Oberon
- Miranda
- Neptun
- Triton
- Nereid
Senarai bertitik tumpu ditakrifkan dengan menambahkan titik tumpu kecil, biasanya dalam bentuk bulatan terisi, sebelum setiap item senarai. Senarai itu sendiri dibentuk menggunakan bekas
- , dan setiap item senarai bermula dengan tag
- seperti yang ditunjukkan di bawah.
- Perkara pertama
- Perkara kedua
- Perkara ketiga
Senarai mesti mengandungi teg penutup
Walaupun tidak diperlukan, kami sentiasa mengesyorkan menambahkannya untuk memisahkan item senarai dengan jelas.
- Cheburashka
- Buaya Gena
- Shapoklyak
- Tikus Larisa
- Pertama
- Kedua
- Ketiga
- Pertama
- Kedua
- Ketiga
- Pertama
- Kedua
- Ketiga
- perubahan dalam kepercayaan agama (pilihan: Buddhisme, Konfusianisme, Hinduisme). Tawaran istimewa - Yahudi dan Islam bersama;
- perubahan dalam kepercayaan kepada maksum pihak kegemaran;
- kepercayaan bahawa makhluk asing wujud;
- keutamaan untuk sistem politik sebagai yang terbaik dari jenisnya (untuk dipilih daripada: feudalisme, sosialisme, komunisme, kapitalisme).
- Dan . Berikut ialah contoh:
- Elemen pertama
- Elemen kedua
- Elemen ketiga
- Elemen pertama
- Elemen kedua
- Elemen ketiga
Berikut ialah contoh dokumen HTML yang menggunakan senarai definisi:
Contoh senarai definisi Klasifikasi perangai manusia biasa,
berasaskanpada pandangan Hippocrates
Paparan dokumen HTML yang diberikan dalam penyemak imbas ditunjukkan dalam Rajah. 2.5.
nasi. 2.5. Senarai definisi (menyerupai sekumpulan entri dalam kamus)
Jenis senarai
Dan - .
Jenis senarai ini pada asalnya direka bentuk agar lebih padat daripada senarai bertitik tumpu biasa. Menurut peraturan untuk menulis elemen senarai ini, tidak dibenarkan menggunakan elemen blok di dalamnya, yang bermaksud mustahil untuk melaksanakan penyarang senarai jenis ini. Setiap elemen senarai ialah satu baris teks.
Untuk senarai seperti
ia telah dirancang untuk memperkenalkan had pada "panjang teks unsur senarai (24 aksara). Batasan sedemikian akan membolehkan kita memperolehnya senarai seperti
dalam bentuk yang serupa dengan keluaran senarai direktori dalam sistem pengendalian UNIX dan MS-DOS apabila menggunakan suis /W (dalam beberapa lajur). Selain itu, penanda tidak dipaparkan untuk item senarai jenis ini. Pada masa ini, semua rancangan ini belum dilaksanakan, kerana penggunaan lanjut senarai jenis ini tidak disyorkan. Versi moden penyemak imbas memaparkan senarai jenis ini dengan cara yang sama seperti senarai seperti
- .
Senarai Bersarang
Ada kalanya anda perlu memasukkan keseluruhan senarai jenis yang sama atau yang lain dalam elemen senarai satu jenis. Ini akan membuat senarai berbilang peringkat atau bersarang. HTML membenarkan sarang sewenang-wenangnya pelbagai jenis senarai, tetapi berhati-hati mesti diambil semasa menyusunnya.
Di bawah ialah kod HTML untuk dokumen dengan senarai bersarang, paparannya ditunjukkan dalam Rajah. 2.6. Dalam contoh ini, setiap item dalam senarai bertitik tumpu mengandungi senarai bernombornya sendiri.
Contoh senarai bersarang Satelit beberapa planet
Contoh 11.1 menunjukkan kod HTML untuk menambah senarai bertitik tumpu pada halaman web.
Contoh 11.1. Buat senarai bertitik tumpu mata
Senarai berbulet
Hasil daripada contoh ini ditunjukkan dalam Rajah. 11.1.
nasi. 11.1. Paparan senarai bertitik tumpu mata
Beri perhatian kepada padding di bahagian atas, bawah dan kiri senarai. Inden sedemikian ditambah secara automatik.
Penanda boleh mengambil salah satu daripada tiga bentuk: bulatan (lalai), bulatan dan segi empat sama. Untuk memilih gaya penanda, gunakan atribut jenis teg
- . Nilai yang boleh diterima diberikan dalam jadual. 11.1
Jadual 11.1. Senaraikan Gaya Bullet
Jenis senarai kod HTML Contoh Senaraikan dengan penanda bulatan
Senaraikan dengan peluru bulatan
Senaraikan dengan peluru segi empat sama
Kemunculan penanda mungkin berbeza sedikit dalam pelayar yang berbeza, serta semasa menukar saiz fon dan teks.
Mencipta senarai dengan peluru segi empat sama ditunjukkan dalam Contoh 11.2.
Contoh 11.2. Jenis penanda
Senarai berbulet Mengubah Akidah
Hasil daripada contoh ini ditunjukkan dalam Rajah. 11.2.
Senarai- Ini adalah ayat yang saling berkaitan bermula dengan penanda atau nombor. Menyenaraikan maklumat struktur bantuan pada halaman WEB. Senarai boleh dibuletkan, bernombor atau senarai definisi. Mereka berbeza dalam cara mereka direka.
Senarai bertitik tumpu mata. Senarai bertitik tumpu ialah sekumpulan item. Setiap elemen senarai sedemikian ditandakan dengan penanda khas, biasanya dalam bentuk bulatan hitam. Senarai bertitik tumpu dibentuk menggunakan sepasang tag. Dan setiap elemen senarai diletakkan di dalam tag
Berikut adalah hasil daripada contoh di atas:
Tag penutup
- , elemen peringkat blok boleh didapati. Ia berikutan, khususnya, bahawa senarai definisi boleh bersarang.
pilihan, tetapi saya menasihatkan anda untuk sentiasa menambahkannya pada elemen senarai yang berasingan dengan jelas. Tag penutup -
P contoh entri:
- .
- .
Entri ini menentukan penomboran senarai bermula dengan huruf Latin besar "E". Untuk jenis penomboran lain, entri START=5 akan menetapkan penomboran, masing-masing, daripada nombor "5", angka Rom "V", dsb.
Menukar jenis penomboran senarai dan nilai nombor boleh dilakukan untuk mana-mana elemen senarai. Tag
- untuk senarai bernombor, membenarkan penggunaan TYPE dan VALUE parameter. Parameter TYPE boleh mengambil nilai yang sama seperti untuk teg
Parameter COMPACT mempunyai makna yang sama seperti senarai bertitik tumpu. Parameter TYPE digunakan untuk menentukan jenis penomboran senarai. Boleh mengambil nilai berikut:
JENIS = A - menetapkan penanda dalam bentuk huruf Latin besar;
JENIS = a - menetapkan penanda dalam bentuk huruf Latin huruf kecil;
JENIS = I - menetapkan penanda dalam bentuk angka Rom yang besar;
JENIS = i - menetapkan penanda dalam bentuk angka Rom kecil;
JENIS = 1 - menetapkan penanda dalam bentuk angka Arab.
Nilai lalai sentiasa TYPE = 1, iaitu penomboran menggunakan angka Arab. Ini juga terpakai pada senarai bernombor bersarang. Di sini, tidak seperti senarai bertitik tumpu mata, penyemak imbas secara lalai tidak membuat penomboran berbeza pada tahap sarang senarai yang berbeza. Ambil perhatian bahawa selepas nombor elemen senarai sentiasa ada tanda "titik" tambahan.
Parameter TYPE dengan nilai yang sama boleh digunakan untuk menentukan gaya penomboran untuk elemen senarai individu. Untuk melakukan ini, parameter TYPE dengan nilai yang sepadan dibenarkan untuk dinyatakan dalam tag elemen senarai
Senarai jenis ini biasanya merupakan urutan tertib elemen individu. Perbezaan daripada senarai bertitik tumpu ialah dalam senarai bernombor, setiap elemen secara automatik didahului oleh nombor siri. Jenis penomboran bergantung pada penyemak imbas dan boleh ditetapkan oleh parameter tag senarai. Jika tidak, pelaksanaan senarai bernombor sangat serupa dengan pelaksanaan senarai bertitik tumpu.
Tag
- Dan
Untuk membuat senarai bernombor, anda harus menggunakan teg bekas, di mana semua elemen senarai terletak di dalamnya. Teg senarai pembukaan dan penutupan menyediakan pemisah baris sebelum dan selepas senarai, dengan itu memisahkan senarai daripada kandungan utama dokumen.
Seperti senarai bertitik tumpu, setiap item dalam senarai bernombor mesti bermula dengan teg
Penanda senarai boleh terdiri daripada tiga jenis: bulatan terisi, bulatan dan segi empat sama. Jenis penanda ditetapkan menggunakan parameter jenis teg
- . Parameter jenis boleh mengambil nilai berikut: cakera , bulatan dan segi empat sama .
- Elemen pertama
- Elemen kedua
- Elemen ketiga
- Elemen pertama
- Elemen kedua
- Elemen ketiga
- Elemen pertama
- Elemen kedua
- Elemen ketiga
- Elemen pertama
- Elemen kedua
- Elemen ketiga
- Dan . Sebagai contoh:
- Elemen pertama
- Elemen kedua
- Elemen ketiga
- Elemen pertama
- Elemen kedua
- Elemen ketiga
- Nombor Arab (1, 2, 3, ...) - taip="1" ;
- Angka Rom dalam huruf besar (I, II, III, ...) - type="I" ;
- angka Roman huruf kecil (i, ii, iii, ...) - taip="i" ;
- huruf Latin besar (A, B, C, ...) - type="A" ;
- huruf Latin huruf kecil (a, b, c, ...) - type="a" ;
- Elemen pertama
- Elemen kedua
- Elemen ketiga
- Elemen pertama
- Elemen kedua
- Elemen ketiga
- , dan definisinya
- . Di bawah ialah struktur senarai definisi.
- Elemen pertama
- Penerangan tentang elemen pertama
- Elemen kedua
- Penerangan tentang elemen kedua
- Elemen ketiga
- Penerangan tentang elemen ketiga
Dan ia kelihatan seperti ini:
Elemen pertama Penerangan tentang elemen pertama Elemen kedua Penerangan mengenai elemen kedua Elemen ketiga Penerangan mengenai elemen ketiga
Kadangkala cara terbaik untuk menyampaikan maklumat di tapak web adalah dengan senarai bertitik tumpu. Senarai sedemikian menarik perhatian dengan baik, mudah difahami pelawat, ringkas dan mendedahkan hubungan unsur-unsur.
Anda perlu memahami bahawa Internet tidak sesuai untuk bentuk kandungan yang panjang dan deskriptif. Pengguna lebih suka bahan yang boleh diimbas (boleh skim) yang memudahkan untuk melangkau sebahagian besar teks dan mengenal pasti kawasan yang menarik dengan cepat.
Banyak teknik pemformatan web yang berbeza meningkatkan pengalaman kandungan. Anda boleh membuat teks tebal, menggunakan inden dan warna, menukar jarak baris, mencipta (senarai bertitik tumpu) - semua teknik ini bagus untuk melihat kandungan dengan berkesan.
Beberapa titik kecil menarik mata dan menjadikan titik kompleks jelas. Pembaca menganggap buletin sebagai penanda maklumat yang ringkas tetapi sangat penting. Tidak menghairankan apabila menjalankan penyelidikan kebolehgunaan, jelas betapa minat pembaca terhadap senarai bertitik tumpu kerana mereka membantu mencerna kandungan secepat mungkin.
Bandingkan dua pilihan kandungan yang berbeza. Anda mungkin akan mendapati bahawa maklumat yang dibentangkan dalam pilihan kedua lebih mudah untuk dihadam. Ini kerana ayat-ayat tersebut dibentangkan dalam senarai menegak, setiap satu daripadanya menduduki satu baris. Sebaliknya, dalam pilihan 1, pembaca terpaksa mencarinya dalam perenggan teks yang kurang berstruktur.
Pilihan 1
Pakej spa kami termasuk penginapan dua malam, dua rawatan spa selama 50 minit pilihan anda, sarapan pagi di bilik anda untuk dua orang dan bakul hadiah semasa ketibaan.
Pilihan 2
Pakej SPA kami termasuk:
- penginapan dua malam;
- dua rawatan SPA selama 50 minit pilihan anda;
- sarapan pagi di dalam bilik untuk dua orang;
- bakul hadiah semasa ketibaan.
Jangan risau bahawa pilihan 2 mengambil lebih banyak ruang. Pengguna tidak terganggu dengan tatal tambahan selagi ia wajar dengan mendapatkan maklumat yang menarik. Malah, halaman pendaratan yang kelihatan mesra dan mudah difahami kerana penggunaan mata bullet yang betul akan menerima lebih banyak perhatian pengguna daripada tapak yang menyambut mereka dengan dinding teks. Mari kita lihat dengan lebih dekat cara membuat senarai bertitik tumpu dengan betul.
1. Semua item senarai hendaklah mempunyai lebih kurang panjang baris yang sama
Senarai bertitik tumpu adalah lebih berkesan apabila ia mengandungi item yang berkaitan antara satu sama lain. Lebih-lebih lagi, mereka semua mesti mempunyai tahap kepentingan yang sama. Jika boleh, cuba muatkan setiap item ke dalam saiz baris yang telah ditetapkan supaya tiada satu pun kelihatan lebih penting daripada yang lain. Perfeksionisme sedemikian bukan sahaja menggembirakan mata, tetapi juga tidak membebankan senarai.
salah
- beg tidur;
- pakaian renang untuk berjalan-jalan ke air terjun;
- pelindung matahari;
- jaket kalis air untuk hari hujan. Ribut petir mungkin.
Perbezaan panjang menjadikan senarai tidak teratur dan tidak sekata.
Betul
Bawa barang-barang berikut ke kem:
- beg tidur;
- pelindung matahari;
- pakaian mandi;
- baju hujan.
2. Gunakan senarai bernombor hanya apabila urutan atau bilangan item adalah penting.
Senarai bernombor biasanya digunakan dalam kes di mana item mesti disenaraikan dalam susunan tertentu, seperti susunan operasi apabila bekerja dengan program. Atau apabila bilangan mata penting, contohnya, dalam pelbagai jenis gasing (10 teknik terbaik teratas, dsb.).
Jika pesanan atau jumlah item tidak penting, tidak perlu menomborkan senarai. Ini hanya akan menimbulkan kekeliruan: dalam ujian pengguna yang dijalankan, peserta melihat senarai bernombor dan tersilap menyangka mereka perlu melengkapkan setiap item apabila mereka hanya perlu memilih satu.
salah
1. Borang hubungan di laman web
2. Sembang
3. Panggilan telefon
4. Pertemuan peribadiBetul
Sila hubungi kami melalui salah satu cara berikut:
- Borang hubungan di laman web
- Panggilan telefon
- Pertemuan peribadi
3. Gunakan struktur ayat selari
Gaya penulisan item senarai hendaklah konsisten. Pelbagai jenis perkataan boleh kelihatan tidak gramatis dan memperlahankan (atau malah mengelirukan) pembaca.
Perkara yang sama berlaku untuk struktur unsur. Setiap satu mesti bermula dengan bahagian ucapan yang sama (kata nama, kata kerja, dll.) dan mewakili sama ada serpihan atau ayat lengkap.
salah
- haiwan mungkin takut dengan bunyi yang kuat;
- garis kuning menandakan tempat di mana anda boleh berdiri;
- Menjaga kebersihan taman adalah tugas semua orang.
Dalam contoh ini, setiap perenggan bermula dengan perkataan daripada bahagian ucapan yang berbeza.
Betul
Sila ikut peraturan untuk tinggal di taman:
- buang sampah sahaja ke dalam tong sampah;
- jangan buat bising;
- jangan melintasi garisan kuning;
- menjaga kebersihan taman.
Senarai kedua lebih mudah dibaca kerana setiap frasa bermula dengan perkataan dari satu bahagian ucapan, dalam kes ini bentuk imperatif kata kerja.
4. Elakkan mengulang perkataan di awal ayat
Jika boleh, cuba mulakan setiap perenggan dengan perkataan yang berbeza, kerana ini akan memudahkan untuk membezakannya.
salah
Cara memilih nanas masak:
- perhatikan baunya: ia harus menyenangkan;
- perhatikan strukturnya: nanas harus kuat;
- perhatikan warnanya: ia harus kuning keemasan.
Betul
Cara memilih nanas masak:
- menghidunya: bau harus menyenangkan;
- memerahnya: nanas harus padat;
- memberi perhatian kepada warna: ia harus kuning keemasan.
5. Frasa atau ayat sebelum senarai bertitik tolak hendaklah jelas dan mendedahkan isi kandungannya
Kata petunjuk (perkataan sejurus sebelum senarai bertitik tumpu) adalah sangat penting kerana ia memberitahu pembaca apakah senarai itu dan mengapa ia penting. Pendahuluan tidak perlu menjadi ayat yang lengkap, terutamanya jika setiap titik dibincangkan dengan secukupnya.
salah
Cuti di British Columbia:
- mendaki;
- muzium seni;
- berkanu di tasik.
Lead-in (British Columbia Holidays) tidak menerangkan penyenaraian dengan jelas. Selain itu, senarai ini menyenaraikan aktiviti, tetapi "muzium seni" bukan aktiviti.
Betul
Percutian anda di British Columbia termasuk:
- mendaki;
- melawat muzium;
- berkanu di tasik.
6. Ikut peraturan senarai
Terdapat peraturan khusus untuk memformat senarai bertitik tumpu mata.
- jika senarai bertitik tumpu terdiri daripada keseluruhan ayat, maka setiap item bermula dengan huruf besar dan berakhir dengan noktah;
- jika anda berurusan dengan serpihan ayat, tidak perlu meletakkan noktah di hujungnya. Mengikut peraturan, huruf besar juga tidak digunakan, tetapi untuk meningkatkan kemudahan teks, ia masih disyorkan untuk menggunakannya.
salah
- anda harus berdiri untuk orang yang dibuli
- beritahu orang dewasa tentang keadaan ini
- menasihati mangsa untuk memberitahu orang dewasa tentang keadaan itu
- memberikan sokongan dengan menunjukkan keprihatinan
Perenggan tidak bermula dengan huruf besar, dan tiada noktah di hujungnya.
Betul
Jika anda menyaksikan buli:
- Anda harus membela orang yang dibuli.
- Beritahu orang dewasa tentang keadaan ini.
- Nasihatkan mangsa untuk memberitahu orang dewasa tentang situasi ini.
- Berikan sokongan dengan menunjukkan keprihatinan.
salah
- Kitar semula barangan kertas dan plastik.
- Gunakan lebih sedikit barang pakai buang.
- Kongsi dengan orang lain perkara yang anda tidak perlukan.
- Tukar kereta anda dengan basikal.
Ini adalah serpihan ayat, jadi tanda baca tidak diperlukan.
Betul
Anda boleh melindungi alam sekitar dengan:
- Kitar semula barangan kertas dan plastik
- Gunakan lebih sedikit barang pakai buang
- Kongsi perkara yang anda tidak perlukan dengan orang lain
- Tukar kereta anda dengan basikal
7. Jangan terlalu menggunakan senarai bertitik tolak kerana ia mungkin kehilangan keberkesanannya.
Seperti kebanyakan teknik reka bentuk, menggunakan mata peluru terlalu kerap boleh menjadi tidak produktif, jika tidak berbahaya. Banyak titik dan sengkang boleh menjadi lebih mengelirukan kepada pelawat daripada dinding teks. Oleh itu, anda harus lebih berhati-hati dalam memilih apa yang akan dipaparkan dalam format senarai bertitik tumpu.
Senarai menegak adalah baik apabila anda mempunyai tiga atau lebih mata yang anda ingin menarik perhatian pembaca. Kurang daripada tiga mata lebih baik ditinggalkan dalam satu ayat.
Elakkan senarai kompaun di mana satu senarai disertakan dalam senarai yang lain, kerana ini, seperti yang anda boleh bayangkan, menjadikannya sukar untuk difahami. Jika senarai kompaun diperlukan, pastikan ia berbeza antara satu sama lain dalam gaya penulisan.
Kesimpulan
Ini adalah cadangan yang paling umum, dan setiap syarikat boleh memilih gaya reka bentuknya sendiri. Jika organisasi anda mengikut panduan gaya, semak panduan sebelum anda membuat keputusan untuk membuat sebarang perubahan. Aspek penting dalam penulisan yang betul ialah konsistensi gaya merentas semua dokumen syarikat dan rekod bertulis.
Senarai menegak menarik perhatian dan memberi makna kepada setiap item dalam senarai. Pendekatan ini lebih berkesan kerana kandungan sedemikian lebih mudah untuk diimbas dan difahami.
Penukaran tinggi kepada anda!
Berdasarkan bahan
Di bawah adalah penanda dalam bentuk bulatan dan segi empat sama.
Dan inilah rupanya:
Senarai bernombor. Senarai bernombor juga merupakan sekumpulan item, tetapi item tersebut dilabelkan dengan nombor atau huruf. Senarai bernombor dibentuk menggunakan sepasang tag dan setiap elemen senarai diletakkan di dalam tag
Dan ia kelihatan seperti ini:
Jenis penanda juga ditentukan menggunakan parameter jenis teg
- .Yang berikut boleh berfungsi sebagai elemen penandaan:
Menggunakan parameter teg permulaan
- anda boleh menetapkan nilai permulaan penanda. Di bawah ialah senarai contoh menggunakan angka Rom bermula dengan 8.
Ini kelihatan seperti:
Senarai definisi. Senarai definisi terdiri daripada istilah dan definisinya. Senarai sedemikian ditentukan menggunakan tag
- Dan
- , yang menunjuk kepada item senarai individu, menyediakan penanda item senarai standard.
Parameter COMPACT ditulis tanpa nilai dan digunakan untuk menunjukkan kepada penyemak imbas bahawa senarai yang diberikan harus dipaparkan dalam bentuk padat. Contohnya, fon atau jarak antara baris senarai, dsb. mungkin dikurangkan.
Catatan
Pada masa ini, kehadiran parameter COMPACT dalam teg
- tidak menjejaskan paparan senarai dalam pelayar terkemuka. Oleh itu, menggunakan parameter ini adalah sia-sia, terutamanya kerana penggunaannya tidak disyorkan oleh spesifikasi HTML 4.0.
Parameter TYPE boleh mengambil nilai berikut: cakera, bulatan dan segi empat sama. Parameter ini digunakan untuk memaksa penampilan bulet senarai. Jenis penanda yang tepat bergantung pada penyemak imbas yang anda gunakan. Pilihan paparan biasa adalah seperti berikut:
JENIS = cakera - penanda dipaparkan sebagai bulatan terisi; JENIS = bulatan - penanda dipaparkan sebagai bulatan terbuka; JENIS = segi empat sama - penanda dipaparkan sebagai petak terisi. Contoh entri:
-
.
Nilai lalai ialah TYPE = cakera. Untuk senarai bertitik tumpu bersarang, nilai lalai ialah cakera pada tahap pertama, bulatan pada tahap kedua, segi empat sama pada tahap ketiga dan seterusnya. Inilah yang dilakukan dalam versi terkini pelayar Netscape dan Internet Explorer. Sila ambil perhatian bahawa pelayar lain mungkin memaparkan penanda secara berbeza. Contohnya, dalam spesifikasi HTML 4.0, jenis penanda yang dipaparkan apabila TYPE = segi empat sama dinyatakan sebagai garis besar segi empat sama.
Parameter TYPE dengan nilai yang sama boleh digunakan untuk menentukan jenis penanda untuk elemen senarai individu. Untuk melakukan ini, parameter TYPE dengan nilai yang sepadan dibenarkan untuk dinyatakan dalam tag elemen senarai
- .
Tetapi kita boleh menggabungkan senarai berbilang peringkat dengan senarai bernombor dan bertitik tumpu seperti ini:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <html > <kepala > <tajuk > Senarai bernombor, bertitik bulet dan berbilang peringkat dalam HTML</tajuk> </kepala> <badan > <ul > <li > Kumpulan pertama tulip<ol > <li > Gred pertama<ul > <li > Tulip awal yang ringkas</li> </ul> </li> <li > Kelas kedua<ul > <li > Terry tulip</li> </ul> </li> </ol> </li> </ul> </badan> </html> |
Dalam contoh di atas kita mempunyai sarang berganda (2 tahap). Pertama, senarai dua kelas tulip disertakan; kami mempunyai ia bernombor. Kemudian senarai bertitik tumpu bersarang dalam setiap item dalam senarai bernombor.
Mari lihat bagaimana ia kelihatan dalam penyemak imbas:
nasi. 3.2. Contoh senarai bernombor berbilang peringkat kepada senarai bertitik tumpu dalam penyemak imbas4. Bahan berguna pada senarai HTML
Ini adalah maklumat yang memerlukan pemahaman tentang sifat CSS. Untuk melakukan ini, saya mengesyorkan mempelajari pelajaran berikut: . Semua contoh akan serta-merta dengan kod sumber dan dibahagikan kepada tab HTML (struktur), CSS (gaya) dan Hasil (hasil).
4.1 Bagaimana untuk membuat senarai HTML menjadi rentetan
Menukar senarai HTML kepada rentetan mungkin diperlukan semasa membuat menu mendatar. Ia sangat mudah dilakukan:
4.2 Cara membuat senarai HTML tanpa ikon
Sifat jenis gaya senarai dalam CSS bertanggungjawab untuk ini (butiran lanjut):
4.3 Bagaimana untuk memusatkan senarai dalam HTML
Item senarai ialah elemen blok, jadi ia perlu dipusatkan menggunakan padding. Tetapi ada satu perkara penting - kita mesti menyatakan lebar secara eksplisit untuk penjajaran berfungsi:
4.4 Cara membuat senarai dalam HTML dengan gambar
Hanya satu sifat CSS, list-style-image , sudah memadai. Di dalam url, nyatakan alamat sebelum ikon. Saya hanya ingin ambil perhatian bahawa lebih baik untuk segera memilih imej kecil, kerana ketinggian baris senarai bergantung padanya:
4.5 Senarai berbulet HTML bulet anda
Dalam kes ini, anda perlu menyambungkan ikon fon terlebih dahulu (contohnya, FontAwesome ). Kemudian anda boleh membuat sebarang ikon dan bukannya penanda standard:
4.6 Cara membuat senarai dalam HTML dalam beberapa lajur
Untuk membuat senarai dalam beberapa lajur, kami akan menggunakan sifat kiraan lajur CSS (sifat itu hanya disokong dalam penyemak imbas berikut: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Anda juga perlu menetapkan ketinggian senarai untuk melihat pemisahan kepada berbilang lajur:
5. Berlatih bekerja dengan senarai
Dalam video di bawah anda boleh melihat semua kerja dengan senarai HTML dalam amalan:
HTML menyediakan set tag khas untuk menyampaikan maklumat dalam bentuk senarai. Senarai adalah salah satu bentuk pembentangan data yang paling biasa digunakan, baik dalam dokumen elektronik dan bercetak. Kami menjumpai senarai hampir setiap hari - ia boleh menjadi senarai pembelian yang diperlukan di kedai, pelajar dalam kelas atau perkara yang perlu dilakukan. Keupayaan untuk menyusun struktur senarai tersedia dalam banyak editor teks, khususnya, pemproses perkataan yang berkuasa Microsoft Word mempunyai alat yang mudah untuk memformat senarai pelbagai jenis (kemungkinan mencipta senarai HTML menggunakan Microsoft Word dibincangkan dalam Bab 8). Berikut adalah beberapa kes yang penggunaan senarai agak mudah:
Ambil perhatian bahawa perkara di atas disusun dengan tepat dalam bentuk struktur senarai.
HTML menyediakan jenis senarai utama berikut: bertitik tumpu, bernombor dan senarai definisi. Teg berikut digunakan untuk melaksanakan senarai pelbagai jenis:
- ,
- ,
- ,
- , dengan bantuan senarai jenis ini yang disusun dalam dokumen HTML (UL - Senarai Tidak Tertib, senarai tidak tersusun).
Dalam senarai berbulet, aksara khas yang dipanggil penanda senarai digunakan untuk menyerlahkan elemennya (ia sering dipanggil bullet, yang merupakan sebutan rasmi bagi istilah bullet Inggeris). Kemunculan penanda senarai ditentukan oleh penyemak imbas, dan apabila membuat senarai bersarang, penyemak imbas secara automatik mempelbagaikan rupa penanda pada tahap bersarang yang berbeza.
Tag Dan<LI >
Untuk membuat senarai bertitik tumpu mata, anda mesti menggunakan bekas teg, di mana semua elemen senarai terletak di dalamnya. Teg senarai pembukaan dan penutupan menyediakan pemisah baris sebelum dan selepas senarai, dengan itu memisahkan senarai daripada kandungan utama dokumen, jadi tidak perlu menggunakan tag perenggan di sini
.
Setiap elemen senarai mesti bermula dengan tag
