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

HTML / CSS大前端

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

前端开发基础涵盖 HTML 结构、CSS 样式与 JavaScript 交互三大核心。文章详解常用标签、选择器机制、DOM 操作及事件处理，并通过猜数字实战案例演示代码应用。旨在帮助初学者理清技术脉络，掌握网页构建的基本逻辑与规范。

kaikai发布于 2026/3/24更新于 2026/5/1811 浏览

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

前端开发主要围绕三个核心技术展开：HTML 构建结构，CSS 控制样式，JavaScript 实现交互。下面我们将逐一梳理这些基础知识。

HTML 基础概念

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

标签与结构

标签通常成对出现，如 <h1> 和 </h1>。开始标签内可包含属性，部分标签为自闭合标签。一个标准的 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 树结构，形成层级关系。

常用标签

段落与换行 <p> 标签用于定义段落，会自动换行并增加间距。若需紧凑换行，可使用单标签 <br>。

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

图片使用 <img> 标签引入图片，src 指定路径，alt 为备用文本。推荐使用相对路径，以当前 HTML 文件位置为基准。

<!-- 相对路径示例 -->
< = = = = =>

相关免费在线工具

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

<a href="https://www.baidu.com/" target="_blank">百度</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="user" id="u1"><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>

div {
    border: 1px solid red;
    width: 500px;
    height: 50px;
}

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

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

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

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

$(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.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>

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

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

HTML 基础概念

标签与结构

常用标签

更多推荐文章

相关免费在线工具

表格与表单

CSS 样式控制

引入方式

选择器

常用属性

JavaScript 交互逻辑

基础语法

对象与数组

jQuery 库

实战案例：猜数字游戏

更多推荐文章

相关免费在线工具

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

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

HTML 基础概念

标签与结构

常用标签

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

更多推荐文章

相关免费在线工具

表格与表单

CSS 样式控制

引入方式

选择器

常用属性

JavaScript 交互逻辑

基础语法

对象与数组

jQuery 库

实战案例：猜数字游戏

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

更多推荐文章

相关免费在线工具