一些关于前端、技术，和我的生活的文字

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

Category: All - Page 11 | Spark1e的个人博客

#### React的生命周期图谱

v16.3和v16.4+版本的生命周期有着比较大的区别，感谢大神制作了一个[React生命周期图谱](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) 这里截图说明：

![React生命周期](https://cdn.arc-light.fun/gHN3CF/React生命周期_jp8yqw.jpg)

* constructor
  **如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。**

  在 React 组件挂载之前，会调用它的构造函数。在为 `React.Component` 子类实现构造函数时，应在其他语句之前前调用 `super(props)`。否则，`this.props` 在构造函数中可能会出现未定义的 bug。

  通常，在 React 中，构造函数仅用于以下两种情况：
  \- 通过给 `this.state` 赋值对象来初始化内部 state。
  \- 为事件处理函数绑定实例
  在 `constructor()` 函数中不要调用 `setState()` 方法。如果你的组件需要使用内部 state，请直接在构造函数中为 `this.state` 赋值初始 state
* `static getDerivedStateFromProps(props, state)`

`getDerivedStateFromProps` 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

此方法适用于罕见的用例，即 state 的值在任何时候都取决于 props。例如，实现 `<Transition>` 组件可能很方便，该组件会比较当前组件与下一组件，以决定针对哪些组件进行转场动画。

**请注意，不管原因是什么，都会在每次渲染前触发此方法。这与 UNSAFE_componentWillReceiveProps 形成对比，后者仅在父组件重新渲染时触发，而不是在内部调用 setState 时。**

* shouldComponentUpdate

根据 `shouldComponentUpdate()` 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。大部分情况下，你应该遵循默认行为。

当 props 或 state 发生变化时，`shouldComponentUpdate()` 会在渲染执行之前被调用。返回值默认为 true。首次渲染或使用 `forceUpdate()` 时不会调用该方法。

此方法仅作为性能优化的方式而存在。不要企图依靠此方法来“阻止”渲染，因为这可能会产生 bug。你应该考虑使用内置的 `PureComponent` 组件，而不是手动编写 `shouldComponentUpdate()`。`PureComponent` 会对 props 和 state 进行浅层比较，并减少了跳过必要更新的可能性。

* getSnapshotBeforeUpdate

`getSnapshotBeforeUpdate()` 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 `componentDidUpdate()`。

此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等。

应返回 snapshot 的值（或 `null`）。

* componentDidMount

`componentDidMount()` 会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。

这个方法是比较适合添加订阅的地方。如果添加了订阅，请不要忘记在 `componentWillUnmount()` 里取消订阅

你可以在 `componentDidMount()` 里可以直接调用 `setState()`。它将触发额外渲染，但此渲染会发生在浏览器更新屏幕之前。如此保证了即使在 `render()` 两次调用的情况下，用户也不会看到中间状态。请谨慎使用该模式，因为它会导致性能问题。通常，你应该在 `constructor()` 中初始化 state。如果你的渲染依赖于 DOM 节点的大小或位置，比如实现 modals 和 tooltips 等情况下，你可以使用此方式处理

* componentDidUpdate

`componentDidUpdate()` 会在更新后会被立即调用。首次渲染不会执行此方法。

当组件更新后，可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求。（例如，当 props 未发生变化时，则不会执行网络请求）。

你也可以在 `componentDidUpdate()` 中直接调用 `setState()`，但请注意 **它必须被包裹在一个条件语件里** ，正如上述的例子那样进行处理，**否则会导致死循环**。它还会导致额外的重新渲染，虽然用户不可见，但会影响组件性能。不要将 props “镜像”给 state，请考虑直接使用 props。 欲了解更多有关内容，请参阅为什么 props 复制给 state 会产生 bug。

* componentWillUnmount

`componentWillUnmount()` 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 `componentDidMount()` 中创建的订阅等。

`componentWillUnmount()` 中不应调用 `setState()`，因为该组件将永远不会重新渲染。组件实例卸载后，将永远不会再挂载它。

React 组件中 state 和生命周期

#### Vue更新版生命周期

截止v2.6.10版本，Vue相关的选项/生命周期共有11个：
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- activated
- deactivated
- beforeDestroy
- destroyed
- errorCaptured

#### 生命周期顺序：

初始化生命周期和方法 -> __beforeCreate__ -> 初始化依赖注入和响应式 -> __created__ -> 模板解析编译 -> __beforeMount__ -> 创建element节点 -> __mounted__ -> 如果数据被更新 -> __updated__ -> 触发重新渲染和patch (-> 如果数据继续更新 -> __beforeUpdate__ -> 调用`destroy`方法 -> __beforeDestroy__ -> 销毁子节点&watcher&事件监听 -> __destroyed__

- activated
keep-alive 组件激活时调用。
该钩子在服务器端渲染期间不被调用。

- deactivated
keep-alive 组件停用时调用。
该钩子在服务器端渲染期间不被调用。

- errorCaptured
	__2.5.0+ 新增__
    当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

> 这里提一下`keep-alive`, 这是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。当组件在` <keep-alive>` 内被切换，它的 `activated` 和`deactivated` 这两个生命周期钩子函数将会被对应执行。

Vue(v2.6.10)的选项 / 生命周期钩子

#### HTTP是什么

HTTP (超文本传输协议) 是用来在 Web 上传输文件的 __基础协议__ ，基于 __TCP/IP通信协议__ 来传递数据，最典型的是在浏览器和服务器之间传递以至于上网人员可以浏览他们。目前HTTP说明文档的版本是HTTP/2。

HTTPS 是 HTTP 协议的安全版本，HTTPS __在 HTTP 上加入套接字 SSL（TLS 为 SSL 最新版）层__ ，对网页进行加密传输。

HTTP 是 __基于文本__ (所有的通信都是以纯文本的形式进行) 以及 __无状态的 (当前通信不会发现以前的通信状态)__ 。这个特点对在www上访问网页的人是很理想的。而且，HTTP也可以让网站更加的灵活多变，利用在AJAX上等。

HTTP使用统一资源标识符（Uniform Resource Identifiers, URI）来传输数据和建立连接。 __URL是一种特殊类型的 URI__ 。

HTTP是用于传输诸如HTML的超媒体文档的 __应用层__ 协议。它被设计用于Web浏览器和Web服务器之间的通信，但它也可以用于其他目的。 HTTP遵循经典的 __客户端-服务端模型__ ，客户端打开一个连接以发出请求，然后等待它收到服务器端响应。 HTTP是无状态协议，意味着服务器不会在两个请求之间保留任何数据（状态）。该协议虽然通常基于TCP / IP层，但可以在任何可靠的传输层上使用；也就是说，一个不会像UDP协议那样静默丢失消息的协议。RUDP作为UDP的可靠的升级版本，是一种合适的替代选择。

#### 通过定义能够知道的特点

1. 基于TCP/IP通信协议
这部分的知识稍后开篇来讲
2. HTTP位于应用层
这部分的知识稍后开篇来讲
3. 遵循客户端-服务端模型
C/S(客户端/服务器)模型，是常用的服务器模型，包括现在说的B/S(浏览器/客户端)模型，都是对C/S结构的一种变化或者改进的结构。 TCP/IP协议在设计和实现上并没有客户端和服务器的概念，在通信过程中所有服务器都是对等的。但由于资源被数据提供者所垄断，于是产生了C/S模型：所有客户端都通过服务器获取所需资源。
4. 无状态
这里需要区分一下两个概念：
	- __无连接__：每次连接只处理一个请求，服务端处理完客户端一次请求，等到客户端作出回应之后便断开连接；
	- __无状态__：是指服务端对于客户端每次发送的请求都认为它是一个新的请求，上一次会话和下一次会话没有联系；
    
在后续的Web发展中需要带有一定的状态，则通过引入cookie和session体系机制来维护状态信息。即用户第一次访问服务器的时候，服务器响应报头通常会出现一个Set-Cookie响应头，这里其实就是在本地设置一个cookie，当用户再次访问服务器的时候，http会附带这个cookie过去，cookie中存有sessionId这样的信息来到服务器这边确认是否属于同一次会话。

#### HTTP与HTTPS
##### 什么是HTTPS
HTTPS（全称：Hyper Text Transfer Protocol over Secure Socket Layer），是以安全为目标的HTTP通道，简单讲是HTTP的安全版。即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。 现在它被广泛用于万维网上安全敏感的通讯，例如交易支付方面。

##### HTTPS加密机制
HTTP中没有加密机制，可以通过 __SSL（Secure Socket Layer 安全套接层）__ 或 __TLS（Transport Layer Security 安全层传输协议）__ 的组合使用，加密HTTP的通信内容。

HTTPS是 HTTP Secure 或 HTTP over SSL。

SSL（Security Socket Layer）是最初由网景公司（NetScape）为了保障网上交易安全而开发的协议，该协议通过加密来保护客户个人资料，通过认证和完整性检查来确保交易安全。网景公司开发过SSL3.0之前的版本；目前主导权已转移给IETF（Internet Engineering Task Force），IETF以SSL3.0为原型，标准化并制定了TSL1.0，TLS1.1，TLS1.2。但 __目前主流的还是SSL3.0和TSL1.0__ 。

SSL工作在 __OSI七层模型中的表示层__ ，__TCP/IP 四层模型的应用层__ 。

SSL 和 TLS 可以作为基础协议的一部分（对应用透明），也可以嵌入在特定的软件包中（比如Web服务器中的实现）。

SSL 基于TCP，SSL不是简单地单个协议，而是两层协议；SSL记录协议（SSL Record Protocol）为多种高层协议（SSL握手协议，SSL修改密码参数协议，SSL报警协议）提供基本的安全服务。HTTP是为Web客户端/服务器交互提供传输服务的，它可以在SSL的顶层运行；SSL记录协议为SSL链接提供两种服务，机密性：握手协议定义了一个共享密钥，用于SSL载荷的对称加密。 消息完整性：握手协议还定义了一个共享密钥，它用来产生一个消息认证码（Message Authentication Code，MAC）。

SSL/TLS握手阶段分为五步(假定客户端叫做爱丽丝，服务器叫做鲍勃，整个握手过程)：
以下引自 [阮一峰的网络日志](http://www.ruanyifeng.com/blog/2014/09/illustration-ssl.html)
- 第一步，爱丽丝给出协议版本号、一个客户端生成的随机数（Client random），以及客户端支持的加密方法。
- 第二步，鲍勃确认双方使用的加密方法，并给出数字证书、以及一个服务器生成的随机数（Server random）。
- 第三步，爱丽丝确认数字证书有效，然后生成一个新的随机数（Premaster secret），并使用数字证书中的公钥，加密这个随机数，发给鲍勃。
- 第四步，鲍勃使用自己的私钥，获取爱丽丝发来的随机数（即Premaster secret）。
- 第五步，爱丽丝和鲍勃根据约定的加密方法，使用前面的三个随机数，生成"对话密钥"（session key），用来加密接下来的整个对话过程。

直白解释，在HTTPS使用时，客户端首先发起请求，服务端返回证书，客户端确认无误后，选择对应的公钥开始加密，服务端接收到数据后开始使用服务器的私钥解密。

#### HTTP Header
HTTP 消息头允许客户端和服务器通过 request和 response传递附加信息。一个请求头由名称（不区分大小写）后跟一个冒号“：”，冒号后跟具体的值（不带换行符）组成。该值前面的引导空白会被忽略。

根据不同上下文，可将消息头分为：
- 一般头: 同时适用于请求和响应消息，但与最终消息主体中传输的数据无关的消息头。
- 请求头: 包含更多有关要获取的资源或客户端本身信息的消息头。
- 响应头: 包含有关响应的补充信息，如其位置或服务器本身（名称和版本等）的消息头。
- 实体头: 包含有关实体主体的更多信息，比如主体长(Content-Length)度或其MIME类型。

常用的头部主要有：

|应答头|说明|
|--|--|
|Content-Length|表示内容长度。只有当浏览器使用持久HTTP连接时才需要这个数据。如果你想要利用持久连接的优势，可以把输出文档写入 ByteArrayOutputStream，完成后查看其大小，然后把该值放入Content-Length头，最后通过byteArrayStream.writeTo(response.getOutputStream()发送内容。|
|Content-Type|表示后面的文档属于什么MIME类型。Servlet默认为text/plain，但通常需要显式地指定为text/html。由于经常要设置Content-Type，因此HttpServletResponse提供了一个专用的方法setContentType。|
|Expires|应该在什么时候认为文档已经过期，从而不再缓存它|
|Last-Modified|文档的最后改动时间。客户可以通过If-Modified-Since请求头提供一个日期，该请求将被视为一个条件GET，只有改动时间迟于指定时间的文档才会返回，否则返回一个304（Not Modified）状态。Last-Modified也可用setDateHeader方法来设置。|
|Set-Cookie|设置和页面关联的Cookie。Servlet不应使用response.setHeader("Set-Cookie", ...)，而是应使用HttpServletResponse提供的专用方法addCookie。|

前端看HTTP

在穷游一年的时间，最终还是选择了离开去寻找更大的环境，希望穷游的一切能够越来越好，希望同事们都能工作顺利！

Bye！

![不定期的旅行牛人分享](https://cdn.arc-light.fun/2HYxeQ/微信图片_20190818011937_rc9nev.jpg "不定期的旅行牛人分享")

![英式电话亭](https://cdn.arc-light.fun/f0_z35/微信图片_20190818011907_hxhh3l.jpg "英式电话亭")

![面试就被火车吸引到了](https://cdn.arc-light.fun/SNuYgr/微信图片_20190818011927_vj5kxb.jpg "面试就被火车吸引到了")

![JNE的旅行物件](https://cdn.arc-light.fun/F_JFD3/微信图片_20190818011931_owanyw.jpg "JNE的旅行物件")

Bye QYER

#### script 标签有哪些属性

* async
* defer
* integrity
* src
* type
* text
* crossorigin

区别如下

![script标签属性区别](https://cdn.arc-light.fun/y04gmB/script-tag-difference.png)

如图可知，async不影响页面解析过程，但是加载完成执行过程会终止parsing；
而defer是在过程中加载，等到页面解析完成后才执行。

**要注意，async无法确定顺序，比较适合不依赖dom结构的，而defer则是顺序执行**

#### 其他的方式

1. 动态创建script标签

```javascript
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "file1.js";
document.getElementByTagName("head")[0].appendChild(script);
```

动态创建的script无论在何时执行创建，其源js均会在最后执行

script标签有几种写法

平时使用时最常见的用法：
```html
<meta charset="UTF-8" />
```

但是通过meta我们可以实现很多特别的功能。

#### meta是什么

>The <meta /> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

换句话来说，就是页面里对用户不可见，但是可供浏览器解析的页面信息。

#### meta的类型

##### http-equiv

这一类使用格式为`<meta http-equiv="参数" content="具体的描述">`

- content-Type
可以设置html的字符集和格式，但是被`<meta charset="utf-8">`取代

- X-UA-Compatible
设置浏览器渲染模式，一般采取最新的：
```html
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
```

- cache-control
设置浏览器缓存，一般设置为`<meta http-equiv="cache-control" content="no-cache">`
可设置为以下属性：
	- no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
	- no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
	- public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果
	- private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）
	- maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。
    - no-siteapp: 禁止百度默认的移动端转码。
    
- expires
设置网页过期时间，超时需要重新从服务器获取。
```html
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />
```

- refresh
网页将在设定的时间内，自动刷新并调向设定的网址。
```html
<meta http-equiv="refresh" content="2;URL=https://blog.sparkinglemon.me" />
```
设置为2s后自动转向到网址

- Set-Cookie
配置页面cookie

##### name
name属性的配置格式
```html
<meta name="参数" content="具体的描述" />
```

- keywords
设置页面关键词，SEO收录常用

- description
页面描述，SEO常用

- viewport
__移动端__ 设置视口。后续会在移动端适配详细补充。

- robots
告知爬虫具体需要爬取的页面，默认是all ，可以设置none，noindex（非本页），nofollow（通过本页索引其他页）

- author
页面作者，不常用

- generator
页面制作于

- copyright
页面版权信息

- revisit-after
设置爬虫重访时间


> 部分内容参考了 [Lxxyx-“HTML meta标签总结与属性使用介绍”](https://segmentfault.com/a/1190000004279791)

meta标签的使用

### 起因

目前需要做一个 SDK，挂载到全局完成一些标记的时间，因此需要借助`document.body.addEventListener`的方式，那么废话不多说，一把 suo

```javascript
document.body.addEventListener('click', function(e) {
  console.log('成功触发:' + e.target)
})
```

正当我觉得这一切没什么问题的时候，测试发现了 Bug

| iOS 设备不能正常的触发啊

这种情况只能回头看代码了，这里有如下代码

```html
<p data-xxx="test"></p>
```

通过上面的事件监听，我发现 iOS 设备压根没有成功的添加到这个节点，那么是什么问题呢？

### Bug or Feature?

经过一系列尝试我发现， **位于 body 的事件是无法在捕获/冒泡阶段在 iOS 设备触发事件** , 这就触及到知识盲区了，赶紧翻阅相关网站查找资料

### Fix

经过查阅，以下方法可以修复这个问题：

- onclick
- `<a href="javascript:void(0);">`
- `cursor: pointer;` body 或者对应元素
- `<button>`
- `click` -> `touchstart`

以上方案来讲，样式最清晰，改动最小，touchstart 方案也是比较容易实现的，但需要注意 touchend

移动端iOS特殊的点击事件

#### 五种基础类型（ES5后6种）
- number
- string
- boolean
- undefined
- null
- Symbol

对象（Object）。其中对象类型包括：数组（Array）、函数（Function）、还有两个特殊的对象：正则（RegExp）和日期（Date）。

#### 类型判断
- typeof 返回值
- instanceof 操作符
- Object.prototype.toString获取 `[[class]]`(准确)

#### 关于函数
函数声明 function foo(){}
函数表达式 var foo = function () {}
##### 区别
- 函数声明会在任何表达式被解析和求值之前先被解析和求值，即使你的声明在代码的最后一行，它也会在同作用域内第一个表达式之前被解析/求值
- 函数声明在条件语句内虽然可以用，但是没有被标准化，也就是说不同的环境可能有不同的执行结果，所以这样情况下，最好使用函数表达式
```javascript
var getName//变量被提升，此时为undefined

getName()//oaoafly 函数被提升 这里受函数声明的影响，虽然函数声明在最后可以被提升到最前面了
var getName = function() {
	console.log('wscat')
}//函数表达式此时才开始覆盖函数声明的定义
getName()//wscat
function getName() {
	console.log('oaoafly')
}
getName()//wscat 这里就执行了函数表达式的值
```

#### 函数优化
如果我们的代码中返回多个闭包的情况，如果没有手动设置null的话，内存不会被自动释放。

#### 立即执行函数 & 匿名函数
在一个表达式后面加上括号()，该表达式会立即执行, 但是在一个语句后面加上括号()，是完全不一样的意思，他的只是分组操作符。

#### 闭包
首先了解一个JavaScript变量的作用域,
无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。另一方面，在函数外部自然无法读取函数内的局部变量。但是通过闭包，可以在函数外面访问到内部的变量！比如:
```javascript
function f1(){
　　var n=999;
　　function f2(){
　　　　alert(n); // 999
　　}
}
```

#### 事件监听
这两种方式确定了事件执行的前后顺序，只不过后来W3C对DOM2的事件模型给出了一个规范
[http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/]：首先进入事件捕获阶段->达到元素后->进入事件冒泡阶段。

#### 原型继承
在Javascript中，每个函数都有一个原型属性prototype指向函数自身的原型，而由这个函数创建的对象也有一个`__proto__`
属性指向这个原型，而函数的原型是一个对象，所以这个对象也会有一个`__proto__`指向自己的原型，这样逐层深入直到Object对象的原型(null)，这样就形成了原型链。

#### This
除了DOM的事件回调或者提供了执行上下文（后面会提到）的情况，函数正常被调用（不带new）时，里面的this指向的是全局作用域。
还有个例外，就是使用了`"use strict";`。此时this是`undefined`。
当用调用函数时使用了new关键字，此刻this指代一个新的上下文，不再指向全局this。
注意原型链底层函数中对`this`的操作会覆盖上层的值。
解决方法就是传递的时候使用`bind`方法显示指明上下文，`bind`方法是所有函数或方法都具有的。同时也可以使用`apply`或`call`
来调用该方法或函数，让它在一个新的上下文中执行。
在DOM事件的处理函数中，this指代的是被绑定该事件的DOM元素。除非你通过`bind`人为改变了事件处理器的执行上下文。

#### 对象
我们说的通过引用进行对象比较是:两个对象的值是否相同取决于它们是否指向相同的底层对象。

Javascript 基础知识点总结

Refer from: [https://stackoverflow.com/questions/9781218/how-to-change-node-jss-console-font-color]()

```javascript
console.log('\x1b[36m%s\x1b[0m', 'I am cyan') //cyan
console.log('\x1b[33m%s\x1b[0m', stringToMakeYellow) //yellow
```

通过配置 log，达到实现不同颜色的目的，下面是一些常用的颜色

```javascript
Reset = '\x1b[0m'
Bright = '\x1b[1m'
Dim = '\x1b[2m'
Underscore = '\x1b[4m'
Blink = '\x1b[5m'
Reverse = '\x1b[7m'
Hidden = '\x1b[8m'

FgBlack = '\x1b[30m'
FgRed = '\x1b[31m'
FgGreen = '\x1b[32m'
FgYellow = '\x1b[33m'
FgBlue = '\x1b[34m'
FgMagenta = '\x1b[35m'
FgCyan = '\x1b[36m'
FgWhite = '\x1b[37m'

BgBlack = '\x1b[40m'
BgRed = '\x1b[41m'
BgGreen = '\x1b[42m'
BgYellow = '\x1b[43m'
BgBlue = '\x1b[44m'
BgMagenta = '\x1b[45m'
BgCyan = '\x1b[46m'
BgWhite = '\x1b[47m'
```

addons: 在可以引用其他库的环境中，也可以使用`inquirer`，能够完成大部分情况比如：

- 错误回显
- “提问”模式
- 输入格式化
- 回答校验
- 管理多重选项

用法详见[npm](https://www.npmjs.com/package/inquirer)

Node.js环境log颜色表

### 何为语义化？

> 语义化的含义就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。

做一个比较而言，Markdown导出的html结构就是符合大部分语义化的做法，即便在没有样式时，通过浏览器基础的样式和解析，整个页面仍保持构想的文档结构，能够维持较为清晰的页面结构，对我而言，就需要注意标签的使用。

### 语义化常使用的标签

##### meta信息
- title
  `title`标签指定了文档对外的标题，建议一般显示为 *窗口标题 / 历史记录 / 搜索结果标题 / ...*
- lang
  `lang`指定了内容的语言
- meta
  `meta`元素中，name决定了文档种类，content表示内容，标准情况下应包括`application-name, author, description, generator, keywords`
  
###### 链接
- link
  `link`元素必须包括rel和href属性，用来描述文档本身与其他资源的关系
- a
  `a`元素在存在href时为超链接，无href为链接占位符，可以添加rel属性使其兼容浏览器的阅读模式（如rel="prev"显示为分页器）

##### 区块
- article
  `article`标签可以用于独立的文档、页面等，可以单独发布、重用等内容
- section 
  `section`一般是按主题将内容分组，通常会有标题，但本身并非语义化的div，它通常用于将内容体现在文档等提纲中
- nav
  `nav`是一个包含导航链接等自然节，它可以帮助UA快速获得导航内容，其内部不一定使用ul，也可使用自然文本
- aside
  `aside`也是块级元素，它通常表示与周围内容关系不大密切等内容，可以用来做侧边栏等容器等
- h1-h6
  标题元素日常常用，需要注意覆盖浏览器默认样式
- header/footer
  `header`
  `footer`元素与header类似，代表最近的父级区块内容的页脚，同样不影响文档提纲

##### 内容分组
- p
  段落是主题接近的若干句子组成等文本块，如果段落没有特指，考虑使用p
- ol/ul/li
  需要注意，列表有序和无序在默认表现下不同，ol内的li可以设置value代表该列表项的序号值
- dl/dt/dd
  MDN对此元素的定义是：*一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键-值对列表)。*
  因此最好能够使用在能够体现键值对的情况
- figure&figcaption
  `figure`元素是比较独立的，被主要引用的图片、插图、照片代码等，一般会有一个标题，即`figcaption`
- div
  最常用也是最滥用的元素，其本身无语义，可以和类名、id、title等结合，但是是最后考虑的选择。
  *尤其是涉及dom操作时，通过类名选择div需要遍历整个页面所有的div，性能上也会大量损耗*

##### 文本
- em/strong
  一般表示侧重点的强调，会因嵌套层数改变强调级别，一般渲染为斜体
- i
  可作为画外音等等杂项，建议与class、lang一同使用
- small
  不止作为小字使用，可以作为注意或声明使用
- cite
  作为引述的作品标题、文章论文等标题
- mark
  不常用，但可以作为与用户当前的行为相关的内容，如高亮显示搜索关键词

##### 嵌入内容
- img
  `img`要注意src和alt的使用，其中：
  - 有 src 且 alt 为空字符串，代表装饰用图
  - 有 src 且 alt 为非空字符串，图为文档内容的一部分
  - 有 src 且无 alt，图为内容一部分但无等价的文本内容可用

Spark1e

Category: all