Startpage 是什么:如何挑选或制作浏览器起始页

Startpage（起始页）是浏览器打开新标签页或启动时显示的自定义页面，通常用来放搜索框、常用链接、待办、天气或纯装饰背景。它和浏览器自带主页的区别在于：主页是浏览器设置里指定的那个网址，而起始页往往通过扩展或浏览器设置替换新标签页，两者可以指向同一个页面，也可以分开。Startpage Emporium 收录了 80 个来自不同作者的起始页，按“极简搜索”“终端/复古”“卡片/快捷链接”“待办天气”等风格分布，适合先逛再挑，或照着案例自己用 HTML/CSS 做一个。

起始页、主页和新标签页是什么关系

• 主页：浏览器“启动时打开”或点房子图标跳转的地址，在浏览器设置里改。
• 新标签页：每次按 Ctrl+T 打开的页面，默认是浏览器自带页，需要扩展或设置才能换成自定义页。
• 起始页：一个 HTML 页面，可以同时被设为主页和新标签页。Startpage Emporium 里的条目基本都是这种独立页面，作者把源码放在 GitHub 或自己的站点上。

所以挑选时先想清楚：你是想替换新标签页，还是只想让浏览器启动时打开某个页面。前者通常需要装一个“新标签页替换”类扩展，后者改浏览器设置即可。

按风格挑选：先看你要什么功能

Startpage Emporium 的条目大多带风格标签，可以按下面的维度快速缩小范围。

挑选时优先确认三件事：有没有搜索框（多数极简页有，纯装饰页可能没有）、快捷链接是否可编辑（有的写死在 HTML 里，有的存在 localStorage）、是否支持键盘操作（部分条目明确标注 keyboard controls 或 vim inspired）。

挑选时值得核对的几个细节

• 数据存在哪：标注 Localstorage 或 editable 的页面，链接和设置保存在浏览器本地，换浏览器或清缓存会丢；写死在源码里的则要改 HTML 才能变。
• 深色主题：列表里大量条目带 dark 标签，如果你常在夜间用，直接筛深色款省事。
• 依赖外部资源：带壁纸、粒子、字体的页面可能引用外部 CDN，离线或网络受限时会退化，纯 HTML/CSS 的页面更稳。
• 键盘操作：终端风和 vim 风格的页面通常支持按键聚焦搜索框或跳转链接，习惯键盘的人体验更好。

自己做一个起始页：基本思路

不需要框架，一个 HTML 文件加内联或外部 CSS 就够。核心结构通常是：一个搜索表单、一组链接、可选的时钟或待办。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>我的起始页</title>
  <style>
    body { margin: 0; min-height: 100vh; display: grid; place-items: center;
           background: #1e1e2e; color: #cdd6f4; font-family: system-ui, sans-serif; }
    form { display: flex; gap: 8px; }
    input { padding: 10px 14px; width: 320px; border: 1px solid #45475a;
            border-radius: 8px; background: #313244; color: inherit; }
    button { padding: 10px 16px; border: 0; border-radius: 8px;
             background: #89b4fa; color: #1e1e2e; cursor: pointer; }
  </style>
</head>
<body>
  <form action="https://www.google.com/search" method="get">
    <input name="q" placeholder="搜索…" autofocus>
    <button type="submit">搜索</button>
  </form>
</body>
</html>

输入：上面的 HTML 文件。动作：保存为 index.html，双击用浏览器打开。预期结果：页面居中显示一个深色搜索框，输入关键词回车会跳到 Google 搜索结果。autofocus 让页面打开即聚焦输入框，省一次点击。

想加常用链接，在 <form> 后面加一个 <nav>，里面放 <a> 列表即可；想记住用户改过的链接，用 localStorage.setItem 存 JSON，页面加载时读回来。Startpage Emporium 里标注 editable、link-list、Localstorage 的条目就是这类做法的现成参考。

部署到浏览器：两种常见做法

1. 本地文件：把 index.html 放在固定目录，浏览器设置里把主页设为 file:///路径/index.html。缺点是部分浏览器对新标签页不认本地文件，且换电脑要重新配。
2. 托管后设为新标签页：把页面放到 GitHub Pages 等静态托管，得到网址；再装一个允许自定义新标签页 URL 的扩展，填入该网址。Startpage Emporium 本身托管在 startpages.github.io，列表里的作者页面也多是这种静态托管。

常见卡点

• 新标签页没变：多数浏览器不允许直接把新标签页设成任意网址，需要扩展；先确认你改的是“新标签页”而不是“主页”。
• 搜索框没反应：检查 <form> 的 action 是否是目标搜索引擎的搜索地址，input 的 name 是否是该引擎要求的参数名（Google 是 q）。
• 样式在本地正常、托管后错乱：多为外部字体或图片用了相对路径，托管后目录结构变了；改成绝对路径或把资源内联。
• 清缓存后链接没了：说明数据存在 localStorage，属于预期行为，重要链接建议同时写一份在源码里。

先明确你要替换的是新标签页还是主页，再按“搜索框、链接可编辑性、深色、键盘操作”四个条件在 Startpage Emporium 的 80 个条目里筛，最后用上面的最小 HTML 起步改成自己的版本，是成本最低的路径。