流年似水博客开通了,本站主要是写关于Web和大数据方面内容,正在更新中,欢迎大家光临!
  1. 文章:97 篇
  2. 总浏览:54,685 次
  3. 评论:22条
  4. 最后更新:2020-06-08
  5. 分类目录:39 个

html、js、css 基础面试题

前端面试题 l, xy 500℃ 0评论
文章目录[隐藏]

    

 前言:  个人见识有限,如有差错,请多多见谅

css部分

一、介绍一下css的盒子模型

Html元素都以矩形框表示,矩形框的模型来描述占用空间,这种模型就叫盒模型

二、行内元素和块元素的区别

  • 行内元素可以在横向排列,在一行,默认宽度为内容宽度,块元素只能垂直排列,且一个元素占用一行
  • 块元素可以包含行内元素和块元素,但行内元素则不能包含块元素,只能包含文本或者其他行内元素。
  • 行内元素和块元素属性不同,主要体现在盒子模型上,行内元素设置width、height、margin、padding无效

三、SASS、Less是什么,要怎样使用它

Css预处理器

SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。

通常使用都是结合webpack或者gulp一同使用,引入Less或者SASS插件,使用语法请参照 SASS官网 和LESS官网

四、css3新特性

1.选择器:nth-child(n) , last-child,frist-child
2.阴影:box-shadow,text-shadow
3.圆角:border-radius
4.渐变:dinner-gradient radial-gradient
5.transfrom 
6.animation
7.分列:column-count:列数
      column-rule:分割线定义
       column-gap:间距
8.过渡:transition

五、描述一下响应式设计

网页设计和开发会根据用户的行为和设备环境进行相应的响应和调整,处理方式包括网格页面,css media query使用。响应式设计是为了兼容各个终端,而不是为每个终端设计一款页面


HTML部分

一、当前主流浏览器内核

Google:blink
fireFox:gecko
Ie:trigent
Safari:webkit

二、移动浏览器如何禁止用户对页面进行缩放

在页面head添加
<meta name=“viewport” content=“width=devise-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0 , userSalable=no">

三、html5新增标签有哪些?移除了哪些元素?

新增:article  footer header section nav aside (此为我常用标签,如想了解更过可自行查找)
删除元素:<acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、 <frame>、<frameset>、<noframes>、<strike>、<tt>

四、如何理解h5的语义话?

便于SEO,爬虫是根据语义话标签查找内容,就算在没有css的情况下,页面也能呈现最好的内容结构,便于开发者浏览更加便捷的代码。


js部分

一、事件冒泡和事件捕获是什么意思

ie提出了和netscape正好相反的事件流,事件冒泡,natscape提出了事件捕获
事件冒泡:是指从具体的元素,逐级传递给不具体的元素节点
事件捕获:正好相反,从不具体的元素,传递到具体的元素
事件流分为三个阶段,依次是事件捕获 ,处于事件,事件冒泡 

二、已知一个ID为 “link-button”  的元素,如何设置这个元素的class属性?

document.getElementById(“link-button”).classList.add(“active”);
或者

document.getElementById(“link-button”).setattribute(“class”,’active’)

三、描述下innerHTML,outHTML和innerText 的区别

innerHTML:起始标签和结束标签内的内容html
outerHTML:包括起始标签和结束标签以及内容的html
innerText:起始标签和结束标签内的文本

四、什么是ajax,如何实现跨域

Ajax是一种技术方案,但并不是一种新技术。它依赖现有的CSS/HTML/JavaScript,而其中最核心的依赖是浏览器提供的XMLHttpRequest对象,是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。实现了在页面不刷新个情况下和服务器进行数据交互。

如何实现跨域可参照此文章


其他

一、http状态吗有哪些?分别代表什么意思

常用状态码:

200:服务器请求成功
304:服务器传输数据于客户端一致,不需要再次传输,客户端使用缓存即可
400:告诉客户端发送一个错误的请求
404:未找到相应资源
500:服务器发生错误
501:服务器发生了一个错误,不能正常提供资源

二、为什么把link标签放在head标签中,把script标签放在body标签后面?

文档的head元素中包含所有JavaScript文件,意味着必须等到全部JavaScript代码都被下载、解析和执行完成之后,才能开始呈现页面内容(浏览器在遇到body标记时才开始呈现内容)。
对于那些需要很多JavaScript代码的页面来说,这无疑会导致浏览器在呈现页面时出现明显的延迟,而延迟期间的浏览器窗口中将是一片空白。为避免这个问题,现代web应用程序一般都把全部JavaScript引用放在<body>元素中页面内容的后面。

三、为什么利用多个域名来存储网站资源会更有效?

三个最主流的原因:

1. CDN缓存更方便。

2. 突破浏览器并发限制。

3. Cookieless, 节省带宽,尤其是上行带宽 一般比下行要慢。

四、描述一下什么是模块化,以及模块化的意义?

模块化:

    一系列不同功能或相同功能不同性能、不同规格在功能模块的基础上,划分出不同功能模块,通过对功能模块的选择和组合成不同的产品,以满足产品的不同的设计方案。

意义:

  • 避免命名冲突。模块化开发中,每个文件是一个模块,模块中定义的变量、函数、类都是该模块的私有变量,不会污染全局变量。同样也不会被全局变量污染。
  • 更清晰的依赖关系。在使用或定义一个模块的时候,会显式的的声明对模块的引用,文件直接的依赖关系非常清晰,结合Webpack等构建工具,更无需手动处理复杂的依赖关系。
  • 高可维护性。每个模块的功能职责单一,需要升级改动部分功能只需要针对具体的模块进行改动,大大提高可维护性。
  • 高可复用性。每个功能模块实现后。每个功能模块实现后,可以供开发者重复使用,开发者只需要关注本身的业务逻辑的开大,大大提高开发效率。
  • 降低复杂度。通过将复杂的应用拆解成多个容易实现的模块,模块化可以降低项目本身复杂度。

转载请注明:流年似水 » html、js、css 基础面试题

喜欢 (3)or分享 (0)

Warning: copy(https://cn.gravatar.com/avatar/?s=54&d=%2Fwp-content%2Fthemes%2Fyusi1.0%2Fimg%2Fdefault.png&r=g): failed to open stream: HTTP request failed! HTTP/1.1 400 Bad Request in /usr/share/nginx/html/timewentby/wp-content/themes/yusi1.0/functions.php on line 239

Warning: copy(/wp-content/themes/yusi1.0/img/default.png): failed to open stream: No such file or directory in /usr/share/nginx/html/timewentby/wp-content/themes/yusi1.0/functions.php on line 243
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址