HTML面试题整理

时间 2019-11-29

标签 html 面试整理栏目 HTML 繁體版

原文原文链接

Html篇：

1.你作的页面在哪些流览器测试过？这些浏览器的内核分别是什么?css

IE: trident内核
Firefox：gecko内核
Safari:webkit内核
Opera:之前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome:Blink(基于webkit，Google与Opera Software共同开发)

2.每一个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？html

答案：<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签以前。此标签可告知浏览器文档使用哪一种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）前端

3.Quirks模式是什么？它和Standards模式有什么区别jquery

从IE6开始，引入了Standards模式，在写程序时咱们也会常常遇到这样的问题，即当某个参数为真时，咱们就使用新功能，而若是这个参数不为真时，就使用旧功能，这样就能不破坏原有的程序，又提供新功能。IE6也是相似这样作的，它将DTD当成了这个“参数”，由于之前的页面你们都不会去写DTD，因此IE6就假定若是写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而若是没有，则采用兼容以前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）web

如何断定如今是标准模式仍是怪异模式：面试

方法一：执行如下代码跨域

alert(window.top.document.compatMode) ;浏览器

//BackCompat 表示怪异模式
//CSS1Compat 表示标准模式缓存

方法二：jquery为咱们提供的方法，以下：
alert($.boxModel)
alert($.support.boxModel)安全

区别：整体会有布局、样式解析和脚本执行三个方面的区别。

盒模型：在W3C标准中，若是设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。
设置行内元素的高宽：在Standards模式下，给<span>等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，若是父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的。
用margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可使元素水平居中，但在quirks模式下却会失效。

4.div+css的布局较table布局有什么优势？

改版的时候更方便只要改css文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化（seo）搜索引擎更友好，排名更容易靠前。

5.a：img的alt与title有何异同？b：strong与em的异同？

alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息。

strong:粗体强调标签，强调，表示内容的重要性
em:斜体强调标签，更强烈强调，表示内容的强调点

6.你能描述一下渐进加强和优雅降级之间的不一样吗?

渐进加强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，而后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，而后再针对低版本浏览器进行兼容。

7.为何利用多个域名来存储网站资源会更有效？

CDN缓存更方便
突破浏览器并发限制
节约cookie带宽
节约主域名的链接数，优化页面响应速度
防止没必要要的安全问题

8.请描述一下cookies，sessionStorage和localStorage的区别？

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问而且当会话结束后数据也随之销毁。所以sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，不然数据是永远不会过时的。

web storage和cookie的区别

Web Storage的概念和cookie类似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，而且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还须要指定做用域，不能够跨域调用。
除此以外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie须要前端开发者本身封装setCookie，getCookie。可是Cookie也是不能够或缺的：Cookie的做用是与服务器进行交互，做为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生。

9.简述一下src与href的区别。

src（source）用于替换当前元素，href（Hypertext Reference）用于在当前文档和引用资源之间确立联系。

10.知道的网页制做会用到的图片格式有哪些？

png-8，png-24，jpeg，gif，svg

可是上面的那些都不是面试官想要的最后答案。面试官但愿听到是Webp。（是否有关注新技术，新鲜事物）

科普一下Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。

在质量相同的状况下，WebP格式图像的体积要比JPEG格式图像小40%

11.知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？

微格式（Microformats）是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。

优势：将智能数据添加到网页上，让网站内容在搜索引擎结果界面能够显示额外的提示。（应用范例：豆瓣，有兴趣自行google）

12.在css/js代码上线以后开发人员常常会优化性能，从用户刷新网页开始，一次js请求通常状况下有哪些地方会有缓存处理？

dns缓存，cdn缓存，浏览器缓存，服务器缓存。

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

图片懒加载，在页面上的未可视区域能够添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，若是前者小于后者，优先加载。
若是为幻灯片、相册等，可使用图片预加载技术，将当前展现图片的前一张和后一张优先下载。
若是图片为css图片，可使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
若是图片过大，可使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提升用户体验。
若是图片展现区域小于图片的真实大小，则因在服务器端根据业务须要先行进行图片压缩，图片压缩后大小与展现一致。

14.你如何理解HTML结构的语义化？

去掉或样式丢失的时候能让页面呈现清晰的结构
屏幕阅读器（若是访客有视障）会彻底根据你的标记来“读”你的网页.
搜索引擎的爬虫也依赖于标记来肯定上下文和各个关键字的权重
你的页面是否对爬虫容易理解很是重要,由于爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.
便于团队开发和维护

15.谈谈之前端角度出发作好SEO须要考虑什么？

了解搜索引擎如何抓取网页和如何索引网页
Meta标签优化
了解主要的搜索引擎
主要的互联网目录
搜索引擎登陆
连接交换和连接普遍度（Link Popularity）
合理的标签使用