一、html和css
2021-04-03 02:27
标签：idt rgb oat mod 基本标签 关键帧 添加 ddl self 一、html基本标签 1.基础标签： 一、html和css 标签：idt rgb oat mod 基本标签 关键帧 添加 ddl self 原文地址：https://www.cnblogs.com/dangjingwei/p/12546138.html
容器标签：div
行标签：span
跳转标签：a href target（self\blank）
图片标签：img --元素 src,alt
段落标签：p
分段标签：br
分割标签：hr
2.html列表标签：
ol:有序列表 type
ul：无序列表 type
dl:图文列表 dt:标题 dd:放内容
3.块标签：div 、p、dl 、ol 、ul
4.行内标签：span 、a
5.行内-块标签 ： img
6.改变属性：display：block\inline\inlien-block\none
7.表格标签：
表格table
//行
表头
表头
表头
列
表格的属性：
border:边框，值为数字类型
cellpadding: 单元格内边距
cellspacing：单元格外边距
align:表格的对齐形式，可选值：left 左对齐
right 右对齐
center 居中
align属性 如果写在table上，table表格相对浏览器页面的对齐方式；如果写tr上，td中的文字对齐方式
width: 设置宽度。如果在table，设置的是整个table的宽；如果在td上，设置对应列的宽
合并属性：
行合并：rowspan=5 把多行合并成一行
列合并：colspan=3 把多列合并成一列
form 表单标签
区域块：fieldset > legend 设置区域块的名称
用户输入框： input type=‘text‘
单选按钮： input type=‘radio‘
多选按钮： input type=‘checkbox‘
下拉框： select > option
密码： input type=‘password‘
上传文件： input type=‘file‘
范围数字： input type=‘range‘
提交： input type=‘submit‘
重置： input type=‘reset‘
按钮： button
文本域： textarea
input标签属性：
placeholder 设置提示文字
name 设置input标签的提交数据键名
value 设置input标签的值
action: url地址，数据提交的地址
method: 提交方式， get / post ，默认是get
css样式有三种写法：
1.行内样式：把样式写在标签内部，style
2.内部样式表：在head中定义一个style，在这个标签中写当前页面的样式
3.外部样式表：在html文件外创建.css结尾的文件，在文件中写css样式，引入页面需要的link标签。
1.设置字体大小和颜色：font-size:12px;color:red rgb(0,0,0) #000
选择器：
id选择器：id=变量名 #变量名{}
类选择器 class=变量名 .变量名
标签选择器 直接找标签
伪类选择器 before/:after :nth-child()
通用选择器 *
子集选择器 父级>子集
后代选择器 父级 后代
盒模型：
content : 写入内容的地方
padding：内边距,撑开内容和边框直接的距离
border：边框
margin：外边距
padding/margin/border都是是四个方向上，四个方向上的值可以不同
四个方向：上为top 下为bottom 左为left 右为right
border由三个属性组成：宽度(border-width)、样式(border-style)、颜色(border-color)
border-bottom:3px red solid;
padding/margin的简写：
第一种形式：只有一个值，这时四个方向都使用这个值 padding:10px;
第二种形式：两个值，这时上和下10px,左和右是20px; padding:10px 20px;
第三种形式：三个值，这时上10，左右20px，下30px padding:10px 20px 30px;
第四种形式：四个值，上10 ，右20 ，下30，左40 padding:10px 20px 30px 40px;
background
背景颜色：比背景图片更靠近底层。background-color:
背景图片：background-image:url(‘图片路径‘)
背景图片大小：background-size:x轴方向 y轴方向
背景定位：background-position:x轴方向 y轴方向
背景重复：background-repeat:no-repeat; repeat-x; repeat-y;
宽：width
高：height
行高：line-height
文字对齐效果：text-align:center/left/right
溢出隐藏：overflow:hidden
垂直对齐方式：vertical-align：top middle bottom
浮动
让元素脱离文档流，“漂”起来。
文档流：前端页面在浏览器中展示时是从左上角开始排练，横向从左到右依次排练行内元素或行内块元素，纵向是从上到下依次排练块级元素。
元素浮动后一个问题：
浮动元素后面元素会受浮动影响，使用浮动后需要清除浮动
清除浮动方案：
1.添加一个空标签，给空标签设置clear属性 clear:left / right / both
2.给有浮动的元素添加一个父级元素，然后让父级元素清除浮动(overflow: hidden;)
定位
定位关键字：position
定位：相对定位、绝对定位、固定定位
相对定位(relative)：是元素本身相对自己的一个偏移量，但不脱离文档流
绝对定位(absolute)：是元素相当于父级(会有一个相对定位)的一个偏移量，是脱离文档流的
固定定位(fixed)：相当于浏览器窗口定位，不会随页面滚动发生位置改变，也是脱离文档流的
top:相对顶部的偏移量
bottom:相对顶部的偏移量
left:相对左边的偏移量
right:相对右边的偏移量
hover属性：鼠标放上去的效果，鼠标离开后会恢复到原来的效果
元素:hover{
css3 转换、过渡、动画
位置转换：translate(x,y)
角度转换：rotate(20deg)
缩放： scale(x,y) 0~正无穷 0~1:缩小 1~正无穷：放大
翻转：skew()
过渡类型：transition-property :all 所有的类型
过渡时间：transition-duration :秒单位的数字 5s
过渡曲线：transition-timing-function ：linear 匀速执行
: ease 先慢 后快 最后再慢
过渡延时：transition-delay ： 秒单位的数字
动画名称：animation-name
动画执行时间：animation-duration
动画曲线：animation-timing-function
动画延时：animation-delay
动画执行次数：animation-iteration-count ：值可以是数字，infinite无限次数播放
动画播放周期：animation-direction
动画是否是播放状态：animation-play-state ： playing | paused
动画播放前和播放后的状态：animation-fill-mode
@keyframes 名称:{
from(0%):{
百分数(10%):{
}
to(100%):{
}