Thẻ pre trong HTML

138 lượt xem
Share

Khi cần hiển thị nguyên cú pháp của code hay mã nguồn, hay đơn giản share code trên blog thì ta thường dùng thẻ pre. Để tìm hiểu về thẻ pre trong HTML, mời bạn đọc tham khảo bài viết dưới đây của eLib.

Mục lục nội dung

Thẻ pre trong HTML

1. Thẻ pre trong HTML

Thẻ HTML <pre> hay thẻ pre trong HTML được sử dụng để để chỉ định các văn bản đã được định dạng trước. Văn bản nằm trong thẻ <pre>.......</pre> được hiển thị trong font có chiều rộng cố định. Thông thường thì fornt hiển thị là Courier. Các khoảng trắng và xuống dòng trong thẻ pre không bị mất đi giống như các thẻ khác khi hiển thị ra trình duyệt.

Thẻ pre trong HTML được sử dụng rộng rãi để hiển thị ví dụ về ngôn ngữ. Ví dụ: Java, C #, C, C ++ ... bởi vì nó hiển thị y nội dung y trang như khi bạn gõ.

2. Ví dụ về thẻ pre trong HTML

<pre> 
Day la van ban da duoc dinh dang  
Boi viec su dung the HTML pre. Cac khoang trong
    va dau xuong dong khong bi mat di khi hien thi.  
</pre>

Kết quả:

Day la van ban da duoc dinh dang   
Boi viec su dung the HTML pre. Cac khoang trong
    va dau xuong dong khong bi mat di khi hien thi.

2. Ví dụ về thẻ pre trong HTML: Hiển thị code java

<pre> 
package vn.eLib;

public class FirstJava {
    public static void main(String args[]) {
        System.out.println("hello java");
    }
}
</pre>
Kết quả:
package vn.eLib;

public class FirstJava {
    public static void main(String args[]) {
        System.out.println("hello java");
    }
}

Chú ý: Nếu bạn xóa thẻ pre khỏi đoạn code trên, tất cả nội dung sẽ bị hiển thị trên 1 dòng.

Khi bỏ thẻ pre sẽ trông như thế này

package vn.viettuts; public class FirstJava { public static void main(String args[]) { System.out.println("hello java"); } }

4. Thuộc tính width

Thẻ HTML <pre> cũng hỗ trợ thuộc tính width. Thuộc tính width chỉ định chiều rộng mong muốn của văn bản được định dạng trước. Tuy nhiên, nó không được hỗ trợ trong HTML 5.

Trên đây là bài viết của eLib.VN về Thẻ pre trong HTML. 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. Chúng tôi hy vọng, bài viết hữu ích cho bạn đọc.

138 lượt xem
Share
Ngày:09/11/2020 Chia sẻ bởi:
TẢI VỀ XEM ONLINE

CÓ THỂ BẠN QUAN TÂM