者一开始也是 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标签。基本的表单使用FROM标签来说明。该标签中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。