Live Note

Remain optimistic

Posted on Edited on In

基本用法

1
2
3
4
5
6
7
8
9
10
function* testGenerator() {
  yield "hello"
  yield "world"
  return "done"
}
let test = testGenerator()
test.next() // { value : 'hello', done : false }
test.next() // { value : 'world', done : false }
test.next() // { value : 'done', done : true }
test.next() // { value : undefined, done : true }
Read more »

Posted on Edited on In 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!--语义化标签-->
<header>页面的头部</header>
<hgroup>
  <h1>Test</h1>
  <h2>test</h2>
</hgroup>
<footer>页面的底部</footer>
<nav>
  <a href="#">导航</a>
  <a href="#">link1</a>
  <a href="#">link2</a>
</nav>
<section>用来划分区域</section>
<article>用来在页面中表示一套结构完整且独立的内容部分（主题）</article>
<aside>和主题相关的附属信息</aside>

<figure>用于对元素进行组合，一般用于图片或视屏</figure>
<figure>
  <img src="" alt="" />
  <figcaption>Test</figcaption>
</figure>

<time>9:00</time>

<p>
  明天
  <time datatime="2018-02-14">情人节</time>
</p>

<!--用于描述文档或文档某个部分的细节-->
<details open>
  <!--open时默认打开-->
  <summary>test</summary>
  <!--details元素的标题-->
  <p>testjfkdsjkfsjd</p>
</details>

<!--定义一段对话-->
<dialog>
  <dt>老师</dt>
  <dd>2 + 3 ?</dd>
  <dt>学生</dt>
  <dd>5</dd>
</dialog>

<address>定义文章或页面作者的详细联系信息</address>

<mark>需要标记的词或句子</mark>

<!--keygen给表单添加一个公钥-->
<form action="http://www.baidu.com" method="get">
  用户：
  <input type="text" name="usr_name" /> 公钥：
  <keygen name="security" />
  <input type="submit" />
</form>

<!--定义进度条-->
<progress max="100" value="76">
  <span>76</span>%
  <!--为了兼容-->
</progress>

Posted on Edited on In 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<form action="">
  <!--placeholder: 输入框提示信息-->
  <!--autocomplete: 自动保存用户输入过的值，默认为on-->
  <!--pattern: 正则验证-->
  <input
    type="text"
    placeholder="请输入6-8个数字"
    pattern="\d{6,8}"
    name="user"
    autocomplete="off"
    id=""
  />
  <!--formaction: 定义提交地址-->
  <input type="submit" value="提交" formaction="http://www.baidu.com" />
</form>

<form action="">
  <!--autofocus: 自动焦点-->
  <!--required: 必填项-->
  <input type="text" name="username" id="" autofocus required />
  <input type="password" name="" id="" required />
</form>

<!--datalist选项列表，与input元素配合使用，定义input的可能值-->
<input type="text" list="varList" />
<datalist id="varList">
  <option value="javascript">javascript</option>
  <option value="html">html</option>
  <option value="css">css</option>
</datalist>
Read more »

Posted on Edited on 
1
Set-cookie: value[; expires=date][; domain=domain][; path=path][; secure]

每个选项都是用分号和空格来分开，每个选项都制定了 cookie 在什么情况下会发送给服务器

过期时间选项

  • expires: 指定了 cookie 最长存储时间，过期后会被浏览器删除。值是一个 date ，格式为 WDY, DD-mm-YYYY HH:MM:SS GMT。
  • 没有设置 expires 选项时，默认为当前会话，所设置的 cookie 在关闭浏览器时会被删除。
1
Set-cookie: name=Jack; expires=Tue, 28 May 2019 22:33:22 GMT

domain 选项

  • domain: 指定了 cookie 将要被发给哪个域中。
  • 默认情况下会被设置为当前域。
  • 值必须是消息头主机的一部分，不合法的 domain 会直接被忽略。
1
Set-cookie: name=Jack; domain=baidu.com

path 选项

  • path: 指定了请求资源的 URL 中存在指定路径时，才会发送 cookie。
  • 只有对 domain 匹配成功后才会开始匹配 path 部分。
1
Set-cookie: name=Jack; domain=baidu.com; path=/

secure 选项

  • secure: 只是一个标记，当请求通过 SSL 或者 HTTPS 创建时，包含 secure 的 cookie 才会被发送至服务器。
  • 默认情况下， HTTPS 上传输的 cookie 都会被自动加上 secure 选项。
1
Set-cookie: name=Jack; secure

HTTPOnly 选项

  • HttpOnly: 禁止浏览器通过 JavaScript 来获取 cookie ，防止 XSS 攻击。
  • 这个属性也不能通过 JavaScript 来设置。
1
Set-cookie: name=Jack; HttpOnly
  1. 会话结束。
  2. 超过过期时间。
  3. cookie 数量达到限制，删除部分 cookie 以便为新创建的 cookie 腾出空间。

可以使用document.cookie来读取 cookie 的值。

Posted on Edited on In 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--新的输入控件-->

<!--email: 电子邮箱文本框，当输入的不是邮箱的时候，验证通不过。移动端的键盘会有变化-->
<form action="">
  <input type="email" name="" id="" />
  <input type="submit" value="提交" />
</form>

<!--tel: 电话号码-->
<input type="tel" name="" id="" />
<!--url: 网页的url-->
<!--search: 搜索引擎，chrom下会多个关闭按钮-->
<!--number: 只能输入数字-->
<!--color: 颜色选择器-->
<!--datetime: 显示日期-->
<!--datetime-local: 显示完整日期，不含时区-->
<!--time: 显示时间，不含时区-->
<!--date: 显示日期-->
<!--week: 显示周-->
<!--month: 显示月-->

<!--特定范围内的数值选择器 max、min、step、value-->
<input type="range" step="2" min="0" max="10" value="2" name="" id="" />