HTML - Danh sách
HTML cung cấp cho các tác giả web ba cách để chỉ định danh sách thông tin. Tất cả các danh sách phải chứa một hoặc nhiều phần tử danh sách. Danh sách có thể chứa -
<ul>- Một danh sách không có thứ tự. Điều này sẽ liệt kê các mục sử dụng dấu đầu dòng đơn giản.
<ol>- Một danh sách có thứ tự. Điều này sẽ sử dụng các lược đồ số khác nhau để liệt kê các mục của bạn.
<dl>- Một danh sách định nghĩa. Điều này sắp xếp các mục của bạn theo cách giống như chúng được sắp xếp trong từ điển.
Danh sách không có thứ tự HTML
Danh sách không có thứ tự là một tập hợp các mục liên quan không có thứ tự hoặc trình tự đặc biệt. Danh sách này được tạo bằng cách sử dụng HTML<ul>nhãn. Mỗi mục trong danh sách được đánh dấu bằng dấu đầu dòng.
Thí dụ
<!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>Điều này sẽ tạo ra kết quả sau:
Thuộc tính loại
Bạn có thể dùng typethuộc tính cho thẻ <ul> để chỉ định loại dấu đầu dòng bạn thích. Theo mặc định, nó là một đĩa. Sau đây là các tùy chọn khả thi -
<ul type = "square">
<ul type = "disc">
<ul type = "circle">Thí dụ
Sau đây là một ví dụ mà chúng tôi đã sử dụng <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>Điều này sẽ tạo ra kết quả sau:
Thí dụ
Sau đây là một ví dụ mà chúng tôi đã sử dụng <ul type = "disk"> -
<!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>Điều này sẽ tạo ra kết quả sau:
Thí dụ
Sau đây là một ví dụ mà chúng tôi đã sử dụng <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>Điều này sẽ tạo ra kết quả sau:
Danh sách có thứ tự HTML
Nếu bạn được yêu cầu đặt các mục của mình trong danh sách được đánh số thay vì được đánh dấu đầu dòng, thì danh sách có thứ tự HTML sẽ được sử dụng. Danh sách này được tạo bằng cách sử dụng<ol>nhãn. Việc đánh số bắt đầu từ một và được tăng lên một cho mỗi phần tử danh sách có thứ tự liên tiếp được gắn thẻ <li>.
Thí dụ
<!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>Điều này sẽ tạo ra kết quả sau:
Thuộc tính loại
Bạn có thể dùng typethuộc tính cho thẻ <ol> để chỉ định kiểu đánh số bạn thích. Theo mặc định, nó là một số. Sau đây là các tùy chọn khả thi -
<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.Thí dụ
Sau đây là một ví dụ mà chúng tôi đã sử dụng <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>Điều này sẽ tạo ra kết quả sau:
Thí dụ
Sau đây là một ví dụ mà chúng tôi đã sử dụng <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>Điều này sẽ tạo ra kết quả sau:
Thí dụ
Sau đây là một ví dụ mà chúng tôi đã sử dụng <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>Điều này sẽ tạo ra kết quả sau:
Thí dụ
Sau đây là một ví dụ mà chúng tôi đã sử dụng <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>Điều này sẽ tạo ra kết quả sau:
Thí dụ
Sau đây là một ví dụ mà chúng tôi đã sử dụng <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>Điều này sẽ tạo ra kết quả sau:
Thuộc tính bắt đầu
Bạn có thể dùng startthuộc tính cho thẻ <ol> để chỉ định điểm bắt đầu đánh số mà bạn cần. Sau đây là các tùy chọn khả thi -
<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.Thí dụ
Sau đây là một ví dụ mà chúng tôi đã sử dụng <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>Điều này sẽ tạo ra kết quả sau:
Danh sách Định nghĩa HTML
HTML và XHTML hỗ trợ một kiểu danh sách được gọi là definition listsnơi các mục được liệt kê giống như trong từ điển hoặc bách khoa toàn thư. Danh sách định nghĩa là cách lý tưởng để trình bày bảng thuật ngữ, danh sách các thuật ngữ hoặc danh sách tên / giá trị khác.
Danh sách Định nghĩa sử dụng ba thẻ sau.
- <dl> - Xác định đầu danh sách
- <dt> - Một thuật ngữ
- <dd> - Định nghĩa thuật ngữ
- </dl> - Xác định phần cuối của danh sách
Thí dụ
<!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>Điều này sẽ tạo ra kết quả sau: