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...
    米塔塔閱讀 3,321評論 1 41
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,948評論 18 139
  • 1、HTML介紹 1 2、Html和CSS的關系 HTML是網頁內容的載體。內容就是網頁制作者放在頁面上想要讓用戶...
    夏沫xx閱讀 1,442評論 0 8
  • HTML <pre> 標簽定義和用法 定義: 標簽的意思是 “preformatted text”(預格式化的文...
    07120665a058閱讀 1,667評論 2 4
  • 想象一下,假如你一個人流落孤島,你會想些什么?做些什么?會遇到什么事呢?孩子在《魯賓遜漂流記》這本書里找到了答案。...
    低若塵埃燦若星閱讀 201評論 0 0