Thẻ Pre Trong HTML Là Gì? Muốn Sử Dụng Dấu Tab Thì Làm Sao?
Có thể bạn quan tâm
Chức năng của thẻ Pre là gì?
Thẻ <pre>: Thẻ này dùng để xác định văn bản được định dạng đúng như lúc bạn nhập code.
Bạn có thể hiểu như khi bạn code 1 đoạn văn bản, chủ ý của bạn là sử dụng khoảng trắng dài (khoảng tab chẳng hạn) hay xuống dòng (nhấn enter) nhưng khi đưa vào trình duyệt thì trình duyệt chỉ xem đấy như 1 khoảng trắng bình thường. Thì lúc này cần thẻ <pre> được sử dụng để cho trình duyệt hiểu rằng đây là những gì tôi muốn là chủ ý của tôi hãy để nguyên như vậy.
Hãy cùng với mình đi vào ví dụ cụ thể để hiểu rõ hơn về cách sử dụng của thẻ này nhé!
Trường hợp sử dụng thẻ pre. Muốn sử dụng dấu tab trong văn bản thì làm sao?
Cú pháp: <pre> đoạn văn bản </pre>
Ví dụ:
<!DOCTYPE html> <html> <head> </head> <body> <pre> Bạn có thể hiểu như khi bạn code 1 đoạn văn bản, chủ ý của bạn là sử dụng khoảng trắng dài (khoảng tab chẳng hạn) hay xuống dòng (nhấn enter) nhưng khi đưa vào trình duyệt thì trình duyệt chỉ xem đấy như 1 khoảng trắng bình thường </pre> </body> </html>Đấy là khi bạn sử dụng thẻ <Pre> thì đoạn văn bản trong code như thế nào thì sẽ được hiển thị trên trình duyệt như vậy.
Thế khi không sử dụng thẻ <Pre> thì sẽ như thế nào? Mình sẽ lấy ví dụ khi không sử dụng thẻ <Pre> mà sẽ sử dụng thẻ <p> để thay thế, các bạn hãy cùng mình thử nghiệm để xem kết quả sẽ thê nào nhé!
<!DOCTYPE html> <html> <head> </head> <body> <p> Bạn có thể hiểu như khi bạn code 1 đoạn văn bản, chủ ý của bạn là sử dụng khoảng trắng dài (khoảng tab chẳng hạn) hay xuống dòng (nhấn enter) nhưng khi đưa vào trình duyệt thì trình duyệt chỉ xem đấy như 1 khoảng trắng bình thường </p> </body> </html>Như vậy khi không sử dụng thẻ <Pre> thì đoạn văn bản được hiện lên trình duyệt sẽ không như trong đoạn code nữa mà sẽ được trình duyệt sửa đổi, dù các sử dụng tab, enter, các khoảng trắng chủ ý thì đều chuyển về 1 đoạn văn bản nối dài với nhau.
Vậy là các bạn đã tìm hiểu về tag <Pre> trong HTML. Các bạn có thể thử nghiệm thẻ <Pre> tại đây: Thử nghiệm thẻ <Pre>
Nếu thấy bài viết hay nhớ like và share để mọi người cùng biết nhé!
Từ khóa » Thẻ Pre Trong Html
-
Thẻ
Trong HTML - Web Cơ Bản
-
Thẻ Pre Trong HTML - Học Html Cơ Bản đến Nâng Cao - VietTuts
-
Thẻ Pre Trong HTML
-
Pre | Tag Html | Học Web Chuẩn
-
Thẻ Pre Trong HTML - ge
-
Thẻ
Trong HTML - Hoclaptrinh
-
Thẻ Pre Trong HTML.
-
HTML Pre Tag - W3Schools
-
Ngôn Ngữ HTML - Thẻ HTML Pre
-
Thẻ Pre Trong HTML - Lập Trình Từ Đầu
-
Ví Dụ Sử Dụng Thẻ Pre Trong HTML - WebVN
-
Thẻ
| Thẻ HTML
-
Thẻ Pre Trong HTML - Web888 Chia Sẻ Kiến Thức Lập Trình, Kinh ...
-
Hẻ Pre Trong HTML - Các Thẻ HTML