HTML <code> and <pre>

The < code > Tag###

什么时候用code标签——当你想要把文本特别地显示为代码时

1 .在页面上显示简单的 代码段


<h2>First Example</h2>

<code><h2>First Example</h2>
<p>Some example code that will visually display on the web page</p>
</code>

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

First Example.png

The < pre > Tag###

在pre标签中的文本通常会保留空格和换行符, 而文本也会呈现出等宽字体。

1 . <pre>保留换行

<h2>SecondExample</h2>

<pre>This is the first line of text.

and this is the second line of text.

I am not using any line break tags;

Because the text is nested in a pre tag,

all "enter" breaks will be formatted literally.
</pre>

所有的 enter 换行,照字面地显示出来,结果如下:

SecondExample.png

2 .<pre>保留空白处

<h2>Third Example</h2>

<pre>This example will show how     tabbed   text

contained in a pre tag will be formatted literally.

</pre>

所有的 空白处,照字面地显示出来,结果如下:

Third Example.png

注意的是,pre标签会导致段落断开,所以例如标题<p><address>标签,绝不能包含在<pre>所定义的块里

* code和pre的嵌套*###

最常用的是在HTML里引用代码: pre套code

<pre>
<code><h2>Third Example</h2>
<p>Some example code that will visually display </p></code>
</pre>

效果:

HTML里引用代码.png

每天都努力一点
谢谢你看完


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

推荐阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 8,672评论 1 41
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,477评论 19 139
  • 1、HTML介绍 1 2、Html和CSS的关系 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户...
    夏沫xx阅读 5,423评论 0 8
  • HTML <pre> 标签定义和用法 定义: 标签的意思是 “preformatted text”(预格式化的文...
    07120665a058阅读 5,608评论 2 4
  • 想象一下,假如你一个人流落孤岛,你会想些什么?做些什么?会遇到什么事呢?孩子在《鲁宾逊漂流记》这本书里找到了答案。...
    低若尘埃燦若星阅读 1,319评论 0 0