startpages.github.io

HTML（HyperText Markup Language，超文本标记语言）是用来描述网页结构的标记语言。它用一对对标签把内容标记成标题、段落、链接、图片等元素，浏览器读取这些标签后渲染出页面。如果你想快速看到效果，可以新建一个 .html 文件用浏览器直接打开，也可以打开 JSFiddle 这类在线编辑器，在 HTML 面板里写代码并即时预览。下面从最小可运行页面讲起，再到常用标签和在线工具的使用方式。

HTML 在网页中扮演什么角色

一个网页通常由三种技术分工完成：

HTML 本身不是编程语言，它没有变量、循环、条件判断，只负责“标记结构”。浏览器解析 HTML 后生成页面骨架，再由 CSS 和 JavaScript 补充样式与行为。所以学网页的第一步通常是先写出一段结构正确的 HTML。

一个最小可运行的 HTML 页面

把下面这段代码保存为 index.html，双击用浏览器打开，就能看到一个带标题和段落的页面：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个网页</title>
</head>
<body>
  <h1>你好，HTML</h1>
  <p>这是我用标签写出来的第一段文字。</p>
</body>
</html>

各部分的含义：

• <!DOCTYPE html>：声明这是 HTML5 文档，浏览器据此进入标准渲染模式。
• <html>：整个文档的根元素，lang 属性说明页面语言。
• <head>：存放不直接显示在页面上的信息，比如字符编码 meta charset 和浏览器标签页标题 <title>。
• <body>：所有可见内容的容器。

输入这段代码、保存、在浏览器打开，预期结果是标签页显示“我的第一个网页”，页面正文显示一行大标题和一段文字。如果中文变成乱码，通常是漏了 <meta charset="UTF-8">，或者文件保存时用的编码与声明不一致。

常用标签：先把结构写对

掌握几个高频标签就能表达大部分基础内容：

<h1>一级标题</h1>
<h2>二级标题</h2>

<p>这是一个段落，段落之间会自动换行并留出间距。</p>

<a href="https://jsfiddle.net">这是一个链接</a>

<img src="photo.jpg" alt="图片加载失败时的替代文字">

<ul>
  <li>无序列表第一项</li>
  <li>无序列表第二项</li>
</ul>

<ol>
  <li>有序列表第一项</li>
  <li>有序列表第二项</li>
</ol>

几个容易踩的点：

• 标签大多成对出现，<p>内容</p>，忘记闭合会让后续内容被错误嵌套。
• <img> 是自闭合标签，不需要 </img>；alt 属性在图片加载失败或读屏时起作用，建议始终填写。
• 标题标签 h1 到 h6 表示层级，不要为了字号大小而跳级使用，字号交给 CSS 控制。
• 属性写在开始标签内，格式是 属性名="值"。

用浏览器直接运行

不需要安装任何软件，浏览器本身就是 HTML 的运行环境：

1. 用任意文本编辑器（记事本、VS Code 等）新建文件，写入上面的示例代码。
2. 保存时把文件名设为 index.html，注意扩展名是 .html 而不是 .txt。
3. 在文件管理器里双击该文件，或把它拖进浏览器窗口。
4. 修改代码后保存，回到浏览器按 F5 刷新即可看到更新。

验证方法：右键页面选择“查看网页源代码”，确认浏览器读到的就是你写的标签；如果看到的是原始代码而不是渲染结果，说明文件扩展名可能不对。

用 JSFiddle 在线编写和分享

如果不想在本地建文件，或者想把代码片段发给别人看，可以用在线编辑器。JSFiddle 是一个在浏览器中运行的代码编辑器，支持 HTML、CSS、JavaScript，也支持 React 和 Tailwind 等，适合测试片段和分享示例。

基本流程：

1. 打开 jsfiddle.net，页面通常分为 HTML、CSS、JavaScript 和 Result（结果）几个面板。
2. 在 HTML 面板里写标签内容。注意这里只需要写 <body> 内部的部分，doctype、html、head 等骨架由平台自动补全。
3. 点击 Run 或等待自动刷新，Result 面板会即时显示渲染效果。
4. 点击 Save 保存，会得到一个可分享的链接，别人打开就能看到你的代码和运行结果。

例如在 HTML 面板输入：

<h1>在线测试 HTML</h1>
<p>这段文字会立刻出现在结果区。</p>

预期结果是 Result 面板马上渲染出标题和段落。如果没变化，先确认是否点了 Run，以及代码是否写在了正确的面板里。

需要留意的是，JSFiddle 提供升级到 PRO 的入口（见 jsfiddle.net/pro），但基础编辑和运行功能无需付费即可使用；具体功能差异以网站页面说明为准。

什么时候用本地文件，什么时候用在线编辑器

两者并不冲突：日常练习可以用本地文件打基础，遇到“想快速试一下这段标签对不对”或“需要贴给别人看”时，在线编辑器更省事。

常见卡点

• 中文乱码：检查 <meta charset="UTF-8"> 是否存在，以及文件保存编码是否为 UTF-8。
• 标签没生效：确认标签名拼写正确、成对闭合，属性值用引号包裹。
• 改了代码页面没变：本地文件记得保存后刷新；在线编辑器确认已触发运行。
• 图片不显示：检查 src 路径是否正确，本地图片和 HTML 文件的相对位置是否匹配。
• 把 HTML 当编程语言：需要计算、判断、循环时，那是 JavaScript 的职责，HTML 只描述结构。

把结构、样式、行为分开理解，是继续学习 CSS 和 JavaScript 的前提。先能独立写出并运行一个结构正确的 HTML 页面，再往上叠加样式和交互，路径会清晰很多。

CSS（Cascading Style Sheets，层叠样式表）是一种用来控制网页外观和布局的语言。它决定文字多大、颜色是什么、元素排成一行还是一列、页面在手机和电脑上分别长什么样。如果你已经会写 HTML，CSS 就是让页面从“有内容”变成“能看”的那一层；如果还没接触过 HTML，建议先理解标签如何描述内容结构，再回来看 CSS 会顺畅很多。

CSS 在网页三层分工中的位置

一个网页通常由三种技术各管一件事：

三者可以各自独立存在。只有 HTML 的页面能读但很朴素；加上 CSS 后视觉成型；再加上 JavaScript 才能响应用户点击、动态更新内容。CSS 不负责逻辑，JavaScript 也不负责“这个按钮应该是蓝色”——分工清楚，维护起来才不会互相打架。

CSS 的基本工作方式：选择器 + 声明块

一条 CSS 规则由两部分组成：

• 选择器：指出“要样式化哪些元素”，比如所有 <p>、class 为 card 的元素。
• 声明块：用花括号包住若干条声明，每条声明是“属性: 值;”。

p {
  color: #333;
  font-size: 16px;
}

这段规则的意思是：页面上所有 <p> 段落，文字颜色为深灰，字号 16 像素。浏览器读到后，会把这些样式应用到匹配的元素上。

“层叠”是 CSS 的核心机制：同一个元素可能被多条规则命中，浏览器按来源、优先级（specificity）和书写顺序决定最终用哪条。优先级相同时，后写的覆盖先写的，这也是为什么调整顺序有时能直接改变效果。

三种引入 CSS 的方式

1. 外部样式表：把样式写在单独的 .css 文件里，用 <link> 引入。适合正式项目，多个页面共用一套样式，改一处全站生效。

<link rel="stylesheet" href="style.css">

2. 内部样式：写在 HTML 的 <style> 标签里，只作用于当前页面。适合单页演示或临时调试。

3. 行内样式：直接写在元素的 style 属性上，只作用于该元素。优先级最高，但难以复用，通常只用于个别动态场景。

<p style="color: red;">这段文字是红色的</p>

选择哪种方式，取决于样式需要被多少页面复用。复用范围越大，越应该放到外部样式表。

一个最小可运行的例子

新建一个 index.html，内容如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>CSS 示例</title>
  <style>
    body {
      font-family: sans-serif;
      background: #f5f5f5;
    }
    .card {
      background: white;
      padding: 16px;
      border-radius: 8px;
      max-width: 320px;
      margin: 40px auto;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .card h1 {
      font-size: 20px;
      color: #1a1a1a;
    }
  </style>
</head>
<body>
  <div class="card">
    <h1>你好，CSS</h1>
    <p>这段文字被样式控制着。</p>
  </div>
</body>
</html>

用浏览器打开这个文件，你会看到一张居中的白色卡片，带圆角和阴影。验证方法：把 background: white; 改成 background: yellow; 并刷新，卡片背景立刻变黄，说明样式确实生效。常见卡点：如果没变化，先检查选择器拼写、花括号和分号是否完整——CSS 对语法错误不会报错，只会静默忽略那一条声明。

什么时候需要 CSS，什么时候不需要

• 只是写一段纯文本说明、不关心外观：可以只用 HTML。
• 需要控制排版、配色、响应式布局：必须用 CSS。
• 需要根据用户操作实时改变样式：用 JavaScript 修改元素的 class 或 style，样式规则本身仍写在 CSS 里。

把“长什么样”尽量留在 CSS，“做什么”交给 JavaScript，是前端代码保持可维护的基本习惯。

制作一个可用的浏览器起始页，最小只需要一个 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) 访问，且没有在隐私模式下测试。

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

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 起步改成自己的版本，是成本最低的路径。