Ինչպես օգտագործել ul-ը html-ում: Ինչպե՞ս տեղադրել ցուցակի տարրերը հորիզոնական: Որտեղ ցուցակի ոճերը գրված են Twenty Eleven ձևանմուշում

Հիպերտեքստի նշագրման լեզուն HTML-ն ունի պիտակ

, օգտագործվում է պարբերակներով ցուցակներ ստեղծելու համար: Այն աջակցվում է բոլորի կողմից ժամանակակից բրաուզերներև թույլ է տալիս տարրերը ցուցադրել այնպիսի հերթականությամբ, որը համարակալում չի պահանջում: Օրինակ, այն շատ հաճախ ցուցադրում է մենյուի տարրերը և էջի ցուցակների հետ կապված ամեն ինչ՝ ճաշատեսակներ, ապրանքներ, սարքավորումներ, գործիքներ և շատ ավելին, որոնք պետք է ցուցակագրվեն՝ չնշելով որոշակի ապրանքի առաջնահերթությունը:

Պիտակի շարահյուսություն

• Տարր թիվ 1
• Տարր թիվ 2
• Տարր թիվ 3
• ...

Այս կոդը թարգմանվում է կայքում կետավոր ցանկի.

• Տարր թիվ 1
• Տարր թիվ 2
• Տարր թիվ 3

Նշել

պահանջում է պարտադիր օգտագործումըփակման պիտակ
.

Ցանկի տարրեր ձևավորելու համար օգտագործվում է զուգակցված պիտակ: Բացման և փակման պիտակների միջև կան առանձին բառեր, արտահայտություններ, պարբերություններ, պատկերներ, կոդի կտորներ և շատ ավելին, որոնք պարբերակներով ցանկի բովանդակությունն են:

Ինչպիսի՞ն կարող է լինել պարբերակավոր ցուցակի բովանդակությունը:

Սա կարող է լինել տարբեր տեքստեր, ներառյալ առանձին բառեր, արտահայտություններ և պարբերություններ, պատկերներ, ներդիր ցուցակներ, php կոդի կտորներ և շատ ավելին, որոնք պահանջում են պարզ նշում:

Ցանկի յուրաքանչյուր կետով տարրը լռելյայնորեն կտրված է աջ 40 պիքսել: Օգտագործելով CSS ոճեր, մենք կարող ենք փոխել ցուցադրումը այս ցանկըձեր հայեցողությամբ: Նշել

հիմնված է բլոկների վրա, ուստի այն զբաղեցնում է իրեն հասանելի ողջ տարածքը՝ սահմանափակված էկրանի եզրով, սեղանի շրջանակով կամ էջի այլ տարրերով:
Ցուցակ-ցուցակի մեջ կցորդները թույլատրվում են:

Օրինակ

• Տարր թիվ 1
• • 2-1 կետ
  • Տարր #2-2
  • Տարր #2-3
• Տարր թիվ 3
• ...

Նշեք հատկանիշները և հատկությունները

Լայնորեն օգտագործվող պիտակի հատկանիշ

տիպի հատկանիշ է, որը ցույց է տալիս, թե ինչ տեսք կունենա ցուցակի նշիչը: Կարող է վերցնել հետևյալ արժեքները

1. type="disc" - նշիչ՝ լցված շրջանագծի տեսքով (այս արժեքը լռելյայն է): Սկավառակի օրինակը մի փոքր ավելի բարձր էր:

2. type="circle" - նշիչ թափանցիկ շրջանագծի տեսքով

Օրինակ.

• Տարր թիվ 1
• Տարր թիվ 2

• Տարր թիվ 1
• Տարր թիվ 2

3. type="square" - նշիչ քառակուսու տեսքով

Օրինակ.

• Տարր թիվ 1
• Տարր թիվ 2

Եվ ահա, թե ինչ տեսք ունի էջում.

• Տարր թիվ 1
• Տարր թիվ 2
Ծանոթագրություն 1

CSS-ում պարբերակի տեսակը նշվում է՝ օգտագործելով list-style-type հատկանիշը.

• ...

Եկեք նայենք, թե ինչ արժեքներ կարող է վերցնել list-style-type:

• սկավառակ - նշիչ շրջանագծի տեսքով (օրինակը վերևում էր)
• շրջան - նշիչ թափանցիկ շրջանակի տեսքով (օրինակը վերևում էր)
• քառակուսի - մարկեր քառակուսու տեսքով (օրինակը վերևում էր)
• տասնորդական - մարկեր արաբական թվերով համարակալված ցուցակի տեսքով՝ 1, 2, 3, ...
• տասնորդական-առաջատար-զրո - նշիչ՝ համարակալված ցուցակի տեսքով արաբական թվերով՝ առաջատար զրոյով՝ 01, 02, 03, ...
• ստորին հռոմեական - նշիչ հռոմեական այբուբենի համարակալված ցուցակի տեսքով փոքր տառերով. i, ii, iii, iv, v
• վերին հռոմեական - նշիչ հռոմեական այբուբենի համարակալված ցուցակի տեսքով մեծատառերով՝ I, II, III, IV, V
• ստորին լատիներեն - նշիչ լատինատառ այբուբենի ցուցակի տեսքով փոքր տառերով՝ a, b, c, d, ...
• վերին լատիներեն - նշիչ լատինատառ այբուբենի ցուցակի տեսքով մեծատառերով՝ A, B, C, D, ...
• ստորին-հունական - հունական այբուբենի ցուցակի տեսքով նշիչ փոքր տառերով
• վերին հունական - հունական այբուբենի ցուցակի տեսքով նշիչ մեծատառերով
Ծանոթագրություն 2

Հատկանիշը կարող է վերագրվել հենց պիտակին

, և պիտակներ
• . Թեգին հատկանիշ սահմանելիս
  ցանկի բոլոր տարրերը կցուցադրվեն, ինչպես նշված է հատկանիշով: Բայց մենք կարող ենք այս կամ այն ​​տարրին տալ իր սեփական ցուցադրումը։ Օրինակ նկարում.

  Կոդն ունի հետևյալ տեսքը.

  • Տարր թիվ 1
  • Տարր թիվ 2
  • Տարր թիվ 3

  • Տարր թիվ 1
  • Տարր թիվ 2
  • Տարր թիվ 3

  Պիտակների մարկերների փոփոխություն

  օգտագործելով CSS

  Տեգերի կողմից ստեղծված կետերի ցանկի տարրեր

  , կարելի է նշել կամայական պատկերներով։ CSS-ն օգտագործվում է նշիչի տեսակը փոխելու համար: Օրինակ

  • Տարր թիվ 1
  • Տարր թիվ 2
  • Տարր թիվ 3

  Եվ ահա թե ինչ տեսք ունի էջում.

  • Տարր թիվ 1
  • Տարր թիվ 2
  • Տարր թիվ 3

  Գ օգտագործելով CSSմենք կարող ենք սահմանել այլ տեսակի մարկերների ցուցադրում: Բայց դուք պետք է հիշեք դա պիտակի համար ցանկացած ոճ նշելիս

  , այն վերաբերում է ցանկի բոլոր տարրերին։
  Եթե ​​որոշեք փոխել ստանդարտ ul և li ցուցակները, ապա այս թեման ձեզ հետաքրքիր կլինի: Քանի որ այստեղ դուք կսովորեք մի քանիսը օրիգինալ լուծումներ. Ինչը, անշուշտ, կօգնի ձեզ փոխել ստանդարտ տեսքը եզակի, որտեղ օգտագործվում է CSS ոճը ցուցակների ձևավորման համար: Առավելությունն այն է, որ մենք ամբողջ ընթացքում կօգտագործենք միայն մեկ դաս, որն արմատապես կփոխի տեսքը: Բացի այս պարամետրերից, դուք կարող եք նշել, թե որ համարից պետք է սկսվի ցուցակը, այստեղ կարող եք ամեն ինչ անել: Համարակալված ցուցակների լռելյայն մեկնարկային արժեքը առաջինն է կամ A տառը:

  Հիմունքների հետ կապված, մենք այժմ ավելի մանրամասն կանդրադառնանք այն տարրերին, որոնք օգտագործվում են դիզայնի տարբեր մասերին կառուցվածք և նշանակություն ապահովելու համար: Եթե ​​որևէ մեկը չգիտի, ul-ը և li-ն շատ ավելի լավ տարբերակ են, քան պարզ տեքստը, քանի որ երբ տեքստը փաթաթված է, հատկապես բջջային հեռախոս, այն կատարյալ ներթափանցում է և չի փաթաթվում մարկերի շուրջը:

  Ցուցակները համարվում են էջերում տեղեկատվություն ներկայացնելու հիանալի միջոց, քանի որ դրանք հեշտ ընթերցվում են և լավ տեսք ունեն: Շատերը, թվում է, կարծում են, որ կետերը փոքր պատկերներ են, բայց իրականում դրանք բոլորն էլ ստեղծվել են բավականին պարզ HTML կոդի միջոցով: Դուք կարող եք տեղադրել տարբեր տեսակներցանկերը միմյանց մեջ, եթե ցանկանում եք, պարզապես հիշեք, որ դրանք ճիշտ փակեք: Դուք կարող եք խաղալ ձեր ուզած տեքստի հետ այս ցուցակի բոլոր հրամաններում:

  Դուք նաև պետք է իմանաք, որ ցուցակներն ի սկզբանե պարունակում են մի քանի տարրեր.

  1 . Անկազմակերպ տեղեկատվություն.
  2 . Կազմակերպված տեղեկատվություն.
  3 . Սահմանումներ.

  Սկսենք տեղադրումը.

  1. Տարբերակ.

  
  
  • Ցանկի տարր
  
  
  • Եզակի ցուցակ
  
  
  • Բնօրինակ ցուցակներ
  
  
  • ZORNET.RU - Webmaster
  
  
  • Մեկ այլ ցուցակ
  
  
  
  CSS

  Քսանգելոպան (
  լուսանցք՝ 19px 0 0;
  լիցք:0;
  ցուցակի ոճը՝ ոչ մեկը;
  հակադարձ վերակայում՝ li;
  }
  .ksangelopan li (
  եզրագիծ՝ 2px կոշտ #3575ad;
  ֆոն՝ #d7dee4;
  պաշտոնը` հարաբերական;
  լուսանցք-ներքև՝ 17px;
  լիցք՝ 15px 9px;
  }
  .ksangelopan li:hover (
  z-ինդեքս՝ 1;
  }
  .ksangelopan li: առաջ (
  եզրագիծ՝ 2px կոշտ #2270b3;
  դիրքը` բացարձակ;
  վերև՝ -14px;
  լիցք՝ 3px 9px;
  տառաչափը՝ 11px;
  տառատեսակի քաշը՝ թավ;
  գույնը՝ #246 eaf;
  ֆոն՝ #f2f4f7;
  հակադարձ աճ՝ li;
  բովանդակությունը՝ counter(li);
  -webkit-անցում-տեւողությունը՝ 0.4 վ;
  անցում-տեւողությունը՝ 0,4 վրկ;
  }
  .ksangelopan li:hover: առաջ (
  ֆոն՝ #2672b3;
  գույնը՝ #f7f9fb;
  -webkit-transform: translate (-11px, 0);
  -ms-փոխակերպում. թարգմանել (-11px, 0);
  -o-transform: translate (-11px, 0);
  փոխակերպում՝ թարգմանել (-11px, 0);
  }
  .ksangelopan li:after (
  բովանդակությունը՝ «»;
  դիրքը` բացարձակ;
  անցում-տեւողությունը՝ 0,3 վրկ;
  -webkit-transition-property՝ լայնություն;
  անցումային հատկություն՝ լայնություն;
  z-ինդեքս՝ -1;
  ֆոն՝ #FFF;
  բարձրությունը՝ 100%;
  ձախ: 0;
  վերև՝ 0;
  լայնությունը՝ 0;
  }
  .ksangelopan li:hover:after (
  լայնությունը `100%;
  }

  
  Այս ամենը տեղադրման համար է:

  2 Երկրորդ տարբերակ.

  

  
  
  • Ցանկի տարր
  
  
  • Եզակի ցուցակ
  
  
  • Բնօրինակ ցուցակներ
  
  
  • ZORNET.RU - Webmaster
  
  
  • Մեկ այլ ցուցակ
  
  
  
  CSS

  Բելեդուզլոպամգես (
  լուսանցք-ներքև՝ 8px;
  լիցք:0;
  ցուցակի ոճը՝ ոչ մեկը;
  հակադարձ վերակայում՝ li;
  }
  .beleduzlopamges li (
  պաշտոնը` հարաբերական;
  եզրագիծ՝ 2px կոշտ #195588;
  ֆոն՝ #eff3f7;
  լիցք՝ 15px 19px 15px 27px;
  լուսանցք՝ 12px 0 12px 40px;
  -webkit-անցում-տեւողությունը՝ 0.3 վրկ;
  անցում-տեւողությունը՝ 0,3 վրկ;
  }
  .beleduzlopamges li:hover (
  ֆոն՝ #FFF;
  }
  .beleduzlopamges li: առաջ (
  գծի բարձրությունը՝ 32px;
  դիրքը` բացարձակ;
  վերև՝ 4px;
  ձախ: -39px;
  լայնությունը՝ 39px;
  տեքստի հավասարեցում. կենտրոն;
  տառաչափը՝ 16px;
  տառատեսակի քաշը՝ թավ;
  գույնը՝ #f9f5f5;
  ֆոն՝ #275b88;
  հակադարձ աճ՝ li;
  բովանդակությունը՝ counter(li);
  անցում-տեւողությունը՝ 0,2 վրկ;
  }
  .beleduzlopamges li:hover:before (
  լայնությունը՝ 46px;
  }
  .beleduzlopamges li:after (
  դիրքը` բացարձակ;
  ձախ: 0;
  վերև՝ 4px;
  բովանդակությունը՝ «»;
  բարձրությունը՝ 0;
  լայնությունը՝ 0;
  եզրագիծը՝ 16px ամուր թափանցիկ;
  եզրագիծ-ձախ-գույն՝ #275b88;
  -webkit-անցում-տեւողությունը՝ 0.2 վրկ;
  անցում-տեւողությունը՝ 0,2 վրկ;
  }
  .beleduzlopamges li:hover:after (
  լուսանցք-ձախ՝ 6px;
  }

  
  Դուք կարող եք ինքնուրույն սահմանել կենտրոնի գամմա, որպեսզի համապատասխանի կայքի հիմնական ոճին:

  3 Երրորդ տարբերակ.

  

  
  
  • Սցենարներ uCoz-ի համար
  
  
  • Կաղապարներ uCoz-ի համար
  
  
  • Կայքի դիզայն
  
  
  • Կայքի ոճերը
  
  
  • Styling CSS-ով
  
  
  
  CSS

  Նիզուալիսանելագ (
  լիցք:0;
  ցուցակի ոճը՝ ոչ մեկը;
  հակադարձ վերակայում՝ li;
  }
  .nizualisanelag li (
  պաշտոնը` հարաբերական;
  լիցք՝ 9px 17px 17px 25px;
  լուսանցք-ձախ՝ 39px;
  անցում-տեւողությունը՝ 0,2 վրկ;
  կուրսորը՝ ցուցիչ;
  տառատեսակի քաշը՝ թավ;
  գույնը՝ #343638;
  }
  .nizualisanelag li: առաջ (
  եզրագիծը՝ 3px ամուր թափանցիկ;
  գծի բարձրությունը՝ 35px;
  դիրքը` բացարձակ;
  վերև՝ 0;
  ձախ:-29px;
  լայնությունը՝ 41px;
  text-align:center;
  տառաչափը՝ 14px;
  տառատեսակի քաշը՝ թավ;
  գույնը՝ #619dce;
  հակադարձ աճ՝ li;
  բովանդակությունը՝ counter(li);
  անցում-տեւողությունը՝ 0,3 վրկ;
  
  տուփի չափսերը՝ սահմանային տուփ;
  }
  .nizualisanelag li:hover: առաջ (
  գույնը՝ #337AB7;
  }
  .nizualisanelag li:հետո (
  դիրքը` բացարձակ;
  վերև՝ 0;
  ձախ: -29px;
  լայնությունը՝ 41px;
  բարձրությունը՝ 41px;
  եզրագիծ՝ 5px կոշտ #468bd0;
  սահման-շառավիղ` 50%;
  բովանդակությունը՝ «»;
  անթափանցիկություն՝ 0,5;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  տուփի չափսերը՝ սահմանային տուփ;
  }
  .nizualisanelag li:hover:after (
  անիմացիա՝ 500ms ease-in-out 0s bounceIn;
  անթափանցիկություն՝ 1;
  }

  @keyframes bounceIn (
  0% {
  անթափանցիկություն՝ 0;
  փոխակերպում՝ scale3d(.3, .3, .3);
  }
  20% {
  փոխակերպում՝ scale3d (1.3, 1.3, 1.3);
  }
  40% {
  փոխակերպում՝ scale3d(.9, .9, .9);
  }
  60% {
  անթափանցիկություն՝ 1;
  փոխակերպում. scale3d (1.03, 1.03, 1.03);
  }
  80% {
  փոխակերպում՝ scale3d(.97, .97, .97);
  }
  դեպի (
  անթափանցիկություն՝ 1;
  փոխակերպում՝ scale3d (1, 1, 1);
  }
  }

  
  Գալիս է գեղեցիկ անիմացիա:

  4 Չորրորդ տարբերակ.

  

  
  
  • Կայքի առաջին տարրը
  
  
  • Երկրորդ տարրը կայքի համար
  
  
  • Երրորդ տարրը կայքի համար
  
  
  • Չորրորդ տարրը կայքի համար
  
  
  • Հինգերորդ տարրը կայքի համար
  
  
  
  CSS

  Լիցքավորում:0;
  ցուցակի ոճը՝ ոչ մեկը;
  }
  .kudezamuden li(
  լիցք: 6px;
  }
  .kudezamuden li: առաջ (
  padding-աջ՝ 11px;
  տառատեսակի քաշը՝ թավ;
  գույնը՝ #4979a0;
  բովանդակությունը՝ «\2606»;
  անցում-տեւողությունը՝ 0,4 վրկ;
  }
  .kudezamuden li:hover:before (
  գույնը՝ #235e90;
  բովանդակությունը՝ «\2605»;
  }

  
  Նմանատիպ նախորդ տարբերակները, փոխվել է միայն պատկերակը։

  Ընդհանուր առմամբ, սա ցուցակների փոքր ընտրություն է, որը կարող է կազմել վեբ վարպետը գեղեցիկ ցուցակպորտալում, որտեղ նա ինքը կարող է ավելի շատ նախագծել այն, քանի որ ինքն է ցանկանում տեսնել այն:

  Եթե ​​Ձեզ անհրաժեշտ է տարրերը համարակալված ցուցակի փոխարեն տեղադրել, ապա կօգտագործվի պատվիրված HTML: Այս ցուցակը ստեղծվում է ol թեգով: Համարակալումը սկսվում է մեկից և ավելանում է մեկով յուրաքանչյուր հաջորդ պատվիրված ցանկի տարրի համար li tag-ով:

  Միակ տարբերությունն այն է, որ այս պիտակը խստորեն պատրաստված է ցուցակների համարակալման համար: Պիտակի անվանումը գալիս է անգլերեն «Ordered List» հապավումից՝ համարակալված ցուցակ։

  Պիտակի շարահյուսություն

  1. Տարր թիվ 1
  2. Տարր թիվ 2
  3. Տարր թիվ 3
  4. ...

  Որտեղ type="value" հատկանիշը կարող է վերցնել հետևյալ արժեքները

  • A - սահմանում է մարկերներ մեծ լատիներեն տառերի տեսքով (A, B, C ..);
  • a - սահմանում է մարկերներ փոքրատառ լատիներեն տառերի տեսքով (a, b, c..);
  • I - սահմանում է մարկերներ մեծ հռոմեական թվերի տեսքով (I, II, III, IV ..);
  • i - սահմանում է մարկերներ փոքր հռոմեական թվերի տեսքով (i, ii, iii, iv..);
  • 1 (կանխադրված) - սահմանում է մարկերներ արաբական թվերի տեսքով (1, 2, 3 ..);

  start="value" հատկանիշը նշում է հաշվետվության սկզբնական արժեքը (մեկնարկային արժեքը):

  Reversed հատկանիշը սահմանում է հակադարձ հաշվում (անհրաժեշտության դեպքում):

  Նշել

  պահանջում է փակման պիտակի պարտադիր օգտագործում

  Ցանկի տարրեր ձևավորելու համար օգտագործվում է զուգակցված պիտակ

  • . Բացման և փակման պիտակների միջև կան առանձին բառեր, արտահայտություններ, պարբերություններ, պատկերներ, կոդի կտորներ և շատ ավելին, որոնք պարբերակներով ցանկի բովանդակությունն են:

    Նշում

    Ցանկի ներսում դուք կարող եք փոխել ձեր հաշիվը: Այդ նպատակով պիտակի վրա կա հատուկ հատկանիշ value="":

  • , որը նշանակված է որոշ թվային արժեք. Օրինակ

    1. Տարր թիվ 1
    10. Տարր թիվ 2
    11. Տարր թիվ 3

  Օրինակներ html-ում համարակալված ցուցակներով (

  )

  Օրինակ 1. HTML համարակալված ցուցակ լատինատառով

  Օրինակ մեծատառերով

  1. Տարր թիվ 1
  2. Տարր թիվ 2
  3. Տարր թիվ 3

  1. Տարր թիվ 1
  2. Տարր թիվ 2
  3. Տարր թիվ 3

  Օրինակ փոքրատառերով

  1. Տարր թիվ 10
  2. Տարր թիվ 11
  3. Տարր թիվ 12

  Ահա թե ինչ տեսք ունի էջում.

  1. Տարր թիվ 1
  2. Տարր թիվ 2
  3. Տարր թիվ 3

  Օրինակ 2. HTML համարակալված ցուցակ հռոմեական տառերով

  Օրինակ մեծատառերով

  1. Տարր թիվ 1
  2. Տարր թիվ 2
  3. Տարր թիվ 3

  Ահա թե ինչ տեսք ունի էջում.

  1. Տարր թիվ 1
  2. Տարր թիվ 2
  3. Տարր թիվ 3

  Օրինակ փոքրատառերով

  1. Տարր թիվ 1
  2. Տարր թիվ 2
  3. Տարր թիվ 3

  Ահա թե ինչ տեսք ունի էջում.

  1. Տարր թիվ 1
  2. Տարր թիվ 2
  3. Տարր թիվ 3

  Օրինակ 3. Համարակալված ցուցակ html տարբեր մեկնարկային դիրք

  Օրինակ, որը ցույց է տալիս start հատկանիշի հնարավորությունները, որը թույլ է տալիս սահմանել հաշվիչի մեկնարկային արժեքը։

  50. Տարր թիվ 1
  51. Տարր թիվ 2
  52. Տարր թիվ 3

  Ահա թե ինչ տեսք ունի էջում.

  1. Տարր թիվ 1
  2. Տարր թիվ 2
  3. Տարր թիվ 3

  Օրինակ 4. html համարակալված ցուցակներում հաշվարկի փոփոխություն

  Ստորև բերված է մի օրինակ՝ պիտակներում նոր տարրեր ցուցադրելիս, օգտագործելով արժեքի հատկանիշը, հաշվիչի արժեքները փոխելու ունակությամբ

  • .

    10. Տարր թիվ 1
    11. Տարր թիվ 2
    100. Տարր թիվ 3
    101. Տարր թիվ 4

    Ահա թե ինչ տեսք ունի էջում.

    1. Տարր թիվ 1
    2. Տարր թիվ 2
    3. Տարր թիվ 3
    4. Տարր թիվ 4

    Օրինակ 5. Հակադարձ համարակալված ցուցակը html-ում

    Ստորև բերված է հակադարձ համարակալված ցուցակի օրինակ (հաշվում են հակառակ հերթականությամբ):

    10. Տարր թիվ 1
    11. Տարր թիվ 2
    12. Տարր թիվ 3
    13. Տարր թիվ 4

    Ահա թե ինչ տեսք ունի էջում.

    1. Տարր թիվ 1
    2. Տարր թիվ 2
    3. Տարր թիվ 3
    4. Տարր թիվ 4

    Տարր

    (անգլերեն «չպատվիրված ցուցակից») ստեղծում է պարբերակներով (չպատվիրված) ցուցակ: Որպես կանոն, տարրը
    օգտագործվում է ցուցակներ ստեղծելու համար, որտեղ այս ցուցակի տարրերի հերթականությունը փոխելը էապես չի փոխում ցուցակի իմաստը:

    Նշել

    վերաբերում է բլոկի տարրերին, ուստի այն կզբաղեցնի իրեն հասանելի ողջ լայնությունը, և բարձրության չափը կախված կլինի բովանդակության քանակից:

    Համարակալված ցուցակների տարրերը սահմանվում են պիտակի միջոցով

    • , որը, բացի տեքստից, կարող է ներառել այլ HTML էլեմենտներ (ցանկեր, պատկերներ, վերնագրեր, պարբերություններ և այլն)։ Լռելյայնորեն, կետավոր ցուցակներվեբ էջում ցուցադրվում են փոքր սև շրջանով սկսվող ցուցակի տեսքով: Բրաուզերներն ավելացնում են մի փոքր լուսանցք դեպի ձախ՝ ցանկի տարրերը ցուցադրելիս:

      Նշում.Եթե ​​դեպի

      կիրառվում է CSS հատկություն, ապա տարրերը
      • ժառանգել այս հատկությունները:

        Խորհուրդ.Մարկերի տեսակը փոխելու համար օգտագործեք list-style-type CSS հատկությունը կամ list-style-image հատկությունը, որը թույլ է տալիս փոխարինել մարկերները պատկերներով: Համարակալված ցուցակներ ստեղծելու համար օգտագործեք պիտակը

        .

        Շարահյուսություն

        ...
        • ...
        ...

        Փակման պիտակ

        Պահանջվում է.

        Հատկանիշներ

        compactDeprecated HTML5-ում Նվազեցնում է նահանջը և տողերի տարածությունը: type HTML5 Սահմանում է ցուցակի նշիչի տեսակը:

        Հասանելի է այս ապրանքի համար գլոբալ հատկանիշներԵվ իրադարձություններ.

        Կանխադրված ոճավորում

        Բրաուզերների մեծ մասը կցուցադրի տարրը

        հետեւյալի հետ CSS արժեքներլռելյայն:

        Ul (ցուցադրում՝ բլոկ; ցուցակի ոճի տեսակ՝ սկավառակ; լուսանցք՝ վերև՝ 1 մ; լուսանցք՝ ներքև՝ 1 em; լուսանցք՝ ձախ՝ 0; լուսանցք՝ աջ՝ 0; ներդիր՝ ձախ՝ 40 px; )

        Տարբերությունները HTML 4.01-ի և HTML5-ի միջև

        Կոմպակտ և տիպային ատրիբուտները չեն աջակցվում HTML5-ում:

        Օգտագործման օրինակ.

        Չպատվիրված HTML ցուցակ.

        Օրինակ HTML:

        Փորձեք ինքներդ
        • Սուրճ
        • Թեյ
        • Կակաո

        Տեխնիկական պայմաններ

        Հստակեցում	Կարգավիճակ
        WHATWG HTML Living Standard (WHATWG)	Կենսամակարդակ
        HTML 4.01 (W3C)	Հանձնարարական
        HTML5 (W3C)	Հանձնարարական
        HTML 5.1 (W3C)	Հանձնարարական

        Բրաուզերի աջակցություն

        Փորձեք ինքներդ - Օրինակներ

        Ինչպե՞ս կարող եմ ցանկը սկսել 1-ից այլ թվով:

        Շարունակենք մեր զրույցները html-ի սկզբնավորման մասին։ Այս հոդվածում ես ուզում եմ խոսել այն մասին, թե ինչպես ստեղծել պարբերություններ, ցուցակներ և վերնագրեր տեքստում: Եվ նաև միայնակ պիտակների մասին
        Եվ

        ---

        .

        Խստորեն խորհուրդ եմ տալիս կարդալ այս շարքի առաջին դասը, ինչպես նաև html ուսումնասիրել սկսելու մասին ներածական հոդվածը նրանց համար, ովքեր դեռ ծանոթ չեն դրանց:

        Այժմ մենք կշարունակենք ուսումնասիրել թեգերը։ Ենթադրեմ, որ ընթերցողն արդեն ծանոթ է վերը նշված հոդվածների նյութին։

        Ինչպես միշտ, աշխատանքային պլան.

        1. Պարբերություններ
        2. Գծի ընդմիջում
           
        3. Ցուցակներ և ցուցակի տարրեր
        4. Վերնագրեր
        5. Հորիզոնական քանոններ

           ---

        Պարբերություններ

        Տեքստը գրեթե միշտ բաղկացած է պարբերություններից։ Պարբերությունը տեքստի տարր է, որը փոխանցում է ամբողջական միտք:

        html-ում պարբերությունը, ինչպես երևում է վերնագրից, նշվում է . «p» տառը վերցված է «պարբերություն» բառից, որը պարզապես նշանակում է «պարբերություն»:

        Դիտարկենք օրինակ.

        Առաջին պարբերության տեքստը. Այն պարունակում է մի միտք. Բայց հիմա միտքն ավարտված է.
        

        
        

        Մեկ այլ միտք արդեն սկսվել է, և մենք այն գրում ենք մեկ այլ պարբերության մեջ։
        

        Ինչպես տեսնում եք, պարբերությունների օգտագործումը շատ պարզ է և հատուկ մեկնաբանություններ չի պահանջում։ Եթե ​​դիտարկենք այս կոդը բրաուզերում, կտեսնենք երկու տող, որոնց միջև կա մեկ դատարկ տող: Ռուսերեն տեքստերում ընդունված է պարբերությունն առանձնացնել ոչ թե դատարկ տողով, այլ առաջին տողը աջ տեղափոխելով։ Բայց սա հենց այն ձևաչափն է, որը հաճախ օգտագործվում է ինտերնետում, ուստի այն հաճախ մնում է ռուսալեզու տեքստերում: Այնուամենայնիվ, եթե ձեզ դուր չի գալիս այս պահվածքը, կարող եք փոխել այն CSS-ի միջոցով:

        Գծի ընդմիջում
        

        Երբեմն անհրաժեշտ է թարգմանել տողը՝ առանց միտքը ավարտելու կամ պարբերությունը փակելու։ Այսինքն, պարզապես գնացեք նոր տող: Դրա համար կա մեկ պիտակ
        . Ահա դրա օգտագործման օրինակ.

        Քամին փչում է ուրախ
        
        Եվ նավը արագանում է
        
        Նա վազում է ալիքների մեջ
        Բարձրացված առագաստներով:
        

        Ա.Ս.-ի բանաստեղծության այս հատվածը. Պուշկինն օգնեց մեզ պատկերացնել պիտակի գործողությունը
        . Ես հատուկ տեղադրեցի այս քառատողի վերջին երկու տողերը կոդի մեկ տողում՝ ցույց տալու համար, որ տողերը տեղափոխվում են նոր տող ոչ թե այն պատճառով, որ մենք գծերի ընդմիջումներ ենք տեղադրել, այլ այն պատճառով, որ մենք տեղադրել ենք պիտակներ:
        . Այս թեգը շատ պարզ է և մանրամասն բացատրության կարիք չունի, ուստի մենք կդադարենք դրա քննարկումն այստեղ:

        Ցուցակներ,

        և ցուցակագրել տարրեր

        Երբեմն պետք է ինչ-որ բան թվարկել տեքստում: Այդ նպատակով օգտագործվում են երեք պիտակներ՝ ul, ol, li: Այս բոլոր թեգերը կոնտեյներային պիտակներ են, բայց պիտակը միշտ պարունակվում է մեկ կամ կոնտեյներներում և դրանցից դուրս որևէ նշանակություն չունի: ul կոնտեյները օգտագործվում է, երբ մեզ չի հետաքրքրում թվարկված ապրանքների հերթականությունը, և մենք չենք ցանկանում կենտրոնանալ դրանց հայտնվելու հերթականության վրա: Ընդհակառակը, ol պիտակը կենտրոնացնում է ուշադրությունը տարրերի հաջորդականության վրա՝ ինքնաբերաբար համարակալելով յուրաքանչյուր տող: Դիտարկենք օրինակ.

        
        
        • Բուլկի
        
        
        • Կարկանդակ
        
        
        • Բոքոն
        
        
        • Կարկանդակ
        
        

        Բրաուզերի էկրանին այս կոդը կունենա հետևյալ տեսքը.

        • Բուլկի
        • Կարկանդակ
        • Բոքոն
        • Կարկանդակ

        Եթե ​​մենք պարզապես փոխարինենք ul թեգը ol թեգով, մենք ստանում ենք համարակալված ցուցակ.

        
        
        1. Բուլկի
        
        
        2. Կարկանդակ
        
        
        3. Բոքոն
        
        
        4. Կարկանդակ
        
        

        Այժմ այն ​​ունի հետևյալ տեսքը.

        1. Բուլկի
        2. Կարկանդակ
        3. Բոքոն
        4. Կարկանդակ

        Ոչ ոք չի արգելում մեկ ցուցակը տեղադրել մյուսի մեջ՝ ենթացուցակներով ձևավորելով ներդիր ցուցակներ.

        
        Գործիքներ:
        
        • Տեսավ
        
        
        • Պտուտակահաններ
          
          
          
          1. Ուղիղ
          
          
          2. Խաչ
          
          
          
          
        
        
        • Հորատում
        
        

        Դուք պետք է մի փոքր փորձ կատարեք այս ցուցակների հետ, որպեսզի ընտելանաք դրանք օգտագործելուն: Ցուցակի մեկ այլ տեսակ կա, բայց այն հազվադեպ է օգտագործվում, ուստի հիմա չեմ խոսի այդ մասին։ Գուցե մեկ այլ հոդվածում:

        Իհարկե, ինչպես ամեն ինչ, տեսքըԱյս տարրերը կարող են փոփոխվել անճանաչելիորեն՝ օգտագործելով CSS:

        Վերնագրեր

        Իհարկե, պարբերությունները օգնում են փաստաթղթերի կառուցվածքին: Բայց մեծ տեքստը ավելի փոքր տրամաբանական մասերի բաժանելու համար կարող եք վերնագրել դրանցից յուրաքանչյուրը։ Յուրաքանչյուր մաս կարող է պարունակել հետագա ենթամասեր՝ իրենց ցածր մակարդակի վերնագրերով և այլն: Վերնագիրը սահմանելու համար օգտագործեք պիտակներ , որտեղ «x»-ը 1-ից 6-ի թիվ է: Որքան մեծ է թիվը, այնքան ցածր է վերնագիրը: Այսինքն՝ վերին մակարդակի վերնագիրը կկոչվի h1, իսկ ստորին մակարդակի վերնագիրը՝ h6։ Լռելյայնորեն, այս վերնագրերի տեքստը ցուցադրվում է մեծ տառատեսակով և նահանջով: Այս տեքստը ցուցադրվում է ամբողջ տողում, այսինքն՝ hx թեգերը բլոկային պիտակներ են։ h1 թեգն ունի ամենամեծ տառատեսակը, իսկ h6 թեգը՝ ամենափոքրը։ Որպես կանոն, էջի վրա կա մեկ, առավելագույնը երկու վերին մակարդակի h1 թեգ: Քանի որ մակարդակը նվազում է, պիտակների թիվը մեծանում է: Բայց հազվադեպ է, որ վեբ-վարպետը կարողանա այնքան կոտրել տեքստը, որ նրան անհրաժեշտ լինեն 5-րդ կամ 6-րդ մակարդակի վերնագրեր: Նույնիսկ 4-րդ մակարդակը հազվադեպ է օգտագործվում:

        Ավելի քիչ խոսքեր, ավելի շատ գործողություն: