前端大杂烩之一

1.浏览器内核：
IE：trident内核
火狐（FireFox）：gecko内核
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
chrome：Blink（基于webkit）
2.Doctype用于告知浏览器的规范解析方式
3.div+css的布局较table布局有什么优点：
页面加载速度快，结构化清晰、页面显示简洁，表现与结构相分离，易于优化，改版方便。
4.img的alt与title，strong与em的异同
alt为不能显示图像，用来指定或者替换文字，title为设置该属性的元素提供建议性的信息
strong:粗体强调标签，表示内容的重要性
em：斜体强调标签，强调内容
5.渐进增强与优雅降级不同点
渐进增强：针对低版本浏览器进行构建页面，保证基本功能，然后针对高级浏览器进行效果、交互等改进和追加功能能达到更好的用户体验
优雅降级：从一开始就构建完整的功能，然后针对低版本浏览器进行兼容性处理
区别：优雅降级是从的现状开始，并试图减少用户体验店供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级意味着功能衰退，渐进增强意味着朝前看，同时保证其根基出于安全地带。
6.为什么利用多个域名来储存网站资源会更有效
1.CDN缓存更方便
2.突破浏览器并发限制
3.节约cookie带宽
4.节约主域名连接数，优化页面响应式速度
5.防止出现不必要的安全问题
7.简述cookies，sessionStrorage、localStorage的区别
sessionStorage 中的数据，这些数据只有在同一个会话中的页面才能访问并且结束后数据也随之销毁。因此sessionStorage不是一种不是一种持久化的本地储存，仅仅是绘话级别的储存，而localStorage适用于持久化的本地储存，数据永远不会丢失过期，cookie大小是有限制的，请求新页面的会发送一个新的cookie，这样无形中会浪费带宽，另外cookie还需要指定作用域，不可以跨域调用。web storage的出现，其拥有setItem，getItem，removeItem,clrear等方法，不像cookie需要自己封装setCookie，getCookie 但是cookie是是不可以缺失的，cookie作用是与服务器进行交互，webStorage仅仅是为了本地储存而生。
8.讲述一下src和href的区别
src用于替换当前元素，href用于在当前文档和引用资源之间确立关系
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置：在请求src1资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素

当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内，这也是为什么js脚本放在底部而不是头部。
href指向网络资源所在位置，建立和当前与元素或当前文档之间的链接，如果我们在文档中添加

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css，而不是使用@import方式。 **9.网页制作时用到的图片格式有哪些** png-8,png-24,jpeg,gif,svg 但是上面的都是普通常见的，面试官希望是webp（新鲜事物） webp是谷歌开发的一种旨在加快图片加载速度的图片格式。图片大压缩体积只有jpeg的2/3，并能节省大量的服务器带宽资源和数据空间。况且体积比jpeg小40% **10.在css/js代码上线后开发人员经常会优化性能，从用户刷新页面开始，一次js请求一般情况下之下有哪些地方会有缓存处理** dns缓存，cdn缓存，浏览器缓存，服务器缓存 **11.如何优化图片较多的网站的加载速度问题** 在服务器端根据业务需要进行图片压缩，使其压缩后大小与展示一致。 **12.如何理解HTML结构的语义化** 去掉或样式丢失的时候能让页面呈现清晰的结构： **13.做好seo需要考虑什么** 了解搜索引擎如何抓取网页和如何索引网页 mata标签优化 了解主要的搜索引擎 主要的互联网目录 按点击收费的搜索引擎 搜索引擎登录 链接交互和链接广泛度 合理的标签使用 **14.有那项方式可以对一个DOM设置他的css样式** 外部样式表，引入一个外部css文件 内部样式表，将css代放在标签内部 内联样式，将css样式直接定义在HTML元素内部 **15.css的选择器种类** 派生选择器（html标签申明） id选择器（用于DOM的ID申明） 类选择器（用一个样式类名申明） 属性选择器（用DOM的属性声明，属于css，IE6不支持，不常用） **16.css中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内** 设置dispzlay属性为none，或者设置visibility属性为hidden 技巧性： 设置宽高为0，设置透明度为0，设置Z-index位置在-1000 **17.超链接访问过后hover样式就不出现的问题解决方法** 被点击访问过的超链接样式不在具有hover和active了，解决方法是改变css属性的排列顺序：L-V-H-A **18.什么是Css hack？ie6，7，8的hack分别是什么？** 答案：针对不同的浏览器写不同的css code的过程，就是css hack **19.行内元素和块级元素的具体区别，行内元素的padding和margin可以设置吗？** 块级元素特性： 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示,宽度、高度、内边距和外边距都可控制： 内联元素特性： 宽度、高度、内边距的top/bootom（padding-top/padding-bottom）和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的·left和right是可以设置的），就是里面文字或图片的大小 这些标签可设置高宽，但不会自动换行。 **20.什么是外边距重叠？重叠的结果是什么？** 外边距重叠就是margin-collapse 在css当中，相邻的两个盒子的外边距可以结合成一个单独的外边距，这种合并外边距的方式被称为折叠，并且因而所结合的外边距称为折叠外边距。 折叠遵循以下计算规则： 两个相邻的外边距是正数时，折叠结果时他们两者之间的最大的值 两个相邻的外边距是负数时，折叠结果是他们两者绝对值的较大值 两个外边距一正一负，折叠结果是两者的相加的和