Trong bài viết này, chúng ta sẽ xem xét các phần tử cấp nội tuyến HTML và chúng khác với các phần tử cấp khối như thế nào
Các phần tử HTML [Ngôn ngữ đánh dấu siêu văn bản] trong lịch sử được phân loại thành phần tử "cấp độ khối" hoặc phần tử "cấp độ nội tuyến". Vì đây là một đặc điểm trình bày nên ngày nay nó được CSS chỉ định trong Bố cục luồng
Các phần tử nội tuyến là những phần tử chỉ chiếm không gian được giới hạn bởi các thẻ xác định phần tử, thay vì phá vỡ luồng nội dung
Ghi chú. Phần tử nội tuyến không bắt đầu trên một dòng mới và chỉ chiếm nhiều chiều rộng khi cần thiết
Điều này được chứng minh dễ dàng nhất với một ví dụ đơn giản. Đầu tiên, một số CSS đơn giản mà chúng ta sẽ sử dụng
.highlight {
background-color: #ee3;
}
Hãy xem ví dụ sau thể hiện một phần tử nội tuyến
The following span is an inline element; its
background has been colored to display both the beginning and end of the
inline element's influence.
Trong ví dụ này, phần tử cấp khối
The following span is an inline element; its
background has been colored to display both the beginning and end of the
inline element's influence.
5 chứa một số văn bản. Trong văn bản đó là một phần tử
The following span is an inline element; its
background has been colored to display both the beginning and end of the
inline element's influence.
6, là một phần tử nội tuyến. Bởi vì phần tử
The following span is an inline element; its
background has been colored to display both the beginning and end of the
inline element's influence.
6 nằm trong dòng, nên đoạn văn hiển thị chính xác dưới dạng một dòng văn bản duy nhất, không bị gián đoạn, như thế nàybody {
margin: 0;
padding: 4px;
border: 1px solid #333;
}
.highlight {
background-color: #ee3;
}
Bây giờ, hãy thay đổi
The following span is an inline element; its
background has been colored to display both the beginning and end of the
inline element's influence.
6 đó thành một phần tử cấp khối, chẳng hạn như
The following span is an inline element; its
background has been colored to display both the beginning and end of the
inline element's influence.
9
The following paragraph is a
block-level element;
its background has been colored to display both the beginning and end of the
block-level element's influence.
body {
margin: 0;
padding: 4px;
border: 1px solid #333;
}
.highlight {
background-color: #ee3;
}
Được hiển thị bằng CSS giống như trước đây, chúng tôi nhận được
Thấy sự khác biệt? . văn bản trước
The following span is an inline element; its
background has been colored to display both the beginning and end of the
inline element's influence.
9, sau đó là văn bản của
The following span is an inline element; its
background has been colored to display both the beginning and end of the
inline element's influence.
9 và cuối cùng là văn bản theo sau
The following span is an inline element; its
background has been colored to display both the beginning and end of the
inline element's influence.
9Bạn có thể thay đổi cách trình bày trực quan của một phần tử bằng thuộc tính CSS
The following span is an inline element; its
background has been colored to display both the beginning and end of the
inline element's influence.
4. Ví dụ: bằng cách thay đổi giá trị của
The following span is an inline element; its
background has been colored to display both the beginning and end of the
inline element's influence.
4 từ
The following span is an inline element; its
background has been colored to display both the beginning and end of the
inline element's influence.
6 thành
The following span is an inline element; its
background has been colored to display both the beginning and end of the
inline element's influence.
7, bạn có thể yêu cầu trình duyệt hiển thị phần tử nội tuyến trong hộp khối thay vì hộp nội tuyến và ngược lại. Tuy nhiên, làm điều này sẽ không thay đổi danh mục và mô hình nội dung của phần tử. Ví dụ: ngay cả khi phần tử
The following span is an inline element; its
background has been colored to display both the beginning and end of the
inline element's influence.
4 của phần tử
The following span is an inline element; its
background has been colored to display both the beginning and end of the
inline element's influence.
9 được đổi thành phần tử
The following span is an inline element; its
background has been colored to display both the beginning and end of the
inline element's influence.
7, nó vẫn không cho phép lồng phần tử body {
margin: 0;
padding: 4px;
border: 1px solid #333;
}
.highlight {
background-color: #ee3;
}
1 bên trong nóTóm lại, đây là những khác biệt cơ bản về khái niệm giữa các phần tử cấp khối và cấp khối
mô hình nội dungNói chung, các phần tử nội tuyến chỉ có thể chứa dữ liệu và các phần tử nội tuyến khác. Một ngoại lệ là phần tử
body {
margin: 0;
padding: 4px;
border: 1px solid #333;
}
.highlight {
background-color: #ee3;
}
2 nội tuyến có thể chứa các phần tử cấp khối như body {
margin: 0;
padding: 4px;
border: 1px solid #333;
}
.highlight {
background-color: #ee3;
}
1Ghi chú. Các liên kết bao bọc nhiều dòng nội dung cấp khối tạo ra trải nghiệm kém đến mức không thể sử dụng được đối với một số công nghệ hỗ trợ và nên tránh
định dạngTheo mặc định, các phần tử nội tuyến không buộc một dòng mới bắt đầu trong luồng tài liệu. Mặt khác, các phần tử khối thường gây ra hiện tượng ngắt dòng [mặc dù, như thường lệ, điều này có thể được thay đổi bằng CSS]
Các phần tử sau đây là nội tuyến theo mặc định [mặc dù các phần tử khối và nội tuyến không còn được xác định trong HTML 5, thay vào đó hãy sử dụng các danh mục nội dung]
Làm cách nào để tạo khối HTML trong JavaScript?
JavaScript có thể tạo các phần tử HTML không?
Làm cách nào để đặt HTML bằng JavaScript?
tags..
using document. createElement["p"]..