Danh sách html
Các hướng dẫn xây dựng Web được tổ chức tốt và dễ hiểu với rất nhiều ví dụ về cách sử dụng HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML và hơn thế nữa.
Danh sách HTML
Danh sách HTML cho phép các nhà phát triển web nhóm một tập hợp các mục có liên quan trong danh sách.
Thí dụ
Danh sách HTML không có thứ tự:
- Bài báo
- Bài báo
- Bài báo
- Bài báo
Danh sách HTML có thứ tự:
- 1. Mục đầu tiên
- 2. Mặt hàng thứ hai
- 3. Mặt hàng thứ ba
- 4. Mặt hàng thứ tư
Danh sách HTML không theo thứ tự
Một danh sách không có thứ tự bắt đầu bằng<ul>thẻ. Mỗi mục danh sách bắt đầu bằng <li>thẻ.Các mục trong danh sách sẽ được đánh dấu bằng dấu đầu dòng (vòng tròn nhỏ màu đen) theo mặc định:
Thí dụ
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Danh sách HTML có thứ tự
Một danh sách có thứ tự bắt đầu bằng<ol>thẻ. Mỗi mục danh sách bắt đầu bằng <li>thẻ.Các mục trong danh sách sẽ được đánh dấu bằng số theo mặc định:
Thí dụ
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Danh sách mô tả HTML
HTML cũng hỗ trợ danh sách mô tả.Danh sách mô tả là danh sách các thuật ngữ, với mô tả của từng thuật ngữ.
Các
<dl>thẻ định nghĩa danh sách mô tả, <dt>thẻ định nghĩa thuật ngữ (tên), và các <dd> thẻ mô tả từng hạn:
Thí dụ
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Danh sách không có thứ tự HTML
<ul>Thẻ HTML xác định danh sách không có thứ tự (dấu đầu dòng).
Danh sách HTML không theo thứ tự
Một danh sách không có thứ tự bắt đầu bằng<ul>thẻ. Mỗi mục danh sách bắt đầu bằng <li>thẻ.Các mục trong danh sách sẽ được đánh dấu bằng dấu đầu dòng (vòng tròn nhỏ màu đen) theo mặc định:
Thí dụ
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>v
Danh sách HTML không có thứ tự - Chọn công cụ đánh dấu mục danh sách
list-style-typeThuộc tính CSS được sử dụng để xác định kiểu của điểm đánh dấu mục danh sách. Nó có thể có một trong các giá trị sau:
| Value | Description |
|---|---|
| disc | Đặt điểm đánh dấu mục danh sách thành dấu đầu dòng (mặc định) |
| circle | Đặt điểm đánh dấu mục danh sách thành một vòng kết nối |
| square | Đặt điểm đánh dấu mục danh sách thành hình vuông |
| none | Các mục trong danh sách sẽ không được đánh dấu |
Ví dụ
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ví dụ - Vòng tròn
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ví dụ - Hình vuông
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ví dụ - Không có
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Danh sách HTML lồng nhau
Các danh sách có thể được lồng vào nhau (danh sách bên trong danh sách):Thí dụ
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Lưu ý: Mục danh sách (
<li>) có thể chứa danh sách mới và các phần tử HTML khác, như hình ảnh và liên kết, v.v.Danh sách ngang với CSS
Danh sách HTML có thể được tạo kiểu theo nhiều cách khác nhau với CSS.Một cách phổ biến là định kiểu danh sách theo chiều ngang, để tạo menu điều hướng:
Thí dụ
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Mẹo: Bạn có thể tìm hiểu thêm về CSS trong Hướng dẫn CSS của chúng tôi .
Tóm tắt chương
- Sử dụng
<ul>phần tử HTML để xác định danh sách không có thứ tự - Sử dụng thuộc tính CSS
list-style-typeđể xác định điểm đánh dấu mục danh sách - Sử dụng
<li>phần tử HTML để xác định một mục danh sách - Danh sách có thể được lồng vào nhau
- Các mục danh sách có thể chứa các phần tử HTML khác
- Sử dụng thuộc tính CSS
float:leftđể hiển thị danh sách theo chiều ngang
Danh sách có thứ tự HTML
<ol>Thẻ HTML xác định một danh sách có thứ tự. Một danh sách có thứ tự có thể là số hoặc theo thứ tự bảng chữ cái.
Danh sách HTML có thứ tự
Một danh sách có thứ tự bắt đầu bằng<ol>thẻ. Mỗi mục danh sách bắt đầu bằng <li>thẻ.Các mục trong danh sách sẽ được đánh dấu bằng số theo mặc định:
Thí dụ
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Danh sách HTML có thứ tự - Thuộc tính Loại
Cáctypethuộc tính của <ol>thẻ, xác định các loại điểm đánh dấu mục danh sách:
| Type | Description |
|---|---|
| type="1" | Các mục trong danh sách sẽ được đánh số bằng số (mặc định) |
| type="A" | Các mục trong danh sách sẽ được đánh số bằng chữ hoa |
| type="a" | Các mục trong danh sách sẽ được đánh số bằng chữ thường |
| type="I" | Các mục trong danh sách sẽ được đánh số bằng số la mã viết hoa |
| type="i" | Các mục trong danh sách sẽ được đánh số bằng số la mã viết thường |
Các con số:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Chữ viết hoa:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Chữ viết thường:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Số La Mã viết hoa:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Số La Mã viết thường:
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Đếm danh sách kiểm soát
Theo mặc định, danh sách có thứ tự sẽ bắt đầu đếm từ 1. Nếu bạn muốn bắt đầu đếm từ một số được chỉ định, bạn có thể sử dụngstartthuộc tính:
Thí dụ
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Danh sách HTML lồng nhau
Các danh sách có thể được lồng vào nhau (danh sách bên trong danh sách):Thí dụ
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
Lưu ý: Mục danh sách (
<li>) có thể chứa danh sách mới và các phần tử HTML khác, như hình ảnh và liên kết, v.v.Tóm tắt chương
- Sử dụng
<ol>phần tử HTML để xác định danh sách có thứ tự - Sử dụng
typethuộc tính HTML để xác định kiểu đánh số - Sử dụng
<li>phần tử HTML để xác định một mục danh sách - Danh sách có thể được lồng vào nhau
- Các mục danh sách có thể chứa các phần tử HTML khác
HTML Danh sách Khác
HTML cũng hỗ trợ danh sách mô tả.
Danh sách mô tả HTML
Danh sách mô tả là danh sách các thuật ngữ, với mô tả của từng thuật ngữ.Các
<dl>thẻ định nghĩa danh sách mô tả, thẻ định nghĩa thuật ngữ (tên), và các thẻ mô tả từng hạn: <dt> <dd>
Thí dụ
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Tóm tắt chương
- Sử dụng
<dl>phần tử HTML để xác định danh sách mô tả - Sử dụng
<dt>phần tử HTML để xác định thuật ngữ mô tả - Sử dụng
<dd>phần tử HTML để mô tả thuật ngữ trong danh sách mô tả
Thẻ danh sách HTML
| Tag | Description |
|---|---|
| <ul> | Defines an unordered list |
| <ol> | Defines an ordered list |
| <li> | Defines a list item |
| <dl> | Defines a description list |
| <dt> | Defines a term in a description list |
| <dd> | Describes the term in a description list |
Quay lại bài trước BACK
Chủ đề Tương tự
Không có đánh giá nào.
Viết một đánh giá.
Để bình luận vui lòng Đăng nhập tài khoản ! hoặcĐăng ký mới!
S - Tech
Điện máy
Khoa học
Cuộc sống
Ô tô, Xe máy
Tiện ích
Công nghệ
Video
