NEWS | Kiến thức về HTML (P15): Các thẻ danh sách có thứ tự và không có thứ tự

Kiến thức về HTML (P15): Các thẻ danh sách có thứ tự và không có thứ tự

Bạn đang xem bài viết Kiến thức về HTML (P15): Các thẻ danh sách có thứ tự và không có thứ tự. Một vài liên kết tham khảo: thiết kế web tp hcm công ty thiết kế web

Để thiết kế web tốt hơn, chúng ta sẽ tìm hiểu thẻ danh sách có thứ tự và không có thứ tự trong bài hôm nay nhé.

  • 1 Danh sách có thứ tự
      • 1.0.1 HTML viết
      • 1.0.2 Hiển thị trình duyệt:
  • 2 Danh sách không có thứ tự
      • 2.0.1 HTML viết
      • 2.0.2 Hiển thị trình duyệt:
  • 3 Cấu trúc thẻ danh sách có thứ tự và không có thứ tự
  • 4 Một số cấu trúc của danh sách có thứ tự và không có thứ tự
      • 4.0.1 HTML viết
      • 4.0.2 Hiển thị trình duyệt:
      • 4.0.3 HTML viết
      • 4.0.4 Hiển thị trình duyệt:
      • 4.0.5 HTML viết
      • 4.0.6 Hiển thị trình duyệt:
      • 4.0.7 Người viết đánh giá

Danh sách có thứ tự

Để thể hiện danh sách có thứ tự ta sử dụng cặp thẻ: <ol></ol> và <li></li>, trong đó:

  • <ol></ol> là viết tắt của chữ “ordered list” có nghĩa là danh sách có thứ tự.
  • <li></li> viết tắt của chữ “list item” có nghĩa là mục của danh sách.

Danh sách sau đây gọi là danh sách có thứ tự:

1s

HTML viết

2S

Hiển thị trình duyệt:

3S

 

Danh sách không có thứ tự

Để thể hiện danh sách không có thứ tự ta sử dụng cặp thẻ: <ul></ul> và <li></li>, trong đó:

  • <ul></ul> là viết tắt của chữ: unordered list có nghĩa là danh sách không có thứ tự
  • <li></li> viết tắt của chữ: list item có nghĩa là mục của danh sách.

Danh sách sau đây gọi là danh sách không có thứ tự:

1R

HTML viết

2R

Hiển thị trình duyệt:

3R

Cấu trúc thẻ danh sách có thứ tự và không có thứ tự

Cấu trúc thể hiện thẻ danh sách có thứ tự và không có thứ tự là tương tự nhau.

Cấu trúc phải theo các nguyên tắc sau đây:

  • Lúc nào cũng phải tồn tại 1 cặp thẻ, không thể thiếu một trong 2:
    • Đối với danh sách có thứ tự, phải tồn tại cặp thẻ: <ol></ol>, <li></li>.
    • Đối với danh sách không có thứ tự, phải tồn tại cặp thẻ: <ul></ul>, <li></li>.
  • Bên trong thẻ <ol></ol> (hoặc <ul></ul>) chỉ chứa trực tiếp một thẻ duy nhất <li></li>.
  • Bên trong thẻ <li></li> chứa được hầu hết các thẻ HTML/XHTML, tuy nhiên không được chứa một số thẻ sau đây: <html></html>, <meta></meta>, <body></body>, <title></title>, <link></link>. Và một số thẻ không nên chứa như: <style></style>, <script></script>.

5R

  • Bên trong thẻ <ol></ol> (hoặc <ul></ul>) chỉ chứa trực tiếp thẻ <li></li>, không được xen kẻ bất kỳ thẻ nào khác, những cấu trúc như bên dưới đây là sai, không đúng chuẩn W3C:

6R

Một số cấu trúc của danh sách có thứ tự và không có thứ tự

Cấu trúc <ol></ol> lồng bên trong <ol></ol>

HTML viết

7R

Hiển thị trình duyệt:

8R

Cấu trúc <ul></ul> lồng bên trong <ul></ul>

HTML viết

10R

Hiển thị trình duyệt:

11R

Cấu trúc <ul></ul> lồng bên trong <ol></ol>

HTML viết

12R

Hiển thị trình duyệt:

13R

Xem thêm:

  • Kiến thức về HTML (P1): Giới thiệu HTML và tạo trang web bằng HTML
  • Kiến thức về HTML (P2): HTML Elements
  • Kiến thức về HTML (P3): Hướng dẫn tạo bảng HTML
  • Kiến thức về HTML (P4): Tag mới trong HTML
  • Kiến thức về HTML (P5): Đơn vị trong HTML và CSS
  • Kiến thức về HTML (P6): HTML Symbols-mã kí tự chữ
  • Kiến thức về HTML (P7): HTML Symbols-mã kí tự số
  • Kiến thức về HTML (P8): Thẻ định dạng tiêu đề
  • Kiến thức về HTML (P9): Thẻ định dạng đoạn văn bản
  • Kiến thức về HTML (P10): Thẻ phân chia khu vực
  • Kiến thức về HTML (P11): Thẻ <!Doctype> và HTML/XHTML theo giá trị DTD
  • Kiến thức về HTML (P12): Cách tạo và hiển thị một file HTML
  • Kiến thức về HTML (P13): Cấu trúc cơ bản của HTML
  • Kiến thức về HTML (P14): Thẻ xác định danh sách trong HTML
  • Người viết đánh giá

  • Rated 5 stars
  • Tuyệt vời
  • 100%

  • Reviewed by:
  • Published on: 01/07/2016
  • Last modified: 01/07/2016


Nguồn bài viết: Kiến thức về HTML (P15): Các thẻ danh sách có thứ tự và không có thứ tự