HTML5新功能

出自六年制學程
在2022年10月6日 (四) 17:02由丁志仁對話 | 貢獻所做的修訂版本

跳轉到: 導覽搜尋

video

三套可以編輯-srt的軟體,製作影片字幕時使用/

簡單的 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 實現各種交互效果