Thẻ HTML

 xác định một khối văn bản được định dạng trước. Nó rất hữu ích khi bạn muốn hiển thị văn bản mà định dạng đánh máy ảnh hưởng đến ý nghĩa của nội dung, chẳng hạn như các đoạn mã và bài thơ. Theo mặc định, trình duyệt bỏ qua bất kỳ loại khoảng trắng nào - khoảng trắng văn bản bổ sung, dòng 

Bạn đang xem: ví dụ về thẻ trước html

HTML & lt; pre & gt Thẻ; xác định một khối văn bản được định dạng trước. Nó rất hữu ích khi bạn muốn hiển thị văn bản mà định dạng đánh máy ảnh hưởng đến ý nghĩa của nội dung, chẳng hạn như các đoạn mã và bài thơ.

Theo mặc định, trình duyệt bỏ qua bất kỳ loại khoảng trắng nào - khoảng trắng thừa, ngắt dòng, tab hoặc bất kỳ ký tự định dạng nào khác - được chỉ định trong HTML.

Nhưng với thẻ & lt; pre & gt; , bạn có thể bảo toàn tất cả khoảng trắng mà bạn muốn. Họ phông chữ mặc định được gán cho bất kỳ văn bản nào bên trong & lt; pre & gt; monospace , nhưng bạn có thể ghi đè nó bằng CSS nếu muốn.

Trong hướng dẫn này, chúng ta sẽ xem xét chi tiết thẻ & lt; pre & gt; . Tôi sẽ chỉ cho bạn cách nó hoạt động bằng cách sử dụng một số đoạn mã "có và không" để bạn có thể viết HTML vui hơn, vì HTML không bao giờ được thiết kế để nhàm chán.

Cú pháp cơ bản

Cũng giống như nhiều phần tử HTML khác, thẻ & lt; pre & gt; cũng sử dụng thẻ đóng ( & lt; / pre & gt; ).

  & lt; pre & gt;
            Chào thế giới,
            văn bản này nằm bên trong thẻ trước, tất cả các khoảng trắng là


        bảo quản
& lt; / pre & gt;
 

Xem ảnh chụp màn hình bên dưới để biết kết quả:
basic

Ví dụ về thẻ & lt; pre & gt; trong HTML

Dưới đây là một số đoạn mã và ảnh chụp màn hình cho bạn biết cách hoạt động của thẻ & lt; pre & gt; .

Khoảng trắng trong HTML không có thẻ & lt; pre & gt;

  & lt; div & gt;
     & lt; p & gt; Có thêm khoảng trắng trong hai từ tiếp theo nhưng chúng bị trình duyệt bỏ qua: Xin chào
     Thế giới & lt; / p & gt;
& lt; / div & gt;
 
  body {
          hiển thị: flex;
          align-các mục: trung tâm;
          justify-content: trung tâm;
          chiều cao: 100vh;
      }

p, trước {
          kích thước phông chữ: 1.2rem;
      }
 

ss1-1

Khoảng trắng trong HTML với thẻ pre

  & lt; div & gt;
     & lt; p & gt; Có thêm khoảng trắng trong hai từ tiếp theo, được hiển thị bởi & lt; code & gt; pre & lt; / code & gt;
     thẻ: & lt; pre & gt; Hello World & lt; / pre & gt; & lt; / p & gt;
& lt; / div & gt;
 

ss2-1

Tab trong HTML không có thẻ pre

  & lt; div & gt;
     & lt; p & gt; Có các tab ở giữa các từ tiếp theo nhưng chúng bị trình duyệt bỏ qua: Tôi là một người cắm trại & lt; / p & gt;
& lt; / div & gt;
 

ss3-1

Tab trong HTML có thẻ pre

  & lt; div & gt;
     & lt; p & gt; Có các tab giữa các từ tiếp theo, được hiển thị bằng & lt; mã & gt; pre & lt; / code & gt; & lt; pre & gt; tag: Tôi
     người cắm trại & lt; / pre & gt; & lt; / p & gt;
& lt; / div & gt;
 

ss4-1

Ngắt dòng trong HTML mà không có thẻ & lt; pre & gt;

  & lt; div & gt;
& lt; p & gt;
        Có các ngắt dòng giữa các từ tiếp theo:
        Tôi

        một

        người cắm trại
    & lt; / p & gt;
& lt; / div & gt;
 

ss5-1

Ngắt dòng trong HTML với thẻ & lt; pre & gt;

  & lt; div & gt;
    & lt; p & gt;
    Có các ngắt dòng giữa các từ tiếp theo:
   & lt; trước & gt;
   Tôi

   một

   người cắm trại
   & lt; / pre & gt;
    & lt; / p & gt;
& lt; / div & gt;
 

ss6-1

Như bạn có thể hình dung bây giờ, thẻ & lt; pre & gt; cực kỳ hữu ích trong nghệ thuật CSS (HTML art nữa), hình minh họa, để chèn các đoạn mã vào HTML và nhiều hơn nữa.

Cách Chèn Đoạn mã mà không có Thẻ & lt; pre & gt;

Thông thường, bạn có thể cần hiển thị các đoạn mã trên các trang web cho mục đích học thuật hoặc trong tài liệu của một ngôn ngữ hoặc khung lập trình. Điều này giúp bạn / người bảo trì giao tiếp đúng cách với người học.

Và bạn sẽ muốn giữ khoảng trắng ngay cả sau khi sử dụng thẻ & lt; code & gt; để làm điều đó và đó chính xác là những gì thẻ & lt; pre & gt; thực hiện .

  & lt; div & gt;
& lt; h3 & gt; Một số Đặt lại CSS & lt; / h3 & gt;
      & lt; p & gt;
        Bạn có biết rằng bạn có thể xóa các trình duyệt đệm và lề mặc định
        chèn vào các trang web?
      & lt; / p & gt;
      & lt; mã & gt; * {đệm: 0; lề: 0; box-sizing: border-box; } & lt; / mã & gt;
& lt; / div & gt;
 
  body {
      hiển thị: flex;
      align-các mục: trung tâm;
      justify-content: trung tâm;
      chiều cao: 100vh;
    }
 

ss7-1

Cách Chèn Đoạn mã bằng thẻ & lt; pre & gt; trong HTML

  & lt; div & gt;
& lt; h3 & gt; Một số Đặt lại CSS & lt; / h3 & gt;
      & lt; p & gt;
        Bạn có biết rằng bạn có thể xóa các trình duyệt đệm và lề mặc định
        chèn vào các trang web?
      & lt; / p & gt;
      & lt; trước & gt;
    & lt; mã & gt;
        * {
         đệm: 0;
         lề: 0;
         box-sizing: border-box;
       }
    & lt; / mã & gt;
    & lt; / pre & gt;
      & lt; p & gt; Giờ thì bạn đã biết điều đó. & lt; / p & gt;
& lt; / div & gt;
 

ss8 < / p>

Một chút nghệ thuật không có thẻ & lt; pre & gt;

  & lt; div & gt; & lt; p & gt; ^^^^^^^^^^^^^^^^^^^^^
                & lt; & gt; & lt; & gt; & lt; & gt; ^ Tôi là Kolade, ^
               & lt; & gt; & lt; & gt; ^ Nhà phát triển web từ ^
                & lt; & gt; & lt; & gt; & lt; & gt; ^^^^ Nigeria. ^
                  & lt; & gt; ^ Tôi tự hào là ^
                  & lt; & gt; ^ Người cắm trại. ^
               & lt; & gt; & lt; & gt; & lt; & gt; ^^^^^^^^^^^^^^^^^^^^^
             & lt; & gt; & lt; & gt; & lt; & gt;
            & lt; & gt; & lt; & gt; & lt; & gt;
                  & lt; & gt;
                & lt; & gt; & lt; & gt;
               & lt; & gt; & lt; & gt;
              & lt; & gt; & lt; & gt;
             & lt; & gt; & lt; & gt;
            & lt; & gt; & lt; & gt;
           & lt; & gt; & lt; & gt; & lt; / p & gt; & lt; / div & gt;
 
  body {
        hiển thị: flex;
        align-các mục: trung tâm;
        justify-content: trung tâm;
        chiều cao: 100vh;
      }
 

ss9 < / p>

Một chút nghệ thuật với thẻ & lt; pre & gt;

  & lt; div & gt;
      & lt; trước & gt;
                              ^^^^^^^^^^^^^^^^^^^^^
                & lt; & gt; & lt; & gt; & lt; & gt; ^ Tôi là Kolade, ^
               & lt; & gt; & lt; & gt; ^ Nhà phát triển web từ ^
                & lt; & gt; & lt; & gt; & lt; & gt; ^^^^ Nigeria. ^
                  & lt; & gt; ^ Tôi tự hào là ^
                  & lt; & gt; ^ Người cắm trại. ^
               & lt; & gt; & lt; & gt; & lt; & gt; ^^^^^^^^^^^^^^^^^^^^^
             & lt; & gt; & lt; & gt; & lt; & gt;
            & lt; & gt; & lt; & gt; & lt; & gt;
                  & lt; & gt;
                & lt; & gt; & lt; & gt;
               & lt; & gt; & lt; & gt;
              & lt; & gt; & lt; & gt;
             & lt; & gt; & lt; & gt;
            & lt; & gt; & lt; & gt;
           & lt; & gt; & lt; & gt;
      & lt; / pre & gt;
    & lt; / div & gt;
 

ss10 < / p>

Cách khắc phục các thanh cuộn không cần thiết

Vì văn bản bên trong thẻ & lt; pre & gt; được hiển thị trong trình duyệt như chúng ở trong mã, việc có một khối hoặc dòng văn bản rộng hơn chiều rộng màn hình khả dụng dẫn đến thanh cuộn ngang . Đôi khi, bạn cũng có thể nhận được một thanh cuộn dọc không cần thiết.

 & lt; div & gt;
        & lt; trước & gt; Đây là một số văn bản trên internet: Cảm ơn bạn rất nhiều
            
đau đớn Cô ấy yêu thứ, vì niềm vui của cô ấy không phải là trốn tránh nỗi đau, mà chỉ là nghĩa vụ. Kết quả sẽ là hỏi liệu có ai có thể đạt được nhu cầu của họ không


xin cả nhà để không biết từ bao giờ.
        & lt; / pre & gt;
    & lt; / div & gt;
 

problem < / p>
Để loại bỏ điều này, CSS cung cấp thuộc tính white-space . Đặt giá trị của nó thành wrap sẽ loại bỏ các thanh cuộn.

  pre {
      khoảng trắng: bọc trước;
    }
 

problemFix < / p>

Kết luận

Trong suốt hướng dẫn này, bạn đã thấy cách hoạt động của thẻ & lt; pre & gt; trong HTML. Bây giờ hãy tận hưởng niềm vui với nó trong dự án mã hóa tiếp theo của bạn.

Cảm ơn bạn đã đọc và tiếp tục viết mã.


Xem thêm những thông tin liên quan đến chủ đề ví dụ về thẻ trước html

Programación DEVF: Proyecto Portafolio - Módulo 2: Javascript más HTML y CSS.

alt

  • Tác giả: Deya Alvarez Villajuana
  • Ngày đăng: 2022-05-19
  • Đánh giá: 4 ⭐ ( 4327 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng

  • Tác giả: mylop.edu.vn
  • Đánh giá: 4 ⭐ ( 4894 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này mình sẽ hướng dẫn sử dụng thẻ a trong HTML để tạo liên kết (link) trong một trang web.

Thẻ pre trong HTML

  • Tác giả: vietjack.com
  • Đánh giá: 5 ⭐ ( 8315 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ pre trong HTML - Học HTML cơ bản và nâng cao theo các bước đơn giản và dễ hiểu từ HTML là gì, Tag trong HTML, HTML tag, thẻ trong HTML, tổng hợp các thẻ HTML cơ bản, thẻ meta, thuộc tính, định dạng, thẻ trong HTML, commemnt, font, marquee, hình ảnh, link, bảng, frame, danh sách, layout, màu, form, background, style sheet, và sử dụng javascript.

Thẻ trước HTML

  • Tác giả: pluginthanhtoan.com
  • Đánh giá: 4 ⭐ ( 8716 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: botvietbai.com cung cấp các hướng dẫn, tài liệu tham khảo và bài tập trực tuyến miễn phí bằng tất cả các ngôn ngữ chính của web. Bao gồm các chủ đề phổ biến như HTML, CSS, JavaScript, Python, SQL, Java, và nhiều hơn nữa.

Các thẻ trong form HTML

  • Tác giả: webvn.com
  • Đánh giá: 5 ⭐ ( 9640 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ví dụ và cách sử dụng toàn bộ thẻ trong form của HTML.

Ví dụ về các thẻ trong HTML

  • Tác giả: hocwebchuan.com
  • Đánh giá: 3 ⭐ ( 8307 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ví dụ về HTML cho bạn hiểu rõ hơn về cách sử dụng các thẻ - Học Web Chuẩn.

Các thẻ cơ bản, phần tử và thuộc tính trong HTML

  • Tác giả: comdy.vn
  • Đánh giá: 3 ⭐ ( 2176 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các thẻ cơ bản trong HTML là gì? Thẻ và phần tử trong HTML khác nhau như thế nào? Thuộc tính trong HTML là gì?

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  flesler/jquery.scrollTo: Lightweight, cross-browser and highly customizable animated scrolling with jQuery - jquery scrollto

By ads_php