表格table
<table> </table> 创建表格
<tr> </tr>行
<td> </td> 列 单元格
colspan 横向合并单元格
rowspan 纵向合并单元格
<thead> </thead> 表格头部
<tbody> </tbody>表格主体
<tfoot> </tfoot>表格页脚
<th> </th>表头且自动居中加粗
<caption> </caption>表格标题
<cellspacing>单元格单元格之间得间距
<cellpadding>单元格内容之间得间距
align:center表格居中
border-collapse: collapse;合并单元格与单元格得边框 给table指定
表单from
form创建表单
<input type='text'>文本框
<input type='password'>密码框
<input type='checkbox'>多选框
<input type='checked'>定义默认选择项
<maxlength='数值'>允许用户输入多少字符
name='自己定义'必须要写不然后台收不到数据
<input type='submit' value='按钮上得文字 可自定义'>提交按钮
placeholder='自定义'表单默认显示得文字
outline: none;去掉轮廓线
:focus当文本框获取焦点后,改变边框颜色
cursor: pointer;鼠标经过变成小手,其余属性查文档
注意用户选择项得必须加value 比如单选框radio 多选框checkbox
<select><option></option></select>下拉列表
<select><optgroup><option></option></optgroup></select>分组下拉列表
在option中添加selected属性将当前选项设置为默认选项
<input type='submit'>提交
<input type='reset'>重置
<input type='button'>按钮
<input type='email'>邮件输入框
autofocus浏览器刷新自动获取焦点
required表单项为必填表单
autocomplete='off'用户浏览记录关闭
autocomplete='on'用户浏览记录开启
<textarea></textarea >控件是一块文本域
abel 标签通常与 input 标签配合使用 用户点击文字获取焦点
过度transition
transition-property:过度属性要给谁过度 all表示所有
transition-duration:过度的时间单位s或者ms
transition-delay:过度的延时单位s或者ms
transition-timing-function:过度的时间的函数
transition:/*属性名*/ /*持续时间*/ /*过渡类型*/ /*过渡延迟*/;
css动画
@keyframes 自定义名字{ from{初始帧 } to{结束帧 } }注意定义动画不是写在元素身上的
animation-name:定义动画名
animation-duration:2s;执行一次动画的完成时间,单位是s/ms
animation-iteration-count:次数不带单位动画执行次数 infinite 表示无限循环
animation-timing-function:linear;运动曲线类型
animation-direction:alternate;动画执行的方向 normal 正常 reverse 反向 alternate 交替
animation-delay:3s 动画的延迟时间
animation-play-state:动画的暂停 属性paused暂停 running播放
animation:定义的动画名 完成时间 执行次数 运动曲线 是否反向执行 延迟时间(infinite 表示无限循环
动画的简写以及调用
flex布局
flex-direction设置主轴的方向
justify-content设置主轴上的子元素排列方式 跟侧轴没关系
flex-wrap设置主轴子元素是否换行
align-items设置侧轴上的子元素排列方式(单行)
align-content 设置侧轴上的子元素的排列方式(多行)
align-content 设置侧轴上的子元素的排列方式(多行)
align-self控制子元素自己在侧轴上的排列方式
order属性定义子元素的排列属性