HTML5新功能：修訂版本之間的差異
出自六年制學程
（→details,summary） |
（→video） |
||
| 第 7 行： | 第 7 行： | ||
*#文字檔中刪去開頭的 WEBVTT | *#文字檔中刪去開頭的 WEBVTT | ||
*#改副檔名為 srt | *#改副檔名為 srt | ||
| + | *#[http://yes.nctu.edu.tw/Open/Text/vtt2srt.aspx http://yes.nctu.edu.tw/Open/Text/vtt2srt.aspx] | ||
| + | *#[https://www.happyscribe.co/subtitle-tools/convert-vtt-to-srt https://www.happyscribe.co/subtitle-tools/convert-vtt-to-srt] | ||
| + | *#[https://subtitletools.com/convert-to-srt-online https://subtitletools.com/convert-to-srt-online] | ||
| + | *#[https://gotranscript.com/subtitle-converter https://gotranscript.com/subtitle-converter] | ||
*[https://atelier.u-sub.net/srt2vtt/ 簡單的 srt 轉 vtt 線上轉檔] | *[https://atelier.u-sub.net/srt2vtt/ 簡單的 srt 轉 vtt 線上轉檔] | ||
| + | |||
==details,summary== | ==details,summary== | ||
收納 | 收納 | ||
2022年10月6日 (四) 17:00的修訂版本
video
簡單的 srt 與 vtt 互轉
- vtt 轉 srt
- 簡單的 srt 轉 vtt 線上轉檔
details,summary
收納
一、基本用法
<details>
<summary>標題</summary>
<p>內容，可以使用標籤(<…>)。</p>
</details>
- 只會顯示了 <summary> 標籤中的內容，其他都預設隱藏了；
- <summary> 標籤前面出現了一個小三角，尖端向右；
- 點擊一下小三角，尖端變成向下，原本隱藏的內容顯示出來了；
- 再一次點擊，內容又會隱藏收起，箭頭方向還原。
(一)open
<details open>
<summary>這是摘要2</summary>
這裡<details>標籤設置了HTML布爾屬性open，因此，預設是展開狀態。
</details>
(二)省略<summary>
如果省略<summary>標籤，則<details>元素會在內部自動創建一個<summary>內容，預設的文案是「詳細信息」。
二、進階用法
- 自定義 details 在瀏覽器內的 UI
- 處理 Chrome 瀏覽器下點擊時 outline 輪廓等體驗
- details 元素行為的各種交互效果
- 「更多」展開與收起效果
- 點擊顯示懸浮菜單，自定義下拉框等效果
- 多項折疊效果
- 帶 slideUp / slideDown 效果的多項折疊菜單
- 多級嵌套的樹形菜單
參考資料
