bash 命令行输入使用哪个 HTML 标签？

问题描述

说我在写一篇文章

<p>If you want to check your total memory,run the following command

<pre>$ free -g
              total        used        free      shared  buff/cache   available
Mem:             25            0         25           0           0          24
Swap:             2           0           2</pre>

$ free -g 是 bash 输入，下面的文本是它的输出。

我想正确设置输入和输出的样式。虽然我可以使用 <div>，但我认为它不够语义。

看起来 this 更像是键盘上的按键； <kbd> 已弃用。

命令行输入应该使用哪个 HTML 标签？

解决方法

HTML 规范有一个完美的例子，展示了如何将 <pre> 与 <kbd> 和 <samp>（以及一些语法高亮特定的 <span>s）结合使用来标记上一个命令行示例：

第二个示例显示了来自控制台程序的示例输出块。嵌套的 samp 和 kbd 元素允许使用样式表对示例输出的特定元素进行样式设置。 samp 中还有一些部分用更详细的标记进行了注释，以实现非常精确的样式。为此，使用了 span 元素。

<pre><samp><span class="prompt">jdoe@mowmow:~$</span> <kbd>ssh demo.example.com</kbd>
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
Linux demo 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 #1 SMP Tue Feb 1 11:22:36 PST 2005 i686 unknown

<span class="prompt">jdoe@demo:~$</span> <span class="cursor">_</span></samp></pre>

这个例子可以在under the definition of <samp>找到。

当然，您不需要 <span>；这些只是为了语法高亮效果，而 <span> 本身和 <div> 一样，没有任何语义。换句话说，无论有没有 <span> s，这个例子的语义都是相同的。

使用 <code> 没有任何问题；这真的取决于你。但是如果你想遵循一个参考，那么规范提供了一个，我推荐它都是一样的。

<pre> 表示代码块，<code> 表示片段。见https://www.w3.org/TR/html52/grouping-content.html#elementdef-pre

html semantic-markup