Tạo danh sách trong HTML WDI Blog

Kĩ thuật tạo danh sách trong HTML (List)9 phút đọc

Kĩ thuật tạo danh sách trong HTML (list) là một trong những kĩ thuật cơ bản và thường xuyên được sử dụng ở hầu hết các dự án.Có ba loại danh sách chính đó là Ordered List, Unordered List Description List.

Bài viết này mình sẽ giải thích và hướng dẫn bạn tạo 3 loại danh sách này trong HTML, đồng thời mình cũng sẽ giới thiệu đến bạn cách thay đổi kí hiệu đầu mỗi mục con trong danh sách.

Không dài dòng nữa, hãy cùng mình tìm hiểu ngay nhé.

Tạo danh sách kiểu Unordered 

Danh sách kiểu Unordered là kiểu danh danh sách mà các mục con bên trong nó không được đánh số thứ tự mà chỉ hiển thị cùng một kí hiệu phía đầu.

HTML

Cấu trúc của một danh sách kiểu Unordered là các mục con sẽ chứa trong thẻ <li> và toàn bộ các thẻ <li>này sẽ được bao bọc bởi thẻ <ul>.

Kết quả

Tạo danh sách trong HTML

Mặc định kiểu kí hiệu đầu mỗi mục con khi sử dụng kiểu danh sách Unordered là dấu chấm tròn đen như kết quả ví dụ trên đây.Các mục con sẽ nằm thẳng đều nhau theo chiều dọc và mỗi mục con sẽ chiếm một hàng của danh sách.

Tạo danh sách kiểu Ordered

Danh sách kiểu Ordered là kiểu danh danh sách mà các mục con bên trong nó sẽ được sắp xếp theo một thứ tự là số hoặc chữ cái nhất định.

HTML

Cấu trúc của kiểu danh sách Ordered là các mục con sẽ nằm trong thẻ <li> và những thẻ <li> này được bao bọc bởi thẻ <ol>.

Kết quả

Tạo danh sách trong HTML 02

Kết quả khi sử dụng kiểu danh sách Ordered sẽ như hình ảnh trên đây.Đầu mỗi mục con mặc định sẽ là kí hiệu số tăng dần từ số 1.

Tạo danh sách nối tiếp trong Ordered

Trong thực tế khi sử dụng kiểu danh sách Ordered đôi khi sẽ gặp trường hợp giữa chừng danh sách sẽ bị ngắt quãng bởi một tiêu đề nào đó.

Nếu bạn muốn các mục con tiếp tục được đánh số liền mạch thì bạn phải sử dụng tới thuộc tính start=”?”.Dấu ? ở đây đại diện cho số thứ tự sẽ bắt đầu ở đoạn danh sách tiếp theo.

HTML

Trên đây là ví dụ HTML mình đã soạn sẵn trong trường hợp này.Đoạn danh sách bên trên gồm 4 mục con nên đoạn danh sách tiếp theo sẽ bắt đầu bằng số 5.Vậy ta chỉ cần thêm thuộc tính start=”5″ vào bên trong thẻ <ol> của danh sách phía bên dưới là xong.

Kết quả 

Tạo danh sách trong HTML 03

Trên đây là kết quả sau khi thực hành đoạn code HTML trên.

Hiển thị danh sách kiểu Description 

Trong thời gian gần đây danh sách kiểu Description đang được sử dụng rộng rãi, đặc biệt là website của những cửa hàng đồ ăn hay quần áo.

Danh sách kiểu Description này bao gồm từ khóa chính và một đoạn văn bản ngắn thuyết minh cho nó đi kèm theo sau.

HTML

Cấu trúc của danh sách kiểu Description này là từ khóa chính sẽ nằm bên trong thẻ <dt> và đoạn văn bản thuyết minh cho nó sẽ nằm bên trong thẻ <dd>.Toàn bộ từ khóa chính và cả đoạn văn bản thuyết minh đều được bao bọc bên trong thẻ <dl>.

Nhìn vào ví dụ code HTML trên đây chắc bạn sẽ hiểu ngay cấu trúc của loại danh sách này.

Kết quả

Tạo danh sách trong HTML 04

Trên đây là kết quả khi thực hành đoạn code HTML của ví dụ trên.

Định dạng lại danh sách kiểu Description

Mặc định thì danh sách kiểu Description có từ khóa chính và đoạn văn miêu tả nằm trên những dòng khác nhau.Trong thiết kế và làm website bạn sẽ thường xuyên gặp trường hợp một đoạn văn bản giải thích cho một từ khóa nào đó và toàn bộ chúng đều nằm trên cùng một hàng với nhau.

HTML

Để hiện thực hóa được ý tưởng trên thì chúng ta sẽ dùng tới CSS để định dạng lại.Trên đây là đoạn code HTML mẫu trong ví dụ này.

CSS

Thuộc tính CSS mấu chốt ở đây là float: left; nằm bên trong định dạng thẻ <dt>.Còn những thuộc tính khác mình chỉ thêm vào sao cho ví dụ dễ nhìn nhất giúp bạn hình dung tốt hơn thôi.

Kết quả

Tạo danh sách trong HTML 05

Kết quả thực hành của ví dụ này như hình ảnh trên đây.Bạn có thể thấy rằng định dạng lại thế này dễ nhìn hơn kiểu mặc định rất nhiều phải không nào.

Thay đổi kí hiệu đầu danh sách Unordered 

Trong kiểu danh sách Unordered bạn có thể thay đổi kí hiệu phía đầu mỗi mục con.Cách thay đổi rất đơn giản đó là khai báo kí hiệu muốn dùng bên trong thuộc tính CSS.

HTML

Trên đây là đoạn code HTML mẫu trong ví dụ này.Đoạn danh sách đầu tiên mình sẽ thêm classlist-1 và ở đoạn danh sách thứ hai mình thêm classlist-2.

CSS

Trong CSS của list-1 ở thuộc tính list-style mình nhập luôn kí tự ngẫu nhiên mà mình muốn dùng cho đầu mỗi mục con trong danh sách là dấu “+”.Bạn có thể nhập bất kì kí tự nào trên bàn phím đều được cả.

Còn ở trong CSS của list-2 ở thuộc tính list-style mình dùng giá trị có sẵn của CSS là square.Ngoài square thì còn có một số giá trị khác thường xuyên được sử dụng trong thiết kế website đó là :

  • dist : đây là giá trị mặc định, dấu chấm tròn màu đen
  • circle : dấu chấm tròn viền đen nền trắng
  • none : không có kí tự xuất hiện đầu mục con

Kết quả

Tạo danh sách trong HTML 06

Kết quả sau khi thực hành ví dụ ở phần này sẽ như hình ảnh trên đây.Mình chưa thử hết các giá trị của thuộc tính trong ví dụ này nên bạn hãy copy code về rồi thực hành xem nhé.

Thay đổi kí hiệu đầu danh sách Ordered

Tương tự với kiểu danh sách Unordered thì với kiểu danh sách Ordered bạn cũng có thể thay đổi kí hiệu đầu mỗi mục con thông qua thiết lập giá trị thuộc tính CSS.

HTML

Ở ví dụ lần này mình sẽ giữ nguyên dạng mặc định ở danh sách đầu tiên và áp dụng thuộc tính CSS ở danh sách tiếp theo.Như bạn thấy trong đoạn code HTML ví dụ ở trên, đoạn danh sách thứ hai mình có thêm class là list.Mình sẽ khai báo CSS thông qua class này.

CSS

Thuộc tính CSS mình sử dụng trong trường hợp này là list-style-type và giá trị mình truyền vào cho nó là decimal-leading-zero.Với giá trị này thì danh sách sẽ được tự động thêm số 0 vào đầu mỗi mục con bên cạnh giá trị mặc định.

Ngoài giá trị decimal-leading-zero, còn có một số giá trị sau rất hay được sử dụng trong thực tế.Bạn có thể copy code về và thực hành để xem sự khác biệt giữa chúng.

  • lower-alpha : kí hiệu chữ cái in thường
  • upper-alpha : kí hiệu chữ cái in hoa
  • lowr-roman : kí hiệu la mã in thường
  • upper-roman : kí hiệu la mã in hoa

Kết quả

Tạo danh sách trong HTML 07

Bạn có thể thấy được sự khác biệt khi thêm thuộc tính list-style-type: decimal-leading-zero; và khi ở chế độ mặc định qua hình ảnh minh họa trên đây.

Kết luận

Kĩ thuật tạo danh sách trong HTML là một kĩ thuật đơn giản như bạn thấy qua các ví dụ ở trên.Tuy nhiên đây là một trong những kĩ thuật quan trọng nhất trong HTML.

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x