<samp>: The Sample Output element

Try it

<p>I was trying to boot my computer, but I got this hilarious message:</p>

<p>
  <samp>Keyboard not found <br />Press F1 to continue</samp>
</p>

samp {
  font-weight: bold;
}

Thuộc tính

Phần tử này chỉ bao gồm các thuộc tính toàn cục.

Ghi chú sử dụng

Bạn có thể dùng quy tắc CSS để ghi đè phông chữ mặc định của trình duyệt cho phần tử <samp>; tuy nhiên, tùy chọn của trình duyệt có thể được ưu tiên hơn bất kỳ CSS nào bạn chỉ định.

CSS để ghi đè phông chữ mặc định sẽ trông như thế này:

samp {
  font-family: "Courier";
}

Ví dụ

Ví dụ cơ bản

Trong ví dụ cơ bản này, một đoạn văn bao gồm ví dụ về đầu ra của một chương trình.

<p>
  When the process is complete, the utility will output the text
  <samp>Scan complete. Found <em>N</em> results.</samp> You can then proceed to
  the next step.
</p>

Kết quả

Đầu ra mẫu bao gồm đầu vào của người dùng

Bạn có thể lồng phần tử <kbd> trong một khối <samp> để trình bày ví dụ bao gồm văn bản được nhập bởi người dùng. Ví dụ, hãy xem đoạn văn bản trình bày bản ghi phiên làm việc trên console Linux (hoặc macOS):

HTML

<pre>
<samp><span class="prompt">mike@interwebz:~$</span> <kbd>md5 -s "Hello world"</kbd>
MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62

<span class="prompt">mike@interwebz:~$</span> <span class="cursor">█</span></samp></pre>

Lưu ý việc sử dụng <span> để cho phép tùy chỉnh giao diện của các phần cụ thể trong văn bản mẫu như các dấu nhắc shell và con trỏ. Cũng lưu ý việc sử dụng <kbd> để đại diện cho lệnh người dùng nhập tại dấu nhắc trong văn bản mẫu.

CSS

CSS để đạt được giao diện mong muốn là:

.prompt {
  color: #bb0000;
}

samp > kbd {
  font-weight: bold;
}

.cursor {
  color: #0000bb;
}

Đây là cách tô màu khá tinh tế cho dấu nhắc và con trỏ, và in đậm đầu vào bàn phím trong văn bản mẫu.

Kết quả

Đầu ra kết quả là:

Tóm tắt kỹ thuật

Đặc tả

Tương thích trình duyệt

Xem thêm

• Các phần tử liên quan: <kbd>, <code>, <pre>
• Phần tử <output>: vùng chứa cho đầu ra được tạo bởi script