前端冲刺1.4 HTML:Content-type Etag JS:原型链终点-null 可选链和空值合并运算符 CSS:position

HTML:Content-type Etag JS:原型链终点-null 可选链和空值合并运算符 CSS:position

Content-type

定义：
MediaType，即是Internet Media Type，互联网媒体类型；也叫做MIME类型，
在Http协议消息头中，使用Content-Type来表示具体请求中的媒体类型信息。
在请求中 ，客户端告诉服务器实际发送的数据类型。
格式：
Content-Type：type/subtype;parameter
type：主类型，任意的字符串，如text，如果是*号代表所有；
subtype：子类型，任意的字符串，如html，如果是号代表所有，用“/”与主类型隔开；
parameter：可选参数，如charset，boundary等。

例如：

Content-Type: text/html;
Content-Type: application/json;charset:utf-8;
常见的媒体格式类型如下：
text/html： HTML格式
text/plain：纯文本格式
text/xml：  XML格式
image/gif：gif图片格式
image/jpeg：jpg图片格式
image/png：png图片格式
以application开头的媒体格式类型：
application/xhtml+xml：XHTML格式
application/xml： XML数据格式
application/atom+xml：Atom XML聚合格式
application/json： JSON数据格式
application/pdf：pdf格式
application/msword：Word文档格式
application/octet-stream：二进制流数据（如常见的文件下载）
application/x-www-form-urlencoded：<form encType=””>中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）

Etag

etag字段的作用
含义
ETag全称Entity Tag，中文名为实体标签，是万维网协议HTTP的一部分。
ETag是HTTP协议提供的若干机制中的一种Web缓存验证机制，并且允许客户端进行缓存协商。
如果资源的内容没有发生改变，Web服务器就不需要发送一个完整的响应。
ETag是一个不透明的标识符，由Web服务器根据URL上的资源的特定版本而指定。
如果那个URL上的资源内容改变，一个新的不一样的ETag就会被分配。
用这种方法使用ETag即类似于指纹，并且他们能够被快速地被比较，以确定两个版本的资源是否相同。
ETag的比较只对同一个URL有意义——不同URL上的资源的ETag值可能相同也可能不同，从他们的ETag的比较中无从推断。
用法
在典型用法中，当一个URL被请求，Web服务器会返回资源和其相应的ETag值，状态码为200，它会被放置在HTTP的“ETag”字段中：
ETag: “686897696a7c876b7e”
然后，客户端可以决定是否缓存这个资源和它的ETag。
以后，如果客户端想再次请求相同的URL，将会发送一个包含已保存的ETag和“If-None-Match”字段的请求。
If-None-Match: “686897696a7c876b7e”
客户端请求之后，服务器可能会比较客户端的ETag和当前版本资源的ETag。
如果ETag值匹配，这就意味着资源没有改变，服务器便会发送回一个极短的响应，包含HTTP “304 未修改”的状态。304状态告诉客户端，它的缓存版本是最新的，并应该使用它。
作用
Etag 主要为了解决 Last-Modified 无法解决的一些问题。
一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新GET;
某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，If-Modified-Since能检查到的粒度是s级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒)
某些服务器不能精确的得到文件的最后修改时间；
为此，HTTP/1.1引入了 Etag(Entity Tags).Etag仅仅是一个和文件相关的标记，可以是一个版本标记,比如说v1.0.0或者说"2e681a-6-5d044840"这么一串看起来很神秘的编码。但是HTTP/1.1标准并没有规定Etag的内容是什么或者说要怎么实现，唯一规定的是Etag需要放在""内。

JS

null instanceof Object
null === Object.prototype.proto
了解一下可选链(?.)与空值合并（??）

console.log(null instanceof Object);

• 本质上Null和Object不是一个数据类型，null值并不是以Object为原型创建出来的。
• 所以null instanceof Object是false。
• 但从这里也可以看到，null确实是javascript中用来表示空引用的一个特殊值。
• 使得它不是instanceof Object，而typeof null是“object”。在语义上也是可以理解的。

console.log(null === Object.prototype.proto);

• 原型链的终点是null
• 一方面，你没法访问null的属性，所以起到了终止原型链的作用;另-方面,
• null在某种意义上也是一种对象, 即空对象，因为null 开始就是为表示一个"空的对象存在的。
• 这样一来,就不会违反 “原型链上只能有对象” 的约定。

了解内容
可选链 ?. 是一种 访问嵌套对象属性的防错误方法 。
即使中间的属性不存在，也不会出现错误。
如果可选链 ?. 前面部分是 undefined 或者 null，它会停止运算并返回 undefined。
语法：
obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)

可选链 ?. 语法总结
可选链 ?. 语法有三种形式：

1. obj?.prop —— 如果 obj 存在则返回 obj.prop，否则返回 undefined。
2. obj?.[prop] —— 如果 obj 存在则返回 obj[prop]，否则返回 undefined。
3. obj?.method() —— 如果 obj 存在则调用 obj.method()，否则返回 undefined。

正如我们所看到的，这些语法形式用起来都很简单直接。?. 检查左边部分是否为 null/undefined
如果不是则继续运算。 ?. 链使我们能够安全地访问嵌套属性。

空值合并运算符（nullish coalescing operator）的写法为两个问号 ??。

• a ?? b 的结果是：
• 如果 a 是已定义的，则结果为 a，
• 如果 a 不是已定义的，则结果为 b。
  如果第一个参数不是 null/undefined，则 ?? 返回第一个参数。否则，返回第二个参数。
  空值合并运算符并不是什么全新的东西。它只是一种获得两者中的第一个“已定义的”值的不错的语法。
  我们可以使用我们已知的运算符重写 result = a ?? b，像这样：
  result = (a !== null && a !== undefined) ? a : b;

position 有哪些属性，分别是什么作用（用于什么场景）

static
所有元素在默认的情况下position属性均为static。
其用法为：在改变了元素的position属性后可以将元素重置为static让其回归到页面默认的文档流中。
需要注意的是z-index属性在position为static的情况下无效。

relative
俗称的相对定位，重点在于对相对的理解。我们都知道每个元素在页面的文档流中会“占用”一个位置，这个位置可以理解为默认位置，而相对定位就是将元素偏离元素的默认位置，但文档流中依然保持着原有的默认位置，并没有脱离文档流，只是视觉上发生的偏移。

relative的特点
仍在文档流之中，并按照文档流中的顺序进行排列。
参照物为元素本身的位置。
设置relative最常用的目的为改变元素层级和设置为绝对定位的参照物。

absolute
俗称的绝对定位，绝对定位是相对而言的，怎么理解呢？应用了position: absolute的元素会通过相对于最近的非 static 定位的祖先元素的偏移，来确定元素位置。如果其祖先元素都没有设置过非 static 定位的属性时，则该元素最终将以 html 元素进行位置偏移。

absolute的特点
默认宽度为内容宽度
脱离文档流
参照物为第一个定位祖先或根元素（ 元素）
fixed
俗称的固定定位。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。fixed和absolute有很多共同点：
1.会改变行内元素的呈现模式，使display值变更为block。
2.会让元素脱离普通流，不占据空间。
3.默认会覆盖到非定位元素上。
fixed与absolute最大的区别在于：absolute的参照物是可以被设置的，而fixed的参照物固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。

fixed的特点
默认宽度为内容宽度
脱离文档流
参照物为视窗