HTML & CSS Lập trình web

Phân loại thẻ HTML

Như chúng ta đã biết có rất nhiều loại thẻ HTML khác nhau, chúng ta không thể nào nhớ hết tất cả các thẻ này, nhưng nếu không nhớ thì làm sao chúng ta làm việc tốt với HTML được ? Các bạn yên tâm Aki sẽ giới thiệu cho các bạn một tuyệt chiêu, không cần biết quá nhiều về thẻ HTML đó nhưng chúng ta vẫn có thể làm việc với nó một cách dễ dàng.

Chúng ta chỉ cần biết trong HTML bao gồm các loại thẻ nào, và sự khác nhau giữa các loại thẻ ra làm sao. Nếu nắm được nội dung này thì chúng ta có thể an tâm làm việc với HTML rồi nhé. Như vậy trong HTML sẽ có 3 định dạng thẻ và các Phân loại thẻ HTML này rất là quan trọng.

1/ Phân loại thẻ HTML

Khối None:

  • Khối này không hiển thị nội dung bên trong
  • Ví dụ: html, head, title, meta, link, script, style, …

Khối Block

  • Khối này hiển thị nội dung bên trong và chiều ngang tràn hết trình duyệt
  • Ví dụ: body, h1, div, p, center, ul, form, br, table, …

Khối Inline

  • Khối này hiển thị nội dung bên trong và chiều ngang tùy thuộc độ dài của các đối tượng bên trong khối. Và nó sẽ nằm trên một dòng
  • Ví dụ: span, a, img, b,  i, u, …

Lưu ý: Các thẻ HTML trong cặp thẻ <body></body> thường là kiểu block và inline.

2/ Sử dụng chức năng Inspect Element

Click phải vào nội dung cần kiểm tra mã HTML và chọn Inspect Element (Kiểm tra phần từ).

Phân loại thẻ HTML

Kết quả HTML sinh ra nội dung trên sẽ hiển thị như hình vẽ.

Phân loại thẻ HTML

Với kết quả này chúng ta biết được nội dung HTML is easy được tạo ra bởi đoạn mã HTML.

3/  Ví dụ phân biệt Block và Inline

Quan sát khối Block

Phân loại thẻ HTML

Quan sát khối Inline

Phân loại thẻ HTML

 

Nhận xét: Khối Block có phần tô vàng tràng hết chiều rộng trình duyệt còn khối Inline có phần tô vàng chỉ bao bọc sát nội dung của nó (Phần tô vàng chính là phần diện tích chiếm của khối đó).

4/ Định dạng CSS cơ bản

Bước 01: Tạo cấu trúc tập tin thư mục

Phân loại thẻ HTML

Bước 02: Tạo tập tin 01.css nằm trong foler css

Bước 03: Kéo tập tin 01.css vào trong tập tin html hiện tại

Đặt đoạn mã này vào trong cặp thẻ head của tập tin html hiện tại.

Bước 04: Tạo class cho các thẻ HTML

Chúng ta tạo các class cho các thẻ HTML mục đích để định dạng CSS cho các thẻ này.

Bước 05: Xây dựng nội dung cho tập tin 01.css

Phần khai báo CSS này tạm thời chúng ta sẽ chịu khó chấp nhận, tuy nhiên Aki cũng sẽ giải thích một tý cho các bạn nắm.

  • border: 1px solide #000 tạo phần border cho toàn bộ nội dung của class div, border có mã màu #000 và kiểu của border là kiểu solid.
  • padding: 3px tạo khoảng cách giữa nội dung với các đường viền là 3px.

Kiểm tra kết quả:

Phân loại thẻ HTML

5/ Chuyển đổi kiểu Block thành kiểu Inline

  • Sử dụng thuộc tính float trong CSS
  • Sử dụng thuộc tính display trong CSS

6/ Chuyển đổi kiểu Inline thành kiểu Block

  • Sử dụng thuộc tính display trong CSS

7/ Lời kết

Việc nhận biết các Phân loại thẻ HTML là vấn đề rất quan trọng, nó sẽ giúp ích và giải quyết cho các bạn khá nhiều rắc rối liên quan tới HTML đấy, với 3 phân loại thẻ và cách chuyển đổi qua lại giữa các thẻ thì Aki tin rằng bạn đã bắt đầu hứng thú với HTML và đã sẵn sàng chinh phục nó cùng với Aki.

Series Navigation<< Các thẻ HTML thông dụngCấu trúc cơ bản của thẻ HTML >>
Nguồn: laptrinhweb.org