使用＜details＞標籤在網頁裡面新增腳註

阿新 • • 發佈：2020-12-31

使用 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＞標籤在網頁裡面新增腳註

技術標籤：htmlhtml註腳details 使用 details 標籤可以為文章新增相應註解程式碼：

關於＜script＞標籤(來自《JavaScript高階程式設計》2.1[思維導圖])

2.1[思維導圖]) 補充：源自HTML<script>標籤 HTML 4.01 與 HTML5之間的差異在 HTML 4 中，“type” 屬性是必需的，但在 HTML5 中是可選的。 “async” 屬性是 HTML5 中的新屬性。 HTML5 中不再支

02_Spring Bean 屬性即xml ＜beans＞標籤詳解

技術標籤：Spring Frameworkspringbeans標籤詳解 Spring Bean Spring IOC容器相當於一個工廠，容器中的 Bean 相當工廠的產品。工廠要生產和管理 Bean，需要讓工廠知道載入那些Bean，如何載入。

＜input＞標籤輸入預設值

技術標籤：javawebhtml 1.value屬性 <html> <head> <meta charset="UTF-8">

HTML中＜address＞標籤

技術標籤：HTML5前端html5html 栗子：被address標籤包裹後，內容會自動變成斜體(￣▽￣)"

HTML ＜frame＞標籤的介紹以及例項

技術標籤：html複習定義和用法 <frame> 標籤定義 frameset 中的一個特定的視窗（框架）。其中： frameset的常用屬性： frameborder=“邊框大小” cols=“各視窗百分比，隔開” rows=“各視窗百分比” fr

＜ span ＞標籤的使用

< span >標籤的使用 span標籤可以為< p >標籤中的部分文字新增樣式且不會改變文字的顯示方向

mybatis中＜selectKey＞標籤的作用

作用：一些情況下，新增一條資料資訊，但其主鍵（id）是資料庫自動在資料庫生成（自增），而有些業務邏輯的處理是需要要到這個生成的主鍵（id）。標籤就是用來獲取這個生成的主鍵（id）

給圖片新增完蒙版後，如何讓字型不受＜image＞圖片標籤的透明度影響

技術標籤：css 思路：字型的 div 使用 position:aboslute <template> <view class="course">

消除點選＜audio＞音樂播放器標籤默認出現的邊框 html+css

技術標籤：前端csshtml 標題：消除點選音樂播放器標籤默認出現的邊框 html+css 問題描述：

Linux檢視所有使用者命令 sudo cat /etc/shadow 新增使用者命令adduser ＜使用者名稱＞

技術標籤：linuxlinux 檢視使用者 sudo cat /etc/shadow 第一個是root使用者，最後一個是建立的普通使用者，其他的是執行系統服務所產生的使用者

Android 中＜xliff:g＞標籤的使用

技術標籤：xliff:gxmlandroidxmlandroid studio Android 中<xliff:g> 標籤的使用前言：今天再看官方demo的時候發現在res/values/string.xml中有一個包含<xliff:>這個標籤：

Element-UI之＜el-autocomplete＞標籤在輸入框輸入匹配不到下拉列表中內容

技術標籤：VUEElement-UIel-autocompletevuefilter 功能需求：查到另一張表的“姓名”欄位，在輸入框下有下拉框可以輸入，自動匹配下拉列表中的欄位滑鼠點選在輸入框，下拉列表出現

win10字型在哪裡新增？在win10系統裡面新增字型的方法

雖然win10企業版系統自帶有一些字型，但在編輯ppt或word文件時難免會遇到找不到字型的情況，為了讓文件呈現更加完美，其實我們可以自己新增一些字型在電腦上，而且方法步驟簡單，下面給大家介紹一下新增字型的方法。

C#後臺實現在Grid標籤中動態新增CheckBox標籤（WPF中）

頁面程式碼 1 <Grid Margin=\"45,0,10,0\" > 2<Grid.RowDefinitions> 3<RowDefinition Height=\"*\"/>

簡單學習一下網頁中新增 jQuery

網頁中新增 jQuery 下載 jQuery 庫從 CDN 中載入 jQuery, 如從 Google 中載入 jQuery 下載 jQuery

List裡面新增子list,子list clear之後竟然會影響主List裡面的內容

public class TestList { static class Car { String name; public Car(String name) { this.name = name; } public Car() {

＜PrivateImplementationDetails＞.ComputeStringHash 錯誤解決辦法

嚴重性程式碼說明專案檔案行禁止顯示狀態錯誤 CS0119 \'“PrivateImplementationDetails”是一個型別，這在給定的上下文中無效 Fxwap.jsssc G:\\Project\\srcs\\gamekeyList\\bin\\Fxwap.jsssc-ref

＜Zhuuu_ZZ＞資料倉庫(一)

資料倉庫一 Why二 What三面向主題提取主題四整合五非易失六隨時間變化七專案-基於物聯網的物流數倉系統

java.net.BindException: Address already in use: JVM_Bind ＜null＞:8080

1.tomcat8080端口占用，只需要找到佔用的，再幹掉它就OK了 2.cmd命令模式下輸入cd c:\\windows\\system32進入到系統資料夾下，輸入netstat -ano，然後找到佔用8080埠的那個程序如下圖所示

使用＜details＞標籤在網頁裡面新增腳註

相關推薦