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. linux系统查看主机序列号

    #dmidecode -t 1 System Information        Manufacturer: IBM        Product Name: System x3650 M3 -[7 ...

  2. 华农oj Problem L: CreatorX背英语【STL】

    Problem L: CreatorX背英语 Time Limit: 1 Sec Memory Limit: 64 MB Submit: 53 Solved: 36 [Submit][Status][ ...

  3. spring jpa data笔记

    tomcat启动Maven项目的时候总抛出这样的错误: Error creating bean with name 'org.springframework.boot.autoconfigure.or ...

  4. HDU 5916: Harmonic Value Description

    题目描述 The harmonic value of the permutation $p_1,p_2,\cdots p_n$ is$$\sum_{i=1}^{n-1} gcd(p_i.p_{i+1} ...

  5. Java-静态代码块，构造代码块，构造函数

    静态代码块:用staitc声明,jvm加载类时执行,仅执行一次 构造代码块:类中直接用{}定义,每一次创建对象时执行. 执行顺序优先级:静态块, main(),函数,构造块,构造方法. 构造函数 pu ...

  6. SQL常用语句|创建表,设置主键......

    新建表 create table [表名]([自动编号字段] int IDENTITY (1,1) PRIMARY KEY ,[字段1] nVarChar(50) default \'默认值\' nu ...

  7. [BZOJ4398]福慧双修/[BZOJ2407]探险

    题目大意: 给定一个$n(n\leq40000)$个点$m(m\leq100000)$条边的有向图,求从$1$出发回到$1$的不经过重复结点的最短路. 思路: 首先Dijkstra求出从1出发到每个结 ...

  8. CocoaPods 错误 target overrides the `OTHER_LDFLAGS`...

    Xcode 升级到 6.0 后,更新 CocoaPods,出现了如下的警告 [!] The `Paopao [Debug]` target overrides the `PODS_ROOT` buil ...

  9. 【教训】null == ''，改造ThinkSNS 系统里面的一个缓存管理函数S()后，留下一个大bug

    本来想简化 ThinkSNS 系统里面的一个缓存管理函数: <?php /** * 用来对应用缓存信息的读.写.删除 * $expire = null/0 表示永久缓存,否则为缓存有效期 */ ...

  10. 【转】Cvmat与IplImage的相互转换

    seyvlei 原文地址 1.IplImage转Cvmat IplImage* src = cvLoadImage(); CvMat* mat=cvCreateMat(src->height,s ...