前端面试档案馆

HTML

  • [ ] 语义化标签
  • [ ] 音视频处理
  • [ ] canvas/WebGL
  • [ ] history API
  • [ ] requestAnimationFrame
  • [ ] 地理位置
  • [ ] web socket
  • [ ] ......
  1. Doctype 作用?严格模式与混杂模式如何区分?它们有何意义?
  2. HTML5 为什么只需要写?
  3. 页面导入样式时，使用 link 和@import 有什么区别?
  4. 介绍一下你对浏览器内核的理解?
  5. 常见的浏览器内核有哪些?
  6. html5 有哪些新特性、移除了那些元素?如何处理 HTML5 新标签的浏览器兼容问题?
  7. 如何区分 HTML 和 HTML5?
  8. 简述一下你对 HTML 语义化的理解?
  9. HTML5 的离线储存怎么使用，工作原理能不能解释一下?

谈谈你对 HTML5 的理解？

暂无

语义化标签 & 块级元素有哪些？

合理的标签干合适的事情。

  • 块级（block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot

  • 行级（inline）：a、span、small、strong、em、i、code、

  • 行内块（inline-block）：img、input

区别：

  1. 行内元素与块级函数可以相互转换，通过修改 display 属性值来切换块级元素和行内元素，行内元素 display：inline，块级元素 display：block。
  2. 行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。
  3. 行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距 margin 上下无效，左右有效，内填充 padding 上下无效，左右有效；块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。
  4. 块级元素可以包含行内元素和块级元素，还可以容纳内联元素open in new window和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。

三、block（块）元素的特点: （div，p，h1-h6，ol，ul，form）

  1. 总是在新行上开始；
  2. 高度，行高以及外边距和内边距都可控制；
  3. 宽度缺省是它的容器的100%，除非设定一个宽度。
  4. 它可以容纳内联元素和其他块元素

四、inline元素的特点：（a，i，img，input，span，strong，textarea）

  1. 和其他元素都在一行上；
  2. 高，行高及外边距和内边距不可改变；
  3. 宽度就是它的文字或图片的宽度，不可改变
  4. 内联元素只能容纳文本或者其他内联元素

对行内元素，需要注意如下

  • 设置宽度width 无效。
  • 设置高度height 无效，可以通过line-height来设置。
  • 设置margin 只有左右margin有效，上下无效。
  • 设置padding只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

渲染机制

  • 什么是 DOCTYPE 及作用

DOCTYPE 是用来声明文档类型和 DTD（文档类型定义）规范的，一个主要用途就是文件的合法性验证。

HTML 5

  • 浏览器渲染过程

DOM Tree、CSSom Tree、layout、Render Tree

  • 重排 Reflow

定义：DOM 结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为 reflow。

  • 重绘 Repaint

DOM 改变、CSS 改变

  • 布局 Layout

H5 新特性

面试： H5 新特性：十个新特性open in new window

  1. 语义标签：添加新标签 header footer nav section article aside details summary dialog figure main mark time
  2. 增强型表单
  3. 多媒体，用于媒介回放的 video 和 audio 元素
  4. 图像效果，用于绘画的 canvas 元素，svg元素等
  5. 地理定位 navigator.geolocation.getCurrentPosition(function(position){})
  6. 拖放 API
  7. WebWorker web worker 是运行在后台的 JS，独立于其他脚本，不会影响页面的性能。
  8. WebStorage
    • cookie 技术（ 兼容性好，数据不能超 4kb，操作复杂）：
    • sessionStorage（兼容性差，数据 8MB，操作简单）：页面会话结束即删除
    • localStorage：不会自己删除
  9. WebSocket WebSocket 协议是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

H5 适配(自适应方案)

编写响应式？

  1. 声明 viewport 元标签
  2. 使用流式布局
  3. 所有容器使用相对尺寸，不用绝对尺寸
  4. （最重要原则）使用 CSS3 Media Query 技术
  • 设置 viewport
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>

<!-- 设置页面内核 -->
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
  • 媒体查询
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

1、页面导入样式时，使用link和@import有什么区别？

答案解析：     1）link属于XHTML标签，而@import是css提供的；     2）页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载；     3）@import只在IE5以上才能识别，而link是XHTML标签，无兼容问题；     4）link方式的样式的权重高于@import的权重。

2、web storage和cookie的区别

1） Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。     2）Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。除此之外，     3） Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。     4） 但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

3、如何区分 HTML 和 HTML5？

答案解析：     1）在文档类型声明上不同：     HTML是很长的一段代码，很难记住，而HTML5却只有简简单单的声明，方便记忆。     2）在结构语义上不同：     HTML：没有体现结构语义化的标签，通常都是这样来命名的

，这样表示网站的头部。     HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：header``article``footer

4、浏览器的内核分别是什么?

答案解析：     IE: trident内核     Firefox：gecko内核     Safari：webkit内核     Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核     Chrome：Blink(基于webkit，Google与Opera Software共同开发)

5、简述同步和异步的区别

答案解析：     同步是阻塞模式，异步是非阻塞模式。     同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；     异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

6、什么是盒子模型？

答案解析：     在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

7、垃圾回收机制（GC）

我们一般说的垃圾回收是针对内存而言的。内存在计算机中是很宝贵的一种资源，任何程序的运行都离不开它。由于内存可以被程序操控，为了防止内存被程序滥用，对内存空间进行管理是十分必要的。说到内存管理，自然离不开JS中的垃圾回收机制，有两种策略来实现垃圾回收：【标记清除 和 引用计数；】     函数运行的时候，浏览器自动开辟一块内存 把浏览器内部的各种变量，存放在此内存中运行结束后，用不到的变量，把它自动回收

8、原型、原型链

每个函数都有一个prototype(原型)属性;对象是没有原型的 ，但是有_proto_(原型链)，指向父级函数的原型。

9、事件委托、事件冒泡、事件捕获

一个div里面有个span元素 ，当鼠标单击span时，这个事件算是谁的？div还是span？     事件冒泡： IE认为，这个事件首先触发span,然后依次往父节点传递，最终传递到document，(这个过程称为冒泡)     事件捕获：网景浏览器认为，任何事件都首先触发document，然后依次往下传递到span元素，(这个过程称为捕获)     事件委托：根据事件冒泡机制，任何事件都会冒泡到document，事件委托就是把所有事件处理函数绑定到document，根据事件参数判断事件源对象，判断不同的对象给予不同的处理函数，

10、如何区分：DOCTYPE 声明\新增的结构元素\功能元素，语义化的理解？

答案解析：     1）用正确的标签做正确的事情；     2）html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；     3）在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的；     4）搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利用 SEO ；     5）使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

上次更新:
Contributors: jiangjingmin