Konata9

查了 MDN，感觉比 `document.body.__proto__` 要少一点 https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes

在移动端做开发时，必须要搞清楚 `viewport` 这一设置。 `viewport` 就是视区窗口，也就是浏览器中显示网页的部分。PC 端上基本等于设备显示区域，但在移动端上 `viewport` 会超出设备的显示区域（即会有横向滚动条出现）。 设备默认的 `viewport` 在 980 - 1024 之间。 为了让移动端可以很好地显示页面，因此需要对 `viewport` 进行设置。相关的设置值如下： | 设置 | 解释 | | ------------- | ------------------------------------------------------------------ | | width...

`::` 和 `:` 是 CSS3 中为了区别伪类和伪元素所用的不同的写法。`::` 表示伪元素，目前两种写法都被兼容。 `::before`,`::after` 可以在一个 DOM 元素的前面和后面增加一个伪元素。可以用来清除浮动、为元素增加特殊效果（如前面有特殊符号等）。 `::before` 和 `::after` 默认添加的是 `inlne` 元素，通过 `content` 属性来设置展示的内容，并且必须要设置 `content` 属性。`content` 属性可以利用 `attr` 与元素的相关内容做联动。 详细设置和用法可以参考 [css 伪元素:before 和:after 用法详解](https://www.cnblogs.com/wonyun/p/5807191.html)

因为 HTML5 与 HTML4 基于的基准不同。HTML4 基于 SGML 因此需要除了 `DOCTYPE` 外还需要引入 DTD 来告诉浏览器用什么标准进行渲染。DTD 还分为标准模式、严格模式。如果什么都不写，就完全让浏览器自我发挥，会变成怪异模式。 HTML5 不基于 SGML，因此后面就不要跟 DTD，但是需要 `DOCTYPE` 来规范浏览器的渲染行为。 注：SGML 是通用标记语言的集合。其中有 HTML、XML，因此需要用 DTD 来指定使用那种规范。

```javascript // 利用 base64, 浏览器环境自带 btoa / atob 方法 // Node.js 需要引入相关库 const str = "abcdefg"; console.log(btoa(str)); console.log(atob(btoa(str))); // 凯撒密码 const encodeCaesar = ({str = "", padding = 3}) =>...

- 外层父元素使用 `overflow:hidden;` 属性触发 BFC，让内层的 `float` 不会影响外层的布局 - 使用 `clear: both;` 即 `clearfix` 类的方法，在浮动元素后面添加一个空的 `div`，使其 `clear:both;` 清除上层浮动元素带来的影响。缺点是会增加 DOM 元素；可以使用伪类 `::after` + `clear:both;`。 ```html // float: left 的元素 // clear: both...

HTML5 的离线存储 [HTML5 存储方式](https://segmentfault.com/a/1190000011516871) [HTML5 离线存储原理](https://segmentfault.com/a/1190000006984353) 离线存储是在 HTML 5 中创建 `cache manifest` 文件来实现 Web 应用的离线版本的。 离线存储有这么几个好处：**没有网络时可以浏览**、**加快资源的加载速度**、**减少服务器负载** 离线存储的相关配置在 `.appcache` 文件中。 通过配置 `CACHE MANIFEST`, `NETWORK`, `FALLBACK` 来控制需要被缓存的文件。 JavaScript 也暴露了 `applicationCache` API 让我们手动进行缓存的刷新。

CSS3 中规定伪类使用一个 `:` 来表示；伪元素则使用 `::` 来表示。 CSS3 中新增的伪元素有以下这些: - `:first-child / :last-child` 表示子元素结构关系的 - `:nth-child() / nth-last-child()` 用来控制奇数、偶数行的（控制表单奇数、偶数行的样式） - `:first-of-type / :last-of-type` 表示一组兄弟元素中其类型的第一个元素 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:first-of-type) - `:nth-of-type() / :nth-last-of-type()` 这个选择器匹配那些在相同兄弟节点中的位置与模式 an+b...

#### 利用 dispaly - disaplay: none; 页面不会渲染 - visibility: hidden; 页面会渲染只是不限显示 - opacity: 0; 看不见，但是会占据空间 #### 利用 position （absolute 的情况下） - left/right/top/bottom: 9999px/-9999px 让元素在视区外 - z-index: -9999 放到最底层，同一位置可以让其他元素把这个给遮掉

在 `input` 标签中，可以设置 `autocomplete="off"` 来关闭自动完成。 但这个属性在不同的浏览器上兼容并不好，因此需要配合 `type="newpassword"` 等其他属性来关闭自动完成。