Thẻ danh sách trong HTML

432 lượt xem

KHOAN ĐÃ! Trước khi đọc bài viết bạn có đang tò mò cách học html + css nhanh hiệu quả nhất mà mình từng trải qua?

Bạn đang tự tìm hiểu về html và css nhưng kiến thức rời rạc, bạn học cảm thấy không được bài bản, việc học nhàm chán và kém hiệu quả? Mình cũng từng tự học như bạn. Mình không bảo tự học là không tốt nhưng nó làm mình mất rất nhiều thời gian hơn so với việc tham gia một khóa học theo cách bài bản. Vào một ngày Mình quyết định đầu tư cho bản thân bằng cách bỏ ít tiền tham gia khóa học html và css của thầy Nguyễn Đức Việt . Kết quả mình học html và css nhanh và hiệu quả hơn rất nhiều. Thầy dạy dễ hiểu , kiến thức thực tiễn cho việc đi làm chứ không có lý thuyết suông. Các bạn có điều kiện nên đầu tư ít tiền cho bản thân để quá trình học html và css nói riêng , lập trình web nói chung để tiến nhanh và hiệu quả nhất trên con đường học lập trình web của mình nhé! Chúc bạn học tốt!

>>>> Tham khảo khóa học đã giúp mình tại:

Học HTML5/CSS3, BOOTSTRAP 4 và học cắt Web từ file thiết kế

Học HTML5/CSS3, BOOTSTRAP 4 và học cắt Web từ file thiết kế

599.000₫
Buy now
unica.vn

Description

Khóa học HTML5/CSS3 BOOTSTRAP 4 và cắt Web từ file thiết kế giúp nắm vững kiến thức về CSS HTML hiểu rõ Bootstrap và kỹ năng cắt Web với Illustrate Pix

Chương trình hợp tác với Unica Mã giảm giá lên đến 40% chỉ dành riêng cho độc giả của webaffiliatevn.com: WA40

Còn bây giờ thì vào bài viết thôi!

HTML cung cấp cho các nhà phát triển web ba cách để chỉ định danh sách thông tin. Tất cả các danh sách phải chứa một hoặc nhiều phần tử con trong danh sách. Có 3 kiểu danah sách:

  • <ul> – Một danh sách không có thứ tự. Điều này sẽ liệt kê các mục của bạn bằng dấu chấm đầu dòng đơn giản.
  • <ol> – Một danh sách có thứ tự. Điều này sẽ sử dụng các lược đồ số khác nhau để liệt kê các mục của bạn.
  • <dl> – Một danh sách định nghĩa. Điều này sắp xếp các mục của bạn theo cách giống như chúng được sắp xếp trong từ điển.

     1. Danh sách không có thứ tự trong HTML (<ul>)

Danh sách không có thứ tự là một tập hợp các mục liên quan không có thứ tự hoặc trình tự đặc biệt. Danh sách này được tạo bằng cách sử dụng thẻ  <ul> trong HTML . Mỗi mục trong danh sách được đánh dấu bằng dấu chấm đầu dòng.

Ví dụ:


<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về thẻ danh sách trong HTML</title>
   </head>
	
   <body>
      <ul>
         <li>Táo</li>
         <li>Cam</li>
         <li>Mận</li>
         <li>Xoài</li>
      </ul>
   </body>
   
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”qBZqBmZ” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/qBZqBmZ’>qBZqBmZ</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

Thuộc tính:

Bạn có thể sử dụng thuộc tính type cho thẻ <ul> để chỉ định loại dấu đầu dòng bạn thích. Theo mặc định, nó là một dấu chấm đên. Sau đây là các tùy chọn bạn có thể tham khảo:

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

Ví dụ:

Sau đây là một ví dụ mà chúng tôi đã sử dụng <ul type = “square”>


<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về thẻ danh sách trong HTML</title>
   </head>
	
   <body>
      <ul type = "square">
         <li>Táo</li>
         <li>Cam</li>
         <li>Mận</li>
         <li>Xoài</li>
      </ul>
   </body>
   
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”eYZBYEq” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/eYZBYEq’>eYZBYEq</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

Ví dụ:

Sau đây là một ví dụ mà chúng tôi đã sử dụng <ul type = “disk”>


<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về thẻ danh sách trong HTML</title>
   </head>
	
   <body>
      <ul type = "disc">
         <li>Táo</li>
         <li>Cam</li>
         <li>Mận</li>
         <li>Xoài</li>
      </ul>
   </body>
   
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”yLOVLzr” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/yLOVLzr’>yLOVLzr</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

Ví dụ:

Sau đây là một ví dụ mà chúng tôi đã sử dụng <ul type = “circle”>


<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về thẻ danh sách trong HTML</title>
   </head>
	
   <body>
      <ul type = "circle">
         <li>Táo</li>
         <li>Cam</li>
         <li>Mận</li>
         <li>Xoài</li>
      </ul>
   </body>
   
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”gOrLOXo” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/gOrLOXo’>gOrLOXo</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

     2. Danh sách có thứ tự trong HTML (<ol>)

Nếu bạn được yêu cầu đặt các mục của mình trong một danh sách được đánh số thay vì đánh dấu đầu dòng, thì danh sách có thứ tự HTML sẽ được sử dụng. Danh sách này được tạo bằng cách sử dụng thẻ <ol> . Việc đánh số bắt đầu từ một và được tăng lên một cho mỗi phần tử danh sách có thứ tự liên tiếp được gắn thẻ <li>.

Ví dụ:

<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về thẻ danh sách trong HTML</title>
   </head>
	
   <body>
      <ol>
         <li>Táo</li>
         <li>Cam</li>
         <li>Mận</li>
         <li>Xoài</li>
      </ol>
   </body>
   
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”rNeWNJN” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/rNeWNJN’>rNeWNJN</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

Thuộc tính:

Bạn có thể sử dụng thuộc tính type cho thẻ <ol> để chỉ định kiểu đánh số mà bạn thích. Theo mặc định, nó là một số. Sau đây là các tùy chọn mà bạn có thể tham khảo:

<ol type = "1"> - Kiểu số
<ol type = "I"> - Kiểu số La Mã in hoa.
<ol type = "i"> - Kiểu số La Mã in thường.
<ol type = "A"> - Kiểu chữ cái từ A-Z in hoa.
<ol type = "a"> - Kiểu chữ cái từ a-z in thường.

Ví dụ:

Sau đây là một ví dụ mà chúng tôi đã sử dụng <ol type = “1”>

<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về thẻ danh sách trong HTML</title>
   </head>
	
   <body>
      <ol type = "1">
         <li>Táo</li>
         <li>Cam</li>
         <li>Mận</li>
         <li>Xoài</li>
      </ol>
   </body>
   
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”zYqoYav” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/zYqoYav’>zYqoYav</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

Ví dụ:

Sau đây là một ví dụ mà chúng tôi đã sử dụng <ol type = “I”>

<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về thẻ danh sách trong HTML</title>
   </head>
	
   <body>
      <ol type = "I">
         <li>Táo</li>
         <li>Cam</li>
         <li>Mận</li>
         <li>Xoài</li>
      </ol>
   </body>
   
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”rNeWNra” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/rNeWNra’>rNeWNra</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

Ví dụ:

Sau đây là một ví dụ mà chúng tôi đã sử dụng <ol type = “i”>

<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về thẻ danh sách trong HTML</title>
   </head>
	
   <body>
      <ol type = "i">
         <li>Táo</li>
         <li>Cam</li>
         <li>Mận</li>
         <li>Xoài</li>
      </ol>
   </body>
   
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”bGpBGjm” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/bGpBGjm’>bGpBGjm</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

Ví dụ:

Sau đây là một ví dụ mà chúng tôi đã sử dụng <ol type = “A”>

<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về thẻ danh sách trong HTML</title>
   </head>
	
   <body>
      <ol type = "A">
         <li>Táo</li>
         <li>Cam</li>
         <li>Mận</li>
         <li>Xoài</li>
      </ol>
   </body>
   
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”GRZNRXx” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/GRZNRXx’>GRZNRXx</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

Ví dụ:

Sau đây là một ví dụ mà chúng tôi đã sử dụng <ol type = “a”>

<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về thẻ danh sách trong HTML</title>
   </head>
	
   <body>
      <ol type = "a">
         <li>Táo</li>
         <li>Cam</li>
         <li>Mận</li>
         <li>Xoài</li>
      </ol>
   </body>
   
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”oNxYNaW” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/oNxYNaW’>oNxYNaW</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

Thuộc tính bắt đầu:

Bạn có thể sử dụng thuộc tính start cho thẻ <ol> để chỉ định điểm bắt đầu đánh số mà bạn cần. Sau đây là các tùy chọn mà bạn có thể tham khảo:

<ol type = "1" start = "4">    - Bắt đầu bằng con số "4"
<ol type = "I" start = "4">    - Bắt đầu bằng chữ La Mã in hoa "IV".
<ol type = "i" start = "4">    - Bắt đầu bằng chữ La Mã in thường "iv".
<ol type = "a" start = "4">    - Bắt đầu bằng chữ cái in thường "d".
<ol type = "A" start = "4">    - Bắt đầu bằng chữ cái in hoa "D".

Ví dụ:

<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về thẻ danh sách trong HTML</title>
   </head>
	
   <body>
      <ol type = "i" start = "4">
         <li>Táo</li>
         <li>Cam</li>
         <li>Mận</li>
         <li>Xoài</li>
      </ol>
   </body>
   
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”GRZNRPd” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/GRZNRPd’>GRZNRPd</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

     3. Danh sách định nghĩa trong HTML

HTML và XHTML hỗ trợ một kiểu danh sách được gọi là danh sách định nghĩa nơi các mục nhập được liệt kê giống như trong từ điển. Danh sách định nghĩa là cách lý tưởng để trình bày bảng thuật ngữ, danh sách các thuật ngữ hoặc danh sách tên / giá trị khác.

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

  • <dl> – Xác định đầu danh sách
  • <dt> – Một thuật ngữ
  • <dd> – Định nghĩa thuật ngữ
  • </dl> – Xác định phần cuối của danh sách

Ví dụ:

<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ về danh sách định nghĩa trong HTML</title>
   </head>
	
   <body>
      <dl>
         <dt><b>HTML</b></dt>
         <dd>
Đây là viết tắt của Hyper Text Markup Language</dd>
         <dt><b>HTTP</b></dt>
         <dd>Đây là viết tắt của Hyper Text Transfer Protocol</dd>
      </dl>
   </body>
	
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”PoNboLB” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/PoNboLB’>PoNboLB</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

>>> Xem thêm:

Đánh giá post
Lượt xem: 1.660

Các kênh thông tin của chúng tôi

Disclaimer: Thông tin trong bài viết không phải là lời khuyên đầu tư từ Coin98 Insights. Hoạt động đầu tư tiền mã hóa chưa được pháp luật một số nước công nhận và bảo vệ. Các loại tiền số luôn tiềm ẩn nhiều rủi ro tài chính.

Weblog cá nhân của Minh Trần - Marketing Leader thẩm mỹ viện Mailisa. Hy vọng bạn sẽ tìm thấy nhiều kiến thức marketing (đặc biệt là affiliate) bổ ích qua những bài viết trên website này. PS: Team chúng tôi không phải chuyên gia, chỉ là viết blog dạo để học hỏi kiến thức, ứng dụng vào công việc vì thế các thông tin trên blog không thể thay thế lời khuyên của chuyên gia, chúng tôi không đảm bảo tính đúng đắn về mặt chuyên môn trong các bài blog! Các bài trên website, có bài do tôi viết, cũng có những bài do CTV viết. Xin cảm ơn bạn đã ghé thăm blog. PS: chúng tôi đang làm ngành comestic , nhận huấn luyện affiliate 1-1 miễn phí cho bạn nào cũng chuyên làm affiliate ngành comestic.

Bài viết cùng chủ đề:

You cannot copy content of this page

Bạn muốn đọc tin riêng tư, hay hơn?
Đăng ký danh sách email của chúng tôi, chúng tôi sẽ gởi thêm tin theo xu hướng mới!
Cập nhật kiến thức và thông tin mới nhất về Affiliate & Tip kiếm tiền online hiệu quả .

PS: Cam kết bảo mật thông tin, không spam

Đăng ký bản tin

Không, cảm ơn, tôi không muốn đọc thêm tin
Contact Me on Zalo