html <code>&<pre>

code标签:是行内元素

1、定义: <code>标签, 用于表示计算机源代码或者其他机器可以阅读的文本内容。软件代码的编写 者习惯了编写代码时的代码格式,那么这个<code>标签就是为软件代码编写者设计的, code标签内的文本将用等宽、类似电传打字机样式的字体(Courier)显示出来。

2、应用:应该是只用在表示计算机程序源代码或者其他机器可以阅读的文本内容上。

3.<code> 标签的功能有:将文本变成等宽字体;还有一个功能就是暗示这段文本是源程序代码。那么根据第二个功能,将来浏览器可能会根据自己的实际情况添加效果。例如,程序员的浏览器可能会寻找 <code> 片段,并执行某 些额外的文本格式化处理,如循环和条件判断语句的特殊缩进等。

4、示例: 我们可以看看下面不加code标签的文本片段和加上code标签的文本片段之间的格式上的区别。需要注意的是,这里只是演示了code标签的第一个功能,至于暗示浏览器这段代码时源程序的功能,需要在具体的浏览器上才能显示。

如下代码:

<code>
document.getELementById("a");
document.getELementById("b");
document.getELementById("c");
</code>
<br>
document.getELementById("d");

在浏览器器的显示效果为:

效果图.png

pre标签: 块级元素

1、pre标签的定义,<pre>标签用来定义预格式化的文本,被包围在pre标签中的文本通常会保留空格和换行符, 而文本也会呈现出等宽字体。同样,pre标签的一个常见的应用便是用来保存计算机中的源代码文本。

2、pre标签的功能,pre标签一个常见的应用便是用来保存计算机中的源代码的文本。但是,需要注意的是, 可以导致段落断开的标签(例如标题、<p><address> 标签)绝不能包含在 <pre> 所定义的块里。 pre标签允许的文本可以包括物理样式和基于内容的样式变化,还有链接、图像和水平分隔线。 当把其他标签(比如 <a> 标签)放到 <pre> 块中时,就像放在 HTML/XHTML 文档的其他部分中一样即可。

3、pre标签的示例:下面的代码(html中的源代码)

<pre>
  这就是
            pre标签
  显示
                          效果!!!
</pre>

在浏览器中显示效果:

效果图.png

code标签和pre标签之间的关系

共同点:是应用上类似,都主要应用于浏览器显示计算机中的源代码。
不同点:
code标签的一个功能是暗示浏览器code标签所包围的文本是计算机源代码,浏览器可以做出自己的样式处理;
pre标签则没有这项功能,但是pre标签可以保留文本中的空格和换行符,保留文本中的空格和换行符是计算机源代码显示 所必须的样式。

code标签和pre标签是可以嵌套使用的,但是必须注意两者的嵌套顺序.

分别在什么情况下使用?

  • 如果想要内联显示代码,那么应该使用 <code>标签

  <pre>  
  <code style="background-color: red">hello world</code> 
  <code style="background-color:green">hello sdftyworld</code>         
  <code>hello worldsdgh</code>
  </pre>

效果:

效果图.png
  • 如果代码需要被显示为一个独立的块元素或者代码有多行,那么应该使用 <pre>标签

<code> 
<pre style="background-color: red">hello world</pre> 
<pre style="background-color:green">hello sdftyworld</pre> 
<pre>hello worldsdgh</pre>
</code>

效果:


Paste_Image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,951评论 19 139
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,321评论 1 41
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,805评论 1 92
  • 陈三 陈三是我们那边的一个老人,按照比较文雅的说法,他是我们那边几个村庄的...
    剑气尽阅读 714评论 0 1
  • 图文/刘懒懒 我想 打心底里透出的开心 或许是 就算笑不出八颗牙 眼睛也会眯成缝儿 同理 打心底里的真正放下 大概...
    少女哪吒刘懒懒阅读 301评论 0 4