美文网首页
前端工程师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
  • 至于工作原理,,,,,,,求指点。

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

相关文章

  • PHPer 面试指南-扩展阅读资源整理

    前端篇 收集的前端面试题和答案 前端开发面试题 史上最全的web前端面试题汇总及答案 前端工程师手册 HTTP协议...

  • PHPer 面试指南-扩展阅读资源整理

    前端篇 收集的前端面试题和答案 前端开发面试题 史上最全的web前端面试题汇总及答案 前端工程师手册 HTTP协议...

  • Web 前端的路该怎么走?

    一、了解前端工程师 1.Web前端工程师是做什么? Web前端开发工程师,主要职责是利用(X)HTML/CSS/J...

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

    前言 首先说清楚一点,这些题是我从其他人的帖子上面找到的,但是答案都是经过个人经验以及google得到的,所以答案...

  • 2022年web前端面试题

    web前端面试题分为:html/css面试题、javascript面试题、vue面试题、性能优化面试题、网络方面面...

  • 前端基础学习

    今天刚学会一些前端工程师的基础,HTML标题 HTML段落 HTML链接 HTML图像这些制作,大致...

  • HTML5常见面试题

    网上有关于html5的面试题很多,几乎大同小异,想要做一名合格的web前端开发工程师,首先我认为web开发是在基础...

  • 2018web前端最新面试题总结

    2018web前端最新面试题总结 一、Html/Css基础模块 基础部分 什么是HTML?答:​ HTML并不是...

  • 前端面试集锦(1)

    前端面试集锦(转载) 转载地址:前端开发面试题 以下皆为转载 前端开发知识点: 作为一名前端工程师,无论工作年头长...

  • 好程序员HTML5大前端分享web前端面试题集锦三

    好程序员HTML5大前端分享web前端面试题集锦三 1、HTML语义化的理解? 答案:HTML语义化就是让页面的内...

网友评论

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

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