НумСрованный список html – НумСрованный список | htmlbook.ru

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

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ список Π² HTML: ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ, Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список

Π’ HTML Π΅ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ списки. БущСствуСт Ρ‚Ρ€ΠΈ Π²ΠΈΠ΄Π° списков — ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ, Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΈ список ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ. Рассмотрим, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ список Π² HTML

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

Π’ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌ спискС ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ помСчаСтся ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠΌ. ΠœΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список создаётся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ тэга <ul>, Π° ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ списка с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ тэга <li>. Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚ HTML5 позволяСт Π½Π΅ ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ тэг Ρƒ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² списка. Но я Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ всё ΠΆΠ΅ Π·Π°ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ всС ΠΏΠ°Ρ€Π½Ρ‹Π΅ тэги. Π’Π°ΠΊ ΠΊΠΎΠ΄ Π±ΡƒΠ΄Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΌ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка:

+

8
9
10
11

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

Атрибут type устанавливаСт внСшний Π²ΠΈΠ΄ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°. ΠœΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ½ΠΌΠ°Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ значСния:

type=»disc» — Π² Π²ΠΈΠ΄Π΅ ΠΊΡ€ΡƒΠ³Π° (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ)

type=»circle» — Π² Π²ΠΈΠ΄Π΅ окруТности

type=»square» — Π² Π²ΠΈΠ΄Π΅ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π°

Установим Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ type для списка. Π’Π΅ΠΏΠ΅Ρ€ΡŒ строка 8 Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

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

НумСрованный список ΡƒΠ΄ΠΎΠ±Π΅Π½ Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ нумСрация производится автоматичСски, ΠΈ Ссли Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² сСрСдину списка Π΅Ρ‰Ρ‘ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹, Ρ‚ΠΎ Π½Π΅ придётся ΠΏΠ΅Ρ€Π΅ΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ Ρ†ΠΈΡ„Ρ€Ρ‹. НумСрованный список создаётся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ тэга <ol>, Π° ΠΏΡƒΠ½Ρ‚ΠΊΡ‚Ρ‹ списка ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ Π² ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌ, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ тэга <li>.

Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка. ΠŸΡ€Π΅Π΄Π»Π°Π³Π°ΡŽ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π½Π° Ρ‚ΠΎΠΉ ΠΆΠ΅ страницС, Π³Π΄Π΅ создан ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ список:

12
13
14
15

<ol>
<li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
<li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
</ol>

НумСрация ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡΡƒΡ‰Π΅ΡΡ‚Π²Π»ΡΡ‚ΡŒΡΡ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ арабскими Ρ†ΠΈΡ„Ρ€Π°ΠΌΠΈ, Π½ΠΎ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ способами. Для этого Ρƒ тэга <ol> Π΅ΡΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ type. Он ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ значСния:

type=»1″ — арабскиС Ρ†ΠΈΡ„Ρ€Ρ‹ (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ)

type=»A» — Π·Π°Π³Π»Π°Π²Π½Ρ‹Π΅ латинскиС Π±ΡƒΠΊΠ²Ρ‹

type=»a» — строчныС латинскиС Π±ΡƒΠΊΠ²Ρ‹

type=»I» — большиС римскиС Ρ†ΠΈΡ„Ρ€Ρ‹

type=»i» — малСнькиС римскиС Ρ†ΠΈΡ„Ρ€Ρ‹

Вэг <ol> ΠΈΠΌΠ΅Π΅Ρ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ start. Он устанавливаСт число,с ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ начинаСтся нумСрация. Атрибут Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΊΠ°ΠΊ с арабскими, Ρ‚Π°ΠΊ ΠΈ с римскими числами. ЗначСния:

start=»Ρ†Π΅Π»ΠΎΠ΅ число»

Для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π·Π°Π΄Π°Π΄ΠΈΠΌ тэгу <ol> Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ type. Π’Π΅ΠΏΠ΅Ρ€ΡŒ 12 строка Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

ΠŸΠΎΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈ, ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈΠΌ Ρ€Π°Π·Π½Ρ‹Π΅ значСния.

Бписок ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ

Бписок ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ — это список Ρ‚Π΅Ρ€ΠΌΠΈΠ½ΠΎΠ² ΠΈ ΠΈΡ… описаний. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΎΠ½ Ρ€Π΅Π΄ΠΊΠΎ, Π½ΠΎ Π·Π½Π°Ρ‚ΡŒ Π½ΡƒΠΆΠ½ΠΎ. Бписок ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ создаётся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ тэга <dl>. Вэг <dt> добавляСт Π² список Ρ‚Π΅Ρ€ΠΌΠΈΠ½, Π° Ρ‚Π΅Π³ <dd> описаниС.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ списка:

16
17
18
19
20
21
22
23
24
25

<dl>
<dt>Π’Π΅Ρ€ΠΌΠΈΠ½ 1</dt> <dd>ОписаниС Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ достаточно Π΄Π»ΠΈΠ½Π½Ρ‹ΠΌ ΠΈ ΡΠΎΡΡ‚ΠΎΡΡ‚ΡŒ ΠΈΠ· Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ количСства строк. Π’ этом случаС тСкст описания отобраТаСтся с отступом для выдСлСния Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°.</dd> <dt>Π’Π΅Ρ€ΠΌΠΈΠ½ 2</dt> <dd>ОписаниС Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ достаточно Π΄Π»ΠΈΠ½Π½Ρ‹ΠΌ ΠΈ ΡΠΎΡΡ‚ΠΎΡΡ‚ΡŒ ΠΈΠ· Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ количСства строк. Π’ этом случаС тСкст описанияотобраТаСтся с отступом для выдСлСния Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°.</dd> </dl>

basecourse.ru

Бписки в HTML (XHTML)

Бписки в HTML (XHTML)

 Бписки Π² HTML (XHTML) ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для оформлСния ΠΈ форматирования Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ тСкстовой части html-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, Π½Π° основании ΠΊΠΎΠ΄ΠΎΠ² списков, Π² HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅ Π²Π΅Π±-страницы ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ ΠΈ Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΡƒΡŽΡ‚ΡΡ элСмСнты управлСния ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ – ΠΊΠ½ΠΎΠΏΠΎΡ‡ΠΊΠΈ ΠΈ мСнюшки (простыС ΠΈ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠ΅). ΠšΠΎΠ΄Ρ‹ списков языка гипСртСкстовой Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ HTML Π½ΠΈΡ‡Π΅ΠΌ Π½Π΅ ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ ΠΎΡ‚ ΠΊΠΎΠ΄ΠΎΠ² списков XHTML…

  1. Код ΠΈ видимая Ρ‡Π°ΡΡ‚ΡŒ списков HTML
  2. Π’ΠΈΠ΄Ρ‹ списков Π² HTML
  3. ВСги списков в HTML
    <ul>,<ol>,<li>,<dl>, dt>,<dd>
  4. Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ список Π² html
  5. ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ списков html
Код ΠΈ видимая Ρ‡Π°ΡΡ‚ΡŒ списков HTML

Π Π°Π²Π½ΠΎ ΠΊΠ°ΠΊ ΠΈ всС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ Π²Π΅Π±-страницы, списки Π² HTML ΠΈΠΌΠ΅ΡŽΡ‚ Π΄Π²Π΅ ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ – ΠΊΠΎΠ΄ списка ΠΈ Π΅Π³ΠΎ Π²ΠΈΠ΄ΠΈΠΌΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ (ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚Π°Ρ†ΠΈΡŽ ΠΊΠΎΠ΄Π°). Код списка HTML Π½Π΅Π²ΠΈΠ΄ΠΈΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ. Код записываСтся Π² HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ Π²Π΅Π±-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈ интСрпрСтируСтся Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ нСпосрСдствСнно Π½Π° экран ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ – это Π±ΡƒΠ΄Π΅Ρ‚ видимая Ρ‡Π°ΡΡ‚ΡŒ списка.

Π’ΠΈΠ΄Ρ‹ списков Π² HTML

Π’ HTML сущСствуСт Ρ‚Ρ€ΠΈ Π²ΠΈΠ΄Π° списков – ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ, Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΈ список ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ. ВсС Π²ΠΈΠ΄Ρ‹ списков ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΌΠΈ ΠΈ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ списки. Π‘Ρ‚Π΅ΠΏΠ΅Π½ΡŒ ΠΈ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΡΡ‚ΡŒ списков опрСдСляСтся ΠΈΡ… ΠΊΠΎΠ΄ΠΎΠΌ – порядком записи Ρ‚Π΅Π³ΠΎΠ².

ВСги списков в HTML

Для создания ΠΊΠΎΠ΄Π° списков Π² HTML ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ‚Π΅Π³ΠΈ:
<ul>, <ol> ΠΈ <li>, Π° Ρ‚Π°ΠΊΠΆΠ΅ <dl>, <dt> ΠΈ <dd>
ВсС Ρ‚Π΅Π³ΠΈ ΠΏΠ°Ρ€Π½Ρ‹Π΅ – Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Ρ‚Π΅Π³ обязатСлСн.
Π’Π΅Π³ΠΈ списков Π² HTML ΡΠΎΠ·Π΄Π°ΡŽΡ‚ ΠΈ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°ΡŽΡ‚:

  • <ul> – ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список
  • <ol> – Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список
  • <li> – элСмСнты (строки) ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΈ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списков
  • <dl> – список ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ
  • <dt> – элСмСнт-Ρ‚Π΅Ρ€ΠΌΠΈΠ½ Π² спискС ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ
  • <dd> – элСмСнт-описаниС Π² спискС ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ
Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ список Π² html

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ список Π² Π²Π΅Π±-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅, Π½ΡƒΠΆΠ½ΠΎ Π² Π΅Π³ΠΎ HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ html-ΠΊΠΎΠ΄ списка. Код любого html-списка начинаСтся ΠΈ заканчиваСтся ΠΎΠ±Ρ€Π°ΠΌΠ»ΡΡŽΡ‰ΠΈΠΌΠΈ (ΠΎΠ±ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°ΡŽΡ‰ΠΈΠΌΠΈ) Ρ‚Π΅Π³Π°ΠΌΠΈ (

ol, ul, dl) ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ Π½Π° Π²ΠΈΠ΄ списка. ΠœΠ΅ΠΆΠ΄Ρƒ ΠΎΠ±ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°ΡŽΡ‰ΠΈΠΌΠΈ (ΠΎΠ±Ρ€Π°ΠΌΠ»ΡΡŽΡ‰ΠΈΠΌΠΈ) Ρ‚Π΅Π³Π°ΠΌΠΈ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ элСмСнты списка, ΠΎΠ±Ρ‘Ρ€Π½ΡƒΡ‚Ρ‹Π΅, Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ – Ρ‚Π΅Π³Π°ΠΌΠΈ элСмСнтов списка (li, dd, dt).

БущСствуСт мноТСство Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… html-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ², ΠΎΠ±Π»Π΅Π³Ρ‡Π°ΡŽΡ‰ΠΈΡ… Ρ€Π°Π±ΠΎΡ‚Ρƒ ΠΏΠΎ созданию Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·Π½Ρ‹Ρ… списков. Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅, Ρ€Π΅Ρ‡ΡŒ – нСпосрСдствСнно ΠΏΡ€ΠΎ ΠΊΠΎΠ΄Ρ‹ списка Π½Π° Π²Π΅Π±-страницС. Π’Ρ‹Π±ΠΎΡ€ способа создания ΠΊΠΎΠ΄Π°, Π² Notepad-Π΅ (Π±Π»ΠΎΠΊΠ½ΠΎΡ‚Π΅) ΠΈΠ»ΠΈ Π² Ρ…ΠΈΡ‚Ρ€ΡŽΡ‰Π΅ΠΌ html-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ – Π»ΠΈΡ‡Π½ΠΎΠ΅ Π΄Π΅Π»ΠΎ ΡŽΠ·Π΅Ρ€Π°. ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈ всС тСкстовыС html-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹ слишком ΡƒΠΏΡ€ΠΎΡ‰Ρ‘Π½Π½ΠΎ подходят ΠΊ созданию html-списков.

ΠœΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ html-список | Π’Π΅Π³ΠΈ <ul> ΠΈ <li>

Код ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка начинаСтся с ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎ Ρ‚Π΅Π³Π° <ul>. ΠŸΠΎΡ‚ΠΎΠΌ ΠΈΠ΄ΡƒΡ‚ элСмСнты, ΠΎΠ±Ρ€Π°ΠΌΠ»Ρ‘Π½Π½Ρ‹Π΅ ΠΏΠ°Ρ€Π½Ρ‹ΠΌΠΈ Ρ‚Π΅Π³Π°ΠΌΠΈ <li></li>. Код ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка заканчиваСтся Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ Ρ‚Π΅Π³ΠΎΠΌ </ul>. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π° ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка:

<ul>
 <li>Π Π°Π· элСмСнт</li>
 <li>Π”Π²Π° элСмСнт</li>
 <li>Π’Ρ€ΠΈ элСмСнт</li>
</ul>

Выглядит Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅:
  • Π Π°Π· элСмСнт
  • Π”Π²Π° элСмСнт
  • Π’Ρ€ΠΈ элСмСнт

ΠœΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ (нСупорядочСнный) список ΠΏΠΎ-Π°Π½Π³Π»ΠΈΡ†ΠΊΠΈ Π·Π²ΡƒΡ‡ΠΈΡ‚, ΠΊΠ°ΠΊ

Unordered List. Бтановится понятной Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Π° Π΅Π³ΠΎ ΠΎΠ±Ρ€Π°ΠΌΠ»ΡΡŽΡ‰Π΅Π³ΠΎ Ρ‚Π΅Π³Π° – <ul> (Unordered List). НаписаниС Ρ‚Π΅Π³Π° <ul> Π·Π°Π³Π»Π°Π²Π½Ρ‹ΠΌΠΈ Π»ΠΈΡ‚Π΅Ρ€Π°ΠΌΠΈ – <UL>. Π’ спСцификации HTML Π½Π΅Ρ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ рСгистра. ΠŸΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΏΠΈΡΠ°Ρ‚ΡŒ – <ul>

НумСрованный html-список | Π’Π΅Π³ΠΈ <ol> ΠΈ <li>

Код Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка Π½ΠΈΡ‡Π΅ΠΌ Π½Π΅ отличаСтся ΠΎΡ‚ ΠΊΠΎΠ΄Π° ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка, с Ρ‚ΠΎΠΉ Ρ€Π°Π·Π½ΠΈΡ†Π΅ΠΉ, Ρ‡Ρ‚ΠΎ ΠΎΠ±Ρ€Π°ΠΌΠ»ΡΡŽΡ‰ΠΈΠ΅ список Ρ‚Π΅Π³ΠΈ <ul> Π·Π°ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Π½Π° <ol> (Π°Π½Π³. Ordered List – Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ, упорядочСнный список). Код Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ Ρ‚Π΅Π³ <ol>. Π’Π½ΡƒΡ‚Ρ€ΠΈ находятся элСмСнты, ΠΎΠ±Ρ€Π°ΠΌΠ»Ρ‘Π½Π½Ρ‹Π΅ ΠΏΠ°Ρ€Π½Ρ‹ΠΌΠΈ Ρ‚Π΅Π³Π°ΠΌΠΈ, Π²ΠΈΠ΄Π° <li>элСмСнт</li>. ЗакрываСтся ΠΊΠΎΠ΄ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка Ρ‚Π΅Π³ΠΎΠΌ </ol>. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π° Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка:

<ol>
 <li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт</li>
 <li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт</li>
 <li>Π’Ρ€Π΅Ρ‚ΠΈΠΉ элСмСнт</li>
</ol>

Выглядит Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅:
  1. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт
  2. Π’Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт
  3. Π’Ρ€Π΅Ρ‚ΠΈΠΉ элСмСнт
ΠœΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹Π΅ (Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ списки)

Π’Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ (ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹Π΅, ступСнчатыС) списки Π² HTML ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ наибольший интСрСс. Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список Π² HTML, Π½ΡƒΠΆΠ½ΠΎ Π² ΠΊΠΎΠ΄ ΠΎΠ΄Π½ΠΎΠ³ΠΎ списка Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ списка. Код Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ списка вставляСтся Π² Π²ΠΈΠ΄Π΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ элСмСнта, ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚Π΅Π³Π°ΠΌΠΈ <li></li>. ΠŸΠΎΡ€ΡΠ΄ΠΎΠΊ ΠΈ ΡΡ‚Π΅ΠΏΠ΅Π½ΡŒ влоТСния Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ значСния. ДопускаСтся Π²ΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список Π² Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΈ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚, Π½Π° Π»ΡŽΠ±ΡƒΡŽ Π³Π»ΡƒΠ±ΠΈΠ½Ρƒ ΠΈ ΠΏΠΎΠΊΠ° Π½Π΅ надоСст. Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ всё Π²Ρ‹Ρ‚Π΅Ρ€ΠΏΠΈΡ‚. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π° ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ³ΠΎ списка со Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌΠΈ списками (ΠΊΠΎΠ΄ основного списка ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½ синим Ρ†Π²Π΅Ρ‚ΠΎΠΌ, ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ – ΠΆΡ‘Π»Ρ‚Ρ‹ΠΌ, Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ – Π·Π΅Π»Ρ‘Π½Ρ‹ΠΌ):

<ol>
 <li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт основного списка
  <ol>
   <li>Π Π°Π· (Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
   <li>Π”Π²Π° (Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)</li>
   <li>Π’Ρ€ΠΈ (Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
    <ul>
     <li>1 (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ)</li>
     <li>2 (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ)</li>
     <li>3 (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ)</li>
    </ul>
   </li>
  </ol>
 </li>
 <li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт основного списка</li>
 <li>Π’Ρ€Π΅Ρ‚ΠΈΠΉ элСмСнт основного списка</li>
</ol>

Выглядит Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅: 
  1. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт основного списка
    1. Π Π°Π· (Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
    2. Π”Π²Π° (Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
    3. Π’Ρ€ΠΈ (Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список)
      • 1 (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ)
      • 2 (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ)
      • 3 (Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ)
  2. Π’Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт основного списка
  3. Π’Ρ€Π΅Ρ‚ΠΈΠΉ элСмСнт основного списка
Бписок ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ | Π’Π΅Π³ΠΈ <dl>, <dt> ΠΈ <dd>

Бписок ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ (описаний, объяснСний) – ΠΏΠ΅Ρ€Π΅Ρ‡Π΅Π½ΡŒ Ρ‚Π΅Ρ€ΠΌΠΈΠ½ΠΎΠ² ΠΈ пояснСний ΠΊ Π½ΠΈΠΌ. Π­Ρ‚ΠΎΡ‚ Π²ΠΈΠ΄ тСкстовой записи списка ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Π½ для объяснСния ΠΈ описания Ρ‚Π΅Ρ€ΠΌΠΈΠ½ΠΎΠ² ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ – описания списка Ρ‚ΠΎΠ²Π°Ρ€ΠΎΠ². Бписок ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ отличаСтся ΠΎΡ‚ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… списков. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ списка ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Ρ‹ Π½Π° Π΄Π²Π΅ части – слово (Ρ‚Π΅Ρ€ΠΌΠΈΠ½) ΠΈ Π΅Π³ΠΎ описаниС (ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅, пояснСниС для этого слова ΠΈΠ»ΠΈ Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°).

Код списка ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ начинаСтся ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ Ρ‚Π΅Π³ΠΎΠΌ <dl> (Π°Π½Π³. Definition Lists – список ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ). ПослС Π½Π΅Π³ΠΎ ΠΈΠ΄Ρ‘Ρ‚ элСмСнт-Ρ‚Π΅Ρ€ΠΌΠΈΠ½ списка, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ трСбуСтся ΠΎΠ±ΡŠΡΡΠ½ΠΈΡ‚ΡŒ – этот элСмСнт ΠΎΠ±Ρ€Π°ΠΌΠ»Ρ‘Π½ ΠΏΠ°Ρ€Π½Ρ‹ΠΌ Ρ‚Π΅Π³ΠΎΠΌ <dt></dt>. Π”Π°Π»ΡŒΡˆΠ΅ ΠΈΠ΄Ρ‘Ρ‚ тСкстовый ΠΎΠ±ΡŠΡΡΠ½ΡΡŽΡ‰ΠΈΠΉ элСмСнт списка, ΠΎΠ½ ΠΎΠ±Ρ€Π°ΠΌΠ»Ρ‘Π½ ΠΏΠ°Ρ€Π½Ρ‹ΠΌ Ρ‚Π΅Π³ΠΎΠΌ <dd></dd>. Код списка ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ заканчиваСтся Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ Ρ‚Π΅Π³ΠΎΠΌ </dl>. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π° списка ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ:

<dl>
 <dt>HTML</dt>
  <dd>HTML – язык гипСртСкстовой Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ Π²Π΅Π±-страницы</dd>
 <dt>CSS</dt>
  <dd>CSS – каскадныС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй</dd>
 <dt>javascript</dt>
  <dd>javascript – язык сцСнариСв Π²Π΅Π±-страницы</dd>
</dl>

Π’ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ список ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ выглядит красиво:
HTML
HTML – язык гипСртСкстовой Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ Π²Π΅Π±-страницы
CSS
CSS – каскадныС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй
javascript
javascript – язык сцСнариСв Π²Π΅Π±-страницы

Для усилСния Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ эффСкта использован CSS,
ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΊ Π΄Π°Π½Π½ΠΎΠΌΡƒ ΠΊΠΎΠ΄Ρƒ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ списка ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ бу́ллСтов – ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… типографских Π·Π½Π°ΠΊΠΎΠ². Π’ HTML, списки ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ сущСствуСт ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ для создания описаний ΠΈ оформлСния тСкстовой Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ части Π²Π΅Π±-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. ΠœΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΈ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ списки Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Π΅ΠΉ ΠΈ Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·Π½Π΅ΠΉ. Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΡ… внСшним Π²ΠΈΠ΄ΠΎΠΌ производится ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Ρ‚Π΅Π³ΠΎΠ² списка ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Ρ‚Π΅Π³ΠΎΠ² элСмСнтов (строк) списка. Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΈ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ списки ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π² html-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅ Π²Π΅Π±-страниц для создания ΠΈ группирования элСмСнтов управлСния ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.

НСнумСрованныС ΠΈ Π½Π΅ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ списки

Бписок Π±Π΅Π· Π½ΠΈΡ‡Π΅Π³ΠΎ – Π±Π΅Π· Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ, ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²ΠΊΠΈ ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΡ… списочных ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΄Π°Π»ΠΎΠ² (бу́ллСтов), получится ΠΈΠ· ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка, послС присвоСния послСднСму свойства list-style:none;

Π‘ΠΎΠ»Π΅Π΅ слоТный способ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ/ΡƒΠ±Ρ€Π°Ρ‚ΡŒ бу́ллСты (ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹) Ρƒ списка – это Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΅ΠΌΡƒ свойство overflow: hidden;, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΎΠ±Ρ€Π΅Π·Π°Π΅Ρ‚ Π²Ρ‹ΡΡ‚ΡƒΠΏΠ°ΡŽΡ‰ΡƒΡŽ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ списка ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²ΠΊΡƒ (Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΡŽ, ΠΈΠ»ΠΈ Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΌ Ρƒ Π½Π΅Π³ΠΎ Π΅ΡΡ‚ΡŒ). ΠŸΡ€ΠΈΠΌ. ΠžΠ±Ρ€Π΅Π·Π°Π½ΠΈΠ΅ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ² (overflow: hidden;) Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ списка – свойство list-style-position: outside; Π­Ρ‚ΠΎ свойство устанавливаСтся Π΄Π΅Ρ„ΠΎΠ»Ρ‚Π½Ρ‹ΠΌΠΈ настройками ΠΏΠΎ-ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для всСх Π²ΠΈΠ΄ΠΎΠ² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΈ, Ссли ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ Π½ΠΈΠ³Π΄Π΅ Π½Π΅ ΡƒΠΊΠ°Π·Π°Π½ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ (list-style-position:inside;) Ρ‚ΠΎ Ρ‚ΠΎΠ³Π΄Π° добавляСм просто overflow: hidden;. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π° Π½Π΅ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΈ Π½Π΅Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка (<ul> ΠΈΠ»ΠΈ <ol>, Π½Π΅ Π²Π°ΠΆΠ½ΠΎ):

<ul style="list-style:none;">
 <li>НСмаркированныС ΠΈ Π½Π΅Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ строки</li>
 <li>НСмаркированныС ΠΈ Π½Π΅Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ строки</li>
 <li>НСмаркированныС ΠΈ Π½Π΅Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ строки</li>
</ul>

Выглядит Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅:
  • НСмаркированныС ΠΈ Π½Π΅Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ строки
  • НСмаркированныС ΠΈ Π½Π΅Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ строки
  • НСмаркированныС ΠΈ Π½Π΅Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ строки
Π’ΠΎ ΠΆΠ΅ самоС, Ρ‡Π΅Ρ€Π΅Π· overflow: hidden;, ΠΏΡ€ΠΈ условии Ρ‡Ρ‚ΠΎ list-style-position:outside; (ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ списка находятся Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ тСкста списка):
<ul style="overflow: hidden;">
 <li>НСмаркированныС ΠΈ Π½Π΅Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ строки</li>
 <li>НСмаркированныС ΠΈ Π½Π΅Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ строки</li>
 <li>НСмаркированныС ΠΈ Π½Π΅Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ строки</li>
</ul>

Выглядит Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅:
  • НСмаркированныС ΠΈ Π½Π΅Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ строки
  • НСмаркированныС ΠΈ Π½Π΅Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ строки
  • НСмаркированныС ΠΈ Π½Π΅Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ строки
Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠ΅ списки

Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠ΅ списки стоят особняком Π² HTML(XHTML).

<select>

<option>ΠŸΡƒΠ½ΠΊΡ‚ 1</option>

<option>ΠŸΡƒΠ½ΠΊΡ‚ 2</option>

</select>

Β 

ΠžΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ списков Π² html
ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ html-списками

tehnopost.info

НумСрованный список html с ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ использования

ВсСм ΠΏΡ€ΠΈΠ²Π΅Ρ‚, Π΄ΠΎΡ€ΠΎΠ³ΠΈΠ΅ Π΄Ρ€ΡƒΠ·ΡŒΡ! Погода сСгодня просто атасная. Π― прям Π΄ΠΎΠ²ΠΎΠ»Π΅Π½ ΠΊΠ°ΠΊ слон, Π΄Π°ΠΆΠ΅ новая ΡΡ‚Π°Ρ‚ΡŒΡ ΠΏΠΈΡˆΠ΅Ρ‚ΡΡ Π»Π΅Π³Ρ‡Π΅ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ. Если Π²Ρ‹ ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‚ΠΎ Π² ΠΏΡ€ΠΎΡˆΠ»ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ с Π²Π°ΠΌΠΈ ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΠ»ΠΈ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ списки Π² html, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠ·Π½Π°Π»ΠΈ Π² ΠΊΠ°ΠΊΠΈΡ… случаях ΠΈΡ… ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚.

Ну Π° сСгодня ΠΌΡ‹ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΠΌ Π½Π°ΡˆΡƒ Ρ‚Π΅ΠΌΡƒ, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° сСй Ρ€Π°Π· я ΠΏΠΎΠΊΠ°ΠΆΡƒ Π²Π°ΠΌ, ΠΊΠ°ΠΊ Π΄Π΅Π»Π°Ρ‚ΡŒ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список html. А Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅, Π² ΠΊΠ°ΠΊΠΈΡ… случаях ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ списки?

Π›ΠΈΡ‡Π½ΠΎ я ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Π½Π΅ для простого пСрСчислСния, Π° для ΠΏΠΎΡˆΠ°Π³ΠΎΠ²Ρ‹Ρ… дСйствий. ΠŸΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ это выглядит Ρ‚Π°ΠΊ:

  1. Π—Π°Ρ…ΠΎΠ΄ΠΈΠΌ Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ
  2. ΠžΡ‚ΠΊΡ€Ρ‹Π²Π΅ΠΌ мСню Β«Π€Π°ΠΉΠ»Β».
  3. НаТимаСм Β«Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒΒ».

Π§Ρ‚ΠΎ-Ρ‚ΠΎ Ρ‚ΠΈΠΏΠ° Ρ‚ΠΎΠ³ΠΎ. Ну Π΄Π° Π»Π°Π΄Π½ΠΎ. Π”Π°Π²Π°ΠΉΡ‚Π΅ Π»ΡƒΡ‡ΡˆΠ΅ посмотрим ΠΊΠ°ΠΊ это всё дСлаСтся Π² html.

<OL><LI>

Π‘Ρ€Π°Π·Ρƒ Ρ…ΠΎΡ‡Ρƒ Π²Π°ΠΌ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΡΡƒΡ‚ΡŒ здСсь Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ такая ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΡƒΡ€ΠΎΠΊΠ΅ с ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°ΠΌΠΈ, Π½ΠΎ ΠΏΡ€Π°Π²Π΄Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ‚Π΅Π³ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹. Π’ ΠΎΠ±Ρ‰Π΅ΠΌ смотритС. БСйчас Π²Ρ‹ сами всё ΠΏΠΎΠΉΠΌΠ΅Ρ‚Π΅.

Как Π²Ρ‹ ΡƒΠΆΠ΅ поняли, Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² ΠΏΠ°Ρ€Π½Ρ‹ΠΉ Ρ‚Π΅Π³ <ol></ol>, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Ordered list, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ упорядочСнный список.

Ну Π° ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт списка ΠΌΡ‹, ΠΊΠ°ΠΊ ΠΈ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅, Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ Π² ΠΏΠ°Ρ€Π½Ρ‹ΠΉ Ρ‚Π΅Π³ <li></li>. Π’ΡƒΡ‚ Ρƒ вас Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… вопросов Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ΡŒ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ. Ну я надСюсь, Ρ‡Ρ‚ΠΎ ΠΈ Π½Π΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ½Π΅Ρ‚). Π”Π°Π²Π°ΠΉΡ‚Π΅ Π»ΡƒΡ‡ΡˆΠ΅ посмотрим, ΠΊΠ°ΠΊ всё это Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅.

<ol>
<li>ΠŸΠΎΠΌΡ‹Ρ‚ΡŒ посуду</li>
<li>ВынСсти мусор</li>
<li>Π—Π°Ρ…Π²Π°Ρ‚ΠΈΡ‚ΡŒ ΠΌΠΈΡ€</li>
</ol>

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами ΠΏΡ€ΠΎΠ΄Π΅Π»Π°Ρ‚ΡŒ это Π² любом Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ ΠΈ ΠΌΡ‹ посмотрим, Ρ‡Ρ‚ΠΎ Ρƒ нас Π² ΠΈΡ‚ΠΎΠ³Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ.

Атрибуты

Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка, Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ большСС количСство доступных Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ², Π½ΠΎ Π² html 5 ΠΈΡ… ΡƒΠΆΠ΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ всё дСлаСтся Ρ‡Π΅Ρ€Π΅Π· CSS. Но я Π²Π°ΠΌ всё Ρ€Π°Π²Π½ΠΎ ΠΏΠΎΠΊΠ°ΠΆΡƒ.

type

Атрибут type, ΠΊΠ°ΠΊ ΠΈ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅, слуТит для измСнСния Ρ‚ΠΈΠΏΠ° ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°. Волько Ссли Ρ‚Π°ΠΌ ΠΌΡ‹ мСняли Ρ‚ΠΎΡ‡ΠΊΠΈ, Ρ‚ΠΎ здСсь Ρ†ΠΈΡ„Ρ€Ρ‹. Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, ΠΊΠ°ΠΊ это происходит.

<ol type=»A»>Β β€” список ΠΈΠ΄Π΅Ρ‚ Π½Π΅ ΠΏΠΎ Ρ†ΠΈΡ„Ρ€Π°ΠΌ, Π° ΠΏΠΎ Π·Π°Π³Π»Π°Π²Π½Ρ‹ΠΌ (ΠŸΡ€ΠΎΠΏΠΈΡΠ½Ρ‹ΠΌ) Π±ΡƒΠΊΠ²Π°ΠΌ латинского Π°Π»Ρ„Π°Π²ΠΈΡ‚Π° ΠΏΠΎ порядку.

<ol type=»a»>Β β€” Π’ΠΎ ΠΆΠ΅ самоС, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ всС ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°Ρ‚ΡŒΡΡ малСнькими (строчными) Π±ΡƒΠΊΠ²Π°ΠΌΠΈ латинского Π°Π»Ρ„Π°Π²ΠΈΡ‚Π°.

<ol type=»I»>Β β€” НумСрация Π±ΡƒΠ΄Π΅Ρ‚ Π²Π΅ΡΡ‚ΠΈΡΡŒ римскими Ρ†ΠΈΡ„Ρ€Π°ΠΌΠΈ

<ol type=»i»>Β β€” НумСрация Π±ΡƒΠ΄Π΅Ρ‚ Π²Π΅ΡΡ‚ΠΈΡΡŒ строчными римскими Ρ†ΠΈΡ„Ρ€Π°ΠΌΠΈ

Π”Π°Π²Π°ΠΉΡ‚Π΅ сдСлаСм Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Ρ… списка, Π½ΠΎ с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ значСниями Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type ΠΈ сохраним этот Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚.

Π‘ΠΌΠΎΡ‚Ρ€ΠΈΠΌ, Ρ‡Ρ‚ΠΎ Ρƒ нас ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ Π² ΠΈΡ‚ΠΎΠ³ΠΎΠ²ΠΎΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π΅. Ну Ρ‡Ρ‚ΠΎ? По ΠΌΠΎΠ΅ΠΌΡƒ всё ΠΊΡ€ΡƒΡ‚ΠΎ. Как ΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π±Ρ‹Ρ‚ΡŒ).

start

Атрибут start позволяСт Π·Π°Π΄Π°Ρ‚ΡŒ Π½Π°ΠΌ Π½Π°Ρ‡Π°Π»ΠΎ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ. Π”Π°, Π±Ρ‹Π²Π°ΡŽΡ‚ Ρ‚Π°ΠΊΠΈΠ΅ случаи, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ вСсти список с самого Π½Π°Ρ‡Π°Π»Π° ΠΈΠ»ΠΈ Π³Π΄Π΅-Ρ‚ΠΎ Π±Ρ‹Π» ΠΎΠ±Ρ€Ρ‹Π² ΠΈ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ с ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ мСста. Π’ΠΎΠ³Π΄Π° Π²Π°ΠΌ этот Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΡ€ΠΈΠ³ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ. Π’Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ½ дСйствуСт Π½Π° всС значСния Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type.

<ol start=»5″>Β β€” ВсС начнСтся сразу с пятого ΠΏΡƒΠ½ΠΊΡ‚Π°

Π”Π°Π²Π°ΠΉΡ‚Π΅ я ΠΏΠΎΠΊΠ°ΠΆΡƒ Π²Π°ΠΌ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ дСйствия всС Π½Π° Ρ‚ΠΎΠΌ ΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ с Π·Π°Ρ…Π²Π°Ρ‚ΠΎΠΌ ΠΌΠΈΡ€Π°. Волько Ссли Π²Ρ‹ ΡΠΎΠ±ΠΈΡ€Π°Π΅Ρ‚Π΅ΡΡŒ Π΄Π΅Π»Π°Ρ‚ΡŒ Π½Π΅ Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠΉ, Π° Π±ΡƒΠΊΠ²Π΅Π½Π½Ρ‹ΠΉ ΠΈΠ»ΠΈ римский порядок, Ρ‚ΠΎ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡΡ‚Π°Π²ΡŒΡ‚Π΅ type, ΠΈΠ½Π°Ρ‡Π΅ Π±Π΅Π· Π½Π΅Π³ΠΎ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ подСйствуСт.

Π’ΠΎΡ‚ Ρ‚Π°ΠΊ всё Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ. Π’Ρ€ΠΎΠ΄Π΅ всё просто. ΠŸΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ я Π³ΠΎΠ²ΠΎΡ€ΡŽ?)

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ Π΅ΡΡ‚ΡŒ ΠΈ Π΅Ρ‰Π΅ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹, Π½ΠΎ я ΡƒΠ²Π΅Ρ€ΡΡŽ, ΠΎΠ½ΠΈ Π²Π°ΠΌ Π½Π΅ понадобятся. А Π²ΠΎΠΎΠ±Ρ‰Π΅ я надСюсь, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ ΡΡ‚Π°Ρ‚ΡŒΡ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ»Π°ΡΡŒ ΠΈ Π±Ρ‹Π»Π° понятна. Π₯отя Ссли Π²Π΄Ρ€ΡƒΠ³ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ нСпонятно, Ρ‚ΠΎ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡΠΏΡ€Π°ΡˆΠΈΠ²Π°ΠΉΡ‚Π΅, Π½Π΅ ΡΡ‚Π΅ΡΠ½ΡΠΉΡ‚Π΅ΡΡŒ).

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ Π²ΠΎΠΎΠ±Ρ‰Π΅ Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠΎΡ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Ρ‚ΡŒ Π²Π°ΠΌ ΠΎΠ΄ΠΈΠ½ Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ видСокурс ΠΏΠΎ вСрсткС сайтов Π½Π° HTML5 ΠΈ CSS3 с ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ нуля Π΄ΠΎ ΠΏΡ€ΠΎΡ„ΠΈ. Π­Ρ‚ΠΎΡ‚ курс Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΈ Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½ΠΎ построСн. Π—Π΄Π΅ΡΡŒ рассматриваСтся нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² вСрстки Ρ€Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ‚ΠΈΠΏΠΎΠ² сайтов ΠΈ ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚ΡΡ всё Π±ΡƒΠΊΠ²Π°Π»ΡŒΠ½ΠΎ Π½Π° ΠΏΠ°Π»ΡŒΡ†Π°Ρ…. Π’ ΠΎΠ±Ρ‰Π΅ΠΌ Π²Π΅Ρ‰ΡŒ стоящая ΠΈ я Π²Π°ΠΌ Π΅Π΅ ΠΎΡ‡Π΅Π½ΡŒ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ.

Ну Π° Π½Π° этом я с Π²Π°ΠΌΠΈ Π½Π° сСгодня ΠΏΡ€ΠΎΡ‰Π°ΡŽΡΡŒ. НС Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ΄ΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒΡΡ Π½Π° ΠΌΠΎΠΉ Π±Π»ΠΎΠ³, Ссли Π²Ρ‹ Π΄ΠΎ сих ΠΏΠΎΡ€ Π½Π΅ подписаны. А Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ с Π΄Ρ€ΡƒΠ·ΡŒΡΠΌΠΈ ΡΡ‚Π°Ρ‚ΡŒΠ΅ΠΉ Π² ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтях. Вас ΠΆΠ΅ Β Π±ΡƒΠ΄Ρƒ ΠΎΡ‡Π΅Π½ΡŒ ΠΆΠ΄Π°Ρ‚ΡŒ Π½Π° просторах ΠΌΠΎΠ΅Π³ΠΎ Π±Π»ΠΎΠ³Π°, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π΅Ρ‰Π΅ увидимся. Пока-ΠΏΠΎΠΊΠ°!

Π‘ ΡƒΠ²Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, Π”ΠΌΠΈΡ‚Ρ€ΠΈΠΉ ΠšΠΎΡΡ‚ΠΈΠ½.

Β 

koskomp.ru

НумСрованный ΠΈ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список | htmlbook.ru

ο»Ώ

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ список, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° рис.Β 1. Бсылки Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ (Ρ‚.Π΅. вСсти Π½Π° ΠΊΠ°ΠΊΠΈΠ΅-Ρ‚ΠΎ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Ρ„Π°ΠΉΠ»Ρ‹), Π³Π»Π°Π²Π½ΠΎΠ΅ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ Π²ΠΈΠ΄ ΠΈ Π²Π°Π»ΠΈΠ΄Π½ΠΎΡΡ‚ΡŒ ΠΊΠΎΠ΄Π°.

Рис. 1

<!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>Π’Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ списки</title>
 </head>
 <body>
  <h2>ΠšΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова</h2>
  <ol type="I">
   <li><b>A</b>
    <ul type="disc">
     <li><a href="#">abstract</a></li>
    </ul>
   </li>
   <li><b>B</b>
    <ul type="disc">
     <li><a href="#">boolean</a></li>
     <li><a href="#">break</a></li>
     <li><a href="#">byte</a></li>
    </ul>
   </li>
   <li><b>C</b>
    <ul type="disc">
     <li><a href="#">case</a></li>
     <li><a href="#">catch</a></li>
     <li><a href="#">char</a></li>
     <li><a href="#">class</a></li>
     <li><a href="#">const</a></li>
     <li><a href="#">continue</a></li>
    </ul>
   </li>
  </ol>
 </body>
</html>

Π‘Ρ‚Π°Ρ‚ΡŒΠΈ ΠΏΠΎ Ρ‚Π΅ΠΌΠ΅

НС Π²Ρ‹ΠΊΠ»Π°Π΄Ρ‹Π²Π°ΠΉΡ‚Π΅ свой ΠΊΠΎΠ΄ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ Π² коммСнтариях, ΠΎΠ½ отобраТаСтся Π½Π΅ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ. Π’ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ΡΡŒ сСрвисом cssdeck.com ΠΈΠ»ΠΈ jsfiddle.net, сохранитС ΠΊΠΎΠ΄ ΠΈ Π² коммСнтариях Π΄Π°ΠΉΡ‚Π΅ Π½Π° Π½Π΅Π³ΠΎ ссылку. Π’Π°ΠΊ ΠΈ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ сразу увидят.

htmlbook.ru

Π’ΠΈΠ΄Ρ‹ списков Π² HTML, ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹

Π’ языкС Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ html Ρ€Π°Π·Π»ΠΈΡ‡Π°ΡŽΡ‚ 3 Π²ΠΈΠ΄Π° списков β€” упорядочСнныС (Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅), нСупорядочСнныС (Π½Π΅Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅) ΠΈ списки ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ (definition list).

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

ΠœΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ (нСупорядочСнный) список β€” unordered list

Для построСния Ρ‚Π°ΠΊΠΎΠ³ΠΎ списка Π½ΡƒΠΆΠ½Ρ‹ 2 Π²ΠΈΠ΄Π° элСмСнтов: β€˜ul’ (сокращСниС ΠΎΡ‚ unordered list, Ρ‚.Π΅. нСупорядочСнный список) ΠΈ β€˜li’ (элСмСнт списка). ВсС, Ρ‡Ρ‚ΠΎ написано Π²Π½ΡƒΡ‚Ρ€ΠΈ β€˜li’, помСчаСтся ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠΌ.

Π’Π½Π΅ΡˆΠ½ΠΈΠΌ Π²ΠΈΠ΄ΠΎΠΌ Ρ‚Π°ΠΊΠΎΠ³ΠΎ списка ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ, задавая Ρ‚ΠΈΠΏΡ‹ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ².

Π’ΠΈΠΏΡ‹ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ²

Π•ΡΡ‚ΡŒ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ type, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ставится Π² ΠΎΠ±ΠΎΠΈΡ… элСмСнтах списка. Π­Ρ‚ΠΎ Ρ‚ΠΈΠΏ вашСго ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°. ВсСго 3 Ρ‚ΠΈΠΏΠ°: ΠΎΠΊΡ€ΡƒΠΆΠ½ΠΎΡΡ‚ΡŒ, диск ΠΈ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚:

<ul type="square"> - ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚
<ul type="disc"> - диск
<ul type="circle"> - ΠΎΠΊΡ€ΡƒΠΆΠ½ΠΎΡΡ‚ΡŒ

Π’ зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Π³Π΄Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ‚ΠΈΠΏ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ Π΅Π³ΠΎ Ρƒ всСго списка ΠΈΠ»ΠΈ Ρƒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ элСмСнта.

НумСрованный список (ordered list)

Для построСния списка Ρ‚Π°ΠΊΠΆΠ΅ Π½ΡƒΠΆΠ½ΠΎ 2 элСмСнта: β€˜ol’ ΠΈ β€˜li’ (элСмСнт списка). ΠœΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ Π·Π°ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Π½Π° Ρ†ΠΈΡ„Ρ€Ρ‹ с Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ простого списка:

<ol>
<li>ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт</li>
<li>Π²Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт</li>
<li>послСдний элСмСнт</li>
</ol>

Π’Π½Π΅ΡˆΠ½ΠΈΠΌ Π²ΠΈΠ΄ΠΎΠΌ упорядочСнного списка ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ, задавая Ρ€Π°Π·Π½Ρ‹Π΅ Ρ‚ΠΈΠΏΡ‹ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ.

Π’ΠΈΠΏΡ‹ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ

Π•ΡΡ‚ΡŒ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ type, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ставится Π² элСмСнтС β€˜ol’ ΠΈΠ»ΠΈ β€˜li’. Π­Ρ‚ΠΎ Ρ‚ΠΈΠΏ вашСго списка. ВсСго 5 Ρ‚ΠΈΠΏΠΎΠ²:

<ol type="1"> - НумСрация арабскими Ρ†ΠΈΡ„Ρ€Π°ΠΌΠΈ (1, 2, 3)
<ol type="A"> - НумСрация прописными Π±ΡƒΠΊΠ²Π°ΠΌΠΈ (A, B, C)
<ol type="a"> - НумСрация строчными Π±ΡƒΠΊΠ²Π°ΠΌΠΈ (a, b, c)
<ol type="I"> - НумСрация большими римскими Ρ†ΠΈΡ„Ρ€Π°ΠΌΠΈ (I, II, III)
<ol type="i"> - НумСрация ΠΌΠ°Π»Ρ‹ΠΌΠΈ римскими Ρ†ΠΈΡ„Ρ€Π°ΠΌΠΈ (i, ii, iii)
<ol start="5"> - Π‘ ΠΊΠ°ΠΊΠΎΠΉ Ρ†ΠΈΡ„Ρ€Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΡŽ

Π’ зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Π³Π΄Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ‚ΠΈΠΏ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ Π΅Π΅ Ρƒ всСго списка ΠΈΠ»ΠΈ Ρƒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ элСмСнта.

Бписок ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ (definition list)

Бписок ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ Π±Ρ‹Π» Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ для словарных статСй.

Π•ΡΡ‚ΡŒ ΠΎΠ±Ρ‰ΠΈΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ β€˜dl’. Π’Π½ΡƒΡ‚Ρ€ΠΈ Π½Π΅Π³ΠΎ стоят β€˜dt’ (definition termin β€” Ρ‚Π΅Ρ€ΠΌΠΈΠ½) ΠΈ β€˜dd’ (definition description β€” описаниС). ΠŸΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

<dl>
<dt>ΠžΡ‚Π΄Π΅Π» ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³Π°</dt>
<dd>Π”Π°Π½Π½Ρ‹ΠΉ ΠΎΡ‚Π΄Π΅Π» занимаСтся
ΠΏΡ€ΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ΠΌ Ρ‚ΠΎΠ²Π°Ρ€ΠΎΠ² ΠΈ услуг</dd>
<dt>Ѐинансовый ΠΎΡ‚Π΄Π΅Π»</dt>
<dd>Π”Π°Π½Π½Ρ‹ΠΉ ΠΎΡ‚Π΄Π΅Π» занимаСтся всСми
финансовыми опСрациями</dd>
</dl>

ВсС элСмСнты всСх списков β€” Π±Π»ΠΎΡ‡Π½Ρ‹Π΅. Но Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта β€˜dt’ ΠΌΠΎΠΆΠ½ΠΎ ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ строчныС элСмСнты. Π’ элСмСнты β€˜dd’ ΠΈ β€˜li’ ΠΌΠΎΠΆΠ½ΠΎ ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ всС, Ρ‡Ρ‚ΠΎ ΡƒΠ³ΠΎΠ΄Π½ΠΎ. ΠžΡ‚ΡΡŽΠ΄Π° ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ списки.

Π’Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ (ΡΠΌΠ΅ΡˆΠ°Π½Π½Ρ‹Π΅ списки)

Π­Ρ‚ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹Π΅ списки, Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π΅ΡΡ‚ΡŒ иСрархия. Часто Ρ‚Π°ΠΊΠΈΠ΅ списки ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΏΡ€ΠΈ построСнии ΠΊΠ°Ρ€Ρ‚Ρ‹ сайта. ΠŸΡ€ΠΈΠΌΠ΅Ρ€:

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

1st-network.ru

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список Π² HTML

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список Π² HTML-страничкС, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°Π΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π΅Π³ <ol>, Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΈΡΡƒΡ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π΅Π³ΠΈ <li>.

Π‘Ρ‚Ρ€ΠΎΠΊΠΈ, ΠΏΡ€ΠΈΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Π² ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌ спискС, Π²Ρ‹Π΄Π΅Π»ΡΡŽΡ‚ΡΡ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°ΠΌΠΈ. Π’ Ρ‚ΠΎ врСмя, ΠΊΠ°ΠΊ Π² упорядочСнном – Π½ΡƒΠΌΠ΅Ρ€ΡƒΡŽΡ‚ΡΡ.

Π”Π°Π²Π°ΠΉΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ для ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· Π½Π°ΡˆΠΈΡ… ΠΊΠ½ΠΈΠ³ список Π΅Ρ‘ прСимущСств:

...
<p>
    ВСкст ΠΏΡ€ΠΎ ΠΊΠ½ΠΈΠ³Ρƒ 2
</p>
<p>
    ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° этой ΠΊΠ½ΠΈΠ³ΠΈ:
</p>
<ol>
    <li>ΠΎΠ½Π° читаСтся Π½Π° ΠΎΠ΄Π½ΠΎΠΌ Π΄Ρ‹Ρ…Π°Π½ΠΈΠΈ</li>
    <li>ΠΎΠ½Π° дСшСвлС ΠΏΠ΅Ρ€Π²ΠΎΠΉ</li>
</ol>
...

Π’ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ это выглядит Ρ‚Π°ΠΊ:

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΡŽ Π½Π΅ ΠΎΡ‚ Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹

ΠŸΡ€ΠΈ нСобходимости ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ порядковый Π½ΠΎΠΌΠ΅Ρ€ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка. Π§Ρ‚ΠΎΠ±Ρ‹ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ start. На ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ это выглядит ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ.

<ol start="3">
  <li>Ρ‚Ρ€ΠΈ</li>
  <li>Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅</li>
</ol>

На страницС Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠΎΠ΄ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π²ΠΎΡ‚ Ρ‚Π°ΠΊ:

Π’ΠΎΡ‚ Ρ‚Π°ΠΊ просто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ списки. Π”Π΅Π»Π°Π΅ΠΌ домашнСС Π·Π°Π΄Π°Π½ΠΈΠ΅ ΠΈ двигаСмся дальшС.

webshake.ru

Бписки html

Π£Ρ€ΠΎΠΊ 8.

Π­Ρ‚ΠΎΡ‚ ΡƒΡ€ΠΎΠΊ слоТнСС ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π³ΠΎ, ΠΏΠΎ этому ΡΠΎΠ²Π΅Ρ‚ΡƒΡŽ Π½Π΅ ΠΎΡ‚Π²Π»Π΅ΠΊΠ°Ρ‚ΡŒΡΡ ΠΈ максимально ΡΠΊΠΎΠ½Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π½Π° ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π΅. Бписки Π±Ρ‹Π²Π°ΡŽΡ‚ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… Π²ΠΈΠ΄ΠΎΠ². Π­Ρ‚ΠΎ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ списки, ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅, ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹Π΅ ΠΈ списки ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ разбСрСмся с ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ Π² порядкС ΠΎΡ‡Π΅Ρ€Π΅Π΄ΠΈ. Наш ΡƒΡ€ΠΎΠΊ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΡΡ‚ΠΎΡΡ‚ΡŒ ΠΈΠ· 4-Π΅Ρ… частСй. ΠŸΠΎΠ΅Ρ…Π°Π»ΠΈ!

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

НумСрованныС списки html ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для пСрСчислСния ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΉ (элСмСнтов) списка ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ строго ΠΏΠΎ порядку ΠΈ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ свой ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π½ΠΎΠΌΠ΅Ρ€.

НумСрованный список открываСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³Π° &ltol&gt ΠΈ закрываСтся соотвСтствСнно Ρ‚Π΅Π³ΠΎΠΌ &lt/ol&gt. КаТдая ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Π°Ρ позиция (элСмСнт) списка находится Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‚Π΅Π³Π° &ltli&gt. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ сами создадим Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список, ΠΊΠΎΠ΄ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

БохраняСм внСсСнныС измСнСния Π² Notepad ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ Ρ„Π°ΠΉΠ» Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅:

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ нумСрация списка всСгда начинаСтся с 1. Если Π’Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ нумСрация Π½Π°Ρ‡ΠΈΠ½Π°Π»Π°ΡΡŒ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, с 5, Ρ‚ΠΎ для Ρ‚Π΅Π³Π° &ltol&gt Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ start ΠΈ Π΄Π°Ρ‚ΡŒ Π΅ΠΌΡƒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 5.

* Π‘ этого ΠΌΠΎΠΌΠ΅Π½Ρ‚Π°, ΠΊΠΎΠ³Π΄Π° ΠΌΠ½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π’Π°ΠΌ запись html ΠΊΠΎΠ΄Π° — Π½Π° рисункС Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ Π½Π΅ вСсь ΠΊΠΎΠ΄ со структурой страницы, Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ рассматриваСмая Π½Π°ΠΌΠΈ Ρ‡Π°ΡΡ‚ΡŒ ΠΊΠΎΠ΄Π°. Π― ΡΡ‡ΠΈΡ‚Π°ΡŽ, Ρ‡Ρ‚ΠΎ сСйчас Π’Ρ‹ ΡƒΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ‚Π΅Π³ΠΈ входящиС Π² структуру html страницы — это ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Π°Ρ ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰Π°Ρ. Если Π’Ρ‹ Π·Π°Π±Ρ‹Π»ΠΈ — смотритС ΡƒΡ€ΠΎΠΊ 4.

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ элСмСнты списка Π½ΡƒΠΌΠ΅Ρ€ΡƒΡŽΡ‚ΡΡ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Ρ†ΠΈΡ„Ρ€, ΠΎΠ΄Π½Π°ΠΊΠΎ ΡΡ‚ΠΈΠ»ΡŒ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ для Ρ‚Π΅Π³Π° &ltol&gt Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ type, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ значСния 1, A, a, I, i.
1 — 1, 2, 3, 4… (задаСтся ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ)
A — A, B, C, D…
a — a, b, c, d…
I — I, II, III, IV…
i — i, ii, iii, iv…

К ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, Ссли ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ наш список нумСровался ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ ΠΌΠ°Π»Π΅Π½ΡŒΠΊΠΈΡ… латинских Π±ΡƒΠΊΠ², Ρ‚ΠΎ для Ρ‚Π΅Π³Π° &ltol&gt Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ type со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ a. На ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ это Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

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

ΠœΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ списки html ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для пСрСчислСния ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΉ (элСмСнтов) списка ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ строгой Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π² ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎΠΌ порядкС.

ΠœΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список открываСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³Π° &ltul&gt ΠΈ закрываСтся соотвСтствСнно Ρ‚Π΅Π³ΠΎΠΌ &lt/ul&gt. КаТдая ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Π°Ρ позиция (элСмСнт) списка находится Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‚Π΅Π³Π° &ltli&gt, Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ ΠΈ Π² случаС с Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ списком.

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ элСмСнты списка всСгда ΠΌΠ°Ρ€ΠΊΠΈΡ€ΡƒΡŽΡ‚ΡΡ Ρ‡Π΅Ρ€Π½Ρ‹ΠΌ ΠΊΡ€ΡƒΠΆΠΊΠΎΠΌ, ΡΡ‚ΠΈΠ»ΡŒ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ для Ρ‚Π΅Π³Π° &ltul&gt Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ type, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ значСния disc, circle, square.
disc — (задаСтся ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ)
circle
square

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ создадим список ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ для ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²ΠΊΠΈ Ρ‡Π΅Ρ€Π½Ρ‹Π΅ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ΠΈΠΊΠΈ (square).

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

ΠœΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΉ список html — это список, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ содСрТит Π² сСбС Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ нСсколько списков. ΠœΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΉ список ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΡΡ‚ΠΎΡΡ‚ΡŒ ΠΊΠ°ΠΊ ΠΈΠ· Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ…, Ρ‚Π°ΠΊ ΠΈ ΠΈΠ· ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… списков. Π§Ρ‚ΠΎΠ±Ρ‹ Π΅Π³ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠ΄ΠΈΠ½ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ список «Π²Π»ΠΎΠΆΠΈΡ‚ΡŒ» Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ.

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ элСмСнт списка Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚Π΅Π³Π°ΠΌΠΈ &ltli&gt ΠΈ &lt/li&gt. Для создания ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ³ΠΎ списка Π½ΡƒΠΆΠ½ΠΎ ΠΌΠ΅ΠΆΠ΄Ρƒ этими Ρ‚Π΅Π³Π°ΠΌΠΈ, ΠΏΠΎΠΌΠΈΠΌΠΎ тСкста Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ список. Π‘Π΅Π· наглядного ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π² этом слоТно Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ всС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° рисунок:

ΠœΡ‹ сдСлали ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΉ список ΠΈΠ· сочСтания Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΈ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка. Как Π²ΠΈΠ΄ΠΈΡ‚Π΅ Π² основС Π»Π΅ΠΆΠΈΡ‚ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉΡΡ Ρ‚Π΅Π³ΠΎΠΌ &ltol&gt ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉΡΡ Ρ‚Π΅Π³ΠΎΠΌ &lt/ol&gt. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт нашСго Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка открываСтся Ρ‚Π΅Π³ΠΎΠΌ &ltli&gt, Π·Π°Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ, ΠΈΠ΄Π΅Ρ‚ тСкст, Π° Π΄Π°Π»Π΅Π΅ вмСсто Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ элСмСнт списка Ρ‚Π΅Π³ΠΎΠΌ &lt/li&gt, ΠΌΡ‹ вставляСм Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹ΠΉ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список. И Ρ‚ΠΎΠ»ΡŒΠΊΠΎ послС этого ΠΌΡ‹ Π·Π°ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ элСмСнт списка Ρ‚Π΅Π³ΠΎΠΌ &lt/li&gt. Π—Π°Ρ‚Π΅ΠΌ ΡƒΠΆΠ΅ ΠΈΠ΄ΡƒΡ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ элСмСнты нашСго основного Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка.

Бписок ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ.

Бписок ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π΅Π½ ΠΏΡ€ΠΈ создании Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… словарСй ΠΈΠ»ΠΈ статСй содСрТащих Π² сСбС ΠΌΠ½ΠΎΠ³ΠΎ Ρ‚Π΅Ρ€ΠΌΠΈΠ½ΠΎΠ².

Бписок ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ открываСтся Ρ‚Π΅Π³ΠΎΠΌ &ltdl&gt ΠΈ закрываСтся Ρ‚Π΅Π³ΠΎΠΌ &lt/dl&gt. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ‚Π΅Ρ€ΠΌΠΈΠ½ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ &ltdt&gt ΠΈ &lt/dt&gt. Π”Π°Π»Π΅Π΅ ΠΏΠΈΡˆΠ΅Ρ‚ΡΡ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΊ Ρ‚Π΅Ρ€ΠΌΠΈΠ½Ρƒ, ΠΎΠ½ΠΎ находится ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚Π΅Π³Π°ΠΌΠΈ &ltdd&gt ΠΈ &lt/dd&gt.

БСйчас ΠΌΡ‹ сдСлаСм список ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ состоящий ΠΈΠ· Π΄Π²ΡƒΡ… Ρ‚Π΅Ρ€ΠΌΠΈΠ½ΠΎΠ². Код Π±ΡƒΠ΄Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ:

БохраняСм измСнСния ΠΈ смотрим Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅:

* Π’ΠΎΡ‚ ΠΌΡ‹ ΠΈ рассмотрСли всС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ списков html. Из своСго ΠΎΠΏΡ‹Ρ‚Π° ΠΌΠΎΠ³Ρƒ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹Π΅ списки ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π½Π΅ часто, списки ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ Π΅Ρ‰Π΅ Ρ€Π΅ΠΆΠ΅. Π‘Π°ΠΌΠΎΠ΅ Π³Π»Π°Π²Π½ΠΎΠ΅, Ρ‡Ρ‚ΠΎ Π’Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠ· этого ΡƒΡ€ΠΎΠΊΠ° ΡƒΡΠ²ΠΎΠΈΡ‚ΡŒ — это ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ составлСния списков. ΠΠ°ΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡΠΎΠ²Π΅Ρ‚ΡƒΡŽ ΠΏΠΎΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒΡΡ с ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΌΠΈ списками.

Π’Ρ‹ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π½Π΅ поняли ΠΈΠ· этого ΡƒΡ€ΠΎΠΊΠ°? Π‘ΠΏΡ€Π°ΡˆΠΈΠ²Π°ΠΉΡ‚Π΅!
[email protected]

Π’ΠΠ”Π˜Πœ, Π’Π« ΠžΠ§Π•ΠΠ¬ Π‘Π˜Π›Π¬ΠΠž ΠœΠΠ• ΠŸΠžΠœΠžΠ“, Π― Π₯ОЧУ ΠžΠ’Π‘Π›ΠΠ“ΠžΠ”ΠΠ Π˜Π’Π¬ Π’Π•Π‘Π―

htmlboss.ru

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

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