小狐狸事務所: HTML5

顯示具有 HTML5 標籤的文章。顯示所有文章

2024年5月26日星期日

好用的線上 HTML 碼格式化工具 : HTML Formatter

最近在測試 Python 爬蟲程式時發現一個好用的線上工具 :

# https://www.freeformatter.com/html-formatter.html

使用爬蟲工具如 BeautifulSoup 或 Selenium 擷取網頁時會抽絲剝繭一步步往目標資料前進, 通常會先觀察 response.text 或 response.page_content 結構來找尋目標資料位置, 但前端網頁設計師將網頁整整齊齊地寫 (他們才不會考慮寫爬蟲的人的感受), 檢視 HTML 原始碼時會發現大都亂糟糟地擠在一起 (應該是用壓縮器去除空格與跳行以縮小檔案大小), 這時就可以把原始碼貼到這個網站, 按下 "Format HTML" 鈕就會在底下看到格式化後整整齊齊的 HTML 碼 :

將結果複製到 HTML 編輯器就能好好地觀察結構了.

2022年12月28日星期三

HTML5 測試 : 讀寫本機文字檔案

今天在搜尋用瀏覽器讀寫本機檔案的方式時找到下面這篇文章 :

# HTML5 表單元件：client端客戶端電腦，開啟純文字檔案

我以前使用微軟 ActiveX 的 FileSystemObject 物件來處理本機檔案讀寫, 但那只能用在 IE 與 Edge, 沒辦法在 Chrome 或 FireFox 上跑. 此篇文章使用 HTML5 的 FileReader 物件來讀取本機文字檔, 可以在任何瀏覽器上執行. 可惜 FileWriter 目前還在開發中尚未成熟, 否則就能踢開 ActiveX 了.

由於這篇文章兼具說明用途, 原始碼夾在一堆 HTML 碼裡面較難閱讀, 我將其改寫為如下之範例來測試檔案讀取功能 :

測試 1 : 用 FileReader 讀取本機文字檔 [看原始碼]

<!DOCTYPE html>

<html>

<head>

</head>

<body>

function $(id) {return document.getElementById(id);}

function read_file(obj){

file=obj.files[0];

var fr=new FileReader();

fr.onload=function(e) {

$('content').value=e.target.result;

};

fr.readAsText(file);

}

</script>

</body>

</html>

此例網頁上有一個 type=file 的 input 按鈕元素, 當按下此按鈕時會觸發 onchange 事件 (注意不是 onclick 事件) 呼叫 read_file() 函式並傳入此按鈕物件, 其 files[0] 屬性會取得所選取之檔案內容, 然後建立一個 FilerReader 物件來讀取此檔案, 當載入完成就會觸發 onload 事件, 將檔案內容放入 textarea 元素中 (此處我模仿 jQuery 的 $ 來取得 DOM 物件).

我在 Chrome, Firefox, 以及 Edge 測試確實可用 :

不過檔案選取按鈕在不同瀏覽器上顯示的外觀不同, Chrome 與 Edge 都顯示 "選擇檔案", 而 FireFox 則顯示 "瀏覽 ...".

雖然 HTML5 的 FileWriter 尚未被實作在眾瀏覽器中, 若要將網頁中的資料儲存於本機中可以利用 window.location.href 下載檔案的方式來暫代, 參考下面這篇 :

# HTML5 表單元件：client端客戶端電腦，儲存純文字檔案

關鍵是如下指令 :

window.location.href="data:application/x-download;charset=utf-8," + encodeURIComponent(data);

程式結構與上面類似, 如下面範例所示 :

測試 2 : 用 window.location.href 下載方式寫入本機文字檔 [看原始碼]

<!DOCTYPE html>

<html>

<head>

</head>

<body>

function $(id) {return document.getElementById(id);}

function read_file(obj){

file=obj.files[0];

file_name=file.name;

var fr=new FileReader();

fr.onload=function(e) {

$('content').value=e.target.result;

};

fr.readAsText(file);

}

function write_file(){

data=$('content').value

window.location.href="data:application/x-download;charset=utf-8," +

encodeURIComponent(data);

}

</script>

</body>

</html>

結果如下 :

選取檔案讀入文字檔內容進行編輯, 然後按 "儲存內容" 會詢問儲存到哪一個 :

填入檔名按 "存檔" 即可.

此外也可以用 document.createElemen() 建立一個 a 元素後將要下載的內容設定給 href 屬性, 然後呼叫其 click() 方法下載, 作法參考下面這篇 (#42) :

# Easiest way to open a download window without navigating away from the page

測試 3 : 用建立 a 元素後呼叫其 click() 方法下載檔案 [看原始碼]

<!DOCTYPE html>

<html>

<head>

</head>

<body>

function $(id) {return document.getElementById(id);}

function read_file(obj){

file=obj.files[0];

file_name=file.name;

var fr=new FileReader();

fr.onload=function(e) {

$('content').value=e.target.result;

};

fr.readAsText(file);

}

function write_file(){

var a=document.createElement('a');

data=$('content').value

a.href="data:application/x-download;charset=utf-8," +

encodeURIComponent(data);

a.click();

}

</script>

</body>

</html>

結果與上面用 window.location.href 一樣.

2022年8月16日星期二

在網頁中顯示 HTML 原始碼的小工具 html2show

過去兩周在手刻 GitHub 架站教學網站過程中遇到一個很煩的問題, 就是要將 HTML 原始碼在網頁中呈現時, 除了要把 < 改成 < 與把 > 改成 > 外, 還要將空格改成   (這些都是 HTML 定義的實體 entity), 最後還要在最後面加上 <br> 跳行, 這些我都用 EditPlus 去操作, 雖然 EditPLUS 比記事本好用太多, 但還是覺得非常煩.

我在網路上找到一個可以轉換實體的網頁, 但它只處理 < 與 > 而已, 空格與尾端添加跳行則無支援, 這樣實用性並不高 :

# https://devpractical.com/html-tags-to-entities-converter/

今天複習了 jQuery 與 Javascript 語法後寫了一個符合自己需求的小工具 html2show :

# 在網頁中顯示 HTML 原始碼的小工具 html2show [看原始碼]

只要將 HTML 原始碼複製貼到上面的文字框, 然後按 "轉換", 下方就會出現結果了, 按 "複製" 鈕即可複製結果到剪貼簿. 雖然來得晚了點, 但後續也許還用得到 (在 Blogger 貼網頁不須轉換, Blogger 會自動轉換, 但自己寫網頁就需要).

這個網頁原始碼如下 :

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<br>

<form>

</div>

</form>

<form>

</div>

</form>

</div>

$(function(){

$("#trans").on("click", function(e){

var source=$("#source").val();

var reg=/\S/g;

var arr=source.split("\n");

for (var i in arr) {

var idx=arr[i].search(reg);

var nbsp=" ".repeat(idx);

var str=arr[i].replace(/</g, "<").replace(/>/g, ">");

arr[i]=nbsp + $.trim(str) + "<br>";

}

$("#dest").val(arr.join('\n'));

});

$("#copy").on("click", function(e){

$("#dest")[0].select();

document.execCommand("copy");

alert("已複製到剪貼簿!");

});

</script>

</body>

</html>

此網頁中的程式主要是讀取 HTML 原始碼後以跳行字元 \n 為界拆分每列為一個陣列, 然後在走訪此陣列的元素時, 先用正規表示法偵測每列最前面有幾個空格, 將第一個字元以前的空格用   實體取代, 接著分別將 < 與 > 用 < 與 > 取代, 以及在列尾加上 <br>, 最後用 join() 將陣列組合回字串.

這裡面用到了如下幾個技巧 :

str.search(/\S/g) :
這會傳回字串 str 中第一個找不是空格的字元位置, 這可用來傳給 repeat() 方法來產生前面要幾個  .
str.repeat(n) :
這會傳回字串 str 重複 n 後的結果字串, 例如 " ".repeat(2) 會得到 "  ".
$("#myid")[0] :
這會傳回 id 為 myid 元素之 jQuery 物件的原始 DOM 物件, 有時候還是需要用到 DOM.
$.trim(str) :
這會將字串 str 左右側的空格去除後傳回. 因為 Javascript 本身沒有 lstrip() 或 rstrip() 之類的字串方法, 所以 jQuery 的內建函數 $.trim() 就是個很好的彌補.
dom_obj.select() :
這會選取該 DOM 物件.
document.execCommand("copy") :
這會將所選擇的元素之內容複製到剪貼簿中.

參考 :

# Repeat a string in JavaScript a number of times

# String strip() for JavaScript? [duplicate]

# JavaScript 中將文字複製到剪貼簿

# How do I pull a native DOM element from a jQuery object?

# Why is document.execCommand("paste") not working in Google Chrome?

2022年8月14日星期日

完成教學網站 "用 GitHub 輕鬆架站"

因下周學會上課需要, 這兩周努力將之前部落格文章關於 GitHub 架站的濃縮整理在新申請的 GitHub 帳號上, 今天終於算是完工了. 雖然有將 CSS, Javascriipt, 與 jQuery 列入教學文件項目, 但這三個部分屬於進階要寫程式的領域, 對於在 GitHub 上架站來說, 只要對 HTML 與 Bootstrap 有概念, 會將模板改成自己的網頁就夠了, 所以以後有空再補充吧.

# https://yaohuang1966.github.io/

# https://github.com/yaohuang1966/yaohuang1966.github.io

本機專案資料夾 : D:\test\html\github_page

雖然兩周前交出簡報檔就算交差了, 但花兩周時間手刻一個網站卻是十幾年前才有的傻勁, 趁這機會又把 HTML 與 Bootstrap 複習一遍也還不錯.

2022-10-27 補充 :

這兩天新增 Jumbotron 大螢幕廣告範例, 但 Carousel 廣告輪播測試 NG, 可能是版本關係.

2023-01-15 補充 :

今天發現一個不錯的 GitPage 教學網站 :

# 不用懂git也能用GitHub Pages架設靜態網站並綁定網域

2022年8月3日星期三

Bootstrap 4 學習筆記 (十) : 警示, 面板與手風琴

這幾天因為要準備客家語文學會的 GitHub 架站簡報資料, 把 Bootstrap 筆記複習了一遍, 發現還缺了 alert (警示), panel (面板), 以及 accordion (手風琴) 這幾個內容呈現容器元件還沒測試, 所以就趁這機會做個完結唄. 本系列之前的測試文章參考 :

# Bootstrap 4 學習筆記 (一) : 環境配置
# Bootstrap 4 學習筆記 (二) : 網格與容器
# Bootstrap 4 學習筆記 (三) : 表格
# Bootstrap 4 學習筆記 (四) : 圖示與按鈕
# Bootstrap 4 學習筆記 (五) : 文字與圖片效果
# Bootstrap 4 學習筆記 (六) : 表單
# Bootstrap 4 學習筆記 (七) : 按鈕選單
# Bootstrap 4 學習筆記 (八) : 導覽頁籤
# Bootstrap 4 學習筆記 (九) : 導覽列

Bootstrap 教學文件參考 :

# 第 10 堂課 - 初探 bootstrap 網頁製作
# Bootstrap 初學介紹 #靜態篇

一. Alert (警示) :

此元件使用具有醒目背景色的 div 區塊來顯示重要訊息, 主要套用 alert 與下列五個樣式類別, 並指定 role="alert" 屬性 :

樣式類別	說明
alert	必要的警示區塊樣式
alert-success	背景為咖啡色之區塊
alert-info	背景為淡藍色之區塊
alert-warning	背景為黃色之區塊
alert-danger	背景為黃色之區塊
alert-dismissible	添加可關閉按鈕 (x)

這些 div 外面再用 class="container" 的 div 區塊包起來, 基本結構如下 :

這是 alert-success 訊息！

</div>

例如 :

範例 1-1 : 警示訊息區塊測試 [看原始碼]

<!DOCTYPE html>

<html>

<head>

</head>

<body>

這是 alert-success 訊息！

</div>

這是 alert-info 訊息！

</div>

這是 alert-warning 訊息！

</div>

這是 alert-danger 訊息！

</div>

</body>

</html>

結果如下 :

如果要建立可以關閉的警示, 需要添加 alert-dismissible 樣式類別, 並搭配一個有 close 樣式的 button 物件, 例如 :

</button>

這是 alert-danger 訊息！

</div>

完整範例如下 :

範例 1-2 : 可關閉之警示訊息區塊測試 [看原始碼]

<!DOCTYPE html>

<html>

<head>

</head>

<body>

這是 alert-success 訊息！

</div>

這是 alert-info 訊息！

</div>

這是 alert-warning 訊息！

</div>

這是 alert-danger 訊息！

</div>

</button>

這是 alert-danger 訊息！

</div>

</body>

</html>

結果如下 :

按後面那個 x 按鈕就可以關閉該條警示訊息了.

二. Panel (面板) :

面板也是像上面 alert 一樣的區塊, 但它除了主體 (body) 外還多出板首 (heading) 板尾 (footer) 兩部分, 不過首尾都是可有可無的. 基本結構由兩層 div 構成, 外層 div 需套用 panel 與下列四種背景色樣式類別 :

面板背景色樣式類別	說明
panel-default	背景為灰色之預設面板
panel-primary	背景為藍色之面板
panel-success	背景為咖啡色之區塊
panel-info	背景為淡藍色之區塊
panel-warning	背景為黃色之區塊
panel-danger	背景為紅色之區塊

主體要套用 panel-body 樣式類別, 而板尾則套用 panel-footer 樣式類別, 基本結構如下 :

</div>

例如 :

範例 2-1 : 各種背景色之面板區塊測試 [看原始碼]

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div class="panel-heading">面板板首 (default)</div>

</div>

<div class="panel-heading">面板板首 (primary)</div>

</div>

<div class="panel-heading">面板板首 (success)</div>

</div>

</div>

<div class="panel-heading">面板板首 (warning)</div>

</div>

<div class="panel-heading">面板板首 (danger)</div>

</div>

</body>

</html>

結果如下 :

板尾部分若不需要可以去除.

三. Accordion (手風琴) :

所謂手風琴效果 (accordion) 就是將網頁內容上下堆疊, 一次只展開一部份, 其餘部分會自動縮合起來的呈現方式, 這種可縮合 (collapse) 結構是在上面介紹的面板 (panel) 上發展出來的, 主要是添加了 a 標籤的頁內錨點 (anchor) 與 panel-collapse, collapse 等樣式類別來控制面板主體區塊的展開與縮合, 基本結構如下 :

</h4>

</div>

</div>

參考 :

# https://www.w3schools.com/bootstrap4/bootstrap_collapse.asp

可見此組件基本上就是一個加工後的面板, 主要是板首標題改用 a 標籤來控制本體 div 區塊中的錨點 (id='collapse1') 以使其展開或縮合, 並為 a 標籤添加 data-toggle="collapse" 屬性, 另外, 本體 div 區塊也要加上 panel-collapse 與 collapse 兩個樣式類別, 完整網頁碼如下例 :

範例 3-1 : 可縮合展開的面板區塊 (預設縮合) [看原始碼]

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</h4>

</div>

</div>

</body>

</html>

結果如下 :

預設內容是收合起來的, 點標題才會展開.

如果預設要展開, 可在本體的 div 區塊添加 in 樣式類別 :

</h4>

</div>

</div>

例如 :

範例 3-2 : 可縮合展開的面板區塊 (預設展開) [看原始碼]

結果如下 :

手風琴 (Accordion) 就是以上面的可收合面板為基礎建構的, 將多個可縮合面板再用一個樣式類別為 panel-group 的 div 區塊包起來並指定一個 id, 每一個可縮合面板添加一個 data-parent 屬性指向此 id 即可, 基本結構 (兩個可收合面板) 如下 :

</h4>

</div>

</div>

</h4>

</div>

</div>

手風琴群組裡面的每個面板都可以各自指定板首的背景色樣式類別, 例如 panel-primary, panel-info 等, 如下列範例所示 :

範例 3-3 : 可縮合展開的面板區塊 (預設展開) [看原始碼]

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</h4>

</div>

<div class="panel-body">內容 1 (default)</div>

</div>

</h4>

</div>

<div class="panel-body">內容 2 (primary)</div>

</div>

</h4>

</div>

<div class="panel-body">內容 3 (success)</div>

</div>

</h4>

</div>

</div>

</h4>

</div>

<div class="panel-body">內容 5 (warning)</div>

</div>

</h4>

</div>

<div class="panel-body">內容 6 (danger)</div>

</div>

</body>

</html>

注意, 其中面板 1 的主體區塊添加了 in 樣式類別, 所以面板 1 預設是展開的, 結果如下 :

可見每開啟一個面板, 其餘面板就會自動收合. 不過因板首的標題是 a 超連結, 所以會出現底線, 若不想出現底線可於每個板首 a 標籤添加 style="text-decoration:none;" 的樣式屬性, 或者於 head 標籤內的 style 標籤中, 統一規範所有超連結都步出現底線 :

a {text-decoration:none;}

參考 :

# Bootstrap 3 折叠插件 ( collapse )

# https://www.w3schools.com/bootstrap4/bootstrap_collapse.asp

2022年8月1日星期一

GitHub 個人網站設計 (二) : Bootstrap 網頁模板

昨天將月底客家語文學會講座的 GitHub 架站簡報資料寄出後, 覺得意猶未竟, 就從手邊一本旗標出版的 "一步到位 RWD 網頁程式設計" 這本書找到一個不錯的 Bootstrap 網頁範例修改為網頁模板, 只要填入自己的資料就可以製作出美美的個人網站了.

這個範例是該書第 12 章的 "日光美食部落格", 風格清爽大方, 也適合做個人網站 :

這網頁右上方的搜尋其實只是版面設計而已, 一般是要到後台資料庫搜尋本站內容, 但 GitHub 只能架設靜態網站, 為了保留整個版面設計, 我參考下面這篇文章將其改為 Google 搜尋 :

# Creating a Google search box using HTML form

事實上只需要在 form 標籤內添加如下三個屬性即可 :

action="http://www.google.com/search" method="get" target="_blank"

我將原範例網頁中的特定內容去除, 加以一般化後成為如下之網頁範本 :

# Bootstrap 網頁範本 1

<!DOCTYPE html>

<html>

<head>

<title>您的網站標題</title>

</head>

<body>

<a class="navbar-brand" href="#" style="color:white">您的網站名稱</a>

</button>

</div>

</ul>

</div>

</form>

</div>

</nav>

<h1>您的網站名稱</h1>

<p class="lead">您的網站簡介</p>

</div>

</header>

<hr>

<h3>您的文章段落1標題</h3>

<hr>

<h3>您的文章段落2標題</h3>

<hr>

<h3>您的文章段落3標題</h3>

<hr>

<nav>

</ul>

</nav>

</div>

</article>

<aside>

<h3>您的短文側邊框標題</h3>

</div>

<p>您的短文側邊框內容</p>

</div>

<h3>您的連結清單側邊框標題</h3>

</div>

<li><a href="#您的連結網頁1">您的連結名稱1</a></li>

<li><a href="#您的連結網頁2">您的連結名稱2</a></li>

<li><a href="#您的連結網頁3">您的連結名稱3</a></li>

<li><a href="#您的連結網頁4">您的連結名稱4</a></li>

</ol>

</div>

</aside>

</div>

<hr>

</div>

</footer>

</body>

</html>

可見此網頁架構是將 Bottstrap 的左邊 8 格作為主要內容區, 右邊 3 格作為側邊欄, 外帶 1 格 offset. 側邊欄使用 Panel 框, 此模板中只用了 pannel-danger 與 panel-warning, 總共有下列 5 種, 會套用不同的背景色 :

pannel-primary : 藍色
pannel-success : 咖啡色
pannel-info : 淡藍色
pannel-warning : 黃色
pannel-danger : 紅色

只要將此網頁中以 "您的..." 開頭的部分用自己的資料代替, 其餘都不要動, 首頁取名 index.htm, 其餘網頁都複製此首頁模板去改, 就可以建立美美的個人網站了.

瀏覽網頁 :

# https://yaohuang1966.github.io/bootstrap_template_1.htm

導覽列的網站名稱也可以換成一個 icon 圖, 只要準備一個 30*30 的圖檔上傳到 GitHub (此處是放在 images 目錄下), 然後將導覽列最前面的網站名稱替換為圖檔即可 :

</a>

原始碼如下 :

# Bootstrap 網頁範本 2 (導覽列的小圖示)

瀏覽網頁 :

# https://yaohuang1966.github.io/bootstrap_template_2.htm

如果導覽列上的頁籤有同類性質, 例如連結其他網站的 Facebook 或 Twitter, PTT 等可收納在一個 "社群網站" 的下拉式頁籤中以節省導覽列的空間, 作法參考下面這篇文章的範例 7 :

# Bootstrap 4 學習筆記 (八) : 導覽頁籤

與一般頁籤單純為 li 標籤內包 a 標籤不同之處是, 它的 li 元素要添加 dropdown 樣式, a 元素要添加 dropdown-toggle 樣式與 data-togle 屬性, 然後後面加一組樣式為 dropdown-menu 的 ul-li 清單選項組, 用來放被收納的頁籤, 這些書籤若有需要也可以用樣式為 divider 的 li 標籤區隔, 具體作法如下 :

<label>您的下拉式頁籤1</label>

</a>

<li><a href="#您的下拉式頁籤網頁1">您的下拉式頁籤網頁1</a></li>

<li><a href="#您的下拉式頁籤網頁1">您的下拉式頁籤網頁2</a></li>

<li><a href="#您的下拉式頁籤網頁1">您的下拉式頁籤網頁3</a></li>

</ul>

</li>

將上面網頁碼添加到模板 1 中的導覽列成為如下之模板 3 :

# Bootstrap 網頁範本 3 (下拉式頁籤)

瀏覽網頁 :

# https://yaohuang1966.github.io/bootstrap_template_3.htm

結果如下 :

如果需要多個下拉式頁籤, 只要複製貼上再修改即可.

上面的範本中首頁底下有 "上一頁" 與 "下一頁" 兩個按鈕來循序切換文章頁面, 也可以改用分頁導覽列 (pagination bar), 這樣就不需要逐頁切換, 可以直接跳頁了. 分頁導覽列如下 :

<nav>

</ul>

</nav>

用這組 nav 去替換上面三個模板中的 "上一頁" 與 "下一頁" nav 即得如下模板 4 :

# Bootstrap 網頁範本 4 (分頁導覽列)

瀏覽網頁 :

# https://yaohuang1966.github.io/bootstrap_template_4.htm

結果如下 :

因為是靜態網頁, 所以每一頁的分頁導覽列都必須手動調整各頁網址.

如果不需要側邊欄, 可以將 <aside> 與 </aside> 的部分拿掉, 然後將 <article> 底下的容器樣式從 col-sm-8 改為 col-sm-12 即可, 下面是從模板 3 改成的模板 5 :

# Bootstrap 網頁範本 5 (取消側邊欄)

瀏覽網頁 :

# https://yaohuang1966.github.io/bootstrap_template_5.htm

如果網頁內容有表格之類很寬的資料時會穿過側邊欄, 使得版面很奇怪, 這時用模板 5 這種無側邊欄的結構就很適合. 通常會在首頁中配置側邊欄, 而網站中其他資料網頁就不放側邊欄.

2022年7月31日星期日

Markdown 語法學習筆記 (一) : 基本網頁元素

這幾天在準備下個月客家語文學會線上講座的簡報, 為此複習了之前所寫的 GitHub 筆記, 發現其實 README.md 中使用的 Mark down 語法也可以用來寫網頁, 語法超簡單. 本篇是在下面這篇筆記基礎上, 再參考網路上的資料重新整理而成 :

# GitHub 中 README.rd 的 markdown 語法

以下針對十個常用網頁元素改用較簡單的 Markdown 語法來撰寫, GitHub 會將 .md 的文件翻譯成真正的 HTML 碼 :

1. 標題 (轉成 h1~h6) :

標題的 mark down 符號為 #, h1~h6 分別使用 1~6 個 # 號, 後面跟著標題文字, 例如 :

# h1 標題

## h2 標題

### h3 標題

#### h4 標題

##### h5 標題

###### h6 標題

結果如下 :

轉成的 HTML 如下 :

可見它會將文字內容拿來當 id.

2. 段落 (轉成 p) :

段落的 mark down 為兩個以上空格加上跳行, 例如 :

下面有三個段落:

段落 1

段落 2

段落 3

注意, '下面有三個段落:' 後面是直接跳行, 而 '段落 1' ~ '段落 3' 後面則是有兩個空格再跳行, 結果如下 :

轉成的 HTML 如下 :

<p>下面有三個段落:

段落 1<br />

段落 2<br />

段落 3</p>

可見它是把整個當一個段落, 中間用 <br> 跳行.

3. 水平分隔線 (轉成 hr) :

水平分隔線的 mark down 可用三個以上的 * (星號), - (負號), 或 _ (底線) 表示, 中間可以有一個以上的空格, 但該列不能為有其他字元, 例如 :

***

* * *

---

- - -

___

_ _ _

結果如下 :

感覺線條有點粗, 轉成的 HTML 如下 :

<hr />

4. 文字效果 :

文字效果主要有粗體, 斜體, 底線, 刪除線, 上標, 下標等.

(1). 斜體 :

斜體是在文字左右用一個 * (星號) 或 _ (底線) 包起來, 例如 :

*斜體文字*

_斜體文字_

(2). 粗體 :

粗體是在文字左右用兩個 * (星號) 或 _ (底線) 包起來, 例如 :

**粗體文字**

__粗體文字__

(3). 粗斜體 :

粗體是在文字左右用三個 * (星號) 或 _ (底線) 包起來, 例如 :

***粗斜體文字***

___粗斜體文字___

(4). 文字加底線 :

文字加底線是直接用 HTML 的 <u> 與 </u> 包起來, 例如 :

<u>文字加底線</u>

(5). 刪除線 :

刪除線是在文字左右用兩個 ~ (波浪) 包起來, 例如 :

~~文字加刪除線~~

(6). 上標與下標 :

上標是直接用 HTML 的 <sup> 與 </sup> 包起來; 下標則是用 <sub> 與 </sub> 包起來, 例如 :

x<sub>a</sub><sup>2</sup>

(7). 注音 :

上標是直接用 HTML 的 <sup> 與 </sup> 包起來, 例如 :

結果如下 :

轉成的 HTML 如下 :

<p><strong><em>粗斜體文字</em></strong>

<strong><em>粗斜體文字</em></strong></p>

<p><u>文字加底線</u></p>

<p><del>文字加刪除線</del></p>

5. 清單 :

清單有符號清單與編號清單兩種, 前者是無序的, 會轉成 ul 與 li 元素; 後者則以數字為序, 會轉成 ol 與 li 元素.

(1). 符號清單 :

符號清單的 mark down 可用一個 * (星號), + (加號) 或 - (負號) 開頭, 後面跟著一個空格, 然後是清單項目的文字, 例如 :

* 德魯納酒店

* 非常律師禹英禑

+ 馬氏文通

+ 事林廣記</li>

- 春上村樹

- 大江健三郎

結果如下 :

可見 Mark down 一律轉出 bullet 效果的清單, 轉成的 HTML 如下 :

<ul>

<li>德魯納酒店</li>

<li>非常律師禹英禑</li>

<li>大江健三郎</li>

</ul>

(2). 編號清單 :

編號清單的 Mark down 語法是編號後面加一個小數點, 空一格 (此為必要) 再接清單項目文字, 美跳一列就會自動增量顯示下一個項目編號, 但只能用數字, 用英文字母 A. B. C. 無效, 例如 :

1. 德魯納酒店

2. 非常律師禹英禑

3. 馬氏文通

4. 事林廣記

5. 春上村樹

6. 大江健三郎

結果如下 :

轉成的 HTML 如下 :

<ol>

<li>德魯納酒店</li>

<li>非常律師禹英禑</li>

<li>大江健三郎</li>

</ol>

(3). 巢狀清單 :

巢狀清單是指套疊兩層以上的清單, 首先來看內外層都是編號清單的組合 :

* 韓劇

- 德魯納酒店

- 非常律師禹英禑

* 古籍

+ 馬氏文通

+ 事林廣記

* 日本作家

- 春上村樹

- 大江健三郎

結果如下 :

可見第一層會用實心圓點 (solid bullet), 而第二層改用空心圓點. 轉成的 HTML 如下 :

<ul>

<li>韓劇

<ul>

<li>德魯納酒店</li>

<li>非常律師禹英禑</li>

</ul>

</li>

<li>古籍

<ul>

</ul>

</li>

<li>日本作家

<ul>

<li>大江健三郎</li>

</ul>

</li>

</ul>

其次測試外層是符號, 內層是編號的組合 :

* 韓劇

1. 德魯納酒店

2. 非常律師禹英禑

* 古籍

1. 馬氏文通

2. 事林廣記

* 日本作家

1. 春上村樹

2. 大江健三郎

結果如下 :

可見內層的編號清單會使用小寫羅馬數字, 轉成的 HTML 如下 :

<ul>

<li>韓劇

<ol>

<li>德魯納酒店</li>

<li>非常律師禹英禑</li>

</ol>

</li>

<li>古籍

<ol>

</ol>

</li>

<li>日本作家

<ol>

<li>大江健三郎</li>

</ol>

</li>

</ul>

最後來測試外層是編號, 內層是符號的組合 :

1. 韓劇

- 德魯納酒店

- 非常律師禹英禑

2. 古籍

+ 馬氏文通

+ 事林廣記

3. 日本作家

* 春上村樹

* 大江健三郎

結果如下 :

可見外層會用阿拉伯數字, 內層會用空心圓點, 轉成的 HTML 如下 :

<ol>

<li>韓劇

<ul>

<li>德魯納酒店</li>

<li>非常律師禹英禑</li>

</ul>

</li>

<li>古籍

<ul>

</ul>

</li>

<li>日本作家

<ul>

<li>大江健三郎</li>

</ul>

</li>

</ol>

而內外層都是編號的組合無法使用, 因為會導致編號錯亂.

參考 :

# https://carpentries-incubator.github.io/markdown-intro/06-lists/index.html

6. 表格 :

表格的 mark down 使用 | 來區隔欄位, 用內容為 ---- 的一列來區隔表頭與其他列, 若要設定各欄對齊方式, 可在區隔列以下列為內容 :

:---- (靠左對齊)
:-----: (置中對齊)
----: (靠右對齊)

例如 :

|第一欄 |第二欄 |

|----|----|

|第一列第一欄 |第一列第二欄 |

|第二列第一欄 |第二列第二欄 |

結果如下 :

可見表頭預設是粗體置中對齊, 轉成的 HTML 如下 :

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>第一列第一欄</td>

<td>第一列第二欄</td>

</tr>

<tr>

<td>第二列第一欄</td>

<td>第二列第二欄</td>

</tr>

</tbody>

</table>

下面範例是設定左欄靠左對齊; 右欄靠右對齊 :

|第一欄 |第二欄 |

|:----|----:|

|第一列第一欄 |第一列第二欄 |

|第二列第一欄 |第二列第二欄 |

結果如下 :

轉成的 HTML 如下 :

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td style="text-align: left">第一列第一欄</td>

<td style="text-align: right">第一列第二欄</td>

</tr>

<tr>

<td style="text-align: left">第二列第一欄</td>

<td style="text-align: right">第二列第二欄</td>

</tr>

</tbody>

</table>

7. 圖片 :

圖片的 mark down 語法為 :

![替代文字](圖檔位置)

其中替代文字即 img 標籤的 alt 屬性值, 圖檔位置可以用完整 URL, 也可以用相對路徑. 注意, 替代文字與圖檔位置都不可以用括號括起來, 例如 :

![可愛的小咪](images/cat.jpg)

或使用完整 URL :

![可愛的小咪](https://yaohuang1966.github.io/images/cat.jpg)

結果如下 :

轉成的 HTML 如下 :

8. 超連結 :

超連結的 mark down 語法為 :

[連結名稱](連結網址){:屬性設定}

連結名稱就是 a 標籤的內容文字, 後面的 {} 可有可無, 這是用來設定屬性的, 若要在新頁籤開啟網頁可用 {:target="_blank"}, 例如 :

[Google](https://www.google.com.tw){:target="_blank"}

結果如下 :

參考 :

# Can I create links with 'target="_blank"' in Markdown?

# Cross-reference (named anchor) in markdown

轉成的 HTML 如下 :

<a href="https://www.google.com.tw" target="_blank">Google</a>

也可以設定網頁內超連結 (稱為 anchor), 點擊後會前往同一網頁內的特定錨點, 首先用下列語法在網頁中設定一個錨點 :

{#錨點名稱}

例如在長網頁底下通常會有按 "Top" 或 "返回上面" 超連結回到最上面的功能, 可設為 :

{#top}

然後在底下建立一個頁內超連結例如 :

[返回頂端](#top)

小括弧裡面這時不是放 URL, 而是錨點名稱, 結果如下 :

按此超連結就會回到 {#top} 所在的頁面頂端. 轉成的 HTML 如下 :

9. 音訊 :

Mark down 沒有音訊的語法, 而是直接嵌入 audio 標籤, 例如 :

<audio src="media/your_answer_clip.mp3" controls>不支援 audio</audio>

結果如下 :

10. 視訊 :

Mark down 沒有視訊的語法, 而是直接嵌入 video 標籤, 例如 :

<audio src="media/your_answer_clip.mp3" controls>不支援 audio</audio>

結果如下 :

完整範例如下 :

# https://yaohuang1966.github.io/markdown/

產生此範例網頁的 Mark down 原始碼如下 :

# https://github.com/yaohuang1966/yaohuang1966.github.io/blob/main/markdown/index.md?plain=1

注意, GitHub 網站儲存庫的任意子目錄下都可以用 Mark down 語法編輯一個 index.md 檔, 只要存取此目錄 GitHub 預設就會去該目錄下找尋 index.htm 或 index.md, 如果只有 index.md, 就將其翻譯成 index.htm 後回應給用戶端. 由於網站根目錄下的 index.md 另有用途, 故新增了一個 markdown 子目錄, 然後將 index.md 上傳至此目錄下, 但圖檔, 音訊與視訊檔的相對位置需加以調整 (前面加上 ../ 往上跳一層才存取得到).

參考 :

# Markdown 教程

# https://www.mkdocs.org/

# 使用Markdown语言在博客的文章中添加视频

# https://www.youtube.com/watch?v=HUBNt18RFbo

訂閱：文章 ( Atom )

小狐狸事務所

2024年5月26日星期日

好用的線上 HTML 碼格式化工具 : HTML Formatter

2022年12月28日星期三

HTML5 測試 : 讀寫本機文字檔案

2022年8月16日星期二

在網頁中顯示 HTML 原始碼的小工具 html2show

2022年8月14日星期日

完成教學網站 "用 GitHub 輕鬆架站"

2022年8月3日星期三

Bootstrap 4 學習筆記 (十) : 警示, 面板與手風琴

2022年8月1日星期一

GitHub 個人網站設計 (二) : Bootstrap 網頁模板

2022年7月31日星期日

Markdown 語法學習筆記 (一) : 基本網頁元素

文章標籤

常用連結

2024年5月26日 星期日

2022年12月28日 星期三

2022年8月16日 星期二

2022年8月14日 星期日

2022年8月3日 星期三

2022年8月1日 星期一

2022年7月31日 星期日

2024年5月26日星期日

2022年12月28日星期三

2022年8月16日星期二

2022年8月14日星期日

2022年8月3日星期三

2022年8月1日星期一

2022年7月31日星期日