• Giới thiệu
  • Điều khoản
  • Khuyến mãi
  • Mã giảm giá
  • Series bài viết
    • Học WordPress cơ bản
    • Học HTML cơ bản
    • Học Excel cơ bản
  • Dịch vụ
    • Tạo web/blog với theme SuperHero
  • Liên hệ
Nguyễn Hùng
  • WordPress
    • Thủ thuật WordPress
    • WordPress Plugin
    • Themes WordPress
  • Lập trình web
    • Học HTML
  • MMO & Marketing
    • Kiếm tiền online
    • Marketing Online
    • Thủ thuật Seo
  • Tin Học VP
    • Thủ thuật Excel
    • Thủ thuật Word
    • Thủ thuật PowerPoint
    • Thủ thuật
      • Thủ thuật Internet
      • Thủ thuật máy tính
      • Thủ thuật phần mềm
  • Tiện ích
    • Photoshop Online
    • Ghép ảnh Online
    • PDF sang Word Online
    • Tải tài liệu từ tailieu.vn
  • Video
No Result
View All Result
Nguyễn Hùng
  • WordPress
    • Thủ thuật WordPress
    • WordPress Plugin
    • Themes WordPress
  • Lập trình web
    • Học HTML
  • MMO & Marketing
    • Kiếm tiền online
    • Marketing Online
    • Thủ thuật Seo
  • Tin Học VP
    • Thủ thuật Excel
    • Thủ thuật Word
    • Thủ thuật PowerPoint
    • Thủ thuật
      • Thủ thuật Internet
      • Thủ thuật máy tính
      • Thủ thuật phần mềm
  • Tiện ích
    • Photoshop Online
    • Ghép ảnh Online
    • PDF sang Word Online
    • Tải tài liệu từ tailieu.vn
  • Video
No Result
View All Result
Nguyễn Hùng
No Result
View All Result
Home Học HTML

Bài 6: Các thẻ tạo danh sách (list) trong HTML

Nguyễn Hùng by Nguyễn Hùng
28/08/2018
in Học HTML
0

Nội dung bài viết

  1. Các thẻ tạo danh sách trong HTML
    1. Kiểu danh sách sắp xếp (Ordered List)
    2. Kiểu danh sách không sắp xếp (Unordered List)
    3. Kiểu danh sách mô tả (Description List)
    4. Lồng các danh sách với nhau
Bài 6: Các thẻ tạo danh sách (list) trong HTML
5 (3 votes)

Trong bài này chúng ta sẽ cùng nhau đi tìm hiểu về thẻ tạo danh sách (tạo list) trong HTML. Trong HTML việc tạo các phần tử danh sách cũng được sử dụng khá thường xuyên, chẳng hạn như tạo menu, tạo danh sách chuyên mục,… Vậy nên bài này mình muốn giới thiệu với các bạn các loại thẻ để tạo list và các sử dụng của từng thẻ.

Các thẻ tạo danh sách trong HTML

Trong HTML chúng ta có 3 kiểu tạo danh sách đó là danh sách có sắp xếp (ordered list), danh sách không sắp xếp (unordered list) và danh sách mô tả (description list). Dưới đây chúng ta sẽ đi vào cách dùng từng kiểu danh sách cụ thể.

Kiểu danh sách sắp xếp (Ordered List)

Kiểu danh sách sắp xếp là kiểu hiển thị danh sách các mục bên trong nó được sắp xếp theo thứ tự đánh số hoặc chữ cái. Để tạo danh sách kiểu này chúng ta bắt đầu bằng cặp thẻ<ol> </ol> và chứa bên trong nó là các cặp thẻ<li> có chứa nội dung của danh sách.

Ví dụ:

<ol>
  <li>Danh sách 1</li>
  <li> Danh sách 2</li>
  <li> Danh sách 3</li>
</ol>

Như đã nói ở trên là bạn có thể sắp xếp danh sách theo chữ số hoặc chữ cái nên trong thẻ<ol> chúng ta sẽ phải thêm thuộc tính type để thiết lập kiểu sắp xếp. Giá trị của thuộc tính type là 1, a, A, i, I.

Ví dụ:

<ol type= "A">
  <li>Danh sách 1</li>
  <li> Danh sách 2</li>
  <li> Danh sách 3</li>
</ol>

Kiểu danh sách không sắp xếp (Unordered List)

Kiểu danh sách không sắp xếp được bắt đầu bằng cặp thẻ<ul> </ul> và bên trong cũng được khai báo bởi cặp thẻ <li> </li>.

Ví dụ:

<ul>
  <li>Danh sách 1</li>
  <li> Danh sách 2</li>
  <li> Danh sách 3</li>
</ul>

Kiểu danh sách này cũng hỗ trợ bạn thay đổi kiểu các ký tự đánh dấu bằng thuộc style với thuộc tính CSS là list-style-type đi kèm với các giá trị disc, circle, square và none.

Ví dụ:

<ul style="list-style-type: circle">
  <li>Danh sách 1</li>
  <li> Danh sách 2</li>
  <li> Danh sách 3</li>
</ul>

Kiểu danh sách mô tả (Description List)

Kiểu danh sách mô tả này khác với 2 kiểu trên đó là nó được bắt đầu bằng cặp thẻ<dl> </dl> và các danh sách bên trong được khai báo bằng cặp thẻ<dt> </dt> và sẽ có thêm đoạn mô tả cho chúng nằm trong cặp thẻ <dd> </dd>.

Ví dụ:

<dl>
  <dt>HTML</dt>
  <dd>Tạo nên cấu trúc trang web</dd>
  <dt>CSS</dt>
  <dd>Để trang trí cho web</dd>
  <dt>Javascript</dt>
  <dd>Thêm hiệu ứng cho web</dd>
</dl>

Lồng các danh sách với nhau

Trong HTML, sẽ không đơn thuần là tạo 1 kiểu danh sách là hết mà bạn còn có thể lồng các kiểu danh sách vào với nhau để tạo thành 1 danh sách đa cấp. Để làm việc đó bạn chỉ cần chèn thêm 1 danh sách nữa vào giữa cặp thẻ<li> </li> là được.

Ví dụ:

<ul>
  <li>Back-End
    <ol>
      <li>PHP</li>
      <li>Python</li>
      <li>.Net</li>
    </ol>
  </li>
  <li>Front-End
    <ol>
      <li>HTML</li>
      <li>CSS</li>
      <li>Javascript</li>
    </ol>
  </li>
</ul>

Lời kết

Việc tạo các danh sách trong HTML cũng khá đơn giản đúng không nào. Mà nói chung thì học HTML nó cũng không phải là cái gì đó quá khó học. Các bạn chỉ cần chịu khó theo dõi các bài viết trên NguyenHungPlus.Com thì sẽ sớm làm dc 1 trang web HTML thôi. Chúc các bạn thành công!

Tags: học html cơ bảnhọc html onlinetự học html
Nguyễn Hùng

Nguyễn Hùng

Internet là nơi mà mình học được tất cả những gì về Wordpress, SEO, SEM, MMO, và kiến thức máy tính. Những chia sẻ của mình là những thứ mình học được và đã làm thành công, có thể nó chưa được hoàn hảo nhưng chắc chắn nó sẽ giúp ích cho bạn. Xem thêm...

Related Posts

tu-hoc-html-co-ban

Bài 15: Hướng dẫn cách tạo FORM trong HTML

28/08/2018
tu-hoc-html-co-ban

Bài 14: Hướng dẫn cách dùng thuộc tính ID và thuộc tính CLASS trong HTML

11/08/2017
tu-hoc-html-co-ban

Bài 13: Thuộc tính STYLE trong HTML

28/08/2018
tu-hoc-html-co-ban

Bài 12: Thẻ IFRAME trong HTML – Nhúng trang web khác vào web của mình

25/05/2017
tu-hoc-html-co-ban

Bài 11: Phần tử khối (Block Element) và phần tử nội tuyến (Inline Element) trong HTML

05/05/2017
tu-hoc-html-co-ban

Bài 10: Thẻ a trong HTML – Thẻ tạo link liên kết trong HTML

28/08/2018

Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *




Bài viết mới nhất

review-khoa-hoc-ham-excel-online

Review khóa học Excel Online – Cách để trở thành cao thủ hàm Excel

25/01/2019
Hướng dẫn tracking chuyển đổi gửi form thành công với Contact Form 7 bằng Google Tag Manager

Hướng dẫn tracking chuyển đổi gửi form thành công với Contact Form 7 bằng Google Tag Manager

22/01/2019
bat-xac-minh-2-buoc-cho-gmail-5

Hướng dẫn bật xác minh 2 bước Gmail để bảo mật cho tài khoản Gmail

07/01/2019
lay-thong-tin-smtp-gmail-3

Hướng dẫn lấy thông tin thiết lập SMTP Gmail dễ dàng

07/01/2019
hawkhost-coupon-moi-nhat

HawkHost Coupon tháng 02/2019 – Mã giảm giá Hawk Hosting lên đến 40%

01/02/2019






Nguyễn Hùng

"Hello! Tớ là Nguyễn Hùng, blog này tớ xây dựng nhằm mục đích chia sẻ miễn phí các kiến thức máy tính và làm web Wordpress, SEO, SEM, MMO,... mà tớ biết cho tất cả mọi người. Cảm ơn bạn đã ghé qua blog, nếu thấy bài viết hay, hãy chia sẻ để ủng hộ tinh thần cho tớ nha. → Xem tiếp"

Theo dõi tớ

Danh mục

  • Học HTML
  • Hosting – Domain
  • Khuyến mãi
  • Kiếm tiền online
  • Life's
  • Marketing Online
  • Themes Wordpress
  • Thủ thuật Excel
  • Thủ thuật Internet
  • Thủ thuật máy tính
  • Thủ thuật Mobile
  • Thủ thuật phần mềm
  • Thủ thuật PowerPoint
  • Thủ thuật Seo
  • Thủ thuật văn phòng
  • Thủ thuật Word
  • Thủ thuật Wordpress
  • Video Hay
  • Wordpress Plugin

Bạn bè & Đối tác

– Blog iHuongDan

– Tự Học MMO

  • Giới thiệu
  • Điều khoản
  • Liên hệ

© 2015 - 2018 NguyenHungPlus.Com - Xây dựng & phát triển bởi Nguyễn Hùng.

No Result
View All Result
  • WordPress
    • Thủ thuật WordPress
    • WordPress Plugin
    • Themes WordPress
  • Lập trình web
    • Học HTML
  • MMO & Marketing
    • Kiếm tiền online
    • Marketing Online
    • Thủ thuật Seo
  • Tin Học VP
    • Thủ thuật Excel
    • Thủ thuật Word
    • Thủ thuật PowerPoint
    • Thủ thuật
      • Thủ thuật Internet
      • Thủ thuật máy tính
      • Thủ thuật phần mềm
  • Tiện ích
    • Photoshop Online
    • Ghép ảnh Online
    • PDF sang Word Online
    • Tải tài liệu từ tailieu.vn
  • Video

© 2015 - 2018 NguyenHungPlus.Com - Xây dựng & phát triển bởi Nguyễn Hùng.

Đăng ký nhận bản tin!

Đăng ký nhận bản tin!

Đăng ký email để nhận bài viết mới và các khuyến mãi, quà tặng trên blog Nguyễn Hùng.

Đăng ký thành công!