傑克! 真是太神奇了!

前言

我的 "關於 PoE 以及 Raspberry Pi 的 PoE" 這一篇貼文裡, 有來自 "維基百科" 的三張 Raspberry Pi 的照片及一張從網路搜來的圖片. 而我, 需要在它們上頭作一些標記. 由於圖片已經上傳到 pixnet 了, 不想用小畫家改圖後再重新上傳, 於是突發奇想: 是否可以在貼文中直接利用 HTML 語法將 SVG 疊在它們上面?

可是一直無法在網路上找到相關主題的貼文, StackOverflow 也搜不到類似的問題解答 (可能是搜尋時使用的 keyword 不對??), 所以就先放著. 最近得空, 總算自己把它解決了. 故有此篇記錄如何解決.

方法一: 原先的想法

有關 Unicode 的編碼規則及 Unicode 的 BOM 可以參閱我的這一篇貼文:
"Python: 關於 Unicode 的 BOM"

在 HTML 中表示 Unicode 字元

HTML 的內容直接有支援 Unicode, 所以直接輸入或者貼上 Unicode (並以 UTF-8 編碼存檔) 即可. 不過由於部份符號有輸入 (或顯示/辨識) 的問題, 同時也為了 browser 轉譯頁面內容時不會產生定義糢糊不明的情況, HTML 還定義了一些特殊符號以編碼值轉譯的方式輸入: 例如:

有幾個 HTML 屬性用途相當特別, 特別記下以茲備忘:

1. title:

title 屬性可以附加在任何的 tag 上, 它的功用是產生類似 Tooltip Text 的提示效果: 當滑鼠停留在某個元素上面時, 就會出現提示文字. 例如:

<p title='簡介'>落落長的文章本文, 落落長的文章本文, 落落長的文章本文...</p>

特性

• 所有的 HTML tag 都可以附帶指定 ID 的屬性. 例如:

  <div id="div1" ...>
  <p id="paraX"...>This is a sample paragraph. ...</p>
  <table id="time_zone"><tr>...
  

• ID 值 (原則上) 必需唯一. (參看 注意事項1)
• ID 值的合法字元為: 第一個字元為英文字母 [A-Za-z], 加上任何長度組合的 英文字母, 數字 [0-9], 減號 (-), 底線 (_), 冒號 (:), 小數點 (.) (參看 注意事項2)

用途

• 用於 CSS selector, 指定需要套用的元素. 例如:

  <style type="text/css">
  #div1 {color:red; margin: 5px;}
  </style>
  ...
  <div id="div1">
  <p>....</p>
  </div>
  

• 用於建立文件的參考位置 (anchor). 一但 anchor 點標示之後, 自己或別的文件就可以使用 <a> tag 來連結, 語法 <a href='...'>
• 連結到不同文件的參考位置 <a href="doc_url#id_value">...</a>
• 連結到同一文件中的參考位置 <a href="#id_value">...</a>
• 用於同一文件中, 沒有明確的連結目的地. 如: <a href="#" onclick="..." >...</a> 主要是執行 onclick="..." 內的 javascript_(備註)
• 這類參考位置除了使用 id='...' 來標示之外, 也可以用 name="..." 來標示.
• 用於 javascript 取得需要參考之 HTML 元素, 例如:

  <div id="id1">
  ...
  </div>
  <script type="text/javascript">
    var xObj = document.getElementById("id1");
    ...
  </script>