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

前端开发基础：HTML、CSS 与 JavaScript 实战入门

前端开发核心涉及 HTML 结构、CSS 样式与 JavaScript 交互。内容覆盖标签语义化、布局控制、DOM 操作及事件处理机制。通过表格表单实战与猜数字游戏案例，演示随机数生成、条件判断与页面动态更新流程。旨在帮助开发者掌握基础语法，理解前后端分离前的静态页面构建逻辑。

beaabea发布于 2026/3/28更新于 2026/7/3041 浏览
前端开发基础：HTML、CSS 与 JavaScript 实战入门

前端开发基础：HTML、CSS 与 JavaScript

前端开发主要围绕三大核心技术展开：HTML 构建结构，CSS 负责样式，JavaScript 处理交互。下面将逐一梳理核心概念与常用语法。

HTML：页面骨架

HTML（Hyper Text Markup Language）是超文本标记语言，通过标签定义网页内容。浏览器解析这些标签来渲染页面。

基本概念与结构

标签通常成对出现，如 <h1> 开始，</h1> 结束。部分标签为自闭合，如 <br>。文档结构遵循 DOM 树层级关系。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
</head>
<body>
    hello world
</body>
</html>

编写时推荐使用 VS Code 等现代编辑器，利用快捷键快速生成框架。注意保存文件后缀为 .html。

常用标签

段落与换行 <p> 标签用于段落，会自动换行并增加间距；<br> 为单标签，仅强制换行无额外间距。

<p>这是一个段落</p>
<br/>
这是一个换行

图片与链接 图片使用 <img>，需指定 src 路径和 alt 备用文本。支持绝对路径或相对路径（如 ../image.jpg）。链接使用 <a>，href 指向目标， 可在新窗口打开。

目录

  1. 前端开发基础：HTML、CSS 与 JavaScript
  2. HTML：页面骨架
  3. 基本概念与结构
  4. 常用标签
  5. CSS：页面皮肤
  6. 引入方式
  7. 选择器
  8. 常用属性
  9. JavaScript：页面灵魂
  10. 基础语法
  11. 对象与数组
  12. jQuery 简化操作
  13. 实战案例：猜数字游戏
  • 免费图片AI生成工具免费生成了解详情
target="_blank"
<img src="../xingye.jpg" alt="人物" width="500px" style="border: 2px solid black;">
<a href="https://www.baidu.com/" target="_blank">百度</a>

表格与表单 表格由 <table>、<tr>、<td> 组成，支持 rowspan（跨行）和 colspan（跨列）。表单用于收集用户数据，<input> 的 type 属性决定输入类型（text, password, radio 等）。单选框必须共用相同的 name 值才能生效。

<form action="test.html">
    账号：<input type="text" name="user" id="u1"><br>
    密码：<input type="password" name="pwd" id="p1"><br>
    性别：<input type="radio" name="sex" value="male">男 
          <input type="radio" name="sex" value="female">女<br>
    <input type="submit" value="提交">
</form>

CSS：页面皮肤

CSS（Cascading Style Sheets）层叠样式表用于控制页面外观，实现结构与表现分离。

引入方式

  1. 内部样式：在 <head> 中使用 <style> 标签。
  2. 外部样式：通过 <link> 引入独立 .css 文件，便于复用。
  3. 行内样式：直接在标签中写 style 属性，优先级高但不推荐维护。
<style>
p { color: red; }
div { color: blue; }
</style>

选择器

  • 标签选择器：直接选中元素，如 div {}。
  • 类选择器：.class-name {}，灵活且可复用。
  • ID 选择器：#id-name {}，唯一标识。
  • 复合选择器：如 ul li a 表示子孙后代，li > a 表示直接子元素。

常用属性

  • 边框 (border)：可设置宽度、样式（solid, dashed）、颜色。简写顺序为 宽 样式 颜色。
  • 宽高 (width/height)：仅块级元素（如 div, p）有效，行内元素需改为 display: block。
  • 内外边距：padding 控制内容与边框距离，margin 控制元素间距离。支持四方向简写（上右下左）。
.box {
    border: 1px solid red;
    padding: 10px;
    margin: 20px auto;
}

JavaScript：页面灵魂

JS 是一门脚本语言，负责处理用户交互和动态逻辑。它与 Java 名字相似但无直接关系。

基础语法

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

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

运算符方面，== 会进行类型转换，=== 严格比较值和类型。

对象与数组

数组可存储混合类型，支持增删查改操作，如 push、splice。对象由键值对组成，可通过 . 或 [] 访问属性。

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

var student = { name: '张三', age: 18 };
console.log(student.name);

jQuery 简化操作

jQuery 封装了原生 JS 的 DOM 操作，使代码更简洁。使用前需引入库文件。

<script src="jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
    $('#btn').click(function() {
        $(this).hide();
    });
});
</script>

常用方法包括：

  • 内容操作：html() 获取/设置 HTML，text() 获取/设置文本，val() 处理表单值。
  • 属性操作：attr() 获取或修改属性。
  • DOM 操作：append() 追加，remove() 移除元素。

实战案例：猜数字游戏

结合上述知识，我们可以实现一个简单的猜数字游戏。逻辑包括生成随机数、获取输入、判断大小及重置状态。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>猜数字</title>
    <script src="jquery-3.7.1.min.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>

运行此代码，点击按钮即可体验交互效果。注意确保 jQuery 库文件路径正确，否则无法加载。

''
'#count'
text
0
'#result'
text
''
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 免费图片视频在线生成30秒，将你的创意变成现实开始设计
  • X/Twitter免费视频下载器免登陆无限额度免费视频解析下载了解详情
  • 100+免费在线小游戏爽一把
极客日志微信公众号二维码

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

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

更多推荐文章

查看全部
  • C++ 关联式容器：map 与 set 详解
  • Naiz AI：全链路视频本地化与数字孪生技术解析
  • Linux 网络编程：使用 C++ 实现基于 JSON 和 HTTP 的 Web 计算器服务器
  • Flash 存储磨损均衡算法详解
  • 数据结构基础：顺序表的原理与实现
  • JavaScript WebAPI 核心实战：DOM 与 BOM 操作详解
  • 二叉树深度优先遍历实战：计算布尔值与路径数字和
  • C++ 从入门到精通：完整实战指南
  • Windows 系统下 vLLM 安装与配置实战
  • 前端异常捕获与统一格式化：从 console.log 到服务端上报
  • 量子计算驱动 Python 医疗诊断：变分量子分类器实战
  • 2026 年主流 AI 生成 PPT 工具横评：6 款实测与选择指南
  • 在 NVIDIA DGX Spark部署 Stable Diffusion 3.5 并使用ComfyUI
  • 转行网络安全：学习路径与就业实战建议
  • 如何在 GitHub Copilot 中使用 MCP 服务
  • browser-use + web-ui 大模型实现自动操作浏览器
  • llama.cpp 大模型本地部署指南
  • 基于 SpringBoot2 与 Vue3 的旅游网站系统设计与实现
  • DeepSeek 系列模型版本演进与核心特性对比
  • 前缀和算法详解：高效解决区间求和问题

相关免费在线工具

  • 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