Tạo danh sách trong HTML

HTML phân phối cho người lập trình website 3 phương pháp để xác nhận danh sách các thông tin. Toàn bộ các danh sách phải chứa một hoặc nhiều phần tử danh sách. Danh sách có thể gồm:

  • <ulvàgt; – Một danh sách không có thứ tự. Nó được xếp đặt bằng cách dùng các bullet thường.
  • <olvàgt; – Một danh sách đã qua xếp đặt. Nó sử dụng một lược đồ số để liệt kê danh sách.
  • <dlvàgt; – Danh sách khái niệm trong HTML. Xếp đặt danh sách theo cách cũng giống như chúng được xếp đặt trong từ điển.

Danh sách không có thứ tự 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ẻ <ulvàgt;. Mỗi mục trong danh sách được connect với một bullet.

Chẳng hạn

<htmlvàgt;
    <headvàgt;
        <titlevàgt;Vi du danh sach chua qua sap xepvàlt;/titlevàgt;
    </headvàgt;
    <bodyvàgt;
        <ulvàgt;
            <livàgt;Beetrootvàlt;/livàgt;
            <livàgt;Gingervàlt;/livàgt;
            <livàgt;Potatovàlt;/livàgt;
            <livàgt;Radishvàlt;/livàgt;
        </ulvàgt;
    </bodyvàgt;
</htmlvàgt;

Kết quả là như sau:

Tính chất type trong HTML

Bạn có thể sử dụng tính chất type cho thẻ <ulvàgt; để xác nhận kiểu của bullet mà bạn thích. Theo mặc định nó có hình dạng cái dĩa tròn (disc). Có các tùy chọn kiểu cho bạn sử dụng:

<ul type="square">
<ul type="disc">
<ul type="circle">

Chẳng hạn

Chẳng hạn sau chúng tôi sử dụng <ul type="square">

<htmlvàgt;
    <headvàgt;
        <titlevàgt;Vi du danh sach chua qua sap xepvàlt;/titlevàgt;
    </headvàgt;
    <bodyvàgt;
        <ul type="square">
            <livàgt;Beetrootvàlt;/livàgt;
            <livàgt;Gingervàlt;/livàgt;
            <livàgt;Potatovàlt;/livàgt;
            <livàgt;Radishvàlt;/livàgt;
        </ulvàgt;
    </bodyvàgt;
</htmlvàgt;

Kết quả là:

Xem Thêm  the Shift key

tao-danh-sach5a05caf27a01d

Chẳng hạn

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

<htmlvàgt;
    <headvàgt;
        <titlevàgt;Vi du danh sach chua qua sap xepvàlt;/titlevàgt;
    </headvàgt;
    <bodyvàgt;
        <ul type="disc">
            <livàgt;Beetrootvàlt;/livàgt;
            <livàgt;Gingervàlt;/livàgt;
            <livàgt;Potatovàlt;/livàgt;
            <livàgt;Radishvàlt;/livàgt;
        </ulvàgt;
    </bodyvàgt;
</htmlvàgt;

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

tao-danh-sach5a05cb3439f81

Chẳng hạn

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

<htmlvàgt;
    <headvàgt;
        <titlevàgt;Vi du danh sach chua qua sap xepvàlt;/titlevàgt;
    </headvàgt;
    <bodyvàgt;
        <ul type="circle">
            <livàgt;Beetrootvàlt;/livàgt;
            <livàgt;Gingervàlt;/livàgt;
            <livàgt;Potatovàlt;/livàgt;
            <livàgt;Radishvàlt;/livàgt;
        </ulvàgt;
    </bodyvàgt;
</htmlvàgt;

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

tao-danh-sach5a05cb7a47ebe

Danh sách đã qua xếp đặt 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 xếp đặt sẽ được sử dụng. Danh sách này được tạo bởi thẻ <olvàgt;. Thứ tự số xuất phát từ 1 & lượng gia thêm một cho các mục kế đến với thẻ <livàgt;.

Chẳng hạn

<htmlvàgt;
    <headvàgt;
        <titlevàgt;Vi du danh sach da qua sap xepvàlt;/titlevàgt;
    </headvàgt;
    <bodyvàgt;
        <olvàgt;
            <livàgt;Beetrootvàlt;/livàgt;
            <livàgt;Gingervàlt;/livàgt;
            <livàgt;Potatovàlt;/livàgt;
            <livàgt;Radishvàlt;/livàgt;
        </olvàgt;
    </bodyvàgt;
</htmlvàgt;

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

tao-danh-sach5a05cbcadcb7c

Tính chất type trong HTML

Bạn có thể sử dụng tính chất type cho thẻ <olvàgt; để xác nhận 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.

Chẳng hạn

Chẳng hạn sau chúng tôi sử dụng <ol type="1">

<htmlvàgt;
    <headvàgt;
        <titlevàgt;Vi du danh sach da qua sap xepvàlt;/titlevàgt;
    </headvàgt;
    <bodyvàgt;
        <ol type="1">
            <livàgt;Beetrootvàlt;/livàgt;
            <livàgt;Gingervàlt;/livàgt;
            <livàgt;Potatovàlt;/livàgt;
            <livàgt;Radishvàlt;/livàgt;
        </olvàgt;
    </bodyvàgt;
</htmlvàgt;

Kết quả là:

Xem Thêm  which is an embedder policy value

tao-danh-sach5a05cc31237b5

Chẳng hạn

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

<htmlvàgt;
    <headvàgt;
        <titlevàgt;Vi du danh sach da qua sap xepvàlt;/titlevàgt;
    </headvàgt;
    <bodyvàgt;
        <ol type="I">
            <livàgt;Beetrootvàlt;/livàgt;
            <livàgt;Gingervàlt;/livàgt;
            <livàgt;Potatovàlt;/livàgt;
            <livàgt;Radishvàlt;/livàgt;
        </olvàgt;
    </bodyvàgt;
</htmlvàgt;

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

tao-danh-sach5a05cc6da1b27

Chẳng hạn

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

<htmlvàgt;
    <headvàgt;
        <titlevàgt;Vi du danh sach da qua sap xepvàlt;/titlevàgt;
    </headvàgt;
    <bodyvàgt;
        <ol type="i">
            <livàgt;Beetrootvàlt;/livàgt;
            <livàgt;Gingervàlt;/livàgt;
            <livàgt;Potatovàlt;/livàgt;
            <livàgt;Radishvàlt;/livàgt;
        </olvàgt;
    </bodyvàgt;
</htmlvàgt;

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

tao-danh-sach5a05ccac39579

Chẳng hạn

Chẳng hạn này chúng tôi sử dụng <ol type="A">

<htmlvàgt;
    <headvàgt;
        <titlevàgt;Vi du danh sach da qua sap xepvàlt;/titlevàgt;
    </headvàgt;
    <bodyvàgt;
        <ol type="A">
            <livàgt;Beetrootvàlt;/livàgt;
            <livàgt;Gingervàlt;/livàgt;
            <livàgt;Potatovàlt;/livàgt;
            <livàgt;Radishvàlt;/livàgt;
        </olvàgt;
    </bodyvàgt;
</htmlvàgt;

Kết quả là:

tao-danh-sach5a05ccf0e5f5e

Chẳng hạn

Bước này chúng tôi sử dụng <ol type="a">

<htmlvàgt;
    <headvàgt;
        <titlevàgt;Vi du danh sach da qua sap xepvàlt;/titlevàgt;
    </headvàgt;
    <bodyvàgt;
        <ol type="a">
            <livàgt;Beetrootvàlt;/livàgt;
            <livàgt;Gingervàlt;/livàgt;
            <livàgt;Potatovàlt;/livàgt;
            <livàgt;Radishvàlt;/livàgt;
        </olvàgt;
    </bodyvàgt;
</htmlvàgt;

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

tao-danh-sach5a05cd2dd930d

Tính chất start trong HTML

Bạn có thể sử dụng tính chất start cho thẻ <olvàgt; để xác nhận điểm khởi đầu của dãy số bạn mong 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.

Chẳng hạn

Chẳng hạn này chúng tôi sử dụng <ol type="i" start="4" >

<htmlvàgt;
    <headvàgt;
        <titlevàgt;Vi du danh sach da qua sap xepvàlt;/titlevàgt;
    </headvàgt;
    <bodyvàgt;
        <ol type="i" start="4">
            <livàgt;Beetrootvàlt;/livàgt;
            <livàgt;Gingervàlt;/livàgt;
            <livàgt;Potatovàlt;/livàgt;
            <livàgt;Radishvàlt;/livàgt;
        </olvàgt;
    </bodyvàgt;
</htmlvàgt;

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

Xem Thêm  Top 14 kết quả tìm kiếm canon lbp 2900 driver for mac mới nhất 2022

tao-danh-sach5a05cd9af1ccd

Danh sách khái niệm trong HTML – Thẻ dl trong HTML

HTML & XHTML phụ trợ một kiểu danh sách mà được gọi là Definition danh sách – Danh sách khái niệm, 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 đó là một cách tuyệt vời để hiển thị một bảng danh sách, bảng ghi chú của các mục dữ liệu.

Danh sách khái niệm sử dụng 3 thẻ theo sau:

- <dlvàgt; - Xác nhận phần khởi đầu của danh sách
- <dtvàgt; - Một mục
- <ddvàgt; - Khái niệm của mục
- </dlvàgt; - Xác nhận phần chấm dứt của danh sách

Chẳng hạn

<htmlvàgt;
    <headvàgt;
        <titlevàgt;Vi du the dl trong HTML</titlevàgt;
    </headvàgt;
    <bodyvàgt;
        <dlvàgt;
            <dtvàgt;<bvàgt;HTML</bvàgt;</dtvàgt;
            <ddvàgt;La viet tat cua Hyper Text Markup Languagevàlt;/ddvàgt;
            <dtvàgt;<bvàgt;HTTPvàlt;/bvàgt;</dtvàgt;
            <ddvàgt;La viet tat cua Hyper Text Transfer Protocolvàlt;/ddvàgt;
        </dlvàgt;
    </bodyvàgt;
</htmlvàgt;

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

tao-danh-sach5a05cde45cfd8

Viết một bình luận