1.对 WEB 标准以及 W3C 的理解与认识？
参考： 标签闭合、标签小写、不乱嵌套、进步搜索机器人搜索几率、使用外 链 css 和 js 脚本、 布局行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更 广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变更页面内容、提 供打印版本而不需要复制内容、进步网站易用性。
2.xhtml 和 html 有什么区别？
参考： HTML 是一种基本的 WEB 网页设计语言，XHTML 是一个基于 XML 的置标语言。 最主要的不同： XHTML 元素必须被正确地嵌套。 XHTML 元素必须被关闭。 标签名必须用小写字母。 XHTML 文档必须拥有根元素。
3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
参考： 用于声明文档使用那种规范（html/Xhtml）一样平常为 严格 过度 基于框架的 html 文档。 加入 XMl 声明可触发，解析方式更改为 IE5.5 拥有 IE5.5 的 bug。
4.描述 css reset 的作用和用途。？
参考： Reset 重置浏览器的 css 默认属性 浏览器的品种不同，样式不同，然后重置，让他们统 一。
5.解释 css sprites，如何使用。？
参考： Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的哀求数量。
6.你如何对网站的文件和资源进行优化?
参考：解决方案包括：文件合并、文件最小化/文件压缩、使用 CDN 托管、缓存的使用
7.扫除浮动的几种方式，各自的优缺点？
参考：1.使用空标签扫除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签） 。 2.使用 overflow:auto（空标签元素扫除浮动而不得不增加无意代码的弊端,,使用 zoom:1 用于兼容 IE）。 3.是用 afert 伪元素扫除浮动(用于非 IE 浏览器)。
8.前端页面由哪三层构成，分别是什么?作用是什么?
参考： 网页分成三个层次，即：布局层、表示层、行为层。
网页的布局层（structural layer）由 HTML 或 XHTML 之类的标志语言负责创建。标签， 也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含 任何关于如何显示有关内容的信息。例如， P 标签表达了这样一种语义：“这是一个文本段”。
网页的表示层（presentation layer） 由 CSS 负责创建。 CSS 对“如何显示有关内容” 的问题做出了答复。
网页的行为层（behavior layer）负责答复“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的范畴。
9.浏览器的内核分别是什么?
参考： IE 浏览器的内核 Trident、Mozilla 的 Gecko、Chrome 的 Blink（WebKit 的分支）、Opera 内核原为 Presto，现为 Blink。
10.常见兼容性问题？
参考： * png24 位的图片在 iE6 浏览器上出现背景，解决方案是做成 PNG8. * 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;} 来统一。
* IE6 双边距 bug:块属性标签 float 后，又有横行的 margin 情况下，在 ie6 显示 margin 比设置的大。 浮动 ie 产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;} 这种情况之下 IE 会产生 20px 的距离，解决方案是在 float 的标签样式控制中加入 —— _display:inline;将其转化为行内属性。(_这个符号只有 ie6 会识别) 渐进识别的方式，从总体中逐渐扫除局部。
首先，奇妙的使用“\9”这一标志，将 IE 游览器从所有情况中分离出来。 接着，再次使用“+”将 IE8 和 IE7、IE6 分离开来，这样 IE8 已经独立识别。
.bb{ background-color:#f1ee18; /*所有识别*/
.background-color:#00deff\9; /*IE6、7、8 识别*/
+background-color:#a200ff;/*IE6、7 识别*/
_background-color:#1e0bd1;/*IE6 识别*/
}
* IE 下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用 getAttribute()获取自定义属性; Firefox 下,只能使用 getAttribute()获取自定义属性. 解决方法:统一通过 getAttribute()获取自定义属性.
* IE 下,even 对象有 x,y 属性,但是没有 pageX,pageY 属性; Firefox 下,event 对象有 pageX,pageY 属性,但是没有 x,y 属性. * 解决方法：（条件注释）缺点是在 IE 浏览器下可能会增加额外的 HTTP 哀求数。
* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
超链接访问过后 hover 样式就不出现了 被点击访问过的超链接样式不在具有 hover 和 active 了解决方法是改变 CSS 属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
11.html5 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问题？如 何区分 HTML 和 HTML5？
参考： * HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能 的增加。
* 绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除 语意化更好的内容元素，比如 article、footer、header、nav、section 表单控件，calendar、date、time、email、url、search
新的技术 webworker, websockt, Geolocation
* 移除的元素 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
支持 HTML5 新标签：
* IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签， 可以利用这一特性让这些浏览器支持 HTML5 新标签，
浏览器支持新标签后，还需要添加标签默认的样式：
* 当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架
如何区分： DOCTYPE 声明\新增的布局元素\功能元素
12. 解释下浮动和它的工作原理？扫除浮动的技巧？
参考：浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
(1)、使用空标签扫除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
(2)、使用overflow。
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
(3)、使用after伪对象扫除浮动。
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要扫除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；13.用过媒体查询，针对移动端的布局吗？ 参考：媒体查询语法： 1.内联写法：and之后必须有空格
@media screen and (
min-width:960px //判断浏览器大小条件)
{body{background：red} //常规的样式
}
2.外联写法：当满足屏幕满足条件的时候连接href后的css文件
媒体查询根据不同屏幕显示不同界面有两种方式：
1.在不同的媒体查询判定的大括号后写不同的样式
2.写两个相同的HTML内部的内容，通过媒体查询判断界面后，显示一个，隐藏另一个
14.使用 CSS 预处理器吗？喜欢谁人？
参考：1、什么是CSS预处理器
CSS预处理器定义了一种新的语言，基本的思想是用一种专门的编程语言，开发者只需要使用这种语言进行编码工作，减少枯燥无味的CSS代码的编写过程的同时，它能让你的CSS具备更加简洁、适应性更强、可读性更加、层级关系更加显着、更易于代码的维护等诸多好处。
CSS预处理器种类繁多，本次就以Sass、Less、Stylus进行比力。
2、语法
在使用CSS预处理器之前最重要的是了解语法，我只写过sass，就从网上找了下另外两种语法的格式，与大家对比分享。
首先Sass和Less都是用的是标准的CSS语法，因此你可以很方便的把已完成的CSS代码转为预处理器识别的代码，Sass默认使用 .sass扩展名，而Less默认使用.Less扩展名。
15.div+css 的布局较 table 布局有什么优点？
参考： 改版的时候更方便 只要改 css 文件。
页面加载速度更快、布局化清晰、页面显示简洁。
表现与布局相分离。
易于优化（seo）搜索引擎更友好，排名更容易靠前。
16.为什么利用多个域名来存储网站资源会更有效？
参考： CDN 缓存更方便
突破浏览器并发限定
节约 cookie 带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题
17.请谈一下你对网页标准和标准制定机构重要性的理解？
参考： （无标准答案）网页标准和标准制定机构都是为了能让 web 发展的更‘健康’，开发者 遵循统一的标准，降低开发难度，开发成本，SEO 也会更好做，也不会因为滥用代码导致各 种 BUG、安全问题，最终进步网站易用性。
18.请描述一下 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 仅仅是为了在本 地“存储”数据而生。
19.知道的网页制作会用到的图片格式有哪些？
参考： png-8，png-24，jpeg，gif，svg。
但是上面的那些都不是面试官想要的末了答案。面试官希望听到是 Webp。（是否有关 注新技术，奇怪事物） 科普一下 Webp：WebP 格式，谷歌（google）开发的一种旨在加快图片加载速度的图片 格式。
图片压缩体积大约只有 JPEG 的 2/3，并能节省大量的服务器带宽资源和数据空间。 Facebook Ebay 等知名网站已经开始测试并使用 WebP 格式。 在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%
20.在 css/js 代码上线之后开发人员经常会优化性能，从用户革新网页开始，一次 js 哀求一 般情况下有哪些地方会有缓存处理？
参考： dns 缓存，cdn 缓存，浏览器缓存，服务器缓存。
21.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的 加载，给用户更好的体验？
参考： 图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览 器顶端的距离与页面的距离，假如前者小于后者，优先加载。
假如为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一 张优先下载。
假如图片为 css 图片，可以使用 CSSsprite，SVGsprite，Iconfont、Base64 等技术。
假如图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特殊厉害的缩 略图，以进步用户体验。
假如图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片 压缩，图片压缩后大小与展示一致。
来源：https://www.cnblogs.com/gzy-web/archive/2019/08/13/11345991.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡