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. 高级列表控件ListCtrl关联的MFC中的类：CListCtrl

    高级列表控件ListCtrl关联的MFC中的类:CListCtrl■ 报表样式ListCtrl常用操作:1.添加列标题头:InsertColumn2.获取与设置列宽:GetColumnWidth.Se ...

  2. Fiddler抓包4-工具介绍（request和response）【转载】

    本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/p/6719717.html 前言 本篇简单的介绍下fiddler界面的几块区域,以及各自区域到 ...

  3. Hmailserver搭建邮件服务器

    Hmailserver安装很简单不需要多说,自己去百度 Hmailserver配置: 输入安装时设置的密码登录Hmailserver 添加域名,如:域名是:mail.abc.com这里添加的时候应该填 ...

  4. 计蒜客 28317.Growling Gears-一元二次方程的顶点公式 (Benelux Algorithm Programming Contest 2014 Final ACM-ICPC Asia Training League 暑假第一阶段第二场 G)

    G. Growling Gears 传送门 此题为签到题,直接中学的数学知识点,一元二次方程的顶点公式(-b/2*a,(4*a*c-b*b)/4*a):直接就可以得到结果. 代码: #include& ...

  5. Codeforces Gym100952 C. Palindrome Again !!-回文字符串 (2015 HIAST Collegiate Programming Contest)

      C. Palindrome Again !!   time limit per test 1 second memory limit per test 64 megabytes input sta ...

  6. (24)C#log4net配置和使用

    一.下载并引用log4 DLL下载  http://logging.apache.org/  找到.net版本的 点击下载 找到编译好的bin 选择net 选择你项目对应的.net framework ...

  7. Python_Tips[0] -> 关于 import

    关于 import 1 import import可用于导入一个Python的标准模块,包括.py文件或带有__init__.py的文件目录. 在Python中,import一个模块后,若再次impo ...

  8. luogu P1182 数列分段Section II

    题目描述 对于给定的一个长度为N的正整数数列A[i],现要将其分成M(M≤N)段,并要求每段连续,且每段和的最大值最小. 关于最大值最小: 例如一数列4 2 4 5 1要分成3段 将其如下分段: [4 ...

  9. POJ 2549：Subsets（哈希表）

    [题目链接] http://poj.org/problem?id=2549 [题目大意] 给出一个数集,从中选择四个元素,使得a+b+c=d,最小化d [题解] 我们对a+b建立Hash_table, ...

  10. Java Socket编程详细解说

    Java Socket编程 JavaSocketServerSocket乱码超时 Java Socket编程 对于Java Socket编程而言,有两个概念,一个是ServerSocket,一个是So ...