By GokiSoft.Com| 18:07 24/05/2020|
Tài Liệu HTML

HTML Unordered Lists - Danh sách không theo thứ tự trong HTML


Thẻ <ul> trong HTML định nghĩa một danh sách không theo thứ tự(danh sách chấm).

Danh sách không theo thứ tự trong HTML


Một danh sách không theo thứ tự sẽ bắt đầu bằng thẻ  <ul> . Mỗi danh mục sẽ bắt đầu với thẻ  <li> .

Các danh mục sẽ được đánh dấu với các chấm đen nhỏ theo mặc định:

ví dụ

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list</h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>
</html>



Danh sách không theo thứ tự trong HTML - Chọn dấu danh mục


Thuộc tính CSS list-style-type được dùng để định nghĩa phong cách của dấu danh mục:

Giá trịMô tả
discĐặt các dấu danh mục thành một chấm đen (mặc định)
circleĐặt các dấu danh mục thành một hình tròn
squareĐặt các dấu danh mục thành một hình vuông
noneCác danh mục sẽ không được dánh dấu

ví dụ - disc

<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Disc Bullets</h2>

<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>
</html>


ví dụ - circle

<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Circle Bullets</h2>

<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>
</html>


ví dụ - square

<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Square Bullets</h2>

<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>


ví dụ - none

<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<!DOCTYPE html>
<html>
<body>

<h2>Unordered List without Bullets</h2>

<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>
</html>



Các danh sách HTML lồng nhau


Các danh sách có thể được lồng nhau (danh sách bên trong danh sách):

ví dụ

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
<!DOCTYPE html>
<html>
<body>

<h2>A Nested List</h2>
<p>List can be nested (lists inside lists):</p>

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h2>A Nested List</h2>
<p>List can be nested (lists inside lists):</p>

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

Ghi chú: Các danh mục có thể chứa các danh sách mới, và các thành phần HTML khác, như hình ảnh và đường dẫn, etc.




Danh sách nằm ngang với CSS


Các danh sách HTML có thể được tạo kiểu với rất nhiều cách khác nhau với CSS.

Một cách thông dụng là tạo kiểu một cho một danh sách theo chiều ngang, để tạo một menu định hướng:

ví 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>
<!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>

<h2>Navigation Menu</h2>
<p>In this example, we use CSS to style the list horizontally, to create a navigation menu:</p>

<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>

Ghi chú: Bạn có thể học thêm nhiều hơn về CSS trong hướng dẫn về CSS.




Tóm tắt chương


  • Sử dụng thành phần HTML <ul> để định nghĩa một danh sách không có thứ tự
  • Sử dụng thuộc tính CSS list-style-type để định nghĩa dấu của danh mục
  • Sử dụng thành phần HTML <li> định nghĩa một danh mục
  • Cách danh sách có thể lồng bên trong các danh sách
  • Các danh mục có thể chứa các thành phần HTML khác
  • Sử dụng thuộc tính CSS float:left hay display:inline để hiển thị một danh sách theo chiều ngang



Tags: