657页前端面试题+答案,分类学习整理,良心制作,持续更新中~

注:花一个多月时间,重学基础,学习完、整理完、总结归纳完,痛并快乐着。

(欢迎提出问题和建议,采纳后会附上提议者名字链接)

HTML 篇

1.图片中 title 和 alt 区别?

  • 通常当鼠标滑动到元素上的时候显示
  • alt 是是图片内容的等价描述,用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性,除了纯装饰图片外都必须设置有意义的值,搜索引擎会重点分析。

2.Html5 有哪些新特性、移除了哪些元素

  • 新增元素:

    • 绘画canvas
    • 用于媒介回放的video 和 audio 元素
    • 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失
    • sessionStorage 的数据在浏览器关闭后自动删除
    • 语义化更好的内容元素,比如 article 、footer、header、nav、section
    • 表单控件 ,calendar 、 date 、 time 、 email 、 url 、 search
    • 新的技术 webworker 、 websocket 、 Geolocation
  • 移除的元素:

    • 纯表现的元素: basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u
    • 对可用性产生负面影响的元素: frame 、 frameset 、 noframes
  • 支持 HTML5 新标签:

    • IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签
    • 可以利用这一特性让这些浏览器支持 HTML5 新标签
    • 浏览器支持新标签后,还需要添加标签默认的样式

3.浏览器是怎么对 Html5 的离线储存资源进行管理和加载的呢

如何使用:

  • 页面头部像下面一样加入一个 manifest 的属性;
  • cache.manifest 文件的编写离线存储的资源
  • 在离线状态时,操作 window.applicationCache 进行需求实现

在线的情况下,浏览器发现 html 头部有 manifest 属性,它会请求 manifest 文件,如果是第一次访问 app ,那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过 app 并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的manifest 文件与旧的 manifest 文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。

4.src与href的区别

src 用于替换当前元素,href用于在当前文档和引用资源之间确立联系。
src 是 source 的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src 资源时会将其指向的资源下载并应用到文档内,例如 js 脚本,img 图片和 frame 等元素

当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部

  • href 是 Hypertext Reference 的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加
  • link href="common.css" rel="stylesheet" 那么浏览器会识别该文档为 css 文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css ,而不是使用 @import 方式

5.canvas在标签上设置宽高 和在style中设置宽高有什么区别

canvas标签的width和height是画布实际宽度和高度,绘制的图形都是在这个上面。而style的width和height是canvas在浏览器中被渲染的高度和宽度。如果canvas的width和height没指定或值不正确,就被设置成默认值 。

6.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?

在线的情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。
离线的情况下,浏览器就直接使用离线存储的资源。

7.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

  • 声明位于文档中的最前面,处于 html 标签之前。告知浏览器的解析器, 用什么文档类型、规范来解析这个文档
  • 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行
  • 在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现

8.HTML全局属性(global attribute)有哪些

class :为元素设置类标识
data-* : 为元素增加自定义属性
draggable : 设置元素是否可拖拽
id : 元素 id ,文档内唯一
lang : 元素内容的的语言
style : 行内 css 样式
title : 元素相关的建议信息

9.div+css的布局较table布局有什么优点

改版的时候更方便 只要改 css 文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化( seo )搜索引擎更友好,排名更容易靠前。

657页前端面试题+答案,分类学习整理,良心制作,持续更新中~_第1张图片

CSS 篇

1.CSS中link与@import的区别:

@import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。
加载页面时,link引入的CSS被同时加载,@import引入的CSS将在页面加载完毕后加载。
link标签作为HTML元素,不存在兼容性问题,而@import是CSS2.1才有的语法,故老版本浏览器(IE5之前)不能识别。
可以通过JS操作DOM,来插入link标签改变样式;由于DOM方法是基于文档的,无法使用@import方式插入样式。

2.position的absolute与fixed共同点与不同点:

共同点:
1.改变行内元素的呈现方式,display被置为block;
2.让元素脱离普通流,不占据空间;
3.默认会覆盖到非定位元素上不同点:
absolute的”根元素“是可以设置的,而fixed的”根元素“固定为浏览器窗口。当你滚动网页,fixed元素与浏览器窗口之间的距离是不变的。

3.BFC 有什么用

  • 创建规则:

根元素
浮动元素( float 不取值为 none )
绝对定位元素( position 取值为 absolute 或 fixed )
display 取值为 inline-block 、 table-cell 、 table-caption 、 flex 、inline-flex 之一的元素
overflow 不取值为 visible 的元素

  • 作用:

可以包含浮动元素
不被浮动元素覆盖
阻止父子元素的 margin 折叠

4.清除浮动的几种方式

父级 div 定义 height
结尾处加空 div 标签 clear:both
父级 div 定义伪类 :after 和 zoom
父级 div 定义 overflow:hidden
父级 div 也浮动,需要定义宽度
结尾处加 br 标签 clear:both

5.Css3 新增伪类 - 伪元素

p:first-of-type 选择属于其父元素的首个

元素的每个

元素。
p:last-of-type 选择属于其父元素的最后

元素的每个

元素。
p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。
p:only-child 选择属于其父元素的唯一子元素的每个

元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。
:enabled 已启用的表单元素。
:disabled 已禁用的表单元素。
:checked 单选框或复选框被选中。
::before 在元素之前添加内容。
::after 在元素之后添加内容,也可以用来做清除浮动。
::first-line 添加一个特殊的样式到文本的首字母。
::first-letter 添加一行特殊样式到首行。

相信大家也看出来他们的不同,

伪类语法一个:,它是为了弥补css常规类选择器的不足
伪元素语法两个:,它是凭空创建的一个虚拟容器生成的元素

6.IE盒子模型 、W3C盒子模型

W3C盒模型: 内容(content)、填充( padding )、边界( margin )、 边框( border );

box-sizing: content-box
width = content width;

IE盒子模型: IE 的content 部分把 border 和 padding 计算了进去;

box-sizing: border-box
width = border + padding + content width

7.display:inline-block 什么时候不会显示间隙?

移除空格
使用 margin 负值
使用 font-size:0
letter-spacing
word-spacing

8.行内元素float:left后是否变为块级元素?

行内元素设置成浮动之后变得更加像是 inline-block (行内块级元素,设置
成这个属性的元素会同时拥有行内和块级的特性,最明显的不同是它的默认宽度不是 100% ),这时候给行内元素设置 padding-top 和 padding-bottom或者 width 、 height 都是有效果的

9.CSS不同选择器的权重(CSS层叠的规则)

!important 规则最重要,大于其它规则
行内样式规则,加 1000
对于选择器中给定的各个 ID 属性值,加 100
对于选择器中给定的各个类属性、属性选择器或者伪类选择器,加 10
对于选择其中给定的各个元素标签选择器,加1
如果权值一样,则按照样式规则的先后顺序来应用,顺序靠后的覆盖靠前的规则

10.stylus/sass/less区别

均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
Sass 和 LESS 语法较为严谨, LESS 要求一定要使用大括号“{}”, Sass 和 Stylus 可以通过缩进表示层次与嵌套关系
Sass 无全局变量的概念, LESS 和 Stylus 有类似于其它语言的作用域概念
Sass 是基于 Ruby 语言的,而 LESS 和 Stylus 可以基于 NodeJS NPM 下载相应库后进行编译;这也是为什么安装Sass的时候有时候会报错,需要安装python脚本

优点:就不用我多说了,谁用谁知道,真香。

657页前端面试题+答案,分类学习整理,良心制作,持续更新中~_第2张图片

JavaScript篇

1.js的各种位置,比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别?

clientHeight:表示的是可视区域的高度,不包含border和滚动条
offsetHeight:表示可视区域的高度,包含了border和滚动条
scrollHeight:表示了所有区域的高度,包含了因为滚动被隐藏的部分。
clientTop:表示边框border的厚度,在未指定的情况下一般为0
scrollTop:滚动后被隐藏的高度,获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)距离顶端的高度。

2.js拖拽功能的实现

首先是三个事件,分别是mousedown,mousemove,mouseup
当鼠标点击按下的时候,需要一个tag标识此时已经按下,可以执行mousemove里面的具体方法。
clientX,clientY标识的是鼠标的坐标,分别标识横坐标和纵坐标,并且我们用offsetX和offsetY来表示元素的元素的初始坐标,移动的举例应该是:
鼠标移动时候的坐标-鼠标按下去时候的坐标。
也就是说定位信息为:
鼠标移动时候的坐标-鼠标按下去时候的坐标+元素初始情况下的offetLeft.
还有一点也是原理性的东西,也就是拖拽的同时是绝对定位,我们改变的是绝对定位条件下的left
以及top等等值。
补充:也可以通过html5的拖放(Drag 和 drop)来实现

3.异步加载js的方法

defer:只支持IE如果您的脚本不会改变文档的内容,可将 defer 属性加入到

你可能感兴趣的:(css,javascript,html,前端)