HTML中的kbd、samp和code有什么区别答案

【问题标题】：What are the differences between kbd, samp and code in HTMLHTML中的kbd、samp和code有什么区别
【发布时间】：2015-11-23 21:47:21
【问题描述】：

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

例如，除了每个标签的“含义”之外，kbd、samp 和 code 之间没有任何（光学）差异。

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

【问题讨论】：

“我想知道为什么有这么多看起来一样的标签 [...] 我看不出 kbd、samp 和 code 之间有任何（光学）差异” - 这是学习标记时最重要的事情之一。 您可以看到的唯一视觉差异是由浏览器的默认样式表产生的差异。标记表示功能而不是形式。
100% 同意鲁宁。而且，为了完整起见，HTML 4.01 DTD (w3.org/TR/REC-html40/struct/text.html#h-9.2.1) 定义了一个 var 元素，“指示变量或程序参数的实例”

标签： html tags semantics

【解决方案1】：

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

<kbd> 表示键盘输入，尽管 StackOverflow 将 它呈现为像真正的键。

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

<code> 代表编程代码输入，绝大多数编程语言都被设计为采用等宽编辑器字体——除了 C++ 的书出于某种原因更喜欢可变宽度和一些 Python 品种。请注意，<code> 是一个内联元素，而 <pre> 用于代码的块级标记（即段落）。

默认渲染相同的事实并不意味着您不能像 StackOverflow 那样指定自己的渲染样式。

【讨论】：

【解决方案2】：

在 HTML 中，您可以得到 不同的标签汤桶 来构建您的组件。有 <TABLE> 系列标签和相关属性以及相关 CSS，<SECTION> 系列标签和属性以及 CSS（例如，用于构建新闻和博客布局）。

还有一组与 SVG 相关的东西，嵌入式插件的 <OBJECT> 系列，等等。每一个被添加的特性都有它自己的一组特定领域的术语和定义。布局规则不同，例如，<TABLE> 不能与 <SECTION> 使用相同的 CSS。

因此存在逻辑/元数据差异和功能/使用差异。根据您使用的浏览器，默认浏览器样式表可能会使某些元素在视觉上相似，如果您只是将它们放在一个页面上，一个并排，没有任何结构。

这个想法是让你把这些东西组合在一起，像这样：

<section name="blogpost">
    <article class="entry">
        <h1>Page Title</h1>
        <p>Hello world.</p>

使用类似于以下内容的 CSS：

section p {
    margin-top:1.5em;
    margin-bottom:1.5em;
}
article h1+p {
    margin-top:1em;
}

如果您从<article> 上下文中取出上述<p> 或删除之前的<h1>，则使其与常规<p> 不同的CSS 将不起作用。默认浏览器样式类似。

研究如何使用这些类别的标签。查看一些 Twitter Bootstrap 示例代码。

所有这些标签都是为了 1）您使用，2）搜索引擎了解，3）您/某人稍后了解。

只需了解不同的 buckets 是什么，然后开始使用标签；实际上它们的类别并不多。

【讨论】：

【解决方案3】：

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 输出：

使用samp 在 HTML 中的样子：

 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最多没有区别。它们都使用相同的字体类型。但是，如果您按照描述使用它们会更好，因为系统会在它们之间产生差异。

【讨论】：