一.html 常见面试题

1.存储方式与传输方式

• 1.indexDB:h5 的本地存储库，存储空间可以在 250m 以上，把一些数据存储到浏览器中，没有网络，浏览器可以从这里读取数据，离线缓存用
• 2.cookie:通过浏览器记录信息确认用户的身份，最大 4kb，这也限制了传输的数据，请求的性能会受到影响
  • 属性
    • value:如果用于保存用户登录状态，应该将该值加密，不能使用明文的用户标识
    • http-only:不能通过 js 访问 cookie，减少 xss 攻击
    • secure:只能在协议为 https 的请求中携带
    • sname-site:规定浏览器不能在跨域请求中携带 cookie,减少 csrf 攻击
  • 优点：极高的扩展性和可用性
    • 1.通过良好的编程，控制保存在 cookie 中的 session 对象的大小
    • 2.通过加密和安全传输技术（ssl）,减少 cookie 被破解的可能性
    • 3.只在 cookie 中存放不敏感数据，即使被盗也不会有重大损失
    • 4.控制 cookie 的生命周期，使之不会永远有效，偷盗者很可能拿到一个过期的 cookie
  • 缺点
    • 1.cookie 数量和长度的限制。每个 domain 最多只能有 20 条 cookie,每个 cookie 长度不能超过 4kb，否则会被截掉
    • 2.安全性问题。如果 cookie 被人拦截了，那人就可以取得所有的 session 信息。即使加密也于事无补，因为拦截者并不需要知道 cookie 的意义，他只要原样转发 cookie 就可以达到目的了
    • 3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器，如果我们把这个计数器保存在客户端，那么它起不到任何作用。
• 3.Session:服务器端使用的一种记录客户状态的机制（session_id 存在 set_cookie 发送到客户端，保存为 cookie）
• 4.localStorage:h5 的本地存储，在谷歌浏览器中为 5mb，数据永久保存在客户端
• 5.sessionStorage：h5 的本地存储，在谷歌浏览器中为 5mb，数据在绘画时保存在客户端
• 数据有效期不同
  • cookie 在设置（服务器设置）有效期内有效，不管窗口和浏览器关闭
  • sessionStorage 只在当前浏览器窗口有效，关闭即销毁（临时存储）
  • localStorage 始终有效，除非手动删除
• sessionStorage 和 localStorage 区别
  • 1.sessionStorage 用本地存储一个会话中的数据，这些数据只有在用一个会话的页面中才能被访问（也就是说在第一次通信过程中）
  • 2.localStorage 用于持久化的本地存储，除非主动删除数据，否则不会过期
• indexDB:除非被清理否则一直存在

2.token cookie session 特点

• 1.token 就是令牌，比如你授权（登录）一个程序时，他就是个依据，判断你是否已经授权该软件（最好的身份认证，安全性好，而且时唯一的）用户身份的验证方式
  • 基于 token 的身份验证：（token:uid 用户唯一的身份识别+time 当前时间戳+sign 签名）
    • 1.用户通过用户名和密码发送请求
    • 2.服务端验证
    • 3.服务端返回一个带签名的 token 给客户端
    • 4.客户端存储 token,并且每次用于发送请求
    • 5.服务器验证 token 并且返回数据 每一次请求都需要 token
• 2.cookie 是卸载客户端的一个 txt 文件，里面包括登录信息之类的，这样你下次登录某个网站，就会调用 cookie 自动登录用户名服务器生成，发送到浏览器 浏览器保存 下次请求再次发送给服务器（存放登录信息）
• 3.session 是一类用来客户端和服务器之间保存状态的解决方案，会话完成被销毁（代表就是服务器和客户端的一次会话过程）cookie 中存放着 sessionID，请求会发送这个 id，session 因为 request 对象而产生
• cookie 和 session 的区别
  • 1.cookie 数据存放在客户的浏览器上，session 数据存放在服务器上
  • 2.cookie 不是很安全，别人可以分析存放本地的 cookie 并进行 cookie 欺骗，考虑安全应当使用 session
  • 3.session 会在一定时间内保存在服务器上，当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用 cookie
  • 4.单个 cookie 保存的数据不能超过 4k,很多浏览器都限制一个站点最多保存 20 个 cookie
• session 和 token 的区别
  • 1.session 认证只是简单的 user 信息存储 session 里面，sessionID 不可预测，一种认证手段，不能共享到其他的网站和第三方 app
  • 2.token 是 oAuth Token，目的就是让某 app 有权访问某用户的信息，token 是唯一的；token 不能转移到其他的 app，也不能转到其他用户上（使用 app）
  • 3.session 的状态是存在服务端的，客户端只存在 session id，token 状态是存在客户端的
• cookie 的弊端有哪些
  • 优点：保存客户端数据，分担了服务器存储的负担
  • 1.数量和长度的限制，每个特定的域名下最多生成 20 个 cookie(chorme 和 safari 没有限制)
  • 2.安全性问题

3.href 和 src 有什么区别

• href：当浏览器遇到 href 时，会并行的下载资源，不会阻塞页面解析，例如我们使用link引入 css，浏览器会并行下载 css 而不会阻塞页面解析，因此我们在引入 css 时建议使用link而不是@import
• src：当浏览器遇到 src 时，会暂停页面解析，直到该资源下载或执行完毕，这也是 scrip 标签之所以放底部的原因

4.meta 有哪些属性，作用是什么

meta 标签用于描述网页的元信息，如网站的作者、描述、关键词，meta 通过 name=xxxxxx 和 content=xxx 的形式来定义信息，常用的设置如下：

• charset：定义 html 文档的字符集

<meta charset="UTF-8" />

• http_equiv:可用于模拟 http 请求头，可设置过期时间、缓存、刷新
  • expires，指定过期时间
  • progma，设置 no-cache 可以禁止缓存
  • refresh，定时刷新
  • set-cookie，可以设置 cookie
  • X-UA-Compatible，使用浏览器版本
  • apple-mobile-web-app-status-bar-style，针对 WebApp 全屏模式，隐藏状态栏/设置状态栏颜色

<meta http-equiv="expires" content="Web, 20 Jun 2019 22:33:00 GMT" />

• viewport:视口，用于控制页面宽高及缩放比例
  • width/height,宽高，默认宽度 980px
  • initial-scale,初始缩放比例，1 ～ 10
  • maximum-scale/minimum-scale，允许用户缩放的最大/小比例
  • user-scalable，用户是否可以缩放（yes/no）

<meta
  name="viewport"
  content="width=device-width, initial-scale=1;maximum-scale=1"
/>

• meta name="keyword" 告诉搜索引擎网页的关键词
• meta name="description"告诉搜索引擎站点的内容
• meta name="author" content="meta" 站点制作者

5.块元素和行内元素

• 块元素（div、dl、ul、form、h1）
  • 总是在新行上开始
  • 高度，行高以及外边距都可控制
  • 宽度缺省是他的容器的 100%，除非设定一个宽度
  • 它可以容纳内联元素和其他块元素
• 行内元素(a、span、img、b、br)
  • 和其他元素都在一行上
  • 高、行高及外边距和内边距不可改变
  • 宽度就是它的文字或图片的宽度，不可改变
  • 内联元素只能容纳文本或者其他内联元素