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 互轉

details,summary

收納

一、基本用法

<details>
    <summary>標題</summary>
    <p>內容,可以使用標籤(<…>)。</p>
</details>
  1. 只會顯示了 <summary> 標籤中的內容,其他都預設隱藏了;
  2. <summary> 標籤前面出現了一個小三角,尖端向右;
  3. 點擊一下小三角,尖端變成向下,原本隱藏的內容顯示出來了;
  4. 再一次點擊,內容又會隱藏收起,箭頭方向還原。

(一)open

<details open>
    <summary>這是摘要2</summary>
    這裡<details>標籤設置了HTML布爾屬性open,因此,預設是展開狀態。
</details>

(二)省略<summary>

如果省略<summary>標籤,則<details>元素會在內部自動創建一個<summary>內容,預設的文案是「詳細信息」。

二、進階用法

  1. 自定義 details 在瀏覽器內的 UI
  2. 處理 Chrome 瀏覽器下點擊時 outline 輪廓等體驗
  3. details 元素行為的各種交互效果
    • 「更多」展開與收起效果
    • 點擊顯示懸浮菜單,自定義下拉框等效果
    • 多項折疊效果
    • 帶 slideUp / slideDown 效果的多項折疊菜單
    • 多級嵌套的樹形菜單

參考資料

  1. 借助 HTML5 details,summary 實現各種交互效果