AgerNic.com/ro
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
Tutorial

HTML | liste
Ce este o listă?
O listă este o înregistrare cu informații scurte, cum ar fi numele persoanelor, de obicei scrise sau tipărite cu un singur lucru pe fiecare linie și ordonate într-un mod care face ușor de găsit un anumit lucru.

De exemplu:

  • O listă de cumpărături
  • Lista de activități

Liste in HTML

HTML oferă trei modalități pentru specificarea listelor de informații. Toate listele trebuie să conțină una sau mai multe liste de elemente.
Tipurile de liste care pot fi utilizate în HTML sunt:
ul: O listă neordonată. Acesta va enumera elementele dintr-o cutie.
ol: O listă comandată. Acest lucru va utiliza diferite scheme de numere pentru a lista articolele dvs.
dl: O listă de definiții. Acest lucru aranjează articolele în același mod în care sunt aranjate într-un dicționar.

Lista HTML neordonata

O listă neordonată începe cu eticheta „<ul>”. Fiecare element de listă începe cu eticheta „<li>”. Elementele din listă sunt marcate cu buline, adică cercuri negre - în mod implicit.

Exemplu:

<!DOCTYPE html>
<html>
<head>
<title>Cum se creează o lista neordonata in HTML</title>
</head>
<body> <h1>Lista neordonata in HTM</h1>
<h2>Ce trebuie sa inveti pentru a face un blog?</h2>

<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>SQL</li>
</ul>
</body>
</html>

Lista HTML neordonata - Puteti alege un marcator din lista de mai jos.

Proprietatea de tip listă CSS este utilizată pentru a defini stilul markerului de element de listă:
disc - Setează marcajul elementului listei la un buletin (implicit)
cerc - Setează marcajul elementului de listă într-un cerc
pătrat - Setează marcajul elementului de listă într-un pătrat
niciuna- Elementele din listă nu vor fi marcate

Exemplu 2:

<!DOCTYPE html>
<html>
<head>
<title>Exemplu de lista neordonata</title>
</head>
<body>
<h1>Exemplu de lista neordonata in HTM tipul disc</h1>

<ul style="list-style-type:disc;">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>SQL</li>
</ul>
<h2>Exemplu de lista neordonata in HTM tipul cerc</h2>

<ul style="list-style-type:circle;">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>SQL</li>
</ul>
</body>
</html>

Lista HTML ordonată

O listă comandată începe cu eticheta <ol>. Fiecare element de listă începe cu tagul <li>. În mod implicit, elementele din listă vor fi marcate cu numere:

Exemplu 3:

<!DOCTYPE html>
<html>
  <head>
     <title>Lista HTML ordonată</title>
</head>
<body>

<h3>Exemplu de Lista HTML ordonată</h3>

<ol>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>SQL</li>
</ol>
<h4>Exemplu de Lista HTML ordonată utilizand a
litere mici</h4>

<ol type="a">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>SQL</li>
</ol> <h5>Exemplu de Lista HTML ordonată utilizand litere romane</h5>

<ol type="I">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>SQL</li>
</ol>

</body>
</html>

Liste de descriere HTML

HTML acceptă de asemenea listele de descrieri.
O listă de descrieri este o listă de termeni, cu o descriere a fiecărui termen. Eticheta <dl> definește lista de descrieri, eticheta <dt> definește termenul (nume) și eticheta <dd> descrie fiecare termen:

Exemplu 4:

<!DOCTYPE html>
<html>
  <head>
     <title>Lista HTML ordonată</title>
</head>
<body>

<h3>Listă de termeni, cu o descriere a fiecărui termen. Exemple</h3>

<dl>
<dt>Cafea</dt>
<dd>- fierbinte cu lapte</dd>
<dt>Ceai</dt>
<dd>- fara lapte si fierbinte</dd>
</dl>
<h4>Exemplu de o lista in interiorul altei liste</h4>

<ul>
<li>Cafea</li>
<li>Ceai
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Lapte</li>
</ul>
<h5>Exemplu cu numărarea listelor controlat</h5>
<p>Numărarea listelor controlat
În mod implicit, o listă comandată va începe să numere din 1.
Dacă doriți să începeți să numărați de la un număr specificat, puteți utiliza atributul start:</p>
<ol start="50">
<li>Cafea</li>
<li>Lapte</li>
<li>Ceai</li>
</ol>

<ol type="I" start="60">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>SQL</li>
</ol>

</body>
</html>
Tags: Liste HTML ul, li, ol, dl, exemple

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.