HTML5 学习笔记（四）--- 语义标签、隐藏/显示内容和对话框

​ 最近抽时间把花了好几千买的大学教材翻了翻，有一本是青岛英谷的 HTML5 课本 ，发现有一些知识没了解过，所以就把这些零碎的知识整理了一下，也算是加深一下印象。

一、语义标签具体使用情景

1、article

​ 该元素通常用于表示页面中独立的、完整的一块内容，例如显示博客文章、新闻内容等情景。

2、header

​ 该元素通常用于显示某块内容或整个网页的标题部分，可能会在网页中多次出现，例如显示文章标题、网站标题等情景。

3、footer

​ 该元素通常用于显示网页底部的某些相关信息，例如网页的版权信息、相关连接以及文章的作者、脚注等情景。

4、section

​ 该元素通常用于页面内容的分段，使各个段落之间相互独立。通常由标题和内容组成，没有标题的内容最好不要使用该元素。

5、aside

​ 该元素通常用于显示与页面相关但又可以独立的内容。例如广告、引用、相关推荐等。

6、nav

​ 该元素通常用于显示页面中主要部分的导航信息。例如页面头部的导航链接。

二、元素内容的显示与隐藏

​ 除了可以通过 js 脚本来控制页面内容的隐藏与显示之外，还可以通过 details 元素 和 summary 元素的被和使用来实现。通常是把 summary 元素放在 details 元素的内部，定义标题，然后页面中只会显示 summary 元素的内容，其他内容会被隐藏，点击显示的标题后，其他内容才会显示出来，而且会将下面的元素，依次下移。再次点击，内容会再次被隐藏。可以用来实现多级标题，或者点击查看详情等情景。

案例展示：

-
点击标题

案例代码：

<details>
    <summary>一级标题1</summary>
    <details style="padding-left: 20px">
        <summary >二级标题</summary>
        <div style="padding-left: 10px">内容</div>
    </details>
</details>
<details>
    <summary>一级标题2</summary>
    <details style="padding-left: 20px">
        <summary >二级标题</summary>
        <div style="padding-left: 10px">内容</div>
    </details>
</details>

三、对话框

​ HTML5 新增了 对话框元素 dialog ，该元素内定义你想要在对话框显示的内容，定义的对话框默认处于隐藏状态，需要通过 js 脚本配合触发 dialog 的内置方法来控制对话框的显示与隐藏。dialog 的内置方法有三种：

​ show() : 该方法是以非模态的形式显示对话框，此时页面中的其他元素还可以进行操作。

​ showModal() : 该方法是以模态的形式显示对话框，此时页面中的其他元素不可以进行操作。

​ close() : 隐藏对话框。

案例展示：

页面一开始：

点击非模态对话框：此时页面其他元素还可以操作，可以通过关闭对话框按钮，来关闭对话框

点击模态对话框：此时页面其他元素不可以交互操作，只能操作对话框

案例代码：

<dialog>
        <form>
            请输入你的评论：
            <input type="text">
            <button type="submit" id="btnAddComment">提交</button>
        </form>
    </dialog>
    <h2>评论区</h2>
    <div>
        <button id="btnShow">非模态对话框</button>
        <button id="btnShowModal">模态对话框</button>
        <button id="btnClose">关闭对话框</button>
    </div>
</body>
<script>
    document.querySelector('#btnShow').onclick = function () {
        document.querySelector('dialog').show()
    }
    document.querySelector('#btnShowModal').onclick = function () {
        document.querySelector('dialog').showModal()
    }
    document.querySelector('#btnClose').onclick = function () {
        document.querySelector('dialog').close()
    }
    document.querySelector('#btnAddComment').onclick = function () {
        document.querySelector('dialog').close()
    }
</script>