Jack个人博客 https://blog.hkmre.top/ zh-CN Your description here. Sun, 31 Aug 2025 21:22:00 +0800 Sun, 31 Aug 2025 21:22:00 +0800 JS 快速入门：从 HTML/CSS 到交互网页的基础指南 https://blog.hkmre.top/index.php/archives/13/ https://blog.hkmre.top/index.php/archives/13/ Sun, 31 Aug 2025 21:22:00 +0800 Jack c7b5eaa84aefddcf91a0f051102c296d.jpg

JS 快速学习入门：从 HTML/CSS 到交互网页的进阶指南

对于刚学完 HTML 和 CSS 的小伙伴来说，JS（JavaScript）是让网页 “动起来” 的关键 —— 它能实现表单验证、动态内容更新、交互效果等 HTML/CSS 无法完成的功能。这篇文章将带你跳过复杂概念，聚焦 “实用派” 入门：从环境搭建到语法核心，再到结合网页的实战案例，帮你快速掌握 JS 基础并上手开发。

一、先搞懂：JS 怎么和 HTML/CSS 配合？

在学语法前，先明确 JS 在网页中的 “位置” 和运行方式，这是衔接 HTML/CSS 的核心。

1. JS 的 3 种引入方式（直接用 HTML 写）

和 CSS 的内联、内嵌、外部引入类似，JS 也有 3 种嵌入网页的方式，新手建议从 “外部引入” 开始（便于维护）。

（1）内嵌式（写在 HTML 的<script>标签里）

直接在 HTML 文件中用<script>包裹 JS 代码，通常放在<body>末尾（确保 HTML 加载完再执行 JS）：

<!DOCTYPE html>

<html>

<body>

<h1 id="title">Hello HTML/CSS!\</h1>

<!-- JS放在body末尾 -->

<script>

   // 这里写JS代码：修改h1的内容

   document.getElementById("title").innerText = "Hello JS!";

</script>

</body>

</html>

（2）外部引入（推荐！写在单独的.js 文件里）

  1. 新建一个index.js文件（和 HTML 同目录）；
  2. 在 HTML 中用<script src="路径">引入：
<!-- HTML文件 -->

<body>

<h1 id="title">Hello HTML/CSS!\</h1>

<!-- 引入外部JS -->

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

</body>
//index.js文件

document.getElementById("title").innerText = "JS从外部来！";

（3）内联式（写在 HTML 标签的属性里，不推荐）

直接把 JS 写在onclick等属性中，仅适合简单场景：

<button onclick="alert('你点我了！')">点我试试\</button>

2. 调试工具：用浏览器控制台看效果

写 JS 时难免出错，浏览器的 “控制台” 是调试神器：

  1. 打开网页，按F12或右键 “检查”；
  2. 切换到 “Console”（控制台）面板：
  • 直接输入 JS 代码按回车，实时看结果；
  • 代码出错时，这里会显示错误原因和行数。

二、JS 语法核心：30 分钟掌握最常用基础

JS 语法和 HTML/CSS 不同，但核心基础很简单，重点记 “实用高频” 的内容即可。

1. 变量与数据类型：存储数据的 “容器”

变量是用来存储数据的，比如用户输入的内容、计算结果等。

（1）声明变量：3 个关键字

关键字特点推荐场景
let可修改、块级作用域（最常用）存储会变化的值（如计数器、用户输入）
const不可修改（常量）存储固定值（如网址、固定参数）
var全局作用域（旧语法，不推荐）尽量不用

示例：结合网页的变量使用

// 1. 存储固定的网页标题（用const）

const pageTitle = "我的第一个JS网页";

// 2. 存储用户输入的用户名（用let，因为会变化）

let username = document.getElementById("username").value;

// 3. 修改变量的值（let可以改，const不行）

username = "新用户名";

（2）5 种常用数据类型

不用死记，通过例子理解：

let num = 100;          // 数字（整数、小数都算）

let str = "Hello JS";   // 字符串（用单引号或双引号包裹）

let isShow = true;      // 布尔值（只有true/false两种）

let arr = [1, 2, 3];    // 数组（存储多个值）

let obj = {name: "张三", age: 20}; // 对象（存储键值对，如用户信息）

举一反三：用变量存储网页中的 “商品价格” 和 “商品列表”

// 商品价格（数字类型）

let price = 99.9;

// 商品列表（数组类型，每个元素是对象）

let goodsList = [

 {name: "T恤", price: 59},

 {name: "裤子", price: 89}

];

2. 运算符：做计算或判断

和数学中的运算符类似，重点记 “赋值”“比较”“逻辑” 三类。

（1）赋值运算符（给变量赋值）

let a = 10;

a += 5; // 等价于 a = a + 5 → 结果15

a *= 2; // 等价于 a = a * 2 → 结果30

（2）比较运算符（判断两个值的关系）

常用于 “条件判断”，返回true或false：

let x = 10;

console.log(x > 5);  // true

console.log(x === 10); // 全等（值和类型都一样，推荐用===不用==）

console.log(x != 8); // true

（3）逻辑运算符（组合多个判断）

运算符作用示例结果
&&与（两个都为 true 才 true）(x>5) && (x<15)true
\ \或（一个为 true 就 true）
!非（取反）!(x===10)false

3. 条件语句：让 JS “做选择”

根据不同条件执行不同代码，最常用if...else和switch。

（1）if...else（多条件判断）

示例：网页表单验证（判断用户名是否为空）

<!-- HTML：用户名输入框 -->

<input type="text" id="username" placeholder="请输入用户名">

<button onclick="checkUsername()">提交</button>
// JS：验证函数

function checkUsername() {

 let username = document.getElementById("username").value;

 if (username === "") { // 条件1：为空

   alert("用户名不能为空！");

 } else if (username.length < 3) { // 条件2：长度不够

   alert("用户名至少3个字符！");

 } else { // 都不满足（条件成立）

   alert("用户名合法！");

 }

}

（2）switch（固定值匹配）

示例：根据用户选择的 “颜色” 修改网页背景

<select id="colorSelect" onchange="changeBg()">

<option value="white">白色</option>

<option value="lightblue">蓝色</option>

<option value="lightgreen">绿色</option>

</select>
function changeBg() {

 let color = document.getElementById("colorSelect").value;

 switch (color) {

   case "white":

     document.body.style.backgroundColor = "white";

     break; // 必须加break，否则会继续执行下一个case

   case "lightblue":

     document.body.style.backgroundColor = "lightblue";

     break;

   case "lightgreen":

     document.body.style.backgroundColor = "lightgreen";

     break;

 }

}

举一反三：扩展表单验证，增加 “密码是否一致” 的判断

<input type="password" id="pwd1" placeholder="密码">

<input type="password" id="pwd2" placeholder="确认密码">

<button onclick="checkPwd()">验证密码</button>
function checkPwd() {

 let pwd1 = document.getElementById("pwd1").value;

 let pwd2 = document.getElementById("pwd2").value;

 if (pwd1 === "") {

   alert("请输入密码！");

 } else if (pwd1 !== pwd2) {

   alert("两次密码不一致！");

 } else {

   alert("密码一致！");

 }

}

4. 循环语句：重复执行代码

当需要 “批量处理”（如遍历数组、生成列表）时用循环，最常用for和for...of。

（1）for 循环（适合已知循环次数）

示例：根据数组生成网页列表

<!-- HTML：空列表 -->

<ul id="goodsList"></ul>
// JS：商品数组

let goods = ["T恤", "裤子", "鞋子", "帽子"];

// 获取列表元素

let list = document.getElementById("goodsList");

// for循环遍历数组

for (let i = 0; i < goods.length; i++) {

 // 每次循环添加一个li到列表

 list.innerHTML += `<li>${goods[i]}</li>`;

}
  • i是 “计数器”，从 0 开始；
  • i < goods.length：循环条件（只要 i 小于数组长度就继续）；
  • i++：每次循环后 i 加 1。

（2）for...of 循环（适合遍历数组 / 字符串，更简洁）

let goods = ["T恤", "裤子", "鞋子"];

for (let item of goods) {

&#x20; console.log(item); // 依次输出：T恤、裤子、鞋子

}

举一反三：用循环计算数组中 “商品总价”

let goodsPrice = [59, 89, 129, 39];

let total = 0;

for (let price of goodsPrice) {

 total += price; // 累加每个商品价格

}

console.log("总价：" + total); // 输出：316

三、JS 核心：函数与方法（重点！）

函数是 “可重复调用的代码块”，方法是 “对象中的函数”。掌握常用函数和方法，能大幅提升开发效率。

1. 自定义函数：把重复代码 “封装” 起来

当一段代码需要多次执行（如表单验证、样式修改）时，就把它封装成函数。

（1）函数的基本语法

// 定义函数

function 函数名(参数1, 参数2) {

 // 函数体（要执行的代码）

 return 返回值; // 可选：返回函数执行结果

}

// 调用函数

函数名(实参1, 实参2);

（2）示例：封装 “计算两个数之和” 的函数

// 定义函数：参数a和b，返回它们的和

function add(a, b) {

 return a + b;

}

// 调用函数：传入实参3和5，接收返回值

let result = add(3, 5);

console.log(result); // 输出8

// 结合网页：点击按钮计算总价

function calculateTotal(price, count) {

 return price * count;

}
<button onclick="alert('总价：' + calculateTotal(99, 2))">计算2件商品总价</button>

举一反三：封装 “修改元素样式” 的函数（可复用给多个元素）

// 定义函数：参数1=元素ID，参数2=样式对象

function setStyle(elementId, styles) {

 let elem = document.getElementById(elementId);

 // 遍历样式对象，批量设置样式

 for (let key in styles) {

   elem.style\[key] = styles\[key];

 }

}

// 调用函数：修改h1和p的样式

setStyle("title", {color: "red", fontSize: "24px"});

setStyle("content", {lineHeight: "1.8", color: "#333"});

2. 常用内置函数（JS 自带，直接用）

无需定义，直接调用的函数，重点记这 3 个：

函数作用示例
alert(内容)弹出提示框alert("操作成功！")
console.log(内容)在控制台输出（调试用）console.log("当前值：" + x)
prompt(提示语, 默认值)弹出输入框，返回用户输入的内容let age = prompt("请输入年龄", 18)

3. 常用对象方法（数组、字符串、DOM）

方法是 “对象。方法名 ()” 的形式，重点掌握数组、字符串和 DOM 操作的方法。

（1）数组方法（处理批量数据）

方法作用示例结果
push(元素)向数组末尾添加元素let arr = [1,2]; arr.push(3)[1,2,3]
filter(条件)筛选符合条件的元素arr.filter(item => item > 2)[3]
map(处理函数)对每个元素做处理，返回新数组arr.map(item => item * 2)[2,4,6]
join(分隔符)把数组转成字符串arr.join("-")"1-2-3"

示例：用数组方法筛选网页中的 “低价商品”

let goods = [

 {name: "T恤", price: 59},

 {name: "裤子", price: 89},

 {name: "袜子", price: 9}

];

// 筛选价格<30的商品

let cheapGoods = goods.filter(item => item.price < 30);

console.log(cheapGoods); // 输出：[{name: "袜子", price: 9}]

（2）字符串方法（处理文本）

方法作用示例结果
length获取字符串长度"hello".length5
includes(子串)判断是否包含子串"hello".includes("he")true
trim()去除首尾空格" js ".trim()"js"
replace(旧值, 新值)替换字符"hello".replace("h", "H")"Hello"

示例：处理用户输入的 “手机号”（去除空格）

let phone = document.getElementById("phone").value;

// 去除空格并判断长度是否为11

let cleanPhone = phone.trim();

if (cleanPhone.length !== 11) {

 alert("手机号格式错误！");

}

（3）DOM 操作方法（核心！控制 HTML 元素）

DOM（文档对象模型）是 JS 操作 HTML 的接口，重点记 “获取元素”“修改内容 / 样式”“绑定事件” 三类方法。

操作类型方法示例
获取元素getElementById(id)document.getElementById("title")（通过 ID 获取，最常用）
querySelector(选择器)document.querySelector(".box")（支持 CSS 选择器，如.class、#id）
修改内容innerText纯文本内容（elem.innerText = "新文本"）
innerHTML带 HTML 标签的内容（elem.innerHTML = "<b>加粗</b>"）
修改样式style.样式名elem.style.color = "red"（样式名用驼峰式，如 fontSize）
classList.add/remove操作 CSS 类（elem.classList.add("active")）
绑定事件addEventListener(事件名, 函数)动态绑定事件（比内联 onclick 更灵活）

综合示例：点击按钮切换网页主题（DOM + 函数 + 样式）

<!-- HTML -->

<button id="themeBtn">切换深色模式\</button>

<div class="content">这是网页内容\</div>

<!-- CSS -->

<style>

 .light { background: white; color: #333; }

 .dark { background: #333; color: white; }

</style>

<!-- JS -->

<script>

 // 1. 获取元素

 let btn = document.getElementById("themeBtn");

 let content = document.querySelector(".content");

 let isDark = false; // 标记当前是否为深色模式

 // 2. 绑定点击事件（用addEventListener）

 btn.addEventListener("click", function() {

   if (isDark) {

     // 切换浅色模式

     document.body.className = "light";

     btn.innerText = "切换深色模式";

     isDark = false;

   } else {

     // 切换深色模式

     document.body.className = "dark";

     btn.innerText = "切换浅色模式";

     isDark = true;

   }

 });

</script>

举一反三：扩展成 “点击按钮显示 / 隐藏密码”

<input type="password" id="pwd">

<button id="togglePwd">显示密码\</button>
let pwd = document.getElementById("pwd");

let btn = document.getElementById("togglePwd");

let isShow = false;

btn.addEventListener("click", function() {

 if (isShow) {

   pwd.type = "password"; // 隐藏密码

   btn.innerText = "显示密码";

   isShow = false;

 } else {

   pwd.type = "text"; // 显示密码

   btn.innerText = "隐藏密码";

   isShow = true;

 }

});

四、实战案例：用 JS 写一个简单的待办清单

结合前面的所有知识点，我们来写一个可 “添加”“删除” 待办的网页，巩固 JS 基础。

完整代码（HTML+CSS+JS）

<!DOCTYPE html>

<html>

<head>

<title>JS待办清单</title>

<style>

   .todo-container { width: 400px; margin: 20px auto; }

   #todoInput { width: 280px; padding: 8px; }

   #addBtn { padding: 8px 16px; background: #008cba; color: white; border: none; cursor: pointer; }

   .todo-item { display: flex; justify-content: space-between; margin: 8px 0; padding: 8px; border: 1px solid #eee; }

   .deleteBtn { color: red; border: none; background: none; cursor: pointer; }

</style>

</head>

<body>

<div class="todo-container">

<h2>待办清单</h2>

<input type="text" id="todoInput" placeholder="请输入待办事项">

<button id="addBtn">添加</button>

<div id="todoList"></div>

</div>

<script>

   // 1. 获取元素

   let input = document.getElementById("todoInput");

   let addBtn = document.getElementById("addBtn");

   let todoList = document.getElementById("todoList");

   // 2. 添加待办事项的函数

   function addTodo() {

     let text = input.value.trim(); // 去除空格

     if (text === "") { // 验证非空

       alert("请输入待办事项！");

       return; // 为空则不执行后续代码

     }

     // 创建待办项（用innerHTML添加HTML）

     todoList.innerHTML += `

       <div class="todo-item">

         <span>${text}</span>

         <button class="deleteBtn">删除</button>

       </div>

     `;

     // 清空输入框

     input.value = "";

     // 给新添加的删除按钮绑定事件（委托给父元素）

     bindDeleteEvent();

   }

   // 3. 删除待办事项的函数

   function bindDeleteEvent() {

     // 获取所有删除按钮

     let deleteBtns = document.querySelectorAll(".deleteBtn");

     // 遍历按钮，绑定点击事件

     for (let btn of deleteBtns) {

       btn.addEventListener("click", function() {

         // 删除当前按钮的父元素（todo-item）

         this.parentElement.remove();

       });

     }

   }

   // 4. 绑定添加按钮的点击事件

   addBtn.addEventListener("click", addTodo);

   // 支持按Enter键添加

   input.addEventListener("keydown", function(e) {

     if (e.key === "Enter") {

       addTodo();

     }

   });

 </script>

</body>

</html>

案例要点解析

  1. DOM 操作：用getElementById获取输入框和按钮，用innerHTML动态生成待办项；
  2. 函数封装：把 “添加”“删除” 功能分别封装成addTodo()和bindDeleteEvent()；
  3. 事件绑定：既用了addEventListener绑定点击 / 键盘事件，又处理了 “动态元素的事件委托”；
  4. 表单验证：用trim()去除空格，判断输入是否为空。

五、新手快速上手的 3 个建议

  1. “先抄后改”：先复制本文的示例代码，运行成功后再修改（如改文字、改样式、加条件），逐步理解逻辑；
  2. 聚焦 “网页交互”：不要纠结于纯 JS 语法题，多写 “点击按钮、修改内容、表单验证” 等网页场景的代码；
  3. 善用文档：遇到不懂的方法，查MDN 文档（最权威，有中文版本）。

通过本文的学习，你已经掌握了 JS 和 HTML/CSS 的配合方式、核心语法、常用函数 / 方法，以及实战案例的开发思路。接下来就动手修改案例，比如给待办清单加 “完成状态切换”，或者写一个简单的计算器 —— 多练多改，JS 入门其实很简单！

]]> 1 https://blog.hkmre.top/index.php/archives/13/#comments https://blog.hkmre.top/index.php/feed/ 网格布局两行代码css,完美适配任何屏幕 https://blog.hkmre.top/index.php/archives/9/ https://blog.hkmre.top/index.php/archives/9/ Wed, 06 Aug 2025 20:10:00 +0800 Jack 112858-172714853802c6.jpg

用 CSS Grid 快速实现自适应卡片布局：两行代码搞定响应式设计

在网页开发中，“一排展示多个卡片，且卡片能根据屏幕宽度自动调整数量与尺寸”是非常常见的需求。例如产品列表、图片画廊、内容卡片等场景，都需要这种灵活的自适应布局。

传统实现方式往往依赖复杂的 Flexbox 嵌套或大量媒体查询（Media Query），代码冗余且维护成本高。而使用 CSS Grid 布局，仅需给父容器添加两行核心 CSS，即可完美满足需求。

一、核心实现代码

以下是完整代码示例，核心逻辑集中在父元素的 grid 相关属性中：

/* 父容器：控制网格布局的核心 */
.grid-container {
  display: grid; /* 1. 启用 Grid 布局 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 2. 定义列规则 */
  gap: 16px; /* 可选：添加卡片间距，提升视觉效果 */
  padding: 16px; /* 可选：添加容器内边距，避免卡片贴边 */
}

/* 子元素：卡片样式 */
.grid-item {
  height: 200px; /* 固定卡片高度 */
  background-color: rgb(141, 141, 255); /* 卡片背景色 */
  border-radius: 10px; /* 圆角设计，优化视觉 */
  display: flex; /* 可选：方便内部内容居中 */
  align-items: center;
  justify-content: center;
  color: #fff; /* 可选：文字颜色 */
}

二、核心代码拆解：grid-template-columns

实现自适应的关键在于 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));，我们将其拆分为 3 个部分逐一理解：

1. 基础属性：grid-template-columns

  • 作用：定义网格容器的“列数”和“每列宽度”，是 Grid 布局控制列的核心属性。
  • 示例：若写 grid-template-columns: 200px 200px 200px;，则表示容器固定显示 3 列，每列宽 200px（非自适应）。

2. 重复规则：repeat(auto-fit, ...)

  • repeat()：是 CSS Grid 提供的“重复函数”，用于简化“重复相同列/行规则”的写法。语法为 repeat(重复次数, 重复的规则)。

  • auto-fit：是 repeat() 的第一个参数（重复次数），表示“自动计算列数”——根据容器宽度和列宽规则，能放下几列就放几列，空间不足时自动换行。

    • 屏幕宽 → 列数多（如桌面端显示 4 列）；
    • 屏幕窄 → 列数少（如移动端显示 1-2 列）。

3. 列宽规则：minmax(200px, 1fr)

  • minmax()：是“范围函数”，用于定义一个“最小值”和“最大值”，语法为 minmax(最小值, 最大值)。

  • 具体含义：

    • 最小值 200px：每列宽度最小不能小于 200px，当屏幕窄到无法容纳更多列时，触发自动换行（避免卡片被压缩变形）；
    • 最大值 1fr：1fr 是 Grid 中的“弹性单位”，代表“剩余空间的等分”。当屏幕宽度有剩余时，每列会自动拉伸，平分剩余空间，让整行卡片填满容器（避免出现空白）。

三、最终效果总结

将上述三部分结合，grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 的完整作用是：

网格容器会自动生成列，每列宽度“最小 200px、最大平分剩余空间”；屏幕变宽时自动增加列数，屏幕变窄时自动减少列数并换行，无需写任何媒体查询，即可实现全场景自适应。

这种写法不仅代码简洁，还能确保布局在任何屏幕尺寸下都保持美观，是实现卡片类自适应布局的“最优解”之一。

]]> 2 https://blog.hkmre.top/index.php/archives/9/#comments https://blog.hkmre.top/index.php/feed/