Trong bài này chúng ta sẽ tìm hiểu thẻ li trong HTML, đây là thẻ nằm bên trong thẻ ol hoặc ul, dùng để tạo ra các phần tử cho danh sách.
1. Thẻ li trong HTML dùng làm gì?
Thẻ li có chức năng định nghĩa một mục trong danh sách. Nó là một thẻ con, nằm bên trong hai thẻ cha là ol hoặc ul. Khi bạn cố tình đặt nó đứng riêng một mình thì sẽ bị lỗi sai cấu trúc HTML.
Sử dụng thẻ li trong các danh sách được sắp xếp (thẻ ol), danh sách không được sắp xếp (thẻ ul) và trong các danh sách menu (thẻ menu).
Cú pháp nằm trong thẻ ul như sau:
Bài viết này được đăng tại [kiso.vn]
<ul>
<li>Phần tử 1</li>
<li>Phần tử 2</li>
<li>Phần tử 3</li>
<li>Phần tử 4</li>
</ul>Cú pháp nằm trong thẻ ol như sau:
<ol>
<li>Phần tử 1</li>
<li>Phần tử 2</li>
<li>Phần tử 3</li>
<li>Phần tử 4</li>
</ol>2. Cách sử dụng thẻ li trong HTML
Ví dụ 1: Sử dụng thẻ li kết hợp với thẻ ol để tạo danh sách các khóa học.
<!DOCTYPE html>
<html>
<head>
<title>Học lập trình miễn phí tại kiso.vn</title>
<meta charset="utf-8">
</head>
<body>
<h1>Học lập trình miễn phí tại kiso.vn</h1>
<ol>
<li>PHP</li>
<li>Javascript</li>
<li>Css</li>
<li>HTML</li>
</ol>
</body>
</html>Kết quả:
3. Định dạng thẻ li trong CSS
Nếu bạn muốn sử dụng CSS để thay đổi định dạng cho thẻ li thì có thể sử dụng cú pháp như sau:
<style>
ul li{
}
// hoặc
ol li{
}
</style>Ý nghĩa của nó là: Thiết lập cho tất cả các thẻ li nằm trong thẻ ul, tương tự cho trường hợp thứ 2 là thẻ ol.
Nếu bạn muốn bỏ đi các ký tự đặc trước các phần tử thì sử dụng thuộc tính CSS sau:
<style>
ul li{
list-style: none
}
</style>4. Thuộc tính của thẻ li trong HTML
Thẻ li được hỗ trợ bởi hầu hết các thuộc tính thuộc nhóm Global Attributes in HTML.
Trình duyệt hỗ trợ:
- Chrome
- Firefox
- IE
- Safari
- Opera
Trên là thông tin cũng như cách sử dụng thẻ ul.
Bài viết liên quan
[CSF-2] Một số thiết lập CSF, LFD
Hôm nay mình sẽ thực hiện một số thiết lập trên CSF Mở file config để sửa đổi một số tính năng dưới /etc/csf/csf.conf Nội dung chính1. Thẻ li trong HTML dùng làm gì?2. Cách...
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
Nội dung chính1. Thẻ li trong HTML dùng làm gì?2. Cách sử dụng thẻ li trong HTML3. Định dạng thẻ li trong CSS4. Thuộc tính của thẻ li trong HTML1. Khái niệm CSF: CSF (ConfigServer...
Sử dụng SSH Key với Gitlab và Github
Bài viết này mình sẽ hướng dẫn các bạn tạo ssh key cho Gitlab và Github SSH là gì? Secure Socket Shell là một giao thức mạng dùng để thiết lập kết nối mạng một...
Directory traversal vulnerabilities (phần 4)
Nội dung chính1. Thẻ li trong HTML dùng làm gì?2. Cách sử dụng thẻ li trong HTML3. Định dạng thẻ li trong CSS4. Thuộc tính của thẻ li trong HTMLV. Phân tích và khai thác...
Directory traversal vulnerabilities (phần 3)
Nội dung chính1. Thẻ li trong HTML dùng làm gì?2. Cách sử dụng thẻ li trong HTML3. Định dạng thẻ li trong CSS4. Thuộc tính của thẻ li trong HTMLV. Phân tích và khai thác...
Directory traversal vulnerabilities (phần 2)
Nội dung chính1. Thẻ li trong HTML dùng làm gì?2. Cách sử dụng thẻ li trong HTML3. Định dạng thẻ li trong CSS4. Thuộc tính của thẻ li trong HTMLIII. Vì sao lỗ hổng Directory...