semantic-ui.com 有付费内容

JScience 是一个面向科学界的开源 Java 库，目标是把数学、物理、社会学、生物、天文、经济等学科整合进同一套架构，让不同领域的计算共用一套类型和单位体系。它适合需要在 Java 项目里处理物理量、单位换算、精确数值、矩阵运算或地理坐标的开发者；如果你的项目只是普通业务逻辑，引入它的收益有限。需要注意的是，官网显示 5.0 版本已开始迁移到 GitHub，API 文档尚未同步更新，旧环境则另有兼容 JRE 1.4 的 3.2.0 二进制版本。

核心模块与功能

JScience 以模块方式组织，官网列出的当前库模块覆盖以下方向：

• 单位与度量：实现 units-of-measurement.org 服务，为物理量提供带单位的类型。
• 坐标与地理信息：符合 OGC / ISO 规范的坐标模块，用于地理应用的开发和部署。
• 数学结构映射：把 Group、Ring、Field、VectorSpace 等数学结构严格映射为 Java 接口。
• 线性代数：包含参数化矩阵类，官网称其可求解元素类型任意的线性方程组，例如 Complex、ModuloInteger、RationalFunctions。
• 符号计算：functions 模块用于符号计算与分析。
• 数值类型：支持任意精度且精度有保证的实数，以及始终精确的有理数。
• 测量：支持精确或任意精度的测量，并且是强类型的。
• 物理模型：支持 Standard、Relativistic、High-Energy、Quantum、Natural 等物理模型。
• 货币：monetary 模块用于精度有保证的计算和货币换算。

这些模块可以组合使用：例如用单位模块定义量纲，用数值模块保证精度，再用矩阵模块求解方程组。

工程与运行时特性

除了学科功能，JScience 还强调在 Java 运行时层面的表现，官网给出的适用场景包括：

• 低层并发：自动利用多核处理器。官网基准测试称，在双处理器环境下其 Matrix 或矩阵乘法是纯 Java 库中最快的之一。
• 栈分配：减少垃圾回收、降低内存占用、提升可伸缩性。
• 实时行为与合规：可与 RTSJ 虚拟机安全配合使用，不会引发内存冲突或非法访问异常。
• 持久化与网络：官网称其 XML 编组/解组速度很快；Configurable 类提供类型安全的配置管理。
• OSGi 模块化：库由多个 OSGi 模块组成，例如 jscience-mathematics、jscience-physics。
• 附带 Javolution：JScience 二进制包包含面向 J2SE 1.5+ 的最新 Javolution 类。

配置参数在启动时从系统属性加载，这一点在部署时需要留意。

版本与获取方式

• 5.0 版本已开始迁移到 GitHub，但官网提示 API 文档尚未更新。
• 开发用 Maven 仓库在官网标注为 todo，说明当时尚未就绪。
• 官网另提供兼容 JRE 1.4 的二进制版本 3.2.0，适合无法升级运行时的旧项目。
• 官网还提到提供 webstart 在线服务用于科学计算和可视化。

怎么判断是否适合你

如果你的项目同时涉及多个学科的计算，JScience 的统一架构能减少重复造轮子；如果只用到其中一两个能力，也可以只引入对应模块，而不必整体采用。

Semantic UI 是一个前端开发框架，用来快速构建美观、响应式的网页布局。它的核心主张是把“词”和“类名”当作可互换的概念，让开发者用接近自然语言的 HTML 写界面。如果你正在选一个 UI 框架，并且希望类名可读性高、主题定制空间大，Semantic UI 值得纳入比较；如果你更在意极小的运行时体积或完全无样式的原子化写法，它可能不是首选。

它解决的是什么问题

传统 CSS 命名容易陷入两种困境：要么类名晦涩（如 .btn--primary--lg），要么结构混乱、难以维护。Semantic UI 的做法是让类名遵循自然语言的语法关系——名词与修饰语、词序、单复数——从而直观地表达组件之间的关系。官方把它类比为 BEM 或 SMACSS 的收益，但省去了那套繁琐的书写规则。

例如一个按钮组，类名直接读作“三个按钮”，而不是靠缩写和层级去猜。

核心特点

简洁的 HTML

类名使用自然语言语法，组件结构在 HTML 中一眼可读。你不需要额外记忆一套命名约定，写出来的标签本身就接近英文短语。

直观的 JavaScript

Semantic UI 用称为 behaviors（行为） 的简单短语触发交互功能。组件中的任意决策都可以作为 setting（设置项）由开发者修改。官方示例：

$('select.dropdown')
  .dropdown('set selected', ['meteor', 'ember'])
;

这里 dropdown 是组件，set selected 是行为短语，数组是传入的值。你不需要翻阅大量 API 文档去拼装调用链，行为名称本身就说明了它在做什么。

简化的调试

框架内置性能日志（performance logging），可以直接定位性能瓶颈，而不必翻查堆栈信息。官方给出的调试写法是在过渡动画中打开 debug：

$('.sequenced.images .image')
  .transition({
    debug     : true,
    animation : 'jiggle',
    duration  : 500,
    interval  : 200
  })
;

打开 debug 后，动画执行过程会被记录，便于观察哪一步耗时异常。

主题与变量

Semantic UI 提供 3000+ 主题变量和一套继承系统，允许对设计做较完整的定制。官方强调的思路是：UI 只开发一次，然后用同一份代码部署到各处。对于需要统一品牌风格、又不想重写组件样式的项目，这一点比较实用。

组件数量

官方页面列出 50+ UI 组件，覆盖常见的界面需求，按类别大致包括：

适用场景与选择条件

适合使用的情况：

• 团队希望 HTML 结构自解释，降低新人阅读成本
• 项目需要较深的主题定制，且不想从零搭建设计系统
• 需要现成的表单、下拉、模态、侧边栏等交互组件，并希望行为可通过设置项调整
• 想用一套代码适配多种布局与主题

需要谨慎的情况：

• 追求极致小的 CSS/JS 体积，或只用到极少数组件
• 团队已深度绑定其他组件库的生态与工具链
• 偏好原子化 CSS 的写法，而非语义化类名

如何开始

官方文档站提供 Getting Started、Introduction、Integrations、Build Tools、Recipes、Glossary、Usage、Theming、Layouts 等入口，组件文档按上述类别组织。建议的路径是：先读 Getting Started 和 Usage 了解引入方式，再从 Elements 和 Collections 里挑最常用的组件试写一个页面，最后进入 Theming 调整变量。

需要注意，页面资料未说明价格、授权或登录限制，实际使用前请以官方站点的最新说明为准。

HTML5 是 HTML 标准的第五次重大版本更新，也是当前网页标记的通用基础。它由 W3C 与 WHATWG 共同维护，核心目标是让网页在不依赖插件的情况下承载更丰富的结构、媒体和交互能力。如果你正在学前端、准备重写旧站点，或者只是想知道“HTML5 到底新在哪”，下面按能力、差异和上手路径说明。

HTML5 引入了哪些关键能力

HTML5 不是单一功能，而是一组围绕“文档结构 + 原生能力”的扩展。主要可以归为几类：

• 语义化标签：<header>、<nav>、<main>、<article>、<section>、<aside>、<footer> 等，让页面结构本身携带含义，而不是全靠 <div> 堆叠。
• 原生音视频：<audio>、<video> 让浏览器直接播放媒体，不再依赖 Flash 等第三方插件。
• 图形绘制：<canvas> 提供脚本绘图接口，<svg> 支持矢量图形，两者常用于图表、动画和可视化。
• 表单增强：新增 email、url、number、date、range 等输入类型，以及 required、pattern、placeholder 等属性，浏览器可做基础校验。
• 本地存储与离线：localStorage、sessionStorage 用于在客户端保存数据，Application Cache（后被 Service Worker 取代）曾用于离线访问。
• 其他 API 生态：地理位置、拖放、WebSocket、Web Workers 等，常与 HTML5 一起被提及。

HTML5 与 HTML4 / XHTML 的主要差异

差异不只在标签数量，更在文档写法和结构表达上。

一个直观例子：HTML4 时代常见写法是 <div id="header">、<div id="nav">；HTML5 直接写成 <header>、<nav>，结构含义对浏览器、搜索引擎和辅助技术都更清晰。

HTML5、CSS3 和 JavaScript 的分工

三者经常被一起讨论，但职责不同：

• HTML5：负责结构与内容，定义页面上有什么。
• CSS3：负责样式与布局，定义页面长什么样，例如圆角、渐变、媒体查询、Flexbox、Grid。
• JavaScript：负责行为与交互，定义页面能做什么，例如响应点击、请求数据、操作 Canvas。

所以“用 HTML5 做响应式”这种说法并不准确——响应式布局主要由 CSS3 的媒体查询实现，HTML5 提供的是语义结构基础。

常见误解

• HTML5 不是框架或模板：像 HTML5 UP 这类站点提供的是基于 HTML5/CSS3 的响应式站点模板，模板是成品，HTML5 是底层标准。
• HTML5 不等于响应式设计：响应式是 CSS 层面的适配策略，HTML5 只是让结构更适合被适配。
• HTML5 不是“新语言”：它仍是 HTML，只是版本演进，旧页面不会因为 HTML5 出现就失效。

上手建议

如果要从旧版迁移或开始新项目，可以按这个顺序推进：

1. 把文档头换成 <!DOCTYPE html> 和 <meta charset="utf-8">。
2. 用语义化标签替换主要 <div> 区块，先改 header、nav、main、footer。
3. 表单改用合适的 type 和 required、pattern，减少一部分 JavaScript 校验。
4. 需要媒体时优先用 <video>、<audio>，并准备多格式回退。
5. 需要绘图或动画时再引入 <canvas> 或 <svg>，不必一开始就全用上。

验证方法很直接：改完后用浏览器开发者工具检查 DOM 结构是否符合预期，再用不同尺寸窗口确认 CSS 媒体查询是否生效。常见卡点是旧浏览器兼容性和媒体格式支持，遇到时优先查目标浏览器的支持情况，而不是一次性堆砌所有新特性。

JavaScript 是一种运行在浏览器中的脚本语言，负责网页的交互与动态行为。HTML 决定页面有哪些内容，CSS 决定这些内容长什么样，JavaScript 决定用户操作后页面如何响应。如果你刚开始学前端，建议先掌握 HTML 和 CSS 基础，再学 JavaScript，否则容易在“页面为什么没反应”这类问题上卡住。

三者的分工

同一个按钮，HTML 写出它存在，CSS 让它变蓝变圆，JavaScript 让它被点击后弹出提示或提交数据。

一个最小可运行示例

把下面内容保存为 demo.html，用浏览器打开，点击按钮即可看到效果：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS 示例</title>
</head>
<body>
  <p id="msg">还没点击</p>
  <button id="btn">点我</button>

  <script>
    const btn = document.getElementById('btn');
    const msg = document.getElementById('msg');

    btn.addEventListener('click', function () {
      msg.textContent = '你点击了按钮';
    });
  </script>
</body>
</html>

输入是用户的一次点击，动作是 addEventListener 注册的回调函数，预期结果是页面上那段文字从“还没点击”变成“你点击了按钮”。如果没变化，先检查 <script> 是否写在按钮之后，或浏览器控制台（F12）是否报错。

JavaScript 和 Java 没有关系

名字相似只是历史营销原因。Java 是另一门独立的编程语言，两者语法、运行环境、用途都不同。看到“JavaScript”不要联想到 Java 的类库或虚拟机。

什么时候需要 JavaScript

• 页面内容要根据用户操作实时改变（展开菜单、切换标签页）
• 需要向服务器请求数据并局部刷新（不整页跳转）
• 需要表单校验、动画、计时器等动态逻辑

如果只是展示静态文字和图片，HTML + CSS 就够了，不必引入 JavaScript。

学习顺序建议

1. 先能用 HTML 写出结构完整的页面
2. 再用 CSS 控制布局和样式
3. 最后学 JavaScript，从“选中元素、监听事件、修改内容”这三件事入手

这样每学一步都能在浏览器里立刻验证，不会因为基础缺失而反复受挫。

在网页中引入JavaScript主要有三种方式：内联脚本、内部脚本和外部脚本。

1. 内联脚本（Inline Script）
   直接写在HTML标签的事件属性中，例如<button onclick="alert('你好')">点击</button>。这种方式适合极简单的交互，但代码混杂在HTML里，难以维护，不推荐在正式项目中使用。

2. 内部脚本（Internal Script）
   将JavaScript代码放在<script>标签内，并置于HTML文档的<head>或<body>中。例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例</title>
    <script>
        function greet() {
            alert('页面加载完成');
        }
    </script>
</head>
<body>
    ...
</body>
</html>

内部脚本适合单个页面使用、代码量不大的场景。需要注意：如果脚本放在<head>中且需要操作页面元素，应使用window.onload或DOMContentLoaded事件，确保元素已加载完成，否则可能找不到元素。

3. 外部脚本（External Script）
   将JavaScript代码保存为独立的.js文件，再通过<script src="文件路径"></script>引入。这是最推荐的方式，因为它将结构（HTML）、样式（CSS）和行为（JS）分离，便于复用和缓存。例如：

<script src="js/main.js"></script>

外部脚本的src属性可以使用相对路径（如./js/main.js）、绝对路径或完整的URL（如CDN链接）。浏览器会按顺序加载多个外部脚本，默认情况下是同步阻塞的——即遇到<script>标签时，页面会暂停渲染，先下载并执行脚本，再继续解析后续HTML。

放置位置的建议
传统上，脚本放在<head>中会导致页面白屏时间变长，因为脚本下载和执行会阻塞渲染。因此，对于不需要在页面解析前执行的脚本，通常放在<body>标签的末尾（</body>之前）。这样页面内容先显示，脚本最后加载，用户体验更好。

现代增强属性
如果外部脚本不需要等待DOM解析，可以在<script>标签上使用defer或async属性：

• defer：脚本会延迟到文档解析完成后再执行，多个defer脚本按出现顺序执行。
• async：脚本下载与HTML解析并行进行，下载完成后立即执行，不保证多个async脚本的执行顺序。

常见错误提醒

• 忘记写</script>结束标签会导致脚本解析错误。
• 外部脚本文件路径写错（如大小写、目录层级）时，浏览器控制台会报404错误，页面功能失效。
• 在<head>中直接操作<body>里的元素会得到null，因为元素尚未解析。

如何确认引入成功
打开浏览器开发者工具（F12），切换到“控制台”（Console）面板。如果脚本中有console.log输出，能看到对应信息；若脚本语法错误，控制台会显示红色报错及行号。也可以直接在控制台输入脚本中定义的函数名，若能调用则说明脚本已正确加载。