Web 前端基础入门：HTML、CSS 与 JavaScript 实战 | 极客日志

HTML / CSS大前端

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

Web 前端开发涉及 HTML 结构、CSS 样式与 JavaScript 交互三大核心。系统讲解 HTML 常用标签、表格表单构建，深入 CSS 选择器、盒模型及布局原理。同时梳理 JavaScript 基础语法、对象机制，并介绍 jQuery 简化 DOM 操作。最后通过猜数字案例整合知识点，帮助初学者快速掌握前端开发流程与技术要点。

魔法巫师发布于 2026/3/25更新于 2026/5/128 浏览

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

Web 前端基础入门

前端开发主要涉及三大核心技术：HTML 构建结构，CSS 控制样式，JavaScript 实现交互。下面我们从基础开始，逐步梳理这些核心知识点。

HTML 基础

基本概念

HTML（Hyper Text Markup Language）是超文本标记语言。它通过标签来控制页面内容，支持图片、音频、视频等多种媒体形式。标签通常成对出现，如 <h1> 和 </h1>，中间包裹具体内容。部分标签是自闭合的，例如 <br>。

一个标准的 HTML 文档结构如下：

<!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>

浏览器会将这些标签解析为 DOM 树结构。编写代码时，推荐使用 Visual Studio Code 等编辑器，它们能提供更好的语法高亮和自动补全功能。

常用标签

段落与换行

<p> 标签用于定义段落，浏览器会自动在段落间添加间距。如果需要紧凑的换行，可以使用 <br> 标签，它不会增加额外的垂直间距。

<p>这是一个段落</p>
<p>这是另一个段落</p>
第一行<br/>第二行

图片

使用 <img> 标签插入图片。属性指定路径，属性提供图片无法加载时的替代文本。路径可以是绝对路径或相对路径。

src

alt

<!-- 相对路径示例 -->
<img src="../xingye.jpg" alt="人物图片" width="500px" style="border: 2px solid black;">

<a href="https://www.baidu.com/" target="_blank">百度</a>
<a href="demo1.html">内部跳转</a>
<a href="#">空链接</a>

<table border="1" cellpadding="0" cellspacing="0" width="500">
    <tr>
        <td>名字</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td rowspan="2">18</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
    </tr>
</table>

<form action="test.html">
    账号：<input type="text" name="Users"><br>
    密码：<input type="password" name="password"><br>
    性别：
    <input type="radio" name="sex" id="male" value="0"><label for="male">男</label>
    <input type="radio" name="sex" id="female" value="1"><label for="female">女</label><br>
    <input type="submit" value="提交">
</form>

<style>
p { color: red; }
div { color: blue; }
</style>

<script>
    console.log('Hello JavaScript');
</script>

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

var arr = [1, 'hello', true];
arr[4] = 123; // 增
arr.splice(3, 1); // 删

function add(a, b) {
    return a + b;
}

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猜数字</title>
    <script src="jquery-3.7.1.min.js"></script>
</head>
<body>
    <div style="margin: 0 auto; width: 500px;">
        <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').();
            $().(count);
            $().();
        });
    </script>
</body>
</html>