2018-09-08笔面

cookie弊端

1)Cookie`数量和长度的限制。每个domain最多只能有20条cookie,每个cookie长度不能超过4KB,否则
会被截掉。在当今新的浏览器和客户端设备版本中,
支持 8192 字节的 Cookie 大小已愈发常见。

2)用户配置为禁用。有些用户禁用了浏览器或客户端设备接收 Cookie 的能力,因此限制了这一功能;

3)由于在HTTP请求中的cookie是明文传递的,潜在的安全风险,Cookie 可能会被篡改;

4)有些状态不可能保存在客户端;

5)cookie会被附加在每个HTTP请求中,所以无形中增加了流量。

6)cookie一般不可跨域使用;

7)没有封装好的setCookie和getCookie方法,需要开发者自省封装。

优点

极高的扩展性和可用性

1)通过良好的编程,控制保存在cookie中的session对象的大小;

2)通过加密和安全传输技术(SSL),减少cookie被破解的可能性;

3)在cookie中不存放敏感数据,即使被盗也不会有重大损失;

4)控制cookie的生命期,使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

web Storage

web Storage 是HTML 5引入的一个重要的功能,在前端开发的过程中会经常用到,
它可以在客户端本地存储数据,类似cookie,但其功能却比cookie强大
的多。cookie的大小只有4Kb左右(浏览器不同,大小也不同),
而web Storage的大小有5MB。其API提供的方法有以下几种:
setItem (key, value) ——  保存数据,以键值对的方式储存信息。

getItem (key) ——  获取数据,将键值传入,即可获取到对应的value值。

removeItem (key) ——  删除单个数据,根据键值移除对应的信息。

clear () ——  删除所有的数据

key (index) —— 获取某个索引的key

storage和cookie的区别

Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。
Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送
过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。
除此之外,Web Storage拥有setItem,getItem,removeItem,clear
等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。
但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范
的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生

sessionStorage和localStorage
localStorage的生命周期是永久性的。假若使用localStorage存储数据,即使关闭浏览器,也不会让数据消失,除非主动的去删除数据,使用的方法如下 所示。localStorage有length属性,可以查看其有多少条记录的数据。使用方法如下:

 
     var storage = null;
         if(window.localStorage){              //判断浏览器是否支持localStorage
            storage = window.localStorage;     
            storage.setItem("name", "Rick");    //调用setItem方法,存储数据
            alert(storage.getItem("name"));     //调用getItem方法,弹框显示 name 为 Rick
            storage.removeItem("name");     //调用removeItem方法,移除数据
            alert(storage.getItem("name"));   //调用getItem方法,弹框显示 name 为 null
 
         }

sessionStorage 的生命周期是在浏览器关闭前。也就是说,在整个浏览器未关闭前,其数据一直都是存在的。sessionStorage也有length属性,其基本的判断和使用方法和localStorage的使用是一致的。需要注意的有以下几点:

<1> 页面刷新不会消除数据

<2>只有在当前页面打开的链接,才可以访sessionStorage的数据

<3>使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据

http和tcp的区别
TCP就是单纯建立连接,不涉及任何我们需要请求的实际数据,简单的传输。http是用来收发数据,即实际应用上来的。

attribute和property的区别

property是DOM中的属性,是JavaScript里的对象;
attribute是HTML标签上的特性,它的值只能够是字符串;

Attribute就是DOM节点自带属性,例如我们在HTML中常用的id,class,src,title,alt等。
而Property则是这个DOM元素作为对象,其附加的属性或者内容,例如childNodes,firstChild等。 

property能够从attribute中得到同步;
attribute不会同步property上的值;
attribute和property之间的数据绑定是单向的,attribute->property;
更改property和attribute上的任意值,都会将更新反映到HTML页面中;

css选择器有哪些,优先级

1.标签选择器(如:body,div,p,ul,li)

2.类选择器(如:class="head",class="head_logo")

3.ID选择器(如:id="name",id="name_txt")

4.全局选择器(如:*号)

5.组合选择器(如:.head .head_logo,注意两选择器用空格键分开)

6.后代选择器 (如:#head .nav ul li 从父集到子孙集的选择器)

7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示

8.继承选择器(如:div p,注意两选择器用空格键分开)

9.伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)

10.字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含)

11.子选择器 (如:div>p ,带大于号>)

12.CSS 相邻兄弟选择器器 (如:h1+p,带加号+)
不同级别

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素内的样式
id选择器
类选择器
标签选择器
通配符选择器
浏览器自定义或继承
总结排序:!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

同一级别

同一级别中后写的会覆盖先写的样式

html5标签

1.header 页眉(网页(部分区域)的头部 顶部 导航区域等等),闭合标签;块元素;
默认的宽是:100%;高: 内容的高度;实质上,跟DIV标签,可以说是完全一样的特性; 

2.nav 导航链接部分;闭合标签;块元素;默认的宽是:100%;高: 内容的高度;
实质上,跟 DIV标签,可以说是完全一样的特性。 

3.section 标签定义网页中的区域(部分)。比如章节、页眉、页脚或文档中的其他部分。
闭合 标签;块元素;默认的宽是:100%;高: 内容的高度;
实质上,跟DIV标签,可以说是完全一样的 特性; 

4.footer 页脚(网页(部分区域)的底部|版权区域等等),闭合标签;块元素;
默认的宽是:100%;高: 内容的高度;实质上,跟DIV标签,可以说是完全一样的特性; 

5.article 内容是引用其他地方的。一个区域中的,另外一部分内容;闭合标签;
块元素;默认的宽是:100%;高: 内容的高度;实质上,跟DIV标签,可以说是完全一样的特性 

6.aside 跟 article 是一起使用;是辅助 article 区域的内容。
也可以理解为整个网页的 辅助区域;(最常见的京东的右侧的工具栏) 

7.hgroup 给标题分组,为标题或者子标题进行分组,通常与h1-h6元素组合使用。
如果文章中只有一个标题,则不使用hgroup。 
闭合标签;块元素;默认的宽是:100%;高:内容的高度;
实质上,跟DIV标签,可以说是完全一样的特性; 

8.figure 对多个元素进行组合。通常与figcaption联合使用。闭合标签;
块元素;默认的宽是:100%;高:内容的高度;实质上跟DIV标签,
可以说是完全一样的特性;figcaption 定义figure元素组的标题,
必须写在figure元素中。一个figure元素内最多只允许放置一个figcaption元素。
闭合标签;块元素;默认的宽是:100%;高:内容的高度;
实质上,跟DIV标签,可以说是完全一样的特性; 

9.audio 播放声音文件,比如音乐或其它音频流。可以在开始标签和
结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持
该标签的信息。闭合标签;行内元素;默认的宽:controls的宽度300px
;高:controls的高度32px;autoplay autoplay 如果出现该属性,
则音频在就绪后马上播放。controls controls 如果出现该属性,
则向用户显示控件,比如播放按钮。preload preload 如果出现该
属性,则音频在页面加载时进行加载,并预备播放。如果使用
 “autoplay”,则忽略该属性。src url 要播放的音频的 URL。 

10.video 播放视频文件,比如电影或其它视频流。可以在开始标签和
结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该
标签的信息。闭合标签;行内元素;默认的宽:300px 高:150px。
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height 设置视频播放器的高度。loop loop 如果出现该属性,
则当媒介文件完成播放后再次开始播放。preload preload 
如果出现该属性,则视频在页面加载时进行加载,并预备播放。
如果使用 “autoplay”,则忽略该属性。src 要播放的视频的 URL。
width 设置视频播放器的宽度。 

11.source为媒介元素(比如 video 和 audio)指定多个播放格式与编码,
浏览器会自动选择第一个可以识别的格式。非闭合标签,只有开始标签,
没有结束标签。source 行内元素,默认无宽度和高度。
media 定义媒介资源的类型,供浏览器决定是否下载。
src 媒介的 URL。type 定义播放器在音频流中的什么位置开始播放。
默认,音频从开头播放。 

12.canvas定义图形,比如图表和其他图像。 
闭合标签;行内元素;默认情况下,canvas创建的画布宽:300px;高:150px; 

13.datalist 定义可选数据的列表。与 input 元素配合使用,
就可以制作出输入值的下拉列表。 
闭合标签;行内元素;默认无宽度和高度。 

14.embed 定义嵌入的内容,比如插件。用来插入各种多媒体,
格式可以是MIDI、MP3等。 
非闭合标签,只有开始标签,没有结束标签。
行内元素;默认的宽:300px;高:150px。 

15.time 定义日期或时间,或者两者。闭合标签;
行内元素,默认情况下,宽:内容的宽度;高:内容的高度; 

16.address 为文档或 section 定义联系信息,比如:电子邮箱、
地址、电话、QQ、微信号等。 
闭合标签;块元素;默认的宽是:100%;高: 内容的高度;
实质上,跟DIV标签,可以说是完全一样的特性; 

17.map定义客户端的图像映射。图像映射是带有可点击区域的图像。 
闭合标签;行内元素;默认情况下,无宽度和高度; 

18.area area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。 
闭合标签,行内元素;只有结束标签,没有开始标签。默认情况下,无宽度和高度; 

19.mark定义页面中需要突出显示或高亮显示的内容,通常在引用原文时,
使用此元素,目的就是引起当前用户的注意。闭合标签;行内元素;
默认情况下,宽:内容的宽度;高:内容的高度; 

20.details 标签定义元素的细节,用户可进行查看,或通过点击进行隐藏。
(备注信息), 块元素 ;默认的宽是:100%;高: 内容的高度;
实质上,跟DIV标签,可以说是完全一样的特性; 
但是有一个动态的效果,点击可以显示(展开)内容,再点击可以隐藏(收起)内容; 


1-12 的标签一定要好好掌握; 多媒体(音乐、视频、图形)是结合 js 来做项目的。

html5新特性

HTML5 中的一些有趣的新特性: 
新的特殊内容元素,比如 article、footer、header、nav、section 

新的表单控件,比如 calendar、date、time、email、url、search 

用于媒介回放的 video 和 audio 元素 

用于绘画的` canvas `元素 

对本地离线存储的更好的支持(`localStorage`)

移除了哪些元素

纯表现的元素

  <basefont> 默认字体,不设置字体,以此渲染
  <font> 字体标签
  <center> 水平居中
  <u> 下划线
  <big> 大字体
  <strike> 中横线
  <tt> 文本等宽
框架集

  <frameset>
  <noframes>
  <frame>

WebSocket

// 初始化一个 WebSocket 对象
var ws = new WebSocket("ws://localhost:9998/echo");

// 建立 web socket 连接成功触发事件
ws.onopen = function () {
  // 使用 send() 方法发送数据
  ws.send("发送数据");
  alert("数据发送中...");
};

// 接收服务端数据时触发事件
ws.onmessage = function (evt) {
  var received_msg = evt.data;
  alert("数据已接收...");
};

// 断开 web socket 连接成功触发事件
ws.onclose = function () {
  alert("连接已关闭...");
};
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,421评论 1 45
  •   支持离线 Web 应用开发是 HTML5 的另一个重点。   所谓离线 Web 应用,就是在设备不能上网的情况...
    霜天晓阅读 1,020评论 0 2
  • 前端中高级工程师必备技能 本文旨在加深对前端知识点的理解,资料来源于网络。 一些开放性题目 position的值,...
    lwz4070阅读 167评论 0 1
  • 1.一些开放性题目 1.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势。 2.项目介绍...
    55lover阅读 632评论 0 6
  • 1. 缓存分类 服务器端缓存(CDN缓存); 客户端缓存(浏览器缓存); 2. 浏览器缓存 2.1. 强缓存 浏览...
    puxiaotaoc阅读 5,575评论 3 208