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

<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. 游戏制作之路：一个对我来说可实现的High-end的Mac/iOS游戏制作大概计划

    对于学习一些东西,我比较习惯任务驱动式的学习,也就是说,要事先订好一个目标,要做什么东西,达到什么效果,然后根据自己了解的知识作一个可以实现这个目标的计划. 现在要学的是游戏制作,而且是High-en ...

  2. 文本标记器vi

    在打开某一类文件时,遇到了vi,当时不知是什么东西,鼠标,包括键盘上的键在文本上都没有用,后来才知道那是vi 参考文档

  3. 《30天自制操作系统》17_day_学习笔记

    harib14a: 接着上一天的内容,我们来思考一个问题:当所有的LEVEL中都没有任务的时候怎么办?采用前面定时器链表中加入“哨兵”的思路,我们加入一个idle任务,去执行HLT.接下来我们只需要将 ...

  4. Spring+Mybatis+Maven+MySql搭建实例

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主要讲了如何使用Maven来搭建Spring+Mybatis+MySql的的搭建实例 ...

  5. zjuoj 3607 Lazier Salesgirl

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3607 Lazier Salesgirl Time Limit: 2 Sec ...

  6. RCNN 和SPPnet的对比

    一.RCNN: 1.首先通过选择性搜索,对待检测的图片进行搜索出2000个候选窗口. 2.把这2k个候选窗口的图片都缩放到227*227,然后分别输入CNN中,每个候选窗台提取出一个特征向量,也就是说 ...

  7. Arduino示例教程超声波测距实验

    超声波传感器 超声波是一种超出人类听觉极限的声波即其振动频率高于20 kHz的机械波.超声波传感器在工作的时候就是将电压和超声波之间的互相转换,当超声波传感器发射超声波时,发射超声波的探头将电压转化的 ...

  8. Pandas将中文数据集转换为数值类别型数据集

    一个机器学习竞赛中,题目大意如下,本文主要记录数据处理过程,为了模型训练,第一步需要将中文数据集处理为数值类别数据集保存. 基于大数据的运营商投诉与故障关联分析 目标:原始数据集是含大量中文的xls格 ...

  9. Myeclipse8.5 最新注册码以使用方法（可以用到2015年！！！）

    已破解的一组,复制即可!(注册码到2015年哦!) name:LIKEcode:YLR8ZC-855550-6067725176540043 使用方法:把注册码贴到Window-->prefer ...

  10. 基于tp框架实现的递归城市查询

    控制器层: 接下来就是模型层: 如果说你的数据量庞大到致使apache或者nginx停止运行,有两点原因: 1.代码耦合性不高,代码有错误: 2.php.ini里面有一个memory_limit的这个 ...