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

时间:2015-08-29 09:13:43

标签: html tags semantics

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

例如,我看不到kbdsampcode之间的任何(光学)差异,除了每个标记的“含义”。

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

3 个答案:

答案 0 :(得分:12)

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

<kbd>表示键盘输入,但StackOverflow将呈现为真实键

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

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

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

答案 1 :(得分:4)

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

键输入

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

enter image description here

终端命令

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

enter image description here

按钮或菜单(GUI输入)

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

文件|打开...

enter image description here

samp元素表示来自程序或计算系统的输出。例如cmd输出: enter image description here

使用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>

enter image description here

我还想说你的视觉外观是正确的。 kbdsampcode之间至多没有区别。它们都使用相同的字体类型。但是,如果按照描述使用它们会更好,因为系统会对它们产生影响。

答案 2 :(得分:3)

在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;
}

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

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

所有这些标签都是为了1)你使用,2)搜索引擎要理解,3)你/某人以后才能理解。

了解不同的存储桶是什么,并开始使用标记;实际上并没有那么多类别。