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.行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

首先:CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,如div的display默认值为“block”,则为“块级”元素;span默认display属性值为“inline”,是“行内”元素。
常用的块状元素有:

...

      、、

      常用的内联元素有:

      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 属性加入到

      你可能感兴趣的:(657页前端面试题+答案,分类学习整理,良心制作,持续更新中~)