Najnowsze tutoriale tworzenie stron internetowych

Listy referencyjne

❮ Poprzedni Następny Rozdział ❯

Listy HTML opis

Lista wynalazku, które składa się z grup nazwa wartości i znany jako listę definicji przed HTML5. Opis listy są przeznaczone dla grup „terminów i definicji, tematów i wartości metadanych, pytania i odpowiedzi, lub jakichkolwiek innych grup danych nazwa-wartość”.

DL istniał w HTML znaczniki i została znormalizowana w HTML 2.0; nadal aktualny.

Przykład listy nieuporządkowanej i uporządkowanej listy w HTML:

Lista nieuporządkowana:

  • Pozycja
  • Pozycja
  • Pozycja
  • Pozycja

Uporządkowaną listę:

  1. pierwsza pozycja
  2. drugi element
  3. trzecia pozycja
  4. czwarta pozycja

Listy HTML nieuporządkowane

Nieuporządkowana lista zaczyna się od <ul> tag. Każdy element listy zaczyna się od <li> tag.

Pozycje listy będą oznaczone kulami (small black circles) :

Przykład

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Spróbuj sam "

Nieuporządkowane list HTML - The Style Atrybut

style atrybut może być dodany do listy nieuporządkowanej, aby zdefiniować styl znacznika:

Styl Opis
list-style-type:disc Pozycje listy będą oznaczone kulami (default)
list-style-type:circle Pozycje listy będą oznaczone kręgach
list-style-type:square Pozycje listy będą oznaczone kwadratami
list-style-type:none Elementy listy nie będą oznaczone

Disc :

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Spróbuj sam "

Circle :

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Spróbuj sam "

Square :

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Spróbuj sam "

None :

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Spróbuj sam "

Zamówione list HTML

Uporządkowana lista zaczyna się od <ol> tag. Każdy element listy zaczyna się od <li> tag.

Pozycje liście zostaną oznaczone numerami:

Przykład

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Spróbuj sam "

Zamówione list HTML - The Type Atrybut

type cecha może być dodany do uporządkowanej listy, aby określić rodzaj znacznika:

Rodzaj Opis
type="1" Pozycje listy będą numerowane cyframi (default)
type="A" Pozycje listy będą numerowane z wielkimi literami
type="a" Pozycje listy będą numerowane z małych liter
type="I" Pozycje listy będą numerowane z wielkimi liczbami rzymskimi
type="i" Pozycje listy będą numerowane z małymi liczbami rzymskimi

Liczby:

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Spróbuj sam "

Wielkie litery:

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Spróbuj sam "

Małe litery:

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Spróbuj sam "

Liczby rzymskie wielkie litery:

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Spróbuj sam "

Małe rzymskie liczbach:

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Spróbuj sam "

HTML Opis Listy

HTML obsługuje również opis list.

Lista opis znajduje się lista terminów, wraz z opisem każdego semestru.

<dl> znacznik określa listę opisu, <dt> znacznik określa termin (name) , a <dd> tag opisuje każdy termin:

Przykład

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
Spróbuj sam "

Listy HTML zagnieżdżone

Lista może być zagnieżdżone (lists inside lists) :

Przykład

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
Spróbuj sam "

Elementy listy mogą zawierać nowe liście, a inne elementy HTML, takich jak obrazy i linki, etc.

Listy poziome

Wykazy HTML mogą być stylizowany na wiele różnych sposobów z CSS.

Jednym z popularnych sposobów jest projektować listę mają być wyświetlane poziomo:

Przykład

<!DOCTYPE html>
<html>

<head>
<style>
ul#menu li {
    display:inline;
}
</style>
</head>

<body>

<h2>Horizontal List</h2>

<ul id="menu">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ul>

</body>
</html>
Spróbuj sam "

Z niewielką dodatkową stylu, można nadać mu wygląd menu:

Przykład

ul#menu {
    padding: 0;
}

ul#menu li {
    display: inline;
}

ul#menu li a {
    background-color: black;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    background-color: orange;
}
Spróbuj sam "

Podsumowanie rozdziału

  • Użyj HTML <ul> element, aby zdefiniować listę nieuporządkowaną
  • Użyj HTML style atrybut, aby zdefiniować styl wypunktowania
  • Użyj HTML <ol> element, aby zdefiniować listę uporządkowaną
  • Użyj HTML type atrybut, aby określić rodzaj numeracji
  • Użyj HTML <li> element, aby zdefiniować element listy
  • Użyj HTML <dl> element, aby zdefiniować listę opis
  • Użyj HTML <dt> elementu zdefiniowanie terminu opis
  • Użyj HTML <dd> elementu w celu określenia danych Opis
  • Listy mogą być zagnieżdżone wewnątrz list
  • Elementy listy mogą zawierać inne elementy HTML
  • Użyj wyświetlanie właściwości CSS: inline, aby wyświetlić listę poziomo

Sprawdź się z ćwiczeniami!

Zadanie 1 » ćwiczenia 2» Zadanie 3 » ćwiczenia 4» ćwiczenia 5 » ćwiczenia 6»

Lista Tagi HTML

Etykietka Opis
<ul> Określa listę nieuporządkowaną
<ol> Definiuje uporządkowaną listę
<li> Definiuje element listy
<dl> Określa listę opis
<dt> Definiuje pojęcie na liście opisu
<dd> Definiuje opis w liście opisach

❮ Poprzedni Następny Rozdział ❯