HTML中的kbd,samp和代码有什么区别

Question

我目前正在阅读w3schools的HTML教程(还没有CSS或JavaScript),我想知道为什么有这么多不同的标签看起来一样呢？

例如我看不出之间的任何(光学的)差kbd,samp并且code除了每个标签的"意义".

所以我的问题是:只是元信息不同这些标签？

Answer 1

正确.语义是不同的.默认渲染是使用等宽字体,因为这是最合适的.

<kbd>表示键盘输入,但StackOverflow呈现it like real keys.

<samp> 代表示例计算机输出,最初的计算机是等宽的:)

<code>表示编程代码输入,绝大多数编程语言都设计为采用等宽编辑器字体 - 除了C++的书之外,由于某种原因,它更喜欢可变宽度和一些Python品种.注意,它<code>是内联元素,而<pre>用于代码的块级标记(即段落).

默认渲染是相同的这一事实并不意味着您不能像StackOverflow那样分配自己的渲染样式.

Answer 2

该kbd元素表示用户输入。用户输入的示例是：

按键输入

<p>Please, press <kbd><kbd>Shift</kbd>+<kbd>A</kbd></kbd></p>   

终端命令

<p>Please, input "<kbd>Yes</kbd>" or "<kbd>No</kbd>"</p>

按钮或菜单（GUI 输入）

<kbd>File | Open...</kbd>

档案 | 打开...

该samp元素表示来自程序或计算系统的输出。例如一个 cmd 输出：

它在 HTML 中的样子samp：

 Directory of D:\mydir

11/15/2007  03:03 PM    <DIR>          .
11/15/2007  03:03 PM    <DIR>          ..
11/15/2007  01:38 PM                 0 10oct2006.txt
11/08/2007  04:28 PM               368 11nov2007.do
11/15/2007  01:39 PM                 0 5june2007.txt
03/11/2007  10:39 AM         1,869,429 beameruserguide.pdf
08/10/2007  01:24 PM            22,016 blog - jsm 2007.doc
04/25/2007  03:07 PM           199,887 clarify.pdf
11/15/2007  01:40 PM                 0 houseplants.txt
04/25/2007  11:42 AM           371,225 Mardia 1970 - multivar skew and kurt.pdf
03/27/2007  01:18 PM           319,864 multiple imputation a primer by schafer.pdf
11/15/2007  02:49 PM                 0 output 1.txt
11/15/2007  02:49 PM                 0 output 2.txt
11/15/2007  02:49 PM                 0 output 3.txt
11/15/2007  02:49 PM                 0 output 4.txt
11/08/2007  03:59 PM             8,514 results.dta
11/15/2007  01:31 PM    <DIR>          sub1
11/15/2007  01:31 PM    <DIR>          sub2
11/14/2007  04:27 PM               952 test.txt
05/21/2007  03:23 PM         1,430,743 zelig.pdf
              18 File(s)      4,225,738 bytes
               4 Dir(s)  249,471,307,776 bytes free

该code元素表示一段计算机代码。计算机代码的示例有：XML 元素名称、文件名、计算机程序等。

代码示例：

<pre>
  <code>
  function Panel(element, canClose, closeHandler) {
    this.element = element;
    this.canClose = canClose;
    this.closeHandler = function () { if (closeHandler) closeHandler() };
  }
  </code>
</pre>

我还想说，您在视觉外观方面是对的。在最有什么区别kbd，samp和code。它们都使用相同的字体类型。但是，如果您按照描述使用它们会更好，因为系统会在它们之间产生差异。