01-前端基础（HTML / CSS / JavaScript）
对应原始资料：
day01-HTML&CSS&JS基础
一、HTML（结构）
HTML 用标签描述网页结构。
1. 基础骨架
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<!-- 网页内容 -->
</body>
</html>2. 常用标签
| 标签 | 说明 |
|---|---|
<h1>~<h6> | 标题 |
<p> | 段落 |
<br> / <hr> | 换行 / 水平线 |
<b> <i> <u> | 加粗/斜体/下划线 |
<img src="" alt="" width=""> | 图片 |
<a href=""> | 超链接 |
<ul> <ol> <li> | 无序/有序列表 |
<table> <tr> <td> <th> | 表格 |
<div> <span> | 块级/行内容器 |
<form> | 表单 |
<input> | 输入框 |
<select> <textarea> | 下拉/多行文本 |
3. 表单（后端重点）
html
<form action="/login" method="post">
用户名：<input type="text" name="username"><br>
密码：<input type="password" name="password"><br>
<input type="submit" value="登录">
</form>
name属性是后端接收参数的 key。
二、CSS（样式）
1. 引入方式
- 行内：
<div style="color:red">。 - 内嵌：
<style>...</style>。 - 外链（推荐）：
<link rel="stylesheet" href="a.css">。
2. 选择器
css
div { } /* 标签 */
#id { } /* id */
.cls { } /* 类 */
div p { } /* 后代 */
div > p { } /* 子代 */
div, span { } /* 分组 */
a:hover { } /* 伪类 */3. 盒子模型
每个元素都是矩形盒子：
content内容 →padding内边距 →border边框 →margin外边距。box-sizing: border-box：宽高包含 padding 和 border（推荐）。
4. 常用属性
- 文本：
color、font-size、text-align、line-height。 - 背景：
background-color、background-image。 - 布局：
display(block/inline/flex)、position(static/relative/absolute/fixed)、float、margin。
5. Flex 布局（现代首选）
css
.container { display: flex; justify-content: center; align-items: center; }三、JavaScript（行为）
JS 让网页"动起来"，运行在浏览器端。
1. 引入方式
html
<script> /* 内部 */ </script>
<script src="a.js"></script> <!-- 外链 -->2. 变量与数据类型
javascript
// ES6 推荐
let a = 10; // 变量
const PI = 3.14; // 常量
var old = 1; // 老语法（函数作用域，少用）
// 类型：number、string、boolean、null、undefined、object、symbol
typeof a;3. 运算与流程控制
与 Java 类似，但 JS 是弱类型、== 会做隐式转换（推荐用 ===）。
4. 函数
javascript
function add(a, b) { return a + b; }
const sum = (a, b) => a + b; // 箭头函数（ES6）5. 数组与对象
javascript
let arr = [1, 2, 3];
arr.push(4); arr.length; arr.forEach(x => console.log(x));
let user = { name: "张三", age: 18 };
user.name;
user["name"];
// 解构
const { name, age } = user;6. DOM 操作
javascript
document.getElementById("d1");
document.querySelector(".cls");
element.innerText = "hello";
element.innerHTML = "<b>hi</b>";
element.style.color = "red";
element.addEventListener("click", () => { /* ... */ });7. BOM
javascript
window.alert("hi");
window.confirm("确定吗");
window.location.href = "https://...";
setTimeout(() => {}, 1000);
setInterval(() => {}, 1000);8. 事件
常见：click、dblclick、mouseover、submit、change、input、keydown、load。
9. ES6+ 常用新特性
let/const、箭头函数、模板字符串`Hello ${name}`- 解构、扩展运算符
... Promise、async/await- 模块
import/export Map/Set
练习建议
- 写一个完整的注册页面（HTML 表单 + CSS 美化）。
- 用 JS 实现一个简单的计算器、Todo List。
- 练习 DOM 增删改查（点击按钮添加/删除元素）。
- 用 Flex 实现一个顶部导航 + 侧边栏布局。