html和css介绍一下自己,一、html和css

一、html基本标签

1.基础标签：

标题标签：h1--h6

容器标签：div

行标签：span

跳转标签：a  href  target(selflank)

图片标签：img --元素 src,alt

段落标签：p

分段标签：br

分割标签：hr

2.html列表标签：

去掉独占行：style='list-style:none;'

ol:有序列表   type

ul：无序列表  type

dl:图文列表 dt:标题  dd:放内容

3.块标签：div 、p、dl 、ol 、ul

4.行内标签：span 、a

5.行内-块标签 ： img

6.改变属性：display：blockinlineinlien-block

one

7.表格标签：

表格table

表格标题

表头	表头	表头
列

表格的属性：

border:边框，值为数字类型

cellpadding: 单元格内边距

cellspacing：单元格外边距

align:表格的对齐形式，可选值：left  左对齐

right  右对齐

center 居中

align属性 如果写在table上，table表格相对浏览器页面的对齐方式；如果写tr上，td中的文字对齐方式

设置宽度。如果在table，设置的是整个table的宽；如果在td上，设置对应列的宽

合并属性：

行合并：rowspan=5  把多行合并成一行

列合并：colspan=3  把多列合并成一列

8.表单

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标签的值

form标签属性：

action: url地址，数据提交的地址

method: 提交方式， get / post ，默认是get

二、CSS样式

css样式是美化html的装饰。

css样式有三种写法：

1.行内样式：把样式写在标签内部，style

2.内部样式表：在head中定义一个style，在这个标签中写当前页面的样式

3.外部样式表：在html文件外创建.css结尾的文件，在文件中写css样式，引入页面需要的link标签。

css样式：

1.设置字体大小和颜色：font-size:12px;color:red  rgb(0,0,0)  #000

选择器：

id选择器：id=变量名   #变量名{}

类选择器  class=变量名 .变量名

标签选择器  直接找标签

伪类选择器  before/:after  :nth-child()

通用选择器   *

子集选择器  父级>子集

后代选择器  父级  后代

盒模型：

content : 写入内容的地方

padding：内边距,撑开内容和边框直接的距离

border：边框

margin：外边距

块级元素、行内-块级元素可以设置宽高，这里设置的宽和高指的是content的宽高

padding/margin/border都是是四个方向上，四个方向上的值可以不同

四个方向：上为top 下为bottom 左为left 右为right

border由三个属性组成：宽度(border-width)、样式(border-style)、颜色(border-color)

border的简写方式：border:1px solid/dotted/dashed #000;

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

浮动

让元素脱离文档流，“漂”起来。

文档流：前端页面在浏览器中展示时是从左上角开始排练，横向从左到右依次排练行内元素或行内块元素，纵向是从上到下依次排练块级元素。

浮动关键字：float: left / right

浮动后：元素会脱离文档流，"漂"在离它最近的上一个块级元素之后，变成行内-块级元素

元素浮动后一个问题：

浮动元素后面元素会受浮动影响，使用浮动后需要清除浮动

清除浮动方案：

1.添加一个空标签，给空标签设置clear属性 clear:left / right / both

2.给有浮动的元素添加一个父级元素，然后让父级元素清除浮动(overflow: hidden;)

定位

定位关键字：position

定位：相对定位、绝对定位、固定定位

相对定位(relative)：是元素本身相对自己的一个偏移量，但不脱离文档流

绝对定位(absolute)：是元素相当于父级(会有一个相对定位)的一个偏移量，是脱离文档流的

固定定位(fixed)：相当于浏览器窗口定位，不会随页面滚动发生位置改变，也是脱离文档流的

定位有四个方向：

top:相对顶部的偏移量

bottom:相对顶部的偏移量

left:相对左边的偏移量

right:相对右边的偏移量

hover属性：鼠标放上去的效果，鼠标离开后会恢复到原来的效果

元素:hover{

}

css3 转换、过渡、动画

转换：transform

位置转换：translate(x,y)

角度转换：rotate(20deg)

缩放： scale(x,y)  0~正无穷  0~1:缩小  1~正无穷：放大

翻转：skew()

过渡：transition

过渡类型：transition-property :all 所有的类型

过渡时间：transition-duration :秒单位的数字 5s

过渡曲线：transition-timing-function ：linear  匀速执行

: ease   先慢 后快 最后再慢

过渡延时：transition-delay ： 秒单位的数字

动画：animation

动画名称：animation-name

动画执行时间：animation-duration

动画曲线：animation-timing-function

动画延时：animation-delay

动画执行次数：animation-iteration-count ：值可以是数字，infinite无限次数播放

动画播放周期：animation-direction

动画是否是播放状态：animation-play-state ： playing | paused

动画播放前和播放后的状态：animation-fill-mode

@keyframes:定义动画的关键帧

@keyframes 名称:{

from(0%):{

}

百分数(10%):{

}

to(100%):{

}

}