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.


analytics piwika