tao danh sach trong html

Danh sách trong HTML HTML cung cấp cho người lập trình web 3 cách để xác định danh sách các thông tin.. Danh sách chưa qua sắp xếp trong HTML - Thẻ ul trong HTML Là loại danh sách mà c

Trang 1

Danh sách trong HTML

HTML cung cấp cho người lập trình web 3 cách để xác định danh sách các thông tin Tất cả các danh sách phải chứa một hoặc nhiều phần tử list Danh sách có thể gồm:

• <ul> - Một danh sách chưa qua sắp xếp Nó được sắp xếp bằng cách sử dụng các

bullet thường

• <ol> - Một danh sách đã qua sắp xếp Nó sử dụng một lược đồ số để liệt kê danh

sách

• <dl> - Danh sách định nghĩa trong HTML Sắp xếp danh sách theo cách tương tự

như chúng được sắp xếp trong từ điển

Danh sách chưa qua sắp xếp trong HTML - Thẻ ul trong

HTML

Là loại danh sách mà chưa được sắp qua thứ tự Để tạo loại danh sách này bạn sử dụng

thẻ<ul> Mỗi mục trong danh sách được kết nối với một bullet

Ví dụ

<!DOCTYPE html> <html> <head> <title> Vi du danh sach chua qua sap xep </title>

</head> <body> <ul> <li> Beetroot </li> <li> Ginger </li> <li> Potato </li>

<li> Radish </li> </ul> </body> </html>

Kết quả là như sau:

• Beetroot

• Ginger

• Potato

• Radish

Thuộc tính type trong HTML

Bạn có thể sử dụng thuộc tính type cho thẻ <ul> để xác định kiểu của bullet mà bạn thích

Theo mặc định nó có hình dạng chiếc đĩa tròn (disc) Có các tùy chọn kiểu cho bạn sử dụng:

Trang 2

Ví dụ

Ví dụ sau chúng tôi sử dụng <ul type="square">

</head> <body> <ul type ="square"> <li> Beetroot </li> <li> Ginger </li>

<li> Potato </li> <li> Radish </li> </ul> </body> </html>

Kết quả là:

§ Beetroot

§ Ginger

§ Potato

§ Radish

Ví dụ

Sau đây chúng tôi sử dụng <ul type="disc"> trong thư viện HTML:

</head> <body> <ul type ="disc"> <li> Beetroot </li> <li> Ginger </li>

Kết quả hiển thị là:

• Beetroot

• Ginger

• Potato

• Radish

Ví dụ

Ví dụ sau chúng tôi sử dụng <ul type="circle"> trong thư viện HTML:

</head> <body> <ul type ="circle"> <li> Beetroot </li> <li> Ginger </li>

Nó sẽ tạo ra kết quả sau:

o Beetroot

Trang 3

Danh sách đã qua sắp xếp trong HTML

Nếu bạn được yêu cầu đặt các mục trong danh sách theo thứ tự số thay vì sử dụng các bullet thì loại danh sách đã qua sắp xếp sẽ được sử dụng Danh sách này được tạo bởi

thẻ<ol> Thứ tự số bắt đầu từ 1 và lượng gia thêm một cho các mục tiếp theo với thẻ <li>

Ví dụ

<!DOCTYPE html> <html> <head> <title> Vi du danh sach da qua sap xep </title>

</head> <body> <ol> <li> Beetroot </li> <li> Ginger </li> <li> Potato </li>

<li> Radish </li> </ol> </body> </html>

Nó sẽ tạo ra kết quả sau:

1 Beetroot

2 Ginger

3 Potato

4 Radish

Thuộc tính type trong HTML

Bạn có thể sử dụng thuộc tính type cho thẻ <ol> để xác định kiểu của loại thứ tự số mà

bạn thích Theo mặc định, nó là một số Dưới đây là các tùy chọn có thể:

<ol type ="1"> - Gia tri so mac dinh <ol type ="I"> - Gia tri so La Ma dang chu hoa <ol type ="i"> - Gia tri so La Ma dang chu thuong <ol type ="a"> - Chu cai thuong <ol type ="A"> - Chu cai hoa

Ví dụ

Ví dụ sau chúng tôi sử dụng <ol type="1">

</head> <body> <ol type ="1"> <li> Beetroot </li> <li> Ginger </li>

<li> Potato </li> <li> Radish </li> </ol> </body> </html>

Kết quả là:

1 Beetroot

2 Ginger

3 Potato

4 Radish

Trang 4

Ví dụ

Sau đây chúng tôi sử dụng <ol type="I">

</head> <body> <ol type ="I"> <li> Beetroot </li> <li> Ginger </li>

Kết quả khi chạy đoạn code trên là:

I Beetroot

II Ginger

III Potato

IV Radish

Ví dụ

Tại đây chúng tôi sử dụng <ol type="i">

</head> <body> <ol type ="i"> <li> Beetroot </li> <li> Ginger </li>

Khi chạy đoạn code trên, nó sẽ tạo ra kết quả sau:

i Beetroot

ii Ginger

iii Potato

iv Radish

Ví dụ

Ví dụ này chúng tôi sử dụng <ol type="A">

</head> <body> <ol type ="A"> <li> Beetroot </li> <li> Ginger </li>

Kết quả là:

A Beetroot

Trang 5

Ví dụ

Ở đây chúng tôi sử dụng <ol type="a">

</head> <body> <ol type ="a"> <li> Beetroot </li> <li> Ginger </li>

Nó tạo ra danh sách dạng sau:

a Beetroot

b Ginger

c Potato

d Radish

Thuộc tính start trong HTML

Bạn có thể sử dụng thuộc tính start cho thẻ <ol> để xác định điểm bắt đầu của dãy số bạn

muốn Dưới đây là các tùy chọn có thể:

<ol type ="1" start ="4"> - Day so bat dau tu 4 <ol type ="I" start ="4"> - Day so bat dau tu IV <ol type ="i" start ="4"> - Day so bat dau tu iv <ol type ="a" start ="4"> - Day chu cai bat dau tu d <ol type ="A" start ="4"> - Day chu cai bat dau tu D

Ví dụ

Ví dụ này chúng tôi sử dụng <ol type="i" start="4" >

</head> <body> <ol type ="i" start ="4"> <li> Beetroot </li>

<li> Ginger </li> <li> Potato </li> <li> Radish </li> </ol> </body> </html>

Nó sẽ tạo kết quả:

iv Beetroot

v Ginger

vi Potato

vii Radish

Trang 6

Danh sách định nghĩa trong HTML - Thẻ dl trong HTML

HTML và XHTML hỗ trợ một kiểu danh sách mà được gọi là Definition list - Danh sách định nghĩa, là nơi mà các mục được liệt kê dưới dạng giống một từ điển hoặc một quyển

bách khoa toàn thư Danh sách này là một cách tuyệt vời để hiển thị một bảng danh sách, bảng chú giải của các mục dữ liệu

Danh sách định nghĩa sử dụng 3 thẻ theo sau:

• <dl> - Xác định phần bắt đầu của danh sách

• <dt> - Một mục

• <dd> - Định nghĩa của mục

• </dl> - Xác định phần kết thúc của danh sách

Ví dụ

<!DOCTYPE html> <html> <head> <title> Vi du the dl trong HTML </title> </head>

<body> <dl> <dt><b> HTML </b></dt> <dd> La viet tat cua Hyper Text Markup

Language </dd> <dt><b> HTTP </b></dt> <dd> La viet tat cua Hyper Text Transfer Protocol </dd> </dl> </body> </html>

Kết quả khi chạy đoạn code trên là:

HTML

La viet tat cua Hyper Text Markup Language

HTTP

La viet tat cua Hyper Text Transfer Protocol

Loạt bài hướng dẫn học lập trình HTML cơ bản và nâng cao của chúng tôi dựa trên

nguồn tài liệu của: Tutorialspoint

Follow https://www.facebook.com/vietjackteam/ để tiếp tục theo dõi các loạt bài mới nhất

về Java,C,C++,Javascript,HTML,Python,Database,Mobile mới nhất của chúng tôi

Click http://click.accesstrade.vn/adv.php?rk=0002k20003u4 để đăng ký tham gia các khóa học trực tuyến về tất cả các ngôn ngữ lập trình, thiết kế web, photoshop tại tổ hợp công nghệ giáo dục TOPICA, cũng như để ủng hộ cho website vietjack.com

Định dạng
Số trang	6
Dung lượng	232,09 KB