（20）HTML5 ＜summary＞标签

最新推荐文章于 2024-07-20 13:43:49 发布
最新推荐文章于 2024-07-20 13:43:49 发布
阅读量511 收藏
点赞数
分类专栏： HTML5 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36213140/article/details/122035516
版权

一、浏览器支持

二、标签定义及使用说明

<summary> 标签为 <details> 元素定义一个可见的标题。 当用户点击标题时会显示出详细信息。 它是HTML5 中的新标签。

三、提示和注释

注释：<summary> 元素应该是 <details> 元素的第一个子元素。

四、示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <details>
    <summary>点击展示我的简介</summary>
    <p>我叫田根旺，是一名web前端开发工程师。</p>
    <p>掌握HTML,CSS,less,sass,JS,jQuery,node.js,webpack,gulp,工程化,模块化,组件化,vue.js,React.js,uni-app,Flutter等前端技术。</p>
    <p>掌握后端Java语言,jsp+Servlet技术，ssm框架，springboot框架，mysql数据库，navicat可视化工具使用</p>
    <p>熟悉maven构建工具，git版本控制工具的使用。</p>
  </details>
</body>
</html>

4.1点击前 

  

4.2点击后

4.3GIF效果图 

 

泽哥ins
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
C# 过滤HTML标签的几种方法
05-17
/**/ /// <summary> /// 去除HTML标记 /// </summary> /// <param name="NoHTML">包括HTML的源码 </param> /// <returns>已经去除后的文字</returns> public static string NoHTML(string Htmlstring) { //删除脚本 Htmlstring = Regex.Replace(Htmlstring, @"<script[^>]*?>.*?</script>", "", RegexOptions.IgnoreCase); //删除HTML
HTML5不支持标签和新增标签详解
09-27
5. `<center>`：`<center>`标签用于使文本居中，但在HTML5中已被废弃。应该使用CSS的`text-align`属性来实现文本居中。 6. `<font>`：定义文字字体、大小和颜色的`<font>`标签在HTML5中不再被支持，现在推荐使用CSS...
借助HTML5 details,summary无JS实现各种交互效果
W3cplus
01-21 1050
了解HTML5 details, summary默认交互行为标签在Chrome，Firefox等浏览器下默认是有展开收起行为的，例如下面HTML：details>    summary>这是摘要1summary>    p>这里具体描述，标签相对随意，例如这里使用的<p>标签。p>details>结果UI表现为：具体描述为：只显示了标签内容，而默认隐藏了；标签前面出现了一个小三角；
【HTML5】H5新标签大实例
weixin_34344403的博客
03-24 343
以下是测试Html5新标签性能的大实例: 首先是效果: 代码： <html> <head> <title>Test</title> </head> <body> <h2>header标签定义文档的页眉（介绍信息）</h2> &l...
h5 summary标签去掉箭头
张杰伦的博客
11-01 666
summary箭头 Gecko summary { list-style: none; } Webkit summary::-webkit-details-marker { display: none; }
html dom summary 属性,HTML DOM Summary用法及代码示例
weixin_31445091的博客
06-04 158
DOM摘要对象用于表示HTML 元素。 “摘要”元素由getElementById()访问。用法:document.getElementById("ID");其中“id”是分配给“summary”标签的ID。示例1：DOM Summary Objecth2 {color:green;font-size:35px;}summary {font-size:40px;color:#090;font-we...
使用HTML5 details,summary实现，展开，下拉，树的效果
马优晨
01-29 7946
1-展开效果 HTML details class="details-2" open> summary tabindex="-1">a href="javascript:">这是示例a>summary> content>本案例隐藏原生小三角，使用自定义小三角。content>
《HTML5 开发实例大全》——1.9 使用< summary >标记元素实现交互
weixin_34081595的博客
05-02 98
本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.9节,作者： 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。 1.9 使用< summary >标记元素实现交互 https://yqfile.alicdn.com/ff51224fc6e74576b1d2587a54377eb2ee76b59d.png"...
HTML5 新标签全部总汇(推荐)
09-27
7. `<details>` 和 `<summary>` 标签：`<details>`定义了一个可折叠的容器，`<summary>`则作为容器的标题，常用于创建用户可交互的详细信息展示。 8. `<embed>` 标签：用于嵌入外部内容，如图片、Flash等。需要指定...
HTML5 Summary.zip
05-07
这些标签包括<header>、<nav>、<article>、<section>、<aside>、<footer>等，它们各自代表了网页结构的不同部分，帮助开发者更好地组织内容，同时也让搜索引擎和辅助技术更容易理解网页的结构。 <header>标签通常...
HTML5标签使用方法详解
09-28
在HTML5中，还有一系列用于增强可访问性和语义化的标签，如`<mark>`用于高亮文本，`<time>`用于表示日期和时间，`<figure>`和`<figcaption>`用于组合多媒体内容及其说明。此外，`<section>`和`<hgroup>`帮助组织文档...
浅谈html5标签css3的常用样式
09-27
HTML5的`<meta>`标签提供了元信息，例如`<meta name="application-name">`用于定义应用名称，`<meta name="description">`用于描述网页内容，`<meta name="keywords">`用于输入网页的关键字，便于搜索引擎抓取。...
H5--新增标签之结构、块级、行内语义、交互
web_only_的博客
09-23 904
前言： HTML5增强了浏览器的原生功能，符合HTML5规范的浏览器功能将更加强大，减少了Web应用对插件的依赖。 主要目的为了让用户体验更好，让开发更加方便，另外W3C从推出HTML4.0到5.0之间共经历了17年。 本节主要介绍下H5标签改动相关知识点，新增了27个标签，废弃16个标签。 按照标签作用大致分类：功能性标签、结构性标签。 知识点科普： H5本质： H5是包括HTML、CSS...
前端Summary——CSS学习
qq_35706707的博客
11-10 499
（1）.CSS基础 一．CSS基础语法 1.形式 1.selector{ property:value } selector是属性选择器，下面是对应的属性和属性值 例：h1{color:red;font-size:14px} 属性大于一个之后，属性之间用分号隔开，如果值大于1个单词，则需要加上引号： 例：p{font-family:"sans serif";} 注：引入外部css <link href="MyCss.c...
沉淀-初级html5（一）
泠泠似水
03-27 443
HTML5与HTML4的区别推出的理由及目标和语法的改变推出的理由及目标： 解决web上存在的各种问题： 1.web浏览器兼容性很低，规范不统一，没有被标准化。 2.文档结构不够明确 3.web应用程序的功能受到了限制 世界知名浏览器厂商对html5的支持：微软的IE9及以上，google的chrome，苹果的safari，Opera的欧朋，Mozilla的火狐Firefox语法的改变：
前端学习1——HTML5
gyfghh的博客
06-06 731
前端学习1——HTML5
Untiy | C#中的注释 /// ＜summary＞
持续学习！
05-24 815
在网上查了查资料之后发现/// 这种注释方式更加适合多人协作开发，类似于“使用说明”。总的来说/// 的注释方式为使用注释（帮助使用），//的注释方式为开发注释（辅助开发）函数的语句提示可以让使用者更加清楚的函数的定义与使用方式。
C#中的<summary>
热门推荐
一只写bug的程序猿的博客
07-20 2万+
初学C#，看公司代码的过程中一步一步学习，现将学习过程中发现的一些知识总结整理出来，无论难易，以供后续不时之需。 在C#中， 标记应当用于描述类型或类型成员。 使用  添加针对某个类型说明的补充信息。 使用 cref 特性可启用文档工具（如Sandcastle）来创建指向代码元素的文档页内部超链接。 标记的文本是唯一有关 IntelliSense 中的类型的信息源，它也显示在
html--图片变化
最新发布
2301_81140745的博客
07-20 492
2.点击上传图片会有变化。
使用python bs4库从下面这段内容“<div class="maingrid" data-v-0f3d927f=""> <!-- --> <!-- --> <!-- --> <div class="period" data-v-0f3d927f=""> Saturday, Jun 3, 2023 </div> <div class="summary summarykpis4" data-v-0f3d927f=""> <div class="icon" data-v-0f3d927f=""> <div class="partly-cloudy-day" data-v-0f3d927f=""> </div> </div> <div class="kpi summary" data-v-0f3d927f=""> <div class="subtitle"> Max </div> <div> 28℃ </div> <div class="normals"> <div> 22 </div> <div> 27 </div> <div> 36 </div> <div class="subtitle"> Min </div> <div class="subtitle"> Mean </div> <div class="subtitle"> Max </div> </div> </div> <div class="kpi summary" data-v-0f3d927f=""> <div class="subtitle"> Min </div> <div> 13℃ </div> <div class="normals"> <div> 9.9 </div> <div> 15 </div> <div> 19 </div> <div class="subtitle"> Min </div> <div class="subtitle"> Mean </div> <div class="subtitle"> Max </div> </div> </div> <div class="kpi summary" data-v-0f3d927f=""> <div class="subtitle"> Rain </div> <div> 0mm </div> <div class="normals"> <div> 0 </div> <div> 4.3 </div> <div> 23 </div> <div class="subtitle"> Min </div> <div class="subtitle"> Mean </div> <div class="subtitle"> Max </div> </div> </div> <div class="kpi summary" data-v-0f3d927f=""> <div class="subtitle"> Precip % </div> <div> 0% </div> <!-- --> </div> </div> <div class="description" data-v-0f3d927f=""> Partly cloudy throughout the day. </div> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> <!-- --> </div>”提取出6月3至6月5日天气信息
06-04
v-0f3d927f=""> </div> </div> <div class="kpi summary" data-v-0f3d927f=""> <div class="subtitle"> Max </div> <div> 28℃ </div> <div class="normals"> <div> 22 </div> <div> 27 </div> <div> 36 </div> <div...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

泽哥ins

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值