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

时间 2019-12-05

原文原文链接

前言：css

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

阅读本文前请作好如下心理准备：
本系列文章将不按期更新。
本系列文章不是很严谨。html

前端面试之HTML篇

Part A：常识系列

你真的了解浏览器么？前端
HTML中的Doctype是什么鬼？html5
多了个X的XHTML与HTML有什么不同？web
不常见的Quirks!面试
标签语义化是神马canvas

Part B：标签与属性系列

行内元素与块级元素都有啥？浏览器
img的alt与title有何异同？b与strong的区别、i与em的区别？缓存
cookies,sessionStorage和localStirage区别？安全
link和import的区别？
src与href的区别？

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

div+css的布局较table布局有什么优势？
渐进加强仍是优雅降级？
为何利用多个域名来存储网站资源会更有效？
在css/js代码上线以后开发人员常常会优化性能，从用户刷新网页开始，一次js请求通常状况下有哪些地方会有缓存处理？
一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

Part D: HTML5系列

HTML5 为何只须要写 <!DOCTYPE HTML>？
html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
HTML5的离线储存怎么使用，工做原理能不能解释一下？
浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
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？

新特性

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

移除的元素：

纯表现的元素：basefont，big，center，font, s，strike，tt，u;
 对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

IE8/IE7/IE6支持经过document.createElement方法产生的标签，
能够利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还须要添加标签默认的样式。

固然也能够直接使用成熟的框架、好比html5shim;
<!--[if lt IE 9]>
   <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

如何区分HTML5：

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

3. HTML5的离线储存怎么使用，工做原理能不能解释一下？
答：在用户没有与因特网链接时，能够正常访问站点或应用，在用户与因特网链接时，更新用户机器上的缓存文件。
原理：

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

如何使用：

页面头部像下面同样加入一个manifest的属性；

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

CACHE MANIFEST
   #v0.11
   CACHE:
   js/app.js
   css/style.css
   NETWORK:
   resourse/logo.png
   FALLBACK:
   / /offline.html

在离线状态时，操做window.applicationCache进行需求实现。

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

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

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

答：给不想要提示的 form 或某个 input 设置为 autocomplete=off。