Nội dung chính
Xem Tạo khối html trong javascript 2024
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
<div>
The following span is an <span class="highlight">inline elementspan>; its
background has been colored to display both the beginning and end of the
inline element's influence.
div>
Trong ví dụ này, phần tử cấp khối
<div>
The following span is an <span class="highlight">inline elementspan>; its
background has been colored to display both the beginning and end of the
inline element's influence.
div>
5 chứa một số văn bản. Trong văn bản đó là một phần tử
<div>
The following span is an <span class="highlight">inline elementspan>; its
background has been colored to display both the beginning and end of the
inline element's influence.
div>
6, là một phần tử nội tuyến. Bởi vì phần tử
<div>
The following span is an <span class="highlight">inline elementspan>; its
background has been colored to display both the beginning and end of the
inline element's influence.
div>
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ày
body {
margin: 0;
padding: 4px;
border: 1px solid #333;
}
.highlight {
background-color: #ee3;
}
Bây giờ, hãy thay đổi
<div>
The following span is an <span class="highlight">inline elementspan>; its
background has been colored to display both the beginning and end of the
inline element's influence.
div>
6 đó thành một phần tử cấp khối, chẳng hạn như
<div>
The following span is an <span class="highlight">inline elementspan>; its
background has been colored to display both the beginning and end of the
inline element's influence.
div>
9
<div>
The following paragraph is a
<p class="highlight">block-level element;p>
its background has been colored to display both the beginning and end of the
block-level element's influence.
div>
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
<div>
The following span is an <span class="highlight">inline elementspan>; its
background has been colored to display both the beginning and end of the
inline element's influence.
div>
9, sau đó là văn bản của
<div>
The following span is an <span class="highlight">inline elementspan>; its
background has been colored to display both the beginning and end of the
inline element's influence.
div>
9 và cuối cùng là văn bản theo sau
<div>
The following span is an <span class="highlight">inline elementspan>; its
background has been colored to display both the beginning and end of the
inline element's influence.
div>
9
Bạ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
<div>
The following span is an <span class="highlight">inline elementspan>; its
background has been colored to display both the beginning and end of the
inline element's influence.
div>
4. Ví dụ: bằng cách thay đổi giá trị của
<div>
The following span is an <span class="highlight">inline elementspan>; its
background has been colored to display both the beginning and end of the
inline element's influence.
div>
4 từ
<div>
The following span is an <span class="highlight">inline elementspan>; its
background has been colored to display both the beginning and end of the
inline element's influence.
div>
6 thành
<div>
The following span is an <span class="highlight">inline elementspan>; its
background has been colored to display both the beginning and end of the
inline element's influence.
div>
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ử
<div>
The following span is an <span class="highlight">inline elementspan>; its
background has been colored to display both the beginning and end of the
inline element's influence.
div>
4 của phần tử
<div>
The following span is an <span class="highlight">inline elementspan>; its
background has been colored to display both the beginning and end of the
inline element's influence.
div>
9 được đổi thành phần tử
<div>
The following span is an <span class="highlight">inline elementspan>; its
background has been colored to display both the beginning and end of the
inline element's influence.
div>
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 dung
Nó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;
}
1
Ghi 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ạng
Theo 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?
. Bạn nên sử dụng dấu nháy đơn trong khi cố định khối mã HTML, điều này sẽ giúp dễ dàng giữ nguyên dấu nháy kép trong mã HTML thực tế hơn.
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”)..
Làm cách nào để thêm div HTML trong JavaScript?
Bạn đang tìm hiểu bài viết: Tạo khối html trong javascript 2024
HỆ THỐNG CỬA HÀNG TRÙM SỈ QUẢNG CHÂU
Điện thoại: 092.484.9483
Zalo: 092.484.9483
Facebook: https://facebook.com/giatlathuhuongcom/
Website: Trumsiquangchau.com
Địa chỉ: Ngõ 346 Nam Dư, Trần Phú, Hoàng Mai, Hà Nội.