前端面试集锦(一)

1、HTML总结

1、html和xhtml的区别

  • xhtml元素必须被正确地嵌套
  • xhtml元素必须被关闭
  • xhtml大小写敏感,标签名必须用小写字母
  • xhtml必须用根元素

2、html5中新标签

  • header nav section aside footer article hgroup figure

3、如果将html5看成一个开放平台,它的构建某事有哪些?

  • web storage api
  • 基于位置服务的LBS
  • 无插件音频和视频
  • 拖拽、from api、通信api及web work api

4、html5 中data-属性作用
答:设置我们需要的属性来存放数据,可以通过el.dataset.属性名(驼峰式)获取属性,可以通过类似于 .user[data-name = "page'']{ /* styles */ }

5、session,cookies,localstorage和sessionstorage的区别

  • cookies用来在客户端存储用户信息,session用来在服务端储存用户数据,session比cookies更安全,用户验证等重要信息一般存放在session中,但cookies也可以通过加密来提高安全性,同时可以设置httponly为true来使js无法操作cookies,防止xss(跨站脚本攻击)
  • cookies如果不主动删除将永久保存,最大为4kb,session则只存在于会话期间,当session增多会增加服务端压力
  • session支持各种类型的对象, cookies只保存字符串
  • session的实现基于cookies的支持,session依赖于sessionID实现,而sessionID存放在cookies,因此禁用了cookies之后session也会失效,但可以用过在url中传递sessionID
  • cookise默认会传入到服务端,而localstroage和sessionStroage不会,
  • localstroage和sessionStroage都是html5提供的webstroage api,都是在浏览器端保存数据,其中sessionStroage引入了浏览器窗口的概念,只有同源同窗口的数据才能共享,刷星和跳入新窗口都存在,而独立的打开两个同一个页面,也不能共享,关闭浏览器即清除sessionStroage,
  • localstroage和sessionStroage提供了setItem、getItem、removeItem和clear方法来操作数据,而cookies需要自己封装setCookis和getCookies方法,同时getItem获取到的是数据副本,不能再用赋值方式改变数据的值

2、CSS总结

1、@import和link的区别

  • link是html提供的元素标签,@import只能加载css,必须放在style标签中,link还可以加载RSS
  • @import在加载dom之后加载,会出现闪烁
  • @import可以继续import文件
    2、css3新属性介绍
  • 圆角 border-radius(x, y, z, w)依次为 左上角 右上角 右下角 左下角;如果只有两个值左上角/右下角 、 右上角和左下角
  • 阴影效果 box-shadow: 颜色 水平距离 垂直距离 模糊量
  • 自定义字体 font-face
  • 线性渐变 linear-gradient background:linear-gradient(start positon, from color, to color)
  • 放射渐变 radial-gradient background: radial-gradient(position, circle, from, to)
  • rgba(color, color, color, opacity)
  • 转换和转变
    1、缩放 scale(A, B); A处于0~1时缩小元素, 1正常,>1:增加元素尺寸;B可使用负数,出现镜像效果(更真实)。
    2、旋转 rotate(deg)
    3、倾斜 skew(水平(10px), 垂直(10px))
    4、移动 translate(水平, 垂直)
    5、transfrom 和 transition
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,905评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,140评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,791评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,483评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,476评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,516评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,905评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,560评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,778评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,338评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,925评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2 342

推荐阅读更多精彩内容

  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 2,324评论 0 25
  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 7,096评论 2 19
  • HTML HTML5标签 媒体查询head部分写法 Doctype作用? 严格模式与混杂模式如何区分?它们有何意义...
    Mayo_阅读 636评论 0 8
  • 常见试题 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-h...
    他大舅啊阅读 2,416评论 1 5
  • 1. 浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层、表示层、行为层分别是:HTML、CSS、Ja...
    程序猿人王小贱阅读 1,866评论 1 11