前端计划——面试题总结-HTML篇

前言

“吾生也有涯,而知也无涯,以有涯随无涯,殆己”————庄子

阅读本文前请做好以下心理准备:
本系列文章将不定期更新。
本系列文章不是很严谨。

前端面试之HTML篇

Part A:常识系列

  1. 你真的了解浏览器么?

  2. HTML中的Doctype是什么鬼?

  3. 多了个X的XHTML与HTML有什么不一样?

  4. 不常见的Quirks!

  5. 标签语义化是神马

Part B:标签与属性系列

  1. 行内元素与块级元素都有啥?

  2. img的alt与title有何异同?b与strong的区别、i与em的区别?

  3. cookies,sessionStorage和localStirage区别?

  4. link和import的区别?

  5. src与href的区别?

Part C:前端设计与优化系列

  1. div+css的布局较table布局有什么优点?

  2. 渐进增强还是优雅降级?

  3. 为什么利用多个域名来存储网站资源会更有效?

  4. 在css/js代码上线之后开发人员经常会优化性能,从用户刷新网页开始,一次js请求一般情况下有哪些地方会有缓存处理?

  5. 一个页面上有大量的图片(大型电商网站),加载很慢,你有哪些方法优化这些图片的加载,给用户更好的体验。

Part D: HTML5系列

  1. HTML5 为什么只需要写 <!DOCTYPE HTML>?

  2. html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

  3. HTML5的离线储存怎么使用,工作原理能不能解释一下?

  4. 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?

  5. HTML5的form如何关闭自动完成功能?

答案如下

Part A:常识系列

1. 你真的了解浏览器么?

答:该题考察常见浏览器和内核。
    IE:Trident内核
    Firefox:Gecko内核
    Safari:Webkit内核
    Chrome:Blink内核(Webkit的一个分支吧)
    Opera:Presto(7版本至12版本);Blink(从14版本以后)
    国产大双核浏览器系列:就是Trident加Webkit

2. HTML中的Doctype是什么鬼?

答:简单说,这个声明位于文档最前面,用于告诉浏览器的解析器,以什么文档类型规范解析当前文档。

3. 多了个X的XHTML与HTML有什么不一样?

答:简单说,XHTML 是以 XML 格式编写的 HTML,要求更加严格。详细的区别比如
元素语法:
    XHTML 元素必须正确嵌套
    XHTML 元素必须始终关闭
    XHTML 元素必须小写
    XHTML 文档必须有一个根元素
属性语法:
    XHTML 属性必须使用小写
    XHTML 属性值必须用引号包围
    XHTML 属性最小化也是禁止的
更详细的区别在[这里][1]

4. 不常见的Quirks!

答:Quirks又被称为是怪癖模式、诡异模式、混杂模式,对应的是Standard模式。
这是个历史遗留问题。发生在很久以前的IE5.5及更老的浏览器向IE6过渡时期。
简单说,就是以这种模式模拟老浏览器行为,来兼容较早的网页。
详细区别如下:
总体会有布局、样式解析和脚本执行三个方面的区别。
    (1)盒模型:在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在Quirks 模式下,IE的宽度和高度还包含了padding和border。        
    (2)设置行内元素的高宽:在Standards模式下,给<span>等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效。
    (3)设置百分比的高度:在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的.
    (4)用margin:0 auto设置水平居中:使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效。

5. 标签语义化是神马

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

Part B:标签与属性系列

1. 行内元素与块级元素都有啥?

答:简单说,块级和行内区别就是能不能自己占一行!
块级:div ul ol li p h1(标题系列) dl dt dd(描述列表系列)
行内:span a b img input select strong
对了,还有空元素系列
常见的空元素:
<br> <hr> <img> <input> <link> <meta>
鲜为人知的是:
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

2. img的alt与title有何异同?b与strong的区别、i与em的区别?

答:(1)alt:简单说,就是图片出不来时显示的字。
   官方解释是——为不能显示图像、窗体或applets的用户代理(UA),
   alt属性用来指定替换文字。替换文字的语言由lang属性指定。
   title:简单说,就是鼠标移过去的提示信息
   官方解释:title属性为设置该属性的元素提供建议性的信息。
  (2)strong是标明重点内容,有语气加强的含义,
  使用阅读设备阅读网络时:<strong>会重读,而<B>是展示强调内容。
  (3)i内容展示为斜体,em表示强调的文本;

3. cookies,sessionStorage和localStirage区别?

答:区别主要有以下3点

保存路径

cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据
(通常经过加密)。cookie数据始终在同源的http请求中携带(即使不需要),
会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

存储大小:

cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制,
但比cookie大得多,可以达到5M或更大。

有期时间:

localStorage    存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
sessionStorage  数据在当前浏览器窗口关闭后自动删除。
cookie          设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭

4. link和import的区别?

答:
(1)link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用;
而@import是CSS提供的,只能用于加载CSS;
(2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载
(3)import是CSS2.1 提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题;

5. src与href的区别?

答:简单说,src用于替换当前元素,href用于在当前文档和引用资源之间确立联系。
src常用于js/img/frame等元素,href常用于a/css等。
src的元素,下载时不能干别的了。href就可以。
所以把js的src放在底部是个明智的选择。与上面问题相连,href比@import也是明智的选择。

Part C:前端设计与优化系列

1. div+css的布局较table布局有什么优点?

答:table布局是很老的网页设计了,时代在进步嘛,前者的优点还很多的:
(1)改版的时候更方便 只要改css文件。
(2)页面加载速度更快、结构化清晰、页面显示简洁。
(3)表现与结构相分离。
(4)易于优化(seo)搜索引擎更友好,排名更容易靠前。 

2. 渐进增强还是优雅降级?

答:渐进增强(Progressive enhancement):
简单说,就是照顾老浏览器。先实现基本功能,再玩点花里胡哨的。
    优雅降级(Graceful degradation):
简单说,就是先构建完整功能,再考虑老版本的兼容性。
两种设计思想是有不同的考虑。
实话说,我更喜欢优雅降级的。用IE6的用户,对不起,不想做兼容了。您老升级下浏览器吧。。

3. 为什么利用多个域名来存储网站资源会更有效?

答:(1)CDN缓存更方便
    (2)突破浏览器并发限制
    (3)节约Cookie带宽
    (4)节约主域名连接数,优化页面响应速度
    (5)防止不必要的安全问题

4. 在css/js代码上线之后开发人员经常会优化性能,从用户刷新网页开始,一次js请求一般情况下有哪些地方会有缓存处理?

答:DNS缓存、CDN缓存、浏览器缓存、服务器缓存

5. 一个页面上有大量的图片(大型电商网站),加载很慢,你有哪些方法优化这些图片的加载,给用户更好的体验。

答:这个问题有意思~
    (1)图片懒加载,在页面上的未可视区域可以添加一个滚动条事件,
    判断图片位置与浏览器顶端的距离与页面的距离,如果前者小于后者,优先加载。
    (2)如果为幻灯片、相册等,可以使用图片预加载技术,
    将当前展示图片的前一张和后一张优先下载。
    (3)如果图片为css图片,可以使用CSSsprite,SVGsprite,Iconfont、Base64等技术。
    (4)如果图片过大,可以使用特殊编码的图片,
    加载时会先加载一张压缩的特别厉害的缩略图,以提高用户体验。
    (5)如果图片展示区域小于图片的真实大小,
    则在服务器端根据业务需要先行进行图片压缩,图片压缩后大小与展示一致。

Part D: HTML5系列

1. HTML5 为什么只需要写 <!DOCTYPE HTML>?

答:HTML5 不基于 SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行;
而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。

2. html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

  1. 新特性

     HTML5 现在已经不是 SGML 的子集,
     主要是关于图像,位置,存储,多任务等功能的增加。
     绘画 canvas;
     用于媒介回放的 video 和 audio 元素;
     本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
     sessionStorage 的数据在浏览器关闭后自动删除;
     语意化更好的内容元素,比如 article、footer、header、nav、section;
     表单控件,calendar、date、time、email、url、search;
     新的技术webworker, websocket, Geolocation;
    
  2. 移除的元素:

     纯表现的元素:basefont,big,center,font, s,strike,tt,u;
     对可用性产生负面影响的元素:frame,frameset,noframes;
    
  3. 支持HTML5新标签:

    IE8/IE7/IE6支持通过document.createElement方法产生的标签,
    可以利用这一特性让这些浏览器支持HTML5新标签,
    浏览器支持新标签后,还需要添加标签默认的样式。
    
    当然也可以直接使用成熟的框架、比如html5shim;
    <!--[if lt IE 9]>
       <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
    <![endif]-->
    
  4. 如何区分HTML5:

       DOCTYPE声明\新增的结构元素\功能元素
       
    

3. HTML5的离线储存怎么使用,工作原理能不能解释一下?
答:在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件。
原理:

HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。

如何使用:

  1. 页面头部像下面一样加入一个manifest的属性;

  2. 在cache.manifest文件的编写离线存储的资源;

       CACHE MANIFEST
       #v0.11
       CACHE:
       js/app.js
       css/style.css
       NETWORK:
       resourse/logo.png
       FALLBACK:
       / /offline.html
    
  3. 在离线状态时,操作window.applicationCache进行需求实现。

4. 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?

答:在线的情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。离线的情况下,浏览器就直接使用离线存储的资源。

5. HTML5的form如何关闭自动完成功能?

答:给不想要提示的 form 或某个 input 设置为 autocomplete=off。
    原文作者:Alarak
    原文地址: https://segmentfault.com/a/1190000007987874
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞