本博客用于本人在学习前端的积累和感悟，仅供学习参考和翻阅
一、HTML
<head>
头部
<meta charset="UTF-8">
定义这是一个HTML文件，声明使用的字符格式
<title>
标签名，显示在标签页
<link rel="stylesheet" href="*.css"/>
声明文档与外部资源的关系（引入.css样式文件）
css重置技术
*
<link rel="stylesheet" href="reset.css/Normalize.css"/>
<link rel="stylesheet" href="global.css"/>
先将样式重置归零，再引用相应的样式
reset.css（移动端）/Normalize.css（跨平台，修复bug） 清除标记自身带来的样式，保证跨浏览器的一致性
<input type="reset"> 重置按钮
<mark>
带标记的文本，默认为黄色背景色
<blockquote>
大块引用文本（无引号，有缩进）
<q>
小块引用（带引号，无缩进）
<aside>
？？？文本，用于链接、侧边栏等不影响文档的整体性
<address>
作者信息，斜体，一般放在页面最下方
<input type="text" placeholder="框中内容">
输入内容
<select name="" id="">
<option value="">选项1</option>
<option value="">选项2</option>
</select>
下拉菜单
form action=""
form methed="" get/post
<sup> 文字上标
<sub> 文字下标
®
已注册符号
©
版权符号
二、CSS
文本样式
text-align: justify; 文本格式：两端对齐
text-indent: 40px / 10%; 文本首行缩进
font-family: "楷体"； 字体样式：楷体
font-style: italic; 字体样式：斜体
line-height: 100px; 总高度100，文本居中显示，使文本中线对齐
vertical-align: baseline, sub, super, top, text-top
文本对齐方式：默认，对齐下标，对齐上标，对齐行中最高元素，顶端与父元素字体顶端对齐，
text-transform: capitalize; 首字母大写
text-transform: uppercase; 选中字母大写
text-transform: lowercase; 选中字母小写
letter-spacing: 10px; 字间距10px
margin
外边距（值可以为负），垂直方向的外边距会重叠（取大值）
border
边框
border: 1px solid red; 设置宽度为1像素的红色实体边框线
border: 1px dashed red; 虚线边框线
border: 1px dotted red; 点状边框线
border: 1px double red; 双线边框线
border-radius: 50%; 四边全圆倒角（长宽相同呈正圆）
border-top-left-radius: 2px; 左上角呈半径为2像素的倒角
padding: 10px 20px; 值不可为负
内边距：上下10px，左右20px
padding: 10px 20px 30px;
内边距：上10px，左右20px，下30px
padding: 10px 20px 30px 40px;
内边距：上10px，右20px，下30px，左40px
outline: 10px solid black;
border要占用像素，outline不占用
display: line-block;
将块级元素转换为行内块级元素
cursor: pointer, waite; w-resize;
鼠标移上之后该元素添加手型：点击，沙漏，左右位移标识；
transform: skew(20deg);
背景向右倾斜；
transform: rotate(90deg);
顺时针旋转90度
box-sizing: border-box;
将盒模型的边框包含在content内，让padding的宽度和border的宽度包含在元素的width内
触发bfc
bfc块级格式化上下文，给父级设置了以下属性，可以保持父级属性不被子级影响，反之亦然
- 根元素
- float
- overflow: auto、scroll、hidden; 子级超出父级范围：自动、出现滚动条、隐藏； overflow-x: scroll; overflow-y: scroll;
- display: table-cell、table-caption、inline-block、flex、inline-flex; 转化为其他元素
- position: absolut、fixed;
overflow: hidden;
子级超出父级范围：不显示；
overflow: scroll
子级超出父级范围：出现滚动条； 父级的范围和属性不变，拉动滚动条可以查看子级
overflow-x: scroll
列表样式
li{
list-style: none; 去掉小圆点
list-style: upper-roman; 大写罗马数字
list-style: lower-roman; 小写罗马数字
list-style: upper-alpha; 大写英文
list-style: lower-alpha; 小写英文
}
选择
#id{ } id选择器
.class{ } class选择器
元素 [ 属性=属性值 ] { } 属性选择器
li: first-child; last-child;
选择第一个元素（当li的父级第一个元素是li时） ，选择最后一个元素（当li的父级最后一个 元素是li时）
li: first-of-type; last-of-type;
选择父级里特定类型的第一个元素 ，选择父级里特定类型的最后一个元素
nth-child() nth-of-type() 用法同上
a: link{ } 未被访问（初始状态）
a: hover{ } 鼠标移入/悬停
a: active{ } 点击时
a: visited{ } 访问以后
伪元素
*: first-letter 第一个字（字母）
*: first-line 第一行
*: before 在...之前
*: after 在...之后
伪类
*: nth-child(3n+1) 选择父级中某个类型为*的项【每3项选择一次，第一项从（3*0+1）开始】
*: nth-of-type(3n+1) 选择父级中特定类型的某项 【每3项选择一次，第一项从（3*0+1）开始】
浮动
- 浮动会脱离文档流
- 浮动会导致其父级高度塌陷（高度变为0）
- 行内元素浮动后（脱离文档流）被视为块级元素
- 浮动对文字有包裹性（如果文字过少，需要手动设置文本的宽度）
- 如果 A 浮动影响了 B ，则在 B 上增加 clear: both 即可消除影响
float: right; 右浮动（列表项从右边依次排列）
clear: both; 清除浮动
定位
相对定位（相对自身原来的位置）
position: relative;
left: -100px; 向左移动100px
绝对定位（脱离文档流）
position: absolute
top: 0px; 置顶
非静态定位（绝对定位会以包含它的非静态定位元素定位）
父级 position: relative; 定位父集
子级 position: absolute; 定位到父集里的绝对位置
固定定位（脱离文档流，以页面视口为准）
position: fixed;
边框/阴影
线型
boder: 1px solid #58a; 直线
border: 10px dashed red; 虚线
border: 10px dotted black; 点线
border: 10px double blue; double点线
框
boder-top: 1px solid #58a; 顶部
border-right: 10px dashed red; 右边
border-left: 10px dotted black; 左边
border-bottom: 10px double blue; 底部
倒角
border-radius: 10px/50%; 圆倒角
阴影
box-shadow: 5px 5px 20px 10px #000; 元素阴影：X Y 模糊 外延 颜色
图片格式
background-repeat: repeat; no-repeat; repeat-x; reapt-y; 背景图设置平铺方式：平铺 ；不平铺；水平平铺；竖直平铺；
背景色渐变
rgb(255,255,255) 白色
rgba(255,255,255,0.5) 白色50%透明度
线性渐变
background: linear-gradient(red, yellow); 纵向背景色渐变：红色，黄色
background: linear-gradient(to right, red, yellow) 向右渐变色：红色，黄色
background: linear-gradient(-90deg, red, yellow) 顺时针90度渐变色：红色，黄色
径向渐变
background: radial-gradient(red, yellow) 径向渐变（呈圆形扩散）
状态渐变
transition: all/width linear/ease-in 1s;
动作渐变：所有/宽度 匀速 时长
-webkit-transition: all linear .5s 浏览器兼容：谷歌
-moz-transition: all linear .5s; 浏览器兼容：
-ms-transition: all linear .5s; 浏览器兼容：Microsoft
-o-transition: all linear .5s; 浏览器兼容：欧朋
transition: all linear .5s;
注：transition属性需渐变，必须设置原始状态（如需top: 100px;则先设置top: 0;），否则无渐变效果
动画
animation: name 2s 3/infinite; 动画属性，首先声明（写在元素属性里）
动画： 名称 时长 3次/循环
@keyframes name{
from{
} 从一个状态变化到另一个状态
to {
}
}
@keyframes name{
0%{
}
30%{
分部制定变化流程
}
100%{
}
}
图片替换技术（点击logo跳转主页）
.h1 a{
display: block; 先将行内标记转换为块集标记
line-height: 200px; 再修改高度，将文字移除显示范围
}
.h1{
//定义块大小
overflow: hiddeng; 将父块范围之外的内容隐藏
}