前端HTML总结下

11、Sass、SLESS是什么？大家为什么要使用他们

他们是 CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。

例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可

以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。

为什么要使用它们？
结构清晰，便于扩展。可以方便地屏蔽浏览器私有语法差异。这个不用多说
封装对浏览器语法差异的重复处理，减少无意义的机械劳动。可以轻松实现多重继承。
完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

12、css 优先级算法如何计算？

• 优先级就近原则，同权重情况下样式定义最近者为准;
• 载入样式以最后载入的定位为准;
  important 比 内联优先级高
  优先级为:
  1、！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承
  2、权重算法：(0,0,0,0)==》第一个0对应的是important的个数，第二个0对应的是id选择器的个数，第三个0对应的类选择器的个数，第四个0对应的是标签选择器的个数，就是当前选择器的3、比较：先从第一个0开始比较，如果第一个0大，那么说明这个选择器的权重高，如果第一个相同，比较第二个，依次类推。

13、javascript的 typeof 返回哪些数据类型

alert(typeof [1, 2]); //object
alert(typeof 'leipeng'); //string
var i = true;
alert(typeof i); //boolean
alert(typeof 1); //number
var a;
alert(typeof a); //undefined
function a(){;};
alert(typeof a) //function

1.返回数据类型

　　undefined

　　string

　　boolean

　　number

　　symbol(ES6)

　　Object

　　Function

2.强制类型转换

	Number(参数)把任何类型转换成数值类型
	
	parseInt（参数1，参数2）将字符串转换成整数
	
	parseFloat()将字符串转换成浮点数字
	
	string(参数)：可以将任何类型转换成字符串
	
	Boolean()可以将任何类型的值转换成布尔值

3.隐式类型转换

强制（parseInt(),parseFloat(),Number()）
隐式（== ,!!）

15、数组方法 pop() push() unshift() shift()

push()尾部添加 pop()尾部删除
unshift()头部添加 shift()头部删除
map() : 遍历数组中的元素, 返回一个新数组(包含回调函数返回的数据)
filter():遍历数组中的元素, 返回一个新数组(包含回调函数返回 true 的元素)

16、window.onload 和 document ready 的区别

window.onload 是在 dom 文档树加载完和所有文件加载完之后执行一个函数 document.ready 原生中
没有这个方法，jquery 中有 $().ready(function),在 dom 文档树加载完之后执行一个函数（注意，这里面
的文档树加载完不代表全部文件加载完）。
$(document).ready要比window.onload先执行window.onload只能出来一次，$(document).ready 可以出现多次

17、==和= = =的不同

==用于一般比较，===用于严格比较，==在比较的时候可以转换数据类型，===严格比较，
只要类型不匹配就返回flase。
举例说明：
"1" == true类型不同，"=="将先做类型转换，把true转换为1，即为 "1" == 1；此时，
类型仍不同，继续进行类型转换，把"1"转换为1，即为 1 == 1。
1.如果比较："1" === true 左侧为字符型，右侧为bool布尔型或int数值型，左右两侧
类型不同，结果为false；

2.如果比较： 1 === 1 左侧为int数值型，右侧为int数值型，左右两侧类型相同，
数值大小也相同，结果为true；
3.如果比较： 1 === 2 左侧为int数值型，右侧为int数值型，左右两侧类型相同，
但数值大小不同，结果为false。

18、iframe的作用

用法
1、iframe是用来在网页中插入第三方页面，早期的页面使用iframe主要是用于导航栏这种
很多页面都相同的部分，这样在切换页面的时候避免重复下载。

优点
1、便于修改，模拟分离，像一些信息管理系统会用到。
2、但现在基本不推荐使用。除非特殊需要，一般不推荐使用。

缺点
1、iframe的创建比一般的DOM元素慢了1-2个数量级
2、iframe标签会阻塞页面的的加载，如果页面的onload事件不能及时触发，会让用户觉得
网页加载很慢，用户体验不好，在Safari和Chrome中可以通过js动态设置iframe的src属性
来避免阻塞。
3、iframe对于SEO不友好，替换方案一般就是动态语言的Incude机制和ajax动态填充内
容等。

19、png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.
优点是：压缩比高，色彩好。 大多数地方都可以用。

jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。

gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.

webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。
缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

20、style标签写在body后与body前有什么区别

页面加载自上而下 当然是先加载样式。
写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

21、在网页中的应该使用奇数还是偶数的字体？为什么呢

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。