本博客用于本人在学习前端的积累和感悟，仅供学习参考和翻阅
一、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;
列表样式
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 即可消除影响
状态渐变 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; 将父块范围之外的内容隐藏 }