前端工程师HTML面试题（一）
2018-03-18 本文已影响0人
sallerli1
前言
首先说清楚一点，这些题是我从其他人的帖子上面找到的，但是答案都是经过个人经验以及google得到的，所以答案可能有些说的不正确的，希望大家指出。
- Doctype的作用是什么？
- <!DOCTYPE >是用来告诉浏览器当前页面所用的 markup language 是什么，那些标签有效等，通常需要引用一个DTD文件（Doc Type Definition）,然而html5则不需要DTD，只需要写<!DOCTYPE html> 即可。
- 标准模式和混杂模式如何区分？它们有什么意义？
- 在浏览器厂商实现W3C标准的时候，同时也考虑了浏览器向后兼容的一些问题，所以也就诞生了标准模式和混杂模式，标准模式是按照浏览器当前最高标准渲染页面，而混杂模式则为了实现向下兼容，通常会模拟一些老浏览器的行为。
- 在书写上，标准模式要在<!DOCTYPE>中引用标准模式的DTD，当这部分书写不完全，不正确或者干脆没有的时候，就会以混杂模式渲染。
- html5是没有标准模式和混杂模式的，它本身就很宽松，向后兼容也都有。（所以对于像我这样从开始写前端就已经处在html5的大时代中的人，从来没有体会过这两个模式的意义和区别，感觉这个面试题没有多大意义）
-
HTML5 为什么只需要写 <!DOCTYPE HTML>?
这个问题的根源要追溯到一个叫做标准通用标记语言（Standard Generalized Markup Language，SGML）的东西，像HTML,XML,XHTML这些标记语言都是基于SGML的，SGML定义了这些标记语言的标签符号等，同时也定义了该怎么解析他们，配合一个合适的DTD文件来告诉浏览器文件中合法的标签是什么。然而HTML5根本就不基于这个东西，所以DTD也就不需要了，光写一个 <!DOCTYPE HTML> 就够了。 -
行内元素有哪些？块级元素有哪些？空元素有哪些？
- 行内元素常用的也就那么几个，比如<span>,<a>,<input>,<button>,<select>,<img>,<textarea>这些，还有现在很少会用的一些如<i>,<b>,<strong>,,sup这些，可能有些还在用，但是如果只是用来体现样式的话，用css足以应对。
- 块级元素呢，<html>,<body>,<header>,<footer>,<nav>,<aside>,<article>,<p>,<form>,<video>,<audio>,<canvas>,<hr>,<div>这些都算是，而且还有好多，估计面试官这么问，他也只想让你动动嘴罢了。
- 空元素，，，呵呵，，，我只知道<br/>, 写这么长时间，还真的只见过这一个，其他的有人说<img/>也是，见仁见智吧，我是觉得图片明明显示出来了，它空？？？
- 页面导入样式有哪几种方法，使用<link>和@import有什么区别？
- 首先，可以写在标签内做内联样式，也可以<style>标签包起来，还可以通过<link>引进来。
- 要说区别的话，大概有这么几点：
- <link> 是html的标签，除了引用css 之外，还可以引用图标之类的，主要通过rel属性来区分。@import 是 css2.1 定义的用来在css中引用外部样式的操作符，当然它还可以后加一些媒体查询的语句。
- 在加载页面时，<link> 引入的css同时被加载，而 @import 则会在页面加载完以后才加载。
- 既然 @import 是 css2.1以后才有的，那么兼容性肯定会需要考虑一下，当然在现在这个前端工程化的时代，这也不是个问题。
- <link>引入的样式是优先于 @import 的。
- 谈谈你对浏览器内核的理解
- 在我当前的水平下，要是谈及对浏览器内核的理解，几乎没有理解，都是道听途说，毕竟也没写过内核，连内核的底层机制都不知道，哪儿来的理解，就好比我知道地球绕着太阳转，但是从来不会说我对太阳有理解一样。
- 好吧，前面都是废话，浏览器内核就是浏览器的渲染引擎，它决定了我们所写的html, css会被渲染成什么样子，以及javascript怎么在浏览器中执行，所以就我猜测，它至少需要一个编译解析的功能，并且对三剑客的解析模块应该是分开实现的（废话），还需要在底层调用并控制GPU来控制显示效果（更废话）。至于前端程序员，就一定要清楚处理跨浏览器的兼容时事实上是在处理跨引擎的兼容（还是废话）。
- 所以，我根本不理解浏览器内核，别听我瞎说。
- 常见的浏览器内核有哪些？
- Trident 内核，也就是IE的内核了，一个曾经出现过很多bug，还一度无视w3c标准，安全性有待考量的，几乎完全靠 windows 市场份额实现了曾经的垄断形式的业界毒瘤。更可气的国内还有很多用它的内核的山寨浏览器比如360浏览器，这些浏览器还像洗脑一样得让衣来伸手的中国网名爱不释手。灾难啊，，，，
- Gecko 内核， firefox的内核，这个内核是在 IE 对W3C标准不怎么支持的时候，一些微软员工不满而协同Netscape员工一同开发的。又因为使用这个内核的浏览器中 firefox 占份额最多，又被叫做 Firefox内核
- Webkit 内核， 早期Chrome的内核，以及Safari的内核，同时也是国内大部分移动端浏览器的内核（可能有一些小的修改）
- Presto 内核，曾经Opera的内核，但是自从Opera加入谷歌以后便弃用了。
- Blink 内核，当前Chrome浏览器的内核（注意V8引擎只是谷歌开发的JS内核，十分强大）
- HTML5 的离线储存怎么使用，工作原理是什么？
- H5的离线缓存主要是通过在<html>标签中添加一个mainifest属性，引入一个.mainifest或.appcache文件，在其中进行配置需要缓存的文件以及不允许缓存的文件。具体格式如下
CACHE MANIFEST
CACHE:
app.js
img.gif
NETWORK:
haha.html
FALLBACK:
/ / 404.html
- 至于工作原理，，，，，，，求指点。
今天这个文章就写到这儿吧，，肩膀有点疼了。。。。
