HTML宝典(第 1 版)
2.3.16 samp元素
阅读(

HTML基础

HTML元素

结构语义元素

内容分组元素

文本语义元素

var元素

code元素

time元素

dfn元素

abbr元素

mark元素

cite元素

q元素

s元素

u元素

b元素

i元素

small元素

strong元素

文本元素

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 所示:

samp元素
图2-31 samp元素

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

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验