美文网首页
前端工程师HTML面试题(一)

前端工程师HTML面试题(一)

作者: sallerli1 | 来源:发表于2018-03-18 16:15 被阅读0次

    前言

    首先说清楚一点,这些题是我从其他人的帖子上面找到的,但是答案都是经过个人经验以及google得到的,所以答案可能有些说的不正确的,希望大家指出。

    1. Doctype的作用是什么?
    • <!DOCTYPE >是用来告诉浏览器当前页面所用的 markup language 是什么,那些标签有效等,通常需要引用一个DTD文件(Doc Type Definition),然而html5则不需要DTD,只需要写<!DOCTYPE html> 即可。
    1. 标准模式和混杂模式如何区分?它们有什么意义?
    • 在浏览器厂商实现W3C标准的时候,同时也考虑了浏览器向后兼容的一些问题,所以也就诞生了标准模式混杂模式,标准模式是按照浏览器当前最高标准渲染页面,而混杂模式则为了实现向下兼容,通常会模拟一些老浏览器的行为。
    • 在书写上,标准模式要在<!DOCTYPE>中引用标准模式的DTD,当这部分书写不完全,不正确或者干脆没有的时候,就会以混杂模式渲染。
    • html5是没有标准模式和混杂模式的,它本身就很宽松,向后兼容也都有。(所以对于像我这样从开始写前端就已经处在html5的大时代中的人,从来没有体会过这两个模式的意义和区别,感觉这个面试题没有多大意义)
    1. HTML5 为什么只需要写 <!DOCTYPE HTML>?
      这个问题的根源要追溯到一个叫做标准通用标记语言Standard Generalized Markup LanguageSGML)的东西,像HTML,XML,XHTML这些标记语言都是基于SGML的,SGML定义了这些标记语言的标签符号等,同时也定义了该怎么解析他们,配合一个合适的DTD文件来告诉浏览器文件中合法的标签是什么。然而HTML5根本就不基于这个东西,所以DTD也就不需要了,光写一个 <!DOCTYPE HTML> 就够了。

    2. 行内元素有哪些?块级元素有哪些?空元素有哪些?

    • 行内元素常用的也就那么几个,比如<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/>也是,见仁见智吧,我是觉得图片明明显示出来了,它空???
    1. 页面导入样式有哪几种方法,使用<link>@import有什么区别?
    • 首先,可以写在标签内做内联样式,也可以<style>标签包起来,还可以通过<link>引进来。
    • 要说区别的话,大概有这么几点:
    1. <link> 是html的标签,除了引用css 之外,还可以引用图标之类的,主要通过rel属性来区分。@import 是 css2.1 定义的用来在css中引用外部样式的操作符,当然它还可以后加一些媒体查询的语句。
    2. 在加载页面时,<link> 引入的css同时被加载,而 @import 则会在页面加载完以后才加载。
    3. 既然 @import 是 css2.1以后才有的,那么兼容性肯定会需要考虑一下,当然在现在这个前端工程化的时代,这也不是个问题。
    4. <link>引入的样式是优先于 @import 的。
    1. 谈谈你对浏览器内核的理解
    • 在我当前的水平下,要是谈及对浏览器内核的理解,几乎没有理解,都是道听途说,毕竟也没写过内核,连内核的底层机制都不知道,哪儿来的理解,就好比我知道地球绕着太阳转,但是从来不会说我对太阳有理解一样。
    • 好吧,前面都是废话,浏览器内核就是浏览器的渲染引擎,它决定了我们所写的html, css会被渲染成什么样子,以及javascript怎么在浏览器中执行,所以就我猜测,它至少需要一个编译解析的功能,并且对三剑客的解析模块应该是分开实现的(废话),还需要在底层调用并控制GPU来控制显示效果(更废话)。至于前端程序员,就一定要清楚处理跨浏览器的兼容时事实上是在处理跨引擎的兼容(还是废话)。
    • 所以,我根本不理解浏览器内核,别听我瞎说。
    1. 常见的浏览器内核有哪些?
    • Trident 内核,也就是IE的内核了,一个曾经出现过很多bug,还一度无视w3c标准,安全性有待考量的,几乎完全靠 windows 市场份额实现了曾经的垄断形式的业界毒瘤。更可气的国内还有很多用它的内核的山寨浏览器比如360浏览器,这些浏览器还像洗脑一样得让衣来伸手的中国网名爱不释手。灾难啊,,,,
    • Gecko 内核, firefox的内核,这个内核是在 IE 对W3C标准不怎么支持的时候,一些微软员工不满而协同Netscape员工一同开发的。又因为使用这个内核的浏览器中 firefox 占份额最多,又被叫做 Firefox内核
    • Webkit 内核, 早期Chrome的内核,以及Safari的内核,同时也是国内大部分移动端浏览器的内核(可能有一些小的修改)
    • Presto 内核,曾经Opera的内核,但是自从Opera加入谷歌以后便弃用了。
    • Blink 内核,当前Chrome浏览器的内核(注意V8引擎只是谷歌开发的JS内核,十分强大)
    1. HTML5 的离线储存怎么使用,工作原理是什么?
    • H5的离线缓存主要是通过在<html>标签中添加一个mainifest属性,引入一个.mainifest.appcache文件,在其中进行配置需要缓存的文件以及不允许缓存的文件。具体格式如下
    CACHE MANIFEST
    
    CACHE:
    app.js
    img.gif
    
    NETWORK:
    haha.html
    
    FALLBACK:
    / / 404.html
    
    • 至于工作原理,,,,,,,求指点。

    今天这个文章就写到这儿吧,,肩膀有点疼了。。。。

    相关文章

      网友评论

          本文标题:前端工程师HTML面试题(一)

          本文链接:https://www.haomeiwen.com/subject/wpreqftx.html