一省：HTML
13. meta标签有哪些属性和属性值？
meta标签可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。meta标签位于文档的头部，不包含任何内容。meta标签的属性定义了与文档相关联的名称/值对。编辑器创建默认属性和属性值如下：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
- charset: 规定 HTML 文档的字符编码。
- http-equiv: 顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。meta标签的http-equiv属性语法格式是：
主要有：<meta http-equiv="参数" content="参数变量值"><meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/">:如果网页过期，那么存盘的cookie将被删除。必须使用GMT的时间格式。 <meta http-equiv="expires" content="时间" >：用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。 <meta http-equiv="Refresh" content="5;URL">：告诉浏览器在【数字】秒后跳转到【一个网址】 <meta http-equiv="content-Type" content="text/html; charset=utf-8">：设定页面使用的字符集。 <meta charset="utf-8">：在HTML5中设定字符集的简写写法。 <meta http-equiv="Pragma" content="no-cache">：禁止浏览器从本地计算机的缓存中访问页面内容。访问者将无法脱机浏览。 <meta http-equiv="Window-target" content="_top">：用来防止别人在iframe(框架)里调用自己的页面，这也算是一个非常实用的属性。 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> :强制浏览器按照特定的版本标准进行渲染。但不支持IE7及以下版本。如果是ie浏览器就用最新的ie渲染，如果是双核浏览器就用chrome内核。 - name: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">：在移动设备浏览器上，禁用缩放（zooming）功能，用户只能滚动屏幕。 <meta name="description" content="">：告诉搜索引擎，当前页面的主要内容是xxx。 <meta name="keywords" content="">：告诉搜索引擎，当前页面的关键字。 <meta name="author" content="">：告诉搜索引擎，标注网站作者是谁。 <meta name="copyright" content="">：标注网站的版权信息。
二省： CSS
13. li设为行内块时有间隙怎么办？
li的display设置为inline-block时，li之间会产生一定的间隙，是因为浏览器把行内元素后边的换行转化为空格了，如：
<style>
li{
display: inline-block;
width: 100px;
height: 100px;
list-style: none;
border: 5px solid skyblue;
background: tomato;
}
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
解决方法：
- 把li写在同一行，缺点是不美观，对码农不友好
<style> li{ display: inline-block; width: 100px; height: 100px; list-style: none; border: 5px solid skyblue; background: tomato; } </style> <ul> <li>1</li><li>2</li><li>3</li> </ul> - 方便又好用的方式->弹性盒子，就是把父元素的display设置为flex
<style> ul { display: flex; } li{ width: 200px; height: 200px; list-style: none; border: 5px solid skyblue; background: tomato; } </style> <ul> <li>1</li> <li>2</li> <li>3</li> </ul>
三省：JavaScript
13. call、apply和bind的作用和区别？
作用： 在this那篇文章已经说过这三种方法可以改变this的指向，回顾一下代码
let obj = {
name: "Jack",
say: function(...args) {
console.log("my name is " + this.name)
}
}
let obj1 = {
name: "Marry"
}
obj.say.call(obj1);//my name is Marry
let obj2 = {
name: "Jarry"
}
obj.say.apply(obj2);//my name is Jarry
let obj3 = {
name: "Lorry"
}
let obj3Say = obj.say.bind(obj3)
obj3Say();//my name is Lorry
可见，只有bind方法实现方式不太相同，会返回一个新的函数。除此之外，它们还是可以传参数的，只是传参数的方式略有不同，对上边代码稍微改造一下：
let obj = {
name: "Jack",
say: function(...args) {
console.log("my name is " + this.name + " and my friends are " + [...args])
}
}
let obj1 = {
name: "Marry"
}
// 传给回调函数的参数依次传入
obj.say.call(obj1, "Bob", "Koby");//my name is Marry and my friends are Bob,Koby
let obj2 = {
name: "Jarry"
}
//传给回调函数的参数放在一个数组中传过去
obj.say.apply(obj2, ["Jane", "Mick"]);//my name is Jarry and my friends are Jane,Mick
let obj3 = {
name: "Lorry"
}
let obj3Say = obj.say.bind(obj3, "James", "Jondon")
// 传给回调函数的参数与call方法一致
obj3Say();//my name is Lorry and my friends are James,Jondon
