Mục lục

Hướng dẫn thực hiện thẻ xuống dòng HTML mới nhất 2022

Thực hiện thẻ xuống dòng trong HTML là một lệnh rất thường dùng trong ngôn ngữ lập trình HTML rất đơn giản và thuận tiện khi muôn sử dụng ký tự xuống dòng trong HTML. Trong bài viết này, atpweb.vn sẽ viết bài viết Hướng dẫn thực hiện thẻ xuống dòng HTML mới nhất 2022.

Hướng dẫn thực hiện thẻ xuống dòng HTML mới nhất 2022

Thẻ <br>

Thẻ <br> dùng để chèn một ngắt xuống dòng

Thẻ <br> thường được đặt bên trong đoạn văn để ngắt văn bản xuống dòng, hoặc đặt giữa hai phần tử để tạo khoảng cách giữa hai phần tử.

Ví dụ:

<!DOCTYPE html>
<html>
<body>
<p>LẬP<br>TRÌNH<br>WEB</p>
<p>Tài liệu hướng dẫn học HTML</p>
<br><br><br><br>
<p>Tài liệu hướng dẫn học CSS</p>
</body>
</html>

Lưu ý:

Thẻ <br> là thẻ đơn, nên nó không có thẻ đóng.
Trong XHTML, để dùng thẻ <br> thì ta phải thêm dấu gạch chéo thành <br />

Hướng dẫn thực hiện thẻ xuống dòng HTML mới nhất
Hướng dẫn thực hiện thẻ xuống dòng HTML mới nhất

Thẻ đoạn văn <p>

Trong HTML thẻ <p> xác định một đoạn văn bản.

Ví dụ

<p>Đây là một đoạn văn bản</p>

<p>Đây là một đoạn văn bản khác</p>

Các trình duyệt sẽ tự động thêm vào một dòng trắng trước và sau một đoạn văn bản.

Hiển thị HTML

Bạn có thể không thể biết chắc chắn cách HTML sẽ được hiển thị như thế nào.

Kích thước màn hình lớn hoặc nhỏ và thay đổi kích thước cửa sổ sẽ tạo ra các kết quả khác nhau.

Với HTML, bạn không thể thay đổi đầu ra bằng cách thêm nhiều khoảng trắng hoặc thêm dòng trống vào mã HTML của bạn.

Trình duyệt sẽ xóa các khoảng trắng hoặc các dòng trống khi trang web hiển thị.

Những khoảng trắng và các dấu xuống dòng nhiều hơn một thì trình duyệt web chỉ giữ lại một khoảng trống.

Ví dụ

<p>

Đây là đoạn văn

chứa rất nhiều dòng

trong mã nguồn,

nhưng trình duyêt

bỏ qua nó.

</p>

<p>

Đây là đoạn văn

chứa nhiều khoảng trắng

trong mã nguồn,

nhưng trình duyệt

bỏ qua nó.

</p>

Kết quả

Đây là đoạn văn chứa rất nhiều dòng trong mã nguồn, nhưng trình duyêt bỏ qua nó. Đây là đoạn văn chứa nhiều khoảng trắng trong mã nguồn, nhưng trình duyệt bỏ qua nó.

Hướng dẫn thực hiện Code xuống dòng trong HTML
Hướng dẫn thực hiện thẻ xuống dòng HTML mới nhất

Đừng quên thẻ đóng

Hầu hết các trình duyệt sẽ hiển thị một cách chính xác nội dung trong HTML ngay cả khi nếu bạn quên thẻ đóng.

Ví dụ

<p>Đây là một đoạn văn bản
<p>Đây là một đoạn văn bản khác

Ví dụ trên sẽ làm việc trong hầu hết các trình duyệt, nhưng không nên quá tin tưởng vào điều này.

Quên thẻ kết thúc có thể tạo ra một chương trình có kết quả không mong muốn hoặc bị lỗi.

Các phiên bản chặt chẽ hơn HTML, như XHTML, không cho phép bạn bỏ qua các thẻ kết thúc.

Thẻ xuống dòng <br>

Trong HTML thẻ <br> định nghĩa một dấu xuống dòng.

Sử dung thẻ <br> Nếu bạn muốn xuống dòng hoặc tạo một dòng mới mà không cần bắt đầu một đoạn mới.

Ví dụ

<p>Đây là<br>một đoạn<br>văn với dấu ngắt dòng</p>

Thẻ <br>là thẻ rất quan trọng của HTML. Nó có thể không cần thẻ kết thúc.

Sự cố của các bài thơ

Ví dụ

<p>Bài thơ sẽ hiển thị như một dòng:</p>

<p>

Đừng dại mà yêu bọn IT.
Chúng nó tài năng, mỗi tội kỳ.
Bạn gái chúng đòi đi đăng ký.
“Bẻ khóa được rồi đăng ký chi?”.
</p>

Kết quả

Bài thơ sẽ hiển thị như một dòng:Đừng dại mà yêu bọn IT. Chúng nó tài năng, mỗi tội kỳ. Bạn gái chúng đòi đi đăng ký. “Bẻ khóa được rồi đăng ký chi?”.

Hướng dẫn thực hiện Code xuống dòng trong HTML
Hướng dẫn thực hiện thẻ xuống dòng HTML mới nhất

Thẻ <pre>

Thẻ <pre> giữ nguyên định dạng như khi chúng ta soạn thảo văn bản.

Phần văn bản nằm trong thẻ<pre> sẽ hiển thị với font chữ cố định về chiều rộng (thường là font Courrier) và nó giữ nguyên các khoảng trắng và các dấu xuống dòng:

Ví dụ

<pre>
Đừng dại mà yêu bọn IT.
Chúng nó tài năng, mỗi tội kỳ.
Bạn gái chúng đòi đi đăng ký.
“Bẻ khóa được rồi đăng ký chi?”.
</pre>

Kết quả

Đừng dại mà yêu bọn IT.

Chúng nó tài năng, mỗi tội kỳ.

Bạn gái chúng đòi đi đăng ký.

“Bẻ khóa được rồi đăng ký chi?”.

Hướng dẫn thực hiện Code xuống dòng trong HTML
Hướng dẫn thực hiện thẻ xuống dòng HTML mới nhất

(Nguồn: Tổng hợp)

Lời tổng kết

Qua bài viết trên của ATP Web đã cung cấp đến các bạn đọc một số thông tin về hữu ích. Hy vọng những thông tin trên của bài viết sẽ hữu ích với các bạn đọc. Cảm ơn các bạn đã dành nhiều thời gian để xem qua bài viết này nhé.

ATPWeb – XÂY DỰNG NGÔI NHÀ ONLINE

Đánh giá bài viết post

LIÊN HỆ TƯ VẤN

Thiết Kế Web
BLOG
Đăng ký tư vấn
Thiết kế website
Đồng hành cùng ATP WEB

Đăng ký tư vấn Thiết kế website