• Điều khoản & điều kiện
  • Chính sách bảo mật
Tech News, Magazine & Review WordPress Theme 2017
  • Trang chủ
  • Chia sẻ
    • Phần mềm
  • Kinh nghiệm
    • Kinh nghiệm về Internet
    • Kinh nghiệm về Linux
    • Kinh nghiệm về Windows
    • Kinh nghiệm về Lập trình
  • Giải thích thuật ngữ
    • Thuật ngữ Internet
  • Lập trình
    • Web
      • Lập trình HTML
No Result
View All Result
Tiền Minh Vy
  • Trang chủ
  • Chia sẻ
    • Phần mềm
  • Kinh nghiệm
    • Kinh nghiệm về Internet
    • Kinh nghiệm về Linux
    • Kinh nghiệm về Windows
    • Kinh nghiệm về Lập trình
  • Giải thích thuật ngữ
    • Thuật ngữ Internet
  • Lập trình
    • Web
      • Lập trình HTML
No Result
View All Result
Tiền Minh Vy
No Result
View All Result
Home Học tập

[Bài 8] Danh sách trong HTML5

Tiền Minh Vy by Tiền Minh Vy
11/03/2021
Reading Time: 4 mins read
Giới thiệu về HTML5
Chia sẻ trên FacebookChia sẻ trên TwitterChia sẻ qua email
  1. Giới thiệu về HTML5
  2. [Bài 1] Chuẩn bị trước khi học HTML5
  3. [Bài 2] Cấu trúc HTML5 đơn giản
  4. [Bài 3] Định dạng văn bản trong HTML5
  5. [Bài 4] Thuộc tính trong HTML5
  6. [Bài 5] Liên kết trong HTML5
  7. [Bài 6] Hình ảnh trong HTML5
  8. [Bài 7] Bình luận trong HTML5
  9. [Bài 8] Danh sách trong HTML5
  10. [Bài 9] Bảng biểu trong HTML5
  11. [Bài thực hành 1] Viết cấu trúc HTML5 đơn giản
  12. [Bài 10] Iframe trong HTML5
  13. [Bài 11] Video trong HTML5
  14. HTML5 nâng cao

Trong bài này, mình sẽ giới thiệu với các bạn về danh sách trong HTML5, thứ giúp các bạn có thể tạo danh sách theo và không theo thứ tự

Đôi khi, trong tài liệu HTML5, chúng ta đôi khi sẽ cần phải tạo lập 1 danh sách bao gồm các thứ cần liệt kê hay đơn giản là các vấn đề cần thực hiện. Vì mục đích đó, HTML5 cung cấp cho chúng ta khả năng tạo lập danh sách vô cùng chi tiết, vậy cách để tạo lập danh sách trong HTML5 như thế nào? Chúng ta cùng bắt đầu thôi.

Tóm tắt ẩn
Danh sách trong HTML5
[Đọc thêm] Loại danh sách trong HTML5 khác ít dùng
Tóm lại
Có thể bạn sẽ thích

Danh sách trong HTML5

Như mình đã nói ở trên, danh sách trong HTML5 có vai trò khá quan trọng, và được chia làm 2 phần chính, đó chính là danh sách theo thứ tự và danh sách không theo thứ tự. Ngoài ra còn 1 loại nữa nhưng ít dùng hơn, đó là danh sách mô tả, loại này chúng ta chỉ tham khảo thôi vì loại thẻ của nó khá khó nhớ và ít khi dùng đến.

Dưới đây là cú pháp của danh sách theo và không theo thứ tự:

<!-- Danh sách có thứ tự - VD: 1. 2. 3. -->
<ol>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ol>

<!-- Danh sách không thứ tự -->
<ul>
    <li>E</li>
    <li>F</li>
    <li>G</li>
    <li>H</li>
</ul>

Và bên dưới là kết quả

Danh sách trong HTML5
Danh sách trong HTML5

 

Các bạn cần chú ý rằng, phải thiết lập đúng cấu trúc của thẻ như trên (thẻ <ul> hay <ol> rồi mới đến thẻ <li>) thì mới có thể thấy được danh sách như thế nhé, các thẻ này có thể chứa bất kỳ thẻ nào, nhưng riêng thẻ <ul> hay <ol> thì phải cần có thêm thẻ <li> mới có thể hiện ra danh sách như thế và ngược lại.

Và đối với danh sách có thứ tự, bạn có thể lập một danh sách với số lượng vô hạn các mục ở trong đó. HTML5 không giới hạn số lượng mục con trong bất kỳ danh sách nào.

Cách ghi nhớ: cách ghi nhớ 3 thẻ trên rất dễ:

  • Trong tiếng Anh, “danh sách” có nghĩa là “list“, bạn lấy chữ “l” ghép với chữ “o” của từ “order” (nghĩa là có thứ tự) ta được danh sách có thứ tự <ol>.
  • Tiếp đó, bạn lấy từ “order” ghép thêm tiền tố un- ở phía trước sẽ được “un-order” (nghĩa là không có thứ tự), ta lấy chữ “u” ghép với chữ “l” như trên ta được danh sách không thứ tự <ul>
  • Cuối cùng, ta lấy chữ “l” ở trên ghép với chữ “i” của “item” (nghĩa là món đồ – nghĩa khác thường dùng là mục) ta được thẻ mục <li>

[Đọc thêm] Loại danh sách trong HTML5 khác ít dùng

Ngoài 2 loại danh sách trên, có thêm một danh sách nữa nhưng mình chưa thấy website nào dùng cả, đó chính là danh sách mô tả. Cú pháp của danh sách này như sau:

<!-- Ví dụ về danh sách ghi chú -->
<dl>
  <dt>Việt Nam</dt>
  <dd>- có vị trí ở khu vực Đông Nam Á, nằm trên bán đảo Đông Dương</dd>
  <dt>Cuba</dt>
  <dd>- có vị trí ở phía bắc vùng Caribe</dd>
</dl>

Dưới đây là kết quả:

Danh sách trong HTML5
Danh sách trong HTML5 loại danh sách mô tả

Đối với loại danh sách này, thẻ <dd> sẽ được đẩy vào khoảng 1 khoảng trắng. Bên cạnh đó là không có dấu hiệu ở đầu dòng mỗi mục giống như hai danh sách kia.

Giải nghĩa:

  • dl là viết tắt của description list (nghĩa là danh sách mô tả)
  • dt là viết tắt của description term (nghĩa là thuật ngữ để mô tả) – chứa thuật ngữ để mô tả
  • dd là viết tắt của description data (nghĩa là mô tả nội dung) – chứa nội dung để mô tả thuật ngữ đó.

Tóm lại

Qua bài này, chúng ta đã học được các danh sách trong HTML5, bao gồm:

  • Danh sách theo thứ tự
  • Danh sách không theo thứ tự
  • Danh sách mô tả (Đọc thêm)

Bài viết sau chúng ta sẽ tìm hiểu về bảng biểu (table).

0 0 bình chọn
Đánh giá bài viết

Có thể bạn sẽ thích

Tags: danh sáchhtmlhtml5
Tiền Minh Vy

Tiền Minh Vy

Xin chào! Tôi là Tiền Minh Vy, là một lập trình viên có nhiều kinh nghiệm với Wordpress, tập trung nhiều với PHP.

Next Post
Giới thiệu về HTML5

[Bài 9] Bảng biểu trong HTML5

Đăng ký
Thông báo cho tôi về
guest
guest
0 Bình luận
Phản hồi nội tuyến
Xem tất cả bình luận

Hosting giá rẻ HostingTocDo

Giá chỉ từ 20,000đ/tháng, nhận hỗ trợ kỹ thuật và chuyển dữ liệu từ hosting cũ sang HostingTocDo miễn phí

Hỗ trợ Litespeed, Imunify360, jetBackup

Hỗ trợ Python, Node.js từ gói WH-02 trở lên.

Đăng ký tại đây

Cùng tham gia nhóm FB để học hỏi :3

Về tôi

Tôi là một người có nhiều kinh nghiệm với WordPress, là một lập trình viên website, tập trung nhiều với PHP.

Ngoài ra tôi cũng có nhận các dự án lập trình freelance. Nếu bạn có nhu cầu vui lòng liên hệ qua Email: [email protected]

Chuyên mục

Bảo mật Bảo mật Bảo mật Chia sẻ Dịch bài Linux Dịch thuật Featured Game Giveaway Giải thích thuật ngữ Hosting Học tập Internet Internet Kinh nghiệm Kinh nghiệm về Internet Kinh nghiệm về Linux Kinh nghiệm về Lập trình Kinh nghiệm về Windows Linux Lập trình Miễn phí Miễn phí Mã nguồn Mã nguồn mở Phần mềm Phần mềm Sửa lỗi Thuật ngữ Internet Thủ thuật Tin tức công nghệ Uncategorized Web Windows Windows Wordpress

DMCA Protected

DMCA.com Protection Status

Bình luận mới nhất

  • tuấn trong Chia sẻ 2000 Preset Lightroom miễn phí
  • MuLD trong Chia sẻ hơn 300 hiệu ứng âm thanh miễn phí
  • dunguyen trong Chia sẻ 2000 Preset Lightroom miễn phí
  • Tiền Minh Vy trong Bản quyền Sketch Drawer Pro miễn phí
  • Hoai trong Bản quyền Sketch Drawer Pro miễn phí

Bạn bè \ Hữu ích \ Tài trợ

Linux Team Việt Nam

Mua theme WordPress gia re

Hosting miễn phí HostingTocDo

Công cụ hữu ích – All In One (AIO)

  • Điều khoản & điều kiện
  • Chính sách bảo mật

Bản quyền © 2019 - 2020 bởi tienminhvy.com, bảo lưu mọi quyền

No Result
View All Result
  • Trang chủ
  • Chia sẻ
    • Phần mềm
  • Kinh nghiệm
    • Kinh nghiệm về Internet
    • Kinh nghiệm về Linux
    • Kinh nghiệm về Windows
    • Kinh nghiệm về Lập trình
  • Giải thích thuật ngữ
    • Thuật ngữ Internet
  • Lập trình
    • Web
      • Lập trình HTML

Bản quyền © 2019 - 2020 bởi tienminhvy.com, bảo lưu mọi quyền

wpDiscuz