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

HTML / CSS大前端

前端开发基础：HTML、CSS 与 JavaScript 入门梳理

前端开发基础涵盖 HTML 结构、CSS 样式及 JavaScript 交互逻辑。本文梳理了标签使用、选择器原理、DOM 操作及常见表单处理，通过猜数字案例演示实际应用场景。旨在帮助初学者快速建立 Web 开发知识体系，掌握页面构建的核心技能。

BigDataPan发布于 2026/2/14更新于 2026/4/251 浏览

前端开发基础：HTML、CSS 与 JavaScript 入门梳理

前端基础知识

HTML

HTML 基本概念

HTML（Hyper Text Markup Language）是超文本标记语言，用于构建网页结构。它通过预定义的标签来控制内容展示，支持图片、音频、视频等多种媒体形式。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

标签通常成对出现，如 <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 树结构。编辑时推荐使用 VS Code 等现代编辑器，配合快捷键可快速生成标准框架。

HTML 常用标签

段落与换行 使用 <p> 标签定义段落，浏览器会自动处理换行和间距。若需精确控制单行换行，可使用 <br> 标签，它不会像 <p> 那样产生额外间距。

<>这是一个段落

这是一个换行

<!-- 绝对路径示例 -->
<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">内部跳转</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="2">合并单元格</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><br>
    <input type="submit" value="注册">
</form>

<select name="edu">
    <option value="0">小学</option>
    <option value="1" selected>初中及以上</option>
</select>
<textarea rows="10" cols="100"></textarea>

<style>
p { color: red; }
div { color: rgb(180, 220, 22); }
</style>

div {
    border: 1px solid red;
    /* 或分开设置 */
    border-width: 1px;
    border-style: solid;
    border-color: red;
}

span {
    display: block;
    width: 500px;
    height: 50px;
}

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

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

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

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

<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.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();
            $().();
            $().();
        });
    </script>
</body>
</html>