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:
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: