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

2024年5月5日 127次阅读 来源: Alarak

前言：

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

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

前端面试之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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞