HTML Cơ Bản

[Bài 3] Các thẻ trong HTML và thuộc tính cơ bản trong thẻ HTML

4.8/5 - (6 bình chọn)
Các thẻ trong HTML

Các thẻ trong HTML

Phần này chúng ta cùng tìm hiểu các thẻ và thuộc tính cơ bản trong html, các thẻ và thuộc tính này giúp chúng ta có thể định dạng các đoạn văn bản, hình ảnh…

Như ở bài đầu tiên trong seris học html cơ bản các bạn thấy mình để thẻ <!DOCTYPE HTML> nhưng !DOCTYPE không phải là một thẻ HTML, !DOCTYPE chỉ cho trình duyệt web biết được phiên bản ngôn ngữ đánh dấu (markup language) nào được sử dụng trong trang web.

Chúng ta có 2 dạng thẻ:

  • Thẻ mở (opentag) và thẻ đóng (closetag): <div></div>, <p></p>
  • Thẻ không có thẻ đóng (quick closetag): <input />, <meta />

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.

3 thẻ này là 3 thẻ bắt buộc phải có trong cấu trúc chuẩn của website. Thẻ <head> và <body> nằm trong thẻ <html>:

<!DOCTYPE html>
<html lang="vi">
  <head>
    <!-- Khai báo website trong đây -->
  </head>
  <body>
    <!-- Nội dung website trong đây -->
  </body>
</html>

Như các bạn thấy phía trên, ở thẻ <html> mình có thuộc tính lang=’vi’ có nghĩa là khai báo ngôn ngữ tiếng Việt.

Trong thẻ <head> ta sẽ có các thẻ khai báo website:

  • <title></title>
  • <meta />
  • <link />
  • <script></script>
  • <style></style>

Trong thẻ <body> ta có rất nhiều thẻ, ở đây mình sẽ liệt kê 1 số thẻ thông dụng:

  • <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>
  • …..

Mình sẽ làm ví dụ đơn giản cho các bạn hiểu:

See the Pen Serie học HTML cơ bản – Bài 3 by BlogIT.vn (@blogitvn) on CodePen.

Thẻ tiêu đề trong HTML (Thẻ Heading)

Tiêu đề trong HTML được định nghĩa với thẻ <h1>để <h6>.

<h1>định nghĩa tiêu đề quan trọng nhất <h6>định nghĩa tiêu đề ít quan trọng nhất:

Đoạn trong HTML (Thẻ p)

Các đoạn HTML được định nghĩa bằng các thẻ <p>

Liên kết HTML, thẻ <a>

Liên kết HTML được xác định bằng các thẻ <a>

Thẻ hình ảnh trong HTML (Thẻ img)

Hình ảnh HTML được xác định bằng các thẻ <img>.

Tệp nguồn ( src), văn bản thay thế ( alt), kích thước widthvà heightđược cung cấp dưới dạng các thuộc tính:

Ví dụ:

<img src="img_blogIT.jpg" alt="W3Schools" style="width:120px;height:150px"

Nút bấm trong HTML ( Thẻ Button)

Các nút HTML được xác định bằng các thẻ <button>:

Ví dụ

<button>Click me</button>

Danh sách, List trong HTML

Danh sách HTML được xác định bằng thẻ <ul>(không có thứ tự / danh sách dấu đầu dòng) hoặc thẻ (danh sách được <ol>sắp xếp / đánh số), theo sau là <li>thẻ (mục danh sách):

Ví dụ

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Bảng trong HTML (Thẻ Table)

Một bảng HTML được định nghĩa bằng một <table>thẻ.

Các hàng của bảng được xác định bằng <tr>các thẻ.

Tiêu đề bảng được xác định với <th>các thẻ. (in đậm và tập trung theo mặc định).

Các ô bảng (dữ liệu) được xác định bằng <td>các thẻ.

ví dụ

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Các thuộc tính cơ bản trong thẻ html

Mỗi 1 thẻ trong html sẽ có các thuộc tính mô tả cho nó, thuộc tính có cấu trúc:
name="value"
Ví dụ thuộc tính style trong thẻ p, ở đây mình viết style cho nó là font chữ 25px, màu đỏ và căn lề trái 30px

See the Pen Serie học HTML cơ bản – Bài 3 by BlogIT.vn (@blogitvn) on CodePen.

Ở mỗi thẻ sẽ có các thuộc tính nhất định chỉ chạy được trên thẻ đó, các bạn thêm thẻ khác vào nó không báo lỗi nhưng sẽ không chạy được.

Lời kết:

Ở bài này mình giới thiệu qua và demo các thẻ cơ bản, vẫn chưa đi sâu vào từng thẻ. Ở bài sau mình sẽ chia ra 2 phần để phần tích các thẻ, 1 bài là các thẻ nằm trong <head> và 1 bài là các thẻ nằm trong <body>
Các bạn đón xem bài sau nhé.

Related Posts

Add Comment