Thẻ Danh sách HTML

Xin chào các bạn quay lại blog của mình. Trong bài này mình sẽ giới thiệu các bạn về thuộc tính trong thẻ HTML và thẻ danh sách.

1) Thuộc tính thẻ HTML:

Ở bài trước đã học về cấu trúc của một thẻ HTML thì trong phần này thì chúng ta tìm hiểu về các phần mở rộng của thẻ HTML là thuộc tính. Hầu như các thẻ thì đều có thuộc tính nhưng sẽ có những thuộc tính đặc biệt chỉ dành cho một số thẻ HTML nhất định. Vậy các bạn hãy cùng xem qua cấu trúc của nó để dễ hình dung nhé:

Như các bạn thấy thì thuộc tính sẽ luôn nằm trong thẻ mở với tên thuộc tính giúp chúng ta xác định loại thông tin về nội dung của thẻ HTML và giá trị thuộc tính là thông tin của thuộc tính đó. Giá trị thuộc tính tùy vào tên thuộc tính mà có thể là chữ, số, url... Và các bạn nhớ là luôn có dấu = ngăn cách giữa tên thuộc tính và giá trị thuộc tính nhé!
Nói nghe hơi khó hiểu nhưng các bạn nhìn vào ví dụ về thuộc tính thì thẻ <p> thì có hai thuộc tính là id và style với giá trị tương ứng với tên thuộc tính. (Thuộc tính style sẽ nằm nhiều trong CSS đến khi học mình sẽ nói cụ thể nhé). Chúng ta hãy xem khi đoạn code được trình duyệt hiển thị như thế nào nhé:

See the Pen Thuộc tính html by haycuoilennao19 (@haycuoilennao19) on CodePen.

Như các bạn thấy thì thuộc tính style giúp chúng ta hiện thị chữ màu đỏ với giá trị thuộc tính "color:red". Thật sự thì có rất nhiều thuộc tính với những thẻ HTML khác nhau vì vậy khi đi vào từng thẻ cụ thể thì mình sẽ nói rõ hơn về những thẻ đó có thuộc tính gì và cách sử dụng ra sao. Còn bây giờ thì mình hãy cùng nhau tìm hiểu về thẻ danh sách trong HTMl nhé!

2) Thẻ danh sách trong HTML:

Đối với mội người thì danh sách có vẻ quá quen thuộc rồi nhỉ như là mục lục của một quyển sách, danh sách học sinh, danh sách các loại rau quả ... Trong HTML có cung cấp chúng ta 3 loại thẻ mô tả những loại danh sách khác nhau là:

1) Thẻ danh sách không theo thứ tự:

Thẻ danh sách không theo thứ tự này thì được dùng bởi thẻ <ul>. Khi đã tạo danh sách thì ta cần một thẻ là <li> để tạo những chỉ mục trong danh sách. Trong một danh sách thì ta có thể một hay nhiều chỉ mục. Và các bạn tuyệt đối nhớ là khi có thẻ <ul> thì luôn đi kèm với thẻ <li>. Để hiểu rõ hơn mình sẽ ví dụ minh họa cho các bạn hiểu thêm:

Như các bạn thấy thì trước mỗi chỉ mục danh sách thì chúng ta có những kí hiệu để giúp mình xác định từng chỉ mục trong danh sách. Chúng ta có thể thay đổi những kí hiệu mà chúng ta muốn như hình tròn, hình vuông... bằng cách sử dụng thuộc tính style.Giá trị thuộc tính của nó đa số đều thuộc CSS nên các bạn cứ làm theo sau này mình sẽ đi vào sâu hơn.
Ta sẽ sử dung giá trị thuộc tính là list-style-type để thay đổi:

• style="list-style-type:disc": Sử dụng cho kí hiệu mặc định
• style="list-style-type:circle": Sử dụng cho kí hiệu hình tròn
• style="list-style-type:quare": Sử dụng cho kí hiệu hình vuông
• style="list-style-type:none": Không sử dụng cho kí hiệu nào cho các chỉ mục

See the Pen Thẻ Danh sách không theo sắp xếp by haycuoilennao19 (@haycuoilennao19) on CodePen.

2) Thẻ danh sách theo thứ tự:

Cũng giống như các yếu tố của thẻ danh sách không theo thứ tự nhưng thẻ danh sách thứ tự thì được tạo bởi thẻ <ol>.

Cũng giống nhu thẻ <ul> thì thẻ <ol> cũng có thể thay đổi các con số của các chỉ mục thông qua thuộc tính type với các giá trị thuộc tính tương ứng với nó. Các bạn xem danh sách giá trị thuộc tính của nó ở phía dưới đây:

• type="1": Sử dụng số mặc định cho chỉ mục
• type="A": Sử dụng bảng chữ cái hoa(A,B,C...) cho chỉ mục
• type="a": Sử dụng bảng chữ cái thường(a,b,c...) cho chỉ mục
• type="I": Sử dụng số La Mã hoa cho chỉ mục
• type="i": Sử dụng số La Mã thường cho chỉ mục

See the Pen Thẻ Danh sách theo thứ tự by haycuoilennao19 (@haycuoilennao19) on CodePen.

3) Thẻ danh sách mô tả:

Thẻ này hai khác so với hai thẻ ở trên một tí. Thẻ này thì chúng ta thường sử dụng cho dạng là câu hỏi và câu trả lời, định nghĩa về một thứ gì đó và dẫn chứng hay là một thông tin chi tiết hơn về chỉ mục nào đó...
Ở đây nó hơi phức tạp tí, xíu các bạn xem ví dụ sẽ rõ hơn nhé. Thẻ mô tả được tạo bởi thẻ <dl> chứa các chỉ mục con là thẻ <dt> và thẻ <dd>. Các bạn có thể hiểu là thẻ <dl> sẽ làm rõ hơn nội dung của thẻ <dt>.

4) Cách lồng thẻ vào với nhau:

Đôi lúc các bạn cần lồng những danh sách vào với nhau thì các bạn xem mình ví dụ dưới đây để có thể nắm rõ hơn nhé:

Bài tập HTML:

Sau đây mình sẽ có bài tập nhỏ giúp các bạn nhớ những gì mà mình đã học trong ngày hôm nay.

1. Các bạn tạo một file tên là HTML4baitap.html
2. Các bạn bắt đầu nhập cấu trúc của một file HTML.
3. Các bạn chèn nội dung vào trang web của mình trong thẻ <body>:
   
   

Đây là file lời giải của bài tập các bạn tham khảo. Nhưng trước khi xem hãy cố gắng hoàn thành bài tập để mình nhớ lâu hơn nhé!

Lời giải bài tập

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML bài 4</title>
</head>
<body>
<h4>Cách nấu thịt kho</h4>
<p>Nguyên Liệu</p>
<ul >
<li> Thị ba chỉ </li>
<li> Hành khô </li>
<li> Hành lá </li>
<li>Gia vị
 <ul>
 <li>Đường</li>
 <li>Bột ngọt</li>
 <li>Tiêu</li>
 <li>Mắm</li>
 </ul>
</li>
</ul>
<h4>Cách nấu</h4>
<ol>
<li>Rửa thịt</li>
<li>Ướp thịt với mắm đường và bột ngọt</li>
<li>Đổ dầu và nấu thịt</li>
</ol>
<p>Các bạn đã có món thành phẩm là món thịt kho!</p>
</body>
<html>

Còn điều này mình quên nói là khi các bạn làm xong và lưu vào HTML4baitap.html. Thì để mở mình vào thư mục đã lưu file và nhấn trực tiếp vào thì trình duyệt sẽ tự động chạy file đó nhé.

Tổng kết:

Qua bài này chúng mình đã hiểu và nắm được thẻ danh sách và thuộc tính của thẻ trong HTML. Bài tiếp theo mình sẽ hướng dẫn các bạn học về liên kết và thẻ hình ảnh trong HTML. Nếu các bạn có gì thì cứ liên hệ mình sẽ liên lạc với các bạn sớm nhất có thể!