前端基础： HTML 和 CSS
一、HTML 初识
（1）基础认知
1、网页组成：文字、图片、超链接、音频，视频等
网页本质：前端程序员写的代码（F12）
代码通过浏览器转换成网页（渲染）
2、五大浏览器：IE、Firefox、Chrome（市场份额最多，速度快，效果好）、Safari（apple）、Opera
渲染引擎：浏览器内核
前端工程师常用浏览器：Chrome
3、web标准的构成：让不同的浏览器按照相同的标准显示结果，让展示的效果统一。
构成：结构层，表现层，行为层。
结构层：HTML（页面元素）和内容
HTML（超文本标记语言）
构建基本网页的步骤：新建文字变粗.txt;添加内容并保存；修改后缀为.html;双击文字变粗.html。
例：我要变粗
HTML固定结构：整体、头部、标题、主体
<head>
<title>网页标题</title>
</head>
<body>
网页的主体内容
</body>
开发工具：VS Code（速度快、体积小、插件多）
VS Code 快捷键：
1、快速生成标签：英文+ tab
2、保存文件：Ctrl+s
3、快速查看网页效果 ： alt + b
4、快速生成结构标签：！(英文)+ tab
注释：ctrl + /
<!--注释内容-->
表现层：CSS（页面样式）
行为层：JavaScript（页面交互）
（2）HTML标签学习
双标签、单标签（
、
）
标签的属性：属性名=“属性值”
标签之间关系：父子关系、兄弟关系
标题标签：
文字内容
(h1~h6，大小逐级递减，独占一行，文字都加粗)段落标签:
内容
(段落之间存在间隙，独占一行)换行标签：
（强制换行）
水平线 标签：
(在页面中显示出一条水平线）
文本格式化标签：b加粗、u下划线、i倾斜、s删除线
strong 、ins 、em、 del (标签语义化要求)
图片标签：
src 属性：目标图片的路径
alt 属性：替换文本（加载失败后显示）
title 属性：提示文本（鼠标悬停是，才显示的文本）
width 和 height 属性：只设置其中一个，等比例缩放
绝对路径：从根盘符开始
相对路径（常用）：从当前文件开始出发找目标文件
同级目录：直接写目标文件名（./）
下级目录：文件夹名/目标文件名（./）
上级目录：…/ 目标文件名(…/)
音频标签：<audio src="" controls/autoplay/loop >
视频标签：
<video src="" controls/autoplay/loop/muted>
链接标签：超链接
空链接：回到顶部
列表标签：无序列表ul（li），有序列表ol(li)，自定义列表dl(dt,dd)
表格标签：table表示表格整体，tr表示表格的每一行，td表示表格的单元格
表格相关属性：border/width/height=“数字”
表格大标题：标题
表头单元格：内容
表格的结构标签：表格头部（thead）、表格主体（tbody）、表格底部（tfoot）
合并单元格：合并单元格的个数（rowspan/clospan），前者跨行，后者跨列
表单标签：input/button/select/textarea/label
input标签：通过type属性值的不同，展示不同效果
type属性：text/password/radio/checkbox/file/submit/reset/button
文本框text：placeholder(占位符，提示用户输入内容的文本）
value属性：用户输入的内容，提交之后发送给后台服务器
name属性：当前控件的含义，提交后可以告诉后端发送过的数据是什么含义
后端数据格式：name的属性值=value的属性值
密码框password：placeholder(占位符，提示用户输入内容的文本）
单选框radio:name/checked(默认选中)
复选框checkbox：checked（默认选中）
文件选择框file:multiple(多文件选择）
按钮：submit/reset/button(value)
form标签
button标签：type 属性值有submit/reset/button
下拉菜单select：select标签和option标签
selected默认选中
textarea文本域标签：cols属性和rows属性
label 标签：绑定内容与表单标签的关系
语义化标签：没有语义化标签（div/span）和有语义化标签（header/nav/footer/aside/section/article）
字符实体：多个空格、缩进、换行浏览器只解析一个空格
空格 小于号 < 大于号>
CSS基础认知
CSS:层叠样式表(给HTML标签设置样式)
常见属性：color/font-size/background-color/width/height
CSS引入方式：内嵌式、外联式、行内式
基础选择器：标签选择器、类选择器、id选择器、通配符选择器
标签选择器：标签名{css属性名：属性值;}
类选择器：.class值{css属性名：属性值;}
多个类名之间空格隔开，类名可以重复
Id选择器：#id 属性值{css属性名：属性值;}
id值唯一且不重复，类似身份证号码
通配符选择器：*{css属性名：属性值;}
字体和文本样式：
字体大小：font-size：数字+px;
谷歌默认 16px
字体粗细：font-wieght:normal(400)/bold(700)
字体样式：font-style:normal/italic
常见字体系列：无衬线字体sans-serif,衬线字体serif,等宽字体monospace
font-family:楷体/宋体/微软雅黑；
样式层叠问题：覆盖，写在最下面的会生效
font:style weight size family;(swsf)
文本缩进：text-indent,属性值:数字+px/em(1em=font-size)
文本水平对齐：text-align,属性值：left/center/right
文本修饰：text-decoration,属性值：underline/line-through/overline/none
去除a标签的默认下划线：text-decoration:none;
水平居中：
text-align:文本，span,input,a，img
text-align给以上的父元素设置
margin:0 auto;直接给当前元素设置（大盒子div，p，h固定宽度）
行高：line-height:数字+px/倍数(font-size)
font和行高：font：style weight size/line-height family;
颜色取值：关键字，rgb，rgba，十六进制
选择器进阶：复合选择器，并集选择器，交集选择器，Emmet语法，hover伪类选择器
后代选择器：选择器1 选择器2{css}（孙子，重孙等）
子代选择器：选择器1>选择器2{css}
并集选择器：选择器1，选择器2{css}
交集选择器：选择器1选择器2{css}
Emmet语法
标签名：div
类选择器：.red（div）
id选择器：#one(div)
指定标签：指定标签类选择器id选择器
子代选择器：ul>li
生成文本：div{我是内容}
ul>li{我是内容}
同时创建多个：个数 ul>li10
hover伪类选择器：选中鼠标悬停在元素上的状态，设置样式
语法：选择器：hover{css}
背景相关属性：颜色（background-color)bgc
背景图片：background-img:url("******")bgi
背景平铺：background-repeat(bgr)
属性值：repeat/no-repeat/repeat-x/repeat-y
背景位置：background-position(bgp)
属性值：水平方向位置 垂直方向位置
方位：
水平方向：left/center/right
垂直方向：top/center/bottom
数字+px:原点（盒子左上角）、y轴（垂直向下）、x轴（水平向右）
背景相关属性连写：background（bg）
属性值：color/image/repeat/position
省略：可以按需求省略
img标签和背景图片的区别：img是一个标签，有默认的宽高，背景图片（必须保证当前的标签有宽高）
元素显示模式：块级元素、行内元素、行内块级元素、元素显示模式的转换
块级元素：display:block(独占一行，宽度默认是父元素的宽度，高度默认由内容撑开)
例：div
行内元素：display：inline(一行可以显示多个，宽度和高度默认由内容撑开，不可以设置宽高)例：a/span…’
行内块级元素：display：inline-block(一行可以显示多个，可以设置宽高)
img标签由行内块级元素的特点，但是调试工具显示inline
例：input/textarea/button/select…
元素显示模式转换：display:block/inline-block/inline
HTML嵌套注意：P标签中不要嵌套div、p、h等块级元素；a标签不能嵌套a标签
居中方法总结:水平居中 垂直居中
text-algin: center 文本/行内元素/行内块级元素（直接给以上元素的父元素设置即可）
margin: 0 auto 块级元素（直接给当前元素设置）
line-height:单行文本
css 三大特性：继承性、层叠性、优先级
继承性：子元素默认继承父元素的特性
color、font、text、line-height…
继承的小应用：可以一定程度减少代码
可以直接给ul设置list-style:none 属性，从而去除列表默认的小圆点
· 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小
继承失效：a标签的color会继承失效，h系列标签的font-size会继承失效，div标签的高度不能继承，但宽度有类似于继承的效果
层叠性：样式叠加，样式覆盖
优先级：css 权重
优先级公式：继承<通配符选择器 <标签选择器 <类选择器 <id选择器 <行内样式 <!important
权重叠加计算：复合选择器中（第一级（行内样式），第二级（id选择器），第三级（类选择器），第四级（标签选择器））
盒子模型：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）
内容区域的宽和高：width、height
边框border：border-width、border-style(solid/dashed/dotted)、border-color
连写：border：10px solid red;
单方向设置：border-方位名词
盒子大小实际大小初级计算：
需求：盒子尺寸４００×４００，背景绿色，表框１０ｐｘ 黑色
width :380px
height:380px
backgroud-color:green;
border : 10px solid black;
内边距padding：一个值（上下左右都设置成一样的），两个值（上下一样，左右一样），三个值（上，左右，下），四个值（上，右，下，左）
盒。子实际大小终极计算公式：width +padding-left+padding-rights+border-left+ border-right,
height+padding-top+ padding-bottom + border-top+border-bottom
不会撑大盒子的例子：块元素（如果子盒子没有设置宽度，此时默认是父盒子的宽度；此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子）
css3 盒模型：手动内减，自动内减
自动内减：设置一个属性（css3盒模型 box-sizing:border-box）
外边距：margin（盒子与盒子之间的距离）
属性值：一个值（上右下左），两个值（上下，左右），三个值（上，左右，下），四个值（上，右，下，左）
margin单方向设置：margin-left,margin-right,margin-top,margin-bottom
请除默认内外边距：body 默认由margin：8px;p 标签默认有上下的margin；ul标签默认由上下margin和padding-left…
外边距正常情况：水平布局的盒子，左右的margin正常，互不影响，最终两者的距离为左右margin的和
外边距折叠现象：合并现象（垂直布局的块级元素，上下的margin会合并，最终两者距离为margin的最大值）；塌陷现象（互相嵌套的块级元素，子元素的margin-top 会作用在父元素上，导致父元素一起往下移动；解决方法（给父元素设置border-top或者padding-top(分隔父子元素的margin-top），给父元素设置overflow：hidden，转换成行内块级元素，设置浮动）
行内元素的margin和padding无效情况：水平方向的margin和padding布局中有效！垂直方向的margin和padding布局中无效！
结构伪类选择器：E:first-child{}；E:last-child{}；E:nth-child(n){}；E:nth-last-child(n){}(匹配父元素中的第几个子元素，并且是E元素)
n为：0,1,2,3,4,5…
偶数：2n,even
奇数：2n+1,2n-1,odd
找到前五个：-n+5
找到从第五个往后：n+5
结构为中的易错点：li a:first-child{}
nth-child—>直接在所有孩子中数个数
nth-of-type—>先通过该类型找到符合的一堆子元素，再在子元素中数个数
伪元素：一般页面中非主体内容可以使用伪元素（由css模拟出的表现效果），必须设置content属性才能生效，伪元素默认是行内元素
：：before 在父元素内容的最前面添加一个伪元素
：：after 在父元素内容的最后添加一个伪元素
标准流：文档流，浏览器渲染规则
块级元素：从上往下，垂直布局，独占一行
行内元素或行内块级元素：从左往右，水平分布，空间不够自动折行
浮动：早期（图文环绕）、现在（网页布局）
float：left/right
浮动的特点：脱离标准流（在标准流中不占位置）；浮动元素比标准流高半个级别，可以覆盖标准流元素；浮动找浮动；浮动元素会受到上界元素的影响；浮动元素有特殊效果（可以设置宽高，一行可以显示多个）
注意：浮动的元素不能通过text-align：center或者margin：0 auto，让浮动元素水平居中（浮动内容可以水平居中）
清除浮动：影响（如果子元素浮动了，不能撑开标准流的父元素）
目的：需要父元素有高度
方法：直接设置父元素的高度；额外标签法（给父元素内容的最后添加一个块级元素，给添加的块级元素设置clear：both；缺点：使html的标签结构变得复杂）；伪元素清除法（.clearfix：：after{content：‘’；display：block；clear：both；height:0;visibility:hidden;}）；双伪元素清除法（.clearfix::before,.clearfix::after{content:"";display:table;}）.clearfix{clear:both;}；给父元素设置overflow:hidden;
块格式化上下文：BFC
创建BFC的方法：html标签，浮动元素是BFC盒子，行内块元素是BFC盒子，overflow属性取值不为visible。如：auto，hidden…
BFC盒子常见特点：默认包裹内部子元素（清除浮动），与子元素之间不存在margin的塌陷现象（解决margin的塌陷）
标准流，浮动（块级元素变成水平布局），定位（盒子之间的层叠情况）
定位的基本介绍：可以解决盒子与盒子之间的层叠问题，可以让盒子始终固定在屏幕中的某个位置
定位的基本使用：position：static、relative absolute、fixed
设置偏移值：就近原则（left/right、top/bottom、数字+px）
静态定位：position：static（标准流默认）
注意：静态定位不能通过方位属性进行移动；定位一般不包括静态定位
相对定位：position:relatitive (相对自己之前的位置进行移动)
应用场景：配合绝对定位组CP(子绝父相）；用于小范围的移动
绝对定位：（相对于非静态定位的父元素进行移动）
祖先元素中没有定位---->默认相对于浏览器进行移动
祖先元素中有定位—>相当于最近有定位的祖先元素进行移动
子绝父相：子元素绝对定位，父元素相对定位（是否脱标，所以子绝父绝不常用）
场景：让子元素相对于父元素进行自由移动
子绝父绝：在使用子绝父相的时候，发现父元素已经有绝对定位，此时直接子绝即可
固定定位：可视区域进行定位（position：fixed）
特点：需要配合方位属性实现移动；在页面中不占位置（脱标）
元素的层级关系：不同布局方式之间的层级关系（标准流<浮动<定位）；不同定位之间的层级关系（相对，绝对，固定默认层级相同，htmlz中写在最下面会覆盖）
更改定位元素的层级：z-index：数字（数字越大，层级越高）
垂直对齐方式：vertical-align:baseline/top/middle/bottom（行内元素，行内块级元素）
应用：1、文本框和表单按钮无法对齐；
2、input和img无法对齐；
3、div中的文本框，文本框无法贴顶；
4、div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题；
5 使用line-height让img标签垂直居中
光标类型： cursor:default(箭头)、pointer(小手)、text(工字形）、move(十字光标)
边框圆角：border-radius:数字+px、百分比
overflow：溢出部分（盒子的内容部分超出盒子范围的区域）
属性值：visible(默认值，可见)，hidden（隐藏），scroll(滚动条显示）、auto（根据是否溢出，自动显示滚动条）
元素本身隐藏：visibility:hidden（隐藏，占位置）;display:none(隐藏，不占位置)
元素整体透明度(包括内容)：opacity：0-1数字（1完全不透明，0完全透明）；注意点（会让元素整体透明）
边框合并：border-collapse:collapse;让相邻表格边框进行合并，得到细线边框效果(给table标签设置)
链接伪类选择器：常用于选择超链接的被选中的状态
a:link{}未访问过，a:visited{} 访问过，a:hover{}悬停、a:active{}鼠标按下
注意点：要按照哦HLVA的顺序书写
焦点伪类选择器：用于选中元素获取焦点事的状态，常用语表单控件
选择器语法：input：focus{}
效果：表单控件获取焦点时默认会显示外部轮廓线
属性选择器：标签名[属性名=属性值]：{}或者标签名[属性名]：{}
精灵图：项目中将多个小图片，合并成一张大图片，这张图片称之为精灵图
优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
精灵图的使用步骤：创建一个盒子；通过PxCook量取小图片大小，将小图片的宽高设置给盒子；将精灵图设置为盒子的背景图片；通过PxCook测量小图片左上角图标，分别取负值设置给盒子的background-position：x,y;
背景图片大小：background-size：宽度 高度
属性值：数字+px、百分比、contain、cover
background连写：background：color image repeat position/size
文字阴影：text-shadow：h-shadow、v-shadow、blur(模糊度)、color；(前面三个都是数字+px)
多个阴影可以叠加设置，以逗号隔开
盒子阴影：box-shadow：h-shadow、v-shadow、blur、spread(阴影扩大)、color、inset(改为内部阴影）
过渡：transition（常配合hover使用，增强网页交互式体验）,给元素本身设置
过渡属性：al(能过渡的属性都过渡)l;width…
过渡时长：数字+s（秒）
例：transition：width 1s,background-color 1s;
注意：给默认状态设置，鼠标移入移出都有过渡效果；给hover状态设置，鼠标移入过渡，移出没有过渡
网页与网站的关系：网站是多个网页的集合（类似于书与页的关系）
骨架结构标签介绍：文档类型声明，HTML版本说明 HTML5;<html lang=‘en’》标识网页使用的语言；标识网页使用的字符编码；
SEO：搜索引擎优化（让网站在搜索引擎上排名靠前）；1、竞价排名2、将网页制作成html后缀、3、标签语义化…
SEO三大标签：title、description(网页描述标签)、keywords（网页关键词标签）
有语义化的布局标签：header（网页头部）、nav(网页导航)、footer（网页底部）、aside(网页侧边栏)、section（网页区块）、article（网页文章）
cio图标设置：
版心：把页面的主体内容约束在网页中间
代码：.container{
width 1240px;
margin:0 auto;
}
CSS书写顺序：布局属性，盒子模型+背景，文本内容属性，点缀属性
基础公共样式（base.css）：防止不同浏览器中标签默认样式不同的影响，统一不同浏览器的默认显示效果，方便后续项目的开发。
index 页面骨架设置：引入base.css、common.css、index.css
Header部分开发：快捷菜单xtx-shortcut、主导航xtx-main-nav
footer部分开发
移动端web:css3、flex、移动适配(游乐园、B站首页)、响应式网站（bootstrap）
字体图标：引入字体图标样式表；有几个内容，有几个标签
字体图标svg上传：IconFont网站上传矢量图生成字体图标
平面转换：transform属性实现元素的位移、旋转、缩放等效果；2D转换；
位移：transform:translate(水平距离，垂直移动距离）；取值（数字+px/百分比（自身宽高））
位移技巧：translate（）如果只给出一个值，表示x轴方向移动距离；单独设置某个方向的移动距离：translateX() & translateY()
定位盒子居中：transform:translate(-50%,-50%);
平面转换旋转：使用rotate实现元素旋转；transform：rotate（角度）；单位deg;正顺负逆
转换原点transform-origin:改变转换原点；transform-origin：原点水平位置 原点垂直距离；取值（方位名词；像素单位数值、百分比（以自身为标准））
缩放：使用scale改变元素的尺寸；transform:scale(x轴缩放倍数，y轴缩放倍数)或者transform:scale(缩放倍数)等比例缩放；取值以1为分界线
渐变：使用background-image属性实现渐变背景效果；一般用于设置盒子的背景；background-image:linear-gradient(颜色一，颜色二)；例：transparent,rgba(0,0,0,.6);
空间转换：使用transform属性实现元素在空间内的位移、旋转、缩放等效果；3D转换
空间位移：translate3d(x,y,z);translateX()、translateY()、translateZ()
透视：使用perspective属性实现透视效果
产生近大远小，近实远虚，添加给父级数值一般是800-1200，单位px
perspective:值---->表示人的眼睛到屏幕的距离
空间旋转：rotateZ(值)、rotateX(值)、rotateY(值）、rotate3d(x,y,z,角度度数)，x,y,z取值为0-1之间的数字
立体呈现：transform-style：preserve-3d呈现立体图形
实现方法;添加transform-style：preserve-3d;使子元素处于真正的3d空间；按需求设置子盒子的位置（位移或旋转）
空间缩放：使用scale实现空间缩放效果
scaleX/Y/Z(倍数)；scale3d(x,y,z);
动画：使用animation添加动画效果
效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
最小单元：帧或动画帧
动画实现步骤:
1、定义动画
两个部分
@keyframes 动画名称{
from{}
to{}
}
多个部分
@keyframes 动画名称{
0%{}
10%{}
15%{}
100%{}
}
2、使用动画
animation：动画名称 动画花费时长；
animation相关属性：动画名称 动画时长 速度曲线（linear匀速/steps(3)分步动画） 延迟时间 重复次数（infinite无限循环） 动画方向（alternate） 执行完毕时状态(backwords(默认值)/forwards）；
animation-name；animation-duration；animation-play-state:paused;（暂停，配合hover使用）
逐帧动画：animation-timing-function:steps(数字)
准备显示区域；定义动画；使用动画；
多组动画：animation：动画1，动画2，动画N;
走马灯：无缝动画（复制显示区域开始部分在末尾）
overflow：hidden
移动web端
移动端特点：没有版心；与pc端分开的（网站不同）
pc端：屏幕大，网页固定版心；
谷歌模拟器
屏幕尺寸：设备对角线的长度，英寸
pc分辨率：1920*1080；物理分辨率，逻辑分辨率（软件驱动）
PC端、移动端：网页参照逻辑分辨率
meta标签设置视口宽度，制作适配不同设备宽度的网页
百分比布局：宽度自适应，高度固定
Flex布局：弹性布局（浏览器提倡的布局模型）;布局网页更简单、灵活；避免浮动脱标的问题
设置方式：父元素添加display：flex，子元素可以自动挤压或拉伸
组成部分：弹性容器、弹性盒子、主轴、交叉轴/侧轴
使用justify-content调节元素在主轴的对齐方式
属性值：flex-start、flex-end、center、space-around、space-between、space-evenly
使用align-items调节元素在侧轴的对齐方式
属性值：flex-start、flex-end、center、stretch（拉伸，测试时去掉子集的高度）
align-self：控制某人弹性盒子在侧轴的对齐方式（添加到弹性盒子）
侧轴默认是stretch
弹性伸缩比：使用flex属性修改弹性盒子伸缩比
取值：整数（占用父盒子剩余尺寸的分数）
修改主轴方向：flex-direction（改变元素排列方向）
属性值：row（默认值）、column、row-reverse、column-reverse
侧轴跟着一起改变
弹性盒子换行：flex-wrap:nowrap/wrap
调整行对齐方式：align-content：取值与justify-content基本相同
移动适配：网页元素与设备的宽高设备适配
rem:目前多数企业在用的解决方案
vw/vh:未来的解决方案
rem：使用rem单位设置网页元素的尺寸；相对单位（相对于HTML标签的字号）；html{
font-size:20px;}；
媒体查询：检测视口的宽度，编写差异化的css样式
@media（媒体特性）{
选择器{
css属性
}
}
@media（width:320px）{
html{
font-size:32px
}
}
font-size:视口宽度的十分之一
flexible.js配合rem实现不同宽度的设备中
css不支持计算写法
Less:完成px单位到rem单位的转换;css预处理器；扩充css语言，使css具备一定的逻辑性，计算能力
Less语法：变量（存储数据，方便使用和修改）；定义变量（@变量名：值；），使用变量名css属性：@变量名；
less导入其他less文件：@import “文件路径”；
导出CSS文件：配置Easyless插件；单独导出// out: ./abc(第一行)
禁止导出：在less文件的第一行添加：//out : false
vw/vh:vw单位设置网页元素的尺寸（相对于视口的尺寸）；viewport width (1vw = 1/100视口宽度)、viewport height(1vh=1/100视口高度）；vh/vw不能混用
响应式：一套代码适应不同设备
媒体查询：根据条件不同，样式不同
max-width（从大到小）；min-width（从小到大）(层叠性)
完整写法：@media 关键词 媒体类型 and（媒体类型）{CSS 代码}
关键词：and、only、not
媒体类型：screen、print、speech、all
媒体查询-link写法：<link rel=“stylesheet” media="逻辑符 媒体类型 and （媒体特性）” href = “xx.css”>
媒体隐藏：隐藏内容
Bootstrap:快速开发响应式网页
栅格系统：等分12份
超小屏幕（<768px）:col-xs-*
小屏幕（>=768px）:col-sm-*
中屏幕（>=992px）:col-md-*
大屏幕（>=1200px）:col-lg-*
注意：container类自带间距15px
row类自带间距-15px
container-fluid 宽度100%
内容少；
电商站；pc和移动端分开
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
