【重生之我在双体——HTML+CSS+JS核心实战】

fy1222

856人浏览 · 2026-04-26 12:25:07

fy1222 · 2026-04-26 12:25:07 发布

前端基础入门

本周系统学习了前端三大核心基础：HTML（页面结构）、CSS（页面样式）、JavaScript（页面交互），从 HTML 表单组件、DIV/SPAN 布局，到 CSS 选择器、盒子模型、定位，再到 JS DOM 操作与事件处理，全部是前端入门的必备知识。本篇博客会深度拆解每一个知识点，搭配成品网页中的实战代码片段，由浅入深讲解，最后用完整可运行的网页串联所有内容，新手零基础也能轻松学会！

一、HTML 基础：搭建网页的骨架

HTML 全称超文本标记语言，是网页的结构基石，只负责定义页面的内容、布局、表单，不负责美观和交互。我们最终做的个人信息表单，就是用 HTML 一步步搭建的。

1.1 HTML 标准文档结构

所有网页都必须遵循固定格式，这是浏览器识别页面的基础，我们的成品表单也使用了这套结构：

html

预览

<!DOCTYPE html>  <!-- 声明文档类型，告诉浏览器这是HTML5页面 -->
<html lang="zh-CN">  <!-- 页面根标签，语言为中文 -->
<head>  <!-- 头部：存放配置信息，用户看不见 -->
    <meta charset="UTF-8">  <!-- 字符编码，防止中文乱码 -->
    <title>综合实战：个人信息表单</title>  <!-- 网页标题 -->
</head>
<body>  <!-- 身体：用户能看到的所有内容都写在这里 -->
    <!-- 表单、按钮、文字全部放在body中 -->
</body>
</html>

1.2 核心布局标签：div + span

这是前端最常用的无意义容器标签，专门用来划分页面区域、包裹内容，我们的成品表单全程使用这两个标签：

<div>：块级元素，独占一行，默认宽度铺满父元素，用于搭建大布局（表单容器、表单分组）✨ 成品实战：<div class="form-box"> 表单整体容器、<div class="form-item"> 表单每一行分组
<span>：行内元素，不换行，用于修饰局部文字✨ 成品实战：<span>支持JPG/PNG</span> 提示文件上传格式

1.3 常用基础标签

除了布局标签，这些文本 / 媒体标签也是必备：

<h1~h6>：标题标签，数字越小字号越大
<p>：段落标签，用于展示长文本
<a href="链接" target="_blank">：超链接，_blank 表示新窗口打开
<img src="图片路径">：图片标签

1.4 HTML 表单核心组件（重点）

表单是用户和网页交互的核心，用于收集用户信息，我们的成品表单包含了所有高频表单组件：

表格

标签 / 类型	作用	核心属性	成品实战代码片段
`<input type="text">`	单行文本输入	`placeholder` 提示文字	`<input type="text" placeholder="请输入用户名">`
`<input type="password">`	密码掩码输入	输入内容自动隐藏	`<input type="password">`
`<input type="radio">`	单选框	`name` 相同互斥，`checked` 默认选中	`<input type="radio" name="gender" checked>男`
`<input type="checkbox">`	多选框	`name` 相同为一组	`<input type="checkbox" name="hobby"> 读书`
`<input type="file">`	文件上传	上传图片 / 文档	`<input type="file" id="avatar">`
`<select>`	下拉菜单	内嵌 `<option>` 选项	`<select id="dept"><option>技术部</option></select>`
`<textarea>`	多行文本输入	`rows` 行数，`cols` 列数	`<textarea rows="4" cols="30"></textarea>`

1.5 表单完整拆解（成品核心结构）

这是我们实战页面的 HTML 表单部分，包含所有知识点：

html

预览

<!-- div 布局容器 -->
<div class="form-box">
    <h2 id="main-title">个人信息收集表</h2>
    <!-- 表单标签 -->
    <form id="userForm">
        <div class="form-item">用户名：<input type="text"></div>
        <div class="form-item">密码：<input type="password"></div>
        <div class="form-item">性别：<input type="radio" name="gender">男</div>
        <div class="form-item">爱好：<input type="checkbox">读书</div>
        <div class="form-item">部门：<select><option>技术部</option></select></div>
        <div class="form-item">简介：<textarea rows="4"></textarea></div>
        <div class="form-item">头像：<input type="file"><span>支持JPG/PNG</span></div>
        <button type="button" id="submitBtn">提交表单</button>
    </form>
</div>

二、CSS 基础：美化网页的妆容

CSS 全称层叠样式表，专门给 HTML 化妆，负责页面的颜色、尺寸、布局、定位。我们的表单美观效果，全部由 CSS 实现。

2.1 CSS 三种引入方式

表格

方式	写法	优缺点	适用场景
行内样式	`<div style="color:red">`	优先级最高，代码混乱	禁止使用
内部样式	`<head>` 中写 `<style>`	单页面专用，直观	我们的实战页面使用
外部样式	`<link rel="stylesheet" href="style.css">`	结构样式分离，企业标准	正式项目

✨ 成品实战：我们使用内部样式，代码写在 <head> 的 <style> 标签中。

2.2 三大基础选择器

选择器是 CSS 找到 HTML 元素的工具，成品页面全覆盖这三种选择器：

标签选择器：直接写标签名，批量修改所有同类标签

css

/* 成品实战：所有input标签统一设置间距 */
input { margin: 5px 0; }

类选择器：.类名，可重复使用，最常用

css

/* 成品实战：表单容器样式 */
.form-box { width: 500px; margin: 50px auto; }

ID 选择器：#id名，唯一元素，精准控制

css

/* 成品实战：标题居中变色 */
#main-title { text-align: center; color: #333; }

2.3 盒子模型（核心布局原理）

所有 HTML 元素都是一个矩形盒子，包含 4 部分，是前端布局的核心：

content：内容（文字 / 表单）
padding：内边距（内容和边框的距离）
border：边框
margin：外边距（盒子和其他元素的距离）

✨ 成品实战（表单容器盒子模型拆解）：

css

.form-box {
    width: 500px;        /* 内容宽度 */
    padding: 30px;       /* 内边距 */
    border: 1px solid #ddd; /* 边框 */
    margin: 50px auto;   /* 外边距：上下50px，左右居中 */
    background: white;
    border-radius: 8px;
}

2.4 元素显示模式：display

控制元素是否换行、能否设置宽高：

block：块级，独占一行（div、p）
inline：行内，不换行，不能设宽高（span、a）
inline-block：行内块，不换行 + 可设宽高（多列布局神器）

✨ 成品实战：

css

.form-item {
    margin: 15px 0;
    display: inline-block; /* 行内块，保证表单整齐排列 */
    width: 100%;
}

2.5 position 定位（悬浮 / 固定效果）

让元素脱离正常排版，实现悬浮、固定、吸附效果：

fixed：固定定位，相对于浏览器窗口，滚动页面不移动
relative：相对定位，作为绝对定位的父容器
absolute：绝对定位，相对于父元素定位
sticky：粘性定位，吸附顶部

✨ 成品实战（右下角返回顶部按钮）：

css

.fixed-btn {
    position: fixed; /* 固定定位 */
    bottom: 50px;    /* 距离底部50px */
    right: 50px;     /* 距离右侧50px */
    padding: 10px 20px;
    background: #409eff;
    color: white;
}

三、JavaScript 基础：让网页动起来

JS 是脚本语言，让静态页面拥有交互能力，点击按钮、返回顶部、弹窗提示都靠它实现。

3.1 JS 核心作用

DOM 操作：获取 / 修改 HTML 元素的内容、样式
事件绑定：响应用户操作（点击、输入、滚动）
定时器：延时 / 循环执行代码

3.2 DOM 操作（三步法）

DOM 是浏览器把 HTML 转换成的可操作对象，成品页面全程使用：

获取元素：document.getElementById('id')
绑定事件：addEventListener('事件类型', 函数)
操作元素：修改样式 / 内容 / 行为

3.3 高频交互拆解（成品实战）

① 表单提交按钮交互

javascript

运行

// 1. 获取提交按钮元素
const submitBtn = document.getElementById('submitBtn');
// 2. 绑定点击事件
submitBtn.addEventListener('click', function () {
    alert('表单提交成功！'); // 弹出提示框
});

② 固定按钮返回顶部

javascript

运行

// 1. 获取返回顶部按钮
const backTop = document.getElementById('backTop');
// 2. 点击返回页面顶部
backTop.addEventListener('click', function () {
    window.scrollTo(0, 0);
});

③ 定时器：延时提示

javascript

运行

// 页面加载1秒后，在控制台打印提示
setTimeout(function () {
    console.log('页面加载完成，欢迎使用表单！');
}, 1000);

3.4 常用事件总结

click：点击事件
input：输入事件
scroll：滚动事件
load：页面加载完成事件

四、综合实战：完整成品网页（整合所有知识点）

下面是可直接运行的个人信息表单网页，包含本周所有 HTML+CSS+JS 知识点，复制保存为 .html 文件即可打开使用！

html

预览

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>综合实战：个人信息表单</title>
    <style>
        /* 全局样式重置 */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: "微软雅黑"; background-color: #f5f5f5; padding: 20px; }

        /* 类选择器：表单容器 盒子模型 */
        .form-box {
            width: 500px;
            margin: 50px auto;
            padding: 30px;
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
        }

        /* ID选择器：标题 */
        #main-title {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }

        /* 行内块元素：表单分组 */
        .form-item {
            margin: 15px 0;
            display: inline-block;
            width: 100%;
        }

        /* 固定定位：返回顶部按钮 */
        .fixed-btn {
            position: fixed;
            bottom: 50px;
            right: 50px;
            padding: 10px 20px;
            background: #409eff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        span { color: #666; margin-left: 5px; }
    </style>
</head>
<body>
    <!-- div布局容器 -->
    <div class="form-box">
        <h2 id="main-title">个人信息收集表</h2>

        <!-- HTML表单 所有核心组件 -->
        <form id="userForm">
            <div class="form-item">
                用户名：<input type="text" id="username" placeholder="请输入用户名">
            </div>

            <div class="form-item">
                密码：<input type="password" id="pwd">
            </div>

            <div class="form-item">
                性别：
                <input type="radio" name="gender" value="男" checked>男
                <input type="radio" name="gender" value="女">女
            </div>

            <div class="form-item">
                爱好：
                <input type="checkbox" name="hobby"> 读书
                <input type="checkbox" name="hobby"> 运动
                <input type="checkbox" name="hobby"> 编程
            </div>

            <div class="form-item">
                意向部门：
                <select id="dept">
                    <option value="技术部">技术部</option>
                    <option value="运营部">运营部</option>
                    <option value="产品部">产品部</option>
                </select>
            </div>

            <div class="form-item">
                个人简介：<br>
                <textarea id="intro" rows="4" cols="30" placeholder="请输入个人简介"></textarea>
            </div>

            <div class="form-item">
                上传头像：<input type="file" id="avatar">
                <span>支持JPG/PNG</span>
            </div>

            <button type="button" id="submitBtn">提交表单</button>
        </form>
    </div>

    <!-- 固定定位悬浮按钮 -->
    <button class="fixed-btn" id="backTop">返回顶部</button>

    <script>
        // 获取元素
        const submitBtn = document.getElementById('submitBtn');
        const backTop = document.getElementById('backTop');

        // 表单提交交互
        submitBtn.addEventListener('click', function () {
            alert('表单提交成功！');
        });

        // 返回顶部功能
        backTop.addEventListener('click', function () {
            window.scrollTo(0, 0);
        });

        // 延时定时器
        setTimeout(function () {
            console.log('页面加载完成，欢迎使用表单！');
        }, 1000);
    </script>
</body>
</html>