iT邦幫忙

2022 iThome 鐵人賽

DAY 21
0
自我挑戰組

網頁前端設計系列 第 21

Day21-HTML(十九):新增刪除引用與預先格式化

  • 分享至 

  • xImage
  •  

今天會介紹新增、刪除、引用、和預先格式化的標籤,那麼就開始吧~
(๑•̀ㅂ•́)و✧

1. <del> 標示被刪除的文字

用來標示一段被刪除的文字內容,常和<ins>一起使用,瀏覽器預設樣式是刪除線。

屬性:

  • cite:可以指定一個URL連結,解釋該段文字被刪除的原因。
  • datetime:標註修改發生的日期與時間。
  • 例如:
    <p><del>此文字已被刪除</del>,這是該段其餘的內容。</p>
    <del><p>想吃麥當當www(此段內容已被刪除)</p></del>
    https://ithelp.ithome.com.tw/upload/images/20220921/20151992d1qK3i8HEq.png
    -> 結果:
    https://ithelp.ithome.com.tw/upload/images/20220921/20151992ZejWOadZpM.png

2. <ins> 標示新插入的文字

用來標示一段新插入的文字內容,常和<del>一起使用,瀏覽器預設樣式是底線。

屬性:

  • cite:可以指定一個URL連結,解釋該段文字被編輯的原因。
  • datetime:標註修改發生的日期與時間。
  • 例如:
    <p>友: 午餐吃什麼?</p>
    <del><p>我: 想吃麥當當www</p></del>
    <ins><p>友: 不要把薯條當正餐啊!</p></ins>
    https://ithelp.ithome.com.tw/upload/images/20220921/20151992g6uwVEqJLi.png
    -> 結果:
    https://ithelp.ithome.com.tw/upload/images/20220921/201519928sutqxsuqX.png

3. <blockquote> 區塊引用文字

用來引用段落文字,是區塊式的多行文字引用,可以用cite屬性指定引用來源的URL。

  • 例子:
    <blockquote cite="xxx">
    <h1>blockquote</h1>
    <p>區塊式的多行文字引用</p>
    </blockquote>
    https://ithelp.ithome.com.tw/upload/images/20220921/20151992hb33y1azhv.png
    -> 結果:
    https://ithelp.ithome.com.tw/upload/images/20220921/20151992iug7M2P1L3.png

4. <q> 行內引用文字

用來在文字行內引用一句短文字,是行內式的短文字引用,引用文字前後會自動出現引號,可以用cite屬性指定引用來源的URL。

  • 例子:
    <p>q標籤<q cite="xxx">行內式的短文字引用</q></p>
    https://ithelp.ithome.com.tw/upload/images/20220921/20151992sTOOEAwmsX.png
    -> 結果:
    https://ithelp.ithome.com.tw/upload/images/20220921/20151992TTdamtkWJc.png

5. <pre> 預先格式化

用來保存原始文字內容的格式,就是文字內容中的空白、換行都會被保留下來並顯示,瀏覽器預設樣式是等寬字型。

  • 例如:
    https://ithelp.ithome.com.tw/upload/images/20220921/20151992PlXGhNt1uf.png
    -> 結果:
    https://ithelp.ithome.com.tw/upload/images/20220921/20151992XZDLWIuNZE.png

  • 在HTML中如果要正確地顯示預留字元,就不能使用小於符號「<」和大於符號「>」,因為瀏覽器會誤認為它們是標籤。

  • 代替小於符號:&lt;&#60;

  • 代替大於符號:&gt;&#62;

6. <code> 顯示程式碼內容

用來顯示電腦程式碼內容,瀏覽器預設樣式是等寬字型。常用來和<pre>一起使用,讓<code>裡程式碼的空白和換行都可以被保留。

  • 例如:
    https://ithelp.ithome.com.tw/upload/images/20220921/20151992UhnY8Q5Gpk.png
    -> 結果:
    https://ithelp.ithome.com.tw/upload/images/20220921/20151992GQin8Y5wBr.png

  • 在HTML中如果要正確地顯示預留字元,就不能使用小於符號「<」和大於符號「>」,因為瀏覽器會誤認為它們是標籤。

  • 代替小於符號:&lt;&#60;

  • 代替大於符號:&gt;&#62;


上一篇
Day20-HTML(十八):表單-其他
下一篇
Day22-HTML(二十):區塊容器
系列文
網頁前端設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言