使用
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>
效果如下：
![Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)