Trong HTML, chúng ta có thể dễ dàng thêm đường ngang trong tài liệu bằng cách sử dụng các cách khác nhau sau:
- Sử dụng thẻ HTML
- Sử dụng CSS nội bộ
Sử dụng HTML
Nếu chúng ta muốn thêm dòng ngang trong tài liệu HTML bằng thẻ HTML, thì chúng ta phải làm theo các bước được đưa ra dưới đây. Sử dụng các bước này, chúng ta có thể dễ dàng thêm dòng:
Bước 1: Trước hết, chúng tôi phải nhập mã HTML trong bất kỳ trình soạn thảo văn bản nào hoặc mở tệp HTML hiện có trong trình soạn thảo văn bản trong đó chúng tôi muốn thêm dòng ngang. Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to add the horizontal line.
Bước 2: Bây giờ, đặt con trỏ tại điểm mà chúng tôi muốn thêm dòng trong tài liệu HTML. Và, sau đó chúng ta phải sử dụng thẻ của HTML tại thời điểm đó. Now, place the cursor at the point where we want to add the line in the Html document. And, then we have to use the tag of Html at that point.
Bước 3: Bây giờ, chúng ta phải thêm các thuộc tính của TAG, xác định kích thước, màu sắc và chiều rộng của một dòng. Vì vậy, chúng ta phải nhập thuộc tính kích thước, chiều rộng và màu trong thẻ. Now, we have to add the attributes of tag, which define the size, color and width of a line. So, we have to type the size, width, and color attribute within the tag.
Bước 4: Và, sau đó chúng ta phải chỉ định các giá trị của các thuộc tính này. And, then we have to specify the values of these attributes.
Bước 5: Và cuối cùng, chúng ta phải lưu mã HTML và sau đó chạy tệp trong trình duyệt. And, at last, we have to save the Html code and then run the file in the browser.
Kiểm tra nó ngay bây giờĐầu ra của mã HTML trên được hiển thị trong ảnh chụp màn hình sau:
Sử dụng CSS nội bộ
Sử dụng HTML
Bước 1: Trước hết, chúng tôi phải nhập mã HTML trong bất kỳ trình soạn thảo văn bản nào hoặc mở tệp HTML hiện có trong trình soạn thảo văn bản trong đó chúng tôi muốn thêm dòng ngang. Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to add the horizontal line.
Bước 2: Bây giờ, đặt con trỏ tại điểm mà chúng tôi muốn thêm dòng trong tài liệu HTML. Và, sau đó chúng ta phải sử dụng thẻ của HTML tại thời điểm đó. Now, we have to place the cursor just after the closing of title tag in the head tag of the Html document and then define the styles inside the tag as shown in the following block. And, then we have to type the hr CSS tag for styling the horizontal line.
Bước 3: Bây giờ, chúng ta phải thêm các thuộc tính của TAG, xác định kích thước, màu sắc và chiều rộng của một dòng. Vì vậy, chúng ta phải nhập thuộc tính kích thước, chiều rộng và màu trong thẻ. Now, we have to define the attributes of hr CSS tag. So, we will define the different attributes in the following block:
Bước 4: Và, sau đó chúng ta phải chỉ định các giá trị của các thuộc tính này. Now, we have to type the tag in the body of the Html document to show the horizontal line on the web page. And, at last, we have to save the Html file and then run the file in the Internet browser.
Kiểm tra nó ngay bây giờĐầu ra của mã HTML trên được hiển thị trong ảnh chụp màn hình sau:
Đăng ký nhận bản tin của tôi và không bao giờ bỏ lỡ các bài viết sắp tới của tôi
Trình duyệt của bạn không hỗ trợ các yếu tố âm thanh.
Bài viết này sẽ hướng dẫn bạn cách thêm một đường ngang ở bên phải và bên trái của một văn bản như hình dưới đây:
nếu bận]{
Nhảy để hoàn thành mã!
} khác {
1. Tạo thẻ văn bản HTML.
Trong tệp HTML của bạn, hãy tạo thẻ h2 và đặt cho nó một tên lớp là hr-lines
PEACE
2. Thêm dòng bên trái
Chúng tôi sẽ sử dụng phần tử giả CSS :before để thêm một dòng vào phía bên trái của văn bản. Áp dụng mã bên dưới vào tệp CSS của bạn:
.hr-lines:before{
content:" ";
display: block;
height: 2px;
width: 130px;
position: absolute;
top: 50%;
left: 0;
background: red;
}
Từ mã trên, chúng tôi đang tạo một phần tử mới có chiều cao ____10 và chiều rộng
.hr-lines:before{
content:" ";
display: block;
height: 2px;
width: 130px;
position: absolute;
top: 50%;
left: 0;
background: red;
}
hr-lines bằng cách sử dụng thuộc tính nội dung, sau đó cho nó một vị trí tuyệt đối để di chuyển nó xung quanh, chúng tôi đặt đầu trên .hr-lines:before{
content:" ";
display: block;
height: 2px;
width: 130px;
position: absolute;
top: 50%;
left: 0;
background: red;
}
.hr-lines:before{
content:" ";
display: block;
height: 2px;
width: 130px;
position: absolute;
top: 50%;
left: 0;
background: red;
}
3. Đặt hr-lines thành tương đối
Để các yếu tố giả được áp dụng cho phần tử đích, chúng ta phải đặt vị trí của phần tử thành người thân, điều này sẽ làm cho tất cả chuyển động của :before và
.hr-lines:before{
content:" ";
display: block;
height: 2px;
width: 130px;
position: absolute;
top: 50%;
left: 0;
background: red;
}
Thêm các dòng sau vào các tệp CSS của bạn.
.hr-lines{
position: relative;
}
Kết quả đầu ra
Chúng ta có thể sửa lỗi này bằng cách đặt
.hr-lines:before{
content:" ";
display: block;
height: 2px;
width: 130px;
position: absolute;
top: 50%;
left: 0;
background: red;
}
.hr-lines:before{
content:" ";
display: block;
height: 2px;
width: 130px;
position: absolute;
top: 50%;
left: 0;
background: red;
}
.hr-lines{
position: relative;
/* new lines */
max-width: 500px;
margin: 100px auto;
text-align: center;
}
Chúng tôi đang đặt :before ở phía bên trái của văn bản bằng cách đặt
.hr-lines{
position: relative;
}
4. Thêm đúng dòng
Chúng tôi sẽ sử dụng phần tử giả
.hr-lines:before{
content:" ";
display: block;
height: 2px;
width: 130px;
position: absolute;
top: 50%;
left: 0;
background: red;
}
Thêm các dòng mã sau vào tệp CSS của bạn để thêm dòng phù hợp vào văn bản.
.hr-lines:after{
content:" ";
height: 2px;
width: 130px;
background: red;
display: block;
position: absolute;
top: 50%;
right: 0;
}
Chúng tôi đang đặt
.hr-lines:before{
content:" ";
display: block;
height: 2px;
width: 130px;
position: absolute;
top: 50%;
left: 0;
background: red;
}
.hr-lines{
position: relative;
}
Đầu ra cuối cùng:
}
Mã hoàn chỉnh
.hr-lines{
position: relative;
}
PEACE
I wish for peace in Russia & Ukraine
.hr-lines{
position: relative;
}
.hr-lines{
position: relative;
max-width: 500px;
margin: 100px auto;
text-align: center;
}
.hr-lines:before{
content:" ";
height: 2px;
width: 130px;
background: red;
display: block;
position: absolute;
top: 50%;
left: 0;
}
.hr-lines:after{
content:" ";
height: 2px;
width: 130px;
background: red;
display: block;
position: absolute;
top: 50%;
right: 0;
}
p{
text-transform: uppercase;
color: red;
}
section{
display: flex;
justify-content: center;
align-items:center;
gap: 1rem;
}
div{
width: 500px;
border: 1px solid #ccc;
padding: 10px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
line-height: 1.4;
}
Gói lên
Tôi hy vọng rằng bài viết này sẽ hỗ trợ bạn trong việc tạo một văn bản với các dòng bên phải và bên trái nằm ngang tại một số điểm trong tương lai.
Wow, thật là một hành trình, tôi rất vui vì bạn đã làm cho đến cuối bài viết này, nếu bạn thích và học được điều gì đó mới từ bài viết này, tôi sẽ muốn kết nối với bạn.
Hãy kết nối trên
- Twitter @Unclebigbay143
- LinkedIn @unclebigbay
Hẹn gặp lại các bạn trong bài viết tiếp theo. Tạm biệt 🙋♂
Nếu bạn thấy nội dung của tôi hữu ích và muốn hỗ trợ blog của tôi, bạn cũng có thể mua cho tôi một ly cà phê dưới đây, blog của tôi sống trên cà phê.
Làm thế nào để bạn thêm một dòng mới trong văn bản HTML?
tag. Simply place the tag wherever you want to force a line break. Since an HTML line break is an empty element, there's no closing tag. Below is an HTML file with a
and
element.