1. 写一个html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的页面</title> //页面标题
<link rel="stylesheet" href="/style.css"> //引入一个css
<link rel="stylesheet" href="/print.css" media="print"> //css仅在打印时生效
<link rel="stylesheet" href="/mobile.css" media="screen and (max-width:500px)"> //css仅在屏幕小于500px时生效
</head>
<body>
<script src="/gbk.js" charset="gb2312"> </script> //指定文件用GBK编码
</body>
</html>
2. 移动端适配
- 在html的head里加上meta（背下来）
<meta name="viewport" content="width=device-width, user-scalable=no ,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
快捷键：meta:vp + tab
- media query（媒体查询）
在引用css的时候加上media属性
<link rel="stylesheet" href="mobile.css" media="(max-width:768px)">
在css里用media
@media (max-width: 800px) { //屏幕宽度小于800px时
body{
background-color: black;
}
}
@media (min-width:325px) and (max-width: 800px) { //屏幕宽度在325px到800px时
body{
background-color: black;
}
}
-
常用单位
px：像素，网页的默认font-size是16px
em：本身元素的font-sizep{ border: 1px solid red; font-size: 20px; height:2em; } //则p元素的高度就是40pxrem：根节点(html)的font-size（默认font-size是16px），若设置html的font-size为14px，则整个页面都可以通过设置rem来使其字体是14px的倍数
vh：100vh === 视口高度
vw：100vw === 视口宽度 动态REM（手机专用！）
rem是根节点(html)的font-size（默认font-size是16px）大小。
js可以获得当前屏幕的宽度pageWidth，把pageWidth赋给font-size，这样整个页面可以通过设置rem来动态的设置所有间距大小
<script>
var pageWidth = window.innerWidth
document.write('<style>html{font-size:'+pageWidth/10+'px;}</style>')
//注意！font-size不能小于12px，所以这里可以除以10，但不能除以100，除以100就小于12了
</script>
<style>
*{margin: 0;padding: 0;}
body{font-size: 16px;}
.clearfix::after{content: ""; clear: both; display: block;}
.child{
background: #ddd;
width: 4rem;
height: 2rem;
margin: 0.5rem 0.5rem; //一行两个width加上左右margin正好是10rem，因为script里font-size除以了10
float: left;
}
</style>
<body>
<div class="father clearfix ">
<div class="child">
可以
</div>
<div class="child">
可以
</div>
<div class="child">
可以
</div>
<div class="child">
可以
</div>
</div>
</body>
通过rem动态设置间距
当设置很小的东西的时候，直接写像素就行了，比如设置边框的时候。
把body的font-size设置成16px。
使用SCSS更方便的调整rem，Sass入门
3. 用css3实现圆角矩形和阴影
设置border-radius和box-shadow，具体请看css入门
4. 闭包
5. call、apply和bind
请看面向对象编程
6. HTTP
7. 算法
8. 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
9. 数组去重
- ES5
- 方法一（计数排序的逻辑）：
Array.prototype.distinct = function (){ var arr = this, i, obj = {}, result = [], len = arr.length; for(i = 0; i< arr.length; i++){ if(!obj[arr[i]]){ //如果能查找到，证明数组元素重复了 obj[arr[i]] = 1; result.push(arr[i]); } } return result; }; var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,]; var b = a.distinct(); console.log(b.toString()); //1,2,3,4,5,6,56 - 方法二：（递归）
Array.prototype.distinct = function (){ var arr = this, len = arr.length; arr.sort(function(a,b){ //对数组进行排序才能方便比较 return a - b; }) function loop(index){ if(index >= 1){ if(arr[index] === arr[index-1]){ arr.splice(index,1); } loop(index - 1); //递归 } } loop(len-1); //调用loop函数 return arr; }; var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,56,45,56]; var b = a.distinct(); console.log(b.toString()); //1,2,3,4,5,6,45,56
- ES6
set数据结构
拓展运算符(...)内部使用for...of循环function dedupe(array){ return Array.from(new Set(array)); } dedupe([1,1,2,3]) //[1,2,3]let arr = [1,2,3,3]; let resultarr = [...new Set(arr)]; console.log(resultarr); //[1,2,3]
