HTML.CSS总结

HTML

HTML（超文本标记语言,英文全称：HyperText Markup Language）
含义：定义页面的结构。由 标题，图片，内容 组成。
HTML元素：用于组成页面内的内容；一个元素的组成<开始标签 元素内容 结束标签>，同时可以包含多个元素，称之为嵌套。
标签：
1.语义化标签：header、nav、article、section、aside，块级元素，可划分区域
2.文本元素：h1~h6、p、q、strong、i 等
3.无语义元素：span、div、pre、br、hr
4.可替换元素：img、audio、vidio,可以设置尺寸的行盒
5.form表单：属性（ action表示提交的地址、 method表示提交方式） input(标签中type的属性值不同，标签的类型就会改变) type的属性值(type=“text”:单行文本输入框、type=“password”:密码输入框、type=“radio”:单选框、type=“checkbox”:多选框、type=“submit”:提交按钮，功能是提交form内容、type=“reset"：重置按钮，功能是恢复成默认值等)
6.列表（无序列表（unorder list）: ul、有序列表(order list):ol）：子元素li(全称list item)
7.超链接：a标签，改变属性值可跳转
8.图片语义化：figure是父元素、img是子元素、figcaption是子元素（表示其内容是图片说明）

CSS

CSS(层叠样式表，英文全称：Cascading Style Sheets)。 含义：定义页面的样式。 引入方式：外部引用、内部引用、行内样式表。 选择器：通配符选择器、元素选择器、类选择器、ID选择器、组合选择器/并集选择器、层次选择器、兄弟选择器、通用选择器、伪类选择器、属性选择器等。
1.浮动（float）：判定元素是否为浮动：元素的float值是否是left和right
2.相对定位：position:relative,启用相对定位（使用left,right,top,bottom设置值对元素进行偏移） 特点：不会影响其他元素，相对位置的元素，原位置和尺寸依然会保留 ；相对位置的元素会覆盖其他元素
3.弹性布局：设置display的值为flex，特点：当一个元素的display值取为flex，所有子元素在一行显示，并且不会超出该元素的宽度。即不会换行（因为每个项目身上都会有一份缩小比列）；
主轴起始方向的设置flex-direction（默认主轴为X轴，交叉轴为Y轴）；
换行 flex-wrap (前提条件：所有项目的宽度之和要大于容器的宽度)；
对齐方式：
主轴justify-content（flex-start开始对齐、flex-end结束对齐，space-around分散对齐，space-between两端对齐，space-evenly平均分配，center居中）
交叉轴align-items（flex-start开始对齐、flex-end结束对齐、center居中）；
align-content多根轴线的对齐方式前提条件：让项目进行换行（flex-start开始对齐、flex-end结束对齐，space-around分散对齐，space-between两端对齐，space-evenly平均分配，center居中）；
align-self设置单个子元素在交叉轴的对齐方式（flex-start开始对齐、flex-end结束对齐、center居中）
4.border-redius,对边框的四个角改变弧度：
取1个值：4个角的弧度；
取2个值时：第1个值代表：左上、右下 第2个值代表：左下、右上；
取3个值时：第1个值代表：左上 第2个值代表：左下、右上 第3个值代表：右下；
取4个值时：第1个值代表：左上 第2个值代表：右上 第3个值代表：右下 第4个值代表：左下
5.IE盒模型： 盒子的组成：margin,border,padding,content；box-sizing: border-box;选择边框盒，增加padding,border不会改变盒子尺寸，但是content的尺寸会相对缩小
6.字体类
color：字体颜色
font-weight：字体粗细
font-size：字体大小
font-family：字体样式
7.背景类
background-color：背景色
background-image：背景图片
background-size：背景图尺寸
background-position：背景图位置
8.盒子阴影 box-shadow：
第1个值: X轴偏移量（正：向右，负：向左）；
第2个值: Y轴偏移量（正：向下，负：向上）；
第3个值: 模糊值；
第4个值：阴影扩散的范围（可写可不写）；
第5个值：颜色；
9.过渡transition，定义：在规定时间内，把元素从一个值变化到另外一个值的过程，展现到页面
transition-property：对哪些属性进行过渡；
transition-duration：指定完成过渡所需的时间
transition-timing-function：指定过渡的方式
transition-delay：过渡出现的延迟时间
10.动画animation：操作步骤：
1、定义动画：@keyframes 动画名字｛进行状态的添加｝
2、使用动画animation：动画名字
animation-name：动画名字；
animation-timing-function：动画过渡的方式，取值与transition过渡的方式相同；
animation-duration：动画所需的时间；
animation-iteration-count：动画播放的次数 循环播放 infinite；
animation-delay：动画出现的延迟时间；
11.变形transform：取值
scale（缩放的倍数）缩放
skew（倾斜的角度，单位是deg）倾斜
rotate：旋转  有X轴，Y轴，Z轴三个方向
translate（X轴偏移量  Y轴偏移量）偏移量