目前Java语言在IT互联网行业的应用还是非常广泛的，由于大数据和云计算两大技术体系在构建技术生态的过程中基本上都大量采用了Java语言，所以2021年大数据和云计算在产业领域的人才需求潜力仍然是比较大的，各大招聘网站上搜索市场需求量大，大家可以看一下下面这张图
下面是我搜集整理的比较全面的一些java前端面试题
一、如何区分 HTML 和 HTML5？
DOCTYPE声明\新增的结构元素\功能元素
二、CSS 选择符有哪些？
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.子选择器（ul > li）
5.后代选择器（li a）
6.通配符选择器（ * ）
7.属性选择器（a[rel = "external"]）
8.伪类选择器（a: hover, li:nth-child）
三、简要说一下CSS的元素分类
块级元素：div,p,h1,form,ul,li;
行内元素 : span,a,label,input,img,strong,em;
四，解释css sprites ，如何使用？
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，
再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，
background-position可以用数字能精确的定位出背景图片的位置。
CSS Sprites为一些大型的网站节约了带宽，让提高了用户的加载速度和
用户体验，不需要加载更多的图片 作者：编码梦想家 https://www.bilibili.com/read/cv10115331/ 出处：bilibili
五、解释下浮动和它的工作原理？清除浮动的方法
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
1.使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
2.使用after伪对象清除浮动
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；
#parent:after{ content:"."; height:0; visibility:hidden; display:block; clear:both; }
3.设置overflow为hidden或者auto
4.浮动外部元素
六、CSS隐藏元素的几种方法（至少说出三种）
Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;
Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
Position:不会影响布局，能让元素保持可以操作;
Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;
七、请描述一下cookies，sessionStorage和localStorage的区别？
相同点：都会在浏览器端保存，有大小和同源限制。
不同点：
1、cookie会随请求发送到服务器，作为会话表示，服务器可修改cookie。web storage不会随请求大宋到服务器。
2、cookie有path的概念，子路径可以访问父路径的cookie，父路径不可以访问子路径的cookie。
3、有效期： cookie在设置的有效期内有效，默认为浏览器关闭消失。sessionStorage在会话窗口关闭后失效，localStorage长期有效，需主动删除。
4、sessionStorage不能共享，localStorage在同源文档之间可以共享，cookie在同源且符合path规则的文档之间可以共享。
5、localStorage的修改会触发其他文档的update事件。
6、cooie有secure属性要求HTTPS传输。
7、浏览器不能保存超过300个cookie，单个服务器不能超过20个，每个cookie不能超过4k。webStorage可以支持5M的存储。
八、session与窗口的关系
每个session对象都与浏览器一一对应 重新开启一个浏览器，相当于重新创建一个session对象重新开启一个IE窗口，直接访问系统首页面 通过超链接打开的新窗口，新窗口的session与其父窗口的session相同
九、Javascript中的定时器有哪些？他们的区别及用法是什么？
setTimeout 只执行一次
setInterval 会一直重复执行
十、document.write和innerHTML的区别
document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。
innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。
innerHTML将内容写入某个DOM节点，不会导致页面全部重绘
innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。
十一、前端性能优化的方式
1、减少DOM操作
2、部署前，图片压缩，代码压缩
3、优化js代码结构，减少冗余代码
4、减少http请求，合理设置HTTP缓存
5、使用内容分发cdn加速
6、静态资源缓存
7、图片延迟加载
十二、js有几种数据类型，其中基本数据类型有哪些
五种基本类型: Undefined、Null、Boolean、Number和String。
引用类型: Object、Array和Function。 作者：编码梦想家 https://www.bilibili.com/read/cv10115331/ 出处：bilibili
十三，怎样添加、移除、移动、复制、创建和查找节点？
（1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
（3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
十四、display:none和visibility:hidden区别？
1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，
在文档流中占位，浏览器会解析该元素；
2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，
页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，
此时就是回流。所有页面第一次加载时需要产生一次回流），
而visibility切换是否显示时则不会引起回流。
十五、$(document).ready()方法和window.onload有什么区别？
(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。
(2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。
十六、xhtml和html的区别
XHTML：可扩展超文本标记语言，XHTML元素必须被正确地嵌套，XHTML 元素必须被关闭。标签名必须用小写字母。XHTML 文档中元素必须被嵌套于 根元素中。
HTML：超文本标记语言，在HTML中允许一些不规范的写法，HTML对于各大浏览器兼容性较差，现在web前端开发的静态网页，一般都是html4.0。
十七、前端页面有哪三层构成，分别是什么，作用是什么?
结构层：html ；作用：由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”
表示层:css ，作用：由 CSS 负责创建，CSS对“如何显示有关内容”的问题做出了回答。
行为层：js，作用：负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。
