使用 Details 与 Summary 制作原生手风琴 (含收合动画！)
手风琴是一种常见的网页 UI 模式，通常是一系列垂直堆叠的标题可以用于展开收合显示不同资讯，在 HTML 当中有项新颖的语法 <details> 和 <summary> 可帮助快速实现类似的功能，并且配合上最新的 interpolate-size 和 transition-behavior 制作滑顺的展开闭合动画。
手风琴是一种常见的网页 UI 模式，通常是一系列垂直堆叠的标题可以用于展开收合显示不同资讯，在 HTML 当中有项新颖的语法 <details> 和 <summary> 可帮助快速实现类似的功能，并且配合上最新的 interpolate-size 和 transition-behavior 制作滑顺的展开闭合动画。
总结作为六角学院助教一直以来审核作业上最容易碰上的问题，以及可以怎么应对。本篇文章集合了各大 4 个要点与提醒帮助你写出更好的 HTML 结构。了解整篇文章将可以回避掉很多同学最常踩的坑！推荐身为网页开发新手的你看看这篇文章。
为了优化网页加载顺序，本文通过实际案例说明为什么应该使用 HTML 内建的 `defer` 和 `async` 属性，先从问题出发再到三种解决方案与对比，利用原生 HTML Script 标签属性及能规划脚本的加载顺序。
HTML 元素可以拥有自己的属性，用于表达各种类的资讯，像是从外观样式到无障碍资讯到各式各样的预设属性，而 data 属性是一个正式存储资料于 HTML 元素的属性，将资讯储存在 HTML 标签属性上，使 JavaScript 与 CSS 都能读取得到元素的资料。