积累的知识点
2009 年一直工作到现在开发和日常学习中得到的经验，已经被淘汰不值得一提的例如 一些 table frame 就不提了 就不会再提起了
WEB 标准以及 W3C 标准
标签闭合、标签⼩写、不乱嵌套、使⽤外链 CSS 和 JS 、结构⾏为表现的分离。
xhtml 和 html
功能上的差别 主要是
XHTML可兼容各⼤浏览器、⼿机以 ，并且浏览器也能快速正确地编译⽹⻚。书写习惯的差别
XHTML元素必须被正确地嵌套，闭合，区分⼤⼩写，⽂档必须拥有根元素。
Doctype
<!DOCTYPE> 声明位于⽂档中的最前⾯，处于 <html> 标签之前。告知浏览器的解析器， ⽤什么⽂档类型 规范来解析这个⽂档。
HTML5 不基于 SGML ，因此不需要对 DTD 进⾏引⽤，但是需要 doctype 来规范浏览器的⾏为。
⽽ HTML4.01 基于 SGML ,所以需要对 DTD 进⾏引⽤，才能告知浏览器⽂档所使⽤的⽂档类型。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
viewport
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimu
// width 设置viewport宽度，为⼀个正整数，或字符串‘device-width’
// device-width 设备宽度
// height 设置viewport⾼度，⼀般设置了宽度，会⾃动解析出⾼度，可以不⽤设置
// initial-scale 默认缩放⽐例（初始缩放⽐例），为⼀个数字，可以带⼩数
// minimum-scale 允许⽤户最⼩缩放⽐例，为⼀个数字，可以带⼩数
// maximum-scale 允许⽤户最⼤缩放⽐例，为⼀个数字，可以带⼩数
// user-scalable 是否允许⼿动缩放
怎样处理 移动端
1px被 渲染成2px问题。局部处理
- mate 标签中的 viewport 属性 ， initial-scale 设置为 1；
- rem 按照设计稿标准⾛，外加利⽤ transfrome 的 scale(0.5) 缩⼩⼀倍即可；
全局处理
- mate 标签中的 viewport 属性 ， initial-scale 设置为 0.5；
- rem 按照设计稿标准⾛即可
src 与 href
src ⽤于替换当前元素。
href ⽤于在当前⽂档和引⽤资源之间确⽴联系。
src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应⽤到⽂档内，例如 JS 脚本，
img 图⽚和 frame 等元素
<script src="js.js"></script> 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，图⽚和框架等元素也如此，类似于将所指向资源嵌⼊当前标签内。
这也是为什么将 JS 脚本放在底部⽽不是头部。
href是Hypertext Reference的缩写，指向⽹络资源所在位置，建⽴和当前元素（锚点）或当前⽂档（链接）之间的链接，如果我们在⽂档中添加。<link href="style.css" rel="stylesheet" />那么浏览器会识别该⽂档为CSS⽂件，就会并⾏下载资源并且不会停⽌对当前⽂档的处理。这也是为什么建议使⽤link⽅式来加载CSS，⽽不是使⽤@import⽅式。
img 的 srcset 的作⽤
可以设计响应式图⽚，我们可以使⽤两个新的属性 srcset 和 sizes 来提供更多额外的资源图像和提示，帮助浏览器选择 正确的⼀个资源。
srcset 定义了我们允许浏览器选择的图像集，以及每个图像的⼤⼩
sizes 定义了⼀组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图⽚尺⼨是最佳选择。
所以，有了这些属性，浏览器会：
- 查看设备宽度
- 检查 sizes 列表中哪个媒体条件是第⼀个为真
- 查看给予该媒体查询的槽⼤⼩
- 加载 srcset 列表中引⽤的最接近所选的槽⼤⼩的图像 srcset 提供了根据屏幕条件选取图⽚的能⼒
<img
src="clock-demo-thumb-200.png"
alt="Clock"
srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
sizes="(min-width: 600px) 200px, 50vw"
/>
<picture> 元素通过包含零或多个 <source> 元素和⼀个 <img> 元素来为不同的显示/设备场景提供图像版本。浏览器 会选择最匹配的⼦ <source> 元素，如果没有匹配的，就选择 <img> 元素的 src 属性中的 URL。
然后，所选图像呈现 在 <img> 元素占据的空间中。picture 同样可以通过不同设备来匹配不同的图像资源。
<picture>
<source
srcset="/media/examples/surfer-240-200.jpg"
media="(min-width: 800px)"
/>
<img src="/media/examples/painted-hand-298-332.jpg" />
</picture>
严格模式 与 混杂模式
- 严格模式的排版和
JS运作模式是以该浏览器⽀持的最⾼标准运⾏。 - 混杂模式，⻚⾯以宽松的向后兼容的⽅式显示。模拟⽼式浏览器的⾏为以防⽌站点⽆法⼯作。
DOCTYPE不存在或格式不正确会导致⽂档以混杂模式呈现。
⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元素和块级元素有什么区别？
- ⾏内元素有：
abspanimginputselectstrong - 块级元素有：
divulollidldtddh1~h6p - 空元素：
<br><hr><img><input><link><meta> - ⾏内元素不可以设置宽⾼，不独占⼀⾏
- 块级元素可以设置宽⾼，独占⼀⾏
HTML 全局属性（global attribute）有哪些
- class :为元素设置类标识
- data-* : 为元素增加⾃定义属性
- draggable : 设置元素是否可拖拽
- id : 元素
id，⽂档内唯⼀ - lang : 元素内容的的语⾔
- style : ⾏内
CSS样式 - title : 元素相关的建议信息
Canvas 和 SVG
svg绘制出来的每⼀个图形的元素都是独⽴的DOM节点，能够⽅便的绑定事件或⽤来修改。canvas输出的是⼀整幅画布。svg输出的图形是⽮量图形，后期可以修改参数来⾃由放⼤缩⼩，不会失真和锯⻮。⽽canvas输出标量画布，就像⼀张图⽚⼀样，放⼤会失真或者锯⻮。
前端需要注意哪些 SEO
- 合理的
title、description、keywords：搜索对着三项的权重逐个减⼩，title值强调重点即可，重要关键词出现不要超过 2 次，⽽且要靠前，不同⻚⾯title要有所不 同；description把⻚⾯内容⾼度概括，⻓度合适，不可过分堆砌关键词，不同⻚⾯description有所不同；keywords列举出重要关键词即可。 - 语义化的
HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解⽹⻚。 - 重要内容
HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓。 - 取⻓度有限制，保证重要内容⼀定会被抓取。
- 重要内容不要⽤
js输出：爬⾍不会执⾏js获取内容。 - 少⽤
iframe：搜索引擎不会抓取iframe中的内容。 - ⾮装饰性图⽚必须加
alt。 - 提⾼⽹站速度：⽹站速度是搜索引擎排序的⼀个重要指标。
<img> 的 title 和 alt 有什么区别
- 通常当⿏标滑动到元素上的时候显示
alt是<img>的特有属性，是图⽚内容的等价描述，⽤于图⽚⽆法加载时显示、读屏器阅读图⽚。可提图⽚⾼可访问性，除了纯装饰图⽚外都必须设置有意义的值，搜索引擎会 重点分析。
html5 有哪些新特性
HTML5现在已经不是SGML（标准通用标记语言）的⼦集，主要是关于图像，位置，存储，多任务等功能的增加- 绘画
canvas - ⽤于媒介回放的
video和audio元素 - 本地离线存储
localStorage⻓期存储数据，浏览器关闭后数据不丢失 sessionStorage的数据在浏览器关闭后⾃动删除- 语意化更好的内容元素，⽐如
article、footer、header、nav、section - 表单控件，
calendar、date、time、email、url、search - 新的技术
webworker、websocket、Geolocation
- 绘画
移除的元素：
- 纯表现的元素：
basefont、big、center、font、s、strike、tt、u - 对可⽤性产⽣负⾯影响的元素：
frame、frameset、noframes
- 纯表现的元素：
⽀持 HTML5 新标签：
IE8/IE7/IE6⽀持通过document.createElement⽅法产⽣的标签- 可以利⽤这⼀特性让这些浏览器⽀持
HTML5新标签 - 浏览器⽀持新标签后，还需要添加标签默认的样式
当然也可以直接使⽤成熟的框架、⽐如 html5shim
cookies，sessionStorage，Web SQL，IndexedDB 和 localStorage
cookie是⽹站为了标示⽤户身份⽽储存在⽤户本地终端（Client Side）上的数据（通常经过加密）cookie数据始终在同源的HTTP请求中携带（即使不需要），记会在浏览器和服务器间来回传递sessionStorage和localStorage不会⾃动把数据发给服务器，仅在本地保存WebSQL：2010年被W3C废弃的本地数据库数据存储⽅案，但是主流浏览器（⽕狐除外）都已经有了相关的实现，WebSQL类似于 SQLite，是真正意义上的关系型数据库，⽤sql进⾏操作，当我们⽤JavaScript时要进⾏转换，较为繁琐。IndexedDB： 是被正式纳⼊ HTML5 标准的数据库储存⽅案，它是NoSQL数据库，⽤键值对进⾏储存，可以进⾏快 速读取操作，⾮常适合Wen场景，同时⽤JavaScript进⾏操作会⾮常⽅便。
- 本地持久化最佳方案
npm i localforage
yarn add localforage
pnpm add localforage
- 本地持久化最佳方案
npm install rxdb rxjs --save
yarn add rxdb rxjs
pnpm add rxdb rxjs
- 本地持久化最佳方案
npm i @nozbe/watermelondb
yarn add @nozbe/watermelondb
pnpm add @nozbe/watermelondb
npm i -D @babel/plugin-proposal-decorators
npm i -D @babel/plugin-proposal-class-properties
npm i -D @babel/plugin-transform-runtime
yarn add -D @babel/plugin-proposal-decorators
yarn add -D @babel/plugin-proposal-class-properties
yarn add -D @babel/plugin-transform-runtime
pnpm add -D @babel/plugin-proposal-decorators
pnpm add -D @babel/plugin-proposal-class-properties
pnpm add -D @babel/plugin-transform-runtime
{
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }],
[
"@babel/plugin-transform-runtime",
{
"helpers": true,
"regenerator": true
}
]
]
}
存储⼤⼩：
- `cookie` 数据⼤⼩不能超过 `4k`
- `sessionStorage` 和 `localStorage` 虽然也有存储⼤⼩的限制，但⽐ `cookie` ⼤得多，可以达到 `5M` 或更⼤有期时间：
localStorage存储持久数据，浏览器关闭后数据不丢失除⾮主动删除数据sessionStorage数据在当前浏览器窗⼝关闭后⾃动删除cookie设置的cookie过期时间之前⼀直有效，即使窗⼝或浏览器关闭