如何制作自己的浏览器起始页:从 HTML/CSS 到搜索框与快捷链接

更新时间

制作一个可用的浏览器起始页，最小只需要一个 HTML 文件：写一个搜索表单、一组常用链接，再用 CSS 控制布局和配色，最后把浏览器新标签页指向这个文件即可。适合想摆脱默认新标签页、又不需要后端服务的人。Startpage Emporium 收录了 80 个社区作品，可作为设计参考；其中不少作品标注了 simple、minimal、dark、search、link-list、localstorage 等特征，说明这些是起始页的常见组成。

先确定起始页要放什么

一个起始页通常由三部分组成，按需取舍：

组成 作用 是否必需
搜索框 输入关键词后跳转到搜索引擎 建议有
快捷链接 一键打开常用网站 建议有
装饰与主题 壁纸、深色模式、时钟等 可选

Startpage Emporium 中的作品覆盖了这些方向：有的只做“simple minimal search”，有的加入“dark to-do search weather”，还有的做成“command-line terminal”“bios”“retro crt”等风格。先决定你要“极简搜索型”还是“链接面板型”，再动手写代码，能少走弯路。

第一步：写最小可用的 HTML 骨架

新建一个文件，命名为 index.html，用编辑器打开，写入以下内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的起始页</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="page">
    <h1>我的起始页</h1>

    <form class="search" action="https://www.google.com/search" method="get">
      <input type="text" name="q" placeholder="搜索…" autofocus>
      <button type="submit">搜索</button>
    </form>

    <ul class="links">
      <li><a href="https://github.com">GitHub</a></li>
      <li><a href="https://developer.mozilla.org">MDN</a></li>
      <li><a href="https://news.ycombinator.com">Hacker News</a></li>
    </ul>
  </main>
</body>
</html>

关键点：

  • action 是搜索引擎的查询地址，name="q" 是 Google 接收关键词的参数名。换成 Bing 用 https://www.bing.com/search，参数同为 q；换成 DuckDuckGo 用 https://duckduckgo.com/，参数也是 q。
  • autofocus 让页面打开后光标直接落在搜索框，省一次点击。
  • 表单用 method="get"，提交后关键词会拼进 URL，这是搜索跳转的标准做法。

验证方法：双击打开 index.html，在搜索框输入任意词回车，浏览器应跳转到搜索结果页；点击链接应能打开对应网站。如果搜索后地址栏出现 ?q=你的关键词 但页面没跳转，检查 action 是否写错或漏了 https://。

第二步：用 CSS 做简洁布局与深色主题

在同目录新建 style.css。下面是一份兼顾深色主题、居中和响应式的样式：

:root {
  --bg: #1a1a1a;
  --fg: #e8e8e8;
  --muted: #888;
  --accent: #4a9eff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.page {
  width: min(640px, 90vw);
  text-align: center;
}

h1 {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.search {
  display: flex;
  gap: 8px;
}

.search input {
  flex: 1;
  padding: 12px 16px;
  font-size: 1rem;
  border: 1px solid #333;
  border-radius: 8px;
  background: #262626;
  color: var(--fg);
  outline: none;
}

.search input:focus {
  border-color: var(--accent);
}

.search button {
  padding: 12px 20px;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}

.links {
  list-style: none;
  padding: 0;
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.links a {
  display: block;
  padding: 8px 16px;
  border-radius: 6px;
  background: #262626;
  color: var(--fg);
  text-decoration: none;
}

.links a:hover {
  background: #333;
  color: var(--accent);
}

要点说明：

  • :root 里定义颜色变量，想换浅色主题只需改这几行，不用逐条改样式。
  • width: min(640px, 90vw) 让内容在小屏上自动收窄，避免横向滚动。
  • .links 用 flex-wrap 让链接在窄屏自动换行，这是响应式排版最省事的方式。
  • system-ui 字体栈让页面在各系统上使用原生字体，加载快且观感自然。

验证方法：刷新页面，应看到深色背景、居中搜索框和一行链接按钮；把浏览器窗口拖窄到手机宽度，链接应换行而不是溢出。若页面仍是白底黑字，检查 <link rel="stylesheet"> 的路径是否与文件名一致。

第三步：把链接整理成快捷方块

链接多了以后，纯文字列表会显得散。可以改成网格方块，类似 Startpage Emporium 中标注“quickdial”“tiles”“boxes”的作品：

.links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.links a {
  padding: 20px 8px;
  text-align: center;
}

auto-fill 加 minmax 的效果是：容器够宽就多排几列，不够就自动减少列数，不需要写媒体查询。每个链接变成一个方块，适合放 8 到 20 个常用站点。

如果想让每个方块带图标，可以在 <a> 里加一个 <img> 或内联 SVG，并把链接文字放在下方。图标资源建议本地保存，避免每次打开页面都请求外部地址。

第四步：可选——用 localStorage 保存链接和偏好

Startpage Emporium 中有作品标注“editable”“link-list”“localstorage”，意思是链接列表可在页面上直接编辑，并保存在浏览器本地。实现思路：

  1. 页面加载时读取 localStorage.getItem('links')，有数据就渲染，没有就用默认列表。
  2. 提供一个输入框和“添加”按钮，提交后把新链接追加到数组，再 localStorage.setItem('links', JSON.stringify(list))。
  3. 每个链接旁放一个删除按钮，删除后同样写回 localStorage。
const KEY = 'links';
let links = JSON.parse(localStorage.getItem(KEY) || 'null') || [
  { name: 'GitHub', url: 'https://github.com' },
  { name: 'MDN', url: 'https://developer.mozilla.org' }
];

function render() {
  const ul = document.querySelector('.links');
  ul.innerHTML = '';
  links.forEach((item, i) => {
    const li = document.createElement('li');
    li.innerHTML = `<a href="${item.url}">${item.name}</a>`;
    ul.appendChild(li);
  });
}

function save() {
  localStorage.setItem(KEY, JSON.stringify(links));
}

注意：localStorage 按域名隔离。直接双击打开的 file:// 页面，不同浏览器对本地存储的支持不一致；把页面放到本地服务器（如 python -m http.server）或托管到静态站点后再测试，行为更可靠。另外，localStorage 只存在当前浏览器，换设备或清缓存后数据会丢失，重要链接建议保留一份默认列表在代码里。

第五步：让浏览器新标签页打开你的页面

页面做好后，需要让浏览器在新建标签页时加载它。不同浏览器设置入口不同，通用思路是安装一个“新标签页重定向”类扩展，把目标地址设为你的页面 URL；或者把页面托管到静态托管服务，再把浏览器启动页/主页设为该地址。直接改浏览器内置新标签页通常不被支持，扩展是更常见的做法。

验证方法：新建标签页，确认打开的是你的页面而不是默认页；在搜索框输入关键词，确认能正常跳转。

参考现有作品与排查常见问题

Startpage Emporium 是一个按标签组织的起始页合集，浏览时可按 simple、minimal、dark、search、link-list、terminal 等特征筛选，快速找到与你目标风格接近的作品，观察它们的布局密度、配色和交互方式。借鉴时注意只参考设计思路，不要直接复制他人代码用于发布。

常见显示问题及排查方向：

  • 搜索框回车没反应：检查 <form> 是否包住了输入框和按钮，action 是否为完整 URL。
  • 样式完全不生效：确认 CSS 文件路径正确，文件名大小写一致。
  • 手机上文字太小或溢出：检查是否漏了 <meta name="viewport">，以及宽度是否用了固定像素而非 min() 或百分比。
  • 深色主题下输入框文字看不清：给 input 显式设置 color 和 background，浏览器默认样式会覆盖继承值。
  • localStorage 数据不保存：确认页面通过 http(s) 访问，且没有在隐私模式下测试。

按以上步骤，一个带搜索、快捷链接、深色主题和可选本地编辑功能的起始页就能完成。先做出最小版本并验证搜索跳转，再逐步加样式和功能，比一次性写完更容易定位问题。