Đoạn văn HTML
Trong hướng dẫn này, bạn sẽ học cách tạo đoạn văn trong HTML.
Tạo đoạn văn
Phần tử đoạn văn được sử dụng để xuất bản văn bản trên các trang web.
Các đoạn được xác định bằng thẻ <p>. Thẻ đoạn văn là một thẻ rất cơ bản và thường là thẻ đầu tiên bạn sẽ cần để xuất bản văn bản của mình trên các trang web. Đây là một ví dụ:
Ví dụ
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>Ghi chú: Các biểu định kiểu tích hợp trong trình duyệt sẽ tự động tạo một số khoảng trống bên trên và bên dưới nội dung của một đoạn văn (được gọi là lề - margin), nhưng bạn có thể ghi đè nó bằng cách sử dụng CSS.
Đóng một phần tử đoạn văn
Trong HTML 4 và các phiên bản trước đó, chỉ cần sử dụng thẻ mở là đủ để bắt đầu một đoạn văn mới. Hầu hết các trình duyệt sẽ hiển thị HTML một cách chính xác ngay cả khi bạn quên thẻ kết thúc. Ví dụ:
Ví dụ
<p>This is a paragraph.
<p>This is another paragraph.Mã HTML trong ví dụ trên sẽ hoạt động trong hầu hết các trình duyệt web, nhưng đừng dựa vào nó. Quên thẻ kết thúc có thể tạo ra kết quả hoặc lỗi không mong muốn.
Ghi chú: Vì mục đích tương thích chuyển tiếp và thực hành mã hóa tốt, bạn nên sử dụng cả thẻ mở và thẻ đóng cho các đoạn văn.
Tạo ngắt dòng
Thẻ <br> được sử dụng để chèn một ngắt dòng trên trang web.
Vì <br> là một phần tử trống , vì vậy không cần thẻ </br> tương ứng .
Ví dụ
<p>This is a paragraph <br> with line break.</p>
<p>This is <br>another paragraph <br> with line breaks.</p>Ghi chú: Không sử dụng đoạn văn trống tức là <p></p> để thêm không gian trong các trang web của bạn. Trình duyệt có thể bỏ qua các đoạn trống vì nó là thẻ logic. Thay vào đó, hãy sử dụng thuộc tính CSS margin để điều chỉnh không gian xung quanh các phần tử.
Tạo đường kẻ ngang
Bạn có thể sử dụng thẻ <hr> để tạo các đường kẻ hoặc dòng ngang để phân tách các phần nội dung trên trang web một cách trực quan. Giống như <br>, thẻ <hr> cũng là một phần tử trống. Đây là một ví dụ:
Ví dụ
<p>This is a paragraph.</p>
<hr>
<p>This is another paragraph.</p>Quản lý Khoảng trắng
Thông thường trình duyệt sẽ hiển thị nhiều khoảng trống được tạo ra bên trong mã HTML bằng cách nhấn phím space-bar hoặc phím tab trên bàn phím như một không gian duy nhất. Nhiều ngắt dòng được tạo bên trong mã HTML thông qua việc nhấn phím enter cũng được hiển thị dưới dạng một khoảng trắng.
Các đoạn văn sau sẽ được hiển thị trong một dòng duy nhất mà không có bất kỳ khoảng trống nào:
Ví dụ
<p>This paragraph contains multiple spaces in the source code.</p>
<p>
This paragraph
contains multiple tabs and line breaks
in the source code.
</p>Chèn để tạo thêm khoảng trắng liên tiếp, trong khi chèn thẻ <br> để tạo ngắt dòng trên các trang web của bạn, như được minh họa trong ví dụ sau:
Ví dụ
<p>This paragraph has multiple spaces.</p>
<p>This paragraph has multiple<br><br>line<br><br><br>breaks.</p>Xác định văn bản được định dạng sẵn
Đôi khi, việc sử dụng , <br >v.v. để quản lý không gian không thuận tiện lắm. Ngoài ra, bạn có thể sử dụng thẻ <pre> để hiển thị khoảng trắng, tab, ngắt dòng, v.v. chính xác như được viết trong tệp HTML. Nó rất hữu ích trong việc trình bày văn bản mà dấu cách và ngắt dòng là quan trọng như bài thơ hoặc mã.
Ví dụ sau sẽ hiển thị văn bản trong trình duyệt giống như trong mã nguồn:
Ví dụ
<pre>
Twinkle, twinkle, little star,
How I wonder what you are!
Up above the world so high,
Like a diamond in the sky.
</pre>Mẹo: Văn bản bên trong thẻ <pre> thường được trình duyệt hiển thị bằng phông chữ đơn hoặc phông chữ có chiều rộng cố định, chẳng hạn như Courier, nhưng bạn có thể ghi đè điều này bằng cách sử dụng thuộc tính CSS font.