HTML - listy
HTML oferuje autorom stron internetowych trzy sposoby określania list informacji. Wszystkie listy muszą zawierać co najmniej jeden element listy. Listy mogą zawierać -
<ul>- Lista nieuporządkowana. Spowoduje to wyświetlenie elementów przy użyciu zwykłych punktorów.
<ol>- Uporządkowana lista. Spowoduje to użycie różnych schematów liczb do wystawienia przedmiotów.
<dl>- Lista definicji. Pozwoli to uporządkować elementy w taki sam sposób, jak w słowniku.
Listy nieuporządkowane HTML
Lista nieuporządkowana to zbiór powiązanych elementów, które nie mają specjalnej kolejności ani kolejności. Ta lista jest tworzona przy użyciu HTML<ul>etykietka. Każda pozycja na liście jest oznaczona kropką.
Przykład
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>To da następujący wynik -
Atrybut typu
Możesz użyć typeatrybut dla tagu <ul>, aby określić typ pocisku, który lubisz. Domyślnie jest to płyta. Poniżej przedstawiono możliwe opcje -
<ul type = "square">
<ul type = "disc">
<ul type = "circle">Przykład
Poniżej znajduje się przykład, w którym użyliśmy <ul type = "square">
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>To da następujący wynik -
Przykład
Poniżej znajduje się przykład, w którym użyliśmy <ul type = "disc"> -
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>To da następujący wynik -
Przykład
Poniżej znajduje się przykład, w którym użyliśmy <ul type = "circle"> -
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>To da następujący wynik -
Listy uporządkowane HTML
Jeśli musisz umieścić swoje elementy na liście numerowanej zamiast wypunktowanej, zostanie użyta lista uporządkowana w formacie HTML. Ta lista jest tworzona przy użyciu<ol>etykietka. Numeracja zaczyna się od jednego i jest zwiększana o jeden dla każdego kolejnego uporządkowanego elementu listy oznaczonego tagiem <li>.
Przykład
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>To da następujący wynik -
Atrybut typu
Możesz użyć typeatrybut dla tagu <ol>, aby określić typ numeracji, który lubisz. Domyślnie jest to liczba. Poniżej przedstawiono możliwe opcje -
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.Przykład
Poniżej znajduje się przykład, w którym użyliśmy <ol type = "1">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>To da następujący wynik -
Przykład
Poniżej znajduje się przykład, w którym użyliśmy <ol type = "I">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>To da następujący wynik -
Przykład
Poniżej znajduje się przykład, w którym użyliśmy <ol type = "i">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>To da następujący wynik -
Przykład
Poniżej znajduje się przykład, w którym użyliśmy <ol type = "A">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>To da następujący wynik -
Przykład
Poniżej znajduje się przykład, w którym użyliśmy <ol type = "a">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>To da następujący wynik -
Atrybut początkowy
Możesz użyć startatrybut dla znacznika <ol>, aby określić punkt początkowy numeracji, którego potrzebujesz. Poniżej przedstawiono możliwe opcje -
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.Przykład
Poniżej znajduje się przykład, w którym użyliśmy <ol type = "i" start = "4">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>To da następujący wynik -
Listy definicji HTML
HTML i XHTML obsługują styl listy o nazwie definition listsgdzie wpisy są wymienione jak w słowniku lub encyklopedii. Lista definicji to idealny sposób na przedstawienie słownika, listy terminów lub innej listy nazw / wartości.
Lista definicji wykorzystuje następujące trzy znaczniki.
- <dl> - określa początek listy
- <dt> - termin
- <dd> - definicja terminu
- </dl> - określa koniec listy
Przykład
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>To da następujący wynik -