НСупорядочСнный список – НСупорядочСнный список β€” Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° тСкста β€” HTML Academy

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

УпорядочСнныС ΠΈ нСупорядочСнныС списки

БущСствуСт Ρ‚Ρ€ΠΈ Ρ‚ΠΈΠΏΠ° списков: упорядочСнныС, нСупорядочСнныС ΠΈ списки ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ. Π—Π΄Π΅ΡΡŒ ΠΌΡ‹ рассмотрим ΠΏΠ΅Ρ€Π²Ρ‹Π΅ Π΄Π²Π° Π²ΠΈΠ΄Π° списков, Π° ΠΎ списках ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅ ΠΏΠΎΠ·ΠΆΠ΅.

УпорядочСнныС ΠΈ нСупорядочСнныС списки Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ, Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ послСдниС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для прСдставлСния Π½Π΅ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… списков, элСмСнты ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΊΡ€ΡƒΠΏΠ½ΠΎΠΉ Ρ‡Π΅Ρ€Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ (Π±ΡƒΠ»Π»ΠΈΡ‚ΠΎΠΌ), Π° ΠΏΠ΅Ρ€Π²Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для прСдставлСния ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… списков, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΠΌΠ΅ΡŽΡ‚ Π²ΠΈΠ΄ элСмСнтов ΠΏΡ€ΠΎΠ½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… Π² Π²ΠΎΠ·Ρ€Π°ΡΡ‚Π°ΡŽΡ‰Π΅ΠΌ порядкС.

Для опрСдСлСния нСупорядочСнных списков ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚Π΅Π³ <ul>, Π° для опрСдСлСния упорядочСнных списков – Ρ‚Π΅Π³ <ol>. Π’Π½ΡƒΡ‚Ρ€ΠΈ списков для опрСдСлСния ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ элСмСнта списка ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚Π΅Π³ <li>.

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚Π΅ свою Π²Π΅Π±-страницу ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
Β Β Β  <title>Моя пСрвая Π²Π΅Π±-страница</title>
</head>
<body>
   <h2>Моя пСрвая Π²Π΅Π±-страница</h2>
   <h3>Π§Ρ‚ΠΎ это Ρ‚Π°ΠΊΠΎΠ΅</h3>
   <p>ΠŸΡ€ΠΎΡΡ‚Π°Ρ страница, созданная ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ HTML</p>
   <h3>Для Ρ‡Π΅Π³ΠΎ это Π½ΡƒΠΆΠ½ΠΎ</h3>
   <ul>
       <li>Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ HTML</li>
       <li>Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΡ…Π²Π°ΡΡ‚Π°Ρ‚ΡŒ</li>
       <li>ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ я обоТаю свой ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ ΠΈ Ρ…ΠΎΡ‡Ρƒ ΠΏΡ€ΠΈΠ²ΠΈΡ‚ΡŒ Π΅ΠΌΡƒ любовь ΠΊ HTML</li>
   </ul>
</body>
</html>

Если ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ эту Π²Π΅Π±-страницу Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Ρ‚ΠΎ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ список, ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π±ΡƒΠ»Π»ΠΈΡ‚Π°ΠΌΠΈ. Π—Π°ΠΌΠ΅Π½ΠΈΡ‚Π΅ Ρ‚Π΅Π³

<ul> Π½Π° Ρ‚Π΅Π³ <ol>, ΠΈ Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ список стал Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ.

ΠšΡ€ΠΎΠΌΠ΅ всСго ΠΏΡ€ΠΎΡ‡Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΈ списки Π² Π΄Ρ€ΡƒΠ³ΠΈΠ΅, формируя Ρ‚Π΅ΠΌ самым ΡΡ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΡŽ элСмСнтов.

Π—Π°ΠΌΠ΅Π½ΠΈΡ‚Π΅ ΠΊΠΎΠ΄ списка ΠΈΠ· ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ:


<ul>
   <li>Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ HTML</li>
   <li>Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΡ…Π²Π°ΡΡ‚Π°Ρ‚ΡŒ
       <ol>
           <li>ΠΏΠ΅Ρ€Π΅Π΄ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΈΠΊΠΎΠΌ</li>
           <li>ΠΏΠ΅Ρ€Π΅Π΄ Π΄Ρ€ΡƒΠ·ΡŒΡΠΌΠΈ</li>
           <li>ΠΏΠ΅Ρ€Π΅Π΄ ΠΌΠΎΠ΅ΠΉ кошкой</li>
           <li>ΠΏΠ΅Ρ€Π΅Π΄ малСнькой говорящСй ΡƒΡ‚ΠΊΠΎΠΉ Π² ΠΌΠΎΠ΅ΠΉ Π³ΠΎΠ»ΠΎΠ²Π΅</li>
       </ol>
   </li>
   <li>ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ я обоТаю свой ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ ΠΈ Ρ…ΠΎΡ‡Ρƒ ΠΏΡ€ΠΈΠ²ΠΈΡ‚ΡŒ Π΅ΠΌΡƒ любовь ΠΊ HTML</li>
</ul>

И Π²ΠΎΡ‚ Ρƒ нас список Π²Π½ΡƒΡ‚Ρ€ΠΈ списка. А вСдь ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ список Π²Π½ΡƒΡ‚Ρ€ΠΈ этого Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ списка. И Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½. И Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅ Π΄ΠΎ бСсконСчности.

msiter.ru

Бписки Π² HTML β€” Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ сайт

Π’ языкС HTML, сущСствуСт 3 Ρ‚ΠΈΠΏΠ° списков:

  • УпорядочСнный список (Ρ‚Π΅Π³ ol)
  • НСупорядочСнный список (Ρ‚Π΅Π³ ul)
  • Бписок ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ

Π’ этом ΡƒΡ€ΠΎΠΊΠ΅, ΠΌΡ‹ рассмотрим с Π²Π°ΠΌΠΈ Π΄Π²Π° Π²ΠΈΠ΄Π° списков: упорядочСнный ΠΈ нСупорядочСнный.

УпорядочСнный список (ol)

УпорядочСнный список Π² HTML β€” это Ρ‚Π°ΠΊΠΎΠΉ список Π³Π΄Π΅ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт ΠΈΠΌΠ΅Π΅Ρ‚ свой порядковый Π½ΠΎΠΌΠ΅Ρ€ (1, 2, 3, 4 ΠΈ Ρ‚.Π΄.). УпорядочСнный список Π² HTML, начинаСтся ΠΈ заканчиваСтся Ρ‚Π΅Π³Π°ΠΌΠΈ ol, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт списка обрамляСтся Ρ‚Π΅Π³Π°ΠΌΠΈ li. Рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€ упорядочСнного списка:

<ol>
  <li>ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ</li>
  <li>ΠΠ°ΠΆΠ°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ</li>
  <li>Π’Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΈΠ· списка</li>
  <li>ВвСсти Π΄Π°Π½Π½Ρ‹Π΅</li>
  <li>Π—Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ</li>
</ol>

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

  1. ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ
  2. ΠΠ°ΠΆΠ°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ
  3. Π’Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΈΠ· списка
  4. ВвСсти Π΄Π°Π½Π½Ρ‹Π΅
  5. Π—Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ

Π’Π΅Π³Π°ΠΌΠΈ упорядочСнного списка ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΠΎΠ±Ρ€Π°ΠΌΠ»ΡΡ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΏΠΎΡˆΠ°Π³ΠΎΠ²Ρ‹Π΅ инструкции: Ρ€Π΅Ρ†Π΅ΠΏΡ‚Ρ‹ изготовлСния, задания (квСсты). Π’Π°ΠΊΠΈΠ΅ списки, Π³Π΄Π΅ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ элСмСнтом списка ΠΈ послСдним имССтся взаимосвязь (Π½Π°Ρ‡ΠΈΠ½Π°Π΅ΠΌ с ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ΠΈ Π·Π°ΠΊΠ°Π½Ρ‡ΠΈΠ²Π°Π΅ΠΌ послСдним, постСпСнно проходя Π΄Ρ€ΡƒΠ³ Π·Π° Π΄Ρ€ΡƒΠ³ΠΎΠΌ всС этапы).

Для форматирования упорядочСнного списка имССтся CSS-свойство list-type-style, Π΄Π°Π½Π½ΠΎΠ΅ свойство позволяСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ вмСсто ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… (арабских) чисСл, римскиС, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π±ΡƒΠΊΠ²Ρ‹ ΠΈ Π΄Ρ€.

НСупорядочСнный список (ul)

НСупорядочСнный список Π² HTML β€” это список, Π³Π΄Π΅ ΠΏΠ΅Ρ€Π΅Π΄ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ элСмСнтом ставится ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ (Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ ΠΊΡ€ΡƒΠΆΠΎΠΊ). НСупорядочСнный список Π² HTML, начинаСтся ΠΈ заканчиваСтся Ρ‚Π΅Π³Π°ΠΌΠΈ

ul, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт списка обрамляСтся Ρ‚Π΅Π³Π°ΠΌΠΈ li. Рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€ нСупорядочСнного списка:

<ul>
 <li>Π›Π΅Ρ‚ΠΎ</li>
 <li>ОсСнь</li>
 <li>Π—ΠΈΠΌΠ°</li>
 <li>ВСсна</li>
</ul>

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

  • Π›Π΅Ρ‚ΠΎ
  • ОсСнь
  • Π—ΠΈΠΌΠ°
  • ВСсна

Π’Π΅Π³Π°ΠΌΠΈ нСупорядочСнного списка, ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΠΎΠ±Ρ€Π°ΠΌΠ»ΡΡ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ списки Π½Π°ΠΏΠΎΠ΄ΠΎΠ±ΠΈΠ΅: ΠΈΠ½Π³Ρ€Π΅Π΄ΠΈΠ΅Π½Ρ‚Ρ‹, список частСй Ρ†Π΅Π»ΠΎΠ³ΠΎ (Π²Ρ€Π΅ΠΌΠ΅Π½Π° Π³ΠΎΠ΄Π°) ΠΈ Ρ‚.Π΄. Π’ΠΎ Π΅ΡΡ‚ΡŒ Ρ‚Π΅ списки, Π³Π΄Π΅ Π½Π΅Ρ‚ Ρ‡Π΅Ρ‚ΠΊΠΎΠΉ взаимосвязи ΠΎΡ‚ Π½Π°Ρ‡Π°Π»Π° ΠΈ Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π°. НапримСр, Ссли ΠΌΡ‹ напишСм Π·ΠΈΠΌΠ°, вСсна, Π»Π΅Ρ‚ΠΎ, осСнь Ρ‚ΠΎ Ρ†Π΅Π»ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒ Π½Π΅ Π½Π°Ρ€ΡƒΡˆΠΈΡ‚ΡΡ, ΠΈΠ±ΠΎ это Π½Π΅ инструкция. Однако Ссли ΠΌΡ‹ сначала Π²Π²Π΅Π΄Ρ‘ΠΌ Π΄Π°Π½Π½Ρ‹Π΅ Π½Π΅ ΠΎΡ‚ΠΊΡ€Ρ‹Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ, Ρ‚ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚ ошибка, ΠΈΠ±ΠΎ ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ввСсти Π΄Π°Π½Π½Ρ‹Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ.

Для форматирования нСупорядочСнного списка ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ CSS-свойство list-type-style, Π΄Π°Π½Π½ΠΎΠ΅ свойство ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ стандартный ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ (Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ ΠΊΡ€ΡƒΠ³), Π½Π° Ρ€ΠΎΠΌΠ±, ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ ΠΈΠ»ΠΈ ΠΎΠ±Ρ€ΡƒΡ‡.


Π”Π°Ρ‚Π° ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ поста: 8 фСвраля 2016

Π”Π°Ρ‚Π° обновлСния поста: 8 фСвраля 2016


Навигация ΠΏΠΎ записям

gabdrahimov.ru

Бписки. Π£Ρ‡Π΅Π±Π½ΠΈΠΊ html

Π“Π»Π°Π²Π° 9

Π’ этой Π³Π»Π°Π²Π΅ ΠΏΠΎΠΉΠ΄Ρ‘Ρ‚ Ρ€Π΅Ρ‡ΡŒ ΠΎ списках, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ:

  • нСупорядочСнныС(ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅)
  • упорядочСнныС (Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅)
  • ΠΈ ΡΠ²Π»ΡΡ‚ΡŒΡΡ списком ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ

Π’Π°ΠΊΠΎΠ΅ Π²ΠΎΡ‚ нСстандартноС Π½Π°Ρ‡Π°Π»ΠΎ Π³Π»Π°Π²Ρ‹.. Π·Π°Ρ‚ΠΎ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π’Π°ΠΌ понятно, Ρ‡Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ список Π² html.

Ну Ρ‡Ρ‚ΠΎ ΠΆ Π΄Π°Π²Π°ΠΉΡ‚Π΅ пройдёмся ΠΏΠΎ Π½Π°ΡˆΠ΅ΠΌΡƒ списку.

НСупорядочСнный список задаётся Ρ‚Π΅Π³ΠΎΠΌ <ul>. Π›ΡŽΠ±ΠΎΠΉ список состоит ΠΈΠ· элСмСнтов, «ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ²», ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ задаётся Ρ‚Π΅Π³ΠΎΠΌ <li> послС ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ собствСнно ΠΈ ΠΈΠ΄Ρ‘Ρ‚ тСкст Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ Π½Π°ΠΌ «ΠΏΡƒΠ½ΠΊΡ‚Π°». Для Ρ‚Π΅Π³Π° <li> Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Ρ‚Π΅Π³ </li> нСобязатСлСн.

ВмСстС Π΄Π°Π½Π½Ρ‹Π΅ Ρ‚Π΅Π³ΠΈ ΠΏΡ€ΠΈΠΎΠ±Ρ€Π΅Ρ‚Π°ΡŽΡ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π²ΠΈΠ΄:

<ul>
<li> ΠŸΡƒΠ½ΠΊΡ‚ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ..

<li> ΠŸΡƒΠ½ΠΊΡ‚ Π²Ρ‚ΠΎΡ€ΠΎΠΉ..
<li> ΠŸΡƒΠ½ΠΊΡ‚ Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ..
</ul>

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ нСупорядочСнного списка:

<html>
<head>
<title>нСупорядочСнный список</title>
</head>
<body>
ΠšΡƒΠΏΠΈΡ‚ΡŒ ΠΈ Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΄ΠΎΠΌΠΎΠΉ:
<ul>
<li> 2 ΠΊΠ³. ΠΊΠ»ΡƒΠ±Π½Π΅ΠΉ картофСля
<li> 1 Π±ΡƒΠ»ΠΊΡƒ Ρ€ΠΆΠ°Π½ΠΎΠ³ΠΎ Ρ‡Ρ‘Ρ€Π½ΠΎΠ³ΠΎ Ρ…Π»Π΅Π±Π°
<li> ΠΏΠ°Ρ‡ΠΊΡƒ ΠΌΠ°ΠΊΠ°Ρ€ΠΎΠ½ «ΡΠΏΠ°Π³Π΅Ρ‚Ρ‚ΠΈ» (Π΄Π»ΠΈΠ½Π½Ρ‹Π΅ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ 200ΠΌΠΌ. Ρ‚ΠΎΠ½ΠΊΠΈΠ΅)
<li> 1 ΠΊΠ³. ΡˆΠ»ΠΈΡ„ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ риса (слоТно ΠΎΠ±ΡŠΡΡΠ½ΠΈΡ‚ΡŒ.. ΡΠΏΡ€ΠΎΡΠΈΡˆΡŒ..)

<li> 1 дСс. ΠΊΡƒΡ€ΠΈΠ½Ρ‹Ρ… яиц.
<li> 1 ΠΏΠ°Ρ‡ΠΊΡƒ 500Π³. Натрия двууглСкислого (Π‘ΠΎΠ΄Π°)
</ul>
Π‘ΠΌΠΎΡ‚Ρ€ΠΈ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ ΠΏΠ΅Ρ€Π΅ΠΏΡƒΡ‚Π°ΠΉ.. Ρ†Π΅Π»ΡƒΡŽ..
</body>
</html>

Π’Π΅Π³ΠΈ <li> ΠΈ <ul> ΠΈΠΌΠ΅ΡŽΡ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ type ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ присуТдаСт элСмСнту списка ΠΈΠ»ΠΈ ΠΆΠ΅ всСму списку Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ.

ΠœΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎ ΠΈ Ρ‚Ρ€Ρ‘Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ:

  • disk — ΠΊΡ€ΡƒΠΆΠΎΠΊ, диск (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ)
  • circle — ΠΏΠΎΠ»Ρ‹ΠΉ ΠΊΡ€ΡƒΠ³
  • square
    — ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚

ΠŸΡ€ΠΈΠΌΠ΅Ρ€:

<html>
<head>
<title>стили нСупорядочСнного списка</title>
</head>
<body>
Π’ этом спискС ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт ΠΈΠΌΠ΅Π΅Ρ‚ свой ΡΡ‚ΠΈΠ»ΡŒ:
<ul>
<li type=»disk»> ΠΊΡ€ΡƒΠΆΠΎΠΊ, диск (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ)
<li type=»circle»> ΠΏΠΎΠ»Ρ‹ΠΉ ΠΊΡ€ΡƒΠ³
<li type=»square»> ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚
</ul>
А здСсь ΡΡ‚ΠΈΠ»ΡŒ Π·Π°Π΄Π°Π½ всСму списку
<ul type=»circle»>
<li> ΠŸΡƒΠ½ΠΊΡ‚ 1
<li> ΠŸΡƒΠ½ΠΊΡ‚ 2

<li> ΠŸΡƒΠ½ΠΊΡ‚ 3
</ul>
</body>
</html>

УпорядочСнный ΠΈΠ»ΠΈ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список задаётся Ρ‚Π΅Π³ΠΎΠΌ <ol>, Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ Π² нСупорядочСнном спискС элСмСнт списка присуТдаСтся Ρ‚Π΅Π³ΠΎΠΌ <li>.

ΠŸΠΎΡΡ‚Ρ€ΠΎΠ΅Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ схоТС с нСупорядочСнным списком поэтому сразу ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

<html>
<head>
<title>упорядочСнный список</title>
</head>
<body>
ΠšΡƒΠΏΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€Ρ‹ Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ порядкС:
<ol>
<li>
Π’ΠΎΠ΄ΠΊΠ°

<li> Пиво
<li> Π‘Ρ‹Ρ€ΠΎΠΊ (Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ)
</ol>
Π–Π΄Ρƒ!!!
</body>
</html>

А Π²ΠΎΡ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ type Π² сочСтании с упорядочСнным списком ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ значСния:

  • А — Π—Π°Π³Π»Π°Π²Π½Ρ‹Π΅ Π±ΡƒΠΊΠ²Ρ‹
  • Π° — Π‘Ρ‚Ρ€ΠΎΡ‡Π½Ρ‹Π΅ Π±ΡƒΠΊΠ²Ρ‹
  • I — Π—Π°Π³Π»Π°Π²Π½Ρ‹Π΅ римскиС Ρ†ΠΈΡ„Ρ€Ρ‹
  • i — Π‘Ρ‚Ρ€ΠΎΡ‡Π½Ρ‹Π΅ римскиС Ρ†ΠΈΡ„Ρ€Ρ‹
  • 1 — АрабскиС Ρ†ΠΈΡ„Ρ€Ρ‹ (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ)

Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΈΡ… примСнСния:

<html>
<head>
<title>Π‘Ρ‚ΠΈΠ»ΠΈ упорядочСнного список</title>
</head>
<body>
АрабскиС Ρ†ΠΈΡ„Ρ€Ρ‹
<ol type=»1″>
<li>Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…
<li>Π’ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…
</ol>
Π‘Ρ‚Ρ€ΠΎΡ‡Π½Ρ‹Π΅ Π±ΡƒΠΊΠ²Ρ‹
<ol type=»a»>
<li>Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…
<li>Π’ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…
</ol>
Π—Π°Π³Π»Π°Π²Π½Ρ‹Π΅ Π±ΡƒΠΊΠ²Ρ‹
<ol type=»A»>
<li>Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…
<li>Π’ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…
<li>Π’-Ρ‚Ρ€Π΅Ρ‚ΡŒΠΈΡ…
</ol>
Π‘Ρ‚Ρ€ΠΎΡ‡Π½Ρ‹Π΅ римскиС Ρ†ΠΈΡ„Ρ€Ρ‹
<ol type=»i»>
<li>Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…
<li>Π’ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…
<li>Π’-Ρ‚Ρ€Π΅Ρ‚ΡŒΠΈΡ…
<li>Π’-Ρ‡Π΅Ρ‚Π²Ρ‘Ρ€Ρ‚Ρ‹Ρ…
</ol>
Π—Π°Π³Π»Π°Π²Π½Ρ‹Π΅ римскиС Ρ†ΠΈΡ„Ρ€Ρ‹
<ol type=»I»>
<li>Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…
<li>Π’ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…
<li>Π’-Ρ‚Ρ€Π΅Ρ‚ΡŒΠΈΡ…
<li>Π’-Ρ‡Π΅Ρ‚Π²Ρ‘Ρ€Ρ‚Ρ‹Ρ…
</ol>
</body>
</html>

Π’ упорядочСнном спискС Π΅ΡΡ‚ΡŒ Π΅Ρ‰Ρ‘ ΠΎΠ΄ΠΈΠ½ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ start Π΅Π³ΠΎ числовоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ ΠΎ Ρ‚ΠΎΠΌ с ΠΊΠ°ΠΊΠΎΠ³ΠΎ Π½ΠΎΠΌΠ΅Ρ€Π° слСдуСт ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ упорядочСнный список.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€:

<html>
<head>
<title>Начало упорядочСнного списка</title>
</head>
<body>
<ol type=»1″ start=»24″>
<li>Π‘Ρ€Π°Π·Ρƒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ ΠΊ Π΄Π²Π°Π΄Ρ†Π°Ρ‚ΡŒ Ρ‡Π΅Ρ‚Π²Ρ‘Ρ€Ρ‚ΠΎΠΌΡƒ ΠΏΡƒΠ½ΠΊΡ‚Ρƒ!!
<li>Π˜Π΄Ρ‘ΠΌ дальшС
<li>И дальшС
</ol>
Аналогично ΠΌΠΎΠΆΠ½ΠΎ «ΡΡ‚Π°Ρ€Ρ‚ΠΎΠ²Π°Ρ‚ΡŒ» ΠΏΡ€ΠΈ любом стилС упорядочСнного списка
<ol type=»I» start=»8″>
<li>Π‘Ρ€Π°Π·Ρƒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ ΠΊ Π²ΠΎΡΡŒΠΌΠΎΠΌΡƒ ΠΏΡƒΠ½ΠΊΡ‚Ρƒ..
<li>Π˜Π΄Ρ‘ΠΌ дальшС
<li>И дальшС
</ol>
</body>
</html>

Π‘ΠΎ списком ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ Π΄Π΅Π»ΠΎ обстоит Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½Π°Ρ‡Π΅ Π½Π΅ΠΆΠ΅Π»ΠΈ Ρ‡Π΅ΠΌ с ΡƒΠΆΠ΅ Π·Π½Π°ΠΊΠΎΠΌΡ‹ΠΌΠΈ списками. Задаётся Π΄Π°Π½Π½Ρ‹ΠΉ Π²ΠΈΠ΄ списка Ρ‚Π΅Π³ΠΎΠΌ <dl>. ΠŸΡƒΠ½ΠΊΡ‚Ρ‹ списка ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ‡Π°ΡŽΡ‚ΡΡ Ρ‚Π΅Π³ΠΎΠΌ <dt>, Π° опрСдСлСния этих ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² Ρ‚Π΅Π³ΠΎΠΌ <dd>.

Всё вмСстС ΠΏΠΈΡˆΠ΅Ρ‚ΡΡ ΠΏΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ схСмС:

<dl>
<dt>
<dd>
</dl>

ΠŸΡ€ΠΈΠΌΠ΅Ρ€:

<html>
<head>
<title>Бписок ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ</title>
</head>
<body>
<dl>
<dt> Π‘Π»ΠΎΠ²ΠΎ коса ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ опрСдСлСния:
<dd> ΡΠ΅Π»ΡŒΡΠΊΠΎΡ…ΠΎΠ·ΡΠΉΡΡ‚Π²Π΅Π½Π½Ρ‹ΠΉ инструмСнт
<dd> хитрая Π΄Π΅Π²ΠΈΡ‡ΡŒΡ причёска
<dd> ΠΎΡ‚ΠΌΠ΅Π»ΡŒ Ρ€Π΅ΠΊΠΈ
<dt> Π‘Π»ΠΎΠ²ΠΎ ΠΊΠ»ΡŽΡ‡ Ρ‚ΠΎΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ нСсколько Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ:
<dd> Π³Π°Π΅Ρ‡Π½Ρ‹ΠΉ
<dd> источник, Ρ€ΠΎΠ΄Π½ΠΈΠΊ
</dl>
</body>
</html>

БобствСнно Π²ΠΎΡ‚ ΠΈ вся ΠΏΡ€Π΅ΠΌΡƒΠ΄Ρ€ΠΎΡΡ‚ΡŒ..

ΠŸΡΠΈΡ…ΠΎΠ»ΠΎΠ³ΠΈΡ посСтитСля страницы.

  • НС ΠΌΠΎΠ³Ρƒ, Π½Π΅ согласится с Ρ‚Π΅ΠΌ ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠ΅ΠΌ, Ρ‡Ρ‚ΠΎ посСтитСли страницы Ρ‡Π°Ρ‰Π΅ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°ΡŽΡ‚ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹, Π½Π΅ΠΆΠ΅Π»ΠΈ Ρ‡Π΅ΠΌ Π²Π΄ΡƒΠΌΡ‡ΠΈΠ²ΠΎ Ρ‡ΠΈΡ‚Π°ΡŽΡ‚ ΠΈΡ….. По-ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅Ρ€Π΅ Ρ‚Π°ΠΊ происходит практичСски всСгда ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π²ΠΎΠΌ Π²ΠΈΠ·ΠΈΡ‚Π΅ посСтитСля Π½Π° страничку. ΠŸΠ΅Ρ€Π²ΠΎΠ΅ Π½Π° Ρ‡Ρ‚ΠΎ ΠΎΠ±Ρ€Π°Ρ‰Π°Π΅Ρ‚ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ просматривая ΠΊΠ°ΠΊΠΎΠΉ Π»ΠΈΠ±ΠΎ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ это: Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ Π² тСкстС, Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹ тСкста, ΠΈ списки. Π£ΠΌΠ΅Π»ΠΎΠ΅ ΠΈ нСнавязчивоС Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Ρ‚Π°ΠΊΠΎΠ²Ρ‹Ρ… элСмСнтов Π·Π°Π»ΠΎΠ³ Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŒ окунётся Π² Ρ‡Ρ‚Π΅Π½ΠΈΠ΅ Π’Π°ΡˆΠ΅Π³ΠΎ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° Π±ΠΎΠ»Π΅Π΅ Π³Π»ΡƒΠ±ΠΎΠΊΠΎ.

  • Π§Ρ‚ΠΎ касаСтся списков.. слСдуСт ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ: ΠœΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅Ρ‡Π½ΠΈ <ul> ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° порядок слСдования ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² Π½Π΅ Π²Π°ΠΆΠ΅Π½.. ΠΈ Π΄Π΅Π»Π°ΡŽΡ‚ΡΡ ΠΎΠ½ΠΈ для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ излоТСнная информация Π²ΠΎΡΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π»Π°ΡΡŒ Π»Π΅Π³Ρ‡Π΅. А Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ списки <ol> Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚, ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΆΠ΅Π½ ΠΈΠΌΠ΅Π½Π½ΠΎ порядок слСдования ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ², Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ — ΠΊΠΎΠ³Π΄Π° список являСтся ΠΈΠ·Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΊΠ°ΠΊΠΈΡ… Π»ΠΈΠ±ΠΎ дСйствий.



www.webremeslo.ru

Π£Ρ‡Π΅Π±Π½ΠΈΠΊ HTML 5. Π‘Ρ‚Π°Ρ‚ΡŒΡ «Π‘писки»

Бписки ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ собой упорядочСнный Π½Π°Π±ΠΎΡ€ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π½Π°ΠΌ ΡΠΈΡΡ‚Π΅ΠΌΠ°Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²Π°ΠΆΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, дСлая Π΅Π΅ Π±ΠΎΠ»Π΅Π΅ доступной для понимания. Π―Π·Ρ‹ΠΊ гипСртСкстовой Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ HTML позволяСт ΡΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ списки ΠΏΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌ:

  • НумСрованный (упорядочСнный) список.
  • ΠœΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ (нСупорядочСнный) список.
  • Бписок описаний.
  • Бписок контСкстных мСню.

НумСрованный список

НумСрованный (упорядочСнный) список ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для элСмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎΠΌ порядкС. НумСрованный список начинаСтся с Ρ‚Π΅Π³Π° <ol> (сокращСнноС ΠΎΡ‚ английского ordered list — упорядочСнный список). ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт списка начинаСтся с Ρ‚Π΅Π³Π° <li> (элСмСнт списка).

Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ использования:

<!DOCTYPE html>
<html>
	<head>
		<title>ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования Ρ‚Π΅Π³Π° <ol></title>
	</head>
	<body>
		<ol> 
			<li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li&gt
			<li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
			<li>Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
		</ΠΎl>
	</body>
</html>

Π’Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π½Π° страницС это Π±ΡƒΠ΄Π΅Ρ‚ соотвСтствСнно Ρ‚Π°ΠΊ:

  1. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚.
  2. Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚.
  3. Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚.

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ список начинался с ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎΠ³ΠΎ Π½ΠΎΠΌΠ΅Ρ€Π° (Π½Π΅ с 1), Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ start для Ρ‚Π΅Π³Π° <ol>.

НапримСр:
<ol start = "101">  <!--список начнётся с Π½ΠΎΠΌΠ΅Ρ€Π° 101--> 

Π’Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π½Π° страницС это Π±ΡƒΠ΄Π΅Ρ‚ соотвСтствСнно Ρ‚Π°ΠΊ:

  1. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚.
  2. Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚.
  3. Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚.

Π•Ρ‰Ρ‘ ΠΎΠ΄ΠΈΠ½ интСрСсный Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ — type, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π’Π°ΠΌ Π·Π°Π΄Π°Ρ‚ΡŒ Π±ΡƒΠΊΠ²Π΅Π½Π½ΡƒΡŽ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΡŽ («A» – большиС, «a» – строчныС), Π»ΠΈΠ±ΠΎ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΡŽ ΠΈΠ· римских Ρ†ΠΈΡ„Ρ€ («I» – Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ рСгистрС, «i» – Π² Π½ΠΈΠΆΠ½Π΅ΠΌ рСгистрС).

Рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ прСдставлСны всС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ значСния Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type (ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΎΡ‚ значСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ):

<!DOCTYPE html>
<html>
	<head>
		<title>ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type HTML Ρ‚Π΅Π³Π° <ΠΎl></title>
	</head>
	<body>
		<ol type = "A"> <!--ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ список формируСтся Π² Π°Π»Ρ„Π°Π²ΠΈΡ‚Π½ΠΎΠΌ порядкС Π·Π°Π³Π»Π°Π²Π½Ρ‹ΠΌΠΈ Π±ΡƒΠΊΠ²Π°ΠΌΠΈ --> 
			<li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li&gt
			<li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
			<li>Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
		</ΠΎl>
		<ol type = "a"> <!--ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ список формируСтся Π² Π°Π»Ρ„Π°Π²ΠΈΡ‚Π½ΠΎΠΌ порядкС строчными Π±ΡƒΠΊΠ²Π°ΠΌΠΈ --> 
			<li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li&gt
			<li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
			<li>Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
		</ΠΎl>
		<ol type = "I"> <!--ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ список формируСтся римскими Ρ†ΠΈΡ„Ρ€Π°ΠΌΠΈ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ рСгистрС --> 
			<li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li&gt
			<li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
			<li>Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
		</ΠΎl>
		<ol type = "i"> <!--ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ список формируСтся римскими Ρ†ΠΈΡ„Ρ€Π°ΠΌΠΈ Π² Π½ΠΈΠΆΠ½Π΅ΠΌ рСгистрС --> 
			<li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li&gt
			<li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
			<li>Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
		</ΠΎl>
	</body>
</html>

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

Рис. 14 Π’ΠΈΠ΄Ρ‹ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… списков.

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ нюанс: ΠΏΡ€ΠΈ использовании Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° start с Π±ΡƒΠΊΠ²Π°ΠΌΠΈ (type = «A» ΠΈ type = «a»), число, ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° являСтся порядковым Π½ΠΎΠΌΠ΅Ρ€ΠΎΠΌ Π±ΡƒΠΊΠ²Ρ‹ Π² Π°Π»Ρ„Π°Π²ΠΈΡ‚Π΅. НапримСр, start = «4», Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π±ΡƒΠΊΠ²Π΅ «D» ΠΈ список начнётся ΠΈΠΌΠ΅Π½Π½ΠΎ с Π½Π΅Ρ‘. ΠŸΡ€ΠΈ использовании значСния start = «27» счСтчик обнуляСтся, ΠΏΡ€ΠΈ этом список становится Π΄Π²ΡƒΡ…Π·Π½Π°Ρ‡Π½Ρ‹ΠΌ («27» = «AA», «28» = «AB», «29» = «AC»…). ЗначСния Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ цСлочислСнными, допускаСтся использованиС ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ.


ΠžΠ±Ρ€Π°Ρ‰Π°ΡŽ Π’Π°ΡˆΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ допускаСтся Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ (упорядочСнныС) списки, Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ Π² Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ списки (Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта списка <li>):

<!DOCTYPE html>
<html>
	<head>
		<title>ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка, Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список</title>
	</head>
	<body>
		<ol> 
			<li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚
				<ol>  <!--ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ Π½ΠΎΠ²Ρ‹ΠΉ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта списка--> 
					<li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li&gt
					<li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
					<li>Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
				</ΠΎl>
			</li&gt
			<li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
			<li>Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
		</ΠΎl>
	</body>
</html>

Π’Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π½Π° страницС это Π±ΡƒΠ΄Π΅Ρ‚ соотвСтствСнно Ρ‚Π°ΠΊ:

  1. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚.
    1. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚.
    2. Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚.
    3. Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚.
  2. Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚.
  3. Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚.

Но ΠΈ это Π΅Ρ‰Π΅ Π½Π΅ всС, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ reversed элСмСнта позволяСт Π·Π°Π΄Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ порядок Π² Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠΌ (упорядочСнном) спискС Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠ΄Ρ‚ΠΈ ΠΏΠΎ ΡƒΠ±Ρ‹Π²Π°Π½ΠΈΡŽ. Атрибут Π½Π΅ поддСрТиваСтся Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ Internet Explorer ΠΈ Edge.

Π’Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π½Π° страницС это Π±ΡƒΠ΄Π΅Ρ‚ соотвСтствСнно Ρ‚Π°ΠΊ:

  1. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚.
  2. Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚.
  3. Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚.

ΠœΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список.

ΠœΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ (нСупорядочСнный) список Π² HTML опрСдСляСтся Ρ‚Π΅Π³ΠΎΠΌ <ul> (Unordered List Element). ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт списка Π΄ΠΎΠ»ΠΆΠ΅Π½ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒΡΡ с Ρ‚Π΅Π³Π° <li> (сокращСнноС ΠΎΡ‚ английского list item — элСмСнт списка).

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ списки ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π½Π° Π²Π΅Π±-страницС Π² Π²ΠΈΠ΄Π΅ списка, Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ с малСнького Ρ‡Ρ‘Ρ€Π½ΠΎΠ³ΠΎ ΠΊΡ€ΡƒΠ³Π°.

Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ использования:

<!DOCTYPE html>
<html>
	<head>
		<title>ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования элСмСнта <ul></title>
	</head>
	<body>
		<ul>
			<li>Π‘Π²Π΅Ρ‚Π»ΠΎΠ΅</li>
			<li>Π’Ρ‘ΠΌΠ½ΠΎΠ΅</li>
			<li>ΠŸΡΡ‚Π½ΠΈΡ†Π°</li>
		</ul>
	</body>
</html>

Π’Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π½Π° страницС это Π±ΡƒΠ΄Π΅Ρ‚ соотвСтствСнно Ρ‚Π°ΠΊ:

  • Π‘Π²Π΅Ρ‚Π»ΠΎΠ΅
  • Π’Ρ‘ΠΌΠ½ΠΎΠ΅
  • ΠŸΡΡ‚Π½ΠΈΡ†Π°

ЗабСгая Π²ΠΏΠ΅Ρ€Π΅Π΄, скаТу, Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт HTML ΠΈΠΌΠ΅Π΅Ρ‚ ΡΡ‚ΠΈΠ»ΡŒ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. ИзмСнСниС стиля ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π² HTML элСмСнтС ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ сдСлано с использованиСм глобального Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° style. Π‘ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ этот Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Π±ΡƒΠ΄Π΅Ρ‚ рассмотрСн Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ «HTML стили».

Для измСнСния Ρ‚ΠΈΠΏΠ° ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° (стиля) Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ свойством CSS list-style-type, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ значСния свойства:

АтрибутЗначСниС
list-style-type:noneΠ£Π±ΠΈΡ€Π°Π΅Ρ‚ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€.
list-style-type:discМалСнький Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ ΠΊΡ€ΡƒΠ³. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.
list-style-type:circleΠšΡ€ΡƒΠ³ пустой Π²Π½ΡƒΡ‚Ρ€ΠΈ.
list-style-type:squareΠœΠ°Ρ€ΠΊΠ΅Ρ€ Π² Π²ΠΈΠ΄Π΅ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π°.

НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ использования стилСй CSS Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка:

<!DOCTYPE html>
<html>
	<head>
		<title>ΠŸΡ€ΠΈΠΌΠ΅Ρ€ измСнСния Ρ‚ΠΈΠΏΠ° ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка</title>
	</head>
	<body>
		<ul style = "list-style-type:none">  <!-- ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ отсутствуСт -->
			<li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
			<li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
			<li>Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
		</ul>
		<ul style = "list-style-type:disc">  <!-- малСнький Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ ΠΊΡ€ΡƒΠ³ -->
			<li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
			<li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
			<li>Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
		</ul>
		<ul style = "list-style-type:circle">  <!-- ΠΊΡ€ΡƒΠ³ пустой Π²Π½ΡƒΡ‚Ρ€ΠΈ -->
			<li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
			<li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
			<li>Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
		</ul>
		<ul style = "list-style-type:square">  <!-- ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ Π² Ρ„ΠΎΡ€ΠΌΠ΅ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π° -->
			<li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
			<li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
			<li>Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
		</ul>		
	</body>
</html>

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

Рис. 15 ΠœΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ списки.

ΠžΠ±Ρ€Π°Ρ‰Π°ΡŽ Π’Π°ΡˆΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ допускаСтся Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ (нСупорядочСнныС) списки, Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ Π² Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ списки (Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта списка <li>) ΠΏΡ€ΠΈ этом элСмСнты Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ списка ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π±ΡƒΠ΄ΡƒΡ‚ с пустым ΠΊΡ€ΡƒΠ³ΠΎΠΌ Π²Π½ΡƒΡ‚Ρ€ΠΈ, a ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π±ΡƒΠ΄ΡƒΡ‚ с ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ΠΎΠΌ:

  • ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚
    • ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚
      • ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚
        • ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚
        • Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚
        • Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚
      • Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚
      • Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚
    • Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚
    • Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚
  • Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚
  • Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚

Бписок описаний

Бписки описаний ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для формирования ΠΏΠ°Ρ€ Ρ‚ΠΈΠΏΠ° «имя/Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅Β» / «вопрос/ΠΎΡ‚Π²Π΅Ρ‚Β» ΠΈ Ρ‚.ΠΏ.

Вэг <dl> (HTML Description List Element) опрСдСляСт список, тэг <dt> (HTML Definition Term Element) опрСдСляСт Π΅Π³ΠΎ имя, Π° Ρ‚Π΅Π³ <dd> (HTML Description Element) описываСт Π΅Π³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

Рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€ использования:

<!DOCTYPE html>
<html>
	<head>
		<title>ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования списка описаний</title>
	</head>
	<body>
		<dl>
			<dt>Π–Π°ΠΌΠ΅Π²ΡŽ</dt&gt
			<dd>состояниС, ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΠ΅ дСТавю, Π²Π½Π΅Π·Π°ΠΏΠ½ΠΎ Π½Π°ΡΡ‚ΡƒΠΏΠ°ΡŽΡ‰Π΅Π΅ ΠΎΡ‰ΡƒΡ‰Π΅Π½ΠΈΠ΅ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π·Π½Π°ΠΊΠΎΠΌΠΎΠ΅ мСсто
			ΠΈΠ»ΠΈ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ каТутся ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ нСизвСстными ΠΈΠ»ΠΈ Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΌ.</dd>
			<dt>Ѐасцинация</dt>
			<dd>ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΠ΅ эффСктивности воспринимаСмого ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π° Ρ‡Π΅Ρ€Π΅Π· использованиС ΡΠΎΠΏΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… (Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ…) воздСйствий.</dd>
		</dl>
	</body>
</html>

Как Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ списка описаний (элСмСнт <dd>) ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ внСшний отступ с Π»Π΅Π²ΠΎΠΉ стороны Ρ€Π°Π²Π½Ρ‹ΠΉ 40 пиксСлям:

Рис. 16 Бписок описаний.

ΠžΠ±Ρ€Π°Ρ‰Π°ΡŽ Π’Π°ΡˆΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ допускаСтся Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ списки описаний, Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ Π² Π΄Ρ€ΡƒΠ³ΠΈΠ΅ списки описаний (Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта значСния списка <dd>).


ΠœΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ (нСупорядочСнныС), Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ (упорядочСнныС) ΠΈ списки описаний Π²Π½ΡƒΡ‚Ρ€ΠΈ сСбя ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ элСмСнты Π½ΠΎΠ²ΠΎΠ³ΠΎ списка (Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнтов списка / Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ списка), Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты HTML, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ, изобраТСния, ссылки ΠΈ Ρ‚.Π΄. Бписки ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ, Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ· Π½ΠΈΡ… мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅. Π‘ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ ΠΎ возмоТностях CSS (каскадных Ρ‚Π°Π±Π»ΠΈΡ†Π°Ρ… стилСй) ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… особСнностях HTML 5 Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅ ΠΏΠΎΠ·Π΄Π½Π΅Π΅.


Бписок контСкстных мСню

Π’Π΅Π³ <menu> ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для контСкстных мСню, ΠΏΠ°Π½Π΅Π»Π΅ΠΉ инструмСнтов ΠΈ для Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ элСмСнтов управлСния Ρ„ΠΎΡ€ΠΌΡ‹.

Π’Π΅Π³ <menuitem> опрСдСляСт элСмСнт ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ / мСню, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ ΠΈΠ· контСкстного мСню.

Π’ настоящСС врСмя Ρ‚Π΅Π³ΠΈ <menu> ΠΈ <menuitem> ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΡ‡Π΅Π½ΡŒ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ ΠΈ практичСски Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΏΠΎ этой ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅:

Рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€ для Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ ΠΊΡ€ΡƒΠ³ΠΎΠ·ΠΎΡ€Π°:

<!DOCTYPE html>
<html>
	<head>
		<title>ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования Ρ‚Π΅Π³Π° <menu></title>
	</head>
	<body>
		<div contextmenu = "testmenu"> <!-- опрСдСляСм, для Π±Π»ΠΎΠΊΠ° контСкстноС мСню --> 
			Кликни ΠΏΠΎ ΠΌΠ½Π΅ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ.
			<menu type = "context" id = "testmenu"> <!-- создаСм контСкстноС мСню --> 
				<menuitem label = "like"></menuitem> <!-- опрСдСляСм ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт мСню --> 
				<menuitem label = "dislike"></menuitem> <!-- опрСдСляСм Π²Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт мСню --> 
			</menu>
		</div>
	</body>
</html>

Кликни ΠΏΠΎ ΠΌΠ½Π΅ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ.

Для Ρ‚Π΅Ρ… Ρƒ ΠΊΠΎΠ³ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:


ИспользованиС глобального Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° contextmenu, Ρ‚Π΅Π³ΠΎΠ² <menu> ΠΈ <menuitem>.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ <div>, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ‹Π» использован Π² этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ рассмотрСн Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΡƒΡ‡Π΅Π±Π½ΠΈΠΊΠ° «Π’Π΅Π³ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ страницы».


Вопросы ΠΈ Π·Π°Π΄Π°Ρ‡ΠΈ ΠΏΠΎ Ρ‚Π΅ΠΌΠ΅

ΠŸΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ ΠΊΠ°ΠΊ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΡŽ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ Ρ‚Π΅ΠΌΡ‹ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ практичСскиС задания.

  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹Π΅ знания ΡΠΎΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ HTML списки:

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΎΠ΅ Π·Π°Π΄Π°Π½ΠΈΠ΅ β„– 6.

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΎΠ΅ Π·Π°Π΄Π°Π½ΠΈΠ΅ β„– 7.

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΎΠ΅ Π·Π°Π΄Π°Π½ΠΈΠ΅ β„– 8.

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΎΠ΅ Π·Π°Π΄Π°Π½ΠΈΠ΅ β„– 9.

Если Ρƒ Вас Π΅ΡΡ‚ΡŒ затруднСния Π² составлСнии ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Ρ‚ΠΎ списка, Ρ‚ΠΎ Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡ‚Π°ΠΉΡ‚Π΅ ΡΡ‚Π°Ρ‚ΡŒΡŽ Π΅Ρ‰Π΅ Ρ€Π°Π·, Ссли Π²Ρ‹ Π½Π΅ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ ΠΎΡ‚Π²Π΅Ρ‚Π° Π½Π° ваш вопрос, Ρ‚ΠΎ проинспСктируйтС ΠΊΠΎΠ΄ страницы, ΠΎΡ‚ΠΊΡ€Ρ‹Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΌ ΠΎΠΊΠ½Π΅ ΠΊΠ»ΠΈΠΊΠ½ΡƒΠ² ΠΏΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ.


basicweb.ru

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ списков Π² html ΠΈ Π²ΠΈΠ΄Ρ‹ списков

ЦСль ΡƒΡ€ΠΎΠΊΠ°: знакомство с Ρ‚Π΅Π³Π°ΠΌΠΈ создания списков Π² HTML

БозданиС списков в HTML

Π’ HTML поддСрТиваСтся Ρ€Π°Π±ΠΎΡ‚Π° со всСми Π²ΠΈΠ»Π°ΠΌΠΈ списков, рассмотрим ΠΈΡ…

НСупорядочСнный список HTML

НСупорядочСнный ΠΈΠ»ΠΈ Π½Π΅Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список HTML содСрТит ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Ρ‚Π΅Π³ΠΈ:

Бинтаксис:

<ul>
  <li>элСмСнт 1</li>
  <li>элСмСнт 2</li>
  <li>элСмСнт 3</li>
  …
  <li>элСмСнт n</li>
</ul>

<ul> <li>элСмСнт 1</li> <li>элСмСнт 2</li> <li>элСмСнт 3</li> … <li>элСмСнт n</li> </ul>

Π’.Π΅. ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ списка Π΄ΠΎΠ»ΠΆΠ΅Π½ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒΡΡ Ρ‚Π΅Π³ΠΎΠΌ li ΠΈ Π·Π°Π²Π΅Ρ€ΡˆΠ°Ρ‚ΡŒΡΡ Π΅Π³ΠΎ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ ΠΏΠ°Ρ€ΠΎΠΉ, вмСсто ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ (диск, ΠΎΠΊΡ€ΡƒΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΈΠ»ΠΈ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ β€” зависит ΠΎΡ‚ прСдустановок Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°)

Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ Π²ΠΈΠ΄ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ type:

<ul type="disk"> Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹ΠΉ диск
<ul type="circle"> ΠΎΠΊΡ€ΡƒΠΆΠ½ΠΎΡΡ‚ΡŒ 
<ul type="square"> ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚

<ul type=»disk»> Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹ΠΉ диск <ul type=»circle»> ΠΎΠΊΡ€ΡƒΠΆΠ½ΠΎΡΡ‚ΡŒ <ul type=»square»> ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚

УпорядочСнный список HTML

УпорядочСнный список Π² HTML ΠΈΠ»ΠΈ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список практичСски Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π½Π΅Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ, Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ Ρ‚Π΅Π³Π°:

Бинтаксис:

1
2
3
4
5
6
7
<ol>
  <li>элСмСнт 1</li>
  <li>элСмСнт 2</li>
  <li>элСмСнт 3</li>
  …
  <li>элСмСнт n</li>
</ol>

<ol> <li>элСмСнт 1</li> <li>элСмСнт 2</li> <li>элСмСнт 3</li> … <li>элСмСнт n</li> </ol>

Для Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка Ρ‚ΠΎΠΆΠ΅ Π΅ΡΡ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ:

<ol type = "a">
<ol type = "A">
<ol type = "I">
<ol type = "1">

<ol type = «a»> <ol type = «A»> <ol type = «I»> <ol type = «1»>

МоТно Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΊ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΌΡƒ ΠΏΡƒΠ½ΠΊΡ‚Ρƒ:

Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ список с ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π½ΠΎΠΌΠ΅Ρ€Π°:

ΠœΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΉ список HTML

Бписки с опрСдСлСниями ΠΈΠ»ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹Π΅ списки Π² HTML ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

1
2
3
4
5
6
7
8
9
<dl>
<dt>ΠŸΡƒΠ½ΠΊΡ‚ 1
  <dd>Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ ΠΏΡƒΠ½ΠΊΡ‚Π° 1
  <dd>Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ ΠΏΡƒΠ½ΠΊΡ‚Π° 1
<dt>ΠŸΡƒΠ½ΠΊΡ‚ 2
  <dd>Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ ΠΏΡƒΠ½ΠΊΡ‚Π° 2
<dt>ΠŸΡƒΠ½ΠΊΡ‚ 3
  <dd>Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ ΠΏΡƒΠ½ΠΊΡ‚Π° 3
</dl>

<dl> <dt>ΠŸΡƒΠ½ΠΊΡ‚ 1 <dd>Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ ΠΏΡƒΠ½ΠΊΡ‚Π° 1 <dd>Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ ΠΏΡƒΠ½ΠΊΡ‚Π° 1 <dt>ΠŸΡƒΠ½ΠΊΡ‚ 2 <dd>Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ ΠΏΡƒΠ½ΠΊΡ‚Π° 2 <dt>ΠŸΡƒΠ½ΠΊΡ‚ 3 <dd>Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ ΠΏΡƒΠ½ΠΊΡ‚Π° 3 </dl>

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

ΠšΡ€Π°ΡΠΈΠ²Ρ‹ΠΉ список html ΠΈΠ»ΠΈ ΡΠΌΠ΅ΡˆΠ°Π½Π½Ρ‹ΠΉ список

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ список максимально красивым, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² ΠΎΠ΄Π½ΠΎΠΌ спискС Ρ€Π°Π·Π½Ρ‹Π΅ Π²ΠΈΠ΄Ρ‹ списков. Рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

1
2
3
4
5
6
7
8
9
10
<dl><strong>Π‘ΠΌΠ΅ΡˆΠ°Π½Π½Ρ‹ΠΉ список</strong>
	<dt><i>ΠΠΎΠ²ΠΎΡΡ‚ΡŒ дня</i>
		<dd>
			<li>БСгодня ΠΈΠ΄Π΅Ρ‚ доТдь</li>
			<li>Π”ΠΎΠΆΠ΄ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ΄Ρ‚ΠΈ вСсь дСнь</li>
	<dt><i>ΠΠΎΠ²ΠΎΡΡ‚ΡŒ Π½ΠΎΡ‡ΠΈ</i>
		<dd>
			<li>ΠΠΎΡ‡ΡŒΡŽ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ΄Ρ‚ΠΈ доТдь</li>
			<li>Π—Π°Π²Ρ‚Ρ€Π° начнСтся Π½ΠΎΠ²Ρ‹ΠΉ дСнь</li>
</dl>

<dl><strong>Π‘ΠΌΠ΅ΡˆΠ°Π½Π½Ρ‹ΠΉ список</strong> <dt><i>ΠΠΎΠ²ΠΎΡΡ‚ΡŒ дня</i> <dd> <li>БСгодня ΠΈΠ΄Π΅Ρ‚ доТдь</li> <li>Π”ΠΎΠΆΠ΄ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ΄Ρ‚ΠΈ вСсь дСнь</li> <dt><i>ΠΠΎΠ²ΠΎΡΡ‚ΡŒ Π½ΠΎΡ‡ΠΈ</i> <dd> <li>ΠΠΎΡ‡ΡŒΡŽ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ΄Ρ‚ΠΈ доТдь</li> <li>Π—Π°Π²Ρ‚Ρ€Π° начнСтся Π½ΠΎΠ²Ρ‹ΠΉ дСнь</li> </dl>

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Лабораторная Ρ€Π°Π±ΠΎΡ‚Π°: скачайтС Ρ„Π°ΠΉΠ» list.html.
  • ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ»
  • Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ ΡΠΌΠ΅ΡˆΠ°Π½Π½Ρ‹ΠΉ список
  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΈ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список html ΠΈ список ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹:
    • вмСсто Π·Π½Π°ΠΊΠ° - отобраТался ΠΌΠ°Ρ€ΠΊΠ΅Ρ€
    • вмСсто порядковых чисСл ΠΈ Π±ΡƒΠΊΠ² (1, 2, 3, a, b, c) ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΈΡΡŒ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ ΠΈΠΌ числа ΠΈ Π±ΡƒΠΊΠ²Ρ‹ автоматичСски
  • Π·Π½Π°ΠΊ -, порядковыС числа ΠΈ Π±ΡƒΠΊΠ²Ρ‹ ΠΈΠ· тСкста ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ

labs-org.ru

HTML Ρ‚Π΅Π³ΠΈ. HTML списки. ΠœΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список ΠΈΠ»ΠΈ нСупорядочСнный список.

ЗдравствуйтС, ΡƒΠ²Π°ΠΆΠ°Π΅ΠΌΡ‹Π΅ посСтитСли ΠΌΠΎΠ΅Π³ΠΎ скромного Π±Π»ΠΎΠ³Π° для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… Π²Π΅Π±Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΈ web мастСров ZametkiNaPolyah.ru.Β ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅ΠΌ Ρ€ΡƒΠ±Ρ€ΠΈΠΊΡƒΒ Π—Π°ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΏΠΎ HTMLΒ ΠΈ Π΅Π΅ Ρ€Π°Π·Π΄Π΅Π»Β HTML Ρ‚Π΅Π³ΠΈ. Данная публикация посвящСна ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ спискам HTML. ΠœΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ Π΅Ρ‰Π΅ говорят, нСупорядочСнный список HTML формируСтся Ρ‚Π΅Π³Π°ΠΌΠΈ <ul>, <li>.

ΠœΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список. Π€ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ HTML списка. Π’Π΅Π³ΠΈ <ul>, <li>.

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ:

Как Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΎΡΡŒ Ρ€Π°Π½Π΅Π΅, ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΡŽΡ‚ΡΡ двумя Ρ‚Π΅Π³Π°ΠΌΠΈ <ul>, <li>. ΠœΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ списки — это ΠΎΠ΄Π½Π° ΠΈΠ· разновидностСй HTML списков.

Π’Π΅Π³ <li> ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для формирования элСмСнтов упорядочСнного списка, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ, Ρ‚Π΅Π³ <li>Β Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΠ΅Ρ‚ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ HTML списка. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ <li> являСтся Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌ HTML элСмСнтом, Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½Π΅Π³ΠΎ ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π»ΡŽΠ±Ρ‹Π΅ HTML элСмСнты, Π° Π΅Π³ΠΎ ΡˆΠΈΡ€ΠΈΠ½Π° зависит ΠΎΡ‚ области, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΎΠ½ находится.

Π’Π΅Π³ <ul> ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для формирования ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… списков. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ стоящий слСва ΠΎΡ‚ элСмСнтов списка ΠΈΠΌΠ΅Π΅Ρ‚ Π²ΠΈΠ΄ Π·Π°ΠΊΡ€Π°ΡˆΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΊΡ€ΡƒΠ³Π°, Π½ΠΎ это Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈ Ρ‚Π΅Π³ΠΎΠ² <ul> ΠΈ <li>, ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚ имСю Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Ρ‚Π΅Π³Π° <li>, это справСдливо ΠΈ для Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… списков.

Если ΠΊ нСупорядочСнному списку Π½Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ стили ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»Π° CSS, Ρ‚ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ ΠΈΡ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ, Π·Π°Π΄Π°Π½Π½Ρ‹ΠΌ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.

Бинтаксис ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка

Π’Π΅Π³ΠΈ <ul>, <li> ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΏΠ°Ρ€Π½Ρ‹ΠΌΠΈ HTML Ρ‚Π΅Π³Π°ΠΌΠΈ, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ для ΠΈΡ… ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Ρ‚Π΅Π³, Π½ΠΎ, Ρƒ Ρ‚Π΅Π³Π° <li> ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Ρ‚Π΅Π³ Π½Π΅ ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ, хотя, это считаСтся Π΄ΡƒΡ€Π½Ρ‹ΠΌ Ρ‚ΠΎΠ½ΠΎΠΌ.

<ul> <li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ</li> <li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ</li> </ul>

<ul>

Β 

<li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ</li>

Β 

<li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ</li>

Β 

</ul>

Атрибуты Ρ‚Π΅Π³ΠΎΠ² ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка 

Π’Π΅Π³ <ul>, Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ‚Π΅Π³ ΠΈΠ· Π³Ρ€ΡƒΠΏΠΏΡ‹ HTML списков, ΠΈΠΌΠ΅Π΅Ρ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ событий ΠΈ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹Π΅ HTML Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹. Для Ρ‚Π΅Π³Π° <ul> доступСн Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Β ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ HTML Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚:

Type – Атрибут type позволяСт ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π²ΠΈΠ΄ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° нСупорядочСнного списка.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ссли значСния Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type Ρƒ Ρ‚Π΅Π³Π° <ul> ΠΈ располоТСнного Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½Π΅Π³ΠΎ Ρ‚Π΅Π³Π° <li> Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ, Ρ‚ΠΎ ΠΊ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΌΡƒ элСмСнту списка Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΎ значСния, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ присвоСно Ρ‚Π΅Π³Ρƒ <li>, эта ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ справСдлива ΠΈ для Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… списков <ol>.

Π’Π΅Π³ <li> ΠΈΠΌΠ΅Π΅Ρ‚ всС ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹Π΅ HTML Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ событий ΠΈ Π΄Π²Π° ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°:

Value – Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ value измСняСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ для упорядочСнных списков

Type – Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ type измСняСт Π²ΠΈΠ΄ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°, ΠΊΠ°ΠΊ Π² спискС Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΠΉ, Ρ‚Π°ΠΊ ΠΈ Π² ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌ спискС ΠΈ спискС мСню.

Π”Ρ€ΡƒΠ³ΠΈΠ΅ HTML списки 

Помимо списка ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ.Β Π•ΡΡ‚ΡŒ Π΅Ρ‰Π΅ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Β HTML списка:

Π’Π΅Π³ <ol> Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΠ΅Ρ‚ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список. Π’Π΅Π³ <dir> Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΠ΅Ρ‚ список Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΠΉ. Π’Π΅Π³ <dl> Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΠ΅Ρ‚ список ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ. ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ <dt> слуТит для хранСния ΠΈ отобраТСния Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π° списка ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ. Π’ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ <dd> помСщаСтся ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π° списка ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ. Π’Π΅Π³ <menu> создаСт список мСню.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ формирования списка ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования Ρ‚Π΅Π³Π° OL</title> </head> <body> <ul> <li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ <ul type=»square»> <li>1.1</li> <li type=»circle»>1.2</li> <li>1.3</li> <li>1.4</li> </ul> </li> <li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ <ul type=»circle»> <li>2.1</li> <li type=»disc»>2.2</li> <li>2.3</li> </ul> </li> <li>Π’Ρ€Π΅Ρ‚ΠΈΠΉ <ul> <li>3.1</li> <li>3.2</li> <li>3.3</li> </ul> </li> </ul> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<title>ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования Ρ‚Π΅Π³Π° OL</title>

</head>

<body>

<ul>

<li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ

<ul type=»square»>

<li>1.1</li>

<li type=»circle»>1.2</li>

<li>1.3</li>

<li>1.4</li>

</ul>

</li>

<li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ

<ul type=»circle»>

<li>2.1</li>

<li type=»disc»>2.2</li>

<li>2.3</li>

</ul>

</li>

<li>Π’Ρ€Π΅Ρ‚ΠΈΠΉ

<ul>

<li>3.1</li>

<li>3.2</li>

<li>3.3</li>

</ul>

</li>

Β 

</ul>

</body>

</html>

Если Π²Ρ‹ скопируСтС ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π² тСкстовый Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€(Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽΒ Notepad++, бСсплатный Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ с подсвСткой синтаксиса), Π° Π·Π°Ρ‚Π΅ΠΌ запуститС Π΅Π³ΠΎ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Ρ‚ΠΎ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅:

На этом всё, спасибо Π·Π° Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, надСюсь, Ρ‡Ρ‚ΠΎ Π±Ρ‹Π» Ρ…ΠΎΡ‚ΡŒ Ρ‡Π΅ΠΌ-Ρ‚ΠΎ ΠΏΠΎΠ»Π΅Π·Π΅Π½ ΠΈ Π΄ΠΎ скорых встрСч Π½Π° страницах Π±Π»ΠΎΠ³Π° для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… Π²Π΅Π±Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΈ вСбмастСров ZametkiNaPolyah.ruΒ 

zametkinapolyah.ru

HTML Бписки



ΠŸΡ€ΠΈΠΌΠ΅Ρ€ список HTML

НСупорядочСнный Бписок:

  • Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°
  • Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°
  • Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°
  • Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°

УпорядочСнный Бписок:

  1. ΠŸΠ΅Ρ€Π²Π°Ρ страница
  2. Вторая страница
  3. Π’Ρ€Π΅Ρ‚ΡŒΡ страница
  4. ЧСтвСртая страница
Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΊΠΎΠ΄Π° Β»

НСупорядочСнный список HTML

НСнумСрованный список начинаСтся с Ρ‚Π΅Π³Π° <ul>. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт списка начинаСтся с Ρ‚Π΅Π³Π° <li>.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ списка ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ диском (малСнькиС Ρ‡Π΅Ρ€Π½Ρ‹Π΅ ΠΊΡ€ΡƒΠΆΠΊΠ°ΠΌΠΈ):


НСупорядочСнный список HTML — Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ элСмСнт списка ΠΌΠ°Ρ€ΠΊΠ΅Ρ€

Бвойство CSS list-style-type ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для опрСдСлСния стиля элСмСнта списка ΠΌΠ°Ρ€ΠΊΠ΅Ρ€:

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅
discΠ—Π°Π΄Π°Π΅Ρ‚ элСмСнт списка ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ ΠΊΠ°ΠΊ диск (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ)
circleΠ—Π°Π΄Π°Π΅Ρ‚ элСмСнт списка ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ ΠΊΠ°ΠΊ ΠΊΡ€ΡƒΠ³
squareΠ—Π°Π΄Π°Π΅Ρ‚ элСмСнт списка ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ ΠΊΠ°ΠΊ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚
noneΠ­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ списка Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΌΠ΅Ρ‡Π΅Π½Ρ‹

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ — Диск

<ul>
Β <li>ΠšΠΎΡ„Π΅</li>
Β  <li>Π§Π°ΠΉ</li>
 <li>Молоко</li>
</ul>

Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΊΠΎΠ΄Π° Β»

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ — ΠšΡ€ΡƒΠ³

<ul>
Β <li>ΠšΠΎΡ„Π΅</li>
Β  <li>Π§Π°ΠΉ</li>
 <li>Молоко</li>
</ul>

Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΊΠΎΠ΄Π° Β»

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ — ΠšΠ²Π°Π΄Ρ€Π°Ρ‚

<ul>
Β <li>ΠšΠΎΡ„Π΅</li>
Β  <li>Π§Π°ΠΉ</li>
 <li>Молоко</li>
</ul>

Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΊΠΎΠ΄Π° Β»

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ — НичСго

<ul>
Β <li>ΠšΠΎΡ„Π΅</li>
Β  <li>Π§Π°ΠΉ</li>
 <li>Молоко</li>
</ul>

Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΊΠΎΠ΄Π° Β»

УпорядочСнный список HTML

УпорядочСнный список начинаСтся с Ρ‚Π΅Π³Π° <ol>. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт списка начинаСтся с Ρ‚Π΅Π³Π° <li>.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ списка Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½Ρ‹ Π½ΠΎΠΌΠ΅Ρ€Π° ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ:


УпорядочСнный список HTML — Атрибут type

Атрибут type Π² Ρ‚Π΅Π³Π΅ <ol>, опрСдСляСт Ρ‚ΠΈΠΏ элСмСнта списка ΠΌΠ°Ρ€ΠΊΠ΅Ρ€:

ВипОписаниС
type=»1″Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ списка Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΎΠ½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Ρ‹ Ρ†ΠΈΡ„Ρ€Π°ΠΌΠΈ (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ)
type=»A»Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ списка Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΎΠ½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Ρ‹ Π·Π°Π³Π»Π°Π²Π½Ρ‹ΠΌΠΈ Π±ΡƒΠΊΠ²Π°ΠΌΠΈ
type=»a»Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ списка Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΎΠ½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Ρ‹ строчными Π±ΡƒΠΊΠ²Π°ΠΌΠΈ
type=»I»Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ списка Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΎΠ½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Ρ‹ прописными римскими Ρ†ΠΈΡ„Ρ€Π°ΠΌΠΈ
type=»i»Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ списка Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΎΠ½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Ρ‹ строчными римскими Ρ†ΠΈΡ„Ρ€Π°ΠΌΠΈ

ΠŸΡ€ΠΎΠΏΠΈΡΠ½Ρ‹Π΅ РимскиС Π¦ΠΈΡ„Ρ€Ρ‹:

<ol type=»I»>
Β <li>ΠšΠΎΡ„Π΅</li>
Β  <li>Π§Π°ΠΉ</li>
 <li>Молоко</li>
</ol>

Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΊΠΎΠ΄Π° Β»

Π‘Ρ‚Ρ€ΠΎΡ‡Π½Ρ‹Π΅ РимскиС Π¦ΠΈΡ„Ρ€Ρ‹:

<ol type=»i»>
Β <li>ΠšΠΎΡ„Π΅</li>
Β  <li>Π§Π°ΠΉ</li>
 <li>Молоко</li>
</ol>

Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΊΠΎΠ΄Π° Β»

ОписаниС списка HTML

HTML Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ описаниС списка.

ОписаниС списка прСдставляСт собой список Ρ‚Π΅Ρ€ΠΌΠΈΠ½ΠΎΠ² с описаниСм ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°.

Π’Π΅Π³ <dl> опрСдСляСт описаниС списка, Ρ‚Π΅Π³ <dt> опрСдСляСт Ρ‚Π΅Ρ€ΠΌΠΈΠ½ (имя) ΠΈ Ρ‚Π΅Π³ <dd> описываСт ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ‚Π΅Ρ€ΠΌΠΈΠ½:Β 

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

<dl>
Β <dt>ΠšΠΎΡ„Π΅</dt>
Β <dd>- Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ горячий Π½Π°ΠΏΠΈΡ‚ΠΎΠΊ</dd>
 <dt>Молоко</dt>
Β <dd>- Π±Π΅Π»Ρ‹ΠΉ Ρ…ΠΎΠ»ΠΎΠ΄Π½Ρ‹ΠΉ Π½Π°ΠΏΠΈΡ‚ΠΎΠΊ</dd>
</dl>

Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΊΠΎΠ΄Π° Β»

Π’Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ списки HTML

Бписки ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌΠΈ (списки Π²Π½ΡƒΡ‚Ρ€ΠΈ списков):

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

<ul>
Β  <li>ΠšΠΎΡ„Π΅</li>
Β  <li>Π§Π°ΠΉ
Β  Β  <ul>
Β Β Β  Β  <li>Π§Π΅Ρ€Π½Ρ‹ΠΉ Ρ‡Π°ΠΉ</li>
Β Β Β Β Β  <li>Π—Π΅Π»Π΅Π½Ρ‹ΠΉ Ρ‡Π°ΠΉ</li>
Β Β Β  </ul>
Β  </li>
  <li>Молоко</li>
</ul>

Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΊΠΎΠ΄Π° Β»

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ списка ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ список, ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ HTML-элСмСнты, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ изобраТСния, ссылки ΠΈ Ρ‚. Π΄.


Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Бписки

Бписки HTML ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ стилизованы Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ способами с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.

Один популярный способ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² стилС список ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ мСню:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€





ul {
Β Β Β  list-style-type: none;
Β Β Β  margin: 0;
Β Β Β  padding: 0;
Β Β Β  overflow: hidden;
Β Β Β  background-color: #333333;
}

li {
Β Β Β  float: left;
}

li a {
Β Β Β  display: block;
Β Β Β  color: white;
Β Β Β  text-align: center;
Β Β Β  padding: 16px;
Β Β Β  text-decoration: none;
}

li a:hover {
Β Β Β  background-color: #111111;
}
</style>
</head>
<body>

<ul>
Β  <li><a href=»#home»>Π”ΠΎΠΌΠ°</a></li>
Β  <li><a href=»#news»>Новости</a></li>
Β  <li><a href=»#contact»>ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a></li>
Β  <li><a href=»#about»>О</a></li>
</ul>

</body>
</html>

Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΊΠΎΠ΄Π° Β»

ΠšΡ€Π°Ρ‚ΠΊΠΎΠ΅ содСрТаниС

  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ HTML элСмСнт <ul> для опрСдСлСния нСупорядочСнного списка
  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ CSS свойство list-style-type для опрСдСлСния элСмСнта списка ΠΌΠ°Ρ€ΠΊΠ΅Ρ€
  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ HTML элСмСнт <ol> Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ упорядочСнный список
  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ HTML Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ type Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Ρ‚ΠΈΠΏ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ
  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ HTML элСмСнт <li> для опрСдСлСния элСмСнта списка
  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ HTML элСмСнт <dl> для опрСдСлСния описания списка
  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ HTML элСмСнт <dt> для опрСдСлСния Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π° описания списка
  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ HTML элСмСнт <dd> для описания Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π° Π² спискС описания
  • Бписки ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌΠΈ Π² списки
  • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ списка ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты HTML
  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ свойство CSS float:left ΠΈΠ»ΠΈ display:inline для отобраТСния Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ списка

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ сСбя с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡƒΠΏΡ€Π°ΠΆΠ½Π΅Π½ΠΈΠΉ!

ВСги HTML списка

ВСгиОписаниС
<ul>ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ нСупорядочСнный список
<ol>ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ упорядочСнный список
<li>ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ элСмСнт списка
<dl>ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ описаниС списка
<dt>ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ Ρ‚Π΅Ρ€ΠΌΠΈΠ½ Π² описаниС списка
<dd>ΠžΠΏΠΈΡΡ‹Π²Π°Π΅Ρ‚ Ρ‚Π΅Ρ€ΠΌΠΈΠ½ Π² описаниС списка

schoolsw3.com

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *