暑假快要过去了，假期刚开始时，计划好做许多事情，计算机二级，英语四级，web前端等要学习，下学期有许多证要考，假期是个很好的时间练习，目前学的最多的是前端的知识，但是学完忘得特别快，需要实践练习才能掌握

继续分享我整理了5年的面试题html：https://www.jianshu.com/p/aa218e2b8fe1css：https://www.jianshu.com/p/0f5571b75fb5javascript：https://www.jianshu.com/p/fe1089a4ab1ajquery：https://www.jianshu.com/p/363fc2615cfe另外附上课程链

SpringBootWeb案例前面我们已经讲解了Web前端开发的基础知识，也讲解了Web后端开发的基础(HTTP协议、请求响应)，并且也讲解了数据库MySQL，以及通过Mybatis框架如何来完成数据库的基本操作

笔记来源：尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版文章目录过渡与动画1、过渡2、动画3、实战米兔奔跑的少年弹力球酷炫球过渡与动画1、过渡过渡（transition）通过过渡可以指定一个属性发生变化时的切换方式通过过渡可以创建一些非常好的效果

笔记来源：尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版文章目录less简介1、安装插件2、编写less3、less语法less注释父子关系嵌套变量其他4、混合函数其他5、补充less简介

一、拖拽#box1{width:300px;height:300px;background-color:yellowgreen;position:absolute;}#box2{width:300px;height:300px;background-color:yellow;position:absolute;left:300px;top:300px;}window.onload=function

一、通过style操作内联样式#box1{width:200px;height:200px;background-color:red;}/*通过style属性读取和设置的都是内联样式通过JS修改元素的样式语法：元素.style.样式名=样式值*通过JS读取元素的样式*语法：元素.style.样式名*/window.onload=function(){/*点击按钮以后，修改box1的大小*///获取

一、事件对象鼠标/键盘属性altKey返回当事件被触发时，“ALT”是否被按下。button返回当事件被触发时，哪个鼠标按钮被点击clientX返回当事件被触发时，鼠标指针的水平坐标。clientY返回当事件被触发时，鼠标指针的垂直坐标。ctrlkey返回当事件被触发时，“CTRL"键是否被按下。metakey返回当事件被触发时，"meta"键是否被按下。relatedTarget返回与事件的目标

web前端全栈资料粉丝福利（面试题、视频、资料笔记、进阶路线）Cellpadding属性在内容和外

超级玛丽【超级玛丽】是一个基于HTML5和JavaScript开发的经典电子游戏。玩家需要控制主角马里奥在各种关卡中跳跃、奔跑、消灭敌人，以完成游戏目标。玩家通过浏览器可以体验经典的超级玛丽关卡和冒险。运行效果：方向键控制马里奥的左右移动、跳跃、奔跑；CTRL键发射子弹HTML源码-mario.html：FullScreenMarioCSS源码-mario.css：html{background:

CSS的定位和装饰目录CSS的定位和装饰一、学习目标二、文章内容2.1定位2.1.1定位的基本介绍2.1.2定位的基本使用2.1.3静态定位2.1.4相对定位2.1.5绝对定位2.1.6子绝父相2.1.7固定定位2.1.8元素的层级关系2.2装饰2.2.1垂直对齐方式2.2.2光标类型2.2.3边框圆角2.2.4溢出部分显示效果2.2.5元素本身隐藏2.2.6元素整体透明度2.2.7边框合并2.2

前端基础布局目录前端基础布局布局简介盒模型1.标准盒模型2.怪异盒模型3.解决方案4.代码示例常见的布局单位百分比布局flex布局一、Flex布局是什么？二、基本概念三、容器属性flex-direction属性：决定主轴的方向（即项目的排列方向）flex-wrap属性：定义换行情况flex-flow属性：flex-direction和flex-wrap的简写，默认rownowrapjustify-

CSS的浮动目录CSS的浮动一、学习目标二、文章内容2.1结构伪类选择器2.2伪元素2.3标准流2.4浮动2.5清除浮动2.6拓展（BFC）三、综合案例3.1小米模块案例3.2网页导航案例一、学习目标能够使用结构伪类选择器在HTML中选元素能够说出标准流元素的布局特点能够说出浮动元素的特点能够使用浮动完成小米模块布布局案例能够说出清除浮动的目的，并能够使用清除浮动的方法二、文章内容2.1结构伪类选

早期的浏览器能力十分有限，Web前端开发者希望能够通过一定的机制来扩展浏览器的能力。早期的方法就是插件机制，现在流行次啊用混合编程（HybirdProgramming）模式。

1.计算用户指定的数值内的奇数和。例如用户输入的是10，则计算1+3+5+7+9的和。2.使用递归计算1~100的和

对比两者的不同可以更好的理解web前端开发。本文开始将从目录结构，代码复用，路由，增删改查等方面进行对比。然后简单的了解下Nuxt(服务端渲染)。最后写当项目中遇到jq和vue共同使用时候的解决方法。

基础理论1）简介2）绝对长度3）相对长度4）经验之谈1）简介在前端开发中，会遇到各种不同类型的长度单位，比如px,em,rem等。而整体的长度单位分为两大类：相对长度和绝对长度。2）绝对长度绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。1.px像素（Pixel）px的最小单位是1，所以小数的度量没有意义相对于显示器屏幕

表单补充-->西安咸阳宝鸡渭南提交属性选择器[class="first_div"]{width:100px;height:100px;background-color:aqua;}/*以什么字符开头*/[class^="f"]{background-color:cadetblue;}/*包含某个字符*/[class*="f"]{background-color:red;}/*以什么结尾*/[cla

如果您不了解HTML，CSS，JavaScript，则可以使用某些Client/Server（FullStack）或Client-Focused第三方Web框架从Delphi/C++Builder构建Web

印记中文-深入挖掘国外前端新领域，为中国Web前端开发人员提供优质文档！-https://docschina.org/印记中文-深入挖掘国外前端新领域，为中国Web前端开发人员提供优质文档！

被广大中国JS开发者誉为"Web前端开发神器""最强大的HTML5编辑器""最智能的JavaSscriptIDE"等。

WEB前端DAY8变换效果3dbody{/*视距：设置距离xy轴构成的平面有多少像素距离*/perspective:500px;}div{/*设置变化效果为3d*/transform-style:preserve

CSS常见样式CSS语法结构选择器表达式{key:value;.......}margin、paddingmargin：外边距padding：内边距*{margin:0;padding:0;}body{width:800px;height:800px;border:1pxsolidrebeccapurple;}div{width:400px;height:400px;border:1pxsolid

WEB前端DAY7练习nth-child和nth-type区别nth-child会判断集合中的第n个标签是否是伪类前面的标签nth-type则会根据标签生成合集去其中的第n个标签body>div:nth-of-type

IDE的使用Document子项1子项2子项3子项4子项5子项6子项7子项8子项9表单标签用户名:密码:爱好:篮球唱跳Rap性别:男女跨性别邮箱:上传CSS部分css层叠样式表（cascadingstylesheet）外链样式的好处首先提高代码的复用性他可以降低代码的耦合性div{width:100px;height:200px;background-color:black;}/*第四种方式@im

Vue是渐进式的JavaScript框架，易学易用，性能出色，适用场景丰富的web前端框架，vue算是目前最火的web前端框架之一，使用vue可以提升开发体验。

教材：Web前端开发技术——HTML5、CSS3、JavaScript（第3版）储久良编著这是个人的期末复习笔记，纯手动输入，如果有哪里写错了，恳请指点。

01【Web】基础-HTML(P1)本系列文章，针对Web前端的相关知识进行了详细的介绍文章目录01【Web】基础-HTML(P1)Chapter01HTML概述1.Internet起源2.HTML发展过程

希望你开心，希望你健康，希望你幸福，希望你点赞！最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！喵喵喵，你对我真的很重要！目录前言横向二级导航菜单Web页面设计实例总结前言该练的还是要练，终究是自己的！网页标题：二级下拉导航菜单网页的主体部分代码为：使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style10.css@charset"utf-8";/*CSSDocu

希望你开心，希望你健康，希望你幸福，希望你点赞！最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！喵喵喵，你对我真的很重要！目录前言鼠标经过图片显示大图网页标题：表格标签的综合应用总结前言坚持就是胜利，加油特种兵！鼠标经过图片显示大图网页主体部分代码为：鼠标经过图片显示大图……新建一个外面样式表”hoverbox.css”放入CSS文件夹中，具体的样式设置如下：/*hoverbo

希望你开心，希望你健康，希望你幸福，希望你点赞！最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！喵喵喵，你对我真的很重要！目录前言表格表格表格标记表格标记-语法表格属性设置表格边框样式属性表格单元格间距、单元格边距属性表格水平对齐设置表格行的属性表格行的属性-设置设置单元格的属性设置单元格的属性-单元格跨行、列表格嵌套课后练习网页标题：计算机报价表网页标题：会员注册网页标题：列

Vue渐进式/适用场景丰富的Web前端框架。

解决spring-mvc@responseBody注解返回json乱码问题收藏刘志成发表于3年前阅读26213收藏5点赞11评论8【粉丝福利】-《web前端基础到实战系列课程》免费在线直播教学>>>在使用

chrome开发者工具使用performance性能监控rendering>ftpmeter动画性能监控，60fps正常，越高越好合并与压缩合并：把css、js分别合并为一个文件，减少http请求压缩：把html、css、js的空格注释去掉，减少请求大小图片优化减少请求大小、数量，优化加载速度jpg：压缩率高，大部分不需要透明图片的场景png：支持透明，大部分需要透明图片的场景webp：压缩成度更

目录1.简述常见单标签和双标签有哪些？2.常见块级元素和行级元素有哪些？3.简述常见的列表有哪些？他们有什么区别？4.简述超链接的href属性值如何设置？有什么区别5.CSS基本语法6.css中常见的引入方式有几种，分别是哪些？7.css中常见的选择器类型有哪些？8.CSS继承与层叠（优先级）9.字体样式：常见属性有哪些？如何设置文本水平和垂直方向居中？10.文本装饰线属性是什么，可以设置哪些样式

本文将介绍前端领域的细分领域，包括Web前端、移动端、桌面端、游戏端和VR/AR前端等，并分析它们各自的特点，以帮助读者更好地了解前端开发的多样性。

CSS的盒子模型一、学习目标能够认识不同选择器的优先级公式能够进行CSS权重叠加计算，分析并解决CSS冲突问题能够认识盒子模型的组成部分能够掌握盒子模型的边框、内边距、外边距的作用及简写形式能够计算盒子的实际大小能够了解外边距折叠现象，并知道如何解决盒子塌陷问题二、文章内容2.1CSS三大特性目标：能认识不同选择器的优先级公式，能够进行CSS权重叠加计算，分析并解决CSS冲突问题2.1.1优先级特

金山打字【金山打字】这是一个练习打字的游戏，当游戏开始后，界面从顶部不断落下内容为随机字母的方块，当按下相对应的按键时，就会清除对应方块。游戏难度会随着落下的速度加快而提高。玩家每次成功清除字母方块，都会获得一定的分数。运行效果：HTML源码-demo.html：金山打字游戏$(function(){newtypegame();});body{margin:0;background:url(gam

在Web前端技术中，我们可以使用HTML、CSS和JavaScript等语言来制作一款中国象棋游戏。玩家使用棋子（帅/相/士/炮/马/车/炮/卒）在棋盘上相互对弈，将对手的“帅”棋子吃掉即为胜利。

3D台球【3D台球】这款游戏的操作简洁明了，玩家只需要简单的练习两分钟便能够掌握。玩家需要用鼠标控制击球的方向和力度，将白球打进洞中。每次进球后，玩家需要选择下一个要击打的球，直到所有的球都打进洞中。但要注意避免黑球进洞。运行效果：HTML源码：ballbody{margin:0;padding:0;font-size:12px;background:url(res/wood.jpg)}Taiqi

在这篇文章中，我们将使用:placeholder-shown伪类创建一个浮动的问题标签效果，使用纯CSS实现。浮动的文字标签当我们处理输入框时，会想方设法提供给用户更好的体验。有两个标签属性是我们经常会用到的：label标签是关联表单元素，提供说明信息最适合的元素。输入框的placeholder属性允许您指定没有输入内容时出现在元素内的文本。它用于显示示例文字，而不是解释或提示。这两个标签属性可以

牵引力浅析哪种人合适做web前端开发随着互联网的迅猛发展和普及，IT技术类职位越来越受欢迎，前端开发工程师也在其中。一些想从事、或感兴趣的人会问：我适合做前端工程师吗？有什么要求呢？

学Web前端好找工作吗？学完前端后可以做什么？

HTMLHTML三层架构网站前端三层（重要！！！）html结构层--html结构css表现层--决定html的样式javascript动作层(逻辑层、行为层)--决定html如何交互我们追求的不是完全最新的版本而是适应符合当前的主流的版本HTML规则在做一个正式的网页或者是项目的时候1.任何时候文件文件夹图片都不能有任何的中文，铁律，必须遵守2.任何文件名称或者类名或者id名称，或者任何的变量，都

由于大前端知识点太多，所以一一做了分类整理，详情可见本人博客http://www.cnblogs.com/luxiaoyao/一、HTML1.注释格式：作用：1.解释说明代码的含义（代码量大，后期维护，便于新人交接）2.调试代码2.head内标签//meta:定义关于HTML文档的元信息3s之后刷新3s之后刷新并跳转到百度//title：定义文档的标题网站的标题//link:定义文档与外部资源的关

js是一个弱类型语言，同一个变量一会儿可以储存数据，一会儿可以存储字符串。全局变量:直接定义的变量是全局变量，可以被所有的脚本所访问到。局部变量：在函数定义里申明的变量。重点：局部变量只在函数内有效，同一个变量名如果在同时出现，则局部变量覆盖全局变量。代码说明：一、局部变量和全局变量重名会覆盖全局变量vara=1;functiontest1(){vara=2;alert(a);}test1();/

一、字体和文本样式目标：能够使用字体和文本相关样式修改元素外观样式1.字体样式字体大小属性名：font-size取值：数字+px注意点：谷歌浏览器默认文字大小是16px单位需要设置，否则无效px：像素字体粗细属性名：font-weight取值：关键字：正常：normal加粗：bold纯数字：正常：400加粗：700（100~900的整百数）注意点：不是所有字体都提供了九种粗细，因此部分取值页面中无

基础认知目标：认识网页组成和五大浏览器，明确Web标准的构成，使用HTML骨架搭建出一张网页一、前端基础知识概念铺垫1.认识网页网页的组成部分：文字、图片、超链接、视频、音频2.五大浏览器和渲染引擎浏览器：是网页显示、运行的平台，是前端开发必备利器渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分浏览器出品的公司不同，内在的渲染引擎也是不同的：浏览器厂商内核（渲染引擎）Chrome谷歌浏

一：网站基础认识：1.网页由哪些部分组成？？答：文字，图片，音频，视频，超链接2.程序员写的代码是通过什么软件转换成网页的？答：浏览器（是网页显示，运行的平台）常见五大浏览器（推荐谷歌！！！）代码用Web标准来写二：网页初体验把扩展名后缀txt改成html,Win11找不到文件扩展名在设置里面改或者在文件--查看--显示--扩展名HTML文档右击---打开方式--记事本记事本：Ctrl+S保存你要

行内元素水平居中如何设置？如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center来实现的。12345行内水平居中设置67div.box1,h5{8border:1pxsolidred;/*为了显示居中效果明显为div设置了边框*/9text-align:center;10}11121314行内元素水平居中如何设置？如果被设置元素为文本、图片等行内元素时