Hoạt động của các thẻ trong tài liệu HTML

Thật sự thì văn bản HTMl ( sau đây mình sẽ gọi tắt là văn bản nhé ) cũng dễ thôi các bạn ạ, các bạn mới thường chưa hiểu kỹ nên đôi khi khá lúng túng nhiều khi không hiểu tại sao thẻ này lại hiện thị như này, mình lúc đầu mới tìm hiểu cũng khá là khó khăn và lúng túng như các bạn.

Cùng ôn lại bài trước 1 chút thì trong văn bản chúng ta có 2 phần quan trọng nhất đó là tất cả các thẻ con nắm trong thẻ cha <head >.. </head > ( các thẻ con trong này rất hay các bạn ạ , mình sẽ chia sẻ khi chúng ta đến phần deploy và tối ưu công cụ tìm kiếm nhé !). Và tất cả các thẻ con nằm trong thẻ <body >..... </body > các thẻ con này sẽ hiện thị lên trình duyệt của chúng ta.

Cách thức hiển thị

Trong phần thẻ <body >.. </body > sẽ chứa rất nhiều thẻ con khác và việc của chúng ta là phải phân loại chúng ra, trong bài viết chúng ta sẽ phân loại theo cách cơ bản nhất và quan trọng nhất đó là cách các thẻ được hiển thị mặc định

Đối với 1 thẻ ở điều kiện mặc định chúng sẽ thuộc về 1 trong 2 loại hiển thị sau 1 là dạng Block 2 là Inline.

Block

Thẻ Block ( dạng khối ) sẽ hoạt động theo cách khi nó được hiển thị trên trình duyệt nó sẽ chiếm chiều rộng theo chiều từ trái sang phải hết mức có thể, nó luôn chiếm trọn 1 dòng, và nó có khoảng cách trên dưới với các phần tử khác.

block

Dòng mình gạch thẳng đỏ là chiều rộng mà 1 thẻ dạng khối chiếm, nó chiếm hết nhưng nội dung của nó lại chỉ ngắn có 1 đoạn thế, các khu vực mình khoanh tròn đó là khoảng cách trên dưới giữa chúng, đã là thẻ ở dạng khối thì trên và dưới chúng luôn có khoảng cách, và 1 điều nữa chúng ta thấy đó là 2 thẻ dạng khối thì không nằm trên 1 dòng.

Inline

Thẻ dạng inline thì lại ngược lại so với thẻ dạng khối, nó giống như dạng câu chữ trong văn bản thuần túy của chúng ta vậy . Nó chỉ chiếm chiều rộng cần thiết với nội dung của nó, nó không có khoảng cách trên dưới, và nó không cần phải bắt đầu bằng 1 dòng mới.

inline

Phần mình bôi đỏ là khoảng cách mặc định thuộc về trình duyệt nhé, điều này có nghĩa là mỗi trình duyệt sẽ có những quy định về khoảng cách mặc định của thẻ body , trong thực tế sau này thì chúng ta reset lại trình duyệt để văn bản của chúng ta hiển thị như nhau trên mọi trình duyệt nhé ( vấn đề này cũng đơn giản thôi , bạn không cần phải lo lắng về nó đâu ). Phần mình bôi xanh là điểm kết thúc của câu 1 và bắt đầu câu 2, nếu là dạng block thì câu 2 sẽ nhảy xuống dưới và chiếm trọn 1 dòng mới. Vì là dạng inline nên chúng nằm cùng với nhau trên cùng 1 hàng.

Tổng kết

Các thẻ trong tài liệu HTMl thì đều thuộc về 1 trong 2 cách hiển thị Block hoặc Inline việc nắm rõ cách hoạt động hiển thị của mỗi thẻ là rất quan trọng nó sẽ giúp chúng ta sau này dễ dàng điều chỉnh vị trí cũng như kích thước của mỗi thẻ.

Tag: HTML