2018.5.18~5.20——JavaScript的Date对象
JavaScript Date 对象
主要掌握：
Date()--返回当日的日期和时间。
getFullYear()--从 Date 对象以四位数字返回年份。
getMonth()--从 Date 对象返回月份 (0 ~ 11)。
getDate()--从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()--从 Date 对象返回一周中的某一天 (0 ~ 6)。
getHours()--返回 Date 对象的小时 (0 ~ 23)。
getMinutes()--返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()--返回 Date 对象的秒数 (0 ~ 59)。

2018.5.15~5.17——JavaScript 中的各个数据类型、对象的概念及常用方法

1、JavaScript Number 对象

主要掌握：
toString()--把数字转换为字符串。
toFixed()--把数字转换为字符串，结果的小数点后有指定位数的数字。
toPrecision()方法--把数字格式化为指定的长度。

2、JavaScript Math 对象

主要掌握：
abs(x)--返回数的绝对值。
ceil(x)--对数进行上舍入。
floor(x)--对数进行下舍入。
pow(x,y)--返回 x 的 y 次幂。
random()--返回0 ~ 1之间的随机数。
round(x)--把数四舍五入为最接近的整数。

3、JavaScript String 对象

主要掌握：
concat()--连接字符串。
indexOf()--检索字符串。
lastIndexOf()--从后向前搜索字符串。
replace()--替换与正则表达式匹配的子串。
substr()--从起始索引号提取字符串中指定数目的字符。
substring()--提取字符串中两个指定的索引号之间的字符。
slice()--提取字符串的片断，并在新的字符串中返回被提取的部分。

4、JavaScript Array 对象

主要掌握：
concat()--连接两个或更多的数组，并返回结果。
join()--把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。默认为逗号。
pop()--删除并返回数组的最后一个元素。
push()--向数组的末尾添加一个或更多元素，并返回新的长度。
shift()--删除并返回数组的第一个元素。
unshift()--向数组的开头添加一个或更多元素，并返回新的长度。
sort()--对数组的元素进行排序。按规定排序：请参考MDN排序

2018.5.13~5.14——JS 事件

1、 初步理解JS的事件机制

事件流（捕获，冒泡）

事件流阶段

2、 js中的事件委托或是事件代理详解

3、JavaScript中SetInterval与setTimeout的用法详解

2018.5.12——JS DOM操作

1、不要以为DOM对象一定是document，灵活运用

‘.’左边是范围，右边是属性，比如：

          <ul class="section">
                <li><span>HTML</span><a href="">Some Link1</a></li>
                <li><span>JS</span><a class="active" href="">Some Link2</a></li>
                <li><span>CSS</span><a href="">Some Link3</a></li>
                <li><span>JS</span><a href="">Some Link4</a></li>
            </ul>

const $section = document.getElementById("section") // 从整个页面范围内获取id为“section”的div。
 const $span = $section.getElementsByTagName(“span”) // 从id为“section”的div中获取所有标签名为“span”的元素节点。

2、querySelector()和querySelectorAll()

querySelector和querySelectorAll，传入的参数和css选择器一样，需要查找id为section的div时，得加上个‘#’说明是通过id查询，相同的通过class也是一样，得加上一个‘.’。

3、getElementById和querySelector方法的区别

getXXXByXXX 获取的是动态集合，querySelector获取的是静态集合。

简单的说就是，动态就是选出的元素会随文档改变，静态的不会，取出来之后就和文档的改变无关了。

<ul>
    <li>aaa</li>
    <li>ddd</li>
    <li>ccc</li>
</ul>
 
//demo1
var ul = document.getElementsByTagName('ul')[0],
      lis = ul.getElementsByTagName("li");
for(var i = 0; i < lis.length ; i++){
     ul.appendChild(document.createElement("li"));
}
console.log( lis.length);  //6
 
//demo2
var ul = document.querySelectorAll('ul'),
      lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++){
     ul.appendChild(document.createElement("li"));
}
console.log( lis.length);  //3

2018.5.10-5.11——第十七天到第十八天，“如果”可以“重来”

2018.5.9——js自执行函数
写法：

（function func2(){
         // code..
}）();

作用：隔离作用域。

2018.5.5~5.8——静态模仿一个复杂的博客网站

2018.5.2~5.4——静态模仿一个简约风的网站

1、前端切图技巧教程

• 前端开发人员也要会的切图技巧
• 前端工程师必备的PS技能——切图篇
• 做一个会PS切图的前端开发

2、css段落换行

在英文段落中有时会碰到一些很长的单词，这些单词的长度超出容器宽度。在默认的页面文档中，如果单词长度超出了单行，会被自动移到下一行中，图中puzzling!就被自动换行了；而如果单词本身的长度已经超出容器宽度，常规的文档对此就没有约束力了，图中dddddd…这个单词就这么溢出了：

图来源见水印，下四张同

强制换行.png

单词断行

换行加连字符

通常这两个属性一起用足够了

3、font-family的写法

font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。（摘自w3school）
e.g. font-family:"Times New Roman",Georgia,Serif;
至少要有一个指定的字体系列名称，后面跟一个类族字体名称。

• 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
• 通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"。

2018.5.1——常见css布局的实现

各种页面常见布局+知名网站实例分析+相关阅读推荐

2018.4.30——css布局

1、nth-child和nth-of-type的区别

2、width的计算属性

image.png

3、子元素是块级元素但是子元素高度没有设定的垂直居中

在这种情况下实际上是不知道子元素的高度的，无法通过计算得到padding或margin来调整，通过给父元素设定display:table-cell;vertical-align:middle来解决。

image.png

4、圣杯布局和双飞翼布局

圣杯布局基本思路：

• 三者都设置向左浮动
• 设置center宽度为100%
• 设置 负边距，left设置左边距为负100%，extra设置左边距为负的自身宽度
• 设置sb（圣杯）的padding值给左右两个子面板留出空间
• 设置两个子面板为相对定位，left盒子的left值为负的left宽度，right盒子的right值为负的right宽度

<header></header>
<div class="sb">
  <div class="center"></div>  <!--中间的先渲染出来-->
  <div class="left"></div>
  <div class="right"></div>
</div>
<footer></footer>

header{
  height:50px;
  background:black;
}
footer{
  height:50px;
  background:black;
  clear:both;  /*clear:left;一样可以*/
}
.center{
  width:100%;
  background:red;
  height:100px;
  float:left;
}
.left{
  width:100px;
  height:80px;
  background:green;
  float:left;
  margin-left:-100%;
  position:relative;
  left:-100px;
}
.right{
  width:150px;
  height:50px;
  background:yellow;
  float:left;
  margin-left:-150px;
  position:relative;
  right:-150px;
 
}
.sb{
  padding:0 150px 0 100px;
}

圣杯布局

双飞翼布局基本思路：

• 三者都设置向左浮动
• 设置main宽度为100%
• 设置 负边距，left设置左边距为负100%，extra设置左边距为负的自身宽度
• 设置main-content的margin值给左右两个子面板留出空间

<div class="main">
  <div class="main-content"></div>
</div>
<div class="left"></div>
<div class="right"></div>

.main{
  width:100%;
  height:100px;
  background:red;
  float:left;
}
.left{
  width:100px;
  height:80px;
  background:green;
  float:left;
  margin-left:-100%;
}
.right{
  width:150px;
  height:50px;
  background:yellow;
  float:left;
  margin-left:-150px;
}
.main-content{
  margin:0 150px 0 100px;
  border:1px solid black;
  height:200px;
}

双飞翼布局

2018.4.29——css浮动

1、clearfix清除浮动

.clearfix:after{
   content:"";
   display:block;
   height:0;
   visibility:hidden;
   clear:both;
}
.clearfix{
  *zoom:1;  /*兼容ie*/
}

使用方法：在需要去除浮动的父元素加上clearfix类即可。

2、百度编码规范

2018.4.28——css盒模型

1、外边距塌陷

块级元素的上外边距和下外边距有时会合并（或折叠）为一个外边距，其大小取其中的最大者，而不是二者的和，这种行为称为外边距折叠（margin collapsing）。

image.png

发生了外边距塌陷

按道理30px是这么多

这也发生了外边距塌陷，取最大者

2、W3C盒模型和IE盒模型的区别

image.png

2018.4.27——css选择器优先级

一般来说，选择器的优先级是：在属性后面使用 !important会覆盖页面内任何位置定义的元素样式 > 作为style属性写在元素内的样式 > id选择器 > 类选择器/属性选择器/伪类选择器 > 标签选择器/伪元素

2018.4.26——给个人简历增加样式，重新理解绝对定位

1、用git上传文件到GitHub

作业地址，强推google插件“Octotree”,浏览GitHub的时候方便查看文件结构。

2、对绝对定位的重新认识

之前的理解是，当父元素没有设置position:relative时，子元素则以body标签的左上角为基准开始偏移；当父元素设置了position:relative之后，则以父元素为基准偏移。
其实，父元素并不是一定要设置为relative，设置为absolute也是一样可以的，正确的应该是只要父级元素设置了position值（absolute或者relative），那么子元素的position都是以父级元素来定位的。

相对于body标签绝对定位

相对于父元素绝对定位

2018.4.25——制作在线个人简历，学习git操作

1、html标签语义化真的很有必要，让机器可以读懂内容。

附如何理解web语义化链接

2、git操作

(在伙伴的推荐下看了up主表严肃的视频，讲得挺好的，各种常用的命令都有讲到，传送门)

git官方网站：https://www.git-scm.com/
下载安装到本地（windows系统顺带安装了git bash）后，打开命令行工具cmd或者Git Bash，常用命令：
git --version——查看git的版本
git config --global user.name "..."——配置你的git名称，--global为全局配置的意思
git config --global user.email——配置你的git联系邮箱
git config --list——查看git配置列表
git init——初始化仓库，在要建仓库的文件夹中执行
git clone 克隆地址（例如GitHub仓库地址）——从GitHub上克隆仓库
git status——查看仓库状态
git add .——将做修改后的内容放入暂存区
git commit -m "描述"——提交版本
git log——查看版本记录
git log -p——查看上次操作具体做了哪些修改
git checkout xxx——穿越到指定的历史节点
git tag -a 标签名 -m “备注”——提交版本后给版本附注标签，主要用在重大修改，便于快速查询
git tag——列出所有标签
git show——查看某个标签的详细信息
git branch 分支名——创建分支
git log --all --graph——图示全部历史记录
git merge 分支名——合并分支
git remote add 远程名称 远程地址——添加远程仓库
git push -u 远程名 分支名——上传代码
git pull——获取远程更新
git pull --rebase 远程名称 master——有时候在本地建完仓库第一次提交版本的时候，会提示有冲突，原因是你GitHub上建完仓库默认勾选了readme.md 文档，但是你本地没有，所以要通过此命令行拉取更新
git push -u origin 分支名——二次上传代码远程名为origin（这是默认名称，就像第一个分支默认名称为master）

2018.4.24——mdn文档知识查漏

HTML

1、字符引用：

2、<meta>元素的name和content特性用于定义页面的作者和提供页面的内容描述：

<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">

3、给网页添加自定义图标：

将ico文件命名为favicon放到网页所在的根目录下，在网页<head></head>中添加<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">就可以了。附图片转ico文件地址

4、重新定义的斜体字、粗体字、下划线标签：

<i> 被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想……
<b> 被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句……
<u> 被用来传达传统上用下划线表达的意义：专有名词，拼写错误……

5、html5新增的语义化标签：

image.png

CSS

1、单位：

em:1em与当前元素的字体大小相同（更具体地说，一个大写字母M的宽度）。CSS样式被应用之前，浏览器给网页设置的默认基础字体大小是16像素，这意味着对一个元素来说1em的计算值默认为16像素。但是要小心—em单位是会继承父元素的字体大小，所以如果在父元素上设置了不同的字体大小，em的像素值就会变得复杂。

rem: REM（root em）和em以同样的方式工作，但它总是等于默认基础字体大小的尺寸；继承的字体大小将不起作用。

2、管理有序列表计数：

start属性允许你从1 以外的数字开始计数。示例如下：

<ol start="4">
  <li>Toast pitta, leave to cool, then slice down the edge.</li>
  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li>Wash and chop the salad.</li>
  <li>Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

输出的结果如下：

4.Toast pitta, leave to cool, then slice down the edge.
5.Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
6.Wash and chop the salad.
7.Fill pitta with salad, humous, and fried halloumi.

reversed属性属性将启动列表倒计数。示例如下：

<ol start="4" reversed>
  <li>Toast pitta, leave to cool, then slice down the edge.</li>
  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li>Wash and chop the salad.</li>
  <li>Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

输出的结果如下：

4.Toast pitta, leave to cool, then slice down the edge.
3.Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
2.Wash and chop the salad.
1.Fill pitta with salad, humous, and fried halloumi.

value属性允许设置列表项指定数值，示例如下:

<ol>
  <li value="2">Toast pitta, leave to cool, then slice down the edge.</li>
  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li value="6">Wash and chop the salad.</li>
  <li value="8">Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

输出的结果如下：

2.Toast pitta, leave to cool, then slice down the edge.
4.Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
6.Wash and chop the salad.
8.Fill pitta with salad, humous, and fried halloumi.

3、弹性布局实现水平垂直居中：

父元素 {
  display: flex;
  align-items: center; /*子元素垂直居中*/
  justify-content: center;  /*子元素水平居中*/
}

附一个好玩的练习flex布局各种属性的小游戏--帮助青蛙回家

JavaScript

1、json结构，有两种：

类似js对象写法的

{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true
}

类似js数组写法的

[
  {
    "name": "Molecule Man",
    "age": 29,
    "secretIdentity": "Dan Jukes",
    "powers": [
      "Radiation resistance",
      "Turning tiny",
      "Radiation blast"
    ]
  },
  {
    "name": "Madame Uppercut",
    "age": 39,
    "secretIdentity": "Jane Wilson",
    "powers": [
      "Million tonne punch",
      "Damage resistance",
      "Superhuman reflexes"
    ]
  }
]

常见安全问题

1、XSS 和 CSRF

XSS允许攻击者将客户端脚本注入到其他用户查看的Web页面中。攻击者可以使用跨站点脚本攻击的漏洞来绕过诸如同源策略之类的访问控制。这些攻击的影响可能从一个小麻烦到一个重大的安全风险。

CSRF攻击类似于XSS攻击，因为它们以相同的方式攻击——向Web页面中注入客户端脚本——但它们的目标是不同的。CSRF攻击者试图将特权升级到特权用户(比如站点管理员)的权限，以执行他们不应该执行的操作(例如，将数据发送给一个不受信任的用户)。

XSS攻击利用用户对web站点的信任，而CSRF攻击则利用网站为其用户提供的信任。

2、SQL注入

SQL 注入是一种试图在目标web站点使用的数据库上执行操作的攻击类型。这通常包括发送一个SQL请求，希望服务器能够执行它（通常，当应用服务器试图存储由用户发送的数据时）。

3、HTTP数据头注入和电子邮件注入

当您的应用程序基于表单上用户的数据输入构建HTTP头部或电子邮件时，就会出现这种类型的攻击。这些不会直接损害您的服务器或影响您的用户，但是它们是一个更深入的问题，例如会话劫持或网络钓鱼攻击。