07/09/2018, 14:43

Văn bản trong HTML

Thẻ <p> xác định một đoạn văn bản trong HTML: <p>Đây là đoạn văn 1.</p> <p>Đây là đoạn văn 2.</p> Lưu ý: Các trình duyệt sẽ tự động thêm khoảng trắng trước và sau một đoạn văn. Hiển thị trong HTML Bạn không thể chắc chắn ...

Thẻ <p> xác định một đoạn văn bản trong HTML:

<p>Đây là đoạn văn 1.</p>
<p>Đây là đoạn văn 2.</p>

Lưu ý: Các trình duyệt sẽ tự động thêm khoảng trắng trước và sau một đoạn văn.

Hiển thị trong HTML

  • Bạn không thể chắc chắn trong HTML sẽ được hiển thị như thế nào.
  • Kết quả hiển thị sẽ khác nhau tùy theo kích thước của màn hình.
  • Trong HTML, bạn không thể thay đổi kết quả hiển thị bằng cách thêm khoảng trắng hoặc thêm dòng giống như soạn thảo văn bản.

Trình duyệt sẽ loại bỏ bất kỳ khoảng trắng và dòng bổ sung khi trang được hiển thị:

<p>
Đây là đoạn văn
bao gồm vài đoạn ngắt
trong mã nguồn,
nhưng trình duyệt
bỏ qua nó.
</p>

<p>
Đây là đoạn văn
bao gồm     vài khoảng trắng
trong mã     nguồn,
nhưng    trình duyệt
bỏ qua nó.
</p>

Đừng quên thẻ đóng

Đa phần trình duyệt web sẽ hiển thị chính xác, kể cả khi bạn không dùng thẻ đóng:

<p>Đây là đoạn văn 1.
<p>Đây là đoạn văn 2.

Ví dụ trên hiển thị tốt ở đa số trình duyệt, tuy nhiên tốt hơn hết hãy luôn dùng thẻ đóng. Vì nhiều trường hợp kết quả hiển thị sẽ bị lỗi.

Ngắt dòng trong HTML

Phần tử <br> xác định sự ngắt dòng trong HTML. Sử dụng <br> nếu bạn muốn ngắt dòng (một dòng mới) mà không cần bắt đầu một đoạn mới:

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

Bài thơ trong HTML

Bài thơ dưới đây trong HTML sẽ được hiển thị trên 1 dòng:

<p>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.
</p>

Phần tử <pre> trong HTML

Phần tử <pre> trong HTML xác định văn bản được định dạng sẵn. Văn bản bên trong một phần tử <pre> được hiển thị bằng một phông chữ cố định chiều rộng (thường là Courier), và nó bảo vệ cả khoảng trắng cùng đoạn ngắt dòng.

Ví dụ:

<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.
</pre>

Tham khảo thêm

Thẻ Mô tả
<p> mô tả một đoạn văn
<br> chèn đoạn ngắt dòng
<pre> định nghĩa văn bản được định dạng trước
Tham khảo thêm 2 khóa học hữu ích do giảng viên quốc tế trường FPT Arena giảng dạy:
  • Khóa học lập trình frontend cơ bản : Bootstrap 4, Jquery, CSS3, HTML5
  • Học lập trình Frontend nâng cao qua project thực tế
0