在這篇文章試試提示、步驟、頁籤與收合說明，接著點開圖片、比較圖片組，再播放一段短片。所有範例都由 Markdown 正文產生，沿用部落格的共用閱讀版型。
想先試目錄？直接跳到 macOS 頁籤裡的收合段落，觀察網站如何顯示原本隱藏的內容。
四種提示，各有清楚的用途
每種提示都有不同的圖示，螢幕閱讀器也能讀出狀態名稱。即使不靠顏色，也能分辨提示的種類。
跟著步驟試一次
-
先閱讀提示
往上比較四種提示的圖示與內容。粗體、連結與清單都可以繼續使用一般 Markdown。
-
再切換不同內容
試試下一節的 Windows 與 macOS 頁籤。接著操作「快速版／詳細版」那一組，確認兩組頁籤各自保留選擇。
-
最後打開補充說明
點擊「這裡還能放什麼？」。也可以用鍵盤 Tab 移到標題，再按 Enter 或空白鍵。
同一篇教學，提供不同閱讀路徑
Windows
Windows 閱讀範例
你現在看到的是第一個頁籤，這也是每一組頁籤預設顯示的內容。
macOS
macOS 閱讀範例
這是第二個頁籤的獨立正文。下面還藏了一段補充說明。
下面是另一組頁籤，可以獨立操作：
快速版
先讀提示，再切換平台，最後展開說明。
詳細版
| 想試的操作 | 可以觀察的結果 |
|---|---|
| 切換這組頁籤 | 上方的平台選擇保持原樣 |
| 點擊目錄中的隱藏段落 | 對應頁籤與收合說明自動顯示 |
| 用鍵盤操作 | 頁籤與收合標題都有可辨識的焦點 |
把補充資訊收起來
點一下，看看圖片細節
先點這張設計素材板。放大後可以查看原圖，按 Esc 回到文章。使用鍵盤時，以 Tab 移到圖片，再按 Enter 或空白鍵開啟。
這張圖片使用最普通的 Markdown 圖片寫法。替代文字用來描述畫面，不會自動變成可見圖說。
讓圖說補上畫面沒說完的事
行內程式碼。並排比較，再切換另一張
點開任一張圖片，試試上一張、下一張，或鍵盤的左右方向鍵。這組只有暖色與冷色兩張，切換時不會混入後面的長圖組。
長圖也能慢慢讀
這是另一組圖片。打開左邊的長圖，點右上角的縮放圖示，再拖曳或使用滑鼠滾輪閱讀。手機可以雙指縮放，放大後再拖曳。下方圖說較長時，也能獨立捲動；關閉後會回到原本點開的位置。
播放一段真的影片
按下播放後，試試暫停、拖曳進度或全螢幕。這段短片沒有旁白；示範字幕是另外加入的操作提示，可以在播放器的字幕選單切換。
決定什麼時候載入外部播放器
下方一開始只有名稱、說明與入口。按「載入 YouTube 播放器」後，才會連線至 YouTube；你也可以直接前往原網站觀看。
把這些元件用在自己的文章
到知識庫的Markdown 教學元件、圖片與影片寫法範例，可以逐段比較效果與可複製的寫法。知識庫使用固定閱讀版型，提供相同的互動能力。
素材來源
圖像為本站製作的示意素材。花朵影片來自 MDN 的 CC0 影片素材，依其 CC0 授權使用；示範字幕由本站撰寫。