1. 程式人生 > ><pre> <textarea> <code>標簽區別

<pre> <textarea> <code>標簽區別

效果 包含 條件判斷 sch 區別 源程序 textarea images log

這篇文章裏面放的大都是我自己寫程序的時候遇到的一些小問題,其實都是自己沒有掌握的點,別人看起來應該很簡單啦,但寫下來能提醒自己,也能鼓勵一下自己,這條路也不好走哇。

<pre> <textarea> <code>三個標簽區別:之所以要說這個,是因為我在寫代碼的時候遇到這樣的問題:需要把html源代碼在網頁中顯示出來,直接寫<>這樣的標簽顯然會被瀏覽器解析,因此我查了一下,可以用&lt;代替< ,&gt;代替>,但是直接這樣寫會失去代碼中的換行等具體格式,非常難讀,因此就使用了專門的標簽實現。

  <pre>:pre 元素可定義預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。而文本也會呈現為等寬字體。可以導致段落斷開的標簽(例如標題、<p> 和 <address> 標簽)絕不能

包含在 <pre> 所定義的塊裏。盡管有些瀏覽器會把段落結束標簽解釋為簡單地換行,但是這種行為在所有瀏覽器上並不都是一樣的。pre 元素中允許的文本可以包括物理樣式和基於內容的樣式變化,還有鏈接、圖像和水平分隔線。當把其他標簽(比如 <a> 標簽)放到 <pre> 塊中時,就像放在 HTML/XHTML 文檔的其他部分中一樣即可。

  將代碼放在<pre>中的源碼:

  

<pre>
&lt;div id="div1"&gt;
&lt;p id="p1"&gt;這是一個段落&lt;/p&gt;
&lt;p id="p2"&gt;這是另一個段落&lt;/p&gt; &lt;/div&gt; &lt;script&gt; var para=document.createElement("p"); var node=document.createTextNode("這是新段落。"); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para); &lt;/script&gt; </
pre>

  註意此時仍需要用&lt;代替< ,&gt;代替>。

  效果:

  技術分享

  <textarea>:標簽定義多行的文本輸入控件。文本區中可容納無限數量的文本,其中的文本的默認字體是等寬字體(通常是 Courier)。可以通過 cols 和 rows 屬性來規定 textarea 的尺寸,不過更好的辦法是使用 CSS 的 height 和 width 屬性。

  源代碼與上述相同,效果圖為:

  技術分享

  <code>標簽用於表示計算機源代碼或者其他機器可以閱讀的文本內容。軟件代碼的編寫者已經習慣了編寫源代碼時文本表示的特殊樣式。<code> 標簽就是為他們設計的。包含在該標簽內的文本將用等寬、類似電傳打字機樣式的字體(Courier)顯示出來,對於大多數程序員和 W3School 的用戶來說,這應該是十分熟悉的。只應該在表示計算機程序源代碼或者其他機器可以閱讀的文本內容上使用 <code> 標簽。雖然 <code> 標簽通常只是把文本變成等寬字體,但它暗示著這段文本是源程序代碼。將來的瀏覽器有可能會加入其他顯示效果。例如,程序員的瀏覽器可能會尋找 <code> 片段,並執行某些額外的文本格式化處理,如循環和條件判斷語句的特殊縮進等。

  <code>的效果圖:

  技術分享

<pre> <textarea> <code>標簽區別