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

超链接 <a> 标签用于跳转，href 指向目标地址。target="_blank" 可在新标签页打开。内部链接使用相对路径，外部链接直接写 URL。

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

表格与表单

表格 使用 <table> 容器，<tr> 定义行，<td> 定义单元格。可通过 rowspan 和 colspan 实现跨行跨列布局。

<table border="1" cellpadding="0" cellspacing="0">
    <tr><td>名字</td><td>性别</td></tr>
    <tr><td>张三</td><td>男</td></tr>
</table>

表单 <form> 标签负责数据提交。<input> 类型丰富，包括文本、密码、单选、复选等。单选框需共用相同的 name 属性才能互斥。

<form action="test.html">
    账号：<input type="text" name="user">
    性别：
    <input type="radio" name="sex" value="male"> 男
    <input type="radio" name="sex" value="female"> 女
    <button type="submit">提交</button>
</form>

CSS 样式控制

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

引入方式

1. 内部样式：写在 <style> 标签中，适用于单文件场景。
2. 外部样式：通过 <link> 引入 .css 文件，便于多页面复用。
3. 行内样式：直接在标签 style 属性中设置，优先级高但不利于维护。

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

选择器与常用属性

选择器决定了样式应用的范围，包括标签选择器、类选择器（.）、ID 选择器（#）及通配符（*）。复合选择器如 ul a 可精准定位子孙元素。

常用属性包括颜色、字体大小、边框（border）、宽高（width/height）及盒模型属性（padding, margin）。注意块级元素（如 div）独占一行，可设置宽高；行内元素（如 span）默认不可，需通过 display: block 转换。

.div-box {
    border: 1px solid red;
    padding: 10px;
    margin: 20px;
}

JavaScript 交互逻辑

JavaScript (JS) 是脚本语言，赋予网页动态行为，被称为网页的'灵魂'。

基础语法

JS 是弱类型语言，变量可使用 var 声明，类型随赋值变化。数据类型包括字符串、数字、布尔值、对象等。运算符中 == 会进行隐式类型转换，而 === 严格比较内容与类型。

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

对象与函数

数组和对象是 JS 的核心数据结构。数组支持增删改查，对象则通过键值对存储信息。函数用于封装逻辑，支持参数传递与返回值。

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

jQuery 框架

jQuery 是对原生 JS 的封装，简化了 DOM 操作与事件处理。通过 $() 选择器可快速获取元素并执行方法。

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

常用操作包括获取内容 (html(), text())、修改属性 (attr()) 及动态添加删除元素 (append(), remove())。

实战案例：猜数字游戏

结合上述知识，我们可以实现一个简单的猜数字游戏。利用 Math.random() 生成随机数，监听按钮点击事件比对输入值，并重置游戏状态。

<button id="guess">猜</button>
<input type="number" id="inputNum">
<span id="result"></span>
<script>
let randNum = Math.floor(Math.random() * 100) + 1;
$('#guess').click(function() {
    let inputNum = $('#inputNum').val();
    if (inputNum < randNum) {
        $('#result').text('猜小了');
    } else if (inputNum > randNum) {
        $('#result').text('猜大了');
    } else {
        $('#result').text('猜对了');
    }
});
</script>

这个案例涵盖了随机数生成、DOM 获取、事件绑定及条件判断，是理解前端交互流程的典型实践。