Sự khác biệt chính giữa thẻ khối và thẻ dòng. HTML - Các phần tử nội tuyến và khối

Trong chương này:

Cú pháp phần tử

phần tử HTML là đơn vị cấu trúc cơ bản của một trang web, được viết bằng ngôn ngữ HTML. Hình ảnh dưới đây thể hiện cú pháp phần tử. Đối với hầu hết các thẻ, cú pháp thành phần sẽ giống nhau, ngoại trừ các thẻ đơn lẻ.

Tất cả các phần tử trong HTML đều có cùng định dạng:

Phần tử bắt đầu bằng thẻ mở.
Phần tử kết thúc bằng thẻ đóng.
Nội dung của một phần tử là mọi thứ nằm giữa thẻ mở và thẻ đóng.
Một số phần tử không có nội dung (phần tử trống).
Hầu hết các phần tử có thể chứa các thuộc tính

Lưu ý: đừng quên đặt ký hiệu " vào thẻ đóng / ", nó cho trình duyệt biết rằng phần tử của bạn đã kết thúc và phần tử tiếp theo là một phần tử khác.

Phần tử trống

Có một số thành phần trong HTML không có thẻ đóng, chẳng hạn như hoặc
. Những phần tử như vậy được gọi là trống, vì chúng không chứa bất kỳ nội dung nào và không có thẻ đóng.

Các phần tử lồng nhau

Tất cả các tài liệu HTML đều được tạo thành từ các phần tử lồng nhau. Hầu hết chúng có thể chứa các phần tử khác hoặc có thể được lồng trong các phần tử khác và độ sâu lồng của các phần tử không bị giới hạn.

Ví dụ sau bao gồm ba phần tử, hai trong số đó được lồng nhau:

Đoạn đầu tiên của tôi

Khi bạn đặt một phần tử bên trong một phần tử khác, bạn nên cẩn thận để đảm bảo rằng phần tử lồng nhau bắt đầu và kết thúc trong cùng một phần tử. Vì vậy, ví dụ sau đây là sai:

Cái này Rất

Hấp dẫn

Trong HTML, hầu hết các phần tử có thể được chia thành hai nhóm: khối ( khối) và chữ thường ( nội tuyến).

Không phải lúc nào một nhà phát triển mới làm quen cũng có thể hiểu ngay sự khác biệt giữa chúng và cũng có thể nhớ rằng một phần tử thuộc về một nhóm cụ thể. Nhưng theo thời gian, với kinh nghiệm làm việc, bạn sẽ không còn một chút khó khăn như vậy nữa.

Phần tử nội tuyến

Các phần tử nội tuyến bao gồm các thẻ: ,
, , , , , , _{, ^....}


 Các phần tử nội tuyến trong luồng chung được sắp xếp tuần tự trên một dòng, nối tiếp nhau.
 Một phần tử nội tuyến hoặc một phần nội dung của nó chỉ di chuyển sang dòng khác ở cuối dòng hoặc khi có thứ gì đó buộc chúng phải chuyển sang dòng mới.
 Tất nhiên, các phần tử nội tuyến có thể được đặt bên trong các phần tử khối.
Khối phần tử
Các phần tử khối bao gồm các thẻ: 

, 
, 
...

, 
, 
, 
, 
, 
....
Một khối giống như một đơn vị cấu trúc riêng biệt, được ngăn cách bởi một đoạn văn.  Các phần tử khối trong luồng chung được sắp xếp tuần tự cái này dưới cái kia.  Theo mặc định, hai phần tử khối không thể xuất hiện trên cùng một dòng.
Một hoặc nhiều khối cũng có thể được đặt bên trong một khối khác ( cha mẹ) phần tử khối.
Trong CSS, các khối được tạo dựa trên các phần tử HTML và có cấu trúc như sau.

 Bất kỳ khối nào cũng có hình dạng của một hình chữ nhật.
 Phần tử khối có đường viền và nội dung: đây có thể là thông tin văn bản, ảnh, logo công ty, v.v., được gọi là nội dung ( Tiếng Anh nội dung- nội dung).
 Sử dụng thuộc tính border, bạn có thể tạo cho đường viền khối thiết kế cần thiết: đặt độ dày, màu sắc và kiểu dáng của đường kẻ.  Theo mặc định, đường viền là vô hình.
 Giữa nội dung và đường viền có khoảng cách bên trong - lề (thuộc tính phần đệm).  Bạn không cần phải sử dụng chúng.  Nghĩa là, nếu chúng không được đặt rõ ràng bằng thuộc tính đệm, thì đường viền sẽ nằm sát với nội dung của khối hoặc ở một khoảng cách tối thiểu nào đó với nó.  Mặt khác, các trường có thể có kích thước rất cụ thể do nhà phát triển chỉ định.
 Xung quanh khối nhà - bên ngoài đường viền của nó có những khu vực trống, không có người ở được gọi là vết lõm (tài sản lề).  Thụt lề là khoảng cách từ đường viền khối đến các phần tử gần nhất hoặc nếu không có thì đến các cạnh của cửa sổ trình duyệt.  Các vết thụt lề, giống như lề, không có theo mặc định hoặc có chiều rộng tối thiểu được trình duyệt tự động xác định.
 Bạn cũng có thể đặt chiều rộng cố định cho một khối (thuộc tính chiều rộng) và chiều cao (thuộc tính chiều cao), nhưng chỉ dành cho nội dung của nó.  Phần đệm, đường viền và lề không được bao gồm.  Theo mặc định, cả chiều cao và chiều rộng của khối đều được điều chỉnh để phù hợp với không gian chứa nội dung.
Đoạn mã:
 

 Phần tử nội tuyến nằm trên một dòng. 
 Chúng được bao bọc trong một phần tử khối - một đoạn văn! Việc ngắt dòng văn bản diễn ra tự động - ở cuối dòng. 


Khối tiếp theo là một đoạn văn, bắt đầu trên một dòng mới.

 

Hai đoạn văn được sắp xếp.


Bên trong khối thẻ  div! 
 

 
Các đoạn văn bản riêng lẻ được đính kèm trong thẻ span.  Và một phong cách đã được thiết lập cho họ!

Kết quả:
Phần tử nội tuyến nằm trên một dòng. Chúng được bao bọc trong một phần tử khối - một đoạn văn! Việc ngắt dòng văn bản diễn ra tự động - ở cuối dòng.
Khối tiếp theo là một đoạn văn, bắt đầu trên một dòng mới.
Hai đoạn văn được sắp xếp.
Bên trong khối là thẻ div!
Các đoạn văn bản riêng lẻ được đính kèm trong thẻ span.  Và một phong cách đã được thiết lập cho họ!
Các phần tử HTML được chia thành các phần tử nội tuyến và khối dựa trên cách chúng được hiển thị trên trang web.
Các phần tử nội tuyến (nội tuyến)
Các phần tử nội tuyến được thiết kế để thực hiện một số hành động trên văn bản, ví dụ: ngắt dòng, làm nổi bật một đoạn văn bản bằng chữ in nghiêng, làm nổi bật một cách hợp lý một số văn bản và áp dụng các kiểu cho nó bằng CSS, v.v.  Tùy thuộc vào mục đích của phần tử nội tuyến, một đoạn văn bản được đặt giữa thẻ mở và thẻ đóng hoặc thẻ được sử dụng ở bất kỳ đâu trong văn bản, chẳng hạn như để ngắt dòng.
Ví dụ: 
Bạn có thể sử dụng phần tử nội tuyến để làm nổi bật văn bản thu hút sự chú ý của khách truy cập trang web bằng cách sử dụng kiểu in đậm.

Phần tử nội tuyến có chiều rộng bằng chiều rộng nội dung của nó.  Các phần tử nội tuyến không thể chứa các phần tử khối bên trong chúng.
Ví dụ về các phần tử nội tuyến: , ,