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

超链接 <a> 标签用于跳转。href 指定目标地址，target="_blank" 在新窗口打开。

<a href="https://www.baidu.com/" target="_blank">百度</a>

表格与表单

表格 使用 <table> 包裹，内部包含 <tr>（行）、<td>（单元格）。可通过 rowspan 和 colspan 合并单元格。

<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> 用于收集用户输入。<input> 类型丰富，包括文本、密码、单选等。注意单选框需设置相同的 name 属性才能互斥。

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

CSS 样式控制

CSS（Cascading Style Sheet）层叠样式表用于美化页面，实现结构与表现分离。

引入方式

1. 内部样式：在 <head> 中使用 <style> 标签。
2. 外部样式：通过 <link> 引入独立的 .css 文件。
3. 行内样式：直接在标签的 style 属性中编写。

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

选择器

• 标签选择器：直接选中元素，如 div { ... }。
• 类选择器：使用 .class，灵活复用。
• ID 选择器：使用 #id，优先级较高。
• 复合选择器：如 ul li a 表示子孙后代，li > a 表示直接子元素。

常用属性

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

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

盒模型

• padding：内容与边框间距。
• margin：元素外边距。
• border：边框样式，支持简写（如 border: red solid 1px）。

JavaScript 交互逻辑

JavaScript（JS）是脚本语言，负责网页的行为逻辑，常被称为网页的'灵魂'。

基础语法

JS 是弱类型语言，变量声明可用 var。数据类型包括字符串、数字、布尔值等。

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

jQuery 库

jQuery 封装了 JS 常用功能，简化 DOM 操作。使用时需引入库文件。

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

基本用法：$(selector).action()。

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

常用操作包括获取内容 (html(), text(), val())、修改属性 (attr()) 以及事件绑定。

实战案例：猜数字游戏

结合上述知识，我们可以编写一个简单的猜数字游戏。需求包括生成随机数、接收用户输入、判断大小及重置功能。

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

在这个案例中，我们使用了 Math.random() 生成随机数，通过事件监听处理点击，并利用 jQuery 快速更新界面状态。实际开发中，还需考虑数据校验和用户体验优化。