Как Π² html ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ списки: ΠœΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΉ список Π² html: ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΈ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ?

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

ПолноС руководство ΠΏΠΎ спискам Π² HTML ΠΈ CSS

ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΡΡ‚Π°Ρ‚ΡŒΠΈ Β«A complete guide about lists in HTML and CSSΒ».

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ списки

Бписок это способ прСдставлСния Π½Π°Π±ΠΎΡ€Π° Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΠ»ΠΈ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ этот Π½Π°Π±ΠΎΡ€ Π΄Π°Π½Π½Ρ‹Ρ… становится Π±ΠΎΠ»Π΅Π΅ понятным, Ρ‡Π΅ΠΌ ΠΏΡ€ΠΈ любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠ΅ излоТСния. НапримСр, список ΠΏΠΎΠΊΡƒΠΏΠΎΠΊ выглядит ΠΊΡƒΠ΄Π° понятнСС, Ссли ΠΈΠΌΠ΅Π΅Ρ‚ Π²ΠΈΠ΄ ΠΈΠΌΠ΅Π½Π½ΠΎ списка, Π° Π½Π΅ простого Π°Π±Π·Π°Ρ†Π°, Π³Π΄Π΅ наимСнования ΠΈΠ΄ΡƒΡ‚ просто Ρ‡Π΅Ρ€Π΅Π· Π·Π°ΠΏΡΡ‚ΡƒΡŽ.

Бписки в HTML

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Π½Π° своих Π²Π΅Π±-страницах ΠΊΠ°ΠΊΠΈΠ΅-Ρ‚ΠΎ Π΄Π°Π½Π½Ρ‹Π΅, ΡΠ²Π»ΡΡŽΡ‰ΠΈΠ΅ΡΡ Π½Π°Π±ΠΎΡ€Π°ΠΌΠΈ Ρ‡Π΅Π³ΠΎ-Π»ΠΈΠ±ΠΎ, список являСтся прСкрасным Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ оформлСния. Благодаря спискам ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π»Π΅Π³Ρ‡Π΅ Π²ΠΎΡΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°ΡŽΡ‚ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ.

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

Π’ HTML списки Π±Ρ‹Π²Π°ΡŽΡ‚ Ρ‚Ρ€Π΅Ρ… Π²ΠΈΠ΄ΠΎΠ²:

  1. УпорядочСнныС списки.
  2. НСупорядочСнныС списки.
  3. Бписки ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ упорядочСнный список?

УпорядочСнный список это Π½Π°Π±ΠΎΡ€ элСмСнтов, прСдставлСнных Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ порядкС.

Π€ΠΎΡ€ΠΌΠ° упорядочСнного списка Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для прСдставлСния Π½Π°Π±ΠΎΡ€ΠΎΠ² Π΄Π°Π½Π½Ρ‹Ρ…, Π³Π΄Π΅ порядок элСмСнтов ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΡΠ»ΡƒΠΆΠΈΡ‚ΡŒ ΠΊΡƒΠ»ΠΈΠ½Π°Ρ€Π½Ρ‹Π΅ Ρ€Π΅Ρ†Π΅ΠΏΡ‚Ρ‹, Π³Π΄Π΅ дСйствия слСдуСт Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ порядкС, ΠΈΠ»ΠΈ списки инструкций простой ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹.

ΠŸΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ списки Π΄Π΅Π»Π°ΡŽΡ‚ упорядочСнными, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π±Π΅Π· Π½ΡƒΠΆΠ½ΠΎΠΉ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ излоТСния эта информация тСряСт свой смысл. УпорядочСнныС списки Ρ‚Π°ΠΊΠΆΠ΅ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌΠΈ.

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

HTML-ΠΊΠΎΠ΄:

[html]<ol>
<li>НалСйтС Π²ΠΎΠ΄Ρƒ Π² ΠΊΠ°ΡΡ‚Ρ€ΡŽΠ»ΡŽ.</li>
<li>Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ сахар, Ρ‡Π°ΠΉΠ½Ρ‹Π΅ Π»ΠΈΡΡ‚ΡŒΡ ΠΈ спСции.</li>
<li>Π”ΠΎΠ²Π΅Π΄ΠΈΡ‚Π΅ Π΄ΠΎ кипСния ΠΈ ΠΏΠΎΠ΄Π΅Ρ€ΠΆΠΈΡ‚Π΅ Π½Π° ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠΌ ΠΎΠ³Π½Π΅ ΠΎΠΊΠΎΠ»ΠΎ ΠΌΠΈΠ½ΡƒΡ‚Ρ‹.</li>

<li>Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΌΠΎΠ»ΠΎΠΊΠΎ. </li>
<li>Π”ΠΎΠ²Π΅Π΄ΠΈΡ‚Π΅ Π΄ΠΎ кипСния ΠΈ ΠΏΠΎΠ΄Π΅Ρ€ΠΆΠΈΡ‚Π΅ Π½Π° ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠΌ ΠΎΠ³Π½Π΅ 3-5 ΠΌΠΈΠ½ΡƒΡ‚.</li>
<li>ΠŸΡ€ΠΎΡ†Π΅Π΄ΠΈΡ‚Π΅ Ρ‡Π°ΠΉ ΠΈ ΠΏΠ΅Ρ€Π΅Π»Π΅ΠΉΡ‚Π΅ Π΅Π³ΠΎ Π² Ρ‡Π°ΠΉΠ½ΠΈΠΊ.</li>
</ol>
[/html]

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

  1. НалСйтС Π²ΠΎΠ΄Ρƒ Π² ΠΊΠ°ΡΡ‚Ρ€ΡŽΠ»ΡŽ.
  2. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ сахар, Ρ‡Π°ΠΉΠ½Ρ‹Π΅ Π»ΠΈΡΡ‚ΡŒΡ ΠΈ спСции.
  3. Π”ΠΎΠ²Π΅Π΄ΠΈΡ‚Π΅ Π΄ΠΎ кипСния ΠΈ ΠΏΠΎΠ΄Π΅Ρ€ΠΆΠΈΡ‚Π΅ Π½Π° ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠΌ ΠΎΠ³Π½Π΅ ΠΎΠΊΠΎΠ»ΠΎ ΠΌΠΈΠ½ΡƒΡ‚Ρ‹.
  4. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΌΠΎΠ»ΠΎΠΊΠΎ.
  5. Π”ΠΎΠ²Π΅Π΄ΠΈΡ‚Π΅ Π΄ΠΎ кипСния ΠΈ ΠΏΠΎΠ΄Π΅Ρ€ΠΆΠΈΡ‚Π΅ Π½Π° ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠΌ ΠΎΠ³Π½Π΅ 3-5 ΠΌΠΈΠ½ΡƒΡ‚.
  6. ΠŸΡ€ΠΎΡ†Π΅Π΄ΠΈΡ‚Π΅ Ρ‡Π°ΠΉ ΠΈ ΠΏΠ΅Ρ€Π΅Π»Π΅ΠΉΡ‚Π΅ Π΅Π³ΠΎ Π² Ρ‡Π°ΠΉΠ½ΠΈΠΊ.
ЗначСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ:

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ списка ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°ΡŽΡ‚ΡΡ арабскими Ρ†ΠΈΡ„Ρ€Π°ΠΌΠΈ.

Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ€Π°Π·Π½Ρ‹Π΅ значСния CSS-свойства list-style-type.

list-style-type: upper-alpha

See the Pen ordered-list-upper-alpha by Amrish Kushwaha (@isamrish) on CodePen.

list-style-type: upper-roman

See the Pen ordered-list-upper-roman by Amrish Kushwaha (@isamrish) on CodePen.

list-style-type: lower-alpha

See the Pen ordered-list-lower-alpha by Amrish Kushwaha (@isamrish) on CodePen.

list-style-type: lower-roman

See the Pen ordered-list-lower-roman by Amrish Kushwaha (@isamrish) on CodePen.

Π­Ρ‚ΠΎ самыС часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ значСния свойства list-style-type. Но Π΅ΡΡ‚ΡŒ мноТСство Π΄Ρ€ΡƒΠ³ΠΈΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ рассмотрим дальшС.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ нСупорядочСнный список?

НСупорядочСнный список это список с элСмСнтами, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ прСдставлСны Π² ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎΠΌ порядкС. Π’Π°ΠΊΠΈΠ΅ списки Ρ‚Π°ΠΊΠΆΠ΅ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌΠΈ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Ρ‚Π°ΠΊΠΈΡ… списков – списки ΠΏΠΎΠΊΡƒΠΏΠΎΠΊ, списки Π·Π°ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… Π΄Π΅Π».

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

HTML-ΠΊΠΎΠ΄:

[html]<ul>
<li>ΠΎΠ΄Π΅ΠΆΠ΄Π°</li>

<li>ΠΊΠ½ΠΈΠ³ΠΈ</li>
<li>Ρ€ΡƒΡ‡ΠΊΠΈ</li>
<li>Π½ΠΎΡƒΡ‚Π±ΡƒΠΊ</li>
<li>сумка</li>
</ul>
[/html]

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

  • ΠΎΠ΄Π΅ΠΆΠ΄Π°
  • ΠΊΠ½ΠΈΠ³ΠΈ
  • Ρ€ΡƒΡ‡ΠΊΠΈ
  • Π½ΠΎΡƒΡ‚Π±ΡƒΠΊ
  • сумка
ЗначСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ:

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ элСмСнтов прСдставлСны Π² Π²ΠΈΠ΄Π΅ ΠΊΡ€ΡƒΠΆΠΎΡ‡ΠΊΠΎΠ². Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ всС Ρ‚ΠΎ ΠΆΠ΅ CSS-свойство list-style-type.

list-style-type: circle

See the Pen unordered-list-circle by Amrish Kushwaha (@isamrish) on CodePen.

list-style-type: square

See the Pen unordered-list-square by Amrish Kushwaha (@isamrish) on CodePen.

list-style-type: disc

See the Pen unordered-list-disc by Amrish Kushwaha (@isamrish) on CodePen.

Π”Π°Π»ΡŒΡˆΠ΅ ΠΌΡ‹ Ρ€Π°Π·Π±Π΅Ρ€Π΅ΠΌ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ стилСй.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ список ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ?

Бписок ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ отличаСтся Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π΅Π³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚ состоит ΠΈΠ· Π΄Π²ΡƒΡ… элСмСнтов. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ… – Ρ‚Π΅Ρ€ΠΌΠΈΠ½, Π° Π²Ρ‚ΠΎΡ€ΠΎΠΉ – Π΅Π³ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ список ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Ρ‚Π΅Π³Π° <dl> (definition list – «список ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉΒ»). Π’ ΠΏΡƒΠ½ΠΊΡ‚Π°Ρ… списка Ρ‚Π΅Ρ€ΠΌΠΈΠ½Ρ‹ (term) ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Ρ‚Π΅Π³Π° <dt>, Π° описаниС (

description) – ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Ρ‚Π΅Π³Π° <dd>.

НапримСр:

See the Pen definition-list by Amrish Kushwaha (@isamrish) on CodePen.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ списки?

Иногда Π±Ρ‹Π²Π°ΡŽΡ‚ ситуации, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π² Π²ΠΈΠ΄Π΅ списка, ΠΏΡ€ΠΈΡ‡Π΅ΠΌ Π΅Π³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ сами ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ списками. Вакая структура называСтся Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌ списком.

НапримСр:

See the Pen nested-list by Amrish Kushwaha (@isamrish) on CodePen.

Π‘Ρ‚ΠΈΠ»ΡŒ списка

Для придания стилСй списку ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ‚Ρ€ΠΈ CSS-свойства.

list-style-type

Как Π²Ρ‹ ΡƒΠΆΠ΅ Π·Π½Π°Π΅Ρ‚Π΅, это свойство ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для стилизации ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ² списка (ΠΊΠ°ΠΊ упорядочСнного, Ρ‚Π°ΠΊ ΠΈ нСупорядочСнного).

Π­Ρ‚ΠΎ свойство ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ нСсколько Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ:

  • disc (ΠΊΡ€ΡƒΠ³)
  • square (ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚)
  • circle (ΠΎΠΊΡ€ΡƒΠΆΠ½ΠΎΡΡ‚ΡŒ)
  • decimal (арабскиС Ρ†ΠΈΡ„Ρ€Ρ‹)
  • lower-alpha (строчныС латинскиС Π±ΡƒΠΊΠ²Ρ‹, =lower-latin)
  • lower-roman (римскиС Ρ†ΠΈΡ„Ρ€Ρ‹ Π² Π½ΠΈΠΆΠ½Π΅ΠΌ рСгистрС)
  • lower-latin (строчныС латинскиС Π±ΡƒΠΊΠ²Ρ‹, =lower-alpha)
  • lower-greek (строчныС грСчСскиС Π±ΡƒΠΊΠ²Ρ‹)
  • upper-alpha (Π·Π°Π³Π»Π°Π²Π½Ρ‹Π΅ латинскиС Π±ΡƒΠΊΠ²Ρ‹, =upper-latin)
  • upper-roman (римскиС Ρ†ΠΈΡ„Ρ€Ρ‹ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ рСгистрС)
  • upper-latin (Π·Π°Π³Π»Π°Π²Π½Ρ‹Π΅ латинскиС Π±ΡƒΠΊΠ²Ρ‹, =upper-alpha)

Π‘ ΠΏΠΎΠ»Π½Ρ‹ΠΌ списком Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ свойства list-style-type ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ здСсь.

list-style-image

Π­Ρ‚ΠΎ свойство ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π² качСствС ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° списка ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Бвойство ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ Π΄Π²Π° значСния:

url изобраТСния ΠΈΠ»ΠΈ none.

НапримСр:

See the Pen list-style-image by Amrish Kushwaha (@isamrish) on CodePen.

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ этого сво

HTML ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹


HTML Атрибуты Ρ„ΠΎΡ€ΠΌ HTML Π—Π°Π΄Π°Ρ‡ΠΈ

HTML ΠžΡΠ½ΠΎΠ²Ρ‹

HTML Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚
HTML Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ
HTML Π°Π±Π·Π°Ρ†Ρ‹
HTML ссылки
HTML изобраТСния

К Ρ‚Π΅ΠΎΡ€ΠΈΠΈ HTML ΠžΡΠ½ΠΎΠ²Ρ‹


HTML Атрибуты

Атрибут title
Атрибут alt
Атрибут href
Атрибут Π±Π΅Π· ΠΊΠ°Π²Ρ‹Ρ‡Π΅ΠΊ

К Ρ‚Π΅ΠΎΡ€ΠΈΠΈ HTML Атрибуты


HTML Π€ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ тСкста

Π–ΠΈΡ€Π½Ρ‹ΠΉ (<b>) ΠΈ Π²Π°ΠΆΠ½Ρ‹ΠΉ (<strong>) тСкст
АкцСнт (<em>) ΠΈ курсив (<i>)
Π‘ΠΎΠ»ΡŒΡˆΠΎΠΉ (<big>) ΠΈ малСнький (<small>) ΡˆΡ€ΠΈΡ„Ρ‚
ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄ строк (<hr>) ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ линия (<br>)

ΠŸΠΎΠ΄ΡΠ²Π΅Ρ‚ΠΊΠ° тСкста (<mark>)
Π’Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ тСкста, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ‹Π» ΡƒΠ΄Π°Π»Π΅Π½ (<del>)
Π’Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ тСкста, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ‹Π» Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ (<ins>)
ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ тСкста Π² Π½ΠΈΠΆΠ½Π΅ΠΌ индСксС (<sub>)
ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ тСкста Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ индСксС (<sup>)

К Ρ‚Π΅ΠΎΡ€ΠΈΠΈ HTML Π€ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅


HTML Π¦ΠΈΡ‚Π°Ρ‚Ρ‹

Π”Π»ΠΈΠ½Π½Ρ‹Π΅ (<q>) ΠΈ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠ΅ (<blockquote>) Ρ†ΠΈΡ‚Π°Ρ‚Ρ‹
АббрСвиатура (<abbr>)
ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½Π°Ρ информация (<address>)
Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊΠΈ (<cite>) ΠΈ опрСдСлСния (<dfn>)
НаправлСниС ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΠΎΠ³ΠΎ тСкста (<bdo>)

К Ρ‚Π΅ΠΎΡ€ΠΈΠΈ HTML Π¦ΠΈΡ‚Π°Ρ‚Ρ‹


HTML ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹ΠΉ ΠΊΠΎΠ΄

Π’Π²ΠΎΠ΄ тСкста с сохранСниСм всСх ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ², табуляций ΠΈ пСрСносов строк
Π’Π²ΠΎΠ΄ с ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ (<kbd>) ΠΈ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π½Ρ‹ΠΉ Π²Ρ‹Π²ΠΎΠ΄(<samp>)
Π’Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ… (<var>) Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠΌ ΠΊΠΎΠ΄Π΅

К Ρ‚Π΅ΠΎΡ€ΠΈΠΈ HTML ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹ΠΉ ΠΊΠΎΠ΄


HTML ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ

ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ Π² ΠΊΠΎΠ΄Π΅

К Ρ‚Π΅ΠΎΡ€ΠΈΠΈ HTML ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ


HTML Π‘Ρ‚ΠΈΠ»ΠΈ

ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ стилСй ΠΊ элСмСнту
Π’Π½Π΅ΡˆΠ½ΡΡ Ρ‚Π°Π±Π»ΠΈΡ†Π° стилСй
ВнутрСнняя Ρ‚Π°Π±Π»ΠΈΡ†Π° стилСй
ΠŸΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚Π½ΠΎΡΡ‚ΡŒ стилСй

К Ρ‚Π΅ΠΎΡ€ΠΈΠΈ HTML Π‘Ρ‚ΠΈΠ»ΠΈ


HTML Бсылки

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠΉ ссылки
Бсылка Π½Π° адрСс элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹
ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ ссылок Π² Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅
ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ ссылок Π² ΠΎΠΊΠ½Π΅ с Π½ΡƒΠΆΠ½Ρ‹ΠΌ ΠΈΠΌΠ΅Π½Π΅ΠΌ
Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка для ссылки
Бсылка Π½Π° Π·Π°ΠΊΠ»Π°Π΄ΠΊΡƒ ΠΈΠ· Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π²Π΅Π±-страницы
Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ-ссылки

К Ρ‚Π΅ΠΎΡ€ΠΈΠΈ HTML Бсылки


HTML Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ

Как ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΡƒΡ‚ΡŒ ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ?
ΠΠ»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ тСкст ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ
Атрибуты Β«widthΒ» ΠΈ Β«heightΒ»
Π—Π°Π΄Π°Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° style
Π—Π°Π΄Π°Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ max-width
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

К Ρ‚Π΅ΠΎΡ€ΠΈΠΈ HTML Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ


HTML Π¦Π²Π΅Ρ‚Π°

Π—Π°Π΄Π°Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° ΠΏΠΎ Π΅Π³ΠΎ названию
Π—Π°Π΄Π°Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ RGB
Π¦Π²Π΅Ρ‚ HEX

К Ρ‚Π΅ΠΎΡ€ΠΈΠΈ HTML Π¦Π²Π΅Ρ‚Π°


HTML Π’Π°Π±Π»ΠΈΡ†Ρ‹

ΠŸΡ€ΠΎΡΡ‚Π°Ρ HTML-Ρ‚Π°Π±Π»ΠΈΡ†Π°
ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ свойства border
ΠžΠ΄ΠΈΠ½Π°Ρ€Π½Π°Ρ Ρ€Π°ΠΌΠΊΠ° для Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹
Поля ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Ρ‹ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹
Π¨ΠΈΡ€ΠΈΠ½Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹
ОбъСдинСниС столбцов
ОбъСдинСниС строк
Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹
Π’Π΅Π³ΠΈ группирования элСмСнтов Ρ‚Π°Π±Π»ΠΈΡ†

К Ρ‚Π΅ΠΎΡ€ΠΈΠΈ HTML Π’Π°Π±Π»ΠΈΡ†Ρ‹


HTML Бписки

НумСрованный список
ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² type ΠΈ start
ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° value
Π€ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… списков с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS
ΠœΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список
Π’Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ списки
Π€ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… списков
ГрафичСскиС ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹
Бписки ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ (описаний)

К Ρ‚Π΅ΠΎΡ€ΠΈΠΈ HTML Бписки


Π‘Π»ΠΎΡ‡Π½Ρ‹Π΅ ΠΈ встроСнныС элСмСнты

Π‘Π»ΠΎΡ‡Π½Ρ‹Π΅ ΠΈ встроСнныС элСмСнты
ΠžΠ±Ρ‰ΠΈΠ΅ элСмСнты <div> ΠΈ <span>

К Ρ‚Π΅ΠΎΡ€ΠΈΠΈ HTML Π‘Π»ΠΎΡ‡Π½Ρ‹Π΅ ΠΈ встроСнныС элСмСнты


Π˜Π΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ ΠΈ классы

ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°
ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² id ΠΈ class

К Ρ‚Π΅ΠΎΡ€ΠΈΠΈ HTML Π˜Π΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ ΠΈ классы


HTML Π€Ρ€Π΅ΠΉΠΌΡ‹

Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π° HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° с Ρ„Ρ€Π΅ΠΉΠΌΠ°ΠΌΠΈ
Π£Π±ΠΈΡ€Π°Π΅ΠΌ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ„Ρ€Π΅ΠΉΠΌΠ°ΠΌΠΈ
Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π³Ρ€Π°Π½ΠΈΡ†Π΅ΠΉ Ρ„Ρ€Π΅ΠΉΠΌΠΎΠ²
Бсылки Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ„Ρ€Π΅ΠΉΠΌΠΎΠ²
ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΉ Ρ„Ρ€Π΅ΠΉΠΌ
Π£Π΄Π°Π»Π΅Π½ΠΈΠ΅ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅Π³ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ°
ИзмСнСниС Ρ€Π°Π·ΠΌΠ΅Ρ€, стиля ΠΈ Ρ†Π²Π΅Ρ‚Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ встроСнного Ρ„Ρ€Π΅ΠΉΠΌΠ°
ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ ссылки Π² ΠΎΠΊΠ½Π΅ встроСнного Ρ„Ρ€Π΅ΠΉΠΌΠ°

К Ρ‚Π΅ΠΎΡ€ΠΈΠΈ HTML Π€Ρ€Π΅ΠΉΠΌΡ‹


ΠœΠ°ΠΊΠ΅Ρ‚Ρ‹ Π²Π΅Π±-страниц

ΠœΠ°ΠΊΠ΅Ρ‚ на основС таблицы
ΠœΠ°ΠΊΠ΅Ρ‚ Π½Π° основС DIV-элСмСнтов
ΠœΠ°ΠΊΠ΅Ρ‚ Π½Π° основС элСмСнтов HTML5

К Ρ‚Π΅ΠΎΡ€ΠΈΠΈ HTML ΠœΠ°ΠΊΠ΅Ρ‚Ρ‹


HTML Π Π°Π·Π΄Π΅Π» Head

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ <title> создаСт Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°
Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ <link> слуТит для ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ внСшнСго Ρ„Π°ΠΉΠ»Π° CSS
Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ <style> содСрТит ΠΏΡ€Π°Π²ΠΈΠ»Π° CSS
Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ <script> присоСдиняСт ΠΊ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρƒ сцСнарии
Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ <base> слуТит для указания ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ URL-адрСса Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°

К Ρ‚Π΅ΠΎΡ€ΠΈΠΈ HTML Π Π°Π·Π΄Π΅Π» Head


HTML JavaScript

ВстроСнный скрипт
Запуск скрипта
ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ внСшнСго скрипта
ИспользованиС Ρ‚Π΅Π³Π° <noscript>
JavaScript ΠΌΠΎΠΆΠ΅Ρ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒ HTML ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚
JavaScript ΠΌΠΎΠΆΠ΅Ρ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ HTML Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°
JavaScript ΠΌΠΎΠΆΠ΅Ρ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒ стили
JavaScript ΠΌΠΎΠΆΠ΅Ρ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹

К Ρ‚Π΅ΠΎΡ€ΠΈΠΈ HTML скрипт


HTML Π‘ΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ символы

ИспользованиС ΠΊΠ°Π²Ρ‹Ρ‡Π΅ΠΊ
ДСфис ΠΈ Ρ‚ΠΈΡ€Π΅
БпСцситмвол €

К Ρ‚Π΅ΠΎΡ€ΠΈΠΈ HTML Π‘ΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ символы


HTML Π€ΠΎΡ€ΠΌΡ‹

ΠŸΡ€ΠΎΡΡ‚Π°Ρ HTML-Ρ„ΠΎΡ€ΠΌΠ°
ПолС Π²Π²ΠΎΠ΄Π° пароля
ИспользованиС Ρ€Π°Π΄ΠΈΠΎ-ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»Π΅ΠΉ
Π€Π»Π°ΠΆΠΊΠΈ (checkbox)
Кнопки подтвСрТдСния (submit) ΠΈ очистки (reset)
Π“Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠ° элСмСнтов Ρ„ΠΎΡ€ΠΌΡ‹

К Ρ‚Π΅ΠΎΡ€ΠΈΠΈ HTML Π€ΠΎΡ€ΠΌΡ‹


HTML Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ Ρ„ΠΎΡ€ΠΌΡ‹

ВСкстовая ΠΎΠ±Π»Π°ΡΡ‚ΡŒ <textarea>
Π Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉΡΡ список (select)
ΠŸΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΡ‹ΠΉ список
Π“Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠ° ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² списка (optgroup)
ИспользованиС кнопки <button>
ИспользованиС элСмСнта <datalist>
ΠœΠ΅Ρ‚ΠΊΠΈ элСмСнтов Ρ„ΠΎΡ€ΠΌΡ‹ (label)

К Ρ‚Π΅ΠΎΡ€ΠΈΠΈ HTML Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ Ρ„ΠΎΡ€ΠΌΡ‹


ЗначСния Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type элСмСнта <input>

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type: text
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type: password
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type: radio
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type: checkbox
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type: submit
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type: button
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type: date
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type: week
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type: month
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type: time
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type: datetime
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type: datetime-local
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type: number
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type: range
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type: color
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type: email
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type: url
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type: search
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type: tel

К Ρ‚Π΅ΠΎΡ€ΠΈΠΈ HTML AΡ‚Ρ€ΠΈΠ±ΡƒΡ‚ type элСмСнта <input>


HTML Атрибуты элСмСнта <input>

Атрибут value
Атрибут disabled
Атрибут readonly
Атрибут size
Атрибут maxlength
Атрибут placeholder
Атрибут autofocus
Атрибуты min ΠΈ mΠ°Ρ…
Атрибут step
Атрибут autocomplete
Атрибут required
Атрибут novalidate
Атрибут pattern
Атрибут formnovalidate
Атрибут form
Атрибут formaction
Атрибут formenctype
Атрибут formmethod
Атрибут formtarget
Атрибут multiple
Атрибут multiple

К Ρ‚Π΅ΠΎΡ€ΠΈΠΈ HTML Атрибуты элСмСнта <input>





HTML Атрибуты Ρ„ΠΎΡ€ΠΌ HTML Π—Π°Π΄Π°Ρ‡ΠΈ

HTML списки ΠΈ Π²ΠΈΠ΄Ρ‹ списков Π² HTML: ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML список, Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML список, ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹Π΅ списки Π² HTML

ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŒ сайта ZametkiNaPolyah. ru! Π­Ρ‚ΠΎΠΉ записью ΠΌΡ‹ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅ΠΌ Ρ€ΡƒΠ±Ρ€ΠΈΠΊΡƒ: ВСрстка сайтов, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π΅ΡΡ‚ΡŒ Ρ€Π°Π·Π΄Π΅Π» HTML. Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ Π½Π° сайтС Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ прСдставлСна Π² ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΌ ΠΈ Ρ‡ΠΈΡ‚Π°Π±Π΅Π»ΡŒΠ½ΠΎΠΌ Π²ΠΈΠ΄Π΅, для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ информация Π±Ρ‹Π»Π° доступной Π΅Π΅ Π½ΡƒΠΆΠ½ΠΎ ΡΠΈΡΡ‚Π΅ΠΌΠ°Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Для систСматизации Π² HTML Π΅ΡΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ (ΠΏΡ€ΠΎ HTML Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ нСсколько ΠΏΠΎΠ·ΠΆΠ΅) ΠΈ Π΅ΡΡ‚ΡŒ списки. Π’ этой записи ΠΌΡ‹ ΠΊΠ°ΠΊ Ρ€Π°Π·-Ρ‚Π°ΠΊΠΈ ΠΈ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΏΡ€ΠΎ списки Π² HTML.

HTML списки ΠΈ Π²ΠΈΠ΄Ρ‹ списков Π² HTML: ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML список, Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML список, ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹Π΅ списки Π² HTML

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

Для Ρ‡Π΅Π³ΠΎ Π½ΡƒΠΆΠ½Ρ‹ списки Π² HTML

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

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

Бписки Π΄Π΅Π»Π°ΡŽΡ‚ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π±ΠΎΠ»Π΅Π΅ наглядной ΠΈ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΉ для восприятия. НапримСр, Π²Ρ‹ составляСтС список ΠΏΠΎΠΊΡƒΠΏΠΎΠΊ, Π±Π΅Ρ€Π΅Ρ‚Π΅ лист Π±ΡƒΠΌΠ°Π³ΠΈ ΠΈ ΠΏΠΈΡˆΠΈΡ‚Π΅:

  1. Молоко.
  2. Π₯Π»Π΅Π±.
  3. Колбаса.
  4. Π―ΠΉΡ†ΠΎ.

Но, скорСС всСго, Π²Ρ‹ Π½Π΅ станСтС ΠΏΠΈΡΠ°Ρ‚ΡŒ: ΠΌΠΎΠ»ΠΎΠΊΠΎ, Ρ…Π»Π΅Π±, колбаса, яйцо, ΠΏΠΎ Ρ‚ΠΎΠΉ простой ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅, Ρ‡Ρ‚ΠΎ это Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅Ρ‡ΠΈΡ‚Π°Π±Π΅Π»ΡŒΠ½ΠΎ ΠΈ Π² ΠΌΠ°Π³Π°Π·ΠΈΠ½Π΅ Π²Π°ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΠΎ Π²Ρ‹Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Ρ‚ΡŒ ΠΊΡƒΠΏΠ»Π΅Π½Π½ΠΎΠ΅ ΠΈΠ»ΠΈ просто ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ список ΠΏΠΎΠΊΡƒΠΏΠΎΠΊ.

Π’Π°ΠΊ ΠΆΠ΅ ΠΈ Π² HTML: списки ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΉ ΠΊ Π²ΠΎΡΠΏΡ€ΠΈΡΡ‚ΠΈΡŽ ΠΈ Π±ΠΎΠ»Π΅Π΅ Ρ‡ΠΈΡ‚Π°Π±Π΅Π»ΡŒΠ½ΠΎΠΉ, это ΠΏΠ΅Ρ€Π²ΠΎΠ΅ ΠΈ Π³Π»Π°Π²Π½ΠΎΠ΅ Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ списков Π² HTML. Π’Ρ‚ΠΎΡ€ΠΎΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ спискам нашли Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ списки ΠΈ оформляя ΠΈΡ… ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ CSS, ΡΠΎΠ·Π΄Π°ΡŽΡ‚ самыС Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·Π½Ρ‹Π΅ ΠΈ интСрСсныС мСню Π½Π° сайтС.

ΠžΡ‚ΠΌΠ΅Ρ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎ для Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ акцСнтирования Π½Π° элСмСнтах списка ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ HTML тэги нСпосрСдствСнного форматирования тСкста ΠΈ тэги логичСского форматирования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π²Π°ΠΆΠ½ΠΎΡΡ‚ΡŒ слов Π² HTML Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅.

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

Бписки Π² HTML дСлятся Π½Π° нСсколько Π²ΠΈΠ΄ΠΎΠ²: ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ HTML списки, упорядочСнныС ΠΈΠ»ΠΈ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ HTML списки, списки ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ ΠΈ списки Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π° Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π·Π°ΠΏΡ€Π΅Ρ‰Π΅Π½Π½Ρ‹ΠΌΠΈ Π² стандартС HTML 4.01. Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚ HTML 5 ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π΅Ρ‰Π΅ список мСню, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅, ΠΊΠΎΠ³Π΄Π° добСрСмся Π΄ΠΎ HTML 5, ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎ HTML 4. 01 считаСт тэг <menu> Π·Π°ΠΏΡ€Π΅Ρ‰Π΅Π½Π½Ρ‹ΠΌ.

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

Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ элСмСнт списка Π² HTML ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ тэг <li>, ΠΎΠ½ являСтся ΠΏΠ°Ρ€Π½Ρ‹ΠΌ HTML тэгом, Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ тэг ΠΎΠΏΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ (Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ сформируСт Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ тэг </li> автоматичСски ΠΏΠ΅Ρ€Π΅Π΄ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌ HTML элСмСнтом). HTML элСмСнт li являСтся Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌ, Π° это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ всю доступныС ΡˆΠΈΡ€ΠΈΠ½Ρƒ HTML страницы ΠΈΠ»ΠΈ Ρ‚ΠΎΠΉ области, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΎΠ½ располоТСн.

ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ любого списка это всСгда Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ HTML элСмСнт ΠΈ ΠΏΠ°Ρ€Π½Ρ‹ΠΉ HTML тэг с ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ тэгом. Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ ΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΈΠ· ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ².

  1. НумСрованный HTML список формируСтся ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ HTML тэга <ol>. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ Ρ‚Π°ΠΊΠΎΠ³ΠΎ списка Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠ½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½, хотя вмСсто арабских Ρ†ΠΈΡ„Ρ€ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Ρ‹ римскиС Ρ†ΠΈΡ„Ρ€Ρ‹ ΠΈΠ»ΠΈ Π±ΡƒΠΊΠ²Ρ‹ Π°Π»Ρ„Π°Π²ΠΈΡ‚Π°. Π‘ΠΎΠΊΡ€Π°Ρ‰Π΅Π½ΠΈΠ΅ ol Ρ€Π°ΡΡˆΠΈΡ„Ρ€ΠΎΠ²Ρ‹Π²Π°Π΅Ρ‚ΡΡ ΠΊΠ°ΠΊ ordered list.
  2. ΠœΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML список. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт Ρ‚Π°ΠΊΠΎΠ³ΠΎ списка ΠΈΠΌΠ΅Π΅Ρ‚ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ с Π»Π΅Π²ΠΎΠΉ стороны. ΠœΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML список формируСтся ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ тэга <ul>, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°ΡΡˆΠΈΡ„Ρ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ unordered list.
  3. Бписок ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ состоит ΠΈΠ· Ρ‚Ρ€Π΅Ρ… HTML элСмСнтов ΠΈ формируСтся ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Ρ‚Ρ€Π΅Ρ… тэгов. Π—Π° Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ списка ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ Π² HTML ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ тэг <dl>. Вэг ΠΏΠ°Ρ€Π½Ρ‹ΠΉ с ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ тэгом. HTML элСмСнт DL Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ. Π‘ΠΎΠΊΡ€Π°Ρ‰Π΅Π½ΠΈΠ΅ dl Ρ€Π°ΡΡˆΠΈΡ„Ρ€ΠΎΠ²Ρ‹Π²Π°Π΅Ρ‚ΡΡ, ΠΊΠ°ΠΊ definition lists. ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ списка ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ΄ΠΈΠ½ Π΅Π³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚ состоит ΠΈΠ· Π΄Π²ΡƒΡ… HTML элСмСнтов: ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт – это Ρ‚Π΅Ρ€ΠΌΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ обозначаСтся тэгом <dt>, ΠΎΠ½ являСтся ΠΏΠ°Ρ€Π½Ρ‹ΠΌ тэгом с ΠΎΠΏΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ. HTML элСмСнт DT Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ. Π’Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт – ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ обозначаСтся тэгом <dd>, это ΠΏΠ°Ρ€Π½Ρ‹ΠΉ тэг с ΠΎΠΏΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ тэгом, Π° HTML элСмСнт DT Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ.
  4. Бписок Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΠΉ Π² HTML считаСтся Π·Π°ΠΏΡ€Π΅Ρ‰Π΅Π½Π½Ρ‹ΠΌ ΠΈ Π½Π΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π½ ΠΊ использованию. Бписок Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΠΉ формируСтся ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ тэга <dir>, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ являСтся ΠΏΠ°Ρ€Π½Ρ‹ΠΌ HTML тэгом, Π° элСмСнт HTML страницы DIR Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ.
  5. Бписок мСню Π² HTML. ЀормируСтся ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ тэга <menu>, тэг <menu> являСтся ΠΏΠ°Ρ€Π½Ρ‹ΠΌ тэгом, Π° элСмСнт MENU Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ. Π’ стандартС HTML01 тэг <menu> считаСтся Π·Π°ΠΏΡ€Π΅Ρ‰Π΅Π½Π½Ρ‹ΠΌ, Π½ΠΎ стандарт HTML 5 Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ тэг <menu> для создания мСню Π½Π° сайтС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ поисковыС систСмы ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°Π»ΠΈ, Ρ‡Ρ‚ΠΎ это Π½Π΅ просто список со ссылками, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ мСню сайта.

ΠžΡ‚ΠΌΠ΅Ρ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎ стандарт HTML Π·Π°ΠΏΡ€Π΅Ρ‰Π°Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ², ΡΠΎΠ·Π΄Π°ΡŽΡ‰ΠΈΡ… списки всС тэги, ΠΊΡ€ΠΎΠΌΠ΅ Ρ‚Π΅Ρ…, Ρ‡Ρ‚ΠΎ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ для создания элСмСнтов списка. Но, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° <li> Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Π»ΡŽΠ±Ρ‹Π΅ HTML элСмСнты, Π·Π°ΠΏΠΎΠΌΠ½ΠΈΠΌ эту ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ, ΠΎΠ½Π° Π½Π°ΠΌ пригодится, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΏΡ€ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹Π΅ списки. Π”Π°Π»Π΅Π΅ ΠΌΡ‹ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΏΡ€ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· HTML списков Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ.

ΠœΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML список. HTML Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… списков

НачнСм с ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ HTML списка. Π•Π³ΠΎ ΠΊΠ»ΡŽΡ‡Π΅Π²Π°Ρ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠΌ. ΠœΡ‹ ΡƒΠΆΠ΅ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ, Ρ‡Ρ‚ΠΎ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список Π² HTML создаСтся ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ тэга <ul>, Π²Π½ΡƒΡ‚Ρ€ΠΈ тэга <ul> Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π½ΠΈΠΊΠ°ΠΊΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты, ΠΊΡ€ΠΎΠΌΠ΅ элСмСнтов LI, ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‰ΠΈΡ… Π·Π° Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ элСмСнтов списка.

ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΌΠ΅Π½ΡΡ‚ΡŒ Π²ΠΈΠ΄ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ HTML Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type. ΠœΠ°Ρ€ΠΊΠ΅Ρ€ списка ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ трСмя Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ способами: Π² Π²ΠΈΠ΄Π΅ диска, Π² Π²ΠΈΠ΄Π΅ окруТности ΠΈ Π² Π²ΠΈΠ΄Π΅ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π°. БоотвСтствСнно:

  1. Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ HTML списка Π² Π²ΠΈΠ΄Π΅ диска, Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ: type=”disc”.
  2. Если ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ списка отобраТался Π² Π²ΠΈΠ΄Π΅ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π°, Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅: type=”square”.
  3. Если ΠΆΠ΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ HTML списка Π±Ρ‹Π» Π² Π²ΠΈΠ΄Π΅ окруТности, Ρ‚ΠΎ: type=”circle”.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для любого ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ HTML списка Π² любом Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅: type=”disc”. CSS Ρ‚Π°ΠΊ ΠΆΠ΅ позволяСт ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Π²ΠΈΠ΄ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ свойства list-style-type.

Π”Π°Π²Π°ΠΉΡ‚Π΅ попрактикуСмся Π² создании ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… HTML списков, ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ любой Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ (ΠΌΠΎΠΆΠ½ΠΎ Π΄Π°ΠΆΠ΅ Π‘Π»ΠΎΠΊΠ½ΠΎΡ‚, Π½ΠΎ я Π±Ρ‹ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π» Π²Π°ΠΌ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ бСсплатный Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ с подсвСткой синтаксиса Notepad++)Β  ΠΈ Π½Π°ΠΏΠΈΡˆΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄:

<!DOCTYPE html> <html lang=»ru-RU»> <head> <meta charset=»UTF-8″> <title> ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ HTML списка </title> <link rel=»stylesheet» type=»text/css» href=»style.css» /> </head> <body> <h2>ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ HTML списка</h2> <ul> <li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт списка <li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт списка <li>Π’Ρ€Π΅Ρ‚ΠΈΠΉ элСмСнт списка <li>Π§Π΅Ρ‚Π²Π΅Ρ€Ρ‚Ρ‹ΠΉ элСмСнт списка <li>ΠŸΡΡ‚Ρ‹ΠΉ элСмСнт списка </ul> <h3>Π”Π΅Π»Π°Π΅ΠΌ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ HTML списка Π² Π²ΠΈΠ΄Π΅ окрТности</h3> <ul> <li type=»circle»>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт списка</li> <li type=»circle»>Π’Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт списка</li> <li type=»circle»>Π’Ρ€Π΅Ρ‚ΠΈΠΉ элСмСнт списка</li> <li type=»circle»>Π§Π΅Ρ‚Π²Π΅Ρ€Ρ‚Ρ‹ΠΉ элСмСнт списка</li> <li type=»circle»>ΠŸΡΡ‚Ρ‹ΠΉ элСмСнт списка</li> </ul> <h3>Π”Π΅Π»Π°Π΅ΠΌ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ HTML списка ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹ΠΌ</h3> <ul> <li type=»square»>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт списка</li> <li type=»square»>Π’Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт списка</li> <li type=»square»>Π’Ρ€Π΅Ρ‚ΠΈΠΉ элСмСнт списка</li> <li type=»square»>Π§Π΅Ρ‚Π²Π΅Ρ€Ρ‚Ρ‹ΠΉ элСмСнт списка</li> <li type=»square»>ΠŸΡΡ‚Ρ‹ΠΉ элСмСнт списка</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

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

<!DOCTYPE html>

Β 

<html lang=»ru-RU»>

Β 

<head>

Β 

<meta charset=»UTF-8″>

Β 

<title> ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ HTML списка </title>

Β 

<link rel=»stylesheet» type=»text/css» href=»style. css» />

Β 

</head>

Β 

<body>

Β 

<h2>ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ HTML списка</h2>

Β 

<ul>

Β 

<li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт списка

Β 

<li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт списка

Β 

<li>Π’Ρ€Π΅Ρ‚ΠΈΠΉ элСмСнт списка

Β 

<li>Π§Π΅Ρ‚Π²Π΅Ρ€Ρ‚Ρ‹ΠΉ элСмСнт списка

Β 

<li>ΠŸΡΡ‚Ρ‹ΠΉ элСмСнт списка

Β 

</ul>

Β 

<h3>Π”Π΅Π»Π°Π΅ΠΌ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ HTML списка Π² Π²ΠΈΠ΄Π΅ окрТности</h3>

Β 

<ul>

Β 

<li type=»circle»>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт списка</li>

Β 

<li type=»circle»>Π’Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт списка</li>

Β 

<li type=»circle»>Π’Ρ€Π΅Ρ‚ΠΈΠΉ элСмСнт списка</li>

Β 

<li type=»circle»>Π§Π΅Ρ‚Π²Π΅Ρ€Ρ‚Ρ‹ΠΉ элСмСнт списка</li>

Β 

<li type=»circle»>ΠŸΡΡ‚Ρ‹ΠΉ элСмСнт списка</li>

Β 

</ul>

Β 

<h3>Π”Π΅Π»Π°Π΅ΠΌ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ HTML списка ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹ΠΌ</h3>

Β 

<ul>

Β 

<li type=»square»>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт списка</li>

Β 

<li type=»square»>Π’Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт списка</li>

Β 

<li type=»square»>Π’Ρ€Π΅Ρ‚ΠΈΠΉ элСмСнт списка</li>

Β 

<li type=»square»>Π§Π΅Ρ‚Π²Π΅Ρ€Ρ‚Ρ‹ΠΉ элСмСнт списка</li>

Β 

<li type=»square»>ΠŸΡΡ‚Ρ‹ΠΉ элСмСнт списка</li>

Β 

</ul>

Β 

</body>

Β 

</html>

НС Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°Π±ΡƒΠ»ΡΡ†ΠΈΡŽ ΠΈ символы пСрСноса строк для форматирования HTML ΠΊΠΎΠ΄Π°. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ²ΡˆΠΈΠΉΡΡ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Ρ„Π°ΠΉΠ», ΠΊΠ°ΠΊ index.html ΠΈ ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Π΅Π³ΠΎ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

ИзмСняСм Ρ‚ΠΈΠΏ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° нСупорядочСнного HTML списка

Π’Ρ€ΠΈ HTML Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π°ΠΊΡ†Π΅Π½Ρ‚ΠΈΡ€ΡƒΡŽΡ‚ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ… ΠΈ Ρ‚Ρ€ΠΈ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… HTML списка. Π’ΠΎ всСх Ρ‚Ρ€Π΅Ρ… случаях Ρƒ нас ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ Ρƒ списка Ρ€Π°Π·Π½Ρ‹Π΅, этого ΠΌΡ‹ добились Π·Π° счСт Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ мСня Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° type.

Π‘Ρ‚ΠΎΠΈΡ‚ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ HTML спискам доступны всС HTML события ΠΈ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹. ΠŸΡ€ΠΎ использованиС ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… списков Π² HTML Π½Π°ΠΌ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ большС Π½Π΅Ρ‡Π΅Π³ΠΎ, ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ Π΄Ρ€ΡƒΠ³ΠΈΠΌ Π²ΠΈΠ΄Π°ΠΌ списков языка Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ гипСртСкста.

НумСрованный HTML список. HTML Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… списков

НумСрованныС HTML списки ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ своС Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ‚Π°ΠΊΠΎΠ³ΠΎ списка Π½Π° страницС, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΎΡ‚ΠΌΠ΅Ρ‡Π°Π΅Ρ‚ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт списка Ρ†ΠΈΡ„Ρ€ΠΎΠΉ. Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ, Ρ‡Ρ‚ΠΎ список ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ, Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ тэг <ol>. Π’ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅ <ol> Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ находится Π½ΠΈΠΊΠ°ΠΊΠΈΠ΅ тэги, ΠΊΡ€ΠΎΠΌΠ΅ тэга <li>.

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

  1. Атрибут type. Атрибут type измСняСт Ρ‚ΠΈΠΏ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ упорядочСнного списка. Нам доступны Ρ‚Ρ€ΠΈ значСния для Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°: type=”A” Π΄Π΅Π»Π°Π΅Ρ‚ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΡŽ HTML списка Π² Π²ΠΈΠ΄Π΅ Π·Π°Π³Π»Π°Π²Π½Ρ‹Ρ… латинских Π±ΡƒΠΊΠ²; type=”a” Π² этом случаС нумСрация списка Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ строчных латинских Π±ΡƒΠΊΠ²; type=”I” позволяСт ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΡŽ Π½Π° Π·Π°Π³Π»Π°Π²Π½Ρ‹Π΅ римскиС Ρ†ΠΈΡ„Ρ€Ρ‹; type=”i” Π² этом случаС нуммСрация Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½Π° строчными римскими Ρ†ΠΈΡ„Ρ€Π°ΠΌΠΈ ΠΈ type=”1” – это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для всСх Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… HTML списков Π² любом Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. Π’ CSS ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Π²ΠΈΠ΄ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ свойства list-style-type.
  2. Атрибут reversed. Π”Π°Π½Π½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ мСняСт порядок Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ упорядочСнного HTML списка. Атрибут Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ. Аналогов Π² CSS Ρƒ Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° Π½Π΅Ρ‚.
  3. Атрибут start. Π”Π°Π½Π½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π°Π½Π°Π»ΠΎΠ³ΠΎΠ² Π² CSS ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ стартового Π½ΠΎΠΌΠ΅Ρ€Π° Π² Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠΌ HTML спискС. Π’ качСствС значСния Π΄Π°Π½Π½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Ρ†Π΅Π»Ρ‹Π΅ числа для любого Ρ‚ΠΈΠΏΠ° Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ HTML списка.

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

<!DOCTYPE html> <html lang=»ru-RU»> <head> <meta charset=»UTF-8″> <title>ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ HTML списка</title> <link rel=»stylesheet» type=»text/css» href=»style. css» /> </head> <body> <h2>ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ HTML списка</h2> <h3> ИзмСняСм Ρ‚ΠΈΠΏ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ HTML списка</h3> <ol> <li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт списка <li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт списка <li>Π’Ρ€Π΅Ρ‚ΠΈΠΉ элСмСнт списка </ol> <h4>Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ для Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ списка большиС римскиС Ρ†ΠΈΡ„Ρ€Ρ€Ρ‹</h4> <ol> <li type=»I»>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт списка</li> <li type=»I»>Π’Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт списка</li> <li type=»I»>Π’Ρ€Π΅Ρ‚ΠΈΠΉ элСмСнт списка</li> </ol> <h4>Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ для Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ Π·Π°Π³Π»Π°Π²Π½Ρ‹Π΅ латинскиС Π±ΡƒΠΊΠ²Ρ‹</h4> <ol> <li type=»A»>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт списка</li> <li type=»A»>Π’Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт списка</li> <li type=»A»>Π’Ρ€Π΅Ρ‚ΠΈΠΉ элСмСнт списка</li> </ol> <h4>Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ для Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ строчныС латинскиС Π±ΡƒΠΊΠ²Ρ‹</h4> <ol> <li type=»a»>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт списка</li> <li type=»a»>Π’Ρ‚ΠΎΡ€ΠΎ

Бписки Π² 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


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

Как ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ списки Π² HTML

Π­Ρ‚Π° ΡΡ‚Π°Ρ‚ΡŒΡ являСтся Ρ‡Π°ΡΡ‚ΡŒΡŽ сСрии статСй для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ². БСрия ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π° для людСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ хотят ΡΠ΅Ρ€ΡŒΠ΅Π·Π½ΠΎ Π·Π°Π½ΡΡ‚ΡŒΡΡ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ, Π° Ρ‚Π°ΠΊΠΆΠ΅ для людСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠΆΠ΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ ΠΈ хотят Π·Π°ΠΊΡ€Π΅ΠΏΠΈΡ‚ΡŒ свои знания основ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, восполнив Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹. Если Π²Ρ‹ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π²ΠΎΠ·ΠΈΡ‚Π΅ΡΡŒ с HTML, CSS ΠΈΠ»ΠΈ Javascript, ΠΏΠΎΠΊΠ° Π½Π΅ Π½Π°ΡƒΡ‡ΠΈΡ‚Π΅ΡΡŒ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ, эта сСрия статСй для вас. ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» этой сСрии тСсно связан с ΠΌΠΎΠΈΠΌ курсом Coursera, ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ²ΡˆΠΈΠΌ самый высокий Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³.

Как ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ занятой Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ, Ρƒ вас навСрняка ΠΊΡƒΡ‡Π° списков:

  • Бписок Π΄Π΅Π»
  • Бписок ΠΏΠΎΠΊΡƒΠΏΠΎΠΊ
  • Бписок ΠΈΠ½Π³Ρ€Π΅Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ²
  • Π΄Π°Π²Π°ΠΉΡ‚Π΅ пСрСчислим Π΄Ρ€ΡƒΠ³ΠΈΠ΅ списки список 😁

БущСствуСт Π΄Π»ΠΈΠ½Π½Ρ‹ΠΉ список ΠΏΡ€ΠΈΡ‡ΠΈΠ½ Π³Π»ΡƒΠ±ΠΎΠΊΠΎΠΉ тоски, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π΅Π»Π°ΡŽΡ‚ списки ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ для Π½Π°ΡˆΠΈΡ… Π»ΡŽΠ±ΠΈΡ‚Π΅Π»Π΅ΠΉ списков. (Π― Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ список этих ΠΏΡ€ΠΈΡ‡ΠΈΠ½, Π½Π΅ Ρ‚Π°ΠΊ Π»ΠΈ? 🀣)

Π₯ΠΎΡ€ΠΎΡˆΠΎ, Ρ…ΠΎΡ€ΠΎΡˆΠΎ. Π― Π·Π°ΠΊΠΎΠ½Ρ‡ΠΈΠ» с этим списком Π±Π°Π½Π°Π»ΡŒΠ½Ρ‹Ρ… ΡˆΡƒΡ‚ΠΎΠΊ. 🀣

Если Π½Π΅ ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΡˆΡƒΡ‚ΠΎΠΊ, списки — ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ инструмСнт Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ, Π½ΠΎ ΠΈ структурно.(Как я ΡƒΠΆΠ΅ Π΄Π°Π²Π½ΠΎ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ» Π² этой сСрии статСй, HTML опрСдСляСт структуру нашСго Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, Π° Π½Π΅ Ρ‚ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½Π° выглядит Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ.)

Π˜Ρ‚Π°ΠΊ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΡƒΠ·Π½Π°Π΅ΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ список Π² HTML.

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

НиТС находится Π½Π°Ρ‡Π°Π»ΠΎ HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, содСрТащСго список Π²Π΅Ρ‰Π΅ΠΉ ( unordered-lists-before. 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
 
 


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


   

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

Мой Ρ‚ΠΈΠΏΠΈΡ‡Π½Ρ‹ΠΉ список ΠΏΠΎΠΊΡƒΠΏΠΎΠΊ Π½Π° ΡƒΠΆΠΈΠ½: Молоко ΠŸΠΎΠ½Ρ‡ΠΈΠΊΠΈ ΠŸΠ΅Ρ‡Π΅Π½ΡŒΠ΅ Π¨ΠΎΠΊΠΎΠ»Π°Π΄ Π‘Π°Ρ…Π°Ρ€ АрахисовоС масло ΠŸΠ΅ΠΏΡ‚ΠΎ-бисмол

Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, HTML содСрТит Мой Ρ‚ΠΈΠΏΠΈΡ‡Π½Ρ‹ΠΉ список ΠΏΠΎΠΊΡƒΠΏΠΎΠΊ Π½Π° ΡƒΠΆΠΈΠ½ : ΠΌΠΎΠ»ΠΎΠΊΠΎ, ΠΏΠΎΠ½Ρ‡ΠΈΠΊΠΈ, Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ‚ΠΈΠΏΡ‹ ΠΏΠ΅Ρ‡Π΅Π½ΡŒΡ ΠΈ, ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, Π² ΠΊΠΎΠ½Ρ†Π΅, Pepto Bismol.πŸ‘

Если Π²Ρ‹ просмотритС unordered-lists-before.html Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

Π£ нас Π΅Ρ‰Π΅ Π½Π΅Ρ‚ списка, Π½Π΅ Ρ‚Π°ΠΊ Π»ΠΈ? It ju

Бписки

ΠžΠ±Π·ΠΎΡ€

Π‘Ρ‚ΡƒΠ΄Π΅Π½Ρ‚Ρ‹ знакомятся с упорядочСнными ΠΈ нСупорядочСнными списками Π² HTML ΠΈ проходят нСсколько ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Ρ‚Π΅Π³ΠΈ

    ,
      ΠΈ
    1. . Π—Π°Ρ‚Π΅ΠΌ ΠΎΠ½ΠΈ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°ΡŽΡ‚ΡΡ ΠΊ своСму ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρƒ, Π³Π΄Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ Π½ΠΎΠ²ΡƒΡŽ HTML-страницу.Π’Π½ΡƒΡ‚Ρ€ΠΈ Π½ΠΎΠ²ΠΎΠΉ страницы ΠΎΠ½ΠΈ ΠΏΠΈΡˆΡƒΡ‚ HTML-ΠΊΠΎΠ΄ для отобраТСния Ρ€Π΅Ρ†Π΅ΠΏΡ‚Π°, списка ΠΏΠ΅Ρ€Π²ΠΎΠΉ дСсятки ΠΈΠ»ΠΈ любого Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π½ΠΎΠ²Ρ‹Π΅ Ρ‚Π΅Π³ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½ΠΈ ΡƒΠ·Π½Π°Π»ΠΈ.

      НазначСниС

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

    2. ) находятся Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнтов списка (
        ΠΈΠ»ΠΈ
          ).

          Π‘Ρ‚ΡƒΠ΄Π΅Π½Ρ‚Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°ΡŽΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π°Π΄ своими ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°ΠΌΠΈ, добавляя Π½ΠΎΠ²ΡƒΡŽ HTML-страницу. Π‘Ρ‚ΡƒΠ΄Π΅Π½Ρ‚Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ содСрТимоС этой страницы, Π½ΠΎ ΠΎΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ Ρ‚ΠΈΠΏ списка. Π’ настоящий ΠΌΠΎΠΌΠ΅Π½Ρ‚ Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π½Π΅Ρ‚ возмоТности ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΎΡ‚ ΠΎΠ΄Π½ΠΎΠΉ страницы ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΊ Π΄Ρ€ΡƒΠ³ΠΎΠΉ, Π½ΠΎ студСнты ΡƒΠ·Π½Π°ΡŽΡ‚ большС ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠ²ΡΠ·Π°Ρ‚ΡŒ страницы вмСстС Π² Π£Ρ€ΠΎΠΊΠ΅ 9, прямо ΠΏΠ΅Ρ€Π΅Π΄ ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠ΅ΠΉ своСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

          ΠŸΠΎΠ²Π΅ΡΡ‚ΠΊΠ° дня

          Π Π°Π·ΠΌΠΈΠ½ΠΊΠ° (10 ΠΌΠΈΠ½ΡƒΡ‚)

          ΠΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ (40 ΠΌΠΈΠ½ΡƒΡ‚)

          Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ (10 ΠΌΠΈΠ½ΡƒΡ‚)

          ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½Π° Code Studio

          Π¦Π΅Π»ΠΈ

          Π‘Ρ‚ΡƒΠ΄Π΅Π½Ρ‚Ρ‹ смогут:

          • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ‚Π΅Π³ΠΈ
              ,
                ΠΈ
              • для создания упорядочСнных ΠΈ нСупорядочСнных списков Π½Π° страницС HTML.
              • Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ ΠΈ Π½Π°Π·ΠΎΠ²ΠΈΡ‚Π΅ Π½ΠΎΠ²ΡƒΡŽ HTML-страницу.

              ΠŸΡ€Π΅ΠΏΠ°Ρ€Π°Ρ‚

              • ΠŸΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΡŒΡ‚Π΅ студСнчСскиС ΠΆΡƒΡ€Π½Π°Π»Ρ‹ (ΠΈΠ»ΠΈ наброски ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ²), Ссли ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… для создания ΠΈΠ΄Π΅ΠΉ для своСй страницы списков.

              Π’Π²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ ΠΊΠΎΠ΄

              Π Π°Π·ΠΌΠΈΠ½ΠΊΠ° (10 ΠΌΠΈΠ½ΡƒΡ‚)

              Быстрый ΠΎΠ±ΠΌΠ΅Π½

              ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΡ

              На послСднСм ΡƒΡ€ΠΎΠΊΠ΅ ΠΌΡ‹ рассмотрСли Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ‚ΠΈΠΏΡ‹ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΠΌΡ‹ Ρ…ΠΎΡ‚Π΅Π»ΠΈ Π±Ρ‹ ΠΈΠ»ΠΈ Π½Π΅ Ρ…ΠΎΡ‚Π΅Π»ΠΈ Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ со всСм ΠΌΠΈΡ€ΠΎΠΌ.БСгодня Π²Ρ‹ создадитС ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π½ΠΎΠ²ΡƒΡŽ страницу для своСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, ΠΈ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎ содСрТании этой страницы, Π½ΠΎ Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ структуру: списки.

              Подсказка: ΠŸΠΎΡ‚Ρ€Π°Ρ‚ΡŒΡ‚Π΅ нСсколько ΠΌΠΈΠ½ΡƒΡ‚ Π½Π° ΠΌΠΎΠ·Π³ΠΎΠ²ΠΎΠΉ ΡˆΡ‚ΡƒΡ€ΠΌ для Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π²Ρ‹ Ρ…ΠΎΡ‚Π΅Π»ΠΈ Π±Ρ‹ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ со всСм ΠΌΠΈΡ€ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ, ΠΏΠΎ Π²Π°ΡˆΠ΅ΠΌΡƒ мнСнию, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ структурирован Π² Π²ΠΈΠ΄Π΅ списка.

              ЦСль обсуТдСния

              ЦСль: ЦСль этого обсуТдСния — Π΄Π°Ρ‚ΡŒ учащимся врСмя ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ списки, ΠΈ ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎ Ρ€Π°Π·Π½ΠΈΡ†Π΅ ΠΌΠ΅ΠΆΠ΄Ρƒ упорядочСнными ΠΈ нСупорядочСнными списками, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΈΡ… Π² HTML.НСкоторыС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ списки, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ учащиСся, ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ списками ΠΈΡ… Π»ΡŽΠ±ΠΈΠΌΡ‹Ρ… Π²Π΅Ρ‰Π΅ΠΉ, списками 10 Π»ΡƒΡ‡ΡˆΠΈΡ…, списком ΠΏΠΎΠΊΡƒΠΏΠΎΠΊ ΠΈ Ρ‚. Π”.

              Когда студСнты ΠΎΠ±ΡΡƒΠΆΠ΄Π°ΡŽΡ‚, Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π»ΠΈ списки Π±Ρ‹Ρ‚ΡŒ упорядочСнными ΠΈΠ»ΠΈ нСупорядочСнными, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠ½ΡƒΡ‚ΡŒ Ρ€Π°Π·Π½ΠΈΡ†Ρƒ. НапримСр, список Ρ„ΠΈΠ½ΠΈΡˆΠΈΡ€ΠΎΠ²Π°Π²ΡˆΠΈΡ… Π² Π³ΠΎΠ½ΠΊΠ΅, вСроятно, Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π·Π°ΠΊΠ°Π·Π°Π½, Π° список ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ², вСроятно, Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ. ΠŸΡ€ΠΈ нСобходимости Π²Π΅Ρ€Π½ΠΈΡ‚Π΅ΡΡŒ ΠΊ этому ΠΎΠ±ΡΡƒΠΆΠ΄Π΅Π½ΠΈΡŽ ΠΏΠΎΠ·ΠΆΠ΅ Π½Π° ΡƒΡ€ΠΎΠΊΠ΅.

              ΠžΠ±ΡΡƒΠ΄ΠΈΡ‚ΡŒ: Π£Ρ‡Π΅Π½ΠΈΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ провСсти ΠΌΠΎΠ·Π³ΠΎΠ²ΠΎΠΉ ΡˆΡ‚ΡƒΡ€ΠΌ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΠΎ, Π·Π°Ρ‚Π΅ΠΌ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ с ΠΏΠ°Ρ€Ρ‚Π½Π΅Ρ€Π°ΠΌΠΈ, Π° Π·Π°Ρ‚Π΅ΠΌ, Π½Π°ΠΊΠΎΠ½Π΅Ρ†, ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ со всСм классом.

              Подсказка: Иногда ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ числа для упорядочивания списков. Как Π²Ρ‹ Π΄ΡƒΠΌΠ°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠ· этих списков слСдуСт Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Ρ‚ΡŒ, Π° ΠΊΠ°ΠΊΠΈΠ΅ Π½Π΅Ρ‚?

              ΠžΠ±ΡΡƒΠ΄ΠΈΡ‚ΡŒ: ΠŸΠΎΠ·Π²ΠΎΠ»ΡŒΡ‚Π΅ учащимся ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ своими идСями ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° умСстна нумСрация.

              ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΡ

              Π’ HTML Π΅ΡΡ‚ΡŒ Π΄Π²Π° Ρ‚ΠΈΠΏΠ° списков: упорядочСнныС списки с числами ΠΈ нСупорядочСнныС списки с ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π°ΠΌΠΈ. БСгодня ΠΌΡ‹ собираСмся ΡƒΠ·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ списки ΠΎΠ±ΠΎΠΈΡ… Ρ‚ΠΈΠΏΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эту структуру Π² своСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅.

              ΠΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ (40 ΠΌΠΈΠ½ΡƒΡ‚)

              Π’Π΅Π±-лаборатория: Бписки

              Π“Ρ€ΡƒΠΏΠΏΠ°: Π Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅ учащихся Π½Π° ΠΏΠ°Ρ€Ρ‹.

              Circulate: ΠŸΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ учащимся Π² ΠΏΡ€ΠΎΡ…ΠΎΠΆΠ΄Π΅Π½ΠΈΠΈ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ Π½Π°Π±ΠΎΡ€Π° ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ. Π‘Π»Π΅Π΄ΠΈΡ‚Π΅ Π·Π° Ρ‚Π΅ΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΏΠ°Ρ€Ρ‹ Π΄ΠΎΠΉΠ΄ΡƒΡ‚ Π΄ΠΎ 5-Π³ΠΎ уровня.

              Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ (10 ΠΌΠΈΠ½ΡƒΡ‚)

              Π–ΡƒΡ€Π½Π°Π»

              Подсказка: ΠŸΠΎΠΏΡ€ΠΎΡΠΈΡ‚Π΅ учащихся ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ страницу Β«HTML-Ρ‚Π΅Π³ΠΈΒ» Π² своих ΠΆΡƒΡ€Π½Π°Π»Π°Ρ… Ρ‚Π΅Π³Π°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½ΠΈ ΠΈΠ·ΡƒΡ‡ΠΈΠ»ΠΈ Π½Π° этом ΡƒΡ€ΠΎΠΊΠ΅.

              Подсказка: ΠŸΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚Π΅ учащимся ΠΏΠΎΡ€Π°Π·ΠΌΡ‹ΡˆΠ»ΡΡ‚ΡŒ ΠΎ своСм освоСнии пяти ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊ CS Discoveries (Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ, Π½Π°ΡΡ‚ΠΎΠΉΡ‡ΠΈΠ²ΠΎΡΡ‚ΡŒ, творчСство, сотрудничСство, ΠΎΠ±Ρ‰Π΅Π½ΠΈΠ΅). Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… запросов, Ссли сочтСтС Π½ΡƒΠΆΠ½Ρ‹ΠΌ.

              • Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΎΠ΄Π½Ρƒ ΠΈΠ· пяти ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊ, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ…, ΠΏΠΎ Π²Π°ΡˆΠ΅ΠΌΡƒ мнСнию, Π²Ρ‹ продСмонстрировали рост Π½Π° этом ΡƒΡ€ΠΎΠΊΠ΅. ΠΠ°ΠΏΠΈΡˆΠΈΡ‚Π΅ Ρ‡Ρ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ сдСлали, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ эту ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒ.

              • Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΎΠ΄Π½Ρƒ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ, ΠΏΠΎ Π²Π°ΡˆΠ΅ΠΌΡƒ мнСнию, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Ρ‚ΡŒ Ρ€Π°Π·Π²ΠΈΠ²Π°Ρ‚ΡŒΡΡ.Π§Ρ‚ΠΎ Π±Ρ‹ Π²Ρ‹ Ρ…ΠΎΡ‚Π΅Π»ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠ΅?

              • Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΎΠ΄Π½ΠΎ ΡƒΠΏΡ€Π°ΠΆΠ½Π΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅, ΠΏΠΎ Π²Π°ΡˆΠ΅ΠΌΡƒ мнСнию, Π±Ρ‹Π»ΠΎ особСнно Π²Π°ΠΆΠ½Ρ‹ΠΌ для занятия, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΡ‹ Π·Π°Π²Π΅Ρ€ΡˆΠΈΠ»ΠΈ сСгодня. Π§Ρ‚ΠΎ сдСлало это Ρ‚Π°ΠΊΠΈΠΌ Π²Π°ΠΆΠ½Ρ‹ΠΌ?

              Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² списка

              Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π²Ρ‹ Π½Π°ΡƒΡ‡ΠΈΡ‚Π΅ΡΡŒ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ со списками Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ Π½Π° R. Π’Ρ‹ Π½Π°ΡƒΡ‡ΠΈΡ‚Π΅ΡΡŒ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ, ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ доступ, ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈ ΡƒΠ΄Π°Π»ΡΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ списка.

              Бписок — это структура Π΄Π°Π½Π½Ρ‹Ρ…, ΠΈΠΌΠ΅ΡŽΡ‰Π°Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΡΠΌΠ΅ΡˆΠ°Π½Π½Ρ‹Ρ… Ρ‚ΠΈΠΏΠΎΠ² Π΄Π°Π½Π½Ρ‹Ρ….

              Π’Π΅ΠΊΡ‚ΠΎΡ€, содСрТащий всС элСмСнты ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ‚ΠΈΠΏΠ°, называСтся Π°Ρ‚ΠΎΠΌΠ°Ρ€Π½Ρ‹ΠΌ Π²Π΅ΠΊΡ‚ΠΎΡ€ΠΎΠΌ, Π° Π²Π΅ΠΊΡ‚ΠΎΡ€, содСрТащий элСмСнты Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ Ρ‚ΠΈΠΏΠ°, называСтся списком.

              ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ, являСтся Π»ΠΈ это список с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ typeof () , ΠΈ Π½Π°ΠΉΡ‚ΠΈ Π΅Π³ΠΎ Π΄Π»ΠΈΠ½Ρƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ length () . Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ списка, состоящСго ΠΈΠ· Ρ‚Ρ€Π΅Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ‚ΠΈΠΏΡ‹ Π΄Π°Π½Π½Ρ‹Ρ….

               > Ρ…
              $ Π°
              [1] 2,5
              $ ΠΌΠ»Ρ€Π΄
              [1] ИБВИНА
              $ c
              [1] 1 2 3
              > typeof (x)
              [1] "список"
              > Π΄Π»ΠΈΠ½Π° (x)
              [1] 3
                

              Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ список Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ Π½Π° R?

              Бписок ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ list () .

               > x <- list ("a" = 2,5, "b" = TRUE, "c" = 1: 3)
                

              Π—Π΄Π΅ΡΡŒ ΠΌΡ‹ создаСм список x ΠΈΠ· Ρ‚Ρ€Π΅Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² с Ρ‚ΠΈΠΏΠ°ΠΌΠΈ Π΄Π°Π½Π½Ρ‹Ρ… Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ , логичСский ΠΈ цСлочислСнный Π²Π΅ΠΊΡ‚ΠΎΡ€ соотвСтствСнно.

              Π•Π³ΠΎ структуру ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ str () .

               > str (x)
              Бписок из 3
              $ a: число 2,5
              $ b: logi ИБВИНА
              $ c: int [1: 3] 1 2 3
                

              Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ a , b ΠΈ c Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ Ρ‚Π΅Π³Π°ΠΌΠΈ, Ρ‡Ρ‚ΠΎ ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ ΠΎΠ±Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅ ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌ списка.

              Однако Ρ‚Π΅Π³ΠΈ Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹. ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‚ ΠΆΠ΅ список Π±Π΅Π· Ρ‚Π΅Π³ΠΎΠ² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ. Π’ Ρ‚Π°ΠΊΠΎΠΌ сцСнарии ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ числовыС индСксы.

               > x <- список (2,5, ИБВИНА, 1: 3)
              > Ρ…
              [[1]]
              [1] 2,5
              [[2]]
              [1] ИБВИНА
              [[3]]
              [1] 1 2 3
                

              Как ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌ списка?

              Доступ ΠΊ спискам осущСствляСтся Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ Π²Π΅ΠΊΡ‚ΠΎΡ€Π°ΠΌ. Для индСксации ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ цСлочислСнныС, логичСскиС ΠΈΠ»ΠΈ ΡΠΈΠΌΠ²ΠΎΠ»ΡŒΠ½Ρ‹Π΅ Π²Π΅ΠΊΡ‚ΠΎΡ€Ρ‹. Рассмотрим список ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ.

               > Ρ…
              $ name
              [1] "Π”ΠΆΠΎΠ½"
              $ возраст
              [1] 19
              $ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚
              [1] «английский» «французский»
              > x [c (1: 2)] # индСкс с использованиСм цСлочислСнного Π²Π΅ΠΊΡ‚ΠΎΡ€Π°
              $ name
              [1] "Π”ΠΆΠΎΠ½"
              $ возраст
              [1] 19
              > x [-2] # использованиС ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ†Π΅Π»ΠΎΠ³ΠΎ числа для ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°
              $ name
              [1] "Π”ΠΆΠΎΠ½"
              $ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚
              [1] «английский» «французский»
              > x [c (T, F, F)] # индСкс с использованиСм логичСского Π²Π΅ΠΊΡ‚ΠΎΡ€Π°
              $ name
              [1] "Π”ΠΆΠΎΠ½"
              > x [c ("age", "speaks")] # индСкс с использованиСм Π²Π΅ΠΊΡ‚ΠΎΡ€Π° символов
              $ возраст
              [1] 19
              $ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚
              [1] «английский» «французский»
                

              Π˜Π½Π΄Π΅ΠΊΡΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ [, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π²Ρ‹ΡˆΠ΅, даст Π½Π°ΠΌ подсписок, Π° Π½Π΅ содСрТимоС Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ [[.

              Однако этот ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π½Π°ΠΌ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡƒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρƒ Π·Π° Ρ€Π°Π·.

               > x ["возраст"]
              $ возраст
              [1] 19
              > typeof (x ["age"]) # single [Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ список
              [1] "список"
              > x [["age"]] # double [[Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ содСрТаниС
              [1] 19
              > typeof (x [["возраст"]])
              [1] "Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ"
                

              ΠΠ»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²ΠΎΠΉ [[, которая часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΏΡ€ΠΈ доступС ΠΊ содСрТимому списка, являСтся ΠΎΠΏΠ΅Ρ€Π°Ρ‚ΠΎΡ€ $ .Они ΠΎΠ±Π° ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹, Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ $ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ частичноС сопоставлСниС Ρ‚Π΅Π³ΠΎΠ².

               > x $ name # Ρ‚ΠΎ ΠΆΠ΅, Ρ‡Ρ‚ΠΎ ΠΈ x [["name"]]
              [1] "Π”ΠΆΠΎΠ½"
              > x $ a # частичноС соотвСтствиС, Ρ‚ΠΎ ΠΆΠ΅, Ρ‡Ρ‚ΠΎ x $ ag ΠΈΠ»ΠΈ x $ age
              [1] 19
              > x [["a"]] # Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ частичноС совпадСниС с [[
              Π—ΠΠΠ§Π•ΠΠ˜Π• NULL
              > # индСксация ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒΡΡ рСкурсивно
              > x $ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ [1]
              [1] «Английский»
              > x [["Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚"]] [2]
              [1] «французский»
                

              Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ список Π² R?

              ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ списка ΠΏΡƒΡ‚Π΅ΠΌ пСрСназначСния. ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ любой ΠΈΠ· описанных Π²Ρ‹ΡˆΠ΅ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² доступа ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ.

              ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ пСрСупорядочиваниС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ².

               > x [["name"]] <- "ΠšΠ»ΡΡ€"; Икс
              $ возраст
              [1] 19
              $ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚
              [1] «английский» «французский»
              $ name
              [1] "ΠšΠ»ΡΡ€"
                

              Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π² список?

              Π›Π΅Π³ΠΊΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹. ΠœΡ‹ просто Π½Π°Π·Π½Π°Ρ‡Π°Π΅ΠΌ значСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½ΠΎΠ²Ρ‹Ρ… Ρ‚Π΅Π³ΠΎΠ², ΠΈ это сразу ΠΆΠ΅ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ Π΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ.

               > x [["ΠΆΠ΅Π½Π°Ρ‚"]] <- Π›ΠžΠ–Π¬
              > Ρ…
              $ возраст
              [1] 19
              $ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚
              [1] «английский» «французский»
              $ name
              [1] "ΠšΠ»ΡΡ€"
              $ Π·Π°ΠΌΡƒΠΆΠ΅ΠΌ
              [1] Π›ΠžΠ–Π¬
                

              Как ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΈΠ· списка?

              ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚, присвоив Π΅ΠΌΡƒ NULL .

               > x [["age"]] <- NULL
              > str (x)
              Бписок из 3
              $ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚: chr [1: 2] "английский" "французский"
              $ name: chr "ΠšΠ»ΡΡ€"
              $ Π·Π°ΠΌΡƒΠΆΠ΅ΠΌ: logi FALSE
              > x $ ΠΆΠ΅Π½Π°Ρ‚ <- NULL
              > str (x)
              Бписок из 2
              $ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚: chr [1: 2] "английский" "французский"
              $ name: chr "ΠšΠ»ΡΡ€"
                
              .

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

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