HTML pre和code的作用和用法

pre標(biāo)簽

定義

pre 元素可定義預(yù)格式化的文本丑搔。被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符划鸽。而文本也會(huì)呈現(xiàn)為等寬字體芋酌。

作用和用法
  • < pre> 標(biāo)簽的一個(gè)常見應(yīng)用就是用來表示計(jì)算機(jī)的源代碼。
  • 可以導(dǎo)致段落斷開的標(biāo)簽(例如標(biāo)題挑庶、< p> 和 <address> 標(biāo)簽)絕不能包含在 < pre> 所定義的塊里陆爽。盡管有些瀏覽器會(huì)把段落結(jié)束標(biāo)簽解釋為簡(jiǎn)單地?fù)Q行什往,但是這種行為在所有瀏覽器上并不都是一樣的。
  • pre 元素中允許的文本可以包括物理樣式和基于內(nèi)容的樣式變化慌闭,還有鏈接别威、圖像和水平分隔線。當(dāng)把其他標(biāo)簽(比如 < a> 標(biāo)簽)放到 < pre> 塊中時(shí)驴剔,就像放在 HTML/XHTML 文檔的其他部分中一樣即可省古。示例如下:


上面這段代碼的顯示效果如下:

<html>
    <head> 
    </head>
    <body>
    </body>
</html>
提示和注釋
  • 提示:制表符(tab)在 < pre> 標(biāo)簽定義的塊當(dāng)中可以起到應(yīng)有的作用,每個(gè)制表符占據(jù) 8 個(gè)字符的位置仔拟。但是我們不推薦使用它衫樊,因?yàn)樵诓煌臑g覽器中,Tab 的實(shí)現(xiàn)各不相同利花。在用 < pre> 標(biāo)簽格式化的文檔段中使用空格,可以確保文本正確的水平位置载佳。
  • 提示:如果您希望使用 < pre> 標(biāo)簽來定義計(jì)算機(jī)源代碼炒事,比如 HTML 源代碼,請(qǐng)使用符號(hào)實(shí)體來表示特殊字符蔫慧,比如"&lt;" 代表 "<"挠乳,"&gt;"代表 ">","&amp;" 代表 "&"姑躲。
HTML 與 XHTML 之間的差異

在 HTML 4.01 中睡扬,pre 元素的 "width" 屬性是不被贊成使用的。
在 XHTML 1.0 Strict DTD 中黍析,pre 元素的 "width" 屬性是不被支持的 卖怜。

code標(biāo)簽

定義

< code> 標(biāo)簽用于表示計(jì)算機(jī)源代碼或者其他機(jī)器可以閱讀的文本內(nèi)容。

作用和用法
  • 軟件代碼的編寫者已經(jīng)習(xí)慣了編寫源代碼時(shí)文本表示的特殊樣式阐枣。< code> 標(biāo)簽就是為他們?cè)O(shè)計(jì)的马靠。包含在該標(biāo)簽內(nèi)的文本將用等寬、類似電傳打字機(jī)樣式的字體(Courier)顯示出來蔼两。
  • 只應(yīng)該在表示計(jì)算機(jī)程序源代碼或者其他機(jī)器可以閱讀的文本內(nèi)容上使用 < code> 標(biāo)簽甩鳄。雖然 < code> 標(biāo)簽通常只是把文本變成等寬字體,但它暗示著這段文本是源程序代碼额划。將來的瀏覽器有可能會(huì)加入其他顯示效果妙啃。例如魁巩,程序員的瀏覽器可能會(huì)尋找 < code> 片段,并執(zhí)行某些額外的文本格式化處理火架,如循環(huán)和條件判斷語句的特殊縮進(jìn)等纽竣。示例如下:

    顯示效果如下:

hello world

提示和注釋

提示:如果只是希望使用等寬字體的效果,請(qǐng)使用 <tt> 储笑√鹑郏或者,如果想要在嚴(yán)格限制為等寬字體格式的文本中顯示編程代碼突倍,請(qǐng)使用 < pre>

pre和code的區(qū)別

code只顯示單行編程代碼腔稀;pre則是顯示一大段編程代碼,而且會(huì)保留原文本中的空格和換行羽历。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末焊虏,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子秕磷,更是在濱河造成了極大的恐慌诵闭,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,607評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件澎嚣,死亡現(xiàn)場(chǎng)離奇詭異疏尿,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)易桃,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,239評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門褥琐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人晤郑,你說我怎么就攤上這事敌呈。” “怎么了造寝?”我有些...
    開封第一講書人閱讀 164,960評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵磕洪,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我诫龙,道長(zhǎng)析显,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,750評(píng)論 1 294
  • 正文 為了忘掉前任赐稽,我火速辦了婚禮叫榕,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘姊舵。我一直安慰自己晰绎,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,764評(píng)論 6 392
  • 文/花漫 我一把揭開白布括丁。 她就那樣靜靜地躺著荞下,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上尖昏,一...
    開封第一講書人閱讀 51,604評(píng)論 1 305
  • 那天仰税,我揣著相機(jī)與錄音,去河邊找鬼抽诉。 笑死陨簇,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的迹淌。 我是一名探鬼主播河绽,決...
    沈念sama閱讀 40,347評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼唉窃!你這毒婦竟也來了耙饰?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,253評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤纹份,失蹤者是張志新(化名)和其女友劉穎苟跪,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蔓涧,經(jīng)...
    沈念sama閱讀 45,702評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡件已,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,893評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了元暴。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拨齐。...
    茶點(diǎn)故事閱讀 40,015評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖昨寞,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情厦滤,我是刑警寧澤援岩,帶...
    沈念sama閱讀 35,734評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站掏导,受9級(jí)特大地震影響享怀,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜趟咆,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,352評(píng)論 3 330
  • 文/蒙蒙 一添瓷、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧值纱,春花似錦鳞贷、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,934評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春咱筛,著一層夾襖步出監(jiān)牢的瞬間搓幌,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,052評(píng)論 1 270
  • 我被黑心中介騙來泰國(guó)打工迅箩, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留溉愁,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,216評(píng)論 3 371
  • 正文 我出身青樓饲趋,卻偏偏與公主長(zhǎng)得像拐揭,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子篙贸,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,969評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • pre和code表示的相同點(diǎn):都是對(duì)于文本內(nèi)容的格式化 pre和code表示的不同點(diǎn):pre 元素可定義預(yù)格式化的...
    LYF閑閑閑閑閱讀 4,038評(píng)論 1 1
  • HTML標(biāo)簽解釋大全 一投队、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,247評(píng)論 1 41
  • HTML <pre> 標(biāo)簽定義和用法 定義: 標(biāo)簽的意思是 “preformatted text”(預(yù)格式化的文...
    07120665a058閱讀 1,634評(píng)論 2 4
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)爵川,斷路器敷鸦,智...
    卡卡羅2017閱讀 134,657評(píng)論 18 139
  • 蘇教版八年級(jí)上冊(cè)第六單元是一個(gè)自由讀寫單元,該單元主題是“高新科技”寝贡,總共有四課扒披,涉及到科學(xué)的意義、太空生活圃泡、...
    玫蘭妮閱讀 322評(píng)論 0 0