1. 全部type控件类型type值 作用text 单行文本输入框用户名、地址password 密码框输入内容自动隐藏submit 提交按钮点击提交表单数据reset 重置按钮一键清空所有输入button 普通按钮无默认功能配合JS使用radio 单选按钮同组只能选一个checkbox 多选按钮支持多个选择file 文件上传域选择本地文件hidden 隐藏域页面不可见可提交数据image 图片样式的提交按钮email 邮箱专用框浏览器自带格式校验url 网址输入框校验URL格式number 仅允许输入数字2. 核心属性详解1. name 表单提交必备后台通过name接收输入数据​2. value 控件默认显示/提交的值​3. size 控制输入框可视宽度​4. maxlength 限制最大输入字符长度​5. placeholder 输入框灰色提示文字非真实值​6. checked 给单选/多选设置默认选中​7. readonly 只读文字可查看、不可修改能提交数据​8. disabled 禁用控件变灰不可操作无法提交数据​9. required 必填校验不填写无法提交表单​10. autocomplete 控制是否开启输入历史自动补全​11. id 元素唯一标识用于CSS样式、JS获取元素补充重点文本框用于输入各类文字 name 是表单交互核心无name则后台接收不到数据 id 仅用于页面操作不参与数据提交。二、CSS display 布局属性1. display: block转为块级元素独占一行、支持宽高、垂直排列​2. display: inline-block行内块特性同行显示 支持设置宽高页面布局高频用法​3. display: none完全隐藏元素页面看不见不占用文档流空间​4. display: flex开启弹性盒布局快速实现居中、均分、自适应排列三、Flex 弹性布局父容器添加 display:flex 生效1. 主轴排列方向 flex-direction- row 默认水平从左向右横向排列​- column 垂直从上到下纵向排列2. 主轴水平对齐 justify-content- flex-start 左对齐​- flex-end 右对齐​- center 水平居中​- space-between 元素贴左右两端中间空隙均分​- space-around 每个元素左右两侧留白均等3. 侧轴垂直对齐- align-items 单行元素使用flex-start 顶部对齐 / flex-end 底部对齐 / center 垂直居中​- align-content 多行元素使用取值同justify-content控制多行整体垂直分布4. 自动换行 flex-wrapflex-wrap: wrap; 子元素宽度超出父容器时自动换行5. 子元素宽度占比- flex-grow: 数字 控制元素剩余空间放大比例​- flex: 1 快捷写法多个子元素平分父容器宽度四、移动端响应式开发两大核心步骤步骤1viewport视口标签移动端页面必须写核心参数- width 设置页面宽度为设备屏幕宽度​- initial-scale 页面初始加载缩放比例常规设1.0​- maximum-scale 用户可放大的最大比例​- minimum-scale 用户可缩小的最小比例​- user-scalable 控制用户是否允许双指缩放页面步骤2媒体查询 media作用根据屏幕尺寸加载不同CSS样式实现多端适配基础语法修饰符 and 并且、 not 取反、 only 兼容旧浏览器五、CSS position 定位属性四种定位模式1. position: relative 相对定位参照物元素自身原始位置不脱离文档流仍占用页面空间常作为absolute的父级参照。​2. position: absolute 绝对定位参照物最近一层设置过定位的父容器无定位父级则参照页面脱离文档流不占位。​3. position: fixed 固定定位参照物浏览器可视窗口页面滚动时位置保持不变脱离文档流多用于悬浮按钮、底部导航。​4. position: static 默认定位标准文档流无偏移效果。偏移属性top/right/bottom/left控制元素相对于参照物的偏移距离- top 距离参照物顶部向下偏移​- bottom 距离参照物底部向上偏移​- left 距离参照物左侧向右偏移​- right 距离参照物右侧向左偏移层级控制 z-index语法 z-index: 数字;仅对定位元素生效数字越大元素层级越高显示在最上层。六、CSS 2D/3D transform 变换属性通用规则平移坐标 左负右正、上负下正1. 平移 translate​- translate(x,y) 同时设置X轴、Y轴平移距离​- translateX() 仅水平左右平移​- translateY() 仅垂直上下平移​2. 旋转 rotate​- rotate() 2D平面旋转​- rotateX() 沿X轴3D翻转​- rotateY() 沿Y轴3D翻转​3. 缩放 scale​- scale(倍数) 整体等比例缩放​- scaleX() 仅水平缩放​- scaleY() 仅垂直缩放​4. 3D透视 perspective设置透视距离数值越大3D立体效果越平缓增强旋转立体感