1:Một số phần tử hiển thị văn bản khác
Ở các phần trước, đã đề cập tới một số phần tử cốt lõi để hiển thị văn bản như: đoạn, đề mục, danh sách. Phần này sẽ tìm hiểu thêm một số phần tử HTML để hiển thị văn bản nữa, gồm: blockquote, pre, figure, figcaption. Rất khó để xếp những phần tử này vào một loại nào đó, tuy nhiên, chúng đều có hai đặc điểm, một là được hiển thị kiểu khối (block) và hai là được sử dụng để nhóm nội dung (grouping content).
Hiển thị một trích dẫn
Để đánh dấu và hiển thị phần nội dung được trích dẫn từ nguồn khác, sử dụng phần tử blockquote. Nội dung bên trong phần tử blockquote nên bọc lại bằng các phần tử HTML khác như p, heading, ol, ul, dl.
Ví dụ,
[HTML]
<p>Đôi khi cũng phải nhìn lại bản thân, phải yêu bản thân mình, phải thương lấy nó, bởi nó là người bạn gần gũi nhất, trung thành nhất, yêu chứ không nuông chiều, như Sophia Loren đã nói:</p>
<blockquote>
<p>Hãy yêu bản thân vô điều kiện, như là bạn yêu những người thân thiết với mình bất chấp khuyết điểm của họ.</p>
<p>Love yourself unconditionally, just as you love those closest to you despite their faults.</p>
</blockquote>
[Kết quả]
Đôi khi cũng phải nhìn lại bản thân, phải yêu bản thân mình, phải thương lấy nó, bởi nó là người bạn gần gũi nhất, trung thành nhất, yêu chứ không nuông chiều, như Sophia Loren đã nói:
Hãy yêu bản thân vô điều kiện, như là bạn yêu những người thân thiết với mình bất chấp khuyết điểm của họ.
Love yourself unconditionally, just as you love those closest to you despite their faults.
Hiển thị văn bản được định dạng sẵn
Như đã biết, khi biên dịch mã HTML để hiển thị, trình duyệt sẽ bỏ qua các khoảng trắng và các kí tự xuống hàng dư thừa. Vì vậy, với một số văn bản mà nhất thiết phải giữ các khoảng trắng, và các kí tự xuống hàng, ví dụ như một đoạn mã chương trình, một bài thơ, thì hãy sử dụng phần tử pre.
Khi gặp phần tử pre, trình duyệt sẽ hiển thị ra đúng những gì đang có ở dạng mã nguồn, cả nội dung và hình thức trình bày, nghĩa là giữ nguyên tất cả các khoảng trắng và các kí tự xuống hàng. Phần tử pre thuộc kiểu hiển thị khối, phông chữ mặc định được sử dụng là loại phông mà các kí tự có độ rộng bằng nhau, thường được gọi là monospace (ví dụ Courier).
Ví dụ,
[HTML]
<pre>
NGÀY ĐẦU TIÊN ĐI HỌC
Ngày đầu tiên đi học
Mẹ dắt tay đến trường
Tác giả: Viễn Phương
</pre>
<p>
NGÀY ĐẦU TIÊN ĐI HỌC
Ngày đầu tiên đi học
Mẹ dắt tay đến trường
Tác giả: Viễn Phương
</p>
[Kết quả]
Xem trên trình duyệt để thấy sự khác nhau khi sử dụng hai phần tử pre và p.
Phần tử figure và figcapion
Phần tử figure là phần tử hiển thị kiểu khối, nó có thể chứa hình ảnh, đoạn mã, video, bảng, hoặc các loại dữ liệu khác, dùng để minh họa thêm cho nội dung được đề cập trong văn bản. Đây là phần tử mới trong HTML5.
Nếu cần thêm chú thích cho: hình ảnh, đoạn mã, video hoặc bảng nằm trong phần tử figure thì sử dụng phần tử figcaption. Phần tử figcaption có thể nằm trước hoặc sau phần nội dung mà nó chú thích. Caption có nghĩa là chú thích (từ comment cũng có nghĩa là chú thích, nhưng là chú thích cho đoạn mã). Từ figure có nghĩa là hình ảnh, hình minh họa (thường được đánh số) trong các cuốn sách. Ví dụ, xem minh họa trong hình 10 (figure 10).
Ví dụ, hiển thị hình ảnh và chú thích
[HTML]
<figure>
<img src="con-vit.png" alt="Con Vit">
<figcaption>
Một chú vịt
</figcaption>
</figure>
Ví dụ, hiển thị đoạn mã và chú thích
<figure>
<pre><code>
body {
background-color: #000;
color: red;
}
</code></pre>
<figcaption>
Cú pháp viết CSS
</figcaption>
</figure>
.jpg)
.jpg)
0 Nhận xét