前言前端面试和学习是必不可少的东西。下面是一些高频面试题，供大家现在和以后自己参考。朋友帮忙。HTML1、HTML语义理解1.用正确的标签做正确的事！2、HTML语义化是为了让页面内容结构化，方便浏览器和搜索引擎分析；3、同样以无样式CSS的文档格式显示，阅读方便。4、搜索引擎爬虫依靠标签来确定每个关键字的上下文和权重，这有利于SEO。5.让阅读源代码的人更容易将网站分成块，便于阅读、维护和理解2.HTML5有哪些新特性，哪些元素被移除？HTML5不再是SGML的子集，主要是增加了图像、位置、存储、多任务等功能用于媒体播放的Drawingcanvas视频和音频元素本地离线存储localStorage长期存储数据，数据不会被删除浏览器关闭后丢失title和alt有什么区别？alt是图片加载失败时显示在网页上的替代文字；title是鼠标放在上面时显示的文本。alt是img的必要属性，title不是。4.从浏览器地址栏输入url到显示页面的步骤。浏览器将请求的URL提交给DNS域名解析，找到真实IP，向服务器发起请求；服务器后台处理完成后返回数据，浏览器收到文件（HTML、JS、CSS、图片等）；浏览器解析加载的资源（HTML、JS、CSS等），并建立相应的内部数据结构（如HTMLDOM）；加载已解析的资源文件，渲染页面，完成。5.HTML的全局属性有哪些类：为元素设置类标识data-*：为元素添加自定义属性draggable：设置元素是否可拖动id：元素id，文档lang中唯一：元素的内容语言风格：内联css风格标题：元素相关的建议信息6.谈谈你对浏览器内核的理解？主要分为渲染引擎（布局工程师或渲染引擎）和JS引擎渲染引擎两部分：负责获取网页内容（HTML、XML、图片等）、组织信息（如添加CSS等），并计算网页的显示方式，然后输出到显示器或打印机。不同的浏览器内核对网页的语法解释不同，因此呈现的效果也不同。所有Web浏览器、电子邮件客户端和其他需要编辑和显示网络内容的应用程序都需要内核JS引擎。然后：解析并执行javascript，实现网页的动态效果。起初，渲染引擎和JS引擎并没有明确区分，后来JS引擎越来越独立，内核往往只指渲染引擎7.请描述一下cookies、sessionStorage和localStorage的区别？Cookie是网站为了识别用户身份而存储在用户本地终端（ClientSide）上的数据（通常是加密的）。cookie数据总是携带在同源http请求中（即使不需要），在浏览器和服务器之间记录。来回传递sessionStorage和localStorage不会自动向服务器发送数据，只在本地保存存储大小：cookie数据大小不能超过4ksessionStorage，localStorage也有存储大小限制，但是比cookie大很多，可以达到5M或者较大的一段时间时间：localStorage存储的是持久化数据，关闭浏览器后数据不会丢失，除非主动删除数据。sessionStorage数据在当前浏览器窗口关闭后自动删除。哪个？什么是块级元素？什么是空（void）元素？内联元素和块级元素有什么区别？行内元素有：abspanimginputselectstrong块级元素有：divulollidldtddh1h2h3h4...p空元素：
![]()
Inline元素不能设置宽高，不占一行。块级元素可以设置宽度和高度，但占用一行。9、如何在页面上实现一个圆形的可点击区域？svgborder-radius的纯js实现，需要点不在圆上的简单算法，获取鼠标坐标等。10、HTTP状态码及其含义1XX：信息状态码2XX：成功状态码3XX：重定向4XX：clienterror5XX:Servererror11.你能描述一下渐进增强和优雅降级的区别吗？渐进增强：为低版本浏览器构建页面，保证最基本的功能，然后为高级浏览器改进效果和交互附加功能，以达到更好的用户体验。优雅降级：从一开始就构建完整的功能，然后使其与低版本浏览器兼容。12.渲染优化1.使用CSS3代码代替JS动画（尽量避免重绘和回流）2.页面中空的href和src会阻塞页面其他资源的加载（阻塞下载过程）3.使用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能4.当需要设置的样式较多时，设置className而不是直接操作style5，少用全局变量，缓存DOM节点搜索的结果。减少IO读取操作6.图片预加载，样式表放在最上面，脚本放在最下面，加上时间戳13.如何优化网站性能1.减少HTTP请求：mergefiles,CSSsprites,inlineImage2,Put页面顶部的样式表3，不使用CSS表达式4，使用代替@import5，将脚本放在页面底部6，从外部导入javascript和css7，压缩javascript和cssCSS1，盒模型boxmodel分为两大类：IEboxmodel和standardboxmodel。两者的区别是：IE盒模型的width/height=content+border+padding标准盒模型的width/height=content2，CSS优先级算法如何计算？优先和就近原则，在权重相同的情况下，以最近的样式定义为准。加载方式应以最后一次加载的位置为准。优先级为：!important>id>class>tag；!important优先级高于inline3,CSS3新增了哪些特性各种css选择器圆角边框-半径多列布局阴影与反射文字特效文字-阴影线性渐变旋转变换CSS3新增了哪些伪类？:after在元素前添加内容，也可用于清除浮动。:before在元素之后添加内容。:enabled启用表单元素。:disabled禁用表单元素。:checked单选或复选框被选中。4、CSS通用选择器通配符：*ID选择器：#ID类选择器：.class元素选择器：p、a等后代选择器：pspan、diva等伪类选择器：a:hover等属性选择器：input[type="text"]等5.link和@import的区别Link是HTML模式，@import是CSS模式，link最大程度支持并行下载，@import嵌套过多导致串行下载，FOUC(文档样式暂时失效)链接可以通过rel="alternatestylesheet"指定候选样式。浏览器支持早于@import的链接，您可以使用@import对旧浏览器隐藏样式。@import必须在stylerule之前，可以在css文件中引用其他文件总体来说：link比@import6好，如何创建块格式化上下文（blockformattingcontext），BFC有什么用，什么是BFC？BFC格式化上下文，是一个独立的渲染区域，让BFC中的内部元素和外部元素相互隔离，使得内部元素和外部元素的定位不会互相影响容器内元素和容器外元素的布局不会互相影响解决上下外边距重叠问题；为两个重叠框启用bfc；解决浮动导致的高度塌陷；为containerbox启用bfc，解决textwrappingimage；左边图片div，右边文本容器p，打开p容器bfc7，绝对定位和相对定位的区别不显示差距？去除空格使用negativemargin使用font-size:0letter-spacingword-spacing9清除浮动的几种方式，各自的优缺点父div定义高度最后添加一个空的div标签clear:both父div定义伪类：afterandzoomparentdivdefinitionoverflow:hiddenparentdiv也是浮动的，需要定义宽度加上br标签clear:both在最后是第三种方式，很多网站都是这样如何使用10.为什么需要初始化CSS样式？因为浏览器兼容性问题，不同的浏览器对一些标签的默认值不同。如果不对CSS进行初始化，浏览器之间的页面显示往往会存在差异。当然，初始化样式会对SEO产生一定的影响，但是鱼和熊掌不可兼得，而是尽量以影响最小的方式进行初始化。11、自适应布局思路：左边浮动或者绝对定位，然后在右边扩大margin让包含，然后靠负margin用flex12形成bfc，position的取值是多少？效果如何？静止的。默认值不脱离文档流，top、right、bottom、left等属性不生效。相对的。不脱离文档流，按照自己的定位走偏。当子元素设置为absolute时，它会根据它进行偏差。绝对。脱离文档流，根据top、right、bottom、left等属性偏移在正常文档流中的位置。固定的。通过浏览器窗口定位，当滚动条出现时，不会随之滚动。13、垂直居中的方法有哪些？对于单行文本，可以使用height和line-height设置相同的高度。position+margin：设置父元素：position：relative；，子元素height：100px；位置：绝对；顶部：50%；保证金：-50px000；(设置高度)position+transform:设置父元素position:relative,子元素:position:*absolute;top:50%;transform:translate(0,-50%);(可变高度)百搭flex布局(ie10+)，设置父元素display:flex;align-items:center;(Indeterminateheight)14.水平居中的元素是行内元素。设置父元素text-align:center。如果元素宽度固定，可以设置左右外边距为auto；如果元素是绝对定位，设置父元素position为relative，设置元素为left:0;right:0;margin:auto;使用flex-box布局，指定justify-content属性为centerdisplay设置为tabel-ceil15,flexlayoutdisplay:flex//设置flex模式flex-direction:column//判断元素是水平还是垂直？flex-wrap:wrap//确定元素的包裹格式justify-content:space-between//同一行的对齐方式，空格如何分隔各个元素align-items:center//同一行的元素如何对齐align-content:space-between//多行对齐16、stylus/sass/less的区别有“可变”、“混合”、“嵌套”、“继承”、“颜色混合”五个基本特性Scss与LESS，语法更严谨。LESS需要使用大括号“{}”。Scss和Stylus可以使用缩进来表示层级和嵌套关系。Scss没有全局变量的概念，LESS和Stylus有类似其他语言的作用域概念。Sass基于Ruby语言，LESS和Stylus基于NodeJSNPM下载相应库后即可编译；20.你知道css有content属性吗？效果如何？应用是什么？css的content属性专门应用于b在前/后伪元素上插入生成的内容最常见的应用是使用伪类来清除浮动。21.性能优化css压缩与合并中的CSS实践，头部gzip压缩css文件，不要使用@import，尽量使用缩写，避免过滤器，合理使用选择器22、CSS3动画（简单动画的实现，如如旋转等）依赖于CSS3中提出的三个属性：transition、transform、animationtransition：定义了元素在变化过程中的状态，包括transition-property、transition-duration、transition-timing-function、transition-delay。transform：定义元素的变化结果，包括旋转、缩放、倾斜和平移。animation：animation定义了动作的每一帧（@keyframes）的效果，包括animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction
