HTML中的kbd、samp和code有什么区别
What are the differences between kbd, samp and code in HTML
我目前正在阅读 w3schools 上的 HTML 教程(还没有 CSS 或 JavaScript),我想知道为什么有那么多不同的标签看起来都一样?
例如,除了每个标签的 "meaning" 之外,我没有看到 kbd
、samp
和 code
之间的任何(光学)差异。
所以我的问题是:这些标签是否只是元信息不同?
正确。语义不同。默认呈现是使用等宽字体,因为这是最合适的。
<kbd>
表示键盘输入,尽管 Whosebug 呈现 它就像真正的键。
<samp>
表示样本计算机输出,最初计算机是等宽的:)
<code>
表示编程代码输入,绝大多数编程语言都设计为采用等宽编辑器字体——除了 C++ 的书,出于某种原因,它更喜欢可变宽度,还有一些品种的 Python。请注意,<code>
是一个内联元素,而 <pre>
用于代码的块级标记(即段落)。
默认呈现相同的事实并不意味着您不能像 Whosebug 那样分配自己的呈现样式。
在 HTML 中,您将获得 不同桶的标签汤 来构建您的组件。有 <TABLE>
系列标签和相关属性以及相关的 CSS、<SECTION>
系列标签和属性以及 CSS(用于构建新闻和博客布局,例如).
然后是一组与 SVG 相关的东西,<OBJECT>
嵌入式插件系列,等等。添加的每个功能都有自己的一组特定领域的术语和定义。布局规则不同,例如,您不能像使用 <SECTION>
那样使用 CSS 和 <TABLE>
。
因此存在 logical/meta-data 差异和 functional/usage 差异。根据您使用的浏览器,默认浏览器样式表可能会使某些元素在视觉上相似,如果您只是将它们放在一个页面上,一个挨着另一个没有任何结构。
这个想法是让你把这些东西组合在一起,就像这样:
<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>
CSS,这使得它不同于常规的 <p>
不管用。默认浏览器样式相似。
研究如何使用这些类别的标签。查看一些 Twitter Bootstrap 示例代码。
所有这些标签供 1) 您使用,2) 搜索引擎理解,3) you/someone 稍后理解。
了解不同的 buckets 是什么,然后开始使用标签;实际上并没有那么多类别。
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
顶多没有区别。他们都使用相同的字体类型。但是,如果您按照描述使用它们会更好,因为系统会在它们之间产生差异。
我目前正在阅读 w3schools 上的 HTML 教程(还没有 CSS 或 JavaScript),我想知道为什么有那么多不同的标签看起来都一样?
例如,除了每个标签的 "meaning" 之外,我没有看到 kbd
、samp
和 code
之间的任何(光学)差异。
所以我的问题是:这些标签是否只是元信息不同?
正确。语义不同。默认呈现是使用等宽字体,因为这是最合适的。
<kbd>
表示键盘输入,尽管 Whosebug 呈现 它就像真正的键。
<samp>
表示样本计算机输出,最初计算机是等宽的:)
<code>
表示编程代码输入,绝大多数编程语言都设计为采用等宽编辑器字体——除了 C++ 的书,出于某种原因,它更喜欢可变宽度,还有一些品种的 Python。请注意,<code>
是一个内联元素,而 <pre>
用于代码的块级标记(即段落)。
默认呈现相同的事实并不意味着您不能像 Whosebug 那样分配自己的呈现样式。
在 HTML 中,您将获得 不同桶的标签汤 来构建您的组件。有 <TABLE>
系列标签和相关属性以及相关的 CSS、<SECTION>
系列标签和属性以及 CSS(用于构建新闻和博客布局,例如).
然后是一组与 SVG 相关的东西,<OBJECT>
嵌入式插件系列,等等。添加的每个功能都有自己的一组特定领域的术语和定义。布局规则不同,例如,您不能像使用 <SECTION>
那样使用 CSS 和 <TABLE>
。
因此存在 logical/meta-data 差异和 functional/usage 差异。根据您使用的浏览器,默认浏览器样式表可能会使某些元素在视觉上相似,如果您只是将它们放在一个页面上,一个挨着另一个没有任何结构。
这个想法是让你把这些东西组合在一起,就像这样:
<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>
CSS,这使得它不同于常规的 <p>
不管用。默认浏览器样式相似。
研究如何使用这些类别的标签。查看一些 Twitter Bootstrap 示例代码。
所有这些标签供 1) 您使用,2) 搜索引擎理解,3) you/someone 稍后理解。
了解不同的 buckets 是什么,然后开始使用标签;实际上并没有那么多类别。
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
顶多没有区别。他们都使用相同的字体类型。但是,如果您按照描述使用它们会更好,因为系统会在它们之间产生差异。