常见前端面试题及答案(上)

1.你能描述一下渐进增强和优雅降级之间的不同吗优雅降级:Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效.

渐进增强:从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时,它们会自动地呈现出来并发挥作用。

一个程序至少有一个进程,一个进程至少有一个线程。线程的划分尺度小于进程,使得多线程程序的并发性高。

另外,进程在执行过程中拥有独立的内存单元,而多个线程共享内存,从而极大地提高了程序的运行效率。

线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行,必须依存在应用程序中,由应用程序提供多个线程执行控制。

从逻辑角度来看,多线程的意义在于一个应用程序中,有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用,来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

期待的解决方案包括:文件合并文件最小化/文件压缩使用CDN托管缓存的使用(多个域名来提供缓存)其他。

如果不使用JS来完成,可以加分。(如:纯CSS实现的幻灯片效果)

nodejs,html5,css3,less等。

w3c存在的意义就是让浏览器兼容性问题尽量小,首先是他们对浏览器开发者的约束,然后是对开发者的约束。

FOUC(FlashOfUnstyledContent)--文档样式闪烁

HTML4.01规定了三种文档类型:Strict、Transitional以及Frameset。

XHTML1.0规定了三种XML文档类型:Strict、Transitional以及Frameset。

Standards(标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。

W3C标准推出以后,浏览器都开始采纳新标准,但存在一个问题就是如何保证旧的网页还能继续浏览,在标准出来以前,很多页面都是根据旧的渲染方法编写的,如果用的标准来渲染,将导致页面显示异常。为保持浏览器渲染的兼容性,使以前的页面能够正常浏览,浏览器都保留了旧的渲染方法(如:微软的IE)。这样浏览器渲染上就产生了Quircksmode和Standarsmode,两种渲染方法共存在一个浏览器上。IE盒子模型和标准W3C盒子模型:ie的width包括:padding\border。标准的width不包括:padding\border

document对象有个属性compatMode,它有两个值:BackCompat对应quirksmode,CSS1Compat对应strictmode。

XHTML与HTML的区别为:

局限:

下面这些问题需要考虑:

data-*属性用于存储页面或应用程序的私有自定义数据。data-*属性赋予我们在所有HTML元素上嵌入自定义data属性的能力。存储的(自定义)数据能够被页面的JavaScript中利用,以创建更好的用户体验(不进行Ajax调用或服务器端数据库查询)。

data-*属性包括两部分:

,,,等。19.请描述一下cookies,sessionStorage和localStorage的区别?sessionStorage和localStorage是HTML5WebStorageAPI提供的,可以方便的在web请求之间保存数据。有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递。sessionStorage、localStorage、cookie都是在浏览器端存储的数据,其中sessionStorage的概念很特别,引入了一个“浏览器窗口”的概念。sessionStorage是在同源的同窗口(或tab)中,始终存在的数据。也就是说只要这个浏览器窗口没有关闭,即使刷新页面或进入同源另一页面,数据仍然存在。关闭窗口后,sessionStorage即被销毁。同时“独立”打开的不同窗口,即使是同一页面,sessionStorage对象也是不同的cookies会发送到服务器端。其余两个不会。Microsoft指出InternetExplorer8增加cookie限制为每个域名50个,但IE7似乎也允许每个域名50个cookie。

因为浏览器的品种很多,每个浏览器的默认样式也是不同的,所以定义一个cssreset可以使各浏览器的默认样式统一。

此三种方法各有利弊,使用时应择优选择,比较之下第二种方法更为可取。

CSSSprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background-repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。

把span背景设成文字内容,这样又可以保证seo,也有图片的效果在上面。一般都是:alt,title,onerror。

各个浏览器都认识,这里给firefox用;

background-color:red\9;\9所有的ie浏览器可识别;

background-color:yellow\0;\0是留给ie8的+background-color:pink;+ie7定了;

_background-color:orange;_专门留给神奇的ie6;:root#test{background-color:purple\9;}:root是给ie9的,

@mediaalland(min-width:0px){#test{background-color:black\0;}}这个是老是跟ie抢着认\0的神奇的opera,必须加个\0,不然firefox,chrome,safari也都认识。

@mediascreenand(-webkit-min-device-pixel-ratio:0){#test{background-color:gray;}}最后这个是浏览器新贵chrome和safari的。

媒体查询,就是响应式布局。通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。

语法结构及用法:@media设备名only(选取条件)not(选取条件)and(设备选取条件),设备二{sRules}。

示例如下:

SVG意为可缩放矢量图形(ScalableVectorGraphics)。

书写示例如下:

其中media指定的属性就是设备,显示器上就是screen,打印机则是print,电视是tv,投影仪是projection。打印样式示例如下:

但打印样式表也应注意以下事项:

LESS&SassLESS是受Sass启发而开发的工具,它列出了如下开发的理由:

StylusStylus相对前两者较新,可以看官方文档介绍的功能。

所谓的标准字体是多数机器上都会有的,或者即使没有也可以由默认字体替代的字体。

方法:

从后往前判断。浏览器先产生一个元素集合,这个集合往往由最后一个部分的索引产生(如果没有索引就是所有元素的集合)。然后向上匹配,如果不符合上一个部分,就把元素从集合中删除,直到真个选择器都匹配完,还在集合中的元素就匹配这个选择器了。举个例子,有选择器:

先把所有class中有lol233的元素拿出来组成一个集合,然后上一层,对每一个集合中的元素,如果元素的parentid不为#wrapper则把元素从集合中删去。再向上,从这个元素的父元素开始向上找,没有找到一个tagName为body且class中有ready的元素,就把原来的元素从集合中删去。至此这个选择器匹配结束,所有还在集合中的元素满足。大体就是这样,不过浏览器还会有一些奇怪的优化。为什么从后往前匹配因为效率和文档流的解析方向。效率不必说,找元素的父亲和之前的兄弟比遍历所哟儿子快而且方便。关于文档流的解析方向,是因为现在的CSS,一个元素只要确定了这个元素在文档流之前出现过的所有元素,就能确定他的匹配情况。应用在即使html没有载入完成,浏览器也能根据已经载入的这一部分信息完全确定出现过的元素的属性。为什么是用集合主要也还是效率。基于CSSRule数量远远小于元素数量的假设和索引的运用,遍历每一条CSSRule通过集合筛选,比遍历每一个元素再遍历每一条Rule匹配要快得多。

说到IE的bug,在IE6以前的版本中,IE对盒模型的解析出现一些问题,跟其它浏览器不同,将border与padding都包含在width之内。而另外一些浏览器则与它相反,是不包括border和padding的。

在我们开发的过程中会发现,有时候,如果对页面中的大区域进行设置时,将border、padding计算到width和height之内,反而更灵活。但W3C的CSS2.1规范却规定了他们并不能被包含其中。考虑到这个问题,css3中引入了一个新的属性:box-sizing,它具有“content-box”和”border-box“两个值。

当我们设置box-sizing:content-box;时,浏览器对盒模型的解释遵从我们之前认识到的W3C标准,当它定义width和height时,它的宽度不包括border和padding。

当我们设置box-sizing:border-box;时,浏览器对盒模型的解释与IE6之前的版本相同,当它定义width和height时,border和padding则是被包含在宽高之内的。内容的宽和高可以通过定义的“width”和“height”减去相应方向的“padding”和“border”的宽度得到。内容的宽和高必须保证不能为负,必要时将自动增大该元素borderbox的尺寸以使其内容的宽或高最小为0。

display属性的值列表如下:

inline:此元素会被显示为内联元素,元素前后没有换行符。

inline-block:行内块元素。

JavaScript事件代理则是一种简单的技巧,通过它你可以把事件处理器添加到一个父级元素上,这样就避免了把事件处理器添加到多个子级元素上。当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。事件代理用到了两个在JavaSciprt事件中常被忽略的特性:事件冒泡以及目标元素。

this永远指向函数运行时所在的对象,而不是函数被创建时所在的对象。匿名函数或不处于任何对象中的函数指向window。

1.如果是call,apply,with,指定的this是谁,就是谁。

2.普通的函数调用,函数被谁调用,this就是谁。

以下代码展示了JS引擎如何查找属性:

结合自己的项目经验进行讲述。(chrome使用技巧)

散列表(也叫哈希表),是根据关键码值直接进行访问的数据结构。也就是说,它通过把关键码值映射到表中一个位置来访问记录,以加快查找的速度。这个映射函数叫做散列函数,存放记录的数组叫做散列表。

JavaScript的最初版本是这样区分的:null是一个表示'无'的对象,转为数值时为0;undefined是一个表示'无'的原始值,转为数值时为NaN。

但是,上面这样的区分,在实践中很快就被证明不可行。目前,null和undefined基本是同义的,只有一些细微的差别。

null表示'没有对象',即该处不应该有值。典型用法是:

undefined表示'缺少值',就是此处应该有一个值,但是还没有定义。典型用法是:

==运算符将两者看作相等。如果要区分两者,要使用===或typeof运算符。

以下是不正确的用法:

exp为null时,也会得到与undefined相同的结果,虽然null和undefined不一样。注意:要同时判断undefined和null时可使用本法。

typeof返回的是字符串,有六种可能:'number'、'string'、'boolean'、'object'、'function'、'undefined'。

以下是正确的用法:

JS中如何判断null?

exp为undefined时,也会得到与null相同的结果,虽然null和undefined不一样。注意:要同时判断null和undefined时可使用本法。

如果exp为undefined或者数字零,也会得到与null相同的结果,虽然null和二者不一样。注意:要同时判断null、undefined和数字零时可使用本法。

为了向下兼容,exp为null时,typeof总返回object。这种方式也不太好。

包就是能够读取其他函数内部变量的函数。由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”。

所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

使用闭包的注意点:

(关于闭包,详细了解请看JavaScript之作用域与闭包详解)

THE END
1.CSS实战技巧:构建精致网页布局指南在编写CSS之前,我们需要先确定网页的基本结构,包括页眉、导航栏、主要内容区、侧边栏和页脚等部分。通过合理的布局设计,可以使网页看起来更加整洁、有序。我们可以使用HTML标签来定义这些部分,并为它们设置合适的类名或ID,以便后续应用CSS样式。 三、设置全局样式 https://www.0515zz.com/html/jiaocheng/2024-12-19/304390.html
2.如何用html建设网站?网站的建设流程HTML(超文本标记语言)是构建网站的基础语言,它为网页提供了结构和内容。通过HTML,您可以创建页面元素,如文本、图片、链接、表单等。虽然HTML本身并不涉及设计和互动效果,但它是网站建设的根基。在这篇文章中,我们将探索如何用HTML建设一个简单的静态网站,并介绍HTML的基础知识、结构、标签使用以及如何与CSS、JavaScripthttps://www.qizeweb.com/7362.html
3.100个鲜为人知的CSS技巧汇总整理合集2024年马上就要结束了,2025年马上来临了,在过去的很长一段时间里,我花了很多时间将之前的一些基础知识做了整理,希望这些内容能够帮助你在学习前端技能的时候,稍微顺利一些。今天,我将整理好的这 100 个 CSS 知识技巧分享给你,希望你会觉得它对你有用。 https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649142740&idx=2&sn=d203dd51ee24e51ff13630341f296c35&chksm=bfc60df21f0cd16e00a89f60e196d70fe6ce6b7f4a2cecade150a56f6457b3ffae572d1e2e22&scene=27
4.HTML+CSS+JavaScript传统文化大学生网页设计期末作业HTML+CSS+JS【传统文化】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计 文章目录 一、 网站题目 二、 网站描述 三、 网站介绍 四、 网站效果 五、? 网站代码 六、 如何学习进步 七、? 更多干货 https://blog.csdn.net/qq_58648235/article/details/135222128
5.HTML&CSS设计与构建网站([美]达科特)PDF原版[102MB]电子书下载HTML & CSS设计与构建网站 ([美]达科特) PDF原版[102MB] 使用鲁大师安全下载 电信安全下载 网通安全下载 移动安全下载 联通安全下载 普通下载地址: 巨牛网络电信下载 华晨网络电信下载 数掘网络电信下载 中国电信网络下载 中国移动网络下载 中国联通网络下载 https://www.jb51.net/books/481096.html
6.HTML5入门教程:一步步构建你的第一个网页HTML5通过新的标签和属性,提供了更丰富的多媒体支持和更强的交互性,使得网页构建更加语义化和结构化。HTML5规范得到了广泛支持,能够更好地兼容不同设备和平台,并且应用范围非常广泛,包括静态网站、博客、社交网络等。 HTML5简介 HTML5是超文本标记语言(Hypertext Markup Language)的第五个重大版本,它在HTML4的基础https://www.imooc.com/article/359119
7.HTML&CSS设计与构建网站(豆瓣)不管您设计和建立新网站,还是想更好地控制现有网站,都可以在《HTML & CSS 设计与构建网站》一书的指导下创建出用户友好、令用户赏心悦目的Web内容。我们知道,编码是一项令人望而生畏的工作,而本书却采用有别于许多传统编程书籍的新颖编排方式,将使您收到事半功倍的学习效果。https://book.douban.com/subject/21338365/
8.2021必修CSS架构系统精讲mob64ca12d06991的技术博客首先,作为一名新入行的开发者,掌握 CSS 架构的基本步骤是非常重要的。以下是实现“2021必修 CSS架构系统精讲”的整体流程: 1. 理解 CSS 架构的基本概念 CSS 架构的基本概念涉及模块化、可复用性和可维护性。建立良好的架构将帮助你更好地管理与协作。 https://blog.51cto.com/u_16213300/12872635
9.HTML&CSS设计与构建网站中文版HTML&CSS 设计与构建网站 完整版par3,有中英文两种,由于英文版是高清版,所以比较大,分为三个压缩文件,需要的朋友自取。 上传者:u013204337时间:2016-12-17 HTML&CSS;设计与构建网站.zip HTML&CSS;设计与构建网站,包含完整书籍,还有书籍中案例的源码。 https://www.iteye.com/resource/a976134036-9844675
10.Web设计与前端开发秘籍:HTML&CSS设计与构建网站+JavaScript&通过将编程理论与用来演示JavaScript和jQuery如何被应用于流行站点之上的示例相结合,《JavaScript & jQuery交互式Web前端开发》将教会您如何让网站更具交互性、吸引性、可用性。很快,您就能够像一名程序员那样去思考和编写代码了。 《HTML & CSS 设计与构建网站》 欢迎您选择一种更高效的学习HTML和CSS的方式。不管您http://m.dangdang.com/product.php?pid=26437708&ac=content
11.htmlcss设计与构建网站pdf网站备案号是工业和信息化部关于网站备案管理系统颁发的网络信息许可证号码。ICP经营许可证全称是《中华人民共和国电信与信息服务业务经营许可证》,是通过互联网向上网用户提供有偿信息、网上广告、代制作网页、电子商务及其它网上应用服… 标签: 网站备案号 网站备案 免费商城与免费小程序商城 2023-11-12 免费商城是http://www.ytdns.net/tags/?q=html+css%E8%AE%BE%E8%AE%A1%E4%B8%8E%E6%9E%84%E5%BB%BA%E7%BD%91%E7%AB%99+pdf
12.HTML+CSS网页设计与制作在当今数字化时代,网页设计与制作成为了一项至关重要的技能。HTML(超文本标记语言)和 CSS(层叠样式表)是构建网页的基础技术,它们相互协作,能够创造出令人惊艳的网页效果。本文将深入探讨 HTML + CSS 网页设计与制作的过程、技巧和最佳实践。 一、HTML:网页的结构基石 https://www.yunbuluo.net/xueyuan/19208.html
13.HTML#38;CSS设计与构建网站.pdfHTML#38;CSS设计与构建网站.pdf,护理学经营创新管理学资料中医养生内科咨询培训物流与供应链https://m.book118.com/html/2020/0327/7023066042002125.shtm
14.《HTML5CSS3从入门到精通》《HTML5 CSS3从入门到精通》(清华社“视频大讲堂”大系)通过基础知识 中小实例 综合案例的方式,讲述了用HTML5 CSS3设计构建网站的必备知识,相对于权威指南、高级程序设计、开发指南同类图书,本书是一本适合快速入手的自学教程。内容有:创建HTML5文档,实战HTML5表单,实战HTML5绘画,HTML5音频与视频,Web存储,离线应用http://www.zhuzi.me/blog/211140.html
15.HTML5和CSS3WEB技术开发腾讯云开发者社区HTML5和CSS3 WEB技术开发_ide_03 2.WWW 2.1 www来源 WWW是环球信息网的缩写,(亦作“Web”、“WWW”、“‘W3’”,英文全称为“World Wide Web”),中文名字为“万维网”,"环球网"等,常简称为Web。 分为Web客户端和Web服务器程序。 WWW可以让Web客户端(常用浏览器)访问浏览Web服务器上的页面。 是一个由https://cloud.tencent.com/developer/article/2476684
16.2023Web前端开发八股文&面试题(万字系列)——这篇就够了!分别是:HTML、CSS、JavaScript 作用:HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能与业务。 1.12 网页制作会用到的图片格式有哪些? Webp:WebP格式,谷歌(google)开发的一种旨在加快图片加载速度的图片格式。并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用https://developer.aliyun.com/article/1353677
17.网页设计论文层叠样式表CSS示国际W3C标准化组织制定的一套完整的扩展样式标准,主要是为了在HTML的样式编排上对其功能进行补充,更好地完成网页设计的需要而制定的设计标准。CSS层叠样式表对HTML的标记属性的设定进行了扩充,可以使用Script程序功能来对其进行很好的控制,从而对网络的外观设计和整体的布局设计进行非常有效的控制,让网页在https://www.ruiwen.com/lunwen/6161857.html
18.《Web前端开发HTML/CSS》教学大纲4、利用QQ、微信等网络平台,及时沟通互动,给学生课后答疑。 五、考核方式 综合大作业 六、成绩评定方法 综合大作业成绩70%,平时成绩30% 七、教学参考书 1.《HTML5与CSS3基础教程》 [美] Elizabeth,Castro,Bruce,Hyslop 著;望以文 译 2.《Web设计与前端开发秘籍:HTML & CSS 设计与构建网站 》 [美] 达科特https://jwc.hqu.edu.cn/info/1109/7804.htm