前端开发基础：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> 那样产生额外间距。

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

图片 使用 <img> 标签嵌入图片，src 指定路径，alt 提供替代文本。建议使用相对路径管理资源。

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

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

超链接 使用 <a> 标签创建链接。href 指定目标地址，target="_blank" 可在新标签页打开。

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

表格标签 table

表格由 <table> 包裹，包含表头 <thead> 和主体 <tbody>。行用 <tr>，单元格用 <td>。

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

属性说明：

• rowspan: 跨行
• colspan: 跨列
• cellpadding: 内容与边框间距
• cellspacing: 单元格间距

表单标签

表单用于收集用户输入，核心是 <form> 标签。

输入控件

• type="text": 文本框
• type="password": 密码框
• type="radio": 单选框（需相同 name 值）
• type="checkbox": 复选框
• type="submit": 提交按钮

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

---

CSS

CSS（层叠样式表）负责页面的视觉表现，实现结构与样式的分离。

CSS 引入方式

1. 内部样式：在 <head> 中使用 <style> 标签。
2. 外部样式：通过 <link> 引入独立 .css 文件，推荐用于多页面复用。
3. 行内样式：直接在标签中写 style 属性，优先级最高但不利于维护。

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

CSS 选择器

• 标签选择器：选中所有指定标签，如 div { }。
• 类选择器：以 . 开头，如 .red { color: red; }，配合 class 属性使用。
• ID 选择器：以 # 开头，如 #main { }，页面唯一。
• 通配符：* 选中所有元素。
• 复合选择器：如 ul li a 表示子孙后代，li > a 表示直接子元素。

常用属性

边框 (border)

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

尺寸与布局 块级元素（div, p, h1-h6）可设置宽高，行内元素（a, span）默认不可。可通过 display: block 转换。

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

盒模型

• padding: 内边距（内容与边框距离）
• margin: 外边距（元素间距离）

---

JavaScript

JS 是脚本语言，负责网页交互逻辑，被称为网页的'灵魂'。

基础语法

数据类型 JS 是动态弱类型语言，变量类型可随赋值改变。

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');
    }
};

jQuery 简介

jQuery 封装了 JS 常用功能，简化 DOM 操作。

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

常用方法：

• $(selector).html(): 获取/设置 HTML 内容
• $(selector).text(): 获取/设置文本内容
• $(selector).val(): 获取/设置表单值
• $(selector).attr(): 获取/设置属性

---

猜数字案例

结合上述知识，实现一个简单的猜数字游戏。

<!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').text(0);
            $('#result').text('');
        });
    </script>
</body>
</html>

该案例展示了随机数生成、事件绑定、DOM 修改及条件判断的综合应用。