HTML5

    🚀 HTML5 核心新标签精华录

    1. 语义化布局(SEO与结构的灵魂)

    • 这些标签的作用是让机器（搜索引擎、读屏器）看懂网页的"骨架"
    标签作用用法技巧
    <header>页眉/头部不止用于全页头部，也可以用在<article>内部
    <nav>导航栏仅用于主要的导航链接区域
    <main>主体内容每个页面只能出现一次，包裹核心内容
    <article>独立文章强调完整性，比如一篇博客、一条微博、一个评论
    <section>章节/区块类似有标题的 div，用于逻辑分块
    <aside>侧边栏放置非核心内容，如广告、相关文章推荐
    <footer>页脚/尾部放置版权信息、联系方式等

    2. 交互与功能（告别 JS 时代）

    • <details> & <summary>：原生折叠面板

      很多以前需要写几十行代码的功能，现在可以一个标签搞定！

    <details>
  <summary>点击查看更多详情</summary>
  <p>这里是隐藏内容，不需要JS就能展开</p>
</details>

    • <dialog>：原生模态框

      直接调用dialog.showModal()即可弹出，自带居中效果和背景压暗(::backdrop)

    <!--
    这是一个超好用的黑科技。如果你在弹窗里有个表单，想点"提交"时关闭弹窗：
      * 给`form`加一个`method="dialog"
      * 点提交按钮时，需要写任何JS代码，弹窗会自动关闭
      * 而且，按钮的`value`值会存到`dialog.returnValue`里，你可以通过JS拿到用户点的是哪个按钮。
-->

<dialog open>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>
    注意

    1. 别给dialog>标签手动加tabindex="0"之类的属性。浏览器会自动处理对话框的焦点顺序，你手动加了反而会干扰读屏软件，让残障人士的操作变得混乱。

    2. 推荐使用元素本身的.show()或.showModal()，而不是使用open属性。如果你写了open属性，它只是一个普通的层，背景不会变暗，Esc键也没法关掉它。必须用JS调用.showModal()，浏览器才会把它当成一个正式的"模态弹窗"，给你自动处理背景遮罩和键盘交互。

    3. 焦点(Focus)：弹出跳出来的时候，光标应该在哪？如果是表单，你应该给第一个输入框加autofocus，让用户直接能打字。如果没有输入框，焦点默认会停在弹窗里。你要确保用户按Tab键时，焦点只在弹窗内部循环，不要跳到弹窗后面的背景页面里去(showModal已经帮你做好了这一点)。

    4. 给用户留条"活路"：别做一个关不掉的流氓弹窗。一定要写一个关闭或取消按钮。如果你是用showModal()打开的，按键盘左上角的Esc键默认能关掉，别把这个原生功能给禁用了。

    5. ::backdrop：弹窗出来时，后面的页面变黑、变模糊，就是靠这个CSS伪元素实现的。它只在showModal()模式下生效！

    3. 其他HTML5标签

    3.1 <noscript>标签

    虽然现在的网页几乎离不开 JavaScript，但万一用户在浏览器禁用了脚本，或者脚本加载失败，这个标签里的内容就会显示出来。

    它是提升网页健壮性的重要手段。

    <!-- 用法： 提示用户开启 JS，或者提供一个基础版的页面链接。 -->

<noscript> 你的浏览器可能禁止运行了JavaScript </noscript>

    3.2 <template>标签

    4. HTML5多媒体标签