HTML+CSS

💡

HTML+CSS是前端三件套的基础。HTML定义网页结构和内容，CSS控制样式和布局。

---

一、HTML 核心标签

1.1 Form 表单（最核心）

📌

表单是前后端数据交互的核心入口，每个开发者必须熟练掌握。

表单基础结构

input 类型全览

type值	用途	代码示例
text	文本输入（最常用）	<input type="text" name="username">
password	密码输入（内容遮蔽）	<input type="password" name="pwd">
email	邮箱（自动校验格式）	<input type="email" name="email">
number	数字（min/max/step）	<input type="number" min="1" max="100">
date	日期选择器	<input type="date" name="birth">
file	文件上传	<input type="file" accept=".jpg,.png" multiple>
checkbox	多选框	<input type="checkbox" name="hobby" value="code">
radio	单选框（同name互斥）	<input type="radio" name="gender" value="male">
hidden	隐藏域（传不可见数据）	<input type="hidden" name="userId" value="1">
submit/reset/button	提交/重置/普通按钮	<input type="submit" value="提交">

其他表单控件

表单属性速查

属性	作用
required	必填，为空时阻止提交并提示
placeholder	占位提示文字（输入内容后消失）
maxlength / minlength	字符数上限/下限
min / max / step	数值范围/步长（type="number"）
readonly	只读（可聚焦不可修改，会提交）
disabled	禁用（不可聚焦，不会提交）
autocomplete	自动填充（on/off）
pattern	正则验证 pattern="[A-Za-z]{3,}"

---

1.2 Table 表格

📌

表格用于展示结构化数据。语义化标签让表格更加清晰。

完整表格结构

单元格合并

表格相关标签

标签	说明
table	表格容器
caption	表格标题
thead / tbody / tfoot	表头/表体/表尾（语义化+支持滚动表体）
tr	一行
th / td	表头单元格(加粗居中) / 数据单元格
colgroup / col	定义列样式（如col span="2" width="100"）

---

二、CSS 选择器体系

2.1 基础选择器

2.2 组合选择器

2.3 伪类选择器（交互状态）

2.4 伪元素选择器（创建虚拟元素）

2.5 CSS优先级（层叠规则）

❗

优先级计算（a-b-c-d）：!important > 行内style(1000) > ID选择器(100) > 类/伪类/属性(10) > 标签/伪元素(1) > 通配符(0)

---

三、CSS 常用样式速查

3.1 文本与字体

3.2 盒模型

3.3 Flex布局（现代布局首选）

---

✅

学习重点：Form表单(input类型+属性) → Table表格(thead/tbody/合并) → CSS选择器(优先级计算) → 伪类(:hover/:nth-child) → Flex布局(display:flex)。掌握这些即可应对日常开发90%的场景。