Hướng dẫn what is preformatted text in html? - văn bản được định dạng sẵn trong html là gì?

Phần tử

 HTML đại diện cho văn bản được định dạng sẵn được trình bày chính xác như được viết trong tệp HTML. Văn bản thường được hiển thị bằng cách sử dụng phông chữ không cân xứng, hoặc đơn sắc. Whitespace bên trong phần tử này được hiển thị dưới dạng viết.
 HTML element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or monospaced, font. Whitespace inside this element is displayed as written.
 Nội dung chính Show
 
Thuộc tính
Mối quan tâm tiếp cận
Ví dụ cơ bản
Thoát khỏi các nhân vật dành riêng
Thoát khỏi các nhân vật dành riêng
Tiêu chuẩn HTML # phần tử
Bảng BCD chỉ tải trong trình duyệt
Một văn bản được định dạng là gì?
Việc sử dụng văn bản được định dạng trước trong HTML là gì?
Làm cách nào để tạo văn bản được định dạng sẵn trong HTML?
HTML định dạng trước là gì?
 
Thử nó
Nếu bạn phải hiển thị các ký tự dành riêng như <, >, & và " trong thẻ 
, các ký tự phải được thoát ra bằng thực thể HTML tương ứng của chúng.
Thuộc tính
Yếu tố này chỉ bao gồm các thuộc tính toàn cầu.
<p>Using CSS to change the font color is easy.p>
<pre>
body {
  color: red;
}
pre>
0Non-standardDeprecated Non-standard Deprecated
Chứa số lượng ký tự ưa thích mà một dòng nên có. Đó là một từ đồng nghĩa không chuẩn của 
<p>Using CSS to change the font color is easy.p>
<pre>
body {
  color: red;
}
pre>
1. Để đạt được hiệu quả như vậy, thay vào đó hãy sử dụng CSS 
<p>Using CSS to change the font color is easy.p>
<pre>
body {
  color: red;
}
pre>
1.
<p>Using CSS to change the font color is easy.p>
<pre>
body {
  color: red;
}
pre>
1DeprecatedNon-standard
Deprecated Non-standard
Chứa số lượng ký tự ưa thích mà một dòng nên có. Mặc dù về mặt kỹ thuật vẫn được thực hiện, thuộc tính này không có hiệu ứng trực quan; Để đạt được hiệu quả như vậy, thay vào đó hãy sử dụng CSS 
<p>Using CSS to change the font color is easy.p>
<pre>
body {
  color: red;
}
pre>
1.
<p>Using CSS to change the font color is easy.p>
<pre>
body {
  color: red;
}
pre>
5Non-standardDeprecated Non-standard Deprecated
Là một gợi ý chỉ ra làm thế nào tràn phải xảy ra. Trong trình duyệt hiện đại, gợi ý này bị bỏ qua và không có kết quả hiệu ứng trực quan trong hiện tại; Để đạt được hiệu quả như vậy, thay vào đó, hãy sử dụng CSS 
<p>Using CSS to change the font color is easy.p>
<pre>
body {
  color: red;
}
pre>
6.
Mối quan tâm tiếp cận
Điều quan trọng là cung cấp một mô tả thay thế cho bất kỳ hình ảnh hoặc sơ đồ được tạo bằng văn bản được định dạng sẵn. Mô tả thay thế nên mô tả rõ ràng và chính xác nội dung hình ảnh hoặc sơ đồ.
Những người trải qua điều kiện tầm nhìn thấp và duyệt với sự trợ giúp của công nghệ hỗ trợ như người đọc màn hình có thể không hiểu những gì các ký tự văn bản được định dạng trước khi họ được đọc theo trình tự.
Một sự kết hợp của các phần tử 
<p>Using CSS to change the font color is easy.p>
<pre>
body {
  color: red;
}
pre>
7 và 
<p>Using CSS to change the font color is easy.p>
<pre>
body {
  color: red;
}
pre>
8, được bổ sung bởi các thuộc tính ARIA 
<p>Using CSS to change the font color is easy.p>
<pre>
body {
  color: red;
}
pre>
9 và 
<pre>
let i = 5;

if (i < 10 && i > 0)
  return "Single Digit Number"
pre>
0 trên phần tử 
<pre>
let i = 5;

if (i < 10 && i > 0)
  return "Single Digit Number"
pre>
1 cho phép ASCII được định dạng sẵn được công bố dưới dạng hình ảnh với văn bản thay thế và 
<pre>
let i = 5;

if (i < 10 && i > 0)
  return "Single Digit Number"
pre>
2 phục vụ theo chú thích của hình ảnh.
Thí dụ
<figure>
  <pre role="img" aria-label="ASCII COW">
      ___________________________
  < I'm an expert in my field. >
      ---------------------------
          \   ^__^
           \  (oo)\_______
              (__)\       )\/\
                  ||----w |
                  ||     ||
  pre>
  <figcaption id="cow-caption">
    A cow saying, "I'm an expert in my field." The cow is illustrated using
    preformatted text characters.
  figcaption>
figure>
MDN Hiểu WCAG, Hướng dẫn 1.1 Giải thích
H86: Cung cấp các lựa chọn thay thế văn bản cho nghệ thuật ASCII, biểu tượng cảm xúc và LeetSpeak | Kỹ thuật W3C cho WCAG 2.0
Ví dụ
Ví dụ cơ bản
HTML
<p>Using CSS to change the font color is easy.p>
<pre>
body {
  color: red;
}
pre>



Kết quả
Thoát khỏi các nhân vật dành riêng
HTML
<pre>
let i = 5;

if (i < 10 && i > 0)
  return "Single Digit Number"
pre>
Kết quả
Thoát khỏi các nhân vật dành riêng
Thông số kỹ thuật
Sự chỉ rõ
# the-pre-element
Tiêu chuẩn HTML # phần tử
Tính tương thích của trình duyệt web
Bảng BCD chỉ tải trong trình duyệt