常用html/css总结
常用标签
使用标签的目的，不是为了程序员，为了浏览器排名。使用正确的标签做正确的事情
1、 可输入框 ，type限制类型 text文本 number数值类型 password密码 radio单选框 （单选框如果想要成为真正的单选框，需要加一个相同的name值） checkbox 多选框
按钮：submit 提交 reset 清空
常用属性 ：autofocus(自动聚焦) checked默认选框选中 selected下拉选框默认选中
2、
换行
用户名
手机号
密码
性别 男
女
爱好 游戏
音乐
csdn
3、
4、
| 姓名 | 学号 | 班级 |
| 姓名 | 学号 | 班级 |
| 姓名 | 学号 | 班级 |
5、引入图片 src放置图片地址 alt图片不能正常显示的时候，提示文字 title鼠标移入提示文字
6、h1-h6标题文字 h1语义非常重，一般一个页面，只能有一个，用来引入logo
h2一般一个页面只能有两个，h3一般一个页面只能有三个，其余自定义
7、
段落文字引入一段话一段文字
8、 页面跳转超链接a href放置的是跳转的页面地址。 target="_blank" 加此属性，在新页面打开。不加默认在当前页面打开
360导航9、 ul li结构类似的布局 ，无序，ol li实现有序列表。 ul的子级(第一级包裹的)只能是li ，li的父级(第一级包裹该标签的)只能是ul
10、
不必为每一个
可以对同一个
11、span b u i 引入小元素，一些不太重要的元素
12、上标 锚点就是一个小标记，用户做的一个标记，点击以后可以跳转到这个标记里面，跳转的地方使用name取值，点击的地方使用#name值
HTML
混血模特被封“日版迪丽热巴” [1] ，坐拥万千粉丝的她还是高材生
[2] ！混血模特被封“日版迪丽热巴”，坐拥万千粉丝的她还是高材生！
混血模特被封“日版迪丽热巴”，坐拥万千粉丝的她还是高材生！
混血模特被封“日版迪丽热巴”，坐拥万千粉丝的她还是高材生！
混血模特被封“日版迪丽热巴”，坐拥万千粉丝的她还是高材生！
混血模特被封“日版迪丽热巴”，坐拥万千粉丝的她还是高材生！
CSS常用样式
同样的样式 权重一样 后写的生效
1、文字颜色 color:颜色&颜色代码 color:red; color:#ffffff;
2、文字大小 font-size:20px; (文字不能小于12px 默认16px）
3、文字居中 text-alian:center;
4、首行缩进 text-indent:2em; (em倍数 参考文字大小)
5、字体 font-family:"楷体";（字体的值需要加引号 ）
6、去除下划线 text-decoration:none;（文字下划线：text-decoration: underline;）
7、文字加粗 font-weight:bold;（文字不加粗：font-weight：normal;）
8、鼠标移入增加小手 cursor:pointer;
9、增加圆角 border-radius:10px;（值越大圆角越明显 值为50%时是圆形）
10、背景颜色 background:#ffffff;
11、宽度 高度 width:100px; height:100px;
12、边框 boder: 1px solid #000; (三个值 用空格隔开 第一个值：线的粗细，第二个值：线的类型 solid实线 dashed虚线 dotted点线，第三个值：线的颜色
13、外边距 margin：100px; 内边距 padding：20px;
margin和padding 多个值使用空格隔开
一个值：上下左右
两个值：第一个值上下 第二个值左右
三个值：第一个值上 第二个值左右 第三个值下
四个值：上右下左
margin padding border都可以只可以设置一个方向
margin-top margin-bottom margin-left margin-right
margin：0px auto ；表示上下0外边距 左右居中
14、选择器:hover{
样式 鼠标移入后样式才会生效，鼠标移出无效果
}
15、图片背景
background:url('图片地址') no-repoat center center pink;
第一个值图片地址 url('地址')
第二个值平铺方式，默认平铺 no-repeat repeat-x水平轴平铺 repeat-y垂直轴平铺
第三个值：水平方向坐标 可以书写具体值 也可以left center right
第四个值：垂直方向坐标 可以书写具体值 也可以top center bottom
第五个值：颜色
Rgba（r，g，b，a）透明色 a:0-1之间 越小越透明
16、渐变色 background:linear-gradient(90deg，red,pink,blue,yellow);
第一个值可以书写渐变角度 或者方向 to top，to bottom
17、 固定定位 position: fixed;
float:left;
float:right;
浮动：实现的效果就是水平排列。只有两种，左右浮动
1、不会随着窗口滚动而滚动
2、参照物是可视窗口 top left right bottom
left和right不能同时书写
top和bottom不能同时书写
3、固定定位完以标签变成行内块(设置宽高有效，可以在一行排列)
4、固定定位以后不占位，后写的(根据html顺序)在上面
18、相对定位 position: relative;
1、单独使用的时候，一般用来做微调。
2、相对定位，参照物是自身原来的位置
top left right bottom
left和right不能同时书写
top和bottom不能同时书写
3、相对定位，占位，占得是原来的位置
19、绝对定位 position: absolute;
绝对定位：一个标签绝对定位，会一直向上寻找，直到找到有定位方式(任意一种定位方式都可以，如果原来没有默认定位方式，一般使用相对定位，相对定位对别的标签影响最小。)的标签，然后以该标签作为参照。
20、Overflow：hidden 隐藏超出标签 解决浮动塌陷 解决外边距塌陷（加在父级）
overflow: auto; 超出部分出现滚动条
21、旋转 transform:rotate(30deg); （角度deg）
22、位移 transform:translate(100px,100px);
23、 放大 transform:scale(3); 小于1缩小
24、垂直对齐 vertical-align: top;
25、阴影 box-shadow:0px 0px 2px 2px red;
26、过渡模块 transition: height 1s 0s,width 1s 1s,border-rudius 1s 2s;
第一个值：样式 可以指定某一个样式 也可以设置所有
第二个值:时间
第三个值：动画曲线 一般是linear
第四个值：动画延迟执行时间
27、动画模块 animation: move 2s infinite linear;
使用动画 animation：动画名字 持续时间 次数infinite（infinite无限次） 动画曲线linear
定义动画 @keyframes 动画名字{
各个状态样式条
}
28、
标签分类：
第一种：单双标签
双标签:<标签>
单标签:<标签>或<标签 />
第二种：行内标签和快级标签
行内标签：和其他标签并排排列 span b u i a
行内标签设置宽高无效，上下外边距无效，左右有效
上下内边距有效，不占位。左右有效且占位
块级标签：独占一行ul li h1-h6 p div
行内块：在一行排列，设置宽高有效 img input td tr table
标准流：行内标签水平，块级标签垂直。
做网站的时候，首先需要考虑的是标准流。再次是浮动。
浮动以后，脱离标准流，变成行内块
29、:nth-of-type() 可以选择具体某一个标签，也可以选择某一类标签2n 3n 4n
30、选择所有标签 *{
margin: 0px;
padding:0px;
}