我们并不反对使用它们，但是如果您只是为了达到某种视觉效果而使用这些标签的话，我们建议您使用样式表，那么做会达到更加丰富的效果。

<code> 标签-定义计算机代码文本。

定义和用法：

<code> 标签用于表示计算机源代码或者其他机器可以阅读的文本内容。

软件代码的编写者已经习惯了编写源代码时文本表示的特殊样式。<code> 标签就是为他们设计的。包含在该标签内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来，对于大多数程序员和 W3School 的用户来说，这应该是十分熟悉的。

只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 <code> 标签。虽然 <code> 标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码。将来的浏览器有可能会加入其他显示效果。例如，程序员的浏览器可能会寻找 <code> 片段，并执行某些额外的文本格式化处理，如循环和条件判断语句的特殊缩进等。

提示和注释

提示：如果只是希望使用等宽字体的效果，请使用 <tt> 标签。或者，如果想要在严格限制为等宽字体格式的文本中显示编程代码，请使用 <pre> 标签。

<kbd> 标签-定义键盘文本

定义和用法：

<kbd> 标签定义键盘文本。

说到技术概念上的特殊样式时，就要提到 <kbd> 标签。正如你已经猜到的，它用来表示文本是从键盘上键入的。

浏览器通常用等宽字体来显示该标签中包含的文本。

<kbd> 标签经常用在于计算机相关的文档和手册中。

<samp> 标签-定义样本文本。

定义和用法：

<samp> 标签表示一段用户应该对其没有什么其他解释的文本字符。要从正常的上下文抽取这些字符时，通常要用到这个标签。

请看下面的例子：

字符序列 <samp>ae</samp> 可能会被转换为 &aelig; 连字字符。

上面的 HTML 代码会显示为：

字符序列 ae 可能会被转换为 æ 连字字符。

注释：在 HTML 中，用于 "ae" 连字的特殊实体是 "&aelig;"，大多数浏览器都会将它转换成相应的 "æ" 连字字符。

<samp> 标签并不经常使用。只有在要从正常的上下文中将某些短字符序列提取出来，对它们加以强调的极少情况下，才使用这个标签。

<tt> 标签-定义打字机代码。

定义和用法：

<tt> 标签呈现类似打字机或者等宽的文本效果。

<tt> 标签与 <code> 和 <kbd> 标签一样，<tt> 标签和必需的 </tt> 结束标签告诉浏览器，要把其中包含的文本显示为等宽字体。对于那些已经使用了等宽字体的浏览器来说，这个标签在文本的显示上就没有什么特殊效果了。

<var> 标签-定义变量。

定义和用法：

<var> 标签表示变量的名称，或者由用户提供的值。

<var> 标签是计算机文档中应用的另一个小窍门，这个标签经常与 <code> 和 <pre> 标签一起使用，用来显示计算机编程代码范例及类似方面的特定元素。

用 <var> 标签标记的文本通常显示为斜体。

就像其他与计算机编程和文档相关的标签一样，<var> 标签不只是让用户更容易理解和浏览你的文档，而且将来某些自动系统还可以利用这些恰当的标签，从你的文档中提取信息以及文档中提到的有用参数。我们再一次强调，提供给浏览器的语义信息越多，浏览器就可以越好地把这些信息展示给用户。

<pre> 标签-定义预格式文本。

定义和用法：

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

可以导致段落断开的标签（例如标题、<p> 和 <address> 标签）绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。

pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如 <a> 标签）放到 <pre> 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。请看下面的例子：

<pre>

&lt;html&gt;

&lt;head&gt;

  &lt;script type=&quot;text/javascript&quot; src=&quot;loadxmldoc.js&quot;&gt;

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

  &lt;script type=&quot;text/javascript&quot;&gt;

    xmlDoc=<a href="dom_loadxmldoc.asp">loadXMLDoc</a>(&quot;books.xml&quot;);

    document.write(&quot;xmlDoc is loaded, ready for use&quot;);

  &lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;

</pre>

在上面的代码中，<pre> 标签中的特殊符号被转换为符号实体，比如 "&lt;" 代表 "<"，"&gt;" 代表 ">"。另外，请注意蓝色的代码，我们在 <pre> 标签中使用了链接，也就是 <a> 标签。上面这段代码的显示效果如下：

<html>

<head>

  <script type="text/javascript" src="loadxmldoc.js">

</script>

</head>

<body>

  <script type="text/javascript">

    xmlDoc=loadXMLDoc("books.xml");

    document.write("xmlDoc is loaded, ready for use");

  </script>

</body>

</html>

提示和注释

提示：制表符（tab）在 <pre> 标签定义的块当中可以起到应有的作用，每个制表符占据 8 个字符的位置。但是我们不推荐使用它，因为在不同的浏览器中，Tab 的实现各不相同。在用 <pre> 标签格式化的文档段中使用空格，可以确保文本正确的水平位置。

提示：如果您希望使用 <pre> 标签来定义计算机源代码，比如 HTML 源代码，请使用符号实体来表示特殊字符，比如 "&lt;" 代表 "<"，"&gt;" 代表 ">"，"&amp;" 代表 "&"。

提示：在 W3School 中，非常多页面中的源代码实例都是通过 <pre> 标签定义的，您可以参考这些页面，学习如何使用该标签。我们甚至把 <pre> 标签与 <code> 标签结合起来使用，以获得更加精确的语义。

例子：预格式文本

此例演示如何使用 pre 标签对空行和空格进行控制。

<pre>

这是

预格式文本。

它保留了      空格

和换行。

</pre>

<p>pre 标签很适合显示计算机代码：</p>

<pre>

for i = 1 to 10

     print i

next i

</pre>

例子：“计算机输出”标签

此例演示不同的“计算机输出”标签的显示效果。

<code>Computer code</code>

<br />

<kbd>Keyboard input</kbd>

<br />

<tt>Teletype text</tt>

<br />

<samp>Sample text</samp>

<br />

<var>Computer variable</var>

<br />

<p>

<b>注释：</b>这些标签常用于显示计算机/编程代码。

</p>

HTML“计算机输出”标签 <code><kbd><samp><tt><var><pre>的更多相关文章

  1. PHP使用echo输出标签设置CSS样式问题

    使用php是可以输出HTML标签的,这为页面设计带来很大方便. 在此记录php输出标签设置CSS样式的问题: echo可使用''.""或你不用引号,如果想要输出带CSS样式的HTM ...

  2. 单个句子<code> 多行代码显示<pre> 键盘输入<kbd>

    1.用来显示单个句子或者单个单词:<code>……</code> 2.用来显示多行代码:<pre>……</pre> 当行数高度大于340px,自动出现y ...

  3. JSTL标签出错：<c:forEach var="book" items="${requestScope.books}" varStatus="status">

    今天在运行书里的JSTL标签代码的时候出错,总结一下: 问题1.The JSP specification requires that an attribute name is preceded by ...

  4. angularJS绑定数据中对标签转义的处理二 与pre标签的使用

    一.问题 默认情况下,angularJS绑定的数据为字符串文本,不会对其中包含的html标签进行转义生成格式化的文本.在实际工作时碰到接口返回的数据带有html格式时该如何处理. 二.解决办法 1.引 ...

  5. Porita详解----Items

    Items(项目) 一个item是指从目标网站上爬取的一条单独的数据.例如从京东网站上爬取的一款小米6手机的信息.大家应该对 item (项目)和 item definition(项目定义)做一个区分 ...

  6. HTML5 标签实例

    html 5 学习1.<p></p> #段落元素定义2.<h1></h1> #标题 h1代表大号的字体.依此变小3.<br /> #实例 代 ...

  7. HTML标签CSS默认值研究

    最近写css的时候,发现在div元素里面添加ul元素后发现,ul列表在div里面距离最上方总是有一段空行,当时很奇怪,以为是哪个css出了问题,就把css去掉了,发现问题依旧,然后就查了一下发现htm ...

  8. HTML标签CSS属性默认值汇总

    HTML标签CSS属性默认值,在你需要还原默认值的时候比较有用. 以前一直在找这份文档,今天偶然在网上看到了.除了inline和block的定义,主要是要注意body|h1~h6|blockquote ...

  9. html标签默认样式整理

    引:http://www.jb51.net/web/94964.html 文为大家整理了html标签默认样式属性及浏览器默认样式等等,喜欢css布局的朋友们可以学下,希望对大家有所帮助 html, a ...

随机推荐

  1. Java基础之扩展GUI——显示About对话框（Sketcher 2 displaying an About dialog）

    控制台程序. 最简单的对话框仅仅显示一些信息.为了说明这一点,可以为Sketcher添加Help菜单项和About菜单项,之后再显示About对话框来提供有关应用程序的信息. 要新建的对话框类从JDi ...

  2. Fiddler---前端利器

    摘要:Fiddler是一个不错的工具,可以用来调试HTTP协议.工具很强大,本篇根据现有使用总结了下,以后有更多使用再做补充. 在做HTTPS协议对接的时候,拿不到数据,不得不找个工具试下,确定是接收 ...

  3. Velocity(9)——宏

    定义宏和使用宏 #macro指令用于定义一个VTL模板的重复代码块——宏.下面是一个简单的定义宏的例子: #macro( d ) <tr><td></td>< ...

  4. 教你快速高效接入SDK——总体思路和架构

    题记:很多做游戏开发的人,估计都或多或少地接过渠道SDK,什么UC,当乐,91,小米,360......据统计国内市场当前不下于100家渠道,还包括一些没有SDK的小渠道.每个渠道SDK接入的方法呢, ...

  5. java入门之从C#快速入门java

    可变参数： Void sum(int…list){}以“…”三个字为关键字 可变参数：以params为关键字 34 对异常的描述: java中，异常分为两种，运行时异常(也就是uncheckExcep ...

  6. QQ 图片

    http://wpa.qq.com/pa?p=2:QQ号码:45 查看QQ是否在线,或者图片,在这里,其他的另行百度. <!-- tencent://message/?uin=763999883 ...

  7. OBD K线抓包 II

    9141的激活过程是先发WakeUp, 然后用Link: const u8 LinkCmd9141[7]  = {6,0x68,0x6A,0xF1,0x01,0x00,0xC4}; 14230的Lin ...

  8. UBI系统原理-中【转】

    转自:http://blog.chinaunix.net/uid-28236237-id-4217118.html UBI 文件头位置 EC头都放置在擦除块的开始偏移位置,占用64字节空间.之后防止V ...

  9. noi 9271 奶牛散步

    题目链接:http://noi.openjudge.cn/ch0206/9271/ 同noi 踩方格,但是题目有问题,%12345,我也是看了discuss才知道的. #include <bit ...

  10. 使用VB6制作RTD函数

    以前模仿大神在vs里使用c#实现RTD函数功能.(真是很生僻的东东啊)C#制作RTD参考:大神博客跳转.最近想VB里能不能做?就试着做了做,好像基本成了,整套代码有些毛病,勉强能算个样子,暂时不打算再 ...