1TRƯỜNG ĐẠI HỌC HỌC CÙNG NHAU HƯỚNG DẪN HỌC THIẾT KẾ WEB
KẾT HỢP HTML+CSS
LÝ THUYẾT VÀ BÀI TẬP THỰC HÀNH SƯU TẦM VÀ BIÊN SOẠN : Nguyễn Phúc Đức
Tháng 12 năm 2013
Thẻ định dạng đoạn văn bản 9
Thẻ phân chia khu vực 11
Thẻ xác định danh sách 12
Các thẻ danh sách có thứ tự và không có thứ tự 15
Danh sách không có thứ tự 16
Cấu trúc thẻ danh sách có thứ tự và không có thứ tự 17
Một số cấu trúc của danh sách có thứ tự và không có thứ tự 17
Cấu trúc <ul></ul> lồng bên trong <ol></ol> 18
Những thẻ thuộc nhóm inline 19
Thẻ liên kết <a></a> 20
Thẻ ngắt đoạn văn bản <br /> 21
Thẻ nhóm các inline <span></span> 21
Thẻ hiển thị hình ảnh mạnh <strong></strong> 21
Thẻ dùng để nhấn mạnh nội dung văn bản <em></em> 21
Ví dụ về liên kết <a> 21
Ví dụ về <img /> 23
Đoạn văn bản <p> 24
Ví dụ về các tag <dl> - <dd> - <dt> 25
Ví dụ về các tag <ol> - <li> 25
Ví dụ về các tag <ul> - <li> 27
Ví dụ về thẻ <input /> 28
Ví dụ về thẻ <button> 30
Ví dụ về thẻ select - option 30
Ví dụ về thẻ <optgroup> 31
Ví dụ về thẻ <textarea> 32
Ví dụ về <fieldset> - <legend> 32
Ví dụ về thẻ <label> 33
Kết hợp các thẻ định dạng và nhóm thẻ inline 39
Bài tập 39
Phần đầu: header 43

clearfix 97
display : Xác định sự hiển thị cho thành phần 103
position 106
position: absolute 111
position: fixed 116
position: static 117
Ví dụ về thuộc tính position 117
Ví dụ về thuộc tính border 120
Ví dụ về thuộc tính display 123
Ví dụ về thuộc tính text-align 128
Ví dụ về thuộc tính vertical-align 129
Ví dụ về thuộc tính list-style 133
Ví dụ về thuộc tính margin 136
Ví dụ về thuộc tính overflow 140
Ví dụ về thuộc tính z-index 142
Ví dụ về thuộc tính content 145
Kết hợp các thuộc tính CSS 147
Phần web : header 151
Phần liên kết toàn cục global navigation 156
Phần nội dung : content 158
Phần : sidebar 170
Phần : footer 172
Tổng kết bài tập CSS 177
Màu trong HTML & CSS 185
jQuery 189
CSS3 204
Tag mới trong HTML5 207
Những tag tương tự HTML4 / XHTML 208
Những tag không được hỗ trợ trong HTML5 210


<div>Nội dung phụ</div>

<div>
<p>Tên công ty</p>
<p>Địa chỉ</p>
</div>
Hiển thị trình duyệt:

Phân tích vị trí của các thẻ:

5Ta thấy các thẻ block đều chiếm vùng không gian nằm ngang, chúng ta có thể sắp xếp lại vị trí của
các thẻ block bằng cách sử dụng các thuộc tính css
.
Sự sắp xếp chiều ngang của thẻ inline trong HTML
Khi sử dụng các thẻ inline, trình duyệt sẽ sắp xếp các thẻ liền kề nhau theo chiều ngang, thẻ nào code
trước xuất hiện trước, thẻ nào code sau xuất hiện sau.
Xem ví dụ sau đây để thấy được trình duyệt sắp xếp các thẻ inline như thế nào:
HTML viết
<a href="#">Thẻ a</a>
<span>thẻ span</span>
<em>thẻ em</em>
<strong>thẻ strong</strong>
Hiển thị trình duyệt:

Tới đây chắc các bạn đã hiểu nhiệm vụ của HTML/XHTML dùng để làm gì, đối với các thẻ block
trình duyệt sẽ sắp xếp nó theo chiều dọc, đối với các thẻ inline trình duyệt sẽ sắp xếp theo chiều
ngang, nếu muốn hiểu rõ hơn các bạn có thể tham khảo thêm các vùng không gian HTML

Phần đầu: header, có thể chứa logo, câu slogan, các liên kết, các banner liên kết, các button,
đoạn flash, hoặc các form ngắn như form tìm kiếm,

Phần liên kết toàn cục: global navigation, dùng để chứa các liên kết đến những trang quan
trọng trong toàn bộ trang, trong phần này có thể chứa thêm các liên kết con (sub navigation).

Phần thân của trang: page body, phần này chứa phần nội dung chính (content) và phần nội
dung phụ (sidebar).

Phần nội dung chính: content, phần này chứa nội dung chính cần thể hiện cho người dùng
xem.

Phần nội dung phụ: sidebar, phần này có thể chứa liên kết phụ của từng trang (local
navigation), hoặc các banner chứa liên kết liên quan, hoặc có thể dùng để chứa các liên kết quảng
cáo,

Phần cuối trang web: footer, phần này thường chứa phần liên hệ như: tên công ty, địa chỉ, số
điện thoại, mail liên hệ, và đặc biệt là copyright, hoặc có thể chứa các liên kết toàn trang, các banner
liên kết,

7Nhóm các thẻ block
Nhóm các thẻ block: là các thẻ dùng để sắp xếp bố cục cho trang web.

Thẻ định dạng tiêu đề <hx>

Gồm các thẻ từ <h1> cho đến <h6>, được sử dụng để định nghĩa tiêu đề cho nội dung HTML,
giúp cho trình duyệt nhận biết được tiêu đề của một nội dung.

Thẻ <hx> : Sử dụng để định nghĩa tiêu đề cho nội dung HTML, giúp cho trình duyệt nhận biết
được tiêu đề của một nội dung.

Thẻ <hx> có giá trị từ <h1> tới <h6>, trong đó mức độ quan trọng giảm từ <h1> tới <h6> (hay
ta có thể hiểu: tiêu đề lớn nhất là <h1>, và tiêu đề nhỏ nhất là <h6>).

Nội dung bên trong <hx></hx> chỉ nên chứa các thẻ thuộc nhóm inline.

Thẻ <hx></hx> chỉ nên thể hiện tiêu đề, không dùng cho mục đích khác.
Html viết:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html>
<head>
<title>Tiêu đề trang web</title>
</head>

<body>
<h1>Đây là tiêu đề quan trọng nhất (lớn nhất)</h1>
<h2>Đây là tiêu đề quan trọng thứ nhì (lớn thứ nhì)</h2>
<h3>Đây là tiêu đề quan trọng thứ ba (lớn thứ ba)</h3>
<h4>Đây là tiêu đề quan trọng thứ tư (lớn thứ tư)</h4>
<h5>Đây là tiêu đề quan trọng thứ năm (lớn thứ năm)</h5>
<h6>Đây là tiêu đề ít quan trọng nhất (nhỏ nhất)</h6>
</body>
</html>
Hiển thị trình duyệt:
Đây là tiêu đề quan trọng nhất (lớn nhất)
Đây là tiêu đề quan trọng thứ nhì (lớn thứ nhì)
Đây là tiêu đề quan trọng thứ ba (lớn thứ ba)

Tiêu đề nhỏ
Nội dung của tiêu đề nhỏ
Những cấu trúc không nên sử dụng
Không được chứa bên trong <hx></hx> các thẻ thuộc nhóm các thẻ block, code như thế này là sai,
không đúng chuẩn W3C:
HTML viết
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html>
<head>
<title>Tiêu đề trang web</title>
</head>

<body>
<h1><p>Đây là đoạn văn</p></h1>

<h2><div>Đây là đoạn văn</div></h2>

<h3>
<dl>
<dt>Tiêu đề</dt>
<dd>Nội dung</dd>
</dl>
</h3>

<h2>
<ul>
<li>liên kết 01</li>
<li>liên kết 02</li>
</ul>


Trong đoạn văn này có chứa liên kết.
Để ngắt đoạn cho đoạn văn ta có thể dùng 2 cách:

Ngắt đoạn cùng dòng: sử dụng thẻ <br /> (<br /> là thẻ thuộc nhóm inline).
HTML viết
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html>
<head>
<title>Tiêu đề trang web</title>
</head>

<body>
<p>Đây là đoạn văn dài rất dài rất dài rất dài<br />
rất dài rất dài rất dài rất dài.</p>
</body>
</html>
Hiển thị trình duyệt:
Đây là đoạn văn dài rất dài rất dài rất dài
rất dài rất dài rất dài rất dài.

Ngắt đoạn khác dòng: sử dụng 2 thẻ <p></p> để ngắt đoạn khác dòng, tránh trường hợp sử
dụng 2 lần thẻ <br /> vì về mặt ý nghĩa của thẻ sẽ không còn chính xác, điều này sẽ gây khó khăn cho
trình duyệt phân biệt đâu là cùng đoạn, đâu là khác đoạn.
HTML viết
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html>
<head>

<p>
<dl>
<dt>Tiêu đề</dt>
<dd>Nội dung</dd>
</dl>
</p>

<p>
<ul>
<li>liên kết 01</li>
<li>liên kết 02</li>
</ul>
</p>
</body>
</html>
Thẻ phân chia khu vực
Định nghĩa và cách dùng

Thẻ <div></div> viết tắt của từ "division" có nghĩa là phân chia, ta có thể hiểu đây là sự phân
chia khu vực hay vùng, sự phân chia này sẽ giúp cho trình duyệt hiểu rõ những vùng được bố cục trên
trang web.

Có thể chứa hầu hết các thẻ trong HTML/XHTML.

Một số thẻ không được chứa bên trong <div></div>: <html></html>, <meta></meta>,
<body></body>, <title></title>, <link></link>.

Một số thẻ không nên chứa bên trong <div></div>: <style></style>, <script></script>.

Một số khu vực khuyên sử dụng thẻ <div></div>:

<div id="footer">Viết nội dung phần footer ở đây</div>
</body>
</html>
Hiển thị trình duyệt:
Viết nội dung phần header ở đây
Viết nội dung phần global navigation ở đây
Viết nội dung phần content ở đây
Viết nội dung phần sidebar ở đây
Viết nội dung phần footer ở đây
Những cấu trúc không nên sử dụng
Không nên sử dụng thẻ <div></div> trực tiếp cho những chi tiết nhỏ như: một đoạn text, một image,
một liên kết, một button, nói tóm lại không nên sử dụng thẻ <div></div> trực tiếp cho nhóm inline.
Tuy trình duyệt sẽ hiển thị đúng ý đồ của tác giả, nhưng code như vậy sẽ không đúng với ý nghĩa của
thẻ <div></div>, khiến trình duyệt khó xác định được đâu là nội dung lớn đâu là nội dung nhỏ.
HTML viết
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html>
<head>
<title>Tiêu đề trang web</title>
</head>

<body>
<div>Đây là đoạn văn</div>
<div><img src="images/img_planet.gif" alt="Space" /></div>
<div>Trong đoạn văn này có chứa <a href="tut_html_layout.php">liên kết</a></div>
</body>
</html>
Thẻ xác định danh sách
Định nghĩa danh sách trong HTML/XHTML có nhiều dạng khác nhau, mỗi dạng sẽ theo một cấu trúc


<dt>Nước:</dt>
<dd>giúp chúng ta tăng cường lượng nước cần cho cơ thể.</dd>

<dt>Thịt:</dt>
<dd>giúp cơ thể tăng cường đạm, và chất béo.</dd>
</dl>
</body>
</html>
Hiển thị trình duyệt:
Trái cây:
giúp bỗ sung vitamin cho cơ thể.
Nước:
giúp chúng ta tăng cường lượng nước cần cho cơ thể.
Thịt:
giúp cơ thể tăng cường đạm, và chất béo.
Xem thêm ví dụ

Cấu trúc và cách dùng
Cấu trúc thẻ xác định danh sách phải theo các nguyên tắc sau đây:

Lúc nào cũng phải tồn tại 3 thẻ, không thể thiếu một trong 3: <dl></dl>, <dt></dt>,
<dd></dd>.

Bên trong thẻ <dt></dt> chỉ chứa được các thẻ thuộc nhóm inline.

Bên trong thẻ <dd></dd> chứa được hầu hết các thẻ HTML/XHTML, tuy nhiên không được
chứa một số thẻ sau đây: <html></html>
, <meta></meta>, <body></body>, <title></title>,
<link></link>

</div>
</dl>
Những cấu trúc không nên sử dụng
Những cấu trúc dưới đây tuy hiển thị tốt cho trình duyệt, nhưng lại không đúng ý nghĩa của bộ 3 thẻ
<dl></dl>, <dt></dt>, <dd></dd>, sẽ khiến cho trình duyệt lúng túng trong việc xác định thẻ.
Cấu trúc thiếu vắng <dt></dt>: thiếu mục.
<dl>
<dd></dd>
</dl>
Cấu trúc thiếu vắng <dd></dd>: thiếu mô tả mục.
<dl>
<dt></dt>
</dl>
Cấu trúc lặp nhiều <dt></dt> cùng lúc: nhiều mục, nhưng thiếu mô tả.
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
Cấu trúc lặp nhiều <dd></dd> cùng lúc: Không cần phải phân nhiều mô tả cho một mục, chỉ cần
viết tất cả mô tả trong một <dd></dd> là được.
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
<dd></dd>

</dl>
Cấu trúc trên ta thay thế như sau:
<div>
<h2></h2>
<div>
<dl>
<dt></dt>
<dd></dd>
</dl>
</div>

<h2></h2>
<div>
<dl>
<dt></dt>
<dd></dd>
</dl>
</div>
<h2></h2>
<div></div>

<h2></h2>
<div></div>
</div>
Các thẻ danh sách có thứ tự và không có thứ tự
Định nghĩa danh sách trong HTML/XHTML có nhiều dạng khác nhau, mỗi dạng sẽ theo một cấu trúc
thẻ khác nhau, do đó việc hiểu rõ danh sách rất quan trọng, nếu bạn chưa nắm rõ cách định nghĩa về
danh sách thì bạn không thể hiểu hết được bài học này, xin hãy xem trước định nghĩa về danh sách
trong HTML/XHTML.
Danh sách có thứ tự

<li>Cá rô kho tộ</li>
<li>Cá thu chiên xoài bằm</li>
<li>Cá điêu hồng nấu ngót</li>
</ol>
</body>
</html>
Hiển thị trình duyệt:
1. 1. Cá lóc kho tiêu
2. 2. Cá rô kho tộ
3. 3. Cá thu chiên xoài bằm
4. 4. Cá điêu hồng nấu ngót
Số thứ tự của danh sách trình duyệt sẽ tự thêm vào.
Xem thêm ví dụ

Danh sách không có thứ tự
Để thể hiện danh sách không có thứ tự ta sử dụng cặp thẻ: <ul></ul> và <li></li>, trong đó:

<ul></ul> là viết tắt của chữ: unordered list có nghĩa là danh sách không có thứ tự

<li></li> viết tắt của chữ: list item có nghĩa là mục của danh sách.
Danh sách sau đây gọi là danh sách không có thứ tự:

Trang chủ

Giới thiệu

Sản phẩm

Dịch vụ


</ul>
</body>
</html>
Hiển thị trình duyệt:

Trang chủ

Giới thiệu

Sản phẩm

Dịch vụ

Liên hệ
Xem thêm ví dụ
Cấu trúc thẻ danh sách có thứ tự và không có thứ tự
Cấu trúc thể hiện thẻ danh sách có thứ tự và không có thứ tự là tương tự nhau.
Cấu trúc phải theo các nguyên tắc sau đây:

Lúc nào cũng phải tồn tại 1 cặp thẻ, không thể thiếu một trong 2:
o
Đối với danh sách có thứ tự, phải tồn tại cặp thẻ: <ol></ol>, <li></li>.
o
Đối với danh sách không có thứ tự, phải tồn tại cặp thẻ: <ul></ul>, <li></li>.

Bên trong thẻ <ol></ol> (hoặc <ul></ul>) chỉ chứa trực tiếp một thẻ duy nhất <li></li>.

Bên trong thẻ <li></li> chứa được hầu hết các thẻ HTML/XHTML, tuy nhiên không được
chứa một số thẻ sau đây: <html></html>
, <meta></meta>, <body></body>, <title></title>,

Cấu trúc <ol></ol> lồng bên trong <ol></ol>
HTML viết
<ol>
<li><p>Cơm trưa</p>

18

<ol>
<li>Cơm chiên hải sản</li>
<li>Cơm sườn non nấu cam</li>
<li>Cơm canh chua cá lóc</li>
</ol>
</li>
<li><p>Tráng miệng trái cây</p>
<ol>
<li>Nho tươi</li>
<li>Chuối</li>
<li>Mận</li>
</ol>
</li>
</ol>
Hiển thị trình duyệt:
1. Cơm trưa
1. Cơm chiên hải sản
2. Cơm sườn non nấu cam
3. Cơm canh chua cá lóc
2. Tráng miệng trái cây
1. Nho tươi
2. Chuối
3. Mận

Nho tươi
o
Chuối
o
Mận
Cấu trúc <ul></ul> lồng bên trong <ol></ol>
HTML viết
<ol>

19

<li><p>Cơm trưa</p>
<ul>
<li>Cơm chiên hải sản</li>
<li>Cơm sườn non nấu cam</li>
<li>Cơm canh chua cá lóc</li>
</ul>
</li>
<li><p>Tráng miệng trái cây</p>
<ul>
<li>Nho tươi</li>
<li>Chuối</li>
<li>Mận</li>
</ul>
</li>
</ol>
Hiển thị trình duyệt:
1. Cơm trưa
o
Cơm chiên hải sản

Đây là một liên kết.

Những thẻ thuộc nhóm inline có thể được lồng vào nhau.
<a href="www.hocwebchuan.com"><img src="images/img_sakura.jpg" alt="Sakura" /></a>

Không được sử dụng các thẻ khác bên trong các thẻ inline, cách sử dụng sau đây là không
đúng chuẩn:
<a href="www.hocwebchuan.com"><p>Đây là cấu trúc sai.</p></a> <span><div>Đây là cấu trúc
sai</div></span>
Các thẻ sau đây thuộc nhóm inline:

<a></a>

20


<abbr></abbr>

<acronym></acronym>

<b></b>

<basefont></basefont>

<bdo></bdo>

<big></big>

<br />


<span></span>

<strike></strike>

<strong></strong>





<textarea></textarea>

<tt></tt>

<u></u>

<var></var>
Trong phạm vi bài học, chúng ta chỉ đề cập tới một số thẻ inline thông dụng sau:

Thẻ liên kết <a></a>

Thẻ hiển thị một image (hình ảnh) <img />

Thẻ ngắt đoạn văn bản <br />

Thẻ nhóm các inline <span></span>

Thẻ hiển thị hình ảnh mạnh, mục đích đánh dấu chữ <strong></strong>

Thẻ dùng để nhấn mạnh nội dung văn bản <em></em>

Tham khảo thêm về thẻ <img />.
HTML viết
<p><img src="img_sakura.jpg" alt="Sakura" /></p>
Hiển thị trình duyệt:

Xem thêm ví dụ
Thẻ ngắt đoạn văn bản <br />

Thẻ ngắt đoạn văn bản <br /> dùng để xuống dòng văn bản trong cùng một đoạn văn.

Cấu trúc của thẻ <br /> không có sử dụng thẻ đóng (không dùng <br></br>), mà sử dụng ký
tự kết thúc là một khoảng trắng và ký tự "/".

Tham khảo thêm về thẻ <br />.
HTML viết
<p>Đây là đoạn văn dài rất dài rất dài rất dài<br />
rất dài rất dài rất dài rất dài.</p>
Hiển thị trình duyệt:
Đây là đoạn văn dài rất dài rất dài rất dài
rất dài rất dài rất dài rất dài.
Thẻ nhóm các inline <span></span>

Thẻ nhóm các inline <span></span> dùng để nhóm một hay nhiều thẻ inline khác nhau, thẻ
này không có ý nghĩa về mặt hiển thị, chỉ hỗ trợ định dạng các inline thông qua CSS hoặc Javascript.

Tham khảo thêm về thẻ <span></span>.
HTML viết
<p>Đây là đoạn text có <span class="red">sử dụng</span> span.</p>
Hiển thị trình duyệt:
Đây là đoạn text có sử dụng span.


Liên kết mail
Email: <a href="mailto:"></a>
Email:
Liên kết mail với chủ đề được điền sẵn
Khi sử dụng, người dùng click vào liên kết mail, sẽ lập tức mở ra chương trình gửi mail với chủ đề đã
được điền sẵn.
Các sử dụng này validator sẽ xuất hiện cảnh báo (warning).
Email: <a href="mailto:?subject=Chu%20de%20viet%20o%20day">
</a>
Viết thêm %20 vào các khoảng trắng để chắc chắn rằng trình duyệt sẽ hiển thị thuộc tính text.
Email:

Liên kết mail với chủ đề và nội dung được điền sẵn
Khi sử dụng, người dùng click vào liên kết mail, sẽ lập tức mở ra chương trình gửi mail với chủ đề và
nội dung đã được điền sẵn.
Các sử dụng này validator sẽ xuất hiện cảnh báo (warning).
Email: <a
href="mailto:?subject=Chu%20de%20viet%20o%20day&amp;body=Noi
%20dung%20viet%20o%20day"></a>
Viết thêm %20 vào các khoảng trắng để chắc chắn rằng trình duyệt sẽ hiển thị thuộc tính text.
Email:
Liên kết từ vị trí này tới vị trí khác
<a href="#layout">Liên kết tới id layout</a>
Liên kết tới id layout

Liên kết để mở file word (tương tự cho những định dạng khác)
<a href="doc/ex.doc">Mở file ex.doc trong thư mục "doc"</a>
Mở file ex.doc trong thư mục "doc"
Liên kết mở ra cửa sổ khác - target="_blank"

Ví dụ về <img />
<img />
<img /> - hình và trang html cùng folder

Html
<img src="img_sakura.jpg" alt="Sakura" />

<img /> - hình đặt trong folder "images"

Html
<img src="images/img_sakura.jpg" alt="Sakura" />

<img /> - hình đặt trong folder "images" khác folder với file html

Html
<img src=" /images/img_sakura.jpg" alt="Sakura" />
" /" mang ý nghĩa: từ trang html nhảy ra ngoài folder 1 cấp <img /> - <map /> - <area />
<img /> - sử dụng <map> - dạng rect
<img src="images/img_sakura01.jpg" alt="Sakura" />
<map name="Map" id="Map" />
<area shape="rect" coords="59,56,140,96" href="#" alt="Planet" />
</map/>
Vùng map nằm bên trong hình vuông. 24


dài
rất dài rất dài rất dài rất dài rất dài rất dài rất dài.
Ngắt đoạn khác dòng sử dụng 2 thẻ <p>

<p>Đây là đoạn văn dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài
rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài.</p>

25

<p>Đây là đoạn văn dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài
rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài.</p>
Đây là đoạn văn dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất
dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài.
Đây là đoạn văn dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất
dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài.
Ví dụ về các tag <dl> - <dd> - <dt>
<dl> - <dt> - <dd>
Tag <dl> xác định danh sách (có đề mục và mô tả đề mục).
<dl>
<dt>Trái nho:</dt>
<dd>Thường màu đỏ hoặc xanh, có vị chua, ngọt.</dd>
<dt>Trái chuối:</dt>
<dd>Thường màu vàng, có vị ngọt.</dd>
</dl>
Trái nho:
Thường màu đỏ hoặc xanh, có vị chua, ngọt.
Trái chuối:
Thường màu vàng, có vị ngọt.
<dl>
<dt>Ngày 01/04/2011</dt>

<ol type="a">
<li>Danh sách 1</li>