Halimbawang code ng listahan ng kahulugan:

Mga Listahan ng Kahulugan Term 1 Kahulugan ng Term 1 Term 2 Kahulugan ng Term 2

Resulta:

Mga Nested na Listahan

May mga sitwasyon kung kailan kailangan mong isama ang iyong sariling listahan sa isang elemento ng listahan. Ang ganitong mga listahan ay tinatawag na multi-level o nested. Upang gawin ito, ginagamit ang isang kumbinasyon ng mga tag ng listahan na kilala na namin.

Halimbawang code para sa isang multi-level na listahan:

Mga Nested na Listahan

• Mga hayop
  1. mga pusa
  2. mga aso
• Mga halaman
  1. mga puno
  2. mga bulaklak

Ang mga may bilang na listahan ay isang koleksyon ng mga elemento kasama ang kanilang mga serial number. Ang uri at uri ng pagnunumero ay depende sa mga katangian ng tag

, na ginagamit upang lumikha ng listahan. Ang bawat item sa may bilang na listahan ay ipinapahiwatig ng isang tag
1. tulad ng ipinapakita sa ibaba.
   1. Unang punto
   2. Pangalawang punto
   3. Pangatlong punto

   Kung hindi ka tumukoy ng anumang karagdagang mga katangian at isulat lamang ang tag

   , kung gayon ang default ay isang listahan na may mga Arabic na numero (1, 2, 3,...), tulad ng ipinapakita sa Halimbawa 11.3.

   Halimbawa 11.3. Gumawa ng isang numerong listahan

   Nagtatrabaho sa oras

   1. paglikha ng pagiging maagap (hindi ka mahuhuli sa anumang bagay);
   2. lunas para sa pagiging maagap (hindi ka magmadali);
   3. pagbabago sa pang-unawa ng oras at orasan.
   
   
   

   Ang resulta ng halimbawang ito ay ipinapakita sa Fig. 11.3.

   kanin. 11.3. View na may bilang na listahan

   Tandaan na ang isang listahang may numero ay nagdaragdag din ng awtomatikong indentasyon sa itaas, ibaba, at kaliwa ng teksto.

   Ang mga sumusunod na halaga ay maaaring magsilbi bilang mga elemento ng pagnunumero:

   • Mga numero ng Arabe (1, 2, 3, ...);
   • malalaking titik ng Latin (A, B, C, ...);
   • maliliit na letrang Latin (a, b, c, ...);
   • capital Roman number (I, II, III, ...);
   • maliliit na Roman numeral (i, ii, iii, ...).

   Upang isaad ang uri ng listahang may bilang, gamitin ang katangian ng uri ng tag

   . Ang mga posibleng halaga nito ay ibinibigay sa talahanayan. 11.2.
   mesa 11.2. Mga uri ng may bilang na listahan

   Uri ng listahan	HTML code	Halimbawa
   Mga numero ng Arabe		1. Cheburashka 2. Crocodile Gena 3. Shapoklyak
   Mga malalaking titik ng alpabetong Latin		A. Cheburashka B. Crocodile Gena C. Shapoklyak
   Mga maliliit na titik ng alpabetong Latin		a. Cheburashka b. Crocodile Gena c. Shapoklyak
   Mga Roman numeral sa upper case		I. Cheburashka II. Crocodile Gena III. Shapoklyak
   Roman numeral sa maliit na titik		i. Cheburashka ii. Crocodile Gena iii. Shapoklyak

   Upang magsimula ng isang listahan na may partikular na halaga, gamitin ang katangian ng pagsisimula ng tag

   . Hindi mahalaga kung anong uri ang nakatakda sa listahan gamit ang type , gumagana ang katangian ng pagsisimula sa parehong Roman at Arabic na mga numero. Ang halimbawa 11.4 ay nagpapakita kung paano gumawa ng isang listahan gamit ang malalaking Roman numeral na nagsisimula sa walo.

   Halimbawa 11.4. Pagnunumero ng listahan

   8. Haring Magnum XLIV
   9. Haring Siegfried XVI
   10. Haring Sigismund XXI
   11. Haring Husbrandt I
   
   
   

   Ang resulta ng halimbawang ito ay ipinapakita sa Fig. 11.4.

   

   kanin. 11.4. Listahan na may bilang na may mga Roman numeral

   - 4.5 sa 5 batay sa 2 boto

   Kadalasan, ang ilang impormasyon sa isang website ay kailangang ipakita sa anyo ng mga listahan.

   Ang mga listahan ay nagbibigay-daan sa iyo upang ayusin at i-systematize ang iba't ibang impormasyon at ipakita ito sa bisita sa isang maginhawang anyo.

   Ang mga listahan sa HTML ay may tatlong uri: bulleted list, numbered list, at definition list. Tingnan natin kung paano likhain ang mga ito sa pagkakasunud-sunod.

   Naka-bullet na listahan.

   Ang ganitong uri ng listahan ay madalas na ginagamit. Ang naka-bullet na listahan sa HTML ay ginawa gamit ang mga tag

   • . Sa kasong ito, ang isang marker ay idinagdag sa tapat ng bawat item sa listahan bilang default, ito ay isang marker sa anyo ng isang bilog. Gamit ang mga tag, gumagawa ng container, kung saan matatagpuan ang mga elemento ng listahan: .

     Ang bullet na code ng listahan ay magiging ganito:

     • Ang pagpipiliang ito ay
     • Ang pagpipiliang ito
     • Ang ganitong uri ng opsyon

     Maaari mong subukang lumikha ng isang HTML na pahina gamit ang code na ito para sa iyo din, ang resulta ay ang sumusunod na listahan:

     

     Tulad ng nakikita mo, ang bawat elemento ng listahan ay inilalagay sa isang bagong linya, na may ilang mga indent na ginagawa sa kaliwa, itaas at ibaba. Ang bawat item sa listahan ay nagsisimula sa isang marker ang marker ay maaaring isang puno na bilog (ginagamit bilang default), isang bilog, o isang parisukat. Sa tag

     Mayroong isang uri ng katangian, na ginagamit upang itakda ang estilo ng marker. Ang katangiang ito ay may mga sumusunod na kahulugan:
     • disc - bilog;
     • bilog - bilog;
     • parisukat - parisukat.

     Ang halaga ng disc ay ang default.

     Isang halimbawa ng paggawa ng bullet na listahan na may mga marker ng bilog:

     • Ang pagpipiliang ito ay
     • Ang pagpipiliang ito
     • Ang ganitong uri ng opsyon

     Bilang resulta, ang listahan ay kukuha ng sumusunod na anyo:

     

     Paglikha ng bullet na listahan na may mga square marker:

     • Ang pagpipiliang ito ay
     • Ang pagpipiliang ito
     • Ang ganitong uri ng opsyon

     Ang listahan ay magiging ganito:

     

     Ang katangian ng uri ay maaaring ilapat sa higit pa sa isang tag

     , ngunit pati na rin sa tag
     • . Sa ganitong paraan maaari kang lumikha ng isang listahan na may iba't ibang mga bullet.
       • Ang pagpipiliang ito ay
       • Ang pagpipiliang ito
       • Ang ganitong uri ng opsyon

       Ang magiging resulta ay ang mga sumusunod:

       

       Mga listahan na may bilang.

       Ang mga may bilang na listahan sa HTML ay mga listahan kung saan ang bawat item ay may mga serial number na ginawa gamit ang isang tag

       at nakapugad sa mga tag nito

       1. 1. Unang linya
          2. Pangalawang linya
          3. Ikatlong linya

          Mukhang ganito ang listahan:

          

          Bilang default, ang pagnunumero ay nasa Arabic numerals. Ngunit ang tag

          Mayroong isang uri ng katangian, gamit ang mga halaga kung saan maaari kang gumawa ng pagnunumero sa uppercase (type="A") o lowercase (type="a") sa mga Latin na titik, Roman numeral sa itaas (type="I" ) at mas mababa (type="i") rehistro.

          Nasa ibaba ang mga pinaikling bersyon ng code at ang uri ng pagnunumero na maaaring nasa isang kaso o iba pa.

          View ng listahan:

          View ng listahan:

          

          Pagnunumero sa maliliit na titik ng alpabetong Latin:

          View ng listahan:

          

          View ng listahan:

          

          View ng listahan:

          

          Listahan ng mga kahulugan sa HTML.

          Ang isang espesyal na uri ng listahan ay mga listahan ng kahulugan. Nagkakaiba ang mga ito dahil ang bawat elemento ng listahan ay binubuo ng dalawang elemento, isang termino at teksto na nagpapakita ng kahulugan nito. Ang mga listahang ito ay ginawa gamit ang mga tag

          . Tag

          gumagawa ng lalagyan para sa listahan, tag

          nagtatakda ng termino at tag

          paglalarawan o kahulugan ng isang termino.

          Ang listahang ito ay nakasulat tulad ng sumusunod:

          Term 1

          Kahulugan 1

          Term 2

          Kahulugan ng termino 2

          Term 3

          Kahulugan 3

          Ang magiging resulta ay ang sumusunod na listahan:

          

          Gaya ng nakikita mo, lumilikha ito ng naaangkop na indentasyon para sa teksto ng termino at kahulugan.

          Mga nested o multi-level na listahan sa HTML.

          Minsan kinakailangan na mag-nest ng isa pang listahan sa loob ng isang elemento ng isang partikular na uri ng listahan. Binibigyang-daan ka ng HTML na walang limitasyong mag-embed ng ilang listahan sa mga elemento ng iba pang mga listahan.

          Halimbawa, narito ang code na naglalagay ng mga numerong listahan sa loob ng mga naka-bullet na item sa listahan.

          • Ang pagpipiliang ito ay
            1. Unang linya
            2. Pangalawang linya
            3. Ikatlong linya
          • Ang pagpipiliang ito
            1. Unang linya
            2. Pangalawang linya
            3. Ikatlong linya
          • Ang ganitong uri ng opsyon
            1. Unang linya
            2. Pangalawang linya
            3. Ikatlong linya

          Ang isang bullet na listahan ay tinutukoy sa pamamagitan ng pagdaragdag ng isang maliit na bala, kadalasan sa anyo ng isang punong bilog, bago ang bawat item sa listahan. Ang listahan mismo ay nabuo gamit ang isang lalagyan

          , at ang bawat item sa listahan ay nagsisimula sa isang tag
          • tulad ng ipinapakita sa ibaba.
            • Unang punto
            • Pangalawang punto
            • Pangatlong punto

            Ang listahan ay dapat maglaman ng pansarang tag

          , kung hindi, magkakaroon ng error. Pansara na tag Bagama't hindi kinakailangan, palagi naming inirerekomenda ang pagdaragdag nito sa malinaw na hiwalay na mga item sa listahan.

          Ipinapakita ng Halimbawa 11.1 ang HTML code para sa pagdaragdag ng bullet na listahan sa isang web page.

          Halimbawa 11.1. Gumawa ng bullet na listahan

          ---

          • Cheburashka
          • Crocodile Gena
          • Shapoklyak
          • Daga Larisa

          ---

          
          
          

          Ang resulta ng halimbawang ito ay ipinapakita sa Fig. 11.1.

          kanin. 11.1. Bullet list view

          Bigyang-pansin ang padding sa itaas, ibaba, at kaliwa ng listahan. Ang ganitong mga indent ay awtomatikong idinaragdag.

          Ang mga marker ay maaaring tumagal ng isa sa tatlong anyo: bilog (default), bilog, at parisukat. Upang pumili ng istilo ng pananda, gamitin ang katangian ng uri ng tag

          . Ang mga katanggap-tanggap na halaga ay ibinibigay sa talahanayan. 11.1
          mesa 11.1. Maglista ng Mga Estilo ng Bullet

          Uri ng listahan	HTML code	Halimbawa
          Listahan na may mga bilog na bala		Una Pangalawa Pangatlo
          Listahan na may mga bilog na bala		Una Pangalawa Pangatlo
          Listahan na may mga square bullet		Una Pangalawa Pangatlo

          Ang hitsura ng mga marker ay maaaring bahagyang mag-iba sa iba't ibang mga browser, pati na rin kapag binabago ang font at laki ng teksto.

          Ang paglikha ng isang listahan na may mga square bullet ay ipinapakita sa Halimbawa 11.2.

          Halimbawa 11.2. Uri ng mga marker

          Pagbabago ng mga Paniniwala

          • pagbabago sa relihiyosong pananampalataya (opsyonal: Budismo, Confucianism, Hinduism). Espesyal na alok - Hudaismo at Islam magkasama;
          • isang pagbabago sa paniniwala sa hindi pagkakamali ng paboritong partido;
          • ang paniniwala na umiiral ang mga dayuhan;
          • kagustuhan para sa isang sistemang pampulitika bilang pinakamahusay sa uri nito (mapili mula sa: pyudalismo, sosyalismo, komunismo, kapitalismo).
          
          
          

          Ang resulta ng halimbawang ito ay ipinapakita sa Fig. 11.2.

          Kumusta, mahal na mga mambabasa ng blog site. Ngayon, bilang bahagi ng seksyong ito, gusto kong pag-usapan ang tungkol sa iba't ibang listahan ng Html na maaaring malikha batay sa mga tag ng UL, OL, LI at DL na espesyal na idinisenyo para dito. Ang mga pares ng UL at LI ay gumagawa ng mga naka-bullet na listahan, ang mga pares ng OL at LI ay gumagawa ng mga numerong listahan, at ang mga elemento ng DL, DT at DD ay gumagawa ng tinatawag na mga listahan ng kahulugan. Isasaalang-alang din natin ang mga prinsipyo ng paglikha ng mga nested na istruktura.

          Nais kong ipaalala sa iyo na nagawa na nating pag-usapan ang mga pangunahing kaalaman ng modernong, pati na rin ang layout ng tabular (). Bilang karagdagan, hinawakan namin ang mga pangunahing kaalaman, at natutunan namin.

          Mga listahan ng bullet batay sa UL at LI tag

          Ang UL tag ay ginagamit upang lumikha ng mga bullet na listahan, at ang OL tag ay ginagamit upang lumikha ng mga numerong listahan. Ang mga tag na ito ay pairwise at naka-block na mga tag, tulad ng elemento ng LI.

          Sa pagitan ng pambungad at pagsasara ng mga tag ay mga indibidwal na listahan ng mga item, na kung saan ay nakapaloob sa isang pambungad at pagsasara na elemento ng LI. Nagdaragdag ang browser ng mga one-line na indent sa itaas at ibaba ng mga listahan ng HTML, katulad ng indentation na ginawa ng isang tag ng talata.

          Tingnan natin, halimbawa, ang isang naka-bullet na opsyon na maaaring ganito ang hitsura:

          • Unang linya
          • Pangalawa
          • Huling elemento

          Tanging ang mga elemento ng LI ang maaaring nasa loob ng pambungad at pagsasara ng mga UL na tag, at sa loob ng mga elementong ito (mga sugnay) mismo maaari kang magpasok ng anumang nilalaman (teksto, mga larawan, mga heading, mga talata, mga link at kahit na iba pang mga listahan).

          Yung. Ang UL ay nagsisilbi lamang upang ayusin ang isang bulleted (hindi inayos) na listahan, at lahat ng nakikita mo sa web page sa loob nito ay ipinapatupad gamit ang nilalaman ng mga elemento ng LI.

          Para sa UL, maaari mong baguhin ang uri ng marker sa pamamagitan ng pagtukoy ng iba't ibang value para sa attribute na "Uri". Kung ang "Uri" (pagkontrol sa hitsura ng mga marker) para sa elemento ng UL ay hindi tinukoy, ang default na hitsura ng marker ay ipapakita (disc - isang bilog na puno ng kulay ng teksto):

          1. — punong bilog (default);
             • - walang laman na bilog;
               • - parisukat

          Sa mga halimbawa sa itaas, tinukoy namin ang attribute na "Uri" sa elemento ng UL, gamit ang ganitong uri ng marker para sa lahat ng item. Ngunit ang attribute na "Uri" ay maaari ding tukuyin para sa bawat indibidwal na tag ng LI, na nagtatakda ng sarili nitong uri ng marker para sa item na ito.

          Halimbawa ng isang bullet na listahan na may iba't ibang uri ng bullet para sa bawat item:

          

          1. Marker sa anyo ng isang punong disk
          2. Marker sa anyo ng isang hindi pininturahan na disk
          3. Square

          Mga may bilang na listahan sa Html batay sa OL tag

          Upang lumikha ng isang listahan na may numero, ginagamit ang mga tag ng OL, kung saan muling makikita ang mga elemento ng LI. Ang OL at LI, tulad ng nabanggit ko na, ay nakabatay sa bloke (iyon ay, malamang na kunin nila ang lahat ng espasyong magagamit sa kanila sa lapad) at wala maliban sa mga elemento ng LI ang maaaring ilagay sa loob ng OL.

          Lumalabas na ang OL at UL ay mga tag ng serbisyo na kailangan lamang upang ipahiwatig sa browser kung anong uri ng listahan ang aming ginagawa (na may bullet o bilang). Sa kaso ng isang may bilang na item, sa kaliwa ng bawat item ay hindi namin makikita ang isang marker, ngunit isang numero at isang tuldok sa likod nito:

          

          1. Unang linya
          2. Pangalawang punto
          3. Ikatlong linya

          Tulad ng nabanggit ko sa itaas, ang mga elemento ng UL, OL at LI ay may kakayahang gamitin ang attribute na TYPE. Pinapayagan ka nitong i-configure ang uri ng marker o tukuyin kung anong mga numero o titik ang gagamitin sa mga item sa listahan ng numero. Para sa isang may bilang na listahan, ang mga parameter ng katangiang ito ay maaaring tumagal ng mga sumusunod na halaga:

          1. — ang pagnunumero ay isasagawa sa mga regular na Arabic numeral (ang parehong opsyon ay gagamitin bilang default, sa kawalan ng katangiang "Uri");
             1. — malaking titik para sa pagnunumero;
                1. - maliit na titik;
                   1. - capital Roman numeral;
                      1. - maliliit na Roman numeral;

                         Isang halimbawa ng isang may bilang na listahan na may iba't ibang uri ng pagnunumero para sa bawat item:

                         

                         1. may bilang na may malalaking Roman numeral
                         2. Pagnunumero sa maliliit na letrang Latin
                         3. Pagnunumero gamit ang maliliit na Roman numeral

                         Kapag lumilikha ng mga numerong listahan, posible ring simulan ang pagnunumero hindi mula sa isa, ngunit mula sa numerong tinukoy sa START attribute. Halimbawa:

                         1. Ang unang elemento na ang numero ay tinukoy sa OL tag na may attribute na start="23".
                         2. Ang susunod na item, na may numero unong mas mataas
                         3. Isa pa

                         Para sa OL, maaari ka ring magsimula ng bagong pagnunumero mula sa anumang value, simula sa anumang item, sa pamamagitan ng pagsulat ng attribute na VALUE na may kinakailangang numero sa pambungad na LI ng item na ito. Halimbawa:

                         1. Unang punto na may numero uno
                         2. Matatanggap ng elementong ito ang numerong tinukoy sa value="32" attribute
                         3. Item na may malaking bilang

                         Pagdidisenyo ng hitsura ng mga listahan sa CSS (style sheets)

                         Ngunit, bilang isang panuntunan, ngayon ang hitsura ng mga marker ay itinakda hindi sa pamamagitan ng TYPE attribute, ngunit kung saan ang mga kaukulang katangian ay tinukoy.

                         Dito ay magbibigay lamang ako ng isang halimbawa ng iba't ibang mga marker para sa mga walang bilang na listahan, ang hitsura nito ay nakatakda sa pamamagitan ng isang hiwalay na file na may mga cascading style sheet.

                         • Unang punto
                         • Pangalawa
                         • Huli

                         Ngunit pag-uusapan natin iyan sa mga susunod na artikulo. Ito ay kung paano itinakda ang hitsura ng mga UL marker sa blog na ito. Ang mga larawan ay ginagamit bilang mga pananda: para sa mga regular na item ng isang walang bilang na listahan - , para sa mga nested na item ng isang walang bilang na listahan - .

                         Mga espesyal at nested na listahan sa HTML code

                         Ang pangatlo at panghuling uri ay tinatawag na "mga listahan ng kahulugan" at tinukoy ang mga ito gamit ang tatlong mga tag - DL, DT at DD. Sinasabi ng DL sa browser na ang sumusunod ay isang listahan ng mga kahulugan.

                         Karaniwan ang ganitong uri ay ginagamit (o nilayon na gamitin) para sa pagsulat ng mga entry sa diksyunaryo na binubuo ng mga termino (na nakapaloob sa mga DT tag) at ang kanilang mga paglalarawan (na nakapaloob sa mga DD tag).

                         Unang termino

                         Paglalarawan

                         Pangalawang termino

                         Ang paglalarawan nito

                         

                         Kung titingnan mo ang halimbawa sa itaas, mapapansin mo na ang elemento ng DD (ang paglalarawan ng termino) ay na-offset (sa pamamagitan ng 40 pixels) na nauugnay sa elemento ng DT (ang termino mismo).

                         Sa pangkalahatan, ang DL, DT at DD ay mga block tag, at ang nilalaman lamang na may mga inline na tag ang maaaring ipasok sa loob ng isang elemento ng DT (lumalabas na ang mga elemento ng block ng mga heading at talata ay hindi magagamit sa loob ng DT). At sa loob ng mga tag ng DD maaari kang magpasok ng anumang mga elemento, parehong inline at block.

                         Nested na listahan sa Html ito ay nilikha sa pamamagitan ng pagkakatulad na may isang simple, ngunit sa loob ng pangunahing listahan, ang ilan sa mga item ay muling nakapaloob sa pambungad at pagsasara ng tag na UL o OL.

                         Pakitandaan na ang pagsasara ng LI ng item kung saan gagawin ang nested item ay inilalagay lamang pagkatapos ng buong code ng nested list (napakahalaga nito para sa tamang pagpapakita nito sa web page). Maaaring ganito ang hitsura ng nested list:

                         

                         1. Ang unang talata ng pangunahing may bilang
                         2. Pangalawang punto
                            • Unang elemento ng nested bullet
                            • Pangalawa
                            • Pangatlo at huling bullet point
                         3. May bilang na ikatlong elemento

                         Good luck sa iyo! Magkita-kita tayo sa mga pahina ng blog site

                         Baka interesado ka

                         Paano magpasok ng isang link at isang larawan (larawan) sa HTML - IMG at A tag Piliin, Pagpipilian, Textarea, Label, Fieldset, Legend - Mga Html tag para sa anyo ng mga drop-down na listahan at mga field ng teksto
                         Html form para sa site - mga tag Form, Input at Select, Option, Textarea, Label at iba pa para sa paglikha ng mga elemento ng web form
                         Paano nakatakda ang mga kulay sa Html at CSS code, pagpili ng mga RGB shade sa mga talahanayan, Yandex output at iba pang mga programa
                         I-embed at object - Mga Html tag para sa pagpapakita ng nilalaman ng media (video, flash, audio) sa mga web page
                         Mga tag at katangian ng mga heading H1-H6, horizontal line Hr, line break Br at talata P ayon sa pamantayan ng Html 4.01
                         Mga talahanayan sa Html - Mga tag ng Table, Tr at Td, pati na rin ang Colspan, Cellpadding, Cellspacing at Rowspan para sa paglikha ng mga ito
                         Ano ang hypertext markup language Html at kung paano tingnan ang isang listahan ng lahat ng mga tag sa validator ng W3C
                         Font (Mukha, Sukat at Kulay), Blockquote at Pre tag - legacy text formatting sa purong HTML (walang CSS na ginagamit)
                         Iframe at Frame - ano ang mga ito at kung paano pinakamahusay na gumamit ng mga frame sa Html
                         Img - Html tag para sa pagpasok ng isang larawan (Src), pag-align at pagbabalot ng teksto sa paligid nito (align), pati na rin ang pagtatakda ng background (background)