【Markdown】【HTML】在Markdown中实现康奈尔笔记模式（右侧留白）
文章目录
- HTML表格——康奈尔笔记法
- 标签解释
- `<table>` 相关标签
- 文本内容标签
- 注释标签
- 最低限度应了解的HTML标签 (Essential HTML Tags)
- 结构标签 (Structure Tags)
- 文本标签 (Text Tags)
- 列表标签 (List Tags)
- 链接和图片 (Links and Images)
- 格式化 (Formatting)
- 表格 (Tables)
康奈尔笔记法是一种将笔记页分为不同区域的记录方法，通常有主要笔记区域、右侧的提示区域和底部的总结区域。在Markdown中实现这种布局，尤其是右侧留白效果，可以方法实现。
HTML表格——康奈尔笔记法
最直接的方法是使用HTML表格，在Markdown中嵌入HTML：
<table width="100%" border="0"><tr><td width="70%" valign="top"><!-- 主要笔记内容 --><h2>主要笔记区域</h2><p>这里是笔记的主要内容。可以包含各种Markdown格式的文本。</p><ul><li>要点1</li><li>要点2</li><li>要点3</li></ul></td><td width="30%" valign="top"><!-- 右侧线索/关键词区域 --><h3>关键词区域</h3><p>重要概念</p><p>问题</p><p>要记住的内容</p></td></tr>
</table><!-- 底部总结区域 -->
<h3>总结</h3>
<p>这里是对以上内容的总结和反思。</p>
主要笔记区域这里是笔记的主要内容。可以包含各种Markdown格式的文本。
| 关键词区域重要概念 问题 要记住的内容 |
标签解释
<table> 相关标签
<table width="100%" border="0">
<table>: 定义HTML表格width="100%": 设置表格宽度占据可用空间的100%border="0": 设置表格边框为0（无边框）
<tr>
<tr>: 表示"table row"，定义表格中的一行
<td width="70%" valign="top">
<td>: 表示"table data"，定义表格单元格width="70%": 设置单元格宽度为表格总宽度的70%valign="top": 设置单元格内容垂直对齐方式为顶部对齐
文本内容标签
<h2>主要笔记区域</h2>
<h2>: 二级标题标签，用于重要性次于<h1>的标题
<p>这里是笔记的主要内容。</p>
<p>: 段落标签，定义一个文本段落
<ul><li>要点1</li><li>要点2</li><li>要点3</li>
</ul>
<ul>: 无序列表(unordered list)，创建项目符号列表<li>: 列表项(list item)，定义列表中的单个项目
<h3>总结</h3>
<h3>: 三级标题标签，重要性次于<h2>
注释标签
<!-- 主要笔记内容 -->
- 这是HTML注释，不会显示在网页上，仅作为代码提示
最低限度应了解的HTML标签 (Essential HTML Tags)
- 结构标签：
<html>,<head>,<body> - 文本标签：
<h1>至<h6>,<p>,<span> - 列表标签：
<ul>,<ol>,<li> - 链接和图片：
<a>,<img> - 格式化：
<div>,<br>,<strong>,<em> - 表格：
<table>,<tr>,<td>
结构标签 (Structure Tags)
<html>: 定义HTML文档的根元素 (root element)，所有其他元素必须是此元素的后代<head>: 包含文档的元数据 (metadata)，如标题、样式表链接、脚本等，不在页面上显示<body>: 包含文档的所有可见内容 (visible content)，如文本、图像、链接等
文本标签 (Text Tags)
<h1>至<h6>: 定义六个级别的标题 (headings)，<h1>最重要，<h6>最不重要<p>: 定义段落 (paragraph)，浏览器会在段落前后自动添加空行<span>: 内联元素 (inline element)，用于样式化文本的一部分，不会产生换行
列表标签 (List Tags)
<ul>: 无序列表 (unordered list)，项目用项目符号标记<ol>: 有序列表 (ordered list)，项目用数字或字母标记<li>: 列表项 (list item)，用于<ul>或<ol>内部
链接和图片 (Links and Images)
<a>: 创建超链接 (hyperlink)，使用href属性指定目标URL<img>: 插入图像 (image)，使用src属性指定图像URL，alt属性提供替代文本 (alternative text)
格式化 (Formatting)
<div>: 区块级容器元素 (block-level container)，用于组织内容，默认在前后创建换行<br>: 创建换行 (line break)<strong>: 表示文本的重要性 (importance)，通常以粗体显示<em>: 强调文本 (emphasis)，通常以斜体显示
表格 (Tables)
<table>: 定义表格 (table)<tr>: 定义表格中的一行 (table row)<td>: 定义表格单元格 (table data/cell)