前端开发基础：HTML、CSS 与 JavaScript 核心入门 | 极客日志

HTML / CSS大前端

前端开发基础：HTML、CSS 与 JavaScript 核心入门

综述由AI生成系统讲解了前端开发的基础知识，涵盖 HTML 结构构建、CSS 样式美化及 JavaScript 交互逻辑。内容从标签概念入手，详解表格、表单等常用组件，深入剖析 CSS 选择器、盒模型及布局原理。随后介绍 JavaScript 的数据类型、函数与对象机制，并结合 jQuery 库演示 DOM 操作与事件处理。最后通过猜数字实战案例，串联起随机数生成、条件判断与数据重置等核心知识点，适合初学者建立完整的前端技术认知体系。

ApiHolic发布于 2026/3/25更新于 2026/5/1211 浏览

前端开发基础：HTML、CSS 与 JavaScript 核心入门

前端开发基础

HTML

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 树。

工具推荐：虽然记事本可以编辑 HTML，但推荐使用 Visual Studio Code。它在 Windows、macOS 和 Linux 上都能运行，功能丰富。在 VS Code 中输入 ! 加回车或 Tab 键即可快速生成 HTML 框架。

HTML 常用标签

段落标签：p

默认情况下，HTML 中的空格会被忽略，且内容不会自动换行。使用 <p> 标签可以创建段落并实现换行效果。

<p>这是一个段落</p>
<p>这是一个段落</p>

注意：<p> 标签首尾会自动换行，且段落间有间距；而空格在 HTML 中通常无效。

换行标签：br

是一个单标签，用于强制换行，但它不会产生像那样的段落间距。

<br>

<p>

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

<!-- 绝对路径 -->
<img src="C:/Users/.../xingye.jpg" alt="人物">

<!-- 相对路径 -->
<img src="../xingye.jpg" alt="这是一个人物" width="500px" height="500px" style="border: 2px solid black;">

<!-- 外部链接 -->
<a href="https://www.baidu.com/" target="_blank">百度</a>

<!-- 内部链接 -->
<a href="demo1.html" target="_blank">跳转到 demo1</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>
    <tr>
        <td colspan="3">合并单元格示例</td>
    </tr>
</table>

<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" id="male" value="0">
    <label for="male">男</label>
    <input type="radio" name="sex" id="female" value="1">
    <label for="female">女</label>
</form>

<select name="edu">
    <option value="0">小学</option>
    <option value="1">初中</option>
    <option value="2" selected>高中及以上</option>
</select>

<textarea rows="10" cols="100"></textarea>
<input type="button" value="注册">
<input type="submit" value="提交">

<!-- 外部样式引入 -->
<link rel="stylesheet" href="demo.css">

.text { color: red; font-size: 32px; }

div {
    border: red solid 1px;
    /* 等同于 */
    border-width: 1px;
    border-style: solid;
    border-color: red;
}

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

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

console.log(1 == '1');  // true
console.log(1 === '1'); // false

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

function add(a, b) {
    return a + b;
}
// 参数不足时 undefined，多余时被忽略

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

<script src="jquery-3.7.1.min.js"></script>

$(selector).action();

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猜数字</title>
    <script src="jquery-3.7.1.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').val();
            $().(count);
            $().();
        });
    </script>
</body>
</html>