Có máy loại danh sách trong html

Nội dung

• Danh sách trong HTML
  • Danh sách không sắp xếp và danh sách sắp xếp trong HTML
    • Danh sách không sắp xếp:
    • Danh sách sắp xếp:
  • Danh sách không sắp xếp trong HTML
    • Ví dụ 1:
  • Danh sách không sắp xếp trong HTML – Các kiểu thuộc tính
    • Disc:
    • Circle:
    • Square:
    • None:
  • Danh sách sắp xếp trong HTML
    • Ví dụ 6:
  • Danh sách sắp xếp – Các kiểu thuộc tính
    • Kiểu số:
    • Kiểu chữ in hoa:
    • Kiểu chữ thường:
    • Kiểu số La mã hoa:
    • Kiểu số La mã thường:
  • Mô tả danh sách trong HTML
    • Ví dụ 12:
  • Danh sách lồng nhau trong HTML
    • Ví dụ 13:
  • Danh sách theo chiều ngang
    • Ví dụ 14:
    • Ví dụ 15
  • Tóm tắt bài học:
  • Danh sách thẻ HTML

Danh sách trong HTML

Danh sách không sắp xếp và danh sách sắp xếp trong HTML

Danh sách không sắp xếp:

• Mục a
• Mục b
• Mục c
• Mục d

Danh sách sắp xếp:

1. Mục 1
2. Mục 2
3. Mục 3
4. Mục 4

Danh sách không sắp xếp trong HTML

Danh sách không sắp xếp theo thứ tự bắt đầu với thẻ 

. Mỗi mục trong danh sách bắt đầu với thẻ 
• .

  Các mục của danh sách sẽ được đánh dấu bằng các kí hiệu đầu mục [ mặc định là vòng tròn nhỏ màu đen].

  Ví dụ 1:

  
  Cà phê
  Trà
  Sữa
  

  Xem ví dụ 1

  Danh sách không sắp xếp trong HTML – Các kiểu thuộc tính

  Thuộc tính style có thể được thêm vào danh sách không sắp xếp, để định kiểu cua đầu mục: 

  KiểuMô tả

  list-style-type:disc	Danh sách các mục sẽ được đánh dấu mặc định
  list-style-type:circle	Danh sách các mục sẽ được đánh dấu bằng vòng tròn
  list-style-type:square	Danh sách các mục sẽ được đánh dấu bằng hình vuông
  list-style-type:none	Danh sách các mục sẽ không được đánh dấu

  Disc:

  
  Cà phê
  Trà
  Sữa
  

  Xem ví dụ 2

  Circle:

  
  Cà phê
  Trà
  Sữa
  

  Xem ví dụ 3

  Square:

  
  Cà phê
  Trà
  Sữa
  

  Xem ví dụ 4:

  None:

  
  Cà phê
  

• Trà
  Sữa
  

  Xem ví dụ 5

  Danh sách sắp xếp trong HTML

  Danh sách sắp xếp thứ tự bắt đầu bằng thẻ 

  . Mỗi mục trong danh sách bắt đầu bằng thẻ 
  1. .

     Danh sách các mục sẽ được đánh dấu bằng các số:

     Ví dụ 6:

     
     Cà phê
     Trà
     Sữa
     

     Xem ví dụ 6

     Danh sách sắp xếp – Các kiểu thuộc tính

     Thuộc tính type có thể được thêm vào danh sách sắp xếp, để xác định kiểu của đầu mục dấu:

     KiểuMô tả

     type=”1″	Danh sách các mục sẽ được đánh số với các số ở đây là mặc định
     type=”A”	Danh sách các mục sẽ được đánh số với các chữ hoa
     type=”a”	Danh sách các mục sẽ được đánh số với các chữ thường
     type=”I”	Danh sách các mục sẽ được đánh số với  số La mã hoa
     type=”i”	Danh sách các mục sẽ được đánh số với số La mã thường

     Kiểu số:

     
     Cà phê
     Trà
     Sữa
     

     Xem ví dụ 7

     Kiểu chữ in hoa:

     
     Cà phê
     Trà
     

  2. Sữa
     

     Xem ví dụ 8

     Kiểu chữ thường:

     
     Cà phê
     Trà
     Sữa
     

     Xem ví dụ 9

     Kiểu số La mã hoa:

     
     Cà phê
     Trà
     Sữa
     

     Xem ví dụ 10

     Kiểu số La mã thường:

     
     Cà phê
     Trà
     Sữa
     

     Xem ví dụ 11

     Mô tả danh sách trong HTML

     Ngoài 2 kiểu danh sách sắp xếp và không sắp xếp như ở trên thì HTML còn hỗ trợ thêm kiểu danh sách mô tả.

     Danh sách mô tả là kiểu hiển thị danh sách mà các mục con của nó sẽ không được đánh dấu thứ tự, nhưng sẽ có kèm theo một đoạn miêu tả..

     Thẻ  Xác định danh sách mô tả, thẻ  Xác định tên danh sách, và thẻ  xác định mô tả cho danh sách.

     Ví dụ 12:

     
     Cà phê
     – một loai đồ uống nóng màu đen
     Sữa
     – một loại đồ uống lạnh màu trắng
     

     Xem ví dụ 12

     Danh sách lồng nhau trong HTML

     Danh sách có thể được lồng trong nhau [Danh sách bên trong danh sách]:

     Ví dụ 13:

     
     Cà phê
     Trà
     
     Trà đen
     Trà xanh
     
     
     Sữa
     

     Xem ví dụ 13

     Danh sách mục có thể chứa danh sách mới và các thẻ HTML khác như các ảnh, các liên kết, v.v.

     Danh sách theo chiều ngang

     Danh sách trong HTML được định kiểu theo nhiều cách khác nhau  với CSS.

     Một trong những kiểu phổ biến là tạo một kiểu danh sách hiển thị theo chiều ngang:

     Ví dụ 14:

     
     
     
     ul#menu li {
     display:inline;
     }
     
     Danh sách theo chiều ngang
     HTML
     CSS
     JavaScript
     PHP
     
     

     Xem ví dụ 14

     Bổ xung một chút CSS vào kiểu danh sách, bạn có thể thay đổi và thấy nó như một menu:

     Ví dụ 15

     ul#menu {
     padding: 0;
     }
     ul#menu li {
     display: inline;
     }
     ul#menu li a {
     background-color: black;
     color: white;
     padding: 10px 20px;
     text-decoration: none;
     border-radius: 4px 4px 0 0;
     }
     ul#menu li a:hover {
     background-color: orange;
     }

     Xem ví dụ 15

     Tóm tắt bài học:

     • Sử dụng phần tử 
        trong HTML để định nghĩa một danh sách không sắp xếp
       • Sử dụng thuộc tính style trong HTML để xác định kiểu đầu mục
       • Sử dụng phần tử trong HTML để định nghĩa một danh sách sắp xếp
       • Sử dụng thuộc tính type trong HTML để xác định kiểu số dùng cho đầu mục
       • Sử dụng phần tử
       •  trong HTML để xác định các mục của danh sách
       • Sử dụng phần tử  trong HTML để định nghĩa một danh sách mô tả
       • Sử dụng phần tử  trong HTML để xác định tên trong danh sách mô tả
       • Sử dụng phần tử  trong HTML để xác định dữ liệu mô tả
       • Các danh sách có thể lồng nhau
       • Các mục của danh sách có thể chứa các phần tử khác của HTML
       • Sử dụng thuộc tính display:inline trong CSS để hiển thị danh sách theo chiều ngang

       Danh sách thẻ HTML

       ThẻMô tả

       	Định nghĩa danh sách không sắp xếp
       	Định nghĩa danh sách sắp xếp
       	Định nghĩa các mục của danh sách
       	Định nghĩa danh sách mô tả
       	Xác định các thuật ngữ [ tên] trong danh sách mô tả
       	Xác định các mô tả trong danh sách đó