delaware.us.mensa.org

在网页中引入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输出，能看到对应信息；若脚本语法错误，控制台会显示红色报错及行号。也可以直接在控制台输入脚本中定义的函数名，若能调用则说明脚本已正确加载。

PHTML Encoder（原名 PHP Encoder）是 RS Software Lab 推出的 PHP 脚本保护工具，用途是在分发 PHP 代码之前把源码编码，让脚本逻辑照常运行但源码不可读。它适合需要把 PHP 项目交付给客户、部署到他人服务器，又不希望源码被直接查看或复制的场景；如果你的代码只在自控服务器上运行、没有分发需求，这类工具通常不是必需品。

它解决的是什么问题

PHP 是解释型语言，源码以明文形式部署，任何能接触服务器文件的人都可以直接阅读逻辑。PHTML Encoder 的做法是在分发前对脚本做编码处理：

• 脚本代码逻辑保持不变，功能不受影响
• 使用密码学手段隐藏逻辑，使源码无法被直接阅读
• 支持自解码脚本，不需要修改目标服务器的 PHP 安装
• 加密脚本与未加密脚本可以混在同一个站点上，对访问者透明

也就是说，访问者看到的是正常运行的页面，而拿到文件的人看到的是编码后的内容。

机器锁定：把脚本绑到指定服务器

除了隐藏源码，PHTML Encoder 还支持把编码后的脚本锁定到预定义的机器（Web 服务器）上，通过机器 ID 实现，脚本只在该机器上工作。这一机制适合按服务器授权交付项目的场景，例如把系统部署到客户指定的生产服务器后，复制到其他机器无法直接运行。

需要注意的适用条件：机器锁定意味着服务器迁移、更换硬件或重建环境时，可能需要重新生成编码脚本，部署前应把这一点纳入运维计划。

跨平台与使用方式

根据官方说明，PHTML Encoder 是跨平台产品，可在所有支持 PHP 的计算机和服务器平台上工作。当前发行版包含以下平台的版本：

工具本身包含控制台和 GUI 两个版本的转换器，用于脚本的加密与解密；支持通配符，可以一次性转换整个项目，而不是逐个文件处理。

使用前需要评估的三件事

1. 兼容性：确认目标服务器的 PHP 版本和运行环境在支持范围内，尤其是使用自解码脚本时。
2. 性能开销：编码脚本在运行时需要解码，可能带来额外开销，建议在接近生产环境的配置下实测。
3. 授权与分发限制：机器锁定会限制脚本的可移植性，若项目后续可能迁移服务器，需要提前规划重新编码的流程。

它不适合什么情况

• 代码不需要对外分发，只在自有服务器运行——直接做好服务器权限管理即可。
• 需要频繁迁移部署环境——机器锁定会增加每次迁移的操作成本。
• 期望绝对不可破解——编码提高的是阅读和复制门槛，不等于无法被逆向。

如果你面对的是“把 PHP 项目交给客户但不想交出源码”这类需求，PHTML Encoder 的编码加机器锁定组合正好对应；如果只是日常自用部署，可以先评估是否真的需要引入这一层。

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

JavaScript和Java是两种完全不同的编程语言，名字相似但几乎没有技术关联。Java是一种编译型、面向对象的通用语言，通常运行在服务器、桌面或Android设备上；JavaScript是一种解释型脚本语言，主要运行在浏览器中，用来实现网页的交互效果。两者在语法、运行环境、类型系统和用途上都有本质区别。

从语法上看，Java要求严格的类型声明，例如 int number = 5;，变量类型在编译时确定；JavaScript则采用动态类型，写 let number = 5; 即可，同一个变量之后还可以赋值为字符串。Java的代码需要先编译成字节码，再由Java虚拟机（JVM）运行；JavaScript的代码由浏览器内置的引擎直接解释执行，不需要提前编译。因此，Java适合构建大型企业级后端系统，而JavaScript是前端网页开发的核心语言。

运行环境是另一个关键差异。Java程序通过JVM实现跨平台，只要安装了Java运行环境，同一份编译后的代码可以在Windows、Linux、macOS上运行；JavaScript则依赖宿主环境，在浏览器中运行时可操作网页文档和响应用户操作，在Node.js环境中则可用于编写服务器端程序。这意味着JavaScript的应用范围已经从浏览器扩展到了后端，但它的核心定位仍是事件驱动和异步处理。

类型系统和面向对象方式也不同。Java是强类型语言，编译期就会检查类型错误；JavaScript是弱类型语言，类型转换更灵活，也更容易在运行时出现意外结果。Java的面向对象基于类（class），必须先定义类再创建对象；JavaScript早期基于原型链，ES6之后引入了class语法糖，但底层仍是原型继承。例如，Java中写 class Dog extends Animal，JavaScript中写 class Dog extends Animal 虽然看起来相似，但继承机制完全不同。

用途上的选择通常取决于项目场景。如果你需要开发Android原生应用、大型分布式系统或高性能后端服务，Java是成熟的选择；如果你要制作网页动态效果、构建单页应用或使用Node.js开发轻量级后端，JavaScript更直接。两者也可以配合使用，例如后端用Java提供接口，前端用JavaScript调用这些接口并渲染页面。学习时不要因为名字相近就混为一谈，掌握其中一种后再学另一种会容易很多，但必须清楚它们各自的设计理念和适用边界。