【Markdown】【HTML】在Markdown中实现康奈尔笔记模式（右侧留白）-CSDN博客

本文链接：https://blog.csdn.net/hmywillstronger/article/details/147395603

文章目录

康奈尔笔记法是一种将笔记页分为不同区域的记录方法，通常有主要笔记区域、右侧的提示区域和底部的总结区域。在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格式的文本。

要点1
要点2
要点3

关键词区域

重要概念

问题

要记住的内容

标签解释

`<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)