empathyalgorithm.com 有付费内容

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 页面，再往上叠加样式和交互，路径会清晰很多。

XML 是一种用自定义标签描述结构化数据的标记语言。它不负责显示页面，也不负责执行逻辑，而是把数据组织成有层级、可被程序读取的文本格式。如果你需要让不同系统之间交换数据、保存配置，或者处理 RSS、SVG 这类基于 XML 的格式，就需要理解它。它和 HTML、JavaScript 不是替代关系：HTML 管展示，JavaScript 管行为，XML 管数据。

XML 的核心特征

XML 的全称是 Extensible Markup Language，即可扩展标记语言。它的“可扩展”体现在标签名由你自己定义，而不是像 HTML 那样只能使用固定标签。

一个最小的 XML 文档长这样：

<?xml version="1.0" encoding="UTF-8"?>
<book>
  <title>深入理解计算机系统</title>
  <author>Randal E. Bryant</author>
  <price currency="CNY">139</price>
</book>

这段代码里有几个基本结构：

• 声明：<?xml version="1.0" encoding="UTF-8"?> 说明版本和编码，通常放在第一行。
• 根节点：<book> 是整份文档的唯一根元素，所有其他元素都包在它里面。
• 元素：<title>、<author>、<price> 是自定义标签，成对出现，中间是内容。
• 属性：currency="CNY" 是挂在元素上的附加信息。

XML 对格式要求很严格：标签必须闭合、大小写敏感、属性值必须加引号、只能有一个根节点。少一个闭合标签，解析就会失败。

XML 和 HTML 的区别

两者都使用尖括号标签，但目的完全不同。

举例来说，<title> 在 HTML 里表示页面标题，浏览器知道怎么渲染；而在上面的 XML 里，<title> 只是我自定义的一个数据字段，浏览器不会自动显示它。XML 本身不包含任何样式信息，要显示就得配合 CSS 或 XSLT。

XML 和 JavaScript 的关系

JavaScript 不“属于”XML，但可以读取和处理 XML 数据。常见方式有两种：

1. 通过 DOM 解析：浏览器内置 DOMParser，可以把 XML 字符串转成可遍历的 DOM 对象。

const xmlString = `<book><title>示例</title></book>`;
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "text/xml");
console.log(xmlDoc.querySelector("title").textContent); // 示例

2. 通过 fetch 获取远程 XML：拿到响应文本后，同样用 DOMParser 解析，再提取字段渲染到页面。

预期结果是：JavaScript 负责“取数据”和“用数据”，XML 只负责“存数据”。这也是前后端分离中常见的数据交换模式之一，只不过现在更多用 JSON 替代 XML。

XML 常见的使用场景

• 配置文件：如 Maven 的 pom.xml、Android 的布局文件。
• 数据交换：早期 Web Service（SOAP）用 XML 传输请求和响应。
• 文档格式：Office 的 .docx、.xlsx 本质是 zip 包内的 XML 文件集合。
• 图形与订阅：SVG 矢量图、RSS/Atom 订阅源都基于 XML。
• 行业标准：医疗、金融等领域存在大量基于 XML 的数据规范。

为什么现在更多用 JSON

XML 表达能力强，但代价是冗长。同样的数据，JSON 通常更短、更易读，且与 JavaScript 天然兼容。

{
  "book": {
    "title": "深入理解计算机系统",
    "author": "Randal E. Bryant",
    "price": { "currency": "CNY", "value": 139 }
  }
}

对比可见，JSON 省去了大量闭合标签，解析也更直接。因此在现代 Web API 中，JSON 已成为主流。但 XML 并未消失：在需要严格 schema 校验、命名空间、复杂文档结构的场景，它仍有不可替代的位置。

什么时候该用 XML

• 你需要一套可校验的数据结构规范（如 XSD），且对格式约束要求高。
• 你要处理已有系统或行业标准输出的 XML 数据。
• 你要编写 Maven、Android 等特定工具的配置文件。
• 你要处理 SVG、RSS 这类本身就是 XML 的格式。

如果只是前后端传几个字段的普通接口数据，JSON 通常更省事。选择哪种格式，取决于数据复杂度、校验需求和对接方的既有约定，而不是哪个“更高级”。

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，是前端代码保持可维护的基本习惯。

应用商店的评分和榜单可以看，但不要当成唯一依据。评分容易被刷、被情绪化差评拉低，也容易因为版本更新后的短期波动而失真；榜单则常常受推广位、地区和时间影响。挑选小众移动应用时，更可靠的做法是看一组可验证的信号：更新是否持续、权限是否克制、开发者是否可追溯、隐私政策是否可访问、下载渠道是否正规。下面按“为什么评分不够用 → 看哪些信号 → 不同类型应用怎么区别对待 → 一套可执行的检查顺序”展开。

为什么评分和榜单容易误导

评分本质上是所有历史用户的平均值，它混合了不同版本、不同机型、不同使用场景的体验。一个应用可能因为某次更新出现闪退，短期内被大量一星差评淹没，但问题在一周后修复；也可能因为引导弹窗求好评，把分数拉高。榜单更直接：它反映的是下载量和推广投入，不等于质量。

评分不能告诉你的事情包括：应用是否还在维护、是否过度索取权限、是否把数据传到不明服务器、开发者是否只做这一款“马甲应用”。这些恰恰是小众应用最需要确认的部分。

值得观察的替代信号

更新频率与版本说明

打开应用详情页，看最近一次更新是什么时候。一个健康的小众应用通常几个月内会有更新，至少会适配新系统版本。再看版本说明：如果每次只写“修复已知问题”“优化体验”，信息量有限；如果能看到具体修复内容、新增功能、适配机型，说明开发者在认真维护。

长期不更新不一定等于不能用，但要意识到风险：新系统升级后可能闪退、无法安装，或者安全漏洞不再修补。

权限申请范围

安装前查看权限列表。一个离线记事本不需要通讯录、定位和短信权限；一个手电筒应用不需要读取存储卡里的所有文件。权限与功能明显不匹配时，先怀疑，再决定是否安装。

安卓系统可以在安装后到系统设置里查看“权限使用记录”，iOS 可以在隐私报告中看到应用访问了哪些敏感数据。这些记录比安装时的权限列表更接近真实行为。

开发者的其他作品与可追溯性

点进开发者主页，看他还发布过什么。如果同一开发者有多款应用，且更新记录正常、评价内容具体，可信度会高一些。如果开发者名称是一串随机字符、没有任何官网或联系方式，就要谨慎。

可以搜索“应用名 + 开发者名”，看是否有独立官网、开源仓库或长期运营的社区账号。有官网不等于安全，但至少说明有人对产品负责。

隐私政策的可访问性

隐私政策不是摆设。重点看三件事：收集哪些数据、数据用在哪里、是否与第三方共享。如果应用声称“完全离线”却要求联网权限，或者隐私政策页面打不开、只有一段模板文字，这就是减分项。

对于工具类应用，理想情况是“不收集或最少收集”；对于联网类应用，至少要说明账号、设备信息和日志的用途。

下载渠道与安装包来源

优先从官方应用商店或开发者官网下载。第三方下载站、论坛附件、网盘分享的安装包，可能被重新打包，植入广告插件或恶意代码。如果只能从非官方渠道获取，至少核对包名、签名和文件哈希是否与官方一致——普通用户很难做到，所以更稳妥的做法是放弃。

不同类型应用，判断标准不一样

工具类应用如果要求“读取通讯录”，基本可以直接排除。内容类应用如果无法导出或备份自己的数据，换用成本会很高。联网类应用则要额外确认：是否支持两步验证、是否有账号注销入口、数据存储地区是否说明。

从发现到决定安装的检查顺序

1. 确认来源：只从官方商店或开发者官网获取，不用来路不明的安装包。
2. 看更新记录：最近一次更新是否在一年内，版本说明是否具体。
3. 看权限：权限是否与核心功能匹配，有没有明显多余的敏感权限。
4. 看开发者：是否有官网、其他作品、可联系的方式。
5. 看隐私政策：能否打开，是否说明收集范围和用途。
6. 看评价内容：跳过总分，读最近的低分评价，看问题是偶发还是长期未修。
7. 小范围试用：先不登录、不授权敏感权限，用几天再决定是否长期保留。

这套顺序不保证挑到“最好”的应用，但能过滤掉大部分明显不值得装的应用。评分可以作为参考，但把它放在最后一步，而不是第一步。

最后提醒

小众应用的价值在于解决具体问题，而不是替代主流产品。安装前多花两分钟看更新、权限和隐私政策，比事后卸载和清理数据更省事。遇到要求关闭系统安全设置、安装证书或输入账号密码才能用的应用，先停下来，查清楚再说。

JavaScript是一种广泛用于网页开发的编程语言，主要功能是让网页具备动态交互能力。简单来说，HTML负责网页的内容和结构，CSS负责外观样式，而JavaScript则负责行为逻辑，比如响应用户点击、验证表单输入、动态更新页面内容或与服务器交换数据。它运行在用户的浏览器中，因此无需安装额外软件，现代浏览器都内置了JavaScript引擎。

JavaScript的核心机制是“事件驱动”和“基于对象”。事件驱动意味着代码通常是在特定事件发生时执行，例如用户点击按钮、页面加载完成或键盘按下。基于对象则指它使用对象来组织数据和方法，但与传统面向对象语言（如Java）不同，它采用的是基于原型的继承方式，这使语法更灵活。一个典型场景是：用户在注册表单中输入邮箱，JavaScript可以在不刷新页面的情况下即时检查格式是否正确，并显示提示信息，这比提交到服务器再返回结果要快得多。

JavaScript最初由网景公司于1995年开发，仅用于浏览器端，但如今其应用范围已远超网页。通过Node.js这一运行时环境，JavaScript也能在服务器上运行，用于构建后端服务。此外，它还被用于开发桌面应用（如Electron框架）、移动应用（如React Native）以及游戏开发。需要注意的是，JavaScript与Java是两种完全不同的语言，二者在语法、设计理念和应用场景上几乎没有关联，只是名称相似。

要理解JavaScript的边界，可以与其他技术对比：它不同于HTML和CSS，后两者是标记和样式语言，不具备逻辑运算能力；它也不同于Java或C++这类编译型语言，JavaScript通常由浏览器逐行解释执行，调试和发布流程更轻量。对于初学者，JavaScript是进入前端开发的首选语言，因为只需一个文本编辑器和浏览器即可开始编写和测试代码。