doctype(⽂档类型)
告知浏览器的解析器⽤什么⽂档标准解析这个⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript 脚本的解析
- 标准模式(standards mode)：⻚⾯按照 HTML 与 CSS 的定义渲染
- 怪异模式(quirks mode)模式： 会模拟更旧的浏览器的⾏为
- 近乎标准(almost standards)模式：会实施了⼀种表单元格尺⼨的怪异⾏为（与IE7之前的单元格布局⽅式⼀致），除此之外符合标准定义
HTML语义化
语义化从html代码来展示页面的结构，语义化的优点：
- 标签语义化有助于搭建良好的HTML结构，有助于搜索引擎建立索引和爬取
- 有利于不同设备的解析，
- 有利于搭建清晰的代码结构，有助于团队开发维护
H5新增标签
- ==header== 头部、页眉
- ==footer== 底部、页脚
- ==hgroup==
- ==nav== 导航区域
- ==aside== 主要内容的附属信息部分
- ==section== 文档中的“节”或“段”
- ==article== 代表一个在文档，页面或者网站中自成一体的内容
cookies，sessionStorage 和 localStorage 的区别
sessionStorage 和 localStorage
- 两者存储空间一般都在5M左右，sessionStorage在会话结束时会主动清除，localstorage则不会，需手动清除
- 两者都有同源策略限制，跨域无法访问，sessionStorage有同标签页限制
- 数据仅在客户端存储，不参与和服务器通信
- 都是key value形式进行存储，value必须为字符串，如不是则自动转换成字符串，value如果是对象，需转换成JSON字符串
- 操作方法一直，setItem(key, value)增/改、removeItem(key)删、getItem(key)查、xxxStorage.clear()清空
cookies
- 存储大小为4k，一个站点最多20个cookies
- 会通过http请求参与服务端的通信
- cookie可以设定会话时间，如不设置，则默认浏览器窗口关闭清除
- Cookie设置中有个HttpOnly参数，前端浏览器使用document.cookie是读取不到HttpOnly类型的Cookie的
项目经验
- 小程序跳转到一个页面，保存之后goback，但无法传参，可以利用本地存储来处理
DOM事件
事件处理程序
- HTML事件处理程序 - 通过HTML标签属性，如
- DOM0事件处理程序 - 将事件处理放入js总，如document.getElementById("#btn").onclick = function(){...}
- DOM1事件处理成 - 采用addEventListenter绑定事件，相同方法会覆盖
事件流机制
即元素从页面接收事件的顺序，也即事件在页面的传播顺序
事件捕获和事件冒泡
- addEventListener的第三个参数，当为true时，捕获，false时，冒泡
- ==事件捕获==：捕获阶段事件是由上向下依次触发
- ==冒泡阶段==：冒泡阶段事件是由下向上依次触发
- 项目经验：上传组件上方的浮层，可以利用冒泡实现重新上传功能
事件对象
标准的Event对象主要有6个：
- bubbles 布尔值，表示事件是否是冒泡类型
- cancelable 布尔值，表示事件是否可以取消默认动作
- currentTarget 当前目标元素，即添加当前事件处理程序的元素
- target 实际目标元素，即实际触发事件的元素
- type 返回当前事件的名称
- eventPhase 事件传播的当前阶段，1表示捕获阶段
currentTarget VS target
- ==target==: 在事件的目标阶段，指向被单击的对象
- ==currentTarget==: 在事件流捕获、目标及冒泡阶段，只有在目标阶段，两者相同，指向当前事件的活动对象(一般为父级)
标准Event对象的方法主要有以下几个
- preventDefault 通知浏览器不要执行该事件的默认动作，如阻止默认跳转、表单提交等标签默认行为
2.stopPropagation 冒泡阶段下，阻止事件继续向上冒泡
事件委托
事件委托其实就是利用冒泡事件机制，针对多子元素绑定事件的处理方式，采用父级绑定，利用target获取到子元素并响应事件
优雅降级和渐进增强概述
- ==优雅降级==是一开始针对高版本浏览器构建完整功能，然后针对低版本浏览器进行兼容
- ==渐进增强==是一开始针对低版本浏览器构建，保证功能，然后在针对高级浏览器追加效果达到更好的用户体验
SEO优化(搜索引擎优化)
- 合理设置title、description、keywords
- HTML语义化，如H1可以放置网站重点内容
- meta:robots 标签，====
- canoncial 和 alternate 标签
- 提升完全相同或高度相似的网页的权重
- 针对750px的访问另一个网址，适用于移动端跳转
- robots.txt
- sitemap
iframe有那些缺点
- iframe会阻塞主页面的onload事件
- 相同域iframe和主页面共享http连接池，多个相同域的iframe会阻塞加载
- 解决方案：主页面加载完再去动态生成iframe
- iframe对seo不友好
iframe跨域通信
postMessage
quoteWindow.postmessage(data, origin, [transfer])
- quoteWindow 数据接收方，常用为父级主页面，window.parent
- data 需要发送的数据，它将会被结构化克隆算法序列化
- origin 表示哪些窗口可以接收，*表示不受限制，URL地址表示只有该URL地址能接收事件
- transfer 可选参数，高级用法，是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权
接收方
window.addEventListener('message',e=>{
// 有三个重要属性
// origin 表示发送消息的窗口源
// data 表示发送消息的数据
// source 表示对发送消息窗口的引用，可以用此来向发送消息的窗口返回数据
})
onload和domcontentloaded
- onload 当页面 DOM 结构中的 js、css、图片，以及 js 异步加载的 js、css 、图片都加载完成之后，才会触发 load 事件
- DOMContentLoaded 事件在 html文档加载完毕，并且 html 所引用的内联 js、以及外链 js 的同步代码都执行完毕后触发
- 页面中引用的js 代码如果有异步加载的 js、css、图片，是会影响 load 事件触发的。
- video、audio、flash 不会影响 load 事件触发
HTML文档的加载与页面的首次渲染
- 浏览器首选下载该地址所对应的html页面
- 浏览器解析html页面的DOM结构
- 开启下载线程对文档中的所有资源按优先级排序下载
- 主线程继续解析文档，到达head节点，head里的外部资源无非是外链样式表和外链js
- 解析到body
- 只有DOM元素
- DOM数构建完，页面首次渲染
- 有DOM元素、外链js
- 当解析到外链js的时候，该js尚未下载到本地，则js之前的DOM会被渲染到页面上，同时js会阻止后面的DOM的构建，即后面的DOM节点并不会添加到文档的DOM树中，所以，js执行完之前，我们在页面上看不到该js后面的DOM元素
- 有DOM元素、外链js
- 外链css不会影响css后面的DOM构建，但是会阻碍渲染，简单点说，外链css加载完之前，页面还是白屏
- 有DOM元素、外链js、外链css
- 外链js和外链css的顺序会影响页面渲染，当body中js之前的外链css未加载完之前，页面是不会被渲染
- 当body中js之前的外链css加载完之后，js之前的DOM树和css合并渲染树，页面渲染出该js之前的DOM结构
- 文档解析完毕，页面渲染，但是页面引用的所有js同步代码执行完毕，厨房DOMContentLoaded事件
- html文档中的图片资源、js代码中有的异步加载的css、js、图片资源都加载完毕之后，load事件触发
src和href的区别
img的srcset和sizes
script标签中defer和async的区别
- defer 浏览器指示脚本在文档被解析后执行，script被异步加载后并不会立即执行，而是等待文档被解析完毕后执行
- defer只适用于外联脚本，如果script标签没有指定src属性，只是内联脚本，不要使用defer
- 如果有多个声明了defer的脚本，则会按顺序下载和执行
- defer脚本会在DOMContentLoaded和load事件之前执行
- async 同样是异步加载脚本，区别是脚本加载完毕后立即执行，这导致async属性下的脚本是乱序的，对于script又先后依赖关系的情况，并不适用
- 只适用于外联脚本，这一点和defer一致
- 如果有多个声明了async的脚本，其下载和执行也是异步的，不能确保彼此的先后顺序
- async会在load事件之前执行，但并不能确保与DOMContentLoaded的执行先后顺序
data-属性
HTML的数据属性，用于将数据存储在标准的HTML元素中作为额外信息，可以通过js访问，xxx.getAttribute("data-xxxx")
meta标签
name
name属性主要用于描述网页，比如网页的关键词、叙述等，与之对应的属性值为content，content中的内容是对name填入类型的具体描述，便于搜索引擎抓取。
| 参数 | 描述 |
|---|---|
| keywords(关键词) | 网页关键词， |
| description(网站内容的描述) | |
| viewport(移动端的窗口) | meta name="viewport" content="width=device-width, initial-scale=1"> |
| robots(定义搜索引擎爬虫的索引方式)) | robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。 |
| author(作者) | |
| copyright(版权) | |
| revisit-after(搜索引擎爬虫重访时间) | 如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。 |
| renderer(双核浏览器渲染方式) | //默认webkit内核 //默认IE兼容模式 //默认IE标准模式 |
http-equiv
- content-Type(设定网页字符集)
//旧的HTML，不推荐
//HTML5设定网页字符集的方式，推荐使用UTF-8```
- X-UA-Compatible(浏览器采取何种版本渲染当前页面)
//指定IE和Chrome使用最新版本渲染当前页面
- cache-control(指定请求和响应遵循的缓存机制)
- 用法1
- no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
- no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
- public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果
- private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）
- maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒
- 用法2
- 用于禁止当前页面在移动端浏览时，被百度自动转码。虽然百度的本意是好的，但是转码效果很多时候却不尽人意。所以可以在head中加入例子中的那句话，就可以避免百度自动转码了
- expires(网页到期时间) 用于设定网页的到期时间，过期后网页必须到服务器上重新传输
- refresh(自动刷新并指向某页面) - 网页将在设定的时间内，自动刷新并调向设定的网址
//意思是2秒后跳转向我的博客
- Set-Cookie(cookie设定) - 如果网页过期。那么这个网页存在本地的cookies也会被自动删除
//格式
//具体范例
img的srcset和sizes
H5中img有2个新属性，srcset、sizes，主要作用：
- 控制响应式图片，根据屏幕大小来选择显示不同图片
- 根据屏幕的不同(视网膜屏还是普通屏)，展示不同质量的图片，合理控制下载资源
srcset
- 格式一：图片源地址 空格 图片像素宽度[, 图片源地址 空格 图片像素宽度, ...]，如
srcset="1.jpg 580w, 2.png 618w"
千万注意：描述图片的像素宽度是用'w'单位，且一定要是图片的真实像素宽度，如果私自改动，那么会影响浏览器对图片的选择！
表示图片1.jpg的像素宽度为580px，图片2.png的像素宽度为618px，两个图片源之间用逗号隔开
- 格式二：图片源地址 空格 屏幕像素密度[, 图片源地址 空格 屏幕像素密度, ...]，如
srcset="1.jpg 1x, 2.png 2x"
表示图片1.jpg为DPR为1时下显示的图片；2.png为DPR为2时显示的图片，如果没有更大的DPR设置的图片源，那么当大于当前设置的DPR最高值时，会采用当前设置的最大DPR的图片源。如这里如果屏幕DPR为3，那么还是会用2.png。
sizes
只有当设置了srcset，且单位为w时，sizes的设置才会起效。
srcset中设置的图片像素宽度（'w'的值），组成了相应的半开半闭区间(a, b]。 图片的显示宽度（sizes规定的值）看落在哪个区间内，取区间中最大值对应的图片。若没有最大值（如∞），则取上个区间最大值。
上面设置图片要显示成300px（sizes里的值），在srcset里的几个临界值中形成了(0, 229px]、(229px, 618px]、(618px, 1000px]、(1000px, ∞]。300px落在了(229px, 618px]中，取最大值618，因此最终选择的图片就是2.png
sizes的语法结构：
[媒体查询 空格 ]图片显示宽度[, [媒体查询 空格 ]图片显示宽], ..., 其余条件宽度值]
sizes="(max-width: 500px) 400px, (max-width: 900px) 700px, 1200px"
在屏幕小于等于500px情况下，图片显示成400px宽；在屏幕小于等于900px情况下，图片显示成700px宽；其余情况显示成1200px宽。
sizes里的媒体查询条件顺序是很重要的，只要满足了越靠前的某个条件，那么后面的条件会被忽略的
如果sizes属性没有值，或者在有媒体条件下，其余条件宽度没有设值，那么默认是100vw
DPR的影响
srcset里的'w'符号，是代表的是图像的宽度像素，是个物理像素；sizes里的114px是表示逻辑像素！在DPR不为1时，要转化一下像素值才能去区间里比较，套用上述规则，如在DPR=2时，把114px转化为物理像素，即114px * 2 = 228px，用228px去(0, 229px]、(229px, 618px]、(618px, ∞]里做比较，落在了(0, 229px]中，取229px对应的3.jpg
哪⼀个标签能起到跟srcset相似作⽤
元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的⼦
元素的src属性中的URL。然后，所选图像呈现在
元素占据的空间中
html5和html4区别
-
内容类型不变
- HTML5的文件扩展符（html或.htm）与内容类型（text/html）保持不变。
DOCTYPE声明变化
HTML4中需要指明是HTML的哪个版本，HTML5不需要，只使用即可。-
指定字符编码变化
- HTML4：
- HTML5:
-
可以省略元素的标记
- HTML5中很多元素标记可以省略
-
具有boolean值的属性调整
- 不指定属性值、属性名设定为属性值、字符串设为空时表示属性值为true
- 不写该属性表示属性值为false
-
新增的结构元素
- section、artucle、aside、header、hgroup、footer、nav、figure
-
新增的其他元素
- video、audio、canvas
-
新增的input元素的类型
- email、url、number、range、DatePickers