1.源码

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8"/>

<title>交互元素summary的使用</title>

<style type="text/css">

body{

	padding:5px;

	font-size:14px;

}

summary{

	font-weight:bold;

}

</style>

</head>

<body>

	<details open="open">

	<summary>页面说明</summary>

	本页面生成于2017年9月21日，是一个用于测试summary交互元素的页面

	</summary>

</body>

</html>

2.页面效果

3.代码解析

在页面样式中，为了突出显示<summary>元素，增加了一个粗体的字体效果，如上面的粗体代码所示。

【HTML5】summary交互元素的更多相关文章

  1. 【HTML5】交互元素menu&command元素

    1.交互元素<menu> 1.1源码 <!DOCTYPE html> <html> <head> <meta charset="utf- ...

  2. 【HTML5】用脚本控制交互元素details元素的使用

    1.源码 <!. Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo ...

  3. HTML（二）HTML元素（整体结构，块级元素，内联元素，结构元素，交互元素，元素嵌套规则）

    HTML整体结构解释 <!DOCTYPE html> // 文件应以"<!DOCTYPE ......>"首行顶格开始,推荐使用"<!DOC ...

  4. h5交互元素details标签

    details是h5新增的交互元素,details与 summary 标签配合使用可以为 details 定义标题.默认情况下,不显示 details 标记中的内容.当用户点击标题时,会显示出 det ...

  5. HTML5 - 新增的元素，删除的元素

    1,HTML5新增的元素(1)用于构建页面的语义元素:<article>,<aside>,<figcaption>,<figure>,<foote ...

  6. html5的source元素

    html5的source元素 一.总结 一句话总结: 主要是解决视频播放时候的浏览器的兼容问题 二.html5的source元素 学习要点 掌握source元素的用法 source元素-解决浏览器额兼 ...

  7. HTML5 新模块元素兼容问题

    新增块元素默认样式 下列HTML5新模块元素在IE8.9版本浏览器中没有被定义默认样式.为解决该问题,给下列元素添加“block”显示属性. 代码: article, aside, details, ...

  8. HTML5中dialog元素尝鲜

    对话框(别称模态框,浮层)是web项目中用于用户交互的重要部分,我们最常见的就是js中 alert(),confirm(),但是这个对话框的不美观,也不能自定义样式,所以在开发的过程中,一般根据自己自 ...

  9. HTML5 画布canvas元素

    HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

随机推荐

  1. HDU5469 Antonidas(树分治&&哈希)

    给你一颗点上有字符的树,问一个给定的字符串是否是这棵树上的两点的路径. 树分治的思想就是每次找重心,重心下的子问题分解去做,然后就是合并了.合并的时候用一个总的set<pair<len,h ...

  2. springBoot 微服务

    微服务,是OO (面向对象,Object Oriented) 专家 Martin Fowler 于2014年在他一篇文章<Microservice>提出的.在 Mattin 的头脑中,兴奋 ...

  3. (13)oracle导出、导入

        导出 导出分三种 导出表.导出方案(用户).导出数据库 导入导出不需要进入sqlplus,都需要从cmd进到所安装的oracle目录的bin文件夹下 例如:D:\app\Administrat ...

  4. SRM 733 Div 1 爆零记

    开场写easy(有预感要FST) 然后medium就卡住了. 我只知道$n$个点的生成树个数是$n^{n-2}$ 接下来直接狗带…… $Problem 250pts$ 水题,直接枚举然后记录答案(我大 ...

  5. Codeforces Round #505 (rated, Div. 1 + Div. 2, based on VK Cup 2018 Final) -B C(GCD，最长连续交替序列)

    B. Weakened Common Divisor time limit per test 1.5 seconds memory limit per test 256 megabytes input ...

  6. JQuery里面的下啦菜单

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  7. [JSOI2009] 有趣的游戏

    1444: [Jsoi2009]有趣的游戏 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1800  Solved: 645[Submit][Statu ...

  8. 四. Java继承和多态3. 继承中的方法的覆盖和重载

    在类继承中,子类可以修改从父类继承来的方法,也就是说子类能创建一个与父类方法有不同功能的方法,但具有相同的名称.返回值类型.参数列表. 如果在新类中定义一个方法,其名称.返回值类型和参数列表正好与父类 ...

  9. 如何获取Class的所有方法

    // 取得所有方法 Method[] hideMethod =Activity.class.getMethods(); int i = 0; for (; i < hideMethod.leng ...

  10. MSSQL收缩事务日志&日志文件过大无法收缩

    原文:MSSQL收缩事务日志&日志文件过大无法收缩 一.MS SQL SERVER 2005 --1.清空日志 exec('DUMP TRANSACTION 数据库名 WITH NO_LOG' ...