跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
HTML / CSS大前端

前端基础入门：HTML、CSS 与 JavaScript 核心概览

前端基础涵盖 HTML 结构、CSS 样式与 JavaScript 交互。HTML 通过标签构建页面骨架，包含常用标签、表格及表单组件；CSS 负责美化，涉及引入方式、选择器机制及盒模型布局；JavaScript 实现动态逻辑，掌握数据类型、函数、对象及 jQuery 简化操作。通过猜数字案例串联知识点，演示如何结合三者完成基础交互功能，适合初学者建立完整的前端认知框架。

刀狂发布于 2026/3/15更新于 2026/6/816 浏览
前端基础入门：HTML、CSS 与 JavaScript 核心概览

前端基础入门

前端开发主要由 HTML、CSS 和 JavaScript 三大支柱构成。HTML 负责页面结构，CSS 控制样式表现，JavaScript 则赋予页面交互行为。下面我们来梳理一下这三者的核心知识点。

HTML 基础

HTML（Hyper Text Markup Language）是超文本标记语言，通过标签来控制内容的展示。标签通常成对出现，如 <h1> 和 </h1>，中间包裹内容。部分标签是自闭合的，例如 <br> 或 <img>。

常用标签

段落与换行 <p> 标签用于定义段落，浏览器会自动处理首尾间距。如果需要紧凑换行，使用 <br> 标签。注意，HTML 中的空格在渲染时会被忽略，换行必须依靠标签。

<p>这是一个段落。</p>
<p>这是另一个段落。</p>
直接换行<br/>继续显示

图片与链接 图片使用 <img> 标签，src 指定路径，alt 提供替代文本。路径可以是绝对路径（如本地磁盘路径），也可以是相对路径（相对于当前文件）。链接使用 <a> 标签，href 指向目标地址，target="_blank" 可在新窗口打开。

<img src="../xingye.jpg" alt="人物图片">
<a href="https://www.baidu.com/" target="_blank">百度</a>

表格与表单 表格由 <table>、<tr>（行）、<td>（单元格）组成。可以通过 border、cellpadding 等属性调整外观。合并单元格可使用 rowspan（跨行）和 colspan（跨列）。

表单用于收集用户输入，核心是 <form> 和 <input>。单选框 (radio) 必须共享相同的 name 属性才能互斥；复选框 (checkbox) 同理。提交按钮用 type="submit"，普通按钮用 type="button"。

< = = =>
  姓名年龄
  张三18



  账号：
  密码：

目录

  1. 前端基础入门
  2. HTML 基础
  3. 常用标签
  4. CSS 样式
  5. 引入方式
  6. 选择器
  7. 盒模型与布局
  8. JavaScript 基础
  9. 语法与类型
  10. 对象与函数
  11. jQuery 简介
  12. 实战案例：猜数字游戏
  • 💰 8折买阿里云服务器限时8折了解详情
table
border
"1"
cellpadding
"0"
cellspacing
"0"
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
<form action="test.html">
<input type="text" name="user">
<br>
<input type="password" name="pwd">
<br>
<input type="submit" value="登录">
</form>

CSS 样式

CSS（Cascading Style Sheet）层叠样式表用于美化页面，实现结构与表现的分离。

引入方式

  1. 内部样式：在 <head> 中使用 <style> 标签。
  2. 外部样式：通过 <link> 引入独立的 .css 文件，推荐用于多页面复用。
  3. 行内样式：直接在标签上使用 style 属性，优先级最高但不利于维护。

选择器

  • 标签选择器：选中所有指定标签，如 p { color: red; }。
  • 类选择器：以 . 开头，灵活应用于多个元素，如 .red { color: red; }。
  • ID 选择器：以 # 开头，唯一标识一个元素，如 #header { font-size: 20px; }。
  • 复合选择器：如 ul li a 表示 ul 下的 li 下的 a 标签。

盒模型与布局

理解盒模型是关键：内容区 + padding（内边距）+ border（边框）+ margin（外边距）。

  • 宽高设置：只有块级元素（如 div, p）可以设置宽高，行内元素（如 span, a）默认不行，可通过 display: block 转换。
  • 边框：border: width style color，支持简写，如 1px solid red。
  • 内外边距：padding 控制内容与边框距离，margin 控制元素间距离。支持简写顺序：上右下左。
.box {
  width: 500px;
  height: 100px;
  border: 1px solid black;
  padding: 10px;
  margin: 20px;
}

JavaScript 基础

JavaScript (JS) 是一种脚本语言，负责网页的动态交互。虽然名字里带 Java，但两者并无关系。

语法与类型

JS 是动态弱类型语言，变量可用 var、let 或 const 声明。数据类型包括字符串、数字、布尔值、对象等。typeof 可用于检测类型。

var name = 'zhangsan';
console.log(typeof name); // string
name = 12;
console.log(typeof name); // number

比较运算符中，== 会进行类型转换，=== 严格比较值和类型，推荐使用 ===。

对象与函数

数组和对象是 JS 的核心数据结构。数组支持增删改查，对象通过键值对存储数据。

// 数组
var arr = [1, 2, 'hello'];
arr.push(3); // 添加
arr.splice(1, 1); // 删除

// 对象
var student = { name: '李四', age: 20 };
console.log(student.name);

函数用于封装逻辑，支持参数传递和返回值。JS 中参数匹配较灵活，参数不足为 undefined，多余会被忽略。

jQuery 简介

jQuery 是对原生 JS 的封装，简化了 DOM 操作和事件处理。核心是 $() 函数，用于选择元素并执行操作。

$(document).ready(function() {
  $('button').click(function() {
    $(this).hide();
  });
});

常用方法包括：

  • 内容操作：.html(), .text(), .val()
  • 属性操作：.attr(), .css()
  • DOM 操作：.append(), .remove(), .empty()

实战案例：猜数字游戏

结合上述知识，我们可以快速构建一个简单的猜数字游戏。核心逻辑是生成随机数，获取用户输入，比较大小并反馈结果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>猜数字</title>
  <script src="jquery-3.7.1.js"></script>
</head>
<body>
  <div style="width: 500px; margin: 0 auto;">
    <button id="reset">重新开始</button><br>
    请输入要猜的数字：<input type="number" id="inputNum"><br>
    <button id="guess">猜</button><br>
    已猜次数：<span id="count">0</span><br>
    结果：<span id="result"></span>
  </div>

  <script>
    let randNum = Math.floor(Math.random() * 100) + 1;
    let count = 0;

    $('#guess').click(function() {
      count++;
      $('#count').text(count);
      let inputNum = parseInt($('#inputNum').val());

      if (inputNum < randNum) {
        $('#result').text('猜小了').css('color', 'red');
      } else if (inputNum > randNum) {
        $('#result').text('猜大了').css('color', 'red');
      } else {
        $('#result').text('猜对了！').css('color', 'green');
      }
    });

    $('#reset').click(function() {
      count = 0;
      randNum = Math.floor(Math.random() * 100) + 1;
      $('#inputNum').val('');
      $().();
      $().();
    });
  </script>
</body>
</html>

这个案例展示了如何通过事件监听获取用户行为，并通过 DOM 操作实时更新界面状态。在实际开发中，建议将逻辑与视图分离，并使用更现代的 ES6+ 语法替代 jQuery。

'#count'
text
0
'#result'
text
''
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

微信扫一扫，关注极客日志

微信公众号「极客日志V2」，在微信中扫描左侧二维码关注。展示文案：极客日志V2 zeeklog

更多推荐文章

查看全部
  • Spring Bean 作用域、生命周期与自动装配源码解析
  • Kohya's GUI 教程：Stable Diffusion 模型训练与 LoRA 创建
  • RoboBrain2.0 具身大脑模型复现：统一感知、推理和规划能力
  • 在线 OJ 系统 Java Spring 竞赛管理功能实现
  • Anaconda 2024 版安装与配置指南
  • 基于 SFT 微调 Llama2 实现自我认知
  • 程序员面试中常见的 3 种求职陷阱与应对指南
  • 选择排序算法详解：直接、树形与堆排序图解
  • CANN 生态 cann-dataset：AIGC 大模型全链路数据管理方案
  • ComfyUI-Manager 插件管理与环境配置实战
  • OpenClaw 深度解析：从个人 AI 助理到开源智能体平台
  • Jetson 部署 OpenClaw 接入飞书机器人实现本地 AI 助手
  • 使用 Ward 监控服务器状态并配置 cpolar 远程访问
  • 15 个提示词技巧降低 AIGC 检测率，提升文本自然度
  • 本地运行 Google 开源 AI 大模型 Gemma 完整教程
  • C++ STL set/map 模拟实现
  • VSCode Cline 配置使用 GPT-5.4 和 Copilot 模型
  • 腾讯云服务器部署 OpenClaw 对接飞书实战
  • CCF 大模型论坛北京会议：大模型技术进展与挑战探讨
  • 图数据结构详解：存储结构、遍历与核心算法

相关免费在线工具

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online

  • Markdown转HTML

    将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online

  • HTML转Markdown

    将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online

  • JSON 压缩

    通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online

  • JSON美化和格式化

    将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online