使用＜details＞标签在网页里面添加脚注

使用 details 标签可以为文章添加相应注解
代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>details, summary {display: inline;vertical-align: super;font-size: 0.75em;}summary {cursor: pointer;}details[open] {display: contents;}details[open]::before {content: " [";}details[open]::after {content: "]";}</style>
</head>
<body>The most cited work in history, for example, is a 1951 paper<details><summary>1</summary>Lowry, O. H., Rosebrough, N. J., Farr, A. L. & Randall, R. J. J. Biol. Chem. 193, 265–275 (1951).</details>
describing an assay to determine the amount of protein in a solution.
</body>
</html>

效果如下：

使用＜details＞标签在网页里面添加脚注相关推荐

html5中details标签作用
html5 中新增的<details>标签允许用户创建一个可展开折叠的元件,让一段文字或标题包含一些隐藏的信息. 标签定义及使用说明 <details> 标签规定了用户可见的或 ...
HTML+CSS项目实践四：给html网页标题栏添加logo图标（ico格式图片）
实现效果: 制作思路: 1.准备一张ico格式图片 2.在<head>标签里使用<link />标签,引用icon图片实现代码: <!DOCTYPE HTML> ...
如何在html添加css样式表,网页中添加CSS样式表的四种方式
本文向大家描述一下网页中添加CSS样式表的四种方式,首先让我们来看一下CSS样式表文件的优势,主要体现在两个方面,请看下文详细介绍. CSS样式表文件的优势表现在两个方面: ***,简化了网页的格式代 ...
Android NFC标签写入网址，感应到标签访问网页
首先在AndroidManifest.xml文件中添加如下配置  <uses-sdk android:minSdkVersion="1 ...
在网页中添加矢量图形
矢量图形在很多情况下非常有用 - 它们拥有较小的文件尺寸,却高度可缩放,所以它们不会在镜头拉近或者放大图像时像素化.在这篇文章中,我们将为您呈现如何在网页中添加矢量图形. 前提: 你需要了解 HTML ...
零基础学习HTML(23)——section标签、article标签、details标签、summary标签
注:学习笔记基于小甲鱼学习视频,官方论坛:https://fishc.com.cn/forum.php 官方资料鱼C课程案例库:https://ilovefishc.com/html5/ html5 ...
Html的单、双标记标签，编写规范及常用属性标签和网页的常见的状态码
一.单标记标签 1.单边标记只有开始标记,没有结束,单边标记通常没有内容,只是代表某个功能 2.单标标记一般情况是一个特殊的功能 3.单边标记常用的大概10余个 4.语法格式<标签名称属性1= ...
怎样在html中加入音乐播放器,如何在网页中添加音乐播放器
小编其实一个很痴迷音乐的人,每当我用电脑工作的时候,都会打开播放器播放音乐的,然后顿时觉得很舒适,如果我们在别人浏览网页的时候加个音乐播放器播放音乐的话,那么我们的网页就会给别人带来很舒适的感觉.DW ...
HTML网页背景添加图片
在网页中添加不重复.全覆盖.图片长宽比不变的网页背景具体步骤如下: 将待添加的图片放到.jsp同一目录下,这样写URL比较方便在<body> 标签中添加 background=- &l ...
安卓java代码标签_Android实现动态添加标签及其点击事件
在做Android开发的时候,会遇到动态添加标签让用户选择的功能,所以自己写了个例子,运行效果图如下. 标签可以左右滑动进行选择,点击的时候,会弹出toast提示选择或者取消选择了哪个标签.通过动态添 ...

使用＜details＞标签在网页里面添加脚注

使用＜details＞标签在网页里面添加脚注相关推荐

最新文章

热门文章