2.3.16 samp元素

samp元素用于指示程序或系统的示例输出，各种程序的示例输出，都可以把它放在 <samp></samp> 标签中。

如果要同时表示输入和输出，可以将 kbd元素嵌在 samp元素中，kbd 就表示系统回显的输入，samp 就表示系统的输出。

将 kbd元素嵌在 samp元素中的好处是，可以方便为输入和输出定义不同的显示风格。当然，为了更精确的控制显示风格，可以配合使用 span 等元素。

如，在以下描述 python 输入输出的示例代码中，就包括 python 的命令行提示符、键盘输入和系统输出。为了方便控制样式，在键盘输入的文本中，使用 span 元素来包裹 python 的关键字：

<pre>
  <samp>
    <span class="prompt">&gt;&gt;&gt; </span>
    <kbd><span class="keyword">print</span> "hello world!" </kbd>
    hello world!
  </samp>
</pre>

有了上述定义后，就可以通过CSS来精确控制样式：

.prompt {
    color: #990073;
}
.keyword {
    color: #333;
    font-weight: bold;
}
.string {
    color: #d14;
}

运行结果如图 2‑31 所示：

从上图可以看出，提示符、键盘输入、系统输出分别使用不同的显示风格，页面不再显得单调，易读性也大大增强。