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. 【CString与string转换】不存在从 "LPWSTR" 转换到 "std::basic_string<char, std::char_traits<char>, std::allocator（转）

    原文转自 http://blog.csdn.net/qq_23536063/article/details/52291332 [问题描述] CString cstr: sring str(cstr.G ...

  2. linux.backspace乱码（转）

    42 linux.backspace乱码 linux环境sqlplus中使用backspace键出现乱码的解决方法2008-04-30 16:32 在linux环境下使用sqlplus,在回删(bac ...

  3. HTTP GET与POST区别

    HTTP定义了与服务器交互的不同方法,最基本的方法是 GET 和 POST. HTTP-GET和HTTP-POST是使用HTTP的标准协议动词,用于编码和传送变量名/变量值对参数,并且使用相关的请求语 ...

  4. 多线程设计模式 - Future模式之JAVA原生实现

    在之前一篇博客中介绍了Future设计模式的设计思想以及具体实现,今天我们来讲一下使用JDK原生的包如何实现. JDK内置的Future主要使用到了Callable接口和FutureTask类. Ca ...

  5. Selenium2+python自动化3-解决pip使用异常【转载】

    一.pip出现异常 有一小部分童鞋在打开cmd输入pip后出现下面情况:Did not provide a commandDid not provide a command?这是什么鬼?正常情况应该是 ...

  6. c语言自动对齐原则

    转载一篇博客: http://blog.csdn.net/hairetz/article/details/4084088 1:数据成员对齐规则:结构(struct)(或联合(union))的数据成员, ...

  7. C#中使用aria2c进行下载并显示进度条

    正则表达式的生成网站: http://www.txt2re.com/index-csharp.php3 Aria2c下载地址: https://github.com/aria2/aria2/relea ...

  8. （寒假集训）Cow Art（bfs）

    Cow Art 时间限制: 1 Sec  内存限制: 64 MB提交: 13  解决: 10[提交][状态][讨论版] 题目描述 A little known fact about cows is t ...

  9. Could not automatically select an Xcode project

    当把CocoaPods生成的workspace移动到上层目录时,需要改下Pods.xcconfig和工程里的一些设置,就通常没什么难度. 当遇到这个问题时: Could not automatical ...

  10. IntelliJ全家桶修改terminal字体的方法

    IntelliJ IDEA 设置Terminal 窗口字体大小 我在Setting中查看了所有和Terminal字样有关的设置,都没有找到设置字体大小的方法,原来Terminal也只需要设置Conso ...