Bài 7: Đoạn văn trong Html ( HTML paragraphs ) |
Các tạo đoạn văn trong HTML
Tạo đoạn văn
Phần Tử HTML Thẻ <P> Được xác định đây chính là một đoạn văn
Thẻ <p> là một thẻ cơ bản để xuất bản các đoạn văn hiển thị trên các trang website của chúng ta.
Ví Dụ:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Xem DemoHiển thị HTML Ra trình duyệt
Trình duyệt sẽ tự động loại bỏ bất kỳ khoảng trắng và dòng thừa nào khi trang được hiển thị:
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
PreviewTạo Ngắt dòng
thẻ <br> được sử dụng để chèn một ngắt dòng vào trang website ( xuống dòng một đoạn văn hẳn hạn )
<br> là một thẻ trống nên không cần thẻ đóng </br>.
đây là một trong những số thẻ đặt biệt không có thẻ đóng. nhưng đối với thẻ <p> thì có thẻ đóng nhé </p>
Ví dụ:
đây là điều nên sử dụng và thực hiện khi tạo ngắt dòng trong HTML
<p>This is a paragraph <br> with line break.</p>
<p>This is <br>another paragraph <br> with line breaks.</p>
đây là điều không nên sử dụng Trong HTML
<p>This is a paragraph <p></p> with line break.</p>
<p>This is <p></p> another paragraph <p></p> with line breaks.</p>
Preview
Lưu ý: không sử dụng đoạn v8n trống tức là <p></p> để thêm không gian các trang web của bạn. trỉnh duyệt có thể bỏ qua các đoạn văn trống vì nó là thẻ Logic. Thay vào đó, hãy sử dụng thuốc tính Margin của CSS để điều chỉnh không gian xung quanh các phần tử.
Tạo Dòng kẻ ngang
bạn có thể sử dụng thẻ <hr> tạo dòng kẻ 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.
Ví dụ:
<p>This is a paragraph.</p>
<hr>
<p>This is another paragraph.</p>
Preview
Tạo 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ác nhấn phím space-bar hoặc phím Tab trên bàn phím như một khoảng trắng duy nhất.
nhiều ngắt dòng được tạo bên trong mã HTML thong qua việc nhấn phím enter cũng được hiển thị dưới dạng một khoản trắng.
Các đoạn văn bản 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:
<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 kí tự để tạo thêm khoản trắng liên tiếp trong khi chèn thẻ <br> để tạo thêm ngắt dòng trên các trang web của bạn:<p>This paragraph has multiple spaces.</p>
<p>This paragraph has multiple<br><br>line<br><br><br>breaks.</p>
Preview
văn bản được định dạng sẵn
Phần tử HTML <pre> xác định văn bản được định dạng trước.Đôi khi dử dụng , <br> .... để quản lí không gian không thuận tiện lắm.
thây vào đó bạn hãy dụng thẻ <pre></pre> để hiển thị khoảng trắng, tab, ngắt dòng, chính xác như được viết trong file HTML.
Nó rất hữu ít 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 source code.
Ví dụ sau sẽ hiển thị văn bản trong trình duyệt như được viết trong mã nguồn HTML
<pre>
Twinkle, twinkle, little star,
How I wonder what you are!
Up above the world so high,
Like a diamond in the sky.
</pre>
Preview
mẹo: Văn bản bên trong phần tử <pre></pre> đường được trình duyệt hiển thị bằng phông chữ monospace hoặc phông chữ có chiều động cố định ( fixed-widht ), 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 font của CSS
Design by @KiMiDev