者一開始也是 Office 用戶，論文寫作就是用 Office Word。Office 三件套 PPT、WORD、EXCEL 是必備必會的工具，但是這些工具固化了筆者的工作，也會有很多不方便的地方，這也是很多編輯工具能夠崛起并搶占市場的原因。新的編輯工具核心簡單，可拓展性強大，讓用戶成為開發者，生命力極強，可以與 Office 分庭抗禮。

Obsidian 以作為你的第二大腦為口號，是一款強大的知識管理、本地化 Markdown 文本編輯工具。

Obsidian的核心功能就是編輯器，功能界面與我們常見的編輯工具（幕布 APP、notion、logseq 等）類似，所以上手極其簡單。使用 Obsidian 特別適合做知識管理，各種筆記、時間規劃、搜集等功能更是不在話下。本期內容就為大家分享使用Obsidian閱讀 PDF 論文的一些基本技巧，幫助對 Obsidian 不熟悉的小伙伴快速上手這款軟件！

Office需要近 1GB 空間，Obsidian只需要不到 100Mb 空間，Obsidian 可以實現 Word 的大部分文本編輯功能，可以制作PPT，可以制作表格，實現 OneNote 的知識管理、筆記，可以 Publish 文章。Obsidian的絲滑體驗遠超Office，功能強大就如網友的評價all in one。

本期，筆者將介紹幾個好用的Obsidian第三方插件，以及與其配套的瀏覽器插件。

網頁轉 markdown 的瀏覽器插件

Obsidian有一款非常值得推薦的Edge瀏覽器插件——MarkDownload - Markdown Web Clipper。它可以快速將任何網頁轉化為Markdown，以便輕松編輯、批注或共享。Markdown 可以直接復制到剪貼板，或者下載。一些期刊的 SCI 論文可以用 Markdown Web Clipper**直接下載為 Markdown 文件，或者粘貼到 Obsidian 的筆記。

MarkDownload - Markdown Web Clipper插件下載地址如下：

https://microsoftedge.microsoft.com/addons/detail/markdownload-markdown-w/hajanaajapkhaabfcofdjgjnlgkdkknm

也可在Edge瀏覽器擴展商店搜索安裝使用。

使用時，對于自己感興趣的網頁內容，直接右鍵點擊MarkDownload - Markdown Web Clipper，選擇復制或者下載即可。

之后我們打開Obsidian，新建一篇筆記，粘貼或者拖拽Markdown進 Obsidian 文件列表即可，就可以直接查看網頁的內容了。

? 插入數學公式

你以為Obsidian是文本編輯器，就不能插入復雜的數學公式了？

Obsidian支持的是Markdown，可以插入復雜的數學公式。只是你對 Markdown 語法不熟悉，可能并不知道如何插入數學公式而已。

下圖是Obsidian的第三方插件 "Markdown Formatting Assistant"，可以實現文本，表格，HTML，Latex 等基本編輯功能。當然這里的 Latex 的數學公式并不全面，更多數學公式請查看 Latex 語法 (后續還有 Obsidian 數學公式利器，敬請期待)。

下圖是Markdown Formatting Assistant的設置界面，可以設置顯示內容和顯示方式。

? 內容折疊與嵌套

Obsidian為了把筆記整理得比較有條理，采用“嵌套”和"折疊 "的方式，便于知識管理。

嵌套就是將一個筆記通過鏈接嵌入另一個筆記，同時可以顯示其內容，這樣可以重復使用一個筆記到不同筆記中。比如，我寫了一個算法理論的筆記，我有幾篇論文都用到它，我可以在這幾篇論文里直接嵌套這個算法的筆記，解決了重復工作。導出Word的時候，會自動將嵌套內容導出到論文里，方便高效。

折疊就是可以隱藏某個標題下的章節內容，也可以控制標題的層級，邏輯清晰明確！在Obsidian中實現標題折疊非常簡單，只需要給標題文字添加#即可。這個和Word 差不多，就不贅述了。

? 懸浮工具欄

Obsidian 也有類似于word的工具欄。這里推薦使用Obsidian的第三方插件cMenu，它提供了很多便捷文本操作功能（例如：加粗、斜體、下劃線、上角標、下角標、引文、標題、變色、高亮、序列等等）如下圖所示。

cMenu的設置頁面如下圖所示，可以設置其顯示效果（例如半透明，顯示行數），也可以定制文本編輯功能，上圖只顯示了筆者選擇的功能而已。

? 大綱列表

Obsidian提供了大綱功能，你可以在頁面右上角菜單中看到“打開大綱”，打開后就可以，瀏覽到文章標題的大綱了，可以直接點擊標題跳轉，效果是和Word的導航窗格一樣的。

? 懸浮大綱

Obsidian 也有一個懸浮大綱的第三方插件floating-toc，可以實現下圖所示的懸浮大綱（只有編輯模式下有效）。懸浮大綱會根據鼠標懸停顯示，自動隱藏，占用屏幕空間小，適合分辨率低的筆記本。

此外，也可以使用Table of Contents插件在文章開頭生成一個帶有鏈接跳轉的目錄，也可以實現跳轉。

? 插入文件附件

電腦中的任何數據文件，都可以以插入附件的形式添加到Obsidian中。只需將文件拖拽到Obsidian即可；可以將文件以鏈接 "[[]]" 的形式插入筆記中，隨時隨地通過鏈接打開文件。使用此功能可以很方便地使用Obsidian管理一些小文件，如代碼文件。

? 編程語法高亮

Obsidian支持簡單的Python、Javascript 編程，支持變成語法高亮，秒殺一眾 Office工具，比如下圖是一段 C#編寫的排序算法。Obsidian的語法高亮主要用到的第三方插件是Editor Syntax Highlight。

寫在最后

本期主要分享了6個Obsidian 、瀏覽器的第三方插件：

?cMenu

?Editor Syntax Highlight

?Markdown Formatting Assistant

?MarkDownload - Markdown Web Clipper

?floating-toc

?Table of Contents

這些插件可以提高記筆記、寫論文的效率，組合使用就可以替代 Word，甚至比 Word更加強大！

Obsidian需要用戶自己配置，對于一些不熟悉編程的用戶可能不太友好，可能會在初期勸退一些用戶。一旦你成功上手了Obsidian，就會感受到它的強大。Obsidian畢竟可以用于學習、筆記，也可以用于研究論文、日程安排，這些內容會在以后詳細介紹。

大家如果想了解更多關于Obsidian的內容，可以關注投必得學術，點贊本文，也可以留言給我們。筆者接下來會分享更多Obsidian的用途，幫助大家更好地使用Obsidian，用Obsidian幫助大家更好地閱讀、寫作和學習。

Obsidian第三方插件總結

Obsidian的強大就在于第三方插件。截至目前，筆者已經總結了一些 Obsidian+Zotero結合第三方插件的科研工作學習用法：

?【Obsidian】+【Media Extended&Extended BiliBili Plugin 插件】是一個很好用的視頻學習神器，可以讓你邊看視頻，邊做筆記，還能在筆記里用視頻時間戳。

?【Obsidian】+【PDF to Markdown 插件】是一個好用的 PDF 轉換文本工具，可以直接將 PDF 轉化為 markdown 文件，你可以直接在原文上做筆記了。

?【Obsidian】+【Note Refactor 插件】是一個很好用的拆書工具，可以讓你用不同方式拆解一本書，打造自己的知識網絡。

?【Obsidian】+【模板插件】是一個很好用的快捷寫作工具，可以讓你用不同的模板寫論文、寫文獻筆記，提高你的寫作效率。

?【Obsidian】+【Day Planners 插件】是一個很好用的時間管理工具，高顏值日清單幫你規劃時間，定時提醒你的當前、下一步任務。

?【Obsidian】+【mindmap 插件】是一個很好用的思維導圖自動生成工具，它可以直接將你的文本轉化為思維導圖，將冗長的文本變得清晰可視。

?【Obsidian】+【Enhancing mindmap 插件】是一個免費繪制思維導圖工具，你可以直接用它繪制自己的想法。

?【Obsidian】+【Outline &Zoom 插件】是一個好用的大綱筆記工具，你可以直接用它設計論文大綱，做頭腦風暴。

?【Obsidian】+【QuickAdd】是一個好用的閃念捕捉工具，你可以直接用它快速記錄自己的想法。

?【Obsidian】+【MarkDownload - Markdown Web Clipper 插件】是一個好用的網頁剪藏工具，你可以直接用它快速將想要收藏的網頁導入 Obsidian 筆記中。

?【Obsidian】+【Zotero】是一個強大的文獻管理、閱讀、筆記組合，你可以做到閱讀筆記高效切換。

?【Obsidian】+【Cubox】是一個強大的信息碎片收集工具，你可以將網頁、手機上信息收藏到筆記中。

?【Obsidian】+【RSS 插件】是一個好用的期刊論文訂閱工具，你可以每天收到最新期刊論文。

?【Obsidian】+【Citations、Better BibTeX】是一個 Zotero 與 Obsidian 聯動方式，你可以拾取 Zotero 的所有文獻數據，導入 Obsidian，寫筆記的好幫手。

?【Obsidian】+【cMenu】是一個好用的仿 Word 工具欄，你可以像操作 word 一樣編輯文本（標題、加粗、角標、高亮等等）。

?【Obsidian】+【Editor Syntax Highlight】是一個高效的編程筆記神器，你可以在筆記中插入高亮的編程腳本，非常 nice。

?【Obsidian】+【Markdown Formatting Assistant】是一個必備的格式輔助工具，你可以編輯文本、表格、HTML、數學公式等。

?【Obsidian】+【MarkDownload - Markdown Web Clipper】是一個網頁剪藏工具，你可以講網頁轉 Markdown，粘貼或者導入 Obsidian。

?【Zotero】+【Mdnotes 插件】是一個 PDF 注釋導出工具，你可以導出的文獻筆記到 Obsidian，不僅具備了文獻的元數據，還擁有筆記。

?【Obsidian】+【floating-toc】是一個浮動大綱列表工具，可以給你的文本添加一個大綱，大綱會根據鼠標懸停顯示，自動隱藏。

?【Obsidian】+【Table of Contents】是一個目錄工具，你可以為你的論文生成一個帶有鏈接跳轉的目錄。

上述這些插件只是Obsidian 的冰山一角，筆者會在后續推文中分享 Obsidian 的更多第三方插件的強大用法，絕對可以提高你的科研學習效率。

多數PHP程序都使用HTML表單從用戶那里獲取數據并計算結果。

HTML表單的一些基本原則

• 選擇適合于收集的數據類型和提供交互方式的控件。
• 清楚標記每一個控件，這樣用戶就可以理解其功能。
• 盡可能將標簽對齊。將控件的左邊緣對齊。
• 將相關的標簽分組，并且通過設計中使用空白將每一個分組分開。
• 表單上的控件順序應該類似于用戶操作他們的順序。

創建基本HTML表單

首先創造一個基本的HTML大綱，包含表單控件；然后將控件進行合并（HTML表單必須包括一個提交按鈕，用戶單擊它可以將表單數據發送到服務器。）一個單獨的HTML頁面可以包含多個表單。

• 創建HTML結構

包含表單的HTML結構和和普通的HTML結構一樣。

<HTML>
  <HEAD>
  <TITLE>標題放在這</TITLE>
  </HEAD>
<BODY>
  表單頁面放在這
  </BODY>
  </HTML>

在包含表單的HTML頁面中可以使用任何HTML標簽?；镜谋韱问褂肍ROM標簽來說明。該標簽中METHOD屬性接收GET或POST兩個值中的一個。ACTION屬性子明PHP腳本的url，該腳本可以收集通過表單收集的數據，可以是絕對路徑或者相對路徑。

<FORM METHOD="method" ACTION="url"> 
  中間可以放置表單控件
  </FORM>

• 合并控件

兩個常用的基本控件：文本框和提交按鈕。

文本框：允許用戶鍵入信息以發送給PHP腳本。NAME屬性為文本提供名稱，PHP腳本可以通過名稱準確訪問其內容，因此它應該是唯一的且符合PHP變量命名規則（但不需要$符號），單標簽。VALUE屬性指明出現在提交按鈕上面的標題。創建方式如下：

<INPUT TYPE="TEXT" NAME="text">

提交按鈕：允許用戶將一個表單的內容發送到服務器，一個HTML表單對應應該有一個提交按鈕。

示例：一個完整的HTML表單。

<HTML>
  <HEAD>
  <TITLE>標題</TITLE>
  </HEAD>
<BODY>
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
</FORM>
  </BODY>
  </HTML>

• 使用多個表單

可以在一個HTML頁面中包含多個表單，注意下一個表單的FORM開始之前需要結束前一個FORM表單。

<HTML>
  <HEAD>
  <TITLE>標題</TITLE>
  </HEAD>
<BODY>
  
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
<BR/>
<BR/>
</FORM>

<FORM METHOD="POST" NAME="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name1">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email1">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data1">
</FORM>

  </BODY>
  </HTML>

創建表單控件

• 創建自定義的文本框

文本框的屬性中，TYPE和NAME是必須的，其余是可選屬性。SIZE屬性用于設置文本框的可視大??；MAXLENGTH指明用戶鍵入字符的最大長度；VALUE給出了一個最初顯示在文本框中的值。

<input type="text" name="" size="" maxlength="" value="">

• 創建文本區域

文本區域可以輸入多行文本。NAME和ROWS屬性是必須的。ROWS屬性表明了文本區域內可以看到的文本行數，充滿時會滾動。COLS屬性指明可見文本列數與行數類似。WRAP屬性指明文本區域內單詞換行的方式，可以指定如下值。該標簽為雙標簽。

<inputarea name="" rows="" cols="" wrap="">

• 創建密碼框

創建密碼框的語法與文本框相同，但要將TYPE屬性指定為PASSWORD而不是TYPE。

<input type="password" name="" size="" maxlength="" value="">

• 創建復選框

取兩個值中的一個，即二選一。TYPE屬性是必須的，checked屬性出現，該復選框默認情況會被選定。value屬性指定復選框被選定情況下被發送到服務器的值，默認發送on值。法如下：

<input type="checkbox" name="" checked value="">

• 創建單選按鈕

語法與復選框屬性含義相同，但是TYPE屬性的值必須是RADIO，NAME屬性是必須的。

<input type="radio" name="" checked value="">

• 創建列表框

用戶可以選擇一個或者多個選項，它是一個滾動菜單。

<select name="" multipile size="">options go here</select>

name屬性是必須的，multipile屬性指明用戶可以通過按下crtl鍵并單擊多個選項來選擇它們

列表框的單選行為可作為單選按鈕。

<option selected value="text"></options>

• 創建隱藏域

<input type="hidden" name="text"value="">

• 實現上傳文件的HTML表單

<input type="FILE" name="name" accept="time" value="text">

其中type屬性是必須的。格式通過使用MIME碼指定。常用的格式如下：

超文本標記語言文本 .html,.html text/html

　　普通文本 ：txt text/plain

　　word文檔：application/msword

　　RTF文本 ：rtf application/rtf

　　GIF圖形 ：gif image/gif

　　JPEG圖形 ：jpeg,

　　jpg： image/jpeg

　　au聲音文件：au audio/basic

　　MIDI音樂文件 ：mid,.midi audio/midi,audio/x-midi

　　RealAudio音樂文件 .ra, .ram audio/x-pn-realaudio

　　MPEG文件 .mpg,.mpeg video/mpeg

　　AVI文件 .avi video/x-msvideo

　　GZIP文件 .gz application/x-gzip

　　壓縮文件.rar application/octet-stream

　　壓縮文件.zip application/x-zip-compressed

　　TAR文件 .tar application/x-tar

更多提交表單的信息

• 使用圖像提交數據

<input type="image" src="url" name="text" align="align">

• 創建重置按鈕

<input type="reset" value="text">

文主要內容

• html 的常見元素
• html 元素的分類
• html 元素的嵌套關系
• html 元素的默認樣式和 CSS Reset
• html 常見面試題

html 的常見元素

html 的常見元素主要分為兩類：head 區域的元素、body 區域的元素。下面來分別介紹。

1、head 區域的 html 元素

head 區域的 html 元素，不會在頁面上留下直接的內容。

• meta
• title
• style
• link
• script
• base

base元素的介紹：

<base href="/">

base 標簽用于指定基礎的路徑。指定之后，所有的 a 鏈接都是以這個路徑為基準。

2、html 元素（body 區域）

body 區域的 html 元素，會直接出現在頁面上。

• div、section、article、aside、header、footer
• p
• span、em、strong
• 表格元素：table、thead、tbody、tr、td
• 列表元素：ul、ol、dl、dt、dd
• a
• 表單元素：form、input、select、textarea、button

div 是最常見的元素，大多數場景下，都可以用div（實在不行就多包幾層div）。可見，div 是比較通用的元素，這也決定了 div 的的語義并不是很明確。

常見標簽的重要屬性：

• a[href,target]
• img[src,alt]
• table td[colspan,rowspan]。設置當前單元格占據幾行幾列。在合并單元格時，會用到。
• form[target,method,enctype]
• input[type,value]
• button[type]
• selection>option[value]
• label[for]

html 文檔的大綱

我們平時在寫論文或者其他文檔的時候，一般會先列出大綱，然后再寫具體的內容。

同樣，html 網頁也可以看成是一種文檔，也有屬于它的大綱。

一個常見的html文檔，它的結構可以是：

    <section>
        <h1>一級標題</h1>

        <section>
            <h2>二級標題</h2>
            <p>段落內容</p>
        </section>

        <section>
            <h2>二級標題</h2>
            <p>段落內容</p>
        </section>

        <aside>
            <p>廣告內容</p>
        </aside>

    </section>

    <footer>
        <p>某某公司出品</p>
    </footer>

查看網頁大綱的工具

我們可以通過 http://h5o.github.io/ 這個工具查看一個網頁的大綱。

使用方法：

（1）將網址 http://h5o.github.io/ 保存到書簽欄

（2）去目標網頁，點擊書簽欄的網址，即可查看該網頁的大綱。

這個工具非常好用，既可以查看網頁的大綱，也可以查看 markdown 在線文檔的結構。

html 元素的分類

按照樣式分類：

• 塊級元素
• 行內元素
• inline-block：比如form表單元素。對外的表現是行內元素（不會獨占一行），對內的表現是塊級元素（可以設置寬高）。

按照內容分類：

html 元素的嵌套關系

• 塊級元素可以包含行內元素。
• 塊級元素不一定能包含塊級元素。比如 div 中可以包含 div，但 p 標簽中不能包含 div。
• 行內元素一般不能包含塊級元素。比如 span 中不能包含 div。但有個特例：在 HTML5 中， a 標簽中可以包含 div。

注意：在 HTML5 中 a > div 是合法的， div > a > div是不合法的 ；但是在 html 4.0.1 中， a > div 仍然是不合法的。

html 元素的默認樣式和 CSS Reset

比如下拉框這種比較復雜的元素，是自帶默認樣式的。如果沒有這個默認樣式，則該元素在頁面上不會有任何表現，則必然增加一些工作量。

同時，默認樣式也會帶來一些問題：比如，有些默認樣式我們是不需要的；有些默認樣式甚至無法去掉。

如果我們不需要默認的樣式，這里就需要引入一個概念：CSS Reset。

常見的 CSS Reset 方案

方案一：

CSS Tools: Reset CSS

方案二：

雅虎的 CSS Reset

我們可以直接通過 CDN 的方式引入：

<link rel="stylesheet" type="text/css" href=">

方式三：（比較有爭議）

*{
    margin: 0;
    padding: 0;
}

上面何種寫法，比較簡潔，但也有爭議。有爭議的地方在于，可能會導致 css 選擇器的性能問題。

Normalize.css

上面的幾種 css reset 的解決思路是：將所有的默認樣式清零。

但是，Normalize.css 的思路是：既然瀏覽器提供了這些默認樣式，那它就是有意義的。既然不同瀏覽器的默認樣式不一致，那么，Normalize.css就將這些默認樣式設置為一致。

html 常見面試題

doctype 的意義是什么

• 讓瀏覽器以標準模式渲染
• 讓瀏覽器知道元素的合法性

HTML、XHTML、HTML5的區別

• HTML 屬于 SGML
• XHTML 屬于 XML，是 HTML 進行 XML 嚴格化的結果
• HTML5 不屬于SGML，也不屬于 XML（HTML5有自己獨立的一套規范），比 XHTML 寬松。

HTML5 有什么新的變化

• 新的語義化元素
• 表單增強
• 新的API：離線、音視頻、圖形、實時通信、本地存儲、設備能力等。

em 和 i 的區別

共同點：二者都是表示斜體。

區別：

• em 是語義化的標簽，表示強調。
• i 是純樣式的標簽，表示斜體。HTML5 中不推薦使用。

語義化的意義是什么

• 開發者容易理解，便于維護。
• 機器（搜索引擎、讀屏軟件等）容易理解結構
• 有助于 SEO

哪些元素可以自閉和

自閉和的元素中不能再嵌入別的元素。且 HTML5 中要求加斜杠。

• 表單元素 input
• 圖片 img
• br、hr
• meta、link

form 表單的作用

• 直接提交表單
• 使用 submit / reset 按鈕
• 便于瀏覽器保存表單
• 第三方庫（比如 jQuery）可以整體獲取值
• 第三方庫可以進行表單驗證

所以，如果我們是通過 Ajax 提交表單數據，也建議加上 form。