Tìm hiểu về thẻ pre trong HTML

1. Tìm hiểu về thẻ <pre> trong HTML

Trình duyệt có quá trình auto format mã nguồn HTML. Tức là những dấu cách thừa, những xuống hàng trong mã nguồn HTML sẽ bị trình duyệt bỏ qua.
Ví dụ, nếu bạn gõ đoạn code sau trong mã nguồn HTML:

HTML Code:
1
2
3
4
5
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks

thì khi hiển thị trên trình duyệt sẽ như thế này:

Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks

Nếu bạn muốn ngăn trình duyệt không tự động format mã nguồn trong một đoạn code nào đó, bạn hãy dùng thẻ <pre>. Pre là viết tắt của chữ “pre-formatted”. (The <pre> tag defines preformatted text.)

Chữ bên trong thẻ <pre> sẽ hiển thị bằng fixed-width font (font monospace, font chữ mà kích thước và khoảng cách giữa các ký tự cách đều nhau, thường là font Courier), và như vừa mô tả, khoảng trống và các xuống dòng được giữ nguyên.

Ta chỉ dùng thẻ <pre> để hiển thị những đoạn nội dung đặc biệt, hoặc một số đoạn mã máy tính… Ngoài ra thẻ <pre> còn được dùng để trình bày mã nguồn HTML, CSS, JavaScript, PHP… ra ngoài trình duyệt cho dễ đọc.

CSS mặc định cho thẻ <pre>

Phần lớn các trình duyệt sẽ hiển thị nội dung trong thẻ <pre> với các giá trị mặc định sau:

CSS Code:
1
2
3
4
5
6
pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0;
}

2. Một số ví dụ về trang trí sử dụng thẻ <pre>

Hình 1 – Ngôi nhà (bạn nhớ thay [pre] bằng <pre> nhé):

[pre]
。 .. __::_______ ★。
☆ /__________/ \ 。。
。 | _ 画_画 _ |_'| ☆ 。
|__ღ.ღ.ღ ღ.ღ ღ___|
[/pre]

Hình 2 – Mario:

[pre]
── ── ── ── ── ── ── ██ ██ ██ ██ ── ██ ██ ██ ── 
── ── ── ── ── ██ ██ ▓▓ ▓▓ ▓▓ ██ ██ ░░ ░░ ░░ ██ 
── ── ── ── ██ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ██ ░░ ░░ ░░ ██ 
── ── ── ██ ▓▓ ▓▓ ▓▓ ██ ██ ██ ██ ██ ██ ░░ ░░ ██ 
── ── ██ ▓▓ ▓▓ ▓▓ ██ ██ ██ ██ ██ ██ ██ ██ ░░ ██ 
── ── ██ ▓▓ ██ ██ ░░ ░░ ░░ ░░ ░░ ░░ ██ ██ ██ ── 
── ██ ██ ██ ██ ░░ ░░ ░░ ██ ░░ ██ ░░ ██ ▓▓ ▓▓ ██ 
── ██ ░░ ██ ██ ░░ ░░ ░░ ██ ░░ ██ ░░ ██ ▓▓ ▓▓ ██ 
██ ░░ ░░ ██ ██ ██ ░░ ░░ ░░ ░░ ░░ ░░ ░░ ██ ▓▓ ██ 
██ ░░ ░░ ░░ ██ ░░ ░░ ██ ░░ ░░ ░░ ░░ ░░ ██ ▓▓ ██ 
── ██ ░░ ░░ ░░ ░░ ██ ██ ██ ██ ░░ ░░ ██ ██ ██ ── 
── ── ██ ██ ░░ ░░ ░░ ░░ ██ ██ ██ ██ ██ ▓▓ ██ ── 
── ── ── ██ ██ ██ ░░ ░░ ░░ ░░ ░░ ██ ▓▓ ▓▓ ██ ── 
── ░░ ██ ▓▓ ▓▓ ██ ██ ██ ██ ██ ██ ██ ▓▓ ██ ── ── 
── ██ ▓▓ ▓▓ ▓▓ ▓▓ ██ ██ ░░ ░░ ░░ ██ ██ ── ── ── 
██ ██ ▓▓ ▓▓ ▓▓ ▓▓ ██ ░░ ░░ ░░ ░░ ░░ ██ ── ── ── 
██ ██ ▓▓ ▓▓ ▓▓ ▓▓ ██ ░░ ░░ ░░ ░░ ░░ ██ ── ── ── 
██ ██ ██ ▓▓ ▓▓ ▓▓ ▓▓ ██ ░░ ░░ ░░ ██ ██ ██ ██ ── 
── ██ ██ ██ ▓▓ ▓▓ ▓▓ ██ ██ ██ ██ ██ ██ ██ ██ ── 
── ── ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ▓▓ ▓▓ ██ 
── ██ ▓▓ ▓▓ ██ ██ ██ ██ ██ ██ ██ ██ ▓▓ ▓▓ ▓▓ ██ 
██ ██ ▓▓ ██ ██ ██ ██ ██ ██ ██ ██ ██ ▓▓ ▓▓ ▓▓ ██ 
██ ▓▓ ▓▓ ██ ██ ██ ██ ██ ██ ██ ██ ██ ▓▓ ▓▓ ▓▓ ██ 
██ ▓▓ ▓▓ ██ ██ ██ ██ ██ ── ── ── ██ ▓▓ ▓▓ ██ ██ 
██ ▓▓ ▓▓ ██ ██ ── ── ── ── ── ── ── ██ ██ ██ ── 
── ██ ██ ── ── ── ── ── ── ── ── ── ── ── ── ──
[/pre]

Hình 3 – Trái tim:

[pre]
_░▒███████
░██▓▒░░▒▓██
██▓▒░__░▒▓██___██████
██▓▒░____░▓███▓__░▒▓██
██▓▒░___░▓██▓_____░▒▓██
██▓▒░_______________░▒▓██
_██▓▒░______________░▒▓██
__██▓▒░____________░▒▓██
___██▓▒░__________░▒▓██
____██▓▒░________░▒▓██
_____██▓▒░_____░▒▓██
______██▓▒░__░▒▓██
_______█▓▒░░▒▓██
_________░▒▓██
_______░▒▓██
_____░▒▓██
[/pre]

Hình 4 – Chuột Mikey:

[pre]
______________$$$$$$$
 _____________$$$$$$$$$
 ____________$$$$$$$$$$$
 ____________$$$$$$$$$$$
 ____________$$$$$$$$$$$________________$$$$$$$$_______$$$$$$$$
 _____________$$$$$$$$$_______________$$$$$$$$$$$_____$$$$$$$$$$$
 _____$$$$$$_____$$$$$$$$$$__________$$$$$$$$$$$$$___$$$$$$$$$$$$$
 ____$$$$$$$$__$$$$$$_____$$$_______$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
 ___$$$$$$$$$$$$$$$$_________$______$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
 ___$$$$$$$$$$$$$$$$______$__$_______$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
 ___$$$$$$$$$$$$$$$$_____$$$_$________$$$$$$$$$$$$$$$$$$$$$$$$$$$
 ___$$$$$$$$$$$__________$$$_$_____$$__$$$$$$$$$$$$$$$$$$$$$$$$$
 ____$$$$$$$$$____________$$_$$$$_$$$$___$$$$$$$$$$$$$$$$$$$$$
 ______$$$__$$__$$$______________$$$$______$$$$$$$$$$$$$$$$$$
 ___________$$____$_______________$__________$$$$$$$$$$$$$$
 ___________$$____$$$____________$$____________$$$$$$$$$$
 _______________$$$_$$$$$$_$$$$$__________________$$$
 ________________$$____$$_$$$$$
 _______________$$$$$___$$$$$$$$$$
 _______________$$$$$$$$$$$$$$$$$$$$
 _______________$$_$$$$$$$$$$$$$$__$$
 _______________$$__$$$$$$$$$$$___$_$
 ______________$$$__$___$$$______$$$$
 ______________$$$_$__________$$_$$$$
 ______________$$$$$_________$$$$_$_$
 _______________$$$$__________$$$__$$
 _____$$$$_________$________________$
 ___$$$___$$______$$$_____________$$
 __$___$$__$$_____$__$$$_____$$__$$
 _$$____$___$_______$$$$$$$$$$$$$
 _$$_____$___$_____$$$$$_$$___$$$
 _$$_____$___$___$$$$____$____$$
 __$_____$$__$$$$$$$____$$_$$$$$
 __$$_____$___$_$$_____$__$__$$$$$$$$$$$$
 ___$_____$$__$_$_____$_$$$__$$__$______$$$
 ____$$_________$___$$_$___$$__$$_________$
 _____$$_$$$$___$__$$__$__________________$
 ______$$____$__$$$____$__________________$
 _______$____$__$_______$$______________$$
 _______$$$$_$$$_________$$$$$$$__$$$$$$
 __________$$$_________________$$$$$
[/pre]

Hình 5:

[pre]
_____________________________________________▄▄█▀
_________________________________________▄▄█▓█
______________________________▓▓▓___▄▄█▓▓▓█▄▄██████████▄
___________________________▓▓░░░▓▓█▓▓▓▓▓██▓▓▓▓▓▓▓▓▓▓▓▓███▄▄
_________________________▓▓░░░░░░▓▓▓▓▓▓█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓██▄
________________________▓░░░░░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█▄
_______________________▓░░░░░░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▓▓▓█▓▓
____________________▄█▓░░░░░░░░░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▓▓░░▓▄
_________________▄█▓▓░░░▓░░░░░░░▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓░░░▓▓█
______________▄█▓▓▓▓░░▓░░░░░░░░▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓░▓░░░▓▒▒█▄
____________▄█▓▓▓▓▓░░▓░░░░░░░░░▓▓▒▒▒▒▒▒▒▒▒▒█████████▒▓▓░░░▓░░▓▒▒▒▒█▄
__________▄█▓▓▓▓▓▓░░▓░░░░░░░░░▓████████████▓▓▓▓▓▓▓▓█▓▓░░░░▓▓▓▒▒▒▒▒▒█
________▄█▓▓▓▓▓▓▓░░▓░░░░░░░░░░░░░░░░░░░░░░███▓▓▓▓▓▓██▓░░░░░▓▒▒▒▒▒▒▒█▌
_______█▓▓▓▓▓▓▓▓░░▓░░░░░░░░░░░▌░░░░░░░░░░░░░░██▓▓▓▓▓▓██░░░▓▒▒▒▒▒▒▒▒▒█
______█▓▓▓▓▓▓▒▓░░░▓░░░░░░░░▄░░▌░░░░░░░░░░░░░░░▓█▓▓▓▓▓▓▓█░▓██▒▒▒▒▒▒▒▒█
_____█▓▓▓▓▓▓▒▒▓░░░▓░░░░░░░░▐░░▀▄▄░░░░░░░░░░░░▓░░█▓▓▓▓▓▓█▓▒▒▒███▒▒▒▒▒█
____█▓▓▓▓▓▓▒▒▒▓░░░▓░░░░░░▄░░▀▄▄▌_▀█▄░░░░░░░░░░▓█▓▓▓▓▓▓▓█▒▒▒▓▓▓▓██▒▒▒█
__██▓▓▓▒▓▒▒▒▒▓░░░░░░░░░░░▀▄▄▄▌______▀█▄░░░░░░██▓▓▓▓▓▓▓█▓▒▓▓▓▓▓▓▓▓█▒▒█▌
_██▓▓▓▒▒▒▒▒▒▒▓░░░░░░░░░░░░░░▐________▓▓█▄░░░░█▓▓▓▓▓▓▓█░░▓▓▓▓▓▓▓▓▓▓█▒▒█
_██▓▓▓▒▒▒▒▒▒▓▓░░░░░░░░░░░░░░▌_______▓▓▓██▄░░█▓▓▓▓▓███░░░▓▓▓▓▓▓▓▓▓▓▓█▒█
_█▒█▓▓▒▒▒▒▒▒▓▓░░░░░░░░░░░░░░▌______▓▓▓███_▀▄░█▓▓▓▓█░░░░░▓▓▓▓▓▓▓▓▓▓▓▒██
█▒▒█▓▓▒▒▒▒▒▓▓▓░░░░░░░░░░░░▄▀▌_____▓▓████▌__▀▄░███▓▓██░░░▓▓▓▓▓▒▒▒▓▓▒▒▒█
█▒▒▒█▓▒▒▒▒▒▓▓░▓░░░░░░░░░░▀░▄▀▄____▓▓████▄___▀▄░▄▓██░░░░░▓▄▓▒▒▒▒▒▓▒▒▒▒█
█▒▒▒▒█▒▒▒▒▒▓▓░░░░░░░░░░░░░▀░▄▀▄___▓▓███▀▀█▄▄█▀░░█▄▄██▀█▀▒▄▒▒▒▒▒▒▒▒▒▒█
_█▓▒▒▒▒█▒▒▒▓▓▓░░░░░░░░░░░░░░▀░░░░░▓▓▓██▄▄███░░░░░▌▓█▌_▐▀▀▒▒▒▒▒▒▒▒▒▒▒█
_█▓▒▒▒▒▒█▒▒▓▓▓░░░░░░░░░░░░░░░░░░░░░░░░░░░██░░░░░▐_▓██▄▓▀▀████▒▒▒▒▒▒█
_█▓▓▒▒▒▒▒█▓▓▓▓░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▐▓██_█▓▒▒▒▒▒▒███▀▀▀
_█▓▓▓▒▒▒▒▒███▓░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▐▓██▄▓▒▒▒▒▒▒█
_█▓▓▓▓▒▒▒▒▒▒▒████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▓▓▓▓▒▒▒▒▓▓█
_█▒▓▓▓▓▓▓▒▒▒▒▒▒▒▒████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▓▒▒▓▓█
__█▒▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒██░░░░░░░░░░░░░░░░░░░▓░░░░░▓░░░░▓▒▓▓▓█
___█▒▒▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒██░░░░░░░░░░░░░░░░░░▓░░░░░░░░▓▒▒▓▓▓█▌
___█▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒██░░░░░░░░░░░░░░░░░▓░░░░░▓▓▒▒▓▓▒▓▓█
____█▒▒▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒█▓▓▓▓▓░░░░░░░░░░░▓▓▓▓▓▓_█▒▒▒▒▒▓▓▓█
_____█▒▒▒▒▒▒▒▒▒▓▓▓▓▒▒▓▓▓▓▓▒▒█______▓▓▓▓▓▓▓▓▓▓__________▀█▒▒▒▒▓▓▓█
______█▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▓▓▓▓▓▓▒█______________________________▀█▒▒▒▓▓▓█
_______▀█▒▒▒▒▒▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓█_______________________________█▒▒▒▓▓█
_________▀▀█▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▓▓▓▓█_______________________________█▒▒▓▓█
_____________▀█▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▓▓▓█_____________________________█▒▒▓█▀
_______________▀▀▀█▒▒▒▒▒▒▒▒▒▒▒▓▓▓▓█____________________________█▒▓█▀
____________________▀▀▀████▒▒▒▒▒▒▒▓█__________________________▄██▀▀
________________________█▓▓▓██████▒▒█
_________________________█▓▓▓▓▓▒▒▒███
_________________________█▓▓▓▓▓▒▒▒▒▒█
_________________________█▓▓▓▒▓▒▒▒▒█
________________________█▓▓▓▒▒▒▒▒▒█
_______________________█▓▓▒▒▒▒▒▒█▀
____________________▄█▓▓▒▒▒▒▒█▀
_______________▄▄▄█▓▓▒▒▒██▀▀
____________________▀▀▀▀▀
[/pre]

Bạn có thể xem thêm một số hình khác tại http://fsymbols.com/text-art/blocky/ hoặc lên mạng search với từ khóa “Text Art” hoặc “ASCII Art” sẽ cho ra rất nhiều hình đẹp khác.

Cheers,

AZDigi - Hosting WordPress tốt nhất!
The following two tabs change content below.
Tôi là kỹ sư Cơ khí, kỹ sư CNTT trường ĐH Bách Khoa Hà Nội. Tôi hoạt động trong lĩnh vực CNTT, bao gồm Software Development, Web Design, Web Development, Interactive Multimedia and Mobile App, Mobile Game Development. Tôi rất yêu công nghệ và tôi lập ra trang web này để chia sẻ kiến thức về công nghệ với mọi người.

Bình luận

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

*
*
Website