在百度前端技术学院做任务的总结
Task1（第一天）：
定个大目标——我要在秋招拿到心仪的offer。
Task4（第四天）：
关于background-image，如果想得到两个相同的背景图（比如左上角一个logo，右上角又一个logo），怎么办？这么办：background-image:url(baidu.jpg),url(baidu.jpg);。然后background-repeat的值设为no-repeat（设置1个no-repeat就好，会应用到2个url上）,而background-position的值设2组，用逗号隔开。
Task5（第五天和第六天）：
1. 输出的空格可累加。
2.改变<dd>的缩进量用margin。
Task6（第七天到第八天）：
1.flex属性的第一个参数设置为0则意味着不参与分配剩余的可用空间。
2.属性calc()还能这样用：width: calc(100% - 100px);，可以用来实现一个左侧固定宽度、右侧根据浏览器宽度进行自适应变化的两栏布局。注意减号前后要有空格。
3.绝对定位的元素不会干扰页面上其他元素的位置 。但是，如果没设置top、bottom、left或right，那绝对定位的元素的位置会被页面上其他元素影响。
4.一般情况下，盒子会忽略height的百分比设置，除非盒子是绝对位置。
5.body {margin: 0;}可以让开发者工具中的盒模型的offset为0。
6.4px问题：inline-block元素之间即使把margin设为0也仍有间隙。解决办法之一：把margin设为负的，一般可设为-0.25em。
7.flex属性：决定如何分配剩余空间。不设置的话则flex items不会填满整行。
8.flex item之间似乎不会发生外边距崩塌（我浏览器用的是edge）。
Taks7（第九天到第十一天）：
1.section与article：一般来说，当元素内容明确地出现在文档大纲中时，section 就是适用的；无论从结构上还是内容上来说，article 本身就是独立的、完整的。有个最简单的判断方法是看这段内容脱离了所在的语境，是否还是完整的、独立的，如果是，则应该用article标签。对于一段主题性的内容，则就适用 section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。原则上来说，能使用 article 的时候，也是可以使用 section 的，但是实际上，假如使用 article 更合适，那么就不要使用 section 。
2.如何把背景图片刚好完全显示出来？答：把盒子的width和height设成背景图片的宽度和高度。
3.如何在背景图片上加一个滤镜（比如透明度为0.6的黑色：rgba(0,0,0,0.6)）？答：把背景图片设置在background-image、把滤镜设置在background-color里，是不行的，因为background-color永远在background-image的下面，所以不可见。解决办法是把两者都设置在background-image里（在background-image里，写在前面的在上面，所以把滤镜写前面），但是background-image里不能直接用rgba(0,0,0,0.6)，因为这是一个color，所以我们可以利用梯度，改写成
linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.6))就可以啦。不过用filter更简便。
4.心情：第一次用overflow属性来把隐藏不想看见的内容（要和width属性配合），真是激动人心。
5.网页写好后改图片的文件名，因为搜索引擎也把图片的文件名计入SEO，因此应该给图片取一个描述性的文件名：dinosaur.jpg 比 img835.png 要好。不过作为背景的图片应该不需要取这样的描述性的文件名。
6.
<article>
<section>
<img src="前端学院设计图-assets/图层 3.jpg" alt="叶子">
</section>
<section>
<img src="前端学院设计图-assets/图层 4.jpg" alt="一只鸟">
</section>
</article>
以上这种情况，如果使用这样的选择器：article img:nth-of-type(1)，那结果是2个<img>都会被选中，因为<img>此时不是<article>的直接子元素。
7.设置了定位属性（除了position:static）的元素，可以通过更改z-index来更改元素的前后位置。
8.CSS滤镜（
filter）属性提供图形特效，比如亮暗、模糊、锐化和变色等，通常被用于调整图片、背景和边界的渲染。好东西啊，比如filter: brightness(0.3)可以调整图片的亮度为原来的30%，之前我还傻乎乎地用一个背景（比如rgba(0, 0, 0, 0.7)）挡在图片的前面来调整亮度（要结合第7条的方法），非常麻烦。9.lang属性的设置会影响文本格式，比如lang="zh"的文本格式和lang="en-US"的不一样，不过不设置lang的文本格式和lang="en-US"的似乎一样。
Task8（第十二天到第十五天）：
1.假设A选择器的专用性比B选择器的专用性高，但是A选择器选的是父元素而B选择器选的是子元素，则子元素的样式还是由B选择器来决定。
2.绝对定位：我们可以将元素相对于页面的 <html> 元素边缘固定，或者相对于离元素最近的被定位的父元素（除了static定位）。
3.一定要注意 像“A B”这样的选择器是指A下的所有B，即使不是直接子元素。如果不注意，之后在B下再添加B就会出问题了，因为你还以为之前写的“A B”规则没影响到B下的B呢。所以如果你要在B下再添加B，则之前最好用“A>B”。
4.CSS巧妙实现分隔线的几种方法：http://www.daqianduan.com/4258.html
5.滥用相对定位来布局似乎不可取（因为相对定位不会改变文档流，即不会影响其它元素的位置），应优先使用padding和margin。
6.如果父元素“紧密”包裹着子元素，那要移动子元素的话就移动父元素。比如：<a><img></a>。
7.按钮用<button>，别用<div>和<span>。
8.<figure> and <figcaption>，好东西，有利于减少<div>和<span>的使用量。
Task11（第十九天）：
1.querySelector()的参数可以是你在CSS中学到的各种选择器，然后选择第一个匹配的。
Task12（第二十到第二十一天）：
1.window.onkeypress事件可用来监听是否有键按下；如果想只监听某一个键，要用if语句判断e.keyCode。默认是监听全局整个页面是否有键按下，如果只想监听当某个元素被聚焦时是否有键按下，则可以用if语句判断当前激活的元素document.activeElement.id是否等于你想要监听的元素的id。PS：回车是13，Esc是27。
2.CSS：display: none可以使元素隐藏。
3.本来以为能用e.target就也能用this，现在发现在事件委托中只能用e.target。
4.方法setTimeout()，设置一个定时器，该定时器在定时器到期后会执行一个函数，栗子（来自MDN）：
HTML：
<p>Live Example</p>
<button onclick="delayedAlert();">Show an alert box after two seconds</button>
<p></p>
<button onclick="clearAlert();">Cancel alert before it happens</button>
<button onclick="delayedAlert();">Show an alert box after two seconds</button>
<p></p>
<button onclick="clearAlert();">Cancel alert before it happens</button>
JavaScript：
var timeoutID;
function delayedAlert() {
function delayedAlert() {
timeoutID = window.setTimeout(slowAlert, 2000);
}
function slowAlert() {
alert('That was really slow!');
}
function clearAlert() {
window.clearTimeout(timeoutID);
}
}
function slowAlert() {
alert('That was really slow!');
}
function clearAlert() {
window.clearTimeout(timeoutID);
}
该栗子在网页中设置了两个简单的按钮，以触发
setTimeout() 和 clearTimeout() 方法：按下第一个按钮会在 2s 后显示一个警告对话框，并将此次 setTimeout 的延时 ID 保存起来。按下第二个按钮可以取消这次延时调用行为。setInterval()的用法和setTimeout()差不多（interval意为间隔）。5.在JavaScript中，布尔属性（比如disabled）不能用style来设置（因为布尔属性不属于style），可以用setAttribute来设置——这似乎是段废话。另外，无论disabled的值是什么（包括false），结果都是disabled。更简便的方式是用.disabled等于一个字符串来设置，只要不是空字符串，结果就是disabled。
6.一个字符串和一个数字相减，会自动把字符串转化为数字；而！！！一个字符串和一个数字相加，是把数字转换为字符串！！！
7.css sprite：一种网页图片应用处理方式，目的是节省带宽和存储空间，但似乎很麻烦。
8.用CSS animation实现动画似乎方便简单（比起用setInterval()）。
9.函数parseInt()：可用于让字符串参数"1234blue"返回数字1234。
Task13（第二十二到第二十四天）：
1.判断单选按钮是否被选中：看radio.checked的返回的布尔值（radio是在JavaScript中的引用了单选按钮的变量）。另外，Element.hasAttribute()似乎只能检查HTML中有没有明确写的属性，像checked这种布尔属性，即使没写也是有的，但检查不出来。
2.正则表达式：\s表示空格，+表示一个或多个，()表示捕获组，.表示除“\n”和"\r"之外的任何单个字符。
3.for-in语句：可用于枚举对象的属性，返回的是表示属性名字的字符串。
4.大坑：string类型的变量可以用方括号访问其中的字符，但是无法用通过方括号修改其中的字符，原因是：ECMAScript中的字符串是不可变的，也就是说，字符串一旦创建，它们的值就不能改变，要改变某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量，所以用方括号改变部分字符是行不通的。
5.大坑2：对于一个对象，你可以用方括号来创建新属性。然后你可能会想当然地以为如果连续用两个方括号就会先在对象下创建一个新对象，然后在新对象下再创建一个属性——这样是不行的。即使第一个方括号中的是原对象本来就有的属性，也要该属性是一个对象才行得通，如果是字符串，那第二个方括号相当于访问这个字符串中的字符。
Task14（第二十五到第二十七天）：
1.属性.selectedIndex是select中被选中的option的索引。
2.使用.querySelector不一定非得是document，别的JavaScript中的变量也可以的。
3.移除子结点可以用.remove()，这样就不需要用麻烦的.removeChild()（后者要明确写出父结点）。
4.使用延迟脚本或异步脚本能使刷新浏览器后select的状态回到默认状态（而不是刷新前用户更改了的状态）。
Task15（第二十八到第三十天）：
1.写代码前画流程图。
2.响应键盘按键的事件keyup, keypress, keydown以及input不只是可以设置在window上，比如还可以设置在input上。keyup，会响应回车键、ESC键、上下左右键，长按只造成一次响应；keypress，会响应回车键，长按会造成多次响应，和中文输入法有关则不响应；keydown，会响应回车键、ESC键、上下左右键，长按会造成多次响应；input，不响应回车键、ESC键、上下左右键。文本输入框一般用input。
3.querySelectorAll返回的结果是NodeList，不是正常的数组，比如没有indexOf方法。
4.属性previousSibling返回当前节点的前一个兄弟节点（可能不是元素）,没有则返回null；previousElementSibling 返回当前元素在其父元素的子元素节点中的前一个元素节点。另外还有nextSibling和nextElementSibling。
5.如果一个元素上有两个事件，比如一个input元素上的input事件和keydown事件，则按下键盘时，似乎是后面的事件处理器先执行。
6.全选用户输入（比如text类型的input元素）用select方法。
7.后续我们的代码可能会越来越多，现在一堆东西的代码都放在一个文件中，实在是不方便代码维护，所以，请你把你的代码进行拆分，在你的项目根目录下，建立一个scripts目录，创建几个js文件，把对应的代码放入。对了，页面入口主流程的代码，比如一些初始化的工作，放到一个叫做app.js的文件中
Task16（第三十一到第三十三天）：
1.let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used. This is unlike the
var keyword, which defines a variable globally, or locally to an entire function regardless of block scope.2.事件委托（Event delegation）：冒泡还允许我们利用事件委托——这个概念依赖于这样一个事实,如果你想要在大量子元素中单击任何一个都可以运行一段代码，您可以将事件监听器设置在其父节点上，而不是每个子节点单独设置事件监听器。
3.Element.children表示子元素；Element.childElementCount表示子元素的个数。
4.函数的定义位置（用等号的那种定义方式除外）和使用位置谁在前谁在后无所谓，前提是在同一个js文件中。
Task17（第三十四到第三十六天）：
1.大坑：创建和svg相关的元素时，要使用createElementNS函数并传入svg的命名空间，否则创建出来的节点默认为html dom而不是svg dom。这样的话，创建出来的和svg相关的元素就不会显示。
2.给每个标签都加上一个id属性是个好主意，因为这样你就能在我们的脚本中很容易的找到它。
3.load事件：当一个资源及其依赖资源已完成加载时，将触发load事件。
4.edge的F12的控制台的错误提示不行啊，总是不准确，有时不仅位置不对，错的原因也不对。
5.HTML中的元素的属性和CSS是不一样的，可以把整个CSS看成是元素的其中一个属性，即style。
6.<canvas>元素用于生成（动态更新的）图标很方便。
7.mouseover事件：鼠标滑过。
8.清空canvas画布的方式：canvas每当高度或宽度被重设时，画布内容就会被清空，所以，可以这样来清空：
canvas.height = canvas.height;。
9.在调试JavaScript时，遇到断点而暂停的时候，也可以在控制台里输入命令。
10.大坑：内容是数字的字符串之间比大小，你以为会按数字来比？
11.<canvas>不能设置百分比width和height（不是指CSS的）。如果想让<canvas>根据视口调整大小，那就要用window.onresize事件动态改变<canvas>的绝对大小和用window.innerWidth计算出<canvas>的绝对大小。
12.有时用margin: 0 auto;不能居中时，可能需要的不是margin: 0 auto;而是text-align: center;。
13.数组的slice方法可以返回数组的部分连续内容。
14.toString()是方法，几乎每个值都有的方法，除了null和undefined；在不知道要转换的值是不是null和undefined的情况下，还可以使用函数String()，效果是：如果值有toString()方法，则调用；如果值是null或undefined，则返回'null'或'undefined'。
Task18（第三十七到第三十八天）：
1.blur事件：失去焦点时发生。
2.在函数内，定义和函数外同名的变量并对其执行操作（比如赋值），不会影响函数外同名的变量，只不过在函数内就用不了函数外同名的变量。
3.重大发现：class的值可以是中文！
4.用for循环给一大堆元素加事件监听器时在循环体内要用this或e.target，否则事件发生时事件处理器处理的就不是发生了事件的元素，而是for循环的最后一个元素。
5.如果在一个函数体内this用着用着就没了（比如this.parentElement.textContent = '';this.parentElement.textContent = temp;中的第二个this就是null），但又还想用，则可以先把它存起来（比如var parent = this.parentElement;，之后用parent代替this.parentElement就好了）。
6.一个
EventTarget 上的 EventListener 被移除之后，如果此事件正在执行，会立即停止。7.如果父元素和子元素有相同的事件监听器（事件处理器可能不同），比如click，而且想触发子元素事件时不会触发父元素的事件（因为冒泡所以默认情况下会触发父元素的事件），就要用e.stopPropagation();阻止冒泡。
8.想让一个事件触发等同于另一个事件触发，把后者放在前者里就可以了。
9.如果点击事件里面还有个点击事件，而后者所在的元素是前者的父元素，那前者的触发会导致后者的触发，因为冒泡。
10.body元素不是整个页面，html元素才是。
11.火狐的F12，即使用步入也不会进入冒泡触发的事件的函数，而是直接跑完，除非在冒泡触发的事件的函数里加断点。另外，即使设了断点，关掉F12就能防止遇到断点。
12.大坑：可以用addEventListener()对一个元素的同一个事件添加多个不同的事件监听器（用X.onY不行，后者会覆盖前者），所以相应的事件发生一次时，将执行多个不同的事件处理器。
13.如果遇到了一种情况，而this就是被设计出来专门处理这种情况的，才用this，否则能不用就不用（比如考虑能不能用querySelector代替），因为this麻烦。
Task19（第三十九到第四十一天）：
1.location返回的是一个对象，location.hash返回的是一个字符串。
2.字符串的replace()方法不会改变原字符串，只是返回修改后的字符串。
3.函数外的变量的定义都集中放在一个js文件里（免得重复定义）。
4.大坑：checkbox.setAttribute('checked', '');和checkbox.checked = ' ';的效果在Edge上不太一样，后者可能有BUG，所以尽量用前者。红宝书推荐用后者。
5.pushState似乎比location+hash好用。
6.浏览器似乎不会把history.state存在本地，所以重启浏览器后history.state为空。
7.冒泡有时是个大坑，有时可能还不如遍历所有子元素来设置事件监听器（思绪清晰，虽然性能差了），而不是把监听器设置在父元素上（容易出叉子，因为除了你本想设置监听器的子元素，该父元素的其它子元素也会因为冒泡而触发监听器；而且，如果你想通过改变监听器们的顺序来决定同一个子元素的监听器们的执行顺序，则无论怎么排，要冒泡的监听器都是最后执行）。举个例子，有一组子元素，子元素包括一些<label>和一些<input>，<label>和<input>一一对应，你想给<input>设置监听器，比如点击<input>时触发事件，如果你把监听器设置在父元素上，则点击<label>时会触发两次事件，一次是点击<label>冒泡到父元素上触发的，另一次是因为点击<label>的同时会产生点击<input>的效果（因为它们相关联），那<input>又会冒泡到父元素上触发一次事件，所以一共触发了两次，这并不是我们想要的，我们只想触发一次。所以，情形简单时再用事件委托可能比较好。不过，再次强调：设置的监听器越多，页面的整体运行性能就越差。
8.大坑：用checkbox.setAttribute('checked', '')来重新选中（用checkbox.('checked')取消选中的才可以），只能用
