国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

聊一聊HTML<pre>標簽

來源:懂視網 責編:小采 時間:2020-11-27 16:41:41
文檔

聊一聊HTML<pre>標簽

聊一聊HTML<pre>標簽:我們經常會在要保持文本格式的時候使用pre標簽,比如當我們要展示源代碼的時候,只要放一個pre標簽,然后把源代碼直接復制,粘貼,然后在頁面上就可以保持好格式。不會像放在其它標簽里那樣,把換行和空格都自動折疊了。這里看一下pre是如何工作的呢? pr
推薦度:
導讀聊一聊HTML<pre>標簽:我們經常會在要保持文本格式的時候使用pre標簽,比如當我們要展示源代碼的時候,只要放一個pre標簽,然后把源代碼直接復制,粘貼,然后在頁面上就可以保持好格式。不會像放在其它標簽里那樣,把換行和空格都自動折疊了。這里看一下pre是如何工作的呢? pr
我們經常會在要保持文本格式的時候使用pre標簽,比如當我們要展示源代碼的時候,只要放一個pre標簽,然后把源代碼直接復制,粘貼,然后在頁面上就可以保持好格式。不會像放在其它標簽里那樣,把換行和空格都自動折疊了。這里看一下pre是如何工作的呢?

pre標簽

HTML里的pre元素,可定義預格式化的文本。在pre元素中的文本會保留空格和換行符。文本顯現為等寬字體。
下面我們看一個示例,這里我使用的是一段css代碼,你也可以換成其它的。如下:

body{
 background:#fff;
 font: 12px/24px 1.66;
}

當我們用pre包裹它們時

body{
 background:#fff;
 font: 12px/24px 1.66;
}

會在瀏覽器上直接得到
1464574926745[4]
可以看出上面的tab,空格,換行都完整的保留下來了。
我們可以把這段css代碼放到其它元素下,如得到下面的圖。
1464575037169[4]
很完美,以后就可以用pre來標識代碼了。哪里想用放哪里,但這里還有一些可以優化。

語義化

pre元素并不能代碼放入,里面的內容是什么,可以是歌詞,可以是代碼,可以是其它文本。當pre元素來展示源代碼的時候最好的方式是用code元素來包裹代碼,這樣既可以保持格式又可以代表語義,一舉數得。如上面的代碼可以改寫為:

body{
 background:#fff;
 font: 12px/24px 1.66;
}

嵌套html其它標簽

pre中最好不要包含可以導致段落斷開的標簽(如:p,標題),雖然主流瀏覽器對此解析沒有問題,但最好不要這樣使用。存在著語義不明的情況,比如無法判斷是想顯示結構的不同展示,還是想把標簽作為代碼的一部分顯示,最好對這里只包含代碼文本,對于標簽進行轉義如'>'對應'>'。
pre元素中允許的文本可以包括物理樣式和基于內容的樣式變化,還有鏈接、圖像和水平分隔線。當把其它標簽放到pre塊中時,會被直接渲染為正常元素。
示例如下:

[ti:凡人歌]
[ar:李宗盛]
[al:凡人歌]
[00:00](music)
[00:28]你我皆凡人,生在人世間;
[00:35]終日奔波苦,一刻不得閑;
[00:43]既然不是仙,難免有雜念;
[00:50]道義放兩旁,利字擺中間。

顯示出來樣式如下:
1464577013316[4]

問題

文本過長時,溢出

如果我們在pre里放置的文本過長,中間也沒有換行,由于pre會保持文本的格式,導致文本溢出。
演示如下:


[ti:凡人歌][ar:李宗盛][al:凡人歌][00:00](music)[00:28]你我皆凡人,生在人世間;[00:35]終日奔波苦,一刻不得閑;[00:43]既然不是仙,難免有雜念;[00:50]道義放兩旁,利字擺中間。

瀏覽器中的表現
1464577279186[4]
解決方法1:給pre標簽定義橫向滾動條

pre{
 overflow:auto;
}

解決方法2:使用text-wrapping
直接定義pre標簽里的css屬性white-space的值為pre-wrap。

pre{
 white-space:pre-wrap;
}

渲染html元素

上面已經提到過,html元素會在pre標簽中直接被解析。如果我們想顯示這些標簽,只要把這些特殊符號轉換為符號實體,就可以了。如: "<" 代表 "<",">" 代表 ">"。

<ul class="main-list"> 
 <li><a href="#">藏新線才是最西藏的進、出線</a></li> 
 <li><a href="#">藏新線才是最西藏的進、出線</a></li> 
 <li><a href="#">藏新線才是最西藏的進、出線</a></li> 
 </ul>

也可以使用一些線上的工具去完成這個轉義的過程,這里可以百度一下,隨便找了一個截了個圖
1464578419416[4]

意外的空格

有時候我們把代碼直接復制到頁面時,編輯器會給我們自動縮進對齊,這里其實是很好的,但這里遇到pre標簽就有麻煩了,比如:


 
<ul class="main-list"> 
 <li><a href="#">藏新線才是最西藏的進、出線</a></li> 
 <li><a href="#">藏新線才是最西藏的進、出線</a></li> 
 <li><a href="#">藏新線才是最西藏的進、出線</a></li> 
 </ul>

結果效果如下:
1464579144453[4]

建議使用下面的形式來對代碼進行排版。


第一行
//中間代碼進行格式化
最后一行

擴展

定義一下tab的大小

pre{
 tab-size:2;
}

但這個IE瀏覽器支持情況不太好。視情況來選擇吧。
1464579807589

使用等寬字體

可以方便排版,看起來比較舒服。

使用語法高亮

這個要借助一些庫來完成,比如highlight.js,具體怎么使用,大家百度吧。

總結

上面的這些只是一些小的總結,如果有什么其它方式的應用,或這里沒提到的黑科技,大家可以在評論里提出來,一起討論。

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

聊一聊HTML<pre>標簽

聊一聊HTML<pre>標簽:我們經常會在要保持文本格式的時候使用pre標簽,比如當我們要展示源代碼的時候,只要放一個pre標簽,然后把源代碼直接復制,粘貼,然后在頁面上就可以保持好格式。不會像放在其它標簽里那樣,把換行和空格都自動折疊了。這里看一下pre是如何工作的呢? pr
推薦度:
標簽: 標簽 pre html
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 91精品国产91久久久久久最新 | 综合欧美日韩 | 中国特黄毛片 | 欧美亚洲国产一区二区 | 在线免费观看国产精品 | 亚洲综合二区 | 亚洲欧洲日产国码一级毛片 | 欧美视频一区二区三区 | 日韩在线免费 | 日韩区在线 | 国产精品第十页 | 中文字幕日韩一区二区三区不卡 | 91久久国产综合精品女同我 | 韩国美女vip福利一区 | 久久伊人中文字幕有码 | 青青操在线视频 | 国内视频一区二区三区 | 国产成人久久一区二区三区 | 最近中文字幕电影在线看 | 91热国产| 国模精品一区二区 | 国产欧美日韩在线不卡第一页 | 精品一区二区三区四区五区 | 日本成人一区 | 国产一区二三区 | 可以免费看的毛片 | 亚洲欧美综合视频 | 亚洲一区 中文字幕 久久 | 一道精品视频一区二区三区男同 | 日韩亚洲欧洲在线com91tv | 91亚洲国产成人久久精品网站 | 不卡一区二区三区四区 | 一道精品一区二区三区 | 一区二区三区在线视频观看 | 国产精品制服诱惑 | 看全色黄大色黄女片爽毛片 | 亚洲欧美中文日韩在线 | 亚洲欧美网| 91精品国产99久久 | 国模冰冰炮交图后02 | 一区二区三区久久 |