前端复习笔记！两年没接触前端也能拿到阿里offer！

柔情只为你懂 2022-03-08 02:11 222阅读 0赞

**一、基本结构**  
<!DOCTYPE html> //设置字符编码集格式  
<html> //  
<head> //网页头部  
<title></title>  
</head>  
<body>

</body>  
</html>  
**二、文本标记**  
1.加粗 b  
2.倾斜 i  
3.下划线 u  
4.删除线 u  
5.上标 sup  
6.下标 sub  
**三、引用css样式表的方式**  
1.内联样式  
在元素的开始标签里，设置一个style属性，并设置对应的属性名及属性值  
例：<div style="color:red;"></div>  
使用场景：js里，使用js给元素添加样式  
2.内部样式表  
在head标签里加上一对style标签，并且在style标签设置对应的样式  
<style type="text/css">  
样式规则  
</style>  
3.外部样式表  
新建一个css样式表文件，并在文件中设置对应的样式通过link属性，将html文件与css文件关联在一起

在这里我还是要推荐下我自己建的web前端开发学习群：853597293，群里都是学web前端开发的，如果你正在学习前端 ，小编欢迎你加入，今天分享的这个案例已经上传到群文件，大家都是软件开发党，不定期分享干货（只有前端软件开发相关的），包括我自己整理的一份2019最新的前端进阶资料和高级开发教程，欢迎进阶中和进想深入前端的小伙伴。

**四.css语法规范**  
选择器\{  
属性名：属性值；  
\}  
元素选择器-以元素标签作为选择器  
**五、其他元素**  
1.标题元素hn（n=1~6）  
特点：a.从h1到h6文本大小依次减小  
b.文本加粗  
c.每行文本上下都有距离  
d.独占一行  
2.段落元素 p  
特点：a.每行文本上下有距离  
b.独占一行  
c.一般应用于纯文本  
注意：不要和其他块级元素嵌套  
3.块级元素&行级元素  
a.块级元素  
默认情况下，独占一行  
div，h1~h6，p  
b.行内元素  
默认情况下，可以和其他元素在一行内显示  
span，b，++++++++++++++++++++++++++++++，u，s，sup，sub  
4.实业字符  
1.空格 &nbsp;  
2.< <  
3. >  
4.© &copy;  
5.¥ &yen;  
**六、其他常用样式**  
/\*背景颜色\*/  
background-color：red；  
/\*文本尺寸\*/  
font-size：25px;  
/\*文本加粗\*/  
font-weight:bold;  
/\*文本修饰\*/  
text-decoration:none/underline;  
text-decoration:underline;  
/\*文本排列\*/  
/\*text-align：left/center/right；

**七、图片**  
1.图片的分类  
a.jpeg -压缩比例比较大，图片大小（小）  
b.png -支持透明背景，无损压缩  
c.gif -支持动图  
2.语法 img  
必须的属性 src=“要引用的图片资源的路径”；  
width/height  
注：当只设置宽度或者高度其中的一个属性时，另一个属性会等比缩放  
3.路径  
a. -绝对路径  
b. -相对路径  
相对于正在编辑的网页找想要使用的资源  
返回上一级 ../  
文件夹上的资源 文件夹名称/图片名称  
c. -根相对路径  
4.圆角图片  
border-radius：px/%；  
直角变圆角

**八、超链接**  
1.定义：链接又叫超链接，允许用户进行点击操作完成页面跳转  
2.语法 <a href=""></a>  
3.属性  
必须的属性href=“跳转到资源的地址”；  
如果没有href属性，a就不是链接  
target 控制新页面以什么样的方式打开  
4.特殊用法  
href=“\#”；默认会有一个返回顶部的效果  
5.锚点  
a.定义锚点  
<div id="\#锚点名称"> </dir>  
b.链接到锚点  
<a href="锚点名称"></a>  
如果需要跳转到其他页面的指定位置  
<a href="demo.html\#锚点名称"></a>  
6.伪类选择器  
给元素添加一些特殊的效果  
语法：选择器:伪类选择器  
7.css链接  
a.当链接没有被访问的样式 :link  
b.当链接已经被访问过的样式 ：visited  
c.当鼠标移动到链接上的样式 ：hover --重点  
d.当链接被选中时的样式 ：active  
**九、列表**  
1.概念：将一些具有相同或者相似特征的元素进行以整齐的排列  
2.分类：有序列表ol，无需列表ul  
3.语法：定义列表->书写列表li  
4.属性：type - 定义列表项标识的样式  
有序列表的取值：1/a/A/i/I  
无序列表的取值：circle/square  
有序列表独有的属性： start -> 取值：阿拉伯数字  
5.css列表  
list-style-type：none； -使用css的方式去掉列表项标识  
6.注意：今后能用无序列表的地方就用无序列表，有序列表尽量少用，不利于seo  
**十、尺寸**  
1.常用尺寸单位  
a -%  
b -px  
c -em相对于父元素的尺寸  
d -rem相对于根元素的尺寸  
2.常用颜色单位  
a. -rgb（x，x，x）  
x->0~255之间的数字，绝大部分用于js中随机生成随机颜色  
b. - \#rrggbb  
6位十六进制数字 1~9 a~f  
简写： \#rgb  
c. -英文单词  
3.设置尺寸的元素  
a.能够设置尺寸的属性  
i.所有的块级元素都能设置尺寸  
div，h1~h6，p，ol，ul，li  
ii.一些能够设置尺寸的HTML元素  
img，canvas，video  
b.不能设置尺寸的属性  
i大部分的行内元素都不不能设置尺寸  
span，i，b，u，s，sup，sub

**十一.浮动**  
1.语法 float  
2.取值 none/left/right  
3.概述   
a.浮动的元素会脱离文档流，不占据页面空间  
b.浮动的元素会停靠在包含框的左边或右边  
c.浮动的元素依然会位于包含框之内  
d.如果浮动的元素前已经有了一个已经浮动的元素，那么他会停靠在这个元素的左边或右边  
e.浮动是专门用于解决块级元素在一行显示的问题  
4.清除浮动  
目的：解决后续元素受浮动影响的问题  
语法：clear  
取值：none/left/right/both（常用）；  
5.浮动对父元素的影响（父元素为0的问题）  
解决方案  
a.直接给父元素添加一个高度  
b.使用清除浮动的方式  
c.让父元素也浮动起来  
d.overflow：hidden； //溢出隐藏（下拉菜单不能用）  
**十二.过渡**  
1.语法 transition：过渡属性 过渡时间 过渡速度函数 过渡延迟；  
注意：延迟一般不设置 默认是不延迟（0s）  
过渡属性：只要是带数值的属性都可以过渡  
all-所有发生变化的属性都过渡  
过渡时间：.3s/.4s是用户体验最好的过渡时间  
过渡速度函数： linear -匀速的  
2.常用方法：all/.3/linear

下面是小编整理的一整套系统的web前端学习教程，加群即可免费领取！  
自己整理了一份最全面前端学习资料,从最基础的HTML+CSS+JS \[炫酷特效，游戏，插件封装，设计模式\]到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴, 有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。  
加Q 裙：853597293（招募中）