目录
@
表格
标签
表格 table
行 tr 列 td 表头 th属性
表格间距离
cellspacing
表格的内边距
cellpadding
表格的边框
border
样式
边框合并
border-collapse: collapse;
行合并
列合并
display
table中的display的值和行标签、块标签不同，值是table
表单
标签
属性
提交的网址
action
请求方式
method
input相关
扩大响应范围
label此时点击“请输入用户名：”这几个字时，输入框input同样会获得焦点（被选中）label中的for后面填的是input的id
字符
text正常就这么写或这样是默认获取焦点这样是输入框禁用这么写是有一个姓名的占位符
密码
password
单选框
radio
name
男女当n个单选框中的name属性相同时，这n个单选框被称为“一组单选框”在一组单选框中，只能获取到一个值
value
男女当一组单选框中的一个被选中时，js根据id获取单选框值时获取的是属性value中的值
默认选中
checked男女或男女当单选框被加checked属性时，加载时默认被选中
多选框
checkbox
属性参照单选框
文件上传
file
下拉列表
select 如果使用optgroup将一组option包起来，相当于是给一组option取分组名字
可拖拽大文本输入框
textarea
表单提交
submit
表单重写
reset
数字
numbermin max可以设置最大最小值step 设置点一下右侧上下键跳的数字(变化量)
邮箱
emailautocomplete="on"开启自动补全,如果邮箱少了@符号会提示
链接
url
颜色
color
时间
date,month,week, datetime-local
滑动条
rangemin max可以设置最大最小值step 设置滑动一下的变化量
搜索框清除
search就是手机端输账号密码输错了可以按右边一个×直接删除
隐藏效果
hidden管理系统做修改时,根据主键来进行修改(比如我的那个简历修改),把要修改的简历的id隐藏 只是页面上看不到了 不能点击修改
HTML5 && CSS3
H5中新增的标签
音频标签
audio audio支持的文件格式：MP3、WAV、ogg；audio中可以防止文本在浏览器不支持此标签时显示autoplay 自动播放controls控制条（出现暂停播放进度条，但是进度条不能拉）
视频标签
video video支持的文件格式：MP4、Webm、ogv；autoplay 自动播放controls控制条（出现暂停播放进度条，但是进度条不能拉）poster添加视频封面（b站那种）
nav
作为导航
header
用于定义文档或文档一部分区域的头部
section
用于划分区域
main
页面主体部分
aside
可用于文章的侧栏
canvas
画布
H5中新增的选择器
属性选择器
a[href] { color: red;}12上述样例是只有1变红 
结构选择器
这个是只能选择儿子辈的，不能跨级选择div>span { color:pink;}这个是只能选择同级标签，还是必须得挨着的span + a { color: red;} 红姐包子铺 蛋黄肉馅 
伪类选择器
- 空元素选择器
指定空的p元素的背景色p:empty { width: 200px; height: 30px; background-color: pink; }米线
- not选择器
.color { color: blue;}选择所有非括号中属性元素:not(.color) { color: pink;} 凉皮 1 2 3 4 5 这里是只有12345的div会变粉色 
- nth-child(n)选择器
规定属于其父元素的第二个子元素的每个 p 的样式p:nth-child(2) { color: red;} 炒饭
炒饭
炒饭
炒饭
这里只有第二个炒饭的颜色会变红 
- nth-of-type(n)选择器
规定属于其父元素的第二个 p 元素的样式p:nth-of-type(2) { color: yellow;} 炒饭
dsfdsfasdfa 炒饭
炒饭
这里第二个炒饭的颜色会变黄 
- nth-last-of-type(n)选择器
规定属于其父元素的最后一个 p 元素的样式p:nth-last-of-type(2) { color: lightblue;} 炒饭
dsfdsfasdfa 炒饭
炒饭
炒饭
炒饭
炒饭
鸡叉骨 这里最后一个炒饭的颜色会变蓝 
- nth-last-of-type(n)选择器
规定属于其父元素的最后一个 div 元素的样式div:nth-last-child(1) { color: greenyellow;} 炒饭
dsfdsfasdfa 炒饭
炒饭
炒饭
炒饭
炒饭
鸡叉骨 这里最后一个鸡叉骨的颜色会变黄绿 
- first-of-type与last-of-type
第一个p标签p:first-of-type { color: red;}最后一个p标签p:last-of-type { color: greenyellow;}不写例子了 自己看w3c - only-of-type与only-child
选择所有父标签中p标签只有一个的那个pp:only-of-type { color: red;}选择所有父标签中只有一个子标签并且是p标签的那个pp:only-child { color: lavender;}不写例子了 自己看w3c - before与after选择器
div:before { content: "您好"; width: 100px; height: 100px; background-color: #7FFF00; display: block;}div:after { content: "刘一龙虾";} 锦辉鸡公煲
锦辉麻辣香锅
应用:用于实现小图标,边框,遮罩层； 一个标签只能写一组before和after,而且必须指定content；默认生成的是行内元素；低版本的浏览器只识别:(一个冒号)想兼容跟多浏览器尽量写一个冒号；其他浏览器可能也识别::(两个冒号)；before和after选择器中可以写各种各样的样式。 
过渡
transition
- css3标准不固定，针对不同的浏览器进行兼容，需要加前缀：
- webkit :safari 谷歌 猎豹
- moz:火狐
- ms:IE
- o: opera
- 直接打transition然后tab出来的是这样的：
- -webkit-transition: all 1s;
- -moz-transition: all 1s;
- -ms-transition: all 1s;
- -o-transition: all 1s;
平常写直接写transition: all 1s; 就完事了
- 分开写是这样的：
- 过渡的样式 常用all.可以设置某个css样式：transition-property: all;
- 过渡效果：transition-timing-function: linear;
- 过渡的时间：transition-duration: 1s;
- 过渡延时：transition-delay: 1s;
复合样式这么写：transition: width 1s linear 1s,height 5s ease-in-out 2s;
- 过渡效果
- ease-in 规定以慢速开始的过渡效果
- ease-out 规定以慢速结束的过渡效果
- ease-in-out 规定以慢速开始和结束的过渡效果
变换
设置基准点：transform-origin设置3D效果： transform-style:preserve-3d 设置翻转部分隐藏：backface-visibility: hidden;设置景深：perspective: 1000px;
平移
translate(m,n)注意写项目要加前缀括号中参数是水平方向和垂直方向复合样式：transform: translate(100px,100px);X轴方向水平平移：transform: translateX(100px);Y轴方向竖直平移：transform: translateY(100px);translate的百分比是相对于自身的负值是向左或向上移动自身的一半(-50%)transform: translate(-50%,50%);
缩放
scale(m,n)复合样式：transform: scale(2,0.5);X轴方向水平缩放：transform:scaleX(10);Y轴方向垂直缩放： transform:scaleY(2);
旋转
rotate(n) n指角度默认样式旋转：transform: rotate(360deg);X轴旋转：transform: rotateX(180deg);Y轴旋转：transform: rotateY(180deg);
倾斜
skew(n) n指角度复合样式:transform: skew(360deg,360deg);XY和上面一样 不写了
动画
代码
@keyframes move{ from{ transform: translate(0,0); } 30% { transform: translate(200px,200px); background-color: #DAA520; } 70%{ transform: translate(500px,0); background-color: #FFC0CB; } to{ transform: translate(0,0); }} 样式
- 平常写的复合样式：animation:move 5s;（这里的move是动画名）
- 分开写的样式：
- 动画名：animation-name: move;
- 动画时长：animation-duration: 5s;
- 动画循环次数：animation-iteration-count: infinite;
- infinite 无限循环
- 动画播放顺序：animation-direction: alternate;
- reverse倒序 alternate 往返运动
- 运动曲线：animation-timing-function: linear;
- ease ease-in ease-out
- 动画延时：animation-delay: 1s;
- 运动状态：animation-play-state: running;（一般在hover效果里）
- pause 暂停（
是可以练跟枪的效果(小声bb)）
- pause 暂停（
动画库的使用
- 先link动画库
- 链接：https://pan.baidu.com/s/1xtTyPSJ-UrFHsV6RuaaVtw 提取码：3tgs
- 然后使用
- 第一种方式：动画名使用动画库中定义好的——animation: bounce 2s;
- 第二种方式：class="animated +动画名"——
阴影
文字阴影
text-shadow(n,m,p,q)前两个数分别为水平方向和垂直方向,一定要设置,不设置没有阴影效果第三个数是模糊度 第四个是颜色text-shadow: 20px 20px 10px yellow;
盒子阴影
box-shadow(n,m,p,q)四个值分别为:水平偏移 垂直偏移 模糊距离 阴影颜色box-shadow: 2px 2px 2px rgba(0,0,0,0.6);inset:设置成内阴影box-shadow: 0 0 20px red inset;
怪异盒模型
box-sizing: border-box;别人加内边距是把最大圈往大了顶,怪异盒模型是把内容往小了顶例如:设内容200x200 ,加20的内边距正常盒模型:内容200x200 外框240x240怪异盒模型:内容160x160 外框200x200
线性渐变
background-image: linear-gradient(to right/bottom/top/left + color)background-image: linear-gradient(角度 + color)是对background-image进行的操作background-image: linear-gradient(to right,red,orange,yellow,green,cyan,blue,purple);定个div设宽高自己运行看效果去
径向渐变
background-image: radial-gradient这个地方就不写注释了 相信可以看懂background-image: radial-gradient(200px at right top,maroon 60%,chocolate 80%,black 90%);
上面那行例子代码,加个50px圆角 你将会得到一个从望远镜看火星的视角(什么玩意)