Bài 02: Các phần tử trong HTML
Trong bài trước mình đã viết một thẻ hay phần tử HTML là tất cả nội dung phía trong thẻ mở và thẻ đóng bao gồm cả tên thẻ. Thẻ bắt đầu * Nội dung của phần tử Thẻ kết thúc * <p> Đây là một đoạn </p> <a href="/default.htm"> Đây là một liên kết ...
Trong bài trước mình đã viết một thẻ hay phần tử HTML là tất cả nội dung phía trong thẻ mở và thẻ đóng bao gồm cả tên thẻ.
| Thẻ bắt đầu * | Nội dung của phần tử | Thẻ kết thúc * |
|---|---|---|
| <p> | Đây là một đoạn | </p> |
| <a href="/default.htm"> | Đây là một liên kết | </a> |
| <br> |
HTML có hai dạng thẻ như sau.
- Thẻ mở (opentag) và thẻ đóng (closetag): <div></div>, <p></p>
- Thẻ không có thẻ đóng hay còn gọi là khuyết thẻ đóng (quick closetag): <input />, <meta />
1. Các thẻ html cơ bản
- <html></html>: Đây là thẻ bao quát website.
- <head></head>: Đây là thẻ khai báo các thông tin của website.
- <body></body>: Đây là thẻ trình bày nội dung sẽ hiện thị trên website, thẻ này quan trọng nhất.
Ba thẻ này là ba thẻ bắt buộc phải có trong cấu trúc chuẩn của một website. Thẻ <html> sẽ nằm ngoài cùng nó bao trọn các thẻ <head> và thẻ <body> nằm trong nó.
<!DOCTYPE html>
<html lang="vi">
<head>
</head>
<body>
</body>
</html>
Lưu ý: Các cả nội dung trong cặp thẻ <head></head> sẽ không được hiển thị trên trình duyệt. Mặc định nó là thành phần được trình duyệt ưu tiên tải trước của một Web Page.
2. Trong thẻ <head> ta sẽ có các thẻ khai báo website:
- <title></title>
- <meta />
- <link />
- <script></script>
- <style></style>
3. Trong thẻ <body> ta có rất nhiều thẻ.
Phần tử <body> định nghĩa tất cả nội dung trong văn bản HTML. Phần tử bắt đầu bằng thẻ mở <body> và kết thúc bằng thẻ đóng là </body>
Danh sách các thẻ HTML rất là nhiều nên rất khó mà liệt kê và hướng dẫn sử dụng được. Tuy nhiên rất ít ai sử dụng hết tất cả danh sách các thẻ trong HTML mà họ chỉ tập chung vào một số thẻ cơ bản.
- <div></div>
- <table></table>
- <ul></ul>
- <li></li>
- <p></p>
- <a></a>
- <b></b>
- <i></i>
- <strong></strong>
- <h1></h1>
- <h2></h2>
- <form></form>
- <input />
- <button></button>
Lưu ý: Nếu trong file HTML bạn tạo ra không có các thẻ này thì xem website trên trình duyệt nó sẽ tự động được tạo ra.
4. Các thẻ khuyết thẻ đóng.
Các thẻ loại này ta gọi là quick closetag, nghĩa là nó chỉ tồn tại thẻ mở thì ta sẽ viết như sau:
<tagname/>
Ví dụ:
<input />
<link />
<meta />
5. Sự lồng nhau của các phần tử HTML
Hầu hết các phần tử HTML có thể chứa các phần tử HTML khác. Và các thẻ HTML được lồng với nhau để tạo thành một bổ cục vững chắc, lúc này thẻ con sẽ nằm trọn trong thẻ cha.
Lưu ý: Trong HTML có phân biệt thẻ mạnh và thẻ yếu. Các thẻ mạnh e.g div, span, table, h1, h2... sẽ bao các thẻ như nó hoặc yếu hơn nó. Ngược lại những thẻ yếu p, stong, i chỉ bao được nó hoặc yếu hơn nó. Nó sẽ không bao được thẻ mạnh hơn nó.
<div>
<h1>Thẻ tiêu đề H1 lớn</h1>
<h3>Thẻ tiêu đề H3 nhỏ hơn</h3>
<p>Thẻ văn bản</p>
<b>Thẻ đậm</b>
<i>Thẻ in nghiêng</i>
<u>Thẻ gạch chân</u>
</div>
Xem kết quả
6. Tổng kết.
Trong bài này mình đã hướng dẫn các bạn biết cách đặt một thẻ hay một phần tử HTML trong vào trong một file HTML. Các thẻ HTML có thể lồng vào nhau như thế nào. Trong các bài tiếp theo mình sẽ hướng dẫn các bạn chi tiết hơn nhé.
