HTML5 学习笔记（四）--- 语义标签、隐藏/显示内容和对话框_html 隐藏一个dialog-程序员宅基地

技术标签： html5  html  HTML+CSS基础  

​ 最近抽时间把花了好几千买的大学教材翻了翻，有一本是青岛英谷的 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>
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45092437/article/details/119304367

智能推荐

图形与图像编程(三)-特殊曲线_蜗牛线条函数图-程序员宅基地

文章浏览阅读1.4k次。一、绘制蜗牛线//绘制蜗牛线void CCavsSampleView::OnMenuitemWoniuline() { float pi = 3.1415926f; CRect rect; GetClientRect(&rect); UINT width = rect.Width(); UINT height = rect.Height(); CDC* pDC = GetDC_蜗牛线条函数图

【c语言】c语言知识框架思维导图_c语言知识点总结思维导图-程序员宅基地

文章浏览阅读3.3k次，点赞10次，收藏31次。经过几天的总结终于完成了这一张c语言部分思维导图： _c语言知识点总结思维导图

MATLAB采用双坐标轴同时绘制柱状图和折线图_柱状图和折线图的双y轴图matlab-程序员宅基地

文章浏览阅读1.4w次，点赞5次，收藏47次。利用MATLAB同时绘制柱状图和折线图，其中柱状图表示温度，折线图表示颗粒物浓度，左侧y轴表示温度（单位摄氏度），右侧y轴表示颗粒物浓度（个/每立方米）。MATLABplotyy方法/步骤第一，以某地区一周的温度和空气中颗粒物浓度为例，一周（7天）的温度分别为35,33,31,30,28,26,27摄氏度，颗粒物浓度分别为550,515,450,375,215,150,195个/立方米。下面利用M..._柱状图和折线图的双y轴图matlab

线程池技术总结-程序员宅基地

文章浏览阅读1k次，点赞22次，收藏22次。1. 线程池解决了什么问题线程池是集中管理线程的，以实现线程的重用，降低资源消耗，提高响应速度，提高线程的可管理性等。线程用于执行异步任务，单个的线程既是工作单元也是执行机制，从JDK1.5开始，为了把工作单元与执行机制分离开，Executor框架诞生了，他是一个用于统一创建与运行的接口。Executor框架实现的就是线程池的功能。使用线程池可以进行统一的分配，调优和监控。使用线程池的优势降低资源消耗。通过重复利用已创建的线程降低线程创建和销毁造成的消耗。提高响应速度。

Win10应用商店、应用打不开或闪退的解决方法_$manifest = (get-appxpackage microsoft.windowsstor-程序员宅基地

文章浏览阅读2w次。　　越来越多小伙伴都将系统升级成Win10正式版了，win10功能强大令不少朋友感到非常满意，但也有一些朋友升级后却遇到了一些问题，比如应用商店、应用打不开或闪退的问题，今天快启动小编就跟大家介绍Win10应用商店、应用打不开或闪退的解决方法。　　1、点击任务栏的搜索(Cortana小娜)图标，输入Powershell，在搜索结果中右键单击Powershell，选择“以管理员身份运行”。　　　　2..._$manifest = (get-appxpackage microsoft.windowsstore).installlocation + 鈥榎ap

mysql无法成功启动服务的解决办法【通俗易懂】_mysql服务无法启动-程序员宅基地

文章浏览阅读5.3w次，点赞88次，收藏451次。第一次执行的话，时间会久一些，执行结束后没有输出信息，查看bin的同级目录下会多出一个data文件夹，里面一堆文件。，本人尝试手动创建会有问题，如果自己创建了可以删除掉，再执行后面的操作。则自己手动创建一个，一定不要自己手动创建。_mysql服务无法启动

随便推点

CentOS在线和离线安装PostgreSQL-程序员宅基地

文章浏览阅读326次。postgresql在线安装很简单进入官网：https://www.posthttps://www.postgresql.org/gresql.org/如文档所示，在线安装步骤与命令：sudo yum install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-7-x86_64/pgdg-redhat-..._pgdg-centos95-9.5-3.noarch.rpm

spark--RDD的容错Checkpoint检查点机制-★★★★-程序员宅基地

文章浏览阅读154次。RDD的容错Checkpoint检查点机制为什么要RDD容错-Checkpoint如何使用RDD容错-Checkpoint开发中如何选用?是使用缓存/持久化还是使用Checkpoint?缓存/持久化和Checkpoint有啥区别?为什么要RDD容错-Checkpoint可以将计算复杂/成本较高且后续要被频繁使用到的比较重要的RDD的计算结果进行缓存/持久化到内存或磁盘上注意:这里存在内存中肯定是不安全的,因为一旦宕机内存中的数据就没了而存在磁盘上也不是绝对安全,因为这里说的磁盘只是普通磁盘,不

Vue组件库 View UI快速入门 环境配置_view ui 4.7.0 版本的组件库-程序员宅基地

文章浏览阅读1.3w次，点赞21次，收藏63次。Vue是国内最流行的前端框架之一，View UI是基于Vue的组件库。本文讲解View UI开发环境的搭建，为之后组件测试做基础_view ui 4.7.0 版本的组件库

基于opencv+tensorflow+神经网络的智能银行卡卡号识别系统——深度学习算法应用(含python、模型源码)+数据集（二）-程序员宅基地

文章浏览阅读1.8k次，点赞4次，收藏20次。本项目基于从网络获取的多种银行卡数据集，采用OpenCV库的函数进行图像处理，并通过神经网络进行模型训练。最终实现对常规银行卡号的智能识别和输出。

Python | 使用Flask搭建一个API服务器_python mvc搭建api接口项目-程序员宅基地

文章浏览阅读2.5k次，点赞5次，收藏19次。一、API列表1. 获取作品列表① 获取手工制作作品列表。请求格式：http://api.mculover666.cn:9999/twkk/list/hand_made返回结果：{ goods_num: 3, goods_item: [ { goods_id: 1, goods_name: "goods1", goods_img_url: "xxx" }, { goods_id: 2, goods_name: "goods1", goods__python mvc搭建api接口项目

对自己深度学习方向的论文有idea，可是工程实践能力跟不上，实验搞不定怎么办？...-程序员宅基地

文章浏览阅读633次。每天给你送来NLP技术干货！作者丨Giant、叶小飞来源丨知乎问答编辑丨极市平台原问题背景：本人7月份才接触现在的课题，看了将近40多篇相关英文文献了吧，有了几个idea，开组会，老板们也..._导师让投会议论文了,但是实验代码还跑不通呢怎么办

推荐文章

热门文章

相关标签