前端开发基础
HTML
HTML 基本概念
HTML（Hyper Text Markup Language），即超文本标记语言。它不仅仅是文本，还能通过标签控制图片、音频、视频等多媒体内容。
标签通常成对出现，例如 <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 树。
工具推荐：虽然记事本可以编辑 HTML，但推荐使用 Visual Studio Code。它在 Windows、macOS 和 Linux 上都能运行，功能丰富。在 VS Code 中输入 ! 加回车或 Tab 键即可快速生成 HTML 框架。
HTML 常用标签
段落标签：p
默认情况下，HTML 中的空格会被忽略，且内容不会自动换行。使用 <p> 标签可以创建段落并实现换行效果。
<p>这是一个段落</p>
<p>这是一个段落</p>
注意：<p> 标签首尾会自动换行，且段落间有间距；而空格在 HTML 中通常无效。
换行标签：br
<br> 是一个单标签，用于强制换行，但它不会产生像 <p> 那样的段落间距。
换行标签<br/>
这是一个段落<br/>
这是一个段落
图片标签：img
<img> 标签用于嵌入图片，它是自闭合标签。src 属性指定图片路径，alt 属性在图片无法加载时显示替代文本。
<!-- 绝对路径 -->
<img src="C:/Users/.../xingye.jpg" alt="人物">
<!-- 相对路径 -->
<img src="../xingye.jpg" alt="这是一个人物" width="500px" height="500px" style="border: 2px solid black;">
相对路径以当前 HTML 文件位置为基准，../ 表示上一级目录。如果找不到图片，浏览器会显示 alt 中的内容。
超链接：a
<a> 标签用于创建链接。href 指定跳转地址，target 控制打开方式（_self 当前页，_blank 新标签页）。
<!-- 外部链接 -->
<a href="https://www.baidu.com/" target="_blank">百度</a>
<!-- 内部链接 -->
<a href="demo1.html" target="_blank">跳转到 demo1</a>
<!-- 空链接 -->
<a href="#">占位链接</a>
表格标签 table
表格由 <table> 包裹，包含表头 <thead>、主体 <tbody>、行 <tr> 和单元格 <td>。
常用属性包括：
border: 边框宽度cellpadding: 内容与边框的距离cellspacing: 单元格间距width/height: 尺寸设置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>
<tr>
<td colspan="3">合并单元格示例</td>
</tr>
</table>
表单标签
表单用于收集用户输入，核心标签是 <form>。
input & label
<input> 支持多种类型：text（文本）、password（密码）、radio（单选）、checkbox（复选）等。
<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>
</form>
注意：单选框必须给相同的 name 属性才能互斥；label 的 for 属性关联 input 的 id，点击文字也能选中。
select 标签
下拉选择框，selected 属性可设置默认选项。
<select name="edu">
<option value="0">小学</option>
<option value="1">初中</option>
<option value="2" selected>高中及以上</option>
</select>
textarea & button
<textarea> 用于多行文本输入，button 和 submit 的区别在于后者会触发表单提交。
<textarea rows="10" cols="100"></textarea>
<input type="button" value="注册">
<input type="submit" value="提交">
CSS
HTML 负责结构，CSS（层叠样式表）负责表现。它能实现像素级的排版控制和页面美化。
CSS 引入方式
- 内部样式：写在
<style>标签内，通常放在<head>中。 - 外部样式：通过
<link>引入独立的.css文件，便于复用和维护。 - 行内样式：直接写在标签的
style属性中，优先级最高但不利于维护。
<!-- 外部样式引入 -->
<link rel="stylesheet" href="demo.css">
CSS 选择器
- 标签选择器：如
p { color: red; } - 类选择器：
.red { color: red; }，配合class="red"使用 - ID 选择器：
#div1 { font-size: 32px; }，配合id="div1"使用，唯一性更强 - 通配符：
* { ... }选中所有元素 - 复合选择器：如
ul a（后代选择），li > a（子代选择）
常用的 CSS 属性
颜色与字体
颜色可用英文单词、RGB 或十六进制表示。
.text { color: red; font-size: 32px; }
边框 (border)
div {
border: red solid 1px;
/* 等同于 */
border-width: 1px;
border-style: solid;
border-color: red;
}
边框可单独设置方向，如 border-top-width。简写时参数顺序为：上、右、下、左。
宽高 (width/height)
只有块级元素（如 div, p, h1-h6）能独占一行并设置宽高。行内元素（如 a, span）默认不生效，可通过 display: block 转换。
盒模型
- padding：内容与边框之间的距离
- margin：元素与其他元素之间的外边距
两者都支持简写，参数数量不同含义不同（如 4 个参数分别对应上下左右）。
JavaScript
JavaScript（JS）是一种脚本语言，负责网页的行为逻辑。它与 Java 没有直接关系，最初是为了蹭热度命名，现已成为 Web 交互的核心。
HTML 是骨，CSS 是皮，JS 是魂。
JavaScript 基本概念
引入方式与 CSS 类似：行内、内部（<script>）、外部（src）。
<script src="js.js"></script>
基础语法
数据类型
JS 是动态弱类型语言，变量类型可在运行时改变。
var name = 'zhangsan';
console.log(typeof name); // string
name = 12;
console.log(typeof name); // number
常见类型：number, string, boolean, undefined, null (typeof null 结果为 object)。
运算符
== 进行隐式类型转换比较，=== 严格比较内容和类型。
console.log(1 == '1'); // true
console.log(1 === '1'); // false
JavaScript 对象
数组
JS 数组元素类型可混合。
var arr = [1, 2, 'hello', true];
arr[4] = 123; // 添加
arr.splice(3, 1); // 删除
函数
function add(a, b) {
return a + b;
}
// 参数不足时 undefined，多余时被忽略
对象
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();
});
});
DOM 操作
- 获取内容：
$('#id').html(),$('#id').text(),$('#id').val() - 修改内容：传入参数即可
- 属性操作：
attr()获取或设置 - CSS 操作：
css()获取或设置样式
猜数字案例
这是一个综合应用，涉及随机数生成、事件监听和数据重置。
<!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(count);
$('#result').text("");
});
</script>
</body>
</html>
注意：重置按钮中需确保 ID 一致（如 inputNum），否则无法清空输入框。
