前端网页开发三剑客快速入门

本文介绍了前端网页开发的三大核心技术：HTML、CSS和JavaScript。HTML负责网页内容结构，CSS控制样式布局，JavaScript实现交互功能。文中包含大量代码示例，帮助初学者快速理解前端开发的核心概念和技术要点。适合零基础读者快速了解学习网页开发的基本原理和实践方法。

网页的本质是一个文本文件（通常以 .html 或 .htm 为扩展名），这个文件里写满了标签。浏览器读取这个文件，按照规则解析并渲染它包含文字、图片、链接、视频等多媒体信息，并且能通过超链接跳转到其他网页。

你可以把网页理解成一份"说明书"，告诉浏览器：这个位置是标题，那个位置是图片，这里有一个可以点击的链接。浏览器读取这个文件，按照规则解析并渲染成你看到的彩色页面。

【补充说明

****前端（Front-end）和后端（Back-end）****是构建现代网站或应用的两个核心部分。

简单来说：

前端（Front-end）和后端（Back-end）是构建现代网站或应用的两个核心部分。简单来说：

前端：在浏览器（或移动端）中运行，负责展示界面、处理用户操作、与后端通信。用户能直接看到、点击、交互的部分------网页的"门面"和"体验"。

后端：运行在远程服务器上，负责处理业务逻辑、存取数据、提供接口给前端调用。用户看不见，但支撑前端正常运行的部分------服务器的"大脑"和"数据仓库"。】

前端**网页开发"三剑客"**指的是三种最基础、最核心的技术，它们共同构成了网页的骨架、血肉和灵魂：

☆ HTML (超文本标记语言) -- 网页的"骨架"

负责定义网页的内容和结构。比如文字、图片、按钮、表格等元素应该放在什么位置。没有HTML，网页就是一块空白。

☆ CSS (层叠样式表) -- 网页的"皮肤和衣服"

负责控制网页的视觉样式和布局。比如颜色、字体、大小、间距、动画、响应式适配。没有CSS，网页会变得丑陋、杂乱，只有黑白的默认文字和链接。

☆ JavaScript -- 网页的"行为和交互"

负责让网页"动起来"和"响应操作"。比如点击按钮后显示弹窗、轮播图切换、表单验证、发送网络请求获取数据。没有JavaScript，网页只能静态展示，无法与用户产生动态交互。

【HTML一般需要CSS和JavaScript来配合使用，否则单一HTML文档的功能和展示效果都不理想；CSS一般是不能脱离HTML的；JavaScript可以脱离HTML和CSS而独立存在；JavaScript可以操作HTML和CSS。】

一句话总结：

HTML定义有什么内容，CSS决定长什么样，JavaScript控制能做什么事。

在实际开发中，这三者紧密配合。你可以把它们理解为建房子：

HTML：砌墙、搭梁、造房间结构。

CSS：刷漆、贴瓷砖、铺地板、做软装。

JavaScript：装开关、通电、让电梯能运行、让门能自动开关。

一、 HTML5基础入门

HTML5是构建网页内容的骨架标准。 HTML超文本标记语言（HyperText Markup Language），5 是版本号，HTML5不仅仅是HTML的简单升级，而是一套完整的Web应用技术栈。HTML 不是编程语言，它没有逻辑，只是一套"标记标签"，了解一些标签的用法，就能上手。

其核心优势在于：

语义化：通过明确的标签告诉浏览器"这是什么"（如页眉、导航），而非仅仅"长什么样"。

原生多媒体：通过<audio>和<video>标签播放音视频。

本地存储：提供localStorage和sessionStorage，让网页能记住用户数据。

绘图能力：<canvas>标签允许通过JavaScript绘制图形和动画。

HTML5文档的基本骨架 （基本结构）

html 复制代码

<!DOCTYPE html>
<!-- 声明语言为中文，便于搜索引擎和浏览器识别 -->
<html lang="zh-CN"> 
<head>
    <!-- 字符编码声明，必须放在<head>的最顶部 -->
    <meta charset="UTF-8">
    <!-- 兼容性设置，适配移动端 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>
<body>
    <!-- 这里是页面的可见内容 -->
</body>
</html>

其中

注释：。注释是给程序员看的"备注"，方便自己或他人看懂功能作用。

<!DOCTYPE html>：告诉浏览器"我是一个HTML5网页"，固定写法，放在最开头。

<html>：根标签，整个网页的所有内容，都要放在这个标签里面，相当于"房子的外墙"。

<head>：网页的"头部"，这里面的内容不会显示在网页页面上，主要用来设置网页的一些基础信息。

<title>：设置浏览器标签上显示的标题（比如打开百度，浏览器标签显示"百度一下，你就知道"）。

<body>：网页的"身体"，我们能在网页上看到的所有内容（文字、图片、链接等），都要写在这个标签里面。

开发工具：

电脑自带的工具就足够：

1.打开电脑自带的"记事本"（Windows系统）；

2.在记事本里写代码，写完后，点击"文件"→"保存"，文件名后缀一定要改成 .html（比如：myfirstpage.html），保存类型选择"所有文件"。

如何保存为HTML网页文件，参见下图：

3.保存完成后，双击这个.html文件，就能用浏览器（Chrome、Edge等）打开，直接看到自己写的网页效果！

a.双击HTML文件名，它将会使用默认的网页浏览器打开。

或

b.右击网页文件（.html文件）名，使用快捷菜单打开，具体操作参见下图：

什么是"标签"？

HTML的所有内容，都是由"标签"组成的，标签的格式有两种形式（成对与不成对）：

成对标签由开始标签和结束标签组成，中间包裹内容。

格式：<标签名> 内容 </标签名>

举例：

段落标签：<p>这是一段文字。</p>

标题标签：<h1>一级标题</h1>

容器标签：<div>这里可以放其他标签或文本</div>

加粗标签：<strong>重要文字</strong>

不成对标签（空标签 / 自闭合标签）

只有一个标签，不需要包裹内容，一般用于插入一个独立的元素（如换行、图片、表单控件等）。

格式：<标签名> 或 <标签名 />。举例：

换行标签：<br> 或 <br />

水平线标签：<hr> 或 <hr />

图片标签：<img src="photo.jpg" alt="照片"> 或 <img src="photo.jpg" alt="照片" />

输入框标签：<input type="text" name="username"> 或 <input type="text" name="username" />

标签名不区分大小写。也就是说，它们可以用大写，小写或混合形式书写，然而，习惯上与实践上都推荐将标签名全部小写。

HTML5 规范，推荐简洁写法 <br> <hr> <img>，结尾 / 非必需。

在 HTML 中标签（tag）用来创建一个元素(element)。在任何情况下，如果没有提及属性（attributes），那么将使用默认值。

HTML标签可以带有一些属性（attribute），属性一般都出现在HTML标签中，HTML属性是HTML标签的一部分。属性由属性名（attribute name）和随后的属性值（attribute value）组成。属性名与标签名一样，不区分大小写，建议小写。属性值W3C建议使用引号。双引号是最常用的，也可以使用单引号。

几个最常用标签

|----------------|------------|------------------|
| 标签 | 含义 | 打个比方 |
| <div> | 区块容器 | 一个房间，可以装很多东西 |
| <p> | 段落 | 一段独立的文字 |
| <h1>~<h6> | 标题 | 标题从大到小，h1最大，h6最小 |
| <a> | 链接 | 门牌号，点击能跳到别处 |
| <img> | 图片 | 墙上挂的一幅画 |
| <span> | 行内文本 | 一句话里的某个词 |
| <ul><li> | 列表 | 清单，每一项前面有个圆点 |

几个常用的属性：

|-------|-------------|------------------------------|
| 属性 | 作用 | 举例 |
| id | 身份证号，整个页面唯一 | <div id="header"> |
| class | 分类标签，可以重复 | <div class="article"> |
| href | 链接地址 | <a href="https://xxx.com"> |
| src | 图片/视频源 | <img src="photo.jpg"> |

关于HTML更多情况，可见：

HTML的元素、标签和属性 https://blog.csdn.net/cnds123/article/details/125745562

HTML标签简明通俗教程 https://blog.csdn.net/cnds123/article/details/141128123

MDN Web 文档 HTML（超文本标记语言）https://developer.mozilla.org/zh-CN/docs/Web/HTML

二、 CSS基础入门

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言。

不用CSS，你也可以做出网页，但不易生动丰富多彩；学了CSS，你才能做出现代网页的设计与体验需求。

一段CSS代码可以给多个HTML标签使用，不用重复写样式，极大节省代码量。

CSS核心语法规则 ：

/* CSS 核心语法格式：选择器 { 属性名: 属性值; 属性名: 属性值; } */

选择器 {

样式属性1: 属性值1;

样式属性2: 属性值2;

}

其中：

选择器：告诉浏览器"要给谁加样式"（比如给所有<p>标签、给某个按钮）；

大括号 {}：把所有样式包起来，是样式的"容器"，必须成对出现（缺一不可，少了会报错）；

样式属性：告诉浏览器"要加什么样式"（比如改颜色用color、改大小用font-size）；

属性值：告诉浏览器"样式改成什么样"（比如颜色改成红色red、大小改成20px）；

核心细节：属性和值之间必须加 : 冒号分隔；每一组「属性:值」写完后，必须加; 分号结尾（最后一个可以省略，但新手建议都加上，养成好习惯）；CSS对空格、换行、缩进不敏感，缩进只是为了代码整齐，不影响样式生效。

例如：

/* 给所有p标签加样式：文字红色、字体大小16px */

p {

color: red;

font-size: 16px;

}

HTML页面中引入CSS的方式（3种）：

以下是三种在 HTML 页面中引入 CSS 的方式，均以"将所有 p 标签的文字设为红色、字体大小 16px"为例。

方式一：内联样式（行内样式）

直接在 HTML 元素的 style 属性中编写 CSS。

特点：仅作用于当前元素，优先级最高，但不利于维护和复用。

示例：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>内联样式示例</title>
</head>
<body>
    <p style="color: red; font-size: 16px;">这个段落是红色，16像素。</p>
    <p style="color: red; font-size: 16px;">另一个段落也是同样样式。</p>
    <!-- 每个p标签都需要重复写style属性 -->
</body>
</html>

方式二：内部样式表（<style> 标签）

在 HTML 文档的 <head> 内使用 <style> 标签集中书写 CSS。

特点：样式仅对当前页面生效，适合单页面或学习测试。

示例：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>内部样式表示例</title>
    <style>
        /* 给所有p标签加样式：文字红色、字体大小16px */
        p {
            color: red;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>第一个段落，自动红色16px。</p>
    <p>第二个段落，同样样式。</p>
    <div>这个div不受影响。</div>
</body>
</html>

方式三：外部样式表（链接 .css 文件）

将 CSS 写在独立的 .css 文件中（CSS 文件扩展名为 .css），然后在 HTML 中用 <link> 标签引入。

特点：可在多个页面共享，便于维护，是实际开发的主流方式。

示例：

步骤1：创建 CSS 文件（例如 style.css）

html 复制代码

/* style.css */
p {
    color: red;
    font-size: 16px;
}

步骤2：在 HTML 中引入该 CSS 文件

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>外部样式表示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>这个段落的样式来自外部 style.css 文件。</p>
    <p>另一个段落也是红色16px。</p>
</body>
</html>

提示，推荐做法：开发生产环境优先使用外部样式表；快速原型或单页测试可用内部样式表；内联样式仅用于极个别动态覆盖或临时调试。

CSS核心知识点：选择器

选择器是CSS的"灵魂"------ 它的作用是"精准找到HTML中的目标元素"，只有找到元素，才能给它设置样式。新手先掌握以下几种核心选择器，后续再逐步扩展。

元素选择器（标签选择器）------ 最基础，使用率最高

直接使用HTML标签名作为选择器，选中页面中所有该标签的元素，统一设置样式。

语法：标签名 { 样式属性: 属性值; }

顺便指出，CSS注释以 /* 开始，以 */ 结束。这两个标记之间的任何内容都会被浏览器忽略，不会被解释为CSS代码。

例如：

/* 选中所有h1标签，设置样式 */

h1 {

color: red;

font-size: 26px;

}

/* 选中所有p标签，设置样式 */

p {

color: #666;

font-size: 15px;

}

以下是包含此 CSS 样式的完整 HTML 演示文件。你可以直接复制代码保存为 .html 文件，然后在浏览器中打开查看效果：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS样式演示：h1 与 p 标签</title>
    <style>
        /* 选中所有h1标签，设置样式 */
        h1 {
            color: red;
            font-size: 26px;
        }

        /* 选中所有p标签，设置样式 */
        p {
            color: #666;
            font-size: 15px;
        }
    </style>
</head>
<body>
    <h1>这是第一个一级标题</h1>
    <p>这是第一个段落。文字颜色为 #666，字体大小为 15px。</p>

    <h1>第二个一级标题也是红色、26px</h1>
    <p>第二个段落同样拥有统一的样式：灰色文字，15像素大小。</p>
</body>
</html>

类选择器（class选择器）------ 最常用，最灵活

自定义一个"类名"，给需要设置样式的HTML元素添加这个类名，然后通过类选择器选中这些元素，设置样式。同一个类名可以给多个不同的标签使用，实现样式复用。

语法：.类名 { 样式属性: 属性值; }

注意以点（.）开头

代码示例：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>类选择器示例</title>
    <style>
        /* 自定义类名：highlight，选中所有带有这个类名的元素 */
        .highlight {
            color: red;
            background-color: #fff3cd; /* 浅黄色背景 */
            padding: 5px 10px;
        }
    </style>
</head>
<body>
    <h1 class="highlight">我是带高亮的标题</h1>
    <p class="highlight">我是带高亮的段落</p>
</body>
</html>

ID选择器 ------ 唯一标识，一次只能选中一个元素

自定义一个"ID名"，给页面中唯一的一个元素添加这个ID名，然后通过ID选择器选中该元素，设置样式。ID名在整个页面中必须唯一，不能重复。

语法：#ID名 { 样式属性: 属性值; }

代码示例：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ID选择器示例</title>
    <style>
        /* ID选择器：选中 id="main-title" 的元素 */
        #main-title {
            color: #2c3e50;
            font-size: 28px;
            text-align: center;
            border-bottom: 2px solid #3498db;
            padding-bottom: 8px;
        }

        /* ID选择器：选中 id="special-paragraph" 的元素 */
        #special-paragraph {
            background-color: #fef9e4;
            color: #e67e22;
            font-size: 18px;
            padding: 12px;
            border-left: 5px solid #e67e22;
            border-radius: 8px;
        }

        /* 普通p标签的样式，不会覆盖ID选择器（ID优先级更高） */
        p {
            color: #555;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1 id="main-title">这是唯一的标题</h1>
    <p>这是一个普通段落，颜色为 #555，字体大小 16px。</p>
    <p id="special-paragraph">这个段落拥有唯一 ID "special-paragraph"，所以背景和文字颜色都不同。</p>
    <p>另一个普通段落，仍然适用普通 p 标签样式。</p>
    <!-- 注意：不能再写第二个 id="special-paragraph" 或其他重复ID -->
</body>
</html>

其中：

#main-title 样式只作用于 <h1 id="main-title">。

#special-paragraph 样式只作用于带有该 ID 的 <p>，且它的样式会覆盖普通 p 选择器设定的 color 和 font-size。

如果你尝试把同一个 ID 用在两个元素上，例如 getElementById，后续 JavaScript 使用 getElementById 时只会获取到第一个匹配的元素，这可能导致逻辑错误或非预期的行为。

MDN Web 文档 CSS：层叠样式表 https://developer.mozilla.org/zh-CN/docs/Web/CSS

三、JavaScript（JS）基础入门

JavaScript（简称JS），是一门弱类型脚本语言，核心作用是给网页"添加交互、实现动态效果"。JavaScript 遵循 ECMAScript（ES）规范，常见版本：ES5（2009）、ES6/ES2015（重大更新）、ES2022+（每年更新）。

JS的运行环境

JS不需要安装复杂的软件，最基础的运行环境就是"浏览器"（Chrome、Edge、Firefox等都可以）。浏览器内置了JS引擎（比如Chrome的V8引擎），专门用来解析和执行JS代码，我们写的JS代码，只要放在HTML里，用浏览器打开就能运行。这意味着JavaScript代码可以在任何能运行这些浏览器的设备上执行，包括Windows，macOS， Linux，Android， iOS等系统。

JS也可以在服务器端运行（比如Node.js），但初学者，可先聚焦"浏览器端JS"。

【Node.js，它让JavaScript可以在服务器端（后端）运行。Node.js提供了大量的API，使得JavaScript可以用来处理文件系统操作，网络请求，操作数据库等。所谓Node.js，简单的说 Node.js 就是运行在服务端的 JavaScript的环境平台。】

学习JavaScript的实验环境环境：

☆ 浏览器控制台：浏览器（例如 Google Chrome、Mozilla Firefox、Microsoft Edge 等）本身提供了直接运行 JavaScript 代码的控制台。一般电脑系统中都会带有浏览器。打开浏览器按下 F12打开开发者工具。转到 "Console" 选项卡，可以直接输入和执行 JavaScript 代码。

打开一个浏览器，建议在地址栏中输入about:blank，按下Enter键（回车键），就可以看到一个空白页面------这样创建一个干净、无干扰的环境来进行 JavaScript 开发或测试，再按下F12键，就打开了浏览器的控制台（console），现在你就可以学习JavaScript了。以Microsoft Edge为例：

进入控制台以后，就可以在提示符后输入代码，然后按回车（Enter键），代码就会执行。如果按Shift + Enter键，就是代码换行，不会触发执行，可以输入多行语句，直至回车执行。

顺便提示：在浏览器控制台中，点击控制台右上角的 "清除控制台" 按钮，或者按下快捷键Ctrl+L，或者使用 console.clear() 方法的作用，是快速清空控制台，以便查看最新的日志信息或进行新的测试。清除控制台不会影响代码的执行或应用程序的状态，它只是清除了显示的输出。

☆创建HTML文件试验与测试JavaScript代码

可以使用记事本（Notepad，Windows系统）编写JavaScript代码。通过在文本编辑器创建一个HTML文件，将JavaScript代码放在<script>标签中。

HTML页面中引入JavaScript（JS）的方式（3种）：

共有3种引入方式，优先级：行内式（onclick）最高 → 内嵌式 → 外链式最低，重点掌握"内嵌式"（练习用）和"外链式"（开发用）。

行内式（不推荐，了解即可）

直接把JS代码写在HTML标签的事件属性（on开头）或a标签的href中，特点是JS和HTML强耦合，代码杂乱，维护困难，只适合极简单的测试。

示例：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JS两种触发方式演示</title>
</head>
<body>
    <!-- 非a标签：点击事件onclick，点击触发JS -->
    <div onclick="alert('点击触发行内JS')" >
        点击我（div）
    </div>

    <!-- a标签：href中写javascript:开头的代码 -->
    <a href="javascript:console.log('a标签触发JS')" >
        点我打印内容（a标签）
    </a>

    <p>提示：按 F12键打开浏览器的"开发者工具" → Console（控制台）可以看到第二段 <code>console.log</code> 的输出。</p>
</body>
</html>

内嵌式（推荐练习使用）

在HTML页面中，用<script>标签包裹JS代码，可写在<head>或<body>中，特点是JS和HTML部分分离，适合写少量测试代码或页面专属的简单逻辑。

示例：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内嵌式JS</title>
</head>
<body>
    <!-- 内嵌式JS：script标签包裹代码 -->
    <script>
        // 这里写JS代码，浏览器会自动执行
        alert('我是内嵌式的JS代码，弹出提示');
        console.log('在浏览器控制台显示，用于调试、测试');
    </script>
</body>
</html>

外链式（开发推荐，必用）

创建独立的.js后缀的JS文件，通过<script>标签的src属性引入，这是开发中的标准写法，特点是JS、HTML、CSS完全分离，代码结构清晰，可复用性极高------一个JS文件可以被多个HTML页面引入，便于维护。

示例：

步骤1，新建一个文件，后缀名为.js（比如script.js），在文件中写JS代码；

html 复制代码

// script.js
console.log('Hello from external JS');

步骤2，在HTML页面中，用<script src="JS文件路径"></script>引入。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>外链式JS</title>
</head>
<body>
<!-- 引入外部JS文件，src属性写文件路径 -->
    <script src="./script.js">
</body>
</html>

注意：要确保在<script>标签的src属性中指定的路径是正确的，如果路径错误，浏览器将无法加载JavaScript文件，导致网页的功能不正常。

1）路径可以是相对路径或绝对路径。

相对路径是相对于当前网页文件的路径，可以使用相对于当前文件的目录的路径表示。例如，如果 JavaScript 文件与网页文件位于同一目录下，可以使用相对路径来引用它：

如果 JavaScript 文件位于当前文件的上一级目录中，可以使用相对路径来引用它：

绝对路径是指完整的路径，从根目录开始，可以直接指向 JavaScript 文件的位置。例如，如果 JavaScript 文件位于网站的根目录下的 js 文件夹中，可以使用绝对路径来引用它：

绝对路径通常以斜杠 / 开头，表示从网站的根目录开始的路径。相对路径根据当前文件的位置而定，不以斜杠开头。

选择相对路径还是绝对路径取决于你的需求和项目结构。相对路径更具灵活性，适用于项目内部文件之间的引用。绝对路径在引用外部文件或跨子域名加载文件时更为方便。请根据你的具体情况选择适当的路径类型。

2）要附加多个.js脚本文件，请使用多个标签。

JavaScript文件的加载和执行顺序对网页的功能有重要影响。如果一个脚本依赖于另一个脚本中定义的变量或函数，则必须正确地安排它们的加载顺序。

例如：

3）script标签的最佳放置位置

<body>

</body>

为什么要放在 body 末尾？

a）避免阻塞 DOM 渲染

浏览器解析 HTML 是自上而下的。遇到 <script> 标签（没有 async/defer）时，会暂停 HTML 解析，立即下载并执行脚本。

如果把脚本放在 <head> 中，在脚本下载/执行完成前，页面的 <body> 内容不会被渲染，导致用户看到长时间的白屏。

b）确保 DOM 元素已存在

放在 body 末尾时，执行脚本时所有 DOM 元素都已经解析完毕，可以直接通过 document.getElementById 等操作它们，无需等待 DOMContentLoaded 事件。

c）提升用户体验

页面内容尽快显示给用户，脚本在后台加载执行，不会阻塞首屏渲染。

d）特殊情况：放在 <head> 中

如果你必须把脚本放在 <head> 中（例如某些统计代码、配置脚本），可以使用 defer 或 async 属性来避免阻塞。

JavaScript（JS）编程常识

1）JS注释

注释是对代码的解释说明，浏览器会忽略所有注释内容，不执行。作用是方便自己、他人后续理解代码。

JS有两种注释方式：

a. 单行注释（最常用）

用//开头，注释一行内容。例如：

// 这是单行注释，注释一行内容

// 声明一个变量num，值为10

var num = 10;

console.log(num); // 注释：打印（显示）变量num的值

b. 多行注释

用/* 开头，*/ 结尾，注释多行内容。例如

这是多行注释

可以注释多行内容

比如：下面这段代码的作用是

声明两个变量，分别存储姓名和年龄

var name = "李四";

var age = 18;

注意：多行注释不能嵌套，一旦出现*/，就会结束注释，后续内容会被当作代码执行。

2）命名规则 & 规范

命名规则（硬性要求）

不能使用JS关键字/保留字（比如var、if、for、name等）；

只能由字母（a-zA-Z）、数字（0-9）、下划线（_）、美元符号（$）组成；

不能以数字开头（比如1age会报错，age1是正确的）；

JS严格区分大小写：age和Age是两个完全不同的变量。

命名规范（软性要求，推荐遵守）

见名知意：看到变量名就知道存的是什么（比如存年龄用age，存姓名用userName，不建议用a、b、c这种无意义的变量名）；

驼峰命名法：多个单词组成时，第一个单词小写，后面每个单词首字母大写（比如userName、userAge、studentScore）；

3）变量声明

let name = '小明'; // 可变的变量

const PI = 3.14; // 常量，不可重新赋值

不推荐使用 var

var、let、const的区别

|----------|----------------------|---------------------------|---------------------------|
| | var | let | const |
| 作用域 | 函数作用域 | 块级作用域 {} | 块级作用域 {} |
| 变量提升 | 会提升，初始值为 undefined | 会提升，但未初始化 （暂时性死区） | 会提升，但未初始化 （暂时性死区） |
| 重复声明 | 同一作用域内允许 | 不允许 | 不允许 |
| 是否可重新赋值 | 可以 | 可以 | 不可以（常量） |
| 必须初始化 | 可以不赋初值（值为 undefined） | 可以不赋初值（值为 undefined） | 必须在声明时赋值 |
| 全局声明时的属性 | 会成为 window 对象的属性 | 不会成为 window 的属性 | 不会成为 window 的属性 |

4）数据类型

let str = 'Hello'; // 字符串

let num = 42; // 数字（整数和浮点数统一）

let bool = true; // 布尔值

let nothing = null; // 空值

let notDefined; // undefined

let obj = { name: 'JS', age: 26 }; // 对象

let arr = [1, 2, 3]; // 数组

5）运算符

let a = 10, b = 3;

console.log(a + b); // 13

console.log(a - b); // 7

console.log(a * b); // 30

console.log(a / b); // 3.333...

console.log(a % b); // 1（取余）

// 比较

console.log(5 == '5'); // true（只比较值，不比较类型）

console.log(5 === '5'); // false（全等，比较值和类型）

6）流程控制

条件判断：

let score = 85;

if (score >= 90) {

console.log('优秀');

} else if (score >= 60) {

console.log('及格');

} else {

console.log('不及格');

}

循环：

// for 循环

for (let i = 0; i < 5; i++) {

console.log(i);

}

// while 循环

let count = 0;

while (count < 3) {

console.log('计数：' + count);

count++;

}

7）函数

普通函数

function greet(name) {

return '你好，' + name;

}

let message = greet('小明');

console.log(message); // 你好，小明

箭头函数

const add = (a, b) => a + b;

console.log(add(3, 5)); // 8

// 如果有多条语句，需要花括号和 return

const multiply = (a, b) => {

let result = a * b;

return result;

};

7）操作 DOM（改变网页内容）

DOM 就是 HTML 元素的结构化表示，JS 可以修改它。

常用 DOM 方法：

document.getElementById(id) -- 通过 ID 获取一个元素

document.querySelector(选择器) -- 更灵活，类似 CSS 选择器（例：'.my-class'、'#my-id'）

element.innerHTML = '新内容' -- 修改内部 HTML

element.style.属性名 = '值' -- 修改 CSS（注意属性名驼峰：backgroundColor）

例如：

document.getElementById('changeBtn').onclick = function() {

// 找到 <p> 元素，改变它的内容

document.getElementById('demo').innerHTML = '内容已被 JS 修改！';

// 也可以改变样式

document.getElementById('demo').style.color = 'red';

};

</script>

8）事件处理

事件是用户操作（点击、键盘、鼠标移动等）触发的动作。

常用事件：

onclick -- 单击

onmouseenter / onmouseleave -- 鼠标移入/移出

onkeyup -- 键盘按键弹起

onload -- 页面或元素加载完成

例如：

// 点击事件

document.getElementById('btn').onclick = function() {

let inputVal = document.getElementById('input1').value;

document.getElementById('output').innerHTML = '你输入了：' + inputVal;

};

// 鼠标移入事件

document.getElementById('btn').onmouseenter = function() {

this.style.backgroundColor = 'lightblue';

};

// 鼠标移出

document.getElementById('btn').onmouseleave = function() {

this.style.backgroundColor = '';

};

</script>

关于JavaScript更多情况，可见：

JavaScript青少年简明教程目录 https://blog.csdn.net/cnds123/article/details/140971227

MDN Web 文档 JavaScript https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

前端网页开发三剑客快速入门