在Mac上进行前端页面调试时，经常需要对照HTML结构与CSS样式。传统做法是打开两个窗口来回切换，或者使用浏览器的开发者工具，但有时我们只是想快速查看本地源码，并不想启动整个浏览器调试环境。Bear应用内置的标签页功能可以很好地解决这个需求，它允许多个笔记或代码文件在同一窗口中以标签形式共存，结合分屏模式，就能让HTML源码与CSS样式并排显示，互不遮挡。
Bear本身是一款注重写作体验的Markdown笔记软件，但它对纯文本和代码片段也有良好的支持。当我们把HTML和CSS文件以纯文本形式粘贴或导入Bear后，Bear会自动识别代码块并给出基础高亮。虽然高亮强度不如专业代码编辑器，但用于快速查看结构已足够。更重要的是，Bear的标签页逻辑非常清晰：每个笔记就是一个标签，你可以像使用浏览器一样在顶部切换，也可以通过菜单栏的“窗口”选项启用拆分视图，将当前窗口分成左右两部分，分别放置不同标签。
标签页与拆分视图的基本操作
要在Bear中同时打开HTML源码和CSS样式，第一步是创建两个独立的笔记。可以分别命名为“index.html”和“style.css”，然后将对应代码粘贴进去。粘贴时建议使用Bear的“粘贴为纯文本”功能，避免引入富文本格式干扰代码内容。完成粘贴后，Bear会尝试对代码进行着色，如果识别为HTML或CSS，会显示不同的颜色标记，这有助于快速区分标签、属性和值。
接下来，利用标签页将两个笔记放在同一窗口。点击窗口顶部的标签栏即可切换。如果希望同时看到两个文件，启用拆分视图：在菜单栏选择“显示”菜单下的“拆分视图”，或者使用快捷键。Bear的拆分视图支持左右或上下布局，对于HTML和CSS来说，左右并排更加符合阅读习惯，左侧放HTML结构，右侧放CSS规则，修改样式时可以直接对照类名和ID。
需要注意的是，Bear的拆分视图并不是真正的多文件编辑同步，它只是将两个笔记以分栏形式展示，编辑操作仍然独立。但这对于查看和对比已经足够。如果你需要实时刷新预览，可以配合浏览器或本地服务器，但Bear本身不提供HTML渲染预览，因此我们更多把它当作一个带标签页的源码查看器。
代码折叠与快速定位技巧
当HTML源码较长时，只想关注某个区块的样式对应关系，可以借助Bear的代码折叠功能。Bear支持对标题和列表进行折叠，对纯代码块的折叠能力有限，但我们可以手动在笔记中插入Markdown标题来分割代码段。例如在HTML笔记中写入“<!-- 导航栏 -->”这样的注释，Bear会将其识别为普通文本，不会折叠。更好的做法是利用Bear的搜索功能：按下Command+F，输入类名或ID，Bear会高亮所有匹配项，并在笔记右侧显示匹配计数，点击计数可以快速跳转。
对于CSS样式，同样可以使用搜索快速定位选择器。Bear的搜索范围可以是当前笔记或全部笔记，建议将HTML和CSS放在同一个笔记本或相邻标签中，这样搜索时不会干扰其他内容。另一个技巧是使用Bear的标签系统，给这两个笔记打上相同标签，例如“frontend”，之后在标签过滤视图中同时看到它们，双击即可并排打开。
如果你希望看到更精确的行号，Bear目前不直接显示行号，但可以通过在每行前手动添加数字来实现，不过这会破坏代码复制功能。更实用的方法是导出为纯文本后在其他编辑器中查看，或者使用Bear的“复制为HTML”功能将代码块分享给支持行号的工具。对于日常快速对照，搜索和高亮已经能解决大部分问题。
实践示例：一个卡片组件的HTML与CSS对照
以下给出一个简单的卡片组件示例，分别展示HTML结构和对应CSS样式。将这两段代码分别放入Bear的两个笔记，然后启用拆分视图，就能直观地看到样式如何作用于结构。
<div class="card">
<img src="avatar.png" alt="用户头像" class="card-avatar" />
<div class="card-body">
<h3 class="card-title">张三</h3>
<p class="card-desc">前端开发工程师，专注于用户体验。</p>
<button class="card-btn">关注</button>
</div>
</div>
.card {
width: 300px;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
font-family: -apple-system, sans-serif;
}
.card-avatar {
width: 100%;
height: 180px;
object-fit: cover;
}
.card-body {
padding: 16px;
}
.card-title {
margin: 0 0 8px;
font-size: 20px;
color: #333;
}
.card-desc {
margin: 0 0 12px;
font-size: 14px;
color: #666;
}
.card-btn {
padding: 8px 16px;
background: #007aff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
在实际调试中，你可以根据HTML中的类名在CSS笔记中搜索，反之亦然。例如想修改标题颜色，先在HTML笔记中定位到“card-title”，再到CSS笔记中搜索“.card-title”，Bear会迅速跳转到对应规则。这样两个标签页之间的协作就变得非常顺畅，不需要来回切换窗口或滚动长文件。
Bear的标签页和拆分视图对于轻量级源码查看已经足够，但如果涉及复杂的预处理或者实时刷新，还是建议使用Visual Studio Code等专业编辑器。不过作为Mac上一款顺手的小工具，Bear的简洁和快速启动特性，让它成为快速查阅HTML与CSS的备选方案之一。掌握这些标签页使用技巧，能帮助你减少开发中的上下文切换成本，把精力集中在样式调整本身。