HTML <tt> Tag

• w3schools
• w3c

---

定義及用法 Definition and Usage

注意：HTML5不再支援<tt>標籤

當要輸出像 teletype text 那樣的「等字距」文字時，使用<tt>標籤

---

使用技巧及注意事項 Tips and Notes

HTML5裡廢棄了<tt>標籤，建議使用CSS的方法去設定就可以了。範例裡頭我再詳細說明

---

範例 Examples

範例 1 example：

<p><tt>This text is teletype text.</tt></p>
<p>This text is not teletype text.</p> 

Demo結果如下

This text is teletype text. 這是電傳文字樣式,有差別嗎?

This text is not teletype text. 這不是電傳文字樣式,有差別嗎?

範例 1 中，第一行文字用了<tt>，和第二行比較起來，第一行文字中的每個符號都是等距寬 (monospaced )的，尤其是標點符號、空格這二個很明顯。這種需求多半是針對為了輸出列印，很講究排版的人所制定的。

HTML5中，棄置了這種單純調整樣式的標籤，樣式統一交給CSS來設定。所以若是習慣使用<tt>的人，要改成以下的方式來處理。

範例 2 example：

<style type="text/css">
p.serif{font-family:"Times New Roman",Georgia,Serif}
p.sansserif{font-family:Arial,Verdana,Sans-serif}
p.monospace{font-family:"Courier New","Lucida Console",Monospace}
</style>
<p class="serif">Text shown in the TimesNewRoman font.</p>
<p class="sansserif">Text shown in the Arial font.</p>
<p class="monospace">Text shown in the Courier New font.</p>
        

Demo結果如下

This is a paragraph, shown in the Times New Roman font.

This is a paragraph, shown in the Arial font.

This is a paragraph, shown in the Courier New font.

範例二就是CSS設定font-family的方式