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. dpdk 代码分析一 ： 内存初始化

    一  前言 http://www.dpdk.org/  dpdk 是 intel 开发的x86芯片上用于高性能网络处理的基础库,业内比较常用的模式是linux-app模式,即 利用该基础库,在用户层空 ...

  2. python中函数和生成器的运行原理

    #!/usr/bin/env python # -*- coding:utf-8 -*- # author:love_cat # python的函数是如何工作的 # 比方说我们定义了两个函数 def ...

  3. python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决【转载】

    原文转自:http://bbs.chinaunix.net/thread-4154743-1-1.html python3中用HTMLTestRunner.py报ImportError: No mod ...

  4. RobotFramework自动化3-搜索案例【转载】

    本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/robotframework/ 前言 RF系列主要以案例为主,关键字不会的可以多按按F5 ...

  5. qt include无法自动补齐

    原因一: 检查cmake有没有include_directories 原因二: CmakeList.txt放错位置 原因三: 没有用qt new file来创建头文件

  6. 正则表达式之Regex.Matches()用法

    //提取字符串中至少连续7位的数字 string txt = "www17736123780eeeee 7377091 ddddsssss7777777"; //找到的成功匹配的集 ...

  7. 学习SPRING BOOT, SPRING CLOUD之Eureka和security

    有意思,明天去杨浦报名了一个SPRING CLOUD沙龙, 今天再抓紧看看哈哈哈. Eureka服务端: EurekaApplication.java package com.packtpub.Eur ...

  8. 整数划分问题（记忆化搜索和DP方法）

    一. 问题 现在有一正整数N,要把它分为若干正整数之和,问有多少种本质不同的分法? (1)其中最大数不超过m, 有多少种分法? (2)分割后的正整数的数目不超过m个, 有多少种分法? (3)分成最大数 ...

  9. js部分的总结

    一.词法结构 1.区分大小写 2.注意//单行/*多行注释* 3.字面量(直接量 literal) 12 //数字 5.8 //小数 “hello” ‘hello’ true /js/gi  //正则 ...

  10. Email List

    题目:给几个Email的list,输出全部list的交集(在全部list中都出现过的email). 思路:用set记录前i个list中都含有的email,当进行第i+1时,检查每个email是否在该s ...