1. HTML：

表单：<form action="/my-handling-form-page" method="post">，action 属性定义了在提交表单时,应该把所收集的数据送给谁(/那个模块)(URL)去处理。给出MDN的一个例子：

<!-- 这个for= "name"和下面的id绑定，好处在下面的文章中会提到 -->
<form action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label> 
    <input type="text" id="name" name="user_name"> 
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email>
  </div>
  <div>
    <label for="msg">Message:</label>
    <textarea id="msg"></textarea>
  </div>
  <div class="button">
    <button type="submit">Send your message</button>
  </div>
</form>
<!--要将数据命名为表单，您需要在每个表单小部件上使用 name 属性来收集特定的数据块。让我们再来看看我们的表单代码:在我们的例子中，表单会发送三个已命名的数据块 "user_name", "user_email", 和 "user_message"。这些数据将用使用HTTP POST 方法,把信息发送到URL为 "/my-handling-form-page"目录下。-->

使用 [div]元素可以更加方便地构造代码，并且更容易样式化。

在 <input>元素中，最重要的属性是 type 属性。

在我们的简单示例中，我们使用值 text 作为第一个输入——这个属性的默认值。它表示一个基本的单行文本字段，接受任何类型的文本输入。
对于第二个输入，我们使用值 email，它定义了一个只接受格式正确的电子邮件地址的单行文本字段。这会将一个基本的文本字段转换为一种“智能”字段，该字段将对用户输入的数据进行一些检查。

2. CSS：

ID's are unique. Each element can only have only one ID. Each page can have only one element with that ID. Classes are NOT unique, You can use the same class on multiple elements. You can use multiple classes on the same element. CSS doesn't care,But Javascript cares. document.getElementById()

就是一个很好的例子，而CSS尽量用class selector
选择器：；
CSS3:

3. ES3：

匿名函数：

function() {
  alert('hello');
}

var myGreeting = function() {
  alert('hello');
}
myGreeting();

闭包：

function outside(x) {
  function inside(y) {
    return x + y;
  }
  return inside;
}
fn_inside = outside(3); // 可以这样想：给一个函数，使它的值加3
result = fn_inside(5); // returns 8

result1 = outside(3)(5); // returns 8

4. ES5：

getter，setter：

let person = {
  age : 18,
  get getage() {
    return this.age;
}
  set setage (age) {
    this.age = age;
} 
};
person.setage = 20;

Object.defineProperty()：直接看代码就懂了

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
};

// 更改属性：
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : true,
  configurable : true
});

// 枚举属性
let txt = "";
for (let x in person)
  txt += person[x] + " ";
console.log(txt) // "Bill Gates EN"

5. ES6：

let（尽量多用，块级作用域，不存在变量提升），constant；

${}字符串拼接：

let a='Karry Wang';

let str=`I love ${a}, because he is handsome.`;
//注意：这行代码是用返单号引起来的

alert(str);

解构赋值：如果等号的右边不是可遍历的结构那么将会报错。

let [a, b, c] = [1, 2, 3];
let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]

const node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
};

let { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc  // Object {start: Object}
start // Object {line: 1, column: 5}

用处：函数返回多值，提取JSON，遍历Map。

generator & yield：yield是ES6的新关键字，使生成器函数执行暂停，yield关键字后面的表达式的值返回给生成器的调用者。它可以被认为是一个基于生成器的版本的return关键字，实际返回一个IteratorResult（迭代器）对象，它有两个属性，value和done，分别代表返回值和是否完成。yield无法单独工作，需要配合generator的其他函数，如 next()。
```
function* gen1() {
}

console.log(gen1());//[object Generator]

function* test() {
    yield 1;
    yield 2;
    return 3;
}

let gen2 = test();

console.log(gen2.next()); //{"done": false, "value": 1}
console.log(gen2.next()); //{"done": false, "value": 2}
console.log(gen2.next()); //{"done": yes, "value": 3}
```
实际上generator的强大之处还在下面几个例子中才能呈现出来：
```
function* withParam(){
  let a = yield "a";
  return a;
}

let gen3 = withParam()
console.log(gen3.next())//{ value: 'a', done: false }
console.log(gen3.next("hello " + gen3.value))//{ value: undefined, done: true }
```
实际上generator和Thunk在状态机，异步调用中有着极大的作用：
```
To be contin
```

箭头函数：

var f = v => v;

// 等同于
var f = function (v) {
  return v;
};

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

Object & Class：

属性的简洁写法：

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}

// 等同于
const baz = {foo: foo};

上面代码中，变量 foo直接写在大括号里面。这时，属性名就是变量名, 属性值就是变量值。下面是另一个例子。

function f(x, y) {
  return {x, y};
}

// 等同于

function f(x, y) {
  return {x: x, y: y};
}

f(1, 2) // Object {x: 1, y: 2}

除了属性简写，方法也可以简写。

const o = {
  method() {
    return "Hello!";
  }
};

// 等同于

const o = {
  method: function() {
    return "Hello!";
  }
};

下面是一个实际的例子。

let birth = '2000/01/01';

const Person = {

  name: '张三',

  //等同于birth: birth
  birth,

  // 等同于hello: function ()...
  hello() { console.log('我的名字是', this.name); }

};

这种写法用于函数的返回值，将会非常方便。

function getPoint() {
  const x = 1;
  const y = 10;
  return {x, y};
}

getPoint()
// {x:1, y:10}

属性的赋值器（setter）和取值器（getter），事实上也是采用这种写法。

const cart = {
  _wheels: 4,

  get wheels () {
    return this._wheels;
  },

  set wheels (value) {
    if (value < this._wheels) {
      throw new Error('数值太小了！');
    }
    this._wheels = value;
  }
}

简洁写法在打印对象时也很有用。

let user = {
  name: 'test'
};

let foo = {
  bar: 'baz'
};

console.log(user, foo)
// {name: "test"} {bar: "baz"}
console.log({user, foo})
// {user: {name: "test"}, foo: {bar: "baz"}}