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

<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. EBS R12.2.0启动时报"httpd.pid: Permission denied"错误

    启动应用服务: $ /app/oracle/apps/VIS/fs1/inst/apps/VIS_erptest/admin/scripts/adstrtal.sh apps/apps 报出如下错误: ...

  2. RW-50004 While Running adrunfmw during EBS 12.2 Installation

    安装过程中报错: 日志文件信息: Executing command: /app/R1220/startCD/Disk1/rapidwiz/jre/Linux_x64//bin/java -cp /a ...

  3. 再叙TIME_WAIT

    之所以起这样一个题目是因为很久以前我曾经写过一篇介绍TIME_WAIT的文章,不过当时基本属于浅尝辄止,并没深入说明问题的来龙去脉,碰巧这段时间反复被别人问到相关的问题,让我觉得有必要全面总结一下,以 ...

  4. 什么是FOUC？如何避免FOUC？///////////////////////////zzzz

     一个新的名词叫做 FOUC 浏览器样式闪烁,之前也听说过一些类似的东西,比如样式突变等等,但这东西竟然有学名的..什么是FOUC(文档样式短暂失效)?如果使用import方法对CSS进行导入,会导致 ...

  5. linux下svn服务器安装配置与启动

    1. 采用源文件编译安装.源文件共两个,为: subversion-1.6.1.tar.gz  (subversion 源文件) subversion-deps-1.6.1.tar.gz  (subv ...

  6. windows系统调用 获取当前内存信息

    #include "iostream" #include "windows.h" #include "shlwapi.h" #include ...

  7. window.event

    e = e || window.event是我们在做事件处理时候区分IE和其他浏览器事件对象时常用的写法.但是这行兼容性代码有没有必要出现在所有的事件句柄中呢?标准事件调用方式需要这行代码吗?下边我们 ...

  8. 杭电oj 1069 Monkey and Banana 最长递增子序列

    Monkey and Banana Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...

  9. paper 102：极限学习机（Extreme Learning Machine）

    原文地址:http://blog.csdn.net/google19890102/article/details/18222103   极限学习机(Extreme Learning Machine) ...

  10. Roll A Ball

    GameObject的添加就不细说了,地面,小球和碰撞小物体. 刚体组件(Rigidbody): 使物体能够模拟物理效果,比如重力,碰撞,推力等: 控制小球移动的脚本(Script,Ball的脚本): ...