前端一些常见的基础知识
-
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。 1. 绘画 canvas; 2. 用于媒介回放的 video 和 audio 元素; 3. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失; 4. sessionStorage 的数据在浏览器关闭后自动删除; 5. 语意化更好的内容元素，比如 article、footer、header、nav、section; 6. 表单控件，calendar、date、time、email、url、search; 7. 新的技术webworker, websocket, Geolocation; - HTML5 语义化特性。
1.html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析; 2.即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的; 3.搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO; 4.使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。 - session,localStorage,sessionStorage的区别。
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。 cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。 sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。 存储大小： cookie数据大小不能超过4k。 sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。 有期时间： localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； sessionStorage 数据在当前浏览器窗口关闭后自动删除。 cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭 - 水平垂直居中
第一种方案：
div { position: absolute; /* 相对定位或绝对定位均可 */ width:500px; height:300px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: pink; }
第二种方案：
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container div {
width: 100px;
height: 100px;
background-color: pink;
}
- 前端需要的一些SEO
- 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可。
- 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
- 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取。
- 重要内容不要用js输出：爬虫不会执行js获取内容
- 少用iframe：搜索引擎不会抓取iframe中的内容
- 提高网站速度：网站速度是搜索引擎排序的一个重要指标
- (*)网站性能优化
a.减少http请求：合并css文件。
b.将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量
c.减少DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询
d.将样式表放到页面顶部,不使用CSS表达式
e.将脚本放到页面底部,将javascript和css从外部引入,压缩javascript和css,减少DOM访问
f.优化图片：根据实际颜色需要选择色深、压缩,优化css精灵
