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

<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 10print 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>

转载于:https://www.cnblogs.com/zuihongyan/p/5641130.html

HTML“计算机输出”标签 codekbdsampttvarpre相关推荐

  1. 、HTML“计算机输出”标签codekbdsampttvarpre

    毕竟是盗版别人的,啊哈哈哈...剪短的填写了一下 1 .HTML"计算机输出"标签<code><kbd><samp><tt>< ...

  2. 022_html计算机输出标签

    1. html计算机代码格式 1.1. 通常, html使用可变的字母尺寸, 以及可变的字母间距.在显示计算机代码示例时, 并不需要如此. 1.2. <kbd>, <samp> ...

  3. html中文本格式化、预格式化、计算机输出标签、address、title、文字方向、著作

    文本格式化标签: 预格式化标签pre: 网页中文本默认是显示一行,没有格式,通过<pre></pre>标签包裹会显示默认的格式. <pre> <!-- 通过p ...

  4. 计量经济学计算机输出结果,计量经济学作业答案A..doc

    计量经济学作业答案A. 计量经济学(本科) 第一次作业(First Assignment) 答案 问题1 某一元回归模型y = ?0 + ?1 x + u 中 ?1 的估计量(OLS法-最小二乘法)用 ...

  5. 信息学奥赛一本通 2060:【例1.1】计算机输出

    [题目链接] ybt 2060:[例1.1]计算机输出 [题目考点] 1. 输出字符串 cout << 字符型常量; printf(字符型常量); [题解代码] 解法1: #include ...

  6. 信息学奥赛一本通(2060:【例1.1】计算机输出)

    2060:[例1.1]计算机输出 时间限制: 1000 ms         内存限制: 65536 KB 提交数: 597     通过数: 424 [题目描述] 在屏幕上输出"Hello ...

  7. CRF++中的unigram和bigram features指定是uni/bigrams的输出标签

     Cite: (http://www.cnblogs.com/pangxiaodong/archive/2011/11/21/2256264.html) unigram/bigram很容易混淆,因 ...

  8. 计量经济学计算机输出结果,计量经济学作业结果解析A.doc

    计量经济学作业结果解析A 计量经济学(本科) 第一次作业(First Assignment) 答案 问题1 某一元回归模型y = (0 + (1 x + u 中 (1 的估计量(OLS法-最小二乘法) ...

  9. 在网络中 计算机输出的信号是,2019陕西国家电网校园招聘计算机类笔试:计算机网络自测四...

    1. 在网络中,计算机输出的信号是( ). A.模拟信号 B.数字信号 C.广播信号 D.脉冲编码信号 1.[答案] B.解析:计算机输出的信号是二进制数据信号. 2.下列哪一项是分组交换的缺点( ) ...

最新文章

  1. 随笔之如何实现一个线程池
  2. JCheckBox 默认选择_[注册表] 将Windows 10默认应用程序设置页面添加到桌面右键菜单中...
  3. leetcode算法题--零钱兑换
  4. C++ MFC界面读写USB HID设备数据程序
  5. boost::container_hash实现检查浮点函数
  6. 门户网站运营的几个方法
  7. java合并单元格同时导出excel
  8. 牛客网 【每日一题】5月11日题目精讲 Moovie Mooving
  9. C语言学习:snprintf()函数
  10. oraclize预言机资料
  11. Windows 7 BitLocker 体验
  12. 爬虫实现股票分析(三)
  13. C语言程序设计(第三版)何钦铭著 习题2-2
  14. 北海屠龙记------十三
  15. 如何看待数字化转型对制造业的影响?
  16. Ubuntu下查看文件、文件夹和磁盘空间的大小
  17. php session fixation,Session Fixation 原理与防御
  18. Boxy SVG for Mac版矢量图编辑软件
  19. 机器学习Sklearn——红酒分类案例详解决策树模型参数
  20. 在VS Code中开发ESP32遇到如下IDF_PATH环境变量不一致的警告问题

热门文章

  1. 【DS with Python】 Pandas中Series DataFrame的结构、创建、查询、修改语法与实例
  2. php黑名单绕过,文件上传漏洞之黑名单检测绕过
  3. poco c++感性认识
  4. Win10安装Docker和k8s
  5. AE TypeMonkey
  6. ubuntu下安装(二)印象笔记(中国版而不是国际版)
  7. 电大计算机应用基础win7操作,新版电大《计算机应用基础》(win7)操作题解题步骤.doc...
  8. python框架之flak学习笔记
  9. 项目开发-工具-版本控制Git完整系统化使用说明
  10. 下拉点击跳到指定链接(类同友情链接)