15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 前端基础练习题(请查收)

前端基础练习题(请查收)

时间:2023-09-07 16:06:01 | 来源:网站运营

时间:2023-09-07 16:06:01 来源:网站运营

前端基础练习题(请查收):
  1. css的优先级算法如何计算?
*或继承 0.0.0.0 *

元素(标签) 0.0.0.1 p

类,伪类 0.0.1.0 .

Id 0.1.0.0 #

行内样式 1.0.0.0 元素后直接使用

!Important +∞

权重相同,就近原则

权重会叠加,没有进制




从小到大排列:

*或继承<标签<类,伪类<id<行内<!Important




  1. display:none与visibility:hidden的区别?
(1)Display:none 隐藏

隐藏后不保留位置

(2)Visibility:hidden 隐藏

隐藏后保留位置




  1. position跟display、overflow、float这些特性相互叠加后会怎么样?
display属性规定元素应该生成的框的类型;position属性规定元素的定位类型;float属性是一种布局方式,定义元素在哪个方向浮动。

类似于优先级机制:position:absolute/fixed优先级最高,有他们在时,float不起作用,display值需要调整。float 或者absolute定位的元素,只能是块元素或表格。

https://www.cnblogs.com/wulinzi/p/8426383.html




  1. CSS优化、提高性能的方法有哪些?
1、尽量将样式写在单独的css文件里面,在head元素中引用

  有时候为了图方便或者快速搞定功能,我们可能会直接将样式写在页面的style标签或者直接内联在元素上,这样虽然简单方便,但是非常不利于日后的维护。将代码写成单独的css文件有几点好处:

  (1)内容和样式分离,易于管理和维护

  (2)减少页面体积

  (3)css文件可以被缓存、重用,维护成本降低

2、不使用@import

 @import影响css文件的加载速度

3、避免使用复杂的选择器,层级越少越好

  有时候项目的模块越来越多,功能越来越复杂,我们写的CSS选择器会内套多层,越来越复杂。

建议选择器的嵌套最好不要超过三层

  简洁的选择器不仅可以减少css文件大小,提高页面的加载性能,浏览器解析时也会更加高效,也会提高开发人员的开发效率,降低了维护成本。

4、精简页面的样式文件,去掉不用的样式

  很多时候,我们会把所有的样式文件合并成一个文件,但是这样有一个问题:很多其他页面的CSS同时引用到当前页面中,而当前页面并没有用到它们,这种情况会造成两个问题:

  (1)样式文件偏大,影响加载速度

  (2)浏览器会进行多余的样式匹配,影响渲染时间。

  正确的处理方法是根据当前页面需要的css去合并那些当前页面用到的CSS文件。

  PS:合并成一个文件有一个优点:样式文件会被浏览器缓存,进入到其他页面样式文件不用再去下载。这条规则应根据场景来区别对待,如果是大项目,应该合并成不同的样式文件,如果是简单的项目,建议合并成一个文件即可。如果无法确认项目规模,建议分开成不同的样式文件,日后要合并也比较方便。

5、利用CSS继承减少代码量

  我们知道有一部分CSS代码是可以继承的,如果父元素已经设置了该样式,子元素就不需要去设置该样式,这个也是提高性能的行之有效的方法。

  常见的可以继承的属性比如:

  color,font-size,font-family等等

  不可继承的比如:

  position,display,float等

6、慎重使用高性能属性:浮动、定位;




  1. li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
行框的排列会受到中间空白(回车空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔,把字符大小设为0,就没有空格了。

解决方法:

可以将<li>代码全部写在一排

浮动li中float:left

在ul中用font-size:0(谷歌不支持);可以使用letter-space:-3px




  1. 什么叫img3px问题,怎么解决?
将一个img放在div里面,你会发现在img下面无端端的就多出3px的空白出来

1、设置div{ font-size: 0}

2、设置img{ display: block}

3、设置img{ vertical-align:top;}

当然推荐第二种方法,让img对象成为块级元素。




  1. png、jpg、gif 这些图片格式解释一下,分别什么时候用?
png是便携式网络图片(Portable Network Graphics)是一种无损数据压缩位图文件格式.优点是:压缩比高,色彩好。 大多数地方都可以用。

jpg是一种针对相片使用的一种失真压缩方法,是一种破坏性的压缩,在色调及颜色平滑变化做的不错。在www上,被用来储存和传输照片的格式。

gif是一种位图文件格式,以8位色重现真色彩的图像。可以实现动画效果.

webp格式是谷歌在2010年推出的图片格式,压缩率只有jpg的2/3,大小比png小了45%。缺点是压缩的时间更久了,兼容性不好,目前谷歌和opera支持。




  1. 文本超出显示省略号如何实现?
white-space:nowrap; 强制在同一行内显示所有文本,知道文本结束或遇到br

overflow:hidden;

text-overflow:clip/ellipsis;直接裁切/溢出部分...标记




  1. 对WEB标准以及W3C的理解与认识?
web标准简单来说可以分为结构、表现和行为。其中结构主要是有HTML标签组成。或许通俗点说,在页面body里面我们写入的标签都是为了页面的结构。表现即指css样式表,通过css可以是页面的结构标签更具美感。行为是指页面和用户具有一定的交互,同时页面结构或者表现发生变化,主要是有js组成。

web标准一般是将该三部分独立分开,使其更具有模块化。但一般产生行为时,就会有结构或者表现的变化,也使这三者的界限并不那么清晰。

W3C对web标准提出了规范化的要求,也就是在实际编程中的一些代码规范:包含如下几点

1.对于结构要求:(标签规范可以提高搜索引擎对页面的抓取效率,对SEO很有帮助)

1)。标签字母要小写

2)。标签要闭合

3)。标签不允许随意嵌套

2.对于css和js来说

1)。尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块,符合规范。同时提高页面渲染速度,提高用户的体验。

2)。样式尽量少用行间样式表,使结构与表现分离,标签的id和class等属性命名要做到见文知义,标签越少,加载越快,用户体验提高,代码维护简单,便于改版

3)。不需要变动页面内容,便可提供打印版本而不需要复制内容,提高网站易用性。




  1. xhtml和html有什么区别?
一、其基础语言不同

1、XHTML是基于可扩展标记语言(XML)。

2、HTML是基于标准通用标记语言(SGML)。

二、语法严格程度不同

1、XHTML语法比较严格,存在DTD定义规则。

2、HTML语法要求比较松散,这样对网页编写者来说,比较方便。

三、可混合应用不同

1、XHTML可以混合各种XML应用,比如MathML、SVG。

2、HTML不能混合其它XML应用。

四、大小写敏感度不同

1、XHTML对大小写敏感,标准的XHTML标签应该使用小写。

2、HTML对大小写不敏感。

五、公布时间不同

1、XHTML是2000年W3C公布发行的。

2、HTML4.01是1999年W3C推荐标准。




  1. 前端页面有哪三层构成,分别是什么,作用是什么?
最准确的网页设计思路是把网页分成三个层次,即:结构层、样式层、行为层。

HTML:结构层

网页的结构或内容层是该页面的基础HTML代码。正如房屋的框架为房屋的其他部分构建了一个坚实的基础,HTML的坚实基础创建了一个可以在其上创建网站的平台。

结构层用于存储客户想要阅读或查看的所有内容。HTML结构可以包含文本和图像,它包括访问者用于浏览网站的超链接。这是在符合标准的HTML5中编码的,可以包括文本,图像和多媒体(视频,音频等)。

网站内容的每个方面都应该在结构层中表示。这允许关闭JavaScript的客户或无法查看整个网站的CSS访问权限的客户(如果不是所有功能)。

CSS:样式层

该层指示结构化HTML文档如何看待网站的访问者,并由CSS(层叠样式表)定义。这些文件包含有关如何在Web浏览器中显示文档的样式说明。样式层通常包括基于屏幕大小和设备更改站点显示的媒体查询。

网站的所有视觉样式都应位于外部样式表中。您可以使用多个样式表,但请记住,每个CSS文件都需要HTTP请求才能获取它,从而影响站点性能。

JavaScript:行为层

行为层使网站具有交互性,允许页面响应用户操作或基于一组条件进行更改。JavaScript是行为层最常用的语言,但CGI和PHP也经常被使用。

当开发人员引用行为层时,大多数都是指在Web浏览器中直接激活的层。您可以使用此图层直接与DOM(文档对象模型)进行交互。在内容层中编写有效的HTML对于行为层中的DOM交互非常重要。在构建行为层时,应该像使用CSS一样使用外部脚本文件来优化速度和性能。



关键词:练习,基础

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭