前端笔记
一、HTML5
网页与网站之间的关系：
网页: 网站中的每一“页” 。相当于是书籍的每页纸张
网站: 提供特定服务的一组网页集合。 相当于是一本书籍
1、常用标签：
audio：音频 <audio src=""></audio>
video：视频 <video drc=""></video>
注意：
标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见标准流排版规则：
1.块级元素：从上往下，垂直布局，独占一行
2.行内元素 或 行内块元素：从左到右，水平布局，空间不够自动折行
骨架结构标签
<!DOCTYPE html>
文档类型声明，告诉浏览器该网页的HTML版本
<html lang="en">
网页使用的 语言
它的作用是：搜索引擎归类 + 浏览器翻译
我们常用的语言是：zh-CN 简体中文 / en 英文
<meta charset="UTF-8">
网页中使用的 字符编码
它的作用是：保存和打开的字符编码需要统一设置，否则可能会出现 乱码
我们常见字符编码:
UTF-8:万国码，国际化的字符编码，收录了全球语言的文字
GB2312:6000+ 汉字
GBK:20000+ 汉字
SEO(Search Engine Optimization): 搜索引擎优化
作用：让网站在搜索引擎上的排名靠前
提升SEO的常见方法:
竞价排名
将网页制作成html后缀
标签语义化(在合适的地方使用合适的标签)
SEO三大标签
title:网页标题标签
description:网页描述标签
keywords:网页关键词标签
常见有语义的布局标签：
header:网页头部
nav:网页导航
footer:网页底部
aside:网页侧边栏
section:网页区块
article:网页文章
ico图标设置
显示在标签页标题左侧的小图标，习惯使用.ico格式的图标
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
版心
把页面的主体内容约束在网页中间，让不同大小的屏幕都能看到页面的主体内
版心类名常用:container、wrapper、w 等
2、列表
无序列表：
标签：
（1）ul：表示无序列表的整体，用于包裹li标签
（2）li：表示无序列表的每一项，用于包含每一行的内容，
注意点：
（1）ul：只能包含li标签
（2）li：可以包含任意内容
有序列表：
标签：
（1）ol：表示有序列表的整体，用于包裹li标签，
（2）li：与无序列表一样
注意点：
（1）ul：只允许包含li标签
（2）li：可以包含任意内容
自定义列表：
标签：
（1）dl：表示自定义列表的整体，用于包裹dt/dd标签，只允许包含dt/dd标签
（2）dt：表示自定义列表的主题，
（3）dd：表示自定义列表的针对主题每一项内容
显示特点：
dd前会默认显示缩进效果
注意点：
dl标签只允许包含dt/dd标签
dt/dd标签可以包含任意内容
3、表格
基本标签：
table：表格整体，用于包裹多个tr
tr：表格每行，用于包裹td
td：表格单元格，用于包裹内容
注意点：
嵌套关系：table>tr>td
相关属性：
border：边框宽度
width：表格宽度
heigth：表格高度
表格标题和表头单元格标签：
场景：在表格中表示整体大标题和一列小标题
caption：表格大标题，默认在表格整体顶部居中位置
th：表头单元格，表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中
注意点：
caption标签书写在table标签内部
th标签书写在tr标签内部（用于替换td标签
表格结构标签：
thead：表格头部
tbody：表格主体
tfoot：表格底部
注意点：
表格结构标签内部用于包裹tr标签
表格的结构标签可以省略
合并单元格：
rowspan：跨行合并，将多行的单元格垂直合并
colspan：跨列合并，将多列的单元格水平合并
注意点：
只有同一个标签结构中的单元格才能合并，不能跨结构标签合并（thead、tbody、tfoot）
4、表单标签
input
在网页中显示收集用户的表单效果
type属性值：
text：文本框，用于输入单行文本
placeholder属性：占位符，提示用户输入内容的文本
password：密码框，用于输入密码
radio：单选框，用于多选一
name：分组，有相同name属性值的单选框为一组，一组只能有一个被选中
checked：默认选中
checkbox：多选框，用于多选多
file：文件选择，用于之后上传文件
multiple：多文件选择
按钮：
submit：提交按钮
reset：重置按钮
button：普通按钮，默认无功能，配合js添加功能
注意点：要实现按钮功能，需配合form标签使用，用form标签吧表单标签一起包裹起来使用即可
select下拉菜单标签
场景：在网页中提供多个选择项的下拉菜单表单控件
标签组成：
select：下拉菜单的整体
option：下拉菜单的每一项
常见属性：
selected：下拉菜单的默认选中
textarea文本域标签
场景：在网页中提供可输入多行文本的表单控件
常见属性：
cols：规定文本域内可见宽度
rows：规定文本域可见行数
注意点：
右下角可以拖拽改变大小
实际开发时针对于样式效果推荐使用css设置
label标签
场景：常用于绑定内容与表单标签的关系
使用方法1：
使用label标签把内容（如：文本）包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值
使用方法2：
直接使用label标签把内容（如：文本）和表单标签一起包裹起来
需要把label标签的for属性删除即可
语义化标签
div、span：网页布局时使用
二、CSS3
1、引入方式
内嵌式：写在style标签中 当前页面，小案例
外联式：写在一个单独的.css文件中，需要通过link标签在网页中引入 多个页面，项目中
行内式：写在style属性中 当前标签，配合js使用
2、选择器
标签选择器
标签名{css属性名：属性值;}
类选择器
.类名{css属性名：属性值;}
通过标签的class属性，也称之为类名，设置样式
一个标签可以有多个类名，以空格隔开
类名可重复
id选择器
#id属性值{css属性名：属性值;}
一个标签只能有一个id属性值，整个页面唯一，不可重复
一个id选择器只能选中一个标签
通配符选择器
*{css属性名：属性值;}
找到页面中所有的标签，设置样式
3、选择器进阶
后代选择器：空格
根据HTML嵌套关系，选择父元素后代（儿子、孙子、。。）中满足条件的元素
语法：选择器1 选择器2{css}
子代选择器：>
根据嵌套关系，选择父元素子代（儿子）中满足条件的元素
语法：选择器1 > 选择器2{css}
并集选择器：,
选择多组标签，设置相同的样式，
语法：选择器1,
选择器2{css}
交集选择器：紧挨着
选中页面中能同时满足多个选择器的标签
语法：选择器1选择器2{css}
hover伪类选择器
选中鼠标悬停在元素上的状态，设置样式
语法：选择器:hover{css}
4、字体和文本样式
字体样式
注：由font-开头
字体大小：size
字体粗细：weight
关键字：
正常：normal（400px）
加粗：bold（700px）
字体样式：style
取值：
正常：normal
倾斜：italic（em标签）
字体类型：family
常见字体：微软雅黑（无衬线字体）、宋体（衬线字体）Consolas（等宽字体）
sans-serif：若电脑用户没有安装所列举字体，则按任意一种非衬线字体系类显示
取值：数字+px
font（符合属性）
取值：font:style weight size family;
省略要求：只能省略前两个，如果省略了相当于设置了默认值
文本缩进
text-indent
取值：数字+px
数字+em（推荐：1em = 当前标签的font-size的大小）
文本水平对齐方式
text-align
属性值：
left：左对齐
center：居中对齐
right：右对齐
文本修饰（下划线）
text-decoration
取值：
underline：下划线
line-through：删除线
overline：上划线
none：无装饰线
行高
line-height
控制一行的上下行间距
取值：数字+px，当前font-size的倍数
5、背景相关属性
1、背景图片
属性名：background-image（bgi）
属性值：background-image: url('图片的路径')
2、背景平铺
属性名：background-repeat（bgr）
属性值：
repeat -> （默认值）水平和垂直方向都平铺
no-repeat -> 不平铺 （常用）
repeat-x -> 沿着水平方向（x轴）平铺
repeat-y -> 沿着垂直方向（y轴）平铺
3、背景位置
属性名：background-position（bgp）
属性值：background-position：水平 垂直
方位名词（最多只能表示9个位置）：
水平方向：left、center、right
垂直方向：top、center、bottom
数字+px（坐标）：
坐标系：原点（0，0）盒子的左上角、x轴（水平向右）、y轴（垂直向下）
注意：二者可混合使用，第一个取值表示水平，第二个表示垂直
背景图大小
设置背景图的大小
background-size：宽度 高度；
取值：
数字+px 常用
百分比 相当于当前盒子自身的宽高百分比
contain 包含，将图片等比例缩放，直到不会超出盒子的最大
cover 覆盖，将背景图等比例缩放，直到刚好填满整个盒子没有空白
background符合属性
推荐顺序：background：color image repeat position/size
颜色 背景图 平铺 位置/背景图缩放
可以安装需求省略
6、结构伪类选择器
作用与优势：
作用：根据元素在HTML中的结构关系查找元素
优势：减少对于HTML中类的依赖，有利于保持代码整洁
场景：常用于查找某父级选择器中的子元素
选择器
E:first-child{}：匹配父元素中第一个子元素，并且是E元素
E:last-child{}：匹配父元素中最后一个子元素，并且是E元素
E:nth-child(n){}：匹配父元素中第n个子元素，并且是E元素
E:nth-last-child(n){}：匹配父元素中倒数第n个子元素，并且是E元素
注意：
通过n可以组成常见公式
偶数：2n、even
奇数：2n+1、2n-1、odd
找到前五个：-n+5
找到从第五个往后：n+5
三、元素显示模式
1、块级元素（block）
特点：
独占一行（一行只能显示一个）
宽度默认与父元素相同，高度默认由内容撑开
可设置宽高
代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer。。。。
2、行内元素（inline）
特点：
一行可显示多个
宽度和高度默认由内容撑开
不可设置宽高
代表标签：a、span、b、u、i、s、strong、ins、em、del。。。
3、行内块元素（inline-block）
特点：
一行可以显示多个
可以设置宽高
代表标签：input、textarea、button、select
特殊情况：img有行内块元素的特点，但chrome调试工具中结果显示是inline
4、元素显示模式转换
1、display：block 转换成块级元素 常用
2、display：inline-block 转换成行内块元素 常用
3、display：inline 转换成行内元素 不常用
5、伪元素
::befor：在父元素内容的最前添加一个伪元素
::after：在父元素内容的最后添加一个伪元素
注意点：
必须设置content属性才能上生效
伪元素默认是行内元素
四、CSS特性
1、选择器优先级
特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式
优先级公式：
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
2、CSS书写顺序：浏览器执行效率更高
不同的CSS书写顺序会影响浏览器的渲染性能，前端工程师经常使用的专业的书写顺序习惯
注意点：
开发中推荐多用类 + 后代，但不是层级越多越好，一个选择器中的类选择器的个数最好 不要超过 3 个
布局属性 display、position 、float、clear、visibility、overflow
盒子模型+背景 width、height、margin、padding、border、background
文本内容属性 color、font、text-decoration、text-align、line-height
点缀属性 cursor、border-radius、text-shadow、box-shadow
1、浮动 /display
2、盒子模型：margin border padding 宽高度 背景色
3、文字样式
五、盒子模型
border：边框线
solid：虚线 dashed：虚线 dotted：点线
border-width：边框粗细 border-style：边框样式 border-color：边框颜色
属性：px像素 线条种类 线条颜色;(顺序不分先后)
场景：只给盒子某个方向单独设置边框
属性名:border-方位名词
padding：内边距
margin：外边距
内减模式
box-sizing: border-box;
清楚默认内外边距
*{
margin:0;
padding:0;
}
外边距折叠现象-塌陷
1、父元素设置border-top或者padding-top（分割父子元素的margin-top）
2、给父元素设置overflow：hidden
注：还可清除浮动
3、转换成行内块元素
4、设置浮动
盒子阴影
给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
属性名：box-shadow
取值：
h-shadow：必须，水平偏移量。允许负值
v-shadow：必须，垂直偏移量。允许负值
blur：可选，模糊度
spread：可选，阴影扩大
color：可选，阴影颜色
inset：可选，将阴影改为内部阴影
六、清除浮动
额外标签法
在父元素内容的最后添加一个块级元素
给添加的块级元素设置clear:both
缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
单伪元素清除法
用伪元素替代了额外标签
基本写法： 补充写法：
.clearfix::after{ .clearfix::after{
content:''; content:'';
display:block; display:block;
clear:both; clear:both;
} // 补充代码：在网页中看不到伪元素
height: 0;
visibility:hidden;
}
优点：直接给标签加类即可清除浮动
双伪元素清除法
.clearfix::before, //解决外边距塌陷问题
.clearfix::after{
content:'';
display:table;
}
// 清除浮动
.clearfix::after{
clear:both;
}
优点：直接给标签加类即可清除浮动
七、定位
定位方式
属性名：position
属性值：
静态定位：static 相对定位：relative 绝对定位：absolute 固定定位：fixed
设置偏移值：
水平和垂直方向各选一个
相对定位
相对于自己之前的位置进行移动
position:relative;
特点：
需要配合方位属性实现移动
相对于自己原来位置进行移动
在页面中占位置 -> 没有脱标
场景：
配合绝对定位组cp
用于小范围的移动
绝对定位
相对于非静态定位的父元素进行定位移动
position：absolute
特点：
需要配合方位属性实现移动
默认相对于浏览器可视区域进行移动
在页面中不占位置 -> 已经脱标
居中显示:
.son {
position: absolute;
left: 50%;
top: 50%;
* margin 宽高度的一半*/
margin-left: -100px;
margin-top: -50px;
width: 200px;
height: 100px;
}
固定定位
相对于浏览器进行定位移动
position：fixed
特点：
需要配合方位属性实现移动
相对于浏览器可视区域进行移动
在页面中不占位置 -> 已经脱标
场景：
让盒子固定在屏幕中的某个位置
元素层级问题
不同布局方式元素的层级关系：
标准流 < 浮动 < 定位
不同定位之间的层级关系
相对、绝对、固定默认层级相同
此时HTML中写在下面的元素层级更高，会覆盖上面的元素
八、装饰
基线（baseline）
浏览器文字类型元素排版中存在用于对齐的基线
垂直对齐方式
vertical-align
属性值：
beseline：默认，基线对齐
top：顶部对齐
middle：中部对齐
bottom：底部对齐
光标类型
cursor
属性值：
default：默认值，箭头
pointer：小手效果，提示用户可以点击
text：工字形，提示用户可以选择文字
move：十字光标，提示用户可以移动
边框圆角
场景：让盒子四个角变得圆润，增加页面细节，提升用户体验
属性名：border-radius
常见取值：数字+px、百分比
复制规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角
注意：
画一个正圆：盒子必须是正方形
椭圆：盒子是长方形
溢出部分显示效果
溢出部分：指的是盒子内容部分所超出盒子范围的区域
场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条。。。
属性名：overflow
属性值：
visible：默认，溢出部分可见
hidden：溢出部分隐藏 常用
scroll：无论是否溢出，都显示滚动条
auto：根据是否溢出，自动显示或隐藏滚动条
元素本身隐藏
场景：让某元素本身在屏幕中不可见。如：鼠标：hover之后元素隐藏
常见属性：
visibility：hidden
display：none 常用
元素整体透明度
让某元素整体（包括内容）一起变透明
属性名：opacity
属性值：0~1之间的数字
1：完全不透明
0：完全透明
过渡
让元素样式慢慢的变化，常配合hover使用，增强网页交互体验
属性名：transition
取值：
过度属性：
all：所有能过度的属性都过度、具体属性名：只有该属性名能过度
过度的时长：数字+s（秒）
注意点：
过度需要：默认状态和hover状态样式不同，才能有过度效果
transition属性给需要过度的元素本身加
transition属性设置在不同状态中，效果不同：
1、给默认状态设置：鼠标移入移出都有过渡效果
2、给hover状态设置：鼠标移入有效果，移出没效果
九、项目结构搭建
文件和目录准备
1.项目文件不建议使用中文
2.所有项目相关文件都要保存在一个根目录中
3.一般习惯将favicon.ico存放到根目录
images：存放网站固定是用的图片素材，如logo、样式修饰图等
uploads：存放网站非固定使用的图片素材，如：商品图片、宣传图片等
css：
base.css：基础公共样式
common.css：该网站中多个网页相同模块的重复样式，如：头部、底部
index.css：首页样式
拓展
标签水平居中
margin:0 auto（自动/自适应）
transform：translate（-50%，-50%） （位移：自己宽高度的一半）
z-index:整数; 取值越大，显示顺序越靠上，默认值：0，必须配合定位才生效
background-position：x y：改变背景图的位置
精灵图
项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
优点：
减少服务器发送次数，减轻服务器的压力，提高页面加载速度
使用步骤：
创建一个盒子，设置盒子的尺寸和小图尺寸相同
将精灵图设置为盒子的背景图片
修改背景图位置:
通过PxCook测量小图片左上角坐标，分别取值设置给盒子的background-position：x y
