前端知识点总结

前端知识点总结

• 浏览器欢迎补充

• html欢迎补充

• css尽情期待

• javascript尽情期待

• vue尽情期待

• es6尽情期待

• typeScript尽情期待

1、浏览器

什么是Bom? Bom是浏览器对象。有哪些经常使用的Bom属性呢？

(1)location对象

location.href-- 返回或设置当前文档的URL
location.search -- 返回URL中的查询字符串部分。例如 http://www.dreamdu.com/dreamdu.php?id=5&name=dreamdu返回包括(?)后面的内容?id=5&name=dreamdu
location.hash -- 返回URL#后面的内容，若是没有#，返回空
location.host -- 返回URL中的域名部分，例如www.dreamdu.com
location.hostname -- 返回URL中的主域名部分，例如dreamdu.com
location.pathname -- 返回URL的域名后的部分。例如 http://www.dreamdu.com/xhtml/ 返回/xhtml/
location.port -- 返回URL中的端口部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回8080
location.protocol -- 返回URL中的协议部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回(//)前面的内容http:
location.assign -- 设置当前文档的URL
location.replace() -- 设置当前文档的URL，而且在history对象的地址列表中移除这个URL location.replace(url);
location.reload() -- 重载当前页面

(2)history对象

history.go() -- 前进或后退指定的页面数 history.go(num);
history.back() -- 后退一页
history.forward() -- 前进一页

(3)Navigator对象

navigator.userAgent -- 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
navigator.cookieEnabled -- 返回浏览器是否支持(启用)cookie

到此经常使用浏览器对象基本说完，欢迎补充
复制代码

Cookie、sessionStorage、localStorage的区别

• Cookie：cookie数据始终在同源的http请求中携带（即便不须要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，能够限制cookie只属于某个路径下,存储的大小很小只有4K左右。 （key：能够在浏览器和服务器端来回传递，存储容量小，只有大约4K左右）
• sessionStorage：仅在当前浏览器窗口关闭前有效，天然也就不可能持久保持，localStorage：始终有效，窗口或浏览器关闭也一直保存，所以用做持久数据；cookie只在设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭。（key：自己就是一个回话过程，关闭浏览器后消失，session为一个回话，当页面不一样即便是同一页面打开两次，也被视为同一次回话）
• localStorage：localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。（key：同源窗口都会共享，而且不会失效，无论窗口或者浏览器关闭与否都会始终生效）

cookie补充说明已经应用举例：

• 保存用户登陆状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不须要从新登陆了，如今不少论坛和社区都提供这样的功能。 cookie还能够设置过时时间，当超过期间期限后，cookie就会自动消失。所以，系统每每能够提示用户保持登陆状态的时间：常见选项有一个月、三个 月、一年等。

• 跟踪用户行为。例如一个天气预报网站，可以根据用户选择的地区显示当地的天气状况。若是每次都须要选择所在地是烦琐的，当利用了 cookie后就会显得很人性化了，系统可以记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气状况。由于一切都是在后 台完成，因此这样的页面就像为某个用户所定制的同样，使用起来很是方便

• 定制页面。若是网站提供了换肤或更换布局的功能，那么可使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然能够保存上一次访问的界面风格。

2、html

(1)对HTML语义化标签的理解

HTML5语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读以及爬虫的爬取和seo，好比nav表示导航条，相似的还有article、header、footer等等标签。

(2)iframe是什么？有什么缺点？

定义：iframe元素会建立包含另外一个文档的内联框架 提示：能够将提示文字放在之间，来提示某些不支持iframe的浏览器

缺点：

• 会阻塞主页面的onload事件
• 搜索引擎没法解读这种页面，不利于SEO
• iframe和主页面共享链接池，而浏览器对相同区域有限制因此会影响性能。