1.HTML
标签
<h1~h6> 标题
<p> 段落
<img scr="文件路径" alt="错误时显示信息"> 图片
<a href="跳转地址或#"> 超链接
<ul> 无序列表
<ol> 有序列表
<li> 列表项
<div> 块元素
<span> 行元素
<form action=""> 表单
<label for="关联项 指向id">
<input type="text" placeholder="背景文字"> 文本框
<input type="radio"> 单选框
<input type="checkbox"> 多选框
<select> 下拉框
<option value=“”> 下拉框选项
<textarea name="" id="" cols="长" rows="宽"> 文本域
<input type="submit"> 提交表单按钮
<button> 按钮
<strong> 加粗
<i> 斜体
<table border="1" cellspacing="0" cellpadding="10"> 表格
<tr> 表格行
<th> 表格表头
<td> 表格列
其他属性及重点
行级元素
<a> <span> <i> <strong> <img> <input>
属性:
1.多个元素占一行 无法设置宽高
2.不能嵌套块级元素 只能嵌套行级元素
块级元素
<div> <p> <ul> <li> <ol> <h1~h6> <table>
属性:
1.一个元素占一行 可以设置宽高
2.块级元素可以嵌套行级元素、块级元素和行级块元素
3.<p>和<h1~h6>标签特殊,不能嵌套块级元素。
2.CSS
将css引入html
第一种方法
·<style>
第二种方法
·引入css文件 <link rel="stylesheet" href="文件路径">
第三种方法
·内联引入css <a style="内容">
选择器
1. 标签选择器
div{
代码块
}
2. id选择器
# id名{
代码块
}
3. class选择器
.class名{
代码块
}
4.后代选择器
父代名 后代名{
代码块
}
5.子代选择器
父代名 > 子代名{
代码块
}
6.伪类选择器
名字:hover{
代码块
}
7.兄弟选择器
名字 + 同级名字{
代码块
}
8.群组选择器
名字+名字+名字{
代码块
}
9.尾元素选择器
名字::after{
代码块
}
名字::before{
代码块
}
选择器优先级
1.选择器的优先级
style内联样式优先级最高 1000
#id id选择器 100
.class 类选择器==a:伪类选择器 10
div 元素选择器==a::伪元素选择器 1
2.优先级相同的情况下 写在后边的会覆盖前面的
3.id 永远比class优先级高 即使class10级嵌套,也没用
CSS基本语句
background 背景
width 宽
height 高
text-align 文本的水平对齐方式
line-heightheight 文本的垂直对齐方式(数值与height相同则垂直居中)(仅限于单行文本)
color 文本颜色
text-indent 首行缩进
text-decoration: none; 去掉下划线
font-size 字体大小
font-family 字体
font-weight 字体加粗(bold为700px 值在100~900之间)
font-style: italic; 斜体(正常为none)
cursor: pointer;出现小手(类似放到a标签上的视觉效果)
CSS盒模型
1.width 正常宽
2.height 正常高
3.padding 內间距
eg:padding: 20px;(上 右 下 左都为20px)
padding: 20px 10px;(上下为20px 左右为10px)
padding: 1px 2px 3px 4px;(上 右 下 左分别为1px 2px 3px 4px)
padding-top: 1px;(上为1px)
4.border 边框
eg:border: 1px solid #000;(边框大小1px 实心 背景色)
border-style: solid;(solid为实心 none没有样式)
border-top: 5px solid pink;(顶部边框)
5.margin 外边距
eg:(同padding)
**标准盒模型宽度=width + padding + border
CSS怪异盒模型
box-sizing: border-box; 怪异盒模型（怪异盒模型 width不变）
box-sizing: border-box 怪异盒模型
content-box 标准盒模型
CSS浮动
float: left; 左浮动
float: right; 右浮动
clear: both; 消除浮动 (兄弟级别)
overflow: hidden; 溢出隐藏
.parent::after{
content: '';
/* 将after设置成块级元素 */
}
**
1.浮动的元素脱离文档流,空间释放
2.塌陷：子元素浮动导致父元素没有高度导致塌陷
处理办法
(1).父元素overflow:hidden; BFC
(2).父元素添加高度
(3).clear: both; (兄弟级别)
(4)塌陷元素::after{
content:'';
display: block;
clear:both;
}
**
CSS定位
position 定位
position: relative; 相对定位
(1).相对于自己初始位置
(2).2.定位以后空间不释放
position: absolute; 绝对定位
(1).相对于最近已定位的祖先元素 如果没有最近已定位的祖先元素 那就相对于body
(2).定位后空间释放
(3).top,left不设置相当于0 0
(4).动画中无初始值动不起来
(5)top right bottom left 相对于已定位祖先元素的距离
position: fixed; 固定定位
(1).相对于浏览器/文档可视区定位
(2).定位后空间释放
(3).定位后宽度 内容撑的
position: sticky;粘性定位 (实现吸顶效果)
CSS行级元素块级元素
display: inline; 行元素 多个占一行 设置不了宽高
display: inline-block; 行级块元素 多个占一行 可以设置宽高
display: block; 块元素 自己占一行 可以设置宽高
display: none; 隐藏
margin: 0 auto; 块级元素水平居中(行级元素水平居中 父级元素设置 text-align:center)
CSS三角箭头
<style>
div{
width: 0px;
height: 0px;
border: 100px solid transparent;/*transparent 透明色*/
border-top-color: red;
}
</style>
**
宽为0 高为0时 border上边框设置颜色其余为透明正好为三角形
**
CSS旋转 过度
transform: rotate(30deg); 旋转 (顺时针旋转30°)
transform: scale(0.5); 缩放 (缩放0.5倍)
transform: translateX(100px); 位移 (x轴位移100px)
transition: transform 2s linear; 过度 (属性 时间 运动方式(匀速))
CSS 简单动画
transition 需要触发条件
linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
eg:transition: width 2s linear;
animation 直接可以动画 可以做复杂动画
eg:
div:hover{
animation: run 2s ease 3 forwards;//forwards停留在最后
}
@keyframes run{
0%{
idth: 500px;
}
30%{
width: 100px;
}
50%{
width: 300px;
}
80%{
width: 200px;
}
100%{
width: 500px;
}
}
CSS外边距合并
父子元素中外边距合并为两者中较大值
解决方法
1.父元素添加 overflow: hidden;
2.为父元素添加边框
3.为父元素或子元素添加浮动
4.为父元素或子元素添加定位
单行文本溢出小点点
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行文本垂直居中
1.定位
2.弹性盒模型
3.父元素display:table
子元素display:table-cell;
vertical-align:middle
其他
1.行级块元素居中与文字居中相同
2.溢出隐藏必须设置高（height）
