一、前言

大家不論學習什麼程式語言、選擇走前端後端或系統分析,一定都學過HTML這個文本標記語言,當然隨著語言不同可能檔案副檔名與註解方式不一樣,這篇想跟大家分享關於它的一些冷知識,個人覺得有些滿實用的唷!

二、HTML裡的符號

因為我很常使用 Markdown 語法做筆記或會議記錄,甚至近期已經著迷到會用它做旅遊規劃的慾望清單XD所以難免在日常累積中,會有需要用到特殊符號的需求,以下分享一些我個人搜集並常常使用的網站資源。

項次 符號種類 說明
1 基本常見的字母或特殊字元 就是日常會用到的,這個網站都有唷~
2 非常齊全、並意想不到的符號 左側有功能選單,非常清楚明瞭,可以組出特別的想法們
3 常見和冷門的符號 有提供UNICODE、HEX CODE和HTML CODE,是我個人最常使用的查詢網站。我覺得很多都很可愛,像是雪人 ☃
4 HTML的數學特殊符號 像是 ∑
5 基本且常見的實用符號 像是版權的© 或是基本的箭頭符號 →

三、HTML裡的空格

大家應該有遇過想在 markdown 語法裡,適當地呈現文字縮排、空格的方法吧?一般來說,大多數的文字編輯器介面可能不支援我們所熟悉的空白鍵,會看不出效果。還有其他需要使用的狀況,大家可以參考以下我統整HTML 裡 entity 的語法與示範,了解一下實際運用的效果唷~

entity語法 作用 範例程式碼 範例效果
  全形空格,1個中文字的寬度 「」可以注意到我的每個段落開頭都有 「」可以注意到我的每個段落開頭都有
  半形空格,半個中文字的寬度 「 」有時候排版需要縮排可以使用 「 」有時候排版需要縮排可以使用
  按空白鍵產生的空格 大家最熟悉的「 」距離? 大家最熟悉的「 」距離?
  窄空格,約1/6個中文字的寬度 大概是一種曖昧「 」距離? 大概是一種曖昧「 」距離?
‌ 零寬度,用於切開兩個字元 國中談戀愛都會被強制分「‌」手 國中談戀愛都會被強制分「‌」手
‍ 零寬度,用於產生連字效果 但大家還是會偷牽「‍」小手 但大家還是會偷牽「‍」小手

我自己在編輯HTML時,累積出一些經驗,像是遇到首行縮排兩字或或排版不整齊的狀況,善用這些空格符號就可以快速解決問題,所以我覺得這也算是冷知識吧。    是我最常使用的空格符號。

四、結論與自我鼓勵

第一次參加鐵人賽,就迎來了意想不到的生活意外,今日是媽媽開刀住院的第一天,有些手忙腳亂,所以今日的文章稍微比較匆忙結束,晚一點或明天起床後會再找時間補齊內容,祝福大家與我自己能持續完賽並身體健康。