梳理一下html与css的知识点

HTML

标签

加粗：b strong
倾斜：i em
删除线：s del
下划线：u ins

特殊符号

表格

属性：
rowspan：合并行，等于几就是占几行，
colspan: 合并列，等于几就是占几列
要合并的对应行列要空出相应的单元格

有序列表

ol type-改变前面序号的类型 有a,A,1,I,i
li 为列表项，type 会该变现在的序号类型，只改变类型，序号该是第几个还是第几个。

无序列表

ul type-前面的修饰符类型，有square正方形，circle 空心圆，disc 实心圆

自定义列表

dl – 列表区域
dt – 列表标题
dd – 列表项

form 表单

action 表单数据提交的地址
method 表单数据提交的方式 get（默认） post
表单内容：
input – type属性：
text 文本框 默认
password 密码框
submit 提交按钮
reset 重置按钮
radio 单选按钮
checkbox 复选框
file 文件
image 提交
button 普通按钮
h5新增type
email 邮箱
color 颜色选择器
url 提供输入网址的输入框
number 只能输入数字
range 进度条 默认是50 value 可以指定当前进度
date 日历，年月日
datetime 浏览器支持的日历
datetime-local 年月日时分
month 年月
week 整年的第几周
time 时分
tel 手机号，在移动端触发数字键盘
– name属性：传值用 一般是后台使用
– value属性：传值用 一般是用户使用
– checked：单选按钮，多选按钮，复选框

问：get和post传值有什么区别
答：
get不安全，数据会跟在url后面
post安全，数据会隐藏起来
get有大小的限制，不能超过2000 字节
post没有限制

label 绑定

label for属性绑定标签值，当点击label标签时，其绑定的input值会显示为获取到焦点的状态

button

type - button 普通按钮 submit 提交按钮 reset 重置按钮

select下拉列表

option 下拉列表项
– value 下拉列表内容对应的值
– selected 默认选择项

canvas 画布

embed 微表情

CSS

css 的引入方式：内嵌式 内联式 外联式
CSS 的三大特性：继承 覆盖 优先级
继承：子代会继承父代的样式
覆盖：子代的样式会覆盖父代的样式
css的优先级：! important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符 > 继承 （如果优先级一样，下面的样式会覆盖上面的样式）

C3新增选择器

:first-of-type {}
:last-of-type {}
:nth-of-type(n) {} 第n个标签
:nth-of-type(-n+i) {}前i个元素
:nth-last-of-type(-n+i){} 后i个元素
:nth-of-type(odd){} 奇数个
:nth-of-type(even){} 偶数个
:empty{} 空标签，该元素内什么都没有
:target{} 锚点
:checked{} 被选中
:disabled{} 禁用
标签[属性名 = 属性值] {}
标签[属性名 ^= 属性值] {} 属性名以属性值开头
标签[属性名 $= 属性值] {} 属性名以属性值结尾
标签[属性名 *= 属性值] {} 属性名中包含属性值

锚点

点#nei1 则内容1的 样式变为 red；

文本修饰

text-decoration 文本修饰
取值： none 啥也没有
overline 上划线
underline 下划线
line-through 删除线

1 块级元素 block

独占一行
宽度默认是父盒子的百分之一百
可以设置他的宽高
块级元素里面可以书写 块级元素 行内元素 行内块元素
内边距和外边距都可以设置
注意： 文本标签内不能嵌套块级元素
例：div h1-h5 等等

2 行内元素

不能设置高度 和宽度
一行可以存在多个
宽高是内容本身
行内元素里面只能书写行内元素
margin 只有上下不生效，左右生效，padding四周都生效
注意： a标签里面不能嵌套a标签
例：a span i label strong等等

3 行内块元素

一行可以存在多个
宽高我们可以设置
margin和padding四周都会生效
宽高不设置默认就内容本身
例：img input select button textarea;

用display进行转换

背景透明 transparent

0-1

背景渐变

线性渐变：
background：linear-gradient（45deg,pink,blue）
径向渐变：
background：redial-gradient（circle,pink,blue）

超出部分隐藏

单行文本：
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
多行文本：
-webkit-line-clamp: 3;//三行
overflow:hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;

2D

移动
transform：translate（x ,y）;
旋转
transform：rotate（45deg）
缩放：
transform：scale(n) n>1放大，n<1缩小
扭曲：
transform：skew(x,y) xy为角度

3D

3D需要有景深
perspective：300px;

过渡

transition:属性 时间 线性速度

动画

标签：{
animation：动画名 执行时间 曲线速度 延时 次数 下次播放顺序
}
@keyframes 动画名 {
from{初始状态}
to{结束状态}
}

媒体查询

@media only screen and ( min-width:770px )and (max-width:1024px){
div{样式}
}