1、对WEB标准以及W3C的理解和认识?
- 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率
- 使用外链css和js脚本,结构行为表现的分离
- 文件下载与页面速度更快,内容能被更多的用户所访问,内容能被更广泛的设备所访问
- 更少的代码和组价,容易维护,改版方便,不需要变动页面内容
- 提供打印版本而不需要复制内容、提高网站易用性。
2、xml和html有什么区别
- HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言
- 最主要的不同是:
- XHTML元素必须被正确地嵌套
- XHTML元素必须被关闭
- 标签名必须用小写
- XHTML文档必须拥有根元素
3、doctype(文档类型)的作用是什么?你知道多少种文档类型?
作用是:此标签可以告知浏览器文档使用哪种HTML或XHTML规范
此标签可声明三种DTD类型,分别表示严格版本、过渡版本以及基于框架的HTML文档
- HTML4.01规定了三种文档类型:Strict、Transition以及Frameset
- XHTML1.0 规定了三种XML文档类型:Strict、Transitional以及Frameset
- Standards(标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页
4、行内元素有哪些?块级元素有哪些?CSS的盒模型
- 行内元素:span、a、Img、input、select、b
- 块级元素:div、p、h1~h6、form、ul、li
- CSS盒模型:border、padding、margin
5、CSS引入方式有哪些?link和@import的区别
- CSS引入方式:内联式、行内式、外链式
- 区别是:同时加载
- 前者无兼容性、后者CSS2.1以下的浏览器不支持
- link支持使用JavaScript改变样式,后者不支持
6、CSS选择器有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
- CSS选择器:标签选择器、类选择器、ID选择器(组合选择器、相邻选择器(+))伪类选择器
- 继承不如指定
- 优先级:标签选择器<类选择器<ID选择器
- important优先级高
7、前端页面有哪三层构成,分别是什么?作用是什么?
- 结构层html、表现层css、行为层js
8、CSS的基本语句构成是?
- 选择器{属性名:属性值;属性名:属性值;}
9、你做的页面在哪些浏览器测试过?这些浏览器的内核是什么
- IE(ie内核)、谷歌(webkit内核)、火狐(Gecko)、opera(Presto)
10、写出几种IE6 BUG的解决方法
- float引起的双边距bug:使用display
- 使用float引起的3像素bug:使用display:inline
- 超链接hover点击之后失效:使用正确的书写顺序link visited hover active
- IE z-inde问题:给父级添加position:relative
- PNG透明:使用js代码改
- min-height最小高度 !important解决
- select在ie6下遮盖 使用iframe嵌套
- 为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden;zoom:0.09;line-height:1px;)
- IE6不支持!important
11、img标签上title与alt属性的区别是什么?
- alt当图片不显示时,用文字代替
- title当鼠标放在图片上时,显示文字说明
12、描述css reset的作用和用途
- reset重置浏览器的css默认属性,浏览器的品种不同,样式不同,然后重置,让他们统一
13、解析css sprites,如何使用
- css精灵(又叫雪碧图),是把一堆小图片整合到一张大的图片上,减少服务器对图片的请求数量
14、浏览器标准模式和怪异模式之间的区别是什么?
- 盒子模型、渲染模式不同
- 使用window.top.document.compatMode可显示为什么模式
15、你如何对网站的文件和资源进行优化?期待的解决方案包括:
- 文件合并
- 文件最小化/文件压缩
- 使用CDN托管
- 缓存的使用
16、请解释一下什么是"语义化HTML
- 语义化HTML就是:标题h1~h6,段落p,无序列表ul li,有序列表ol li,图片img,链接a等,对于搜索引擎的抓取有好处
语义化的好处:
- 去掉或样式丢失的时候,能让页面呈现清晰的结构
- 屏幕阅读器(如果访客有视障)会完全根据你的标记来"读"你的网页
- PDA、手机登设备可能无法像普通电脑的浏览器一样来渲染网页(通常是因为这些设备对CSS的支持较弱)
- 搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重
- 你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义化标记。
- 便于团队开发和维护
17、清除浮动的几种方式,各自的优缺点
- 使用空标签清除浮动clear:both(理论上能清除任何标签,,,增加无意义的标签)
- 使用overflow:auto(空标签元素清除浮动而不是增加无意代码的弊端,使用zoom:1用于兼容IE)
- 使用after伪元素清除浮动(用于非IE浏览器)
18、请说出三种减少页面加载时间的方法。(加载时间指感知的时间或者实际加载时间)
- 优化图片
- 图片格式的选择(GIF:提供的颜色较少,可用在一些对颜色要求不高的地方)
- 优化CSS(压缩合并css,如margin-top,margin-left...)
- 网址后加斜杠(如:www.campr.com/目录,会判断这个"目录是什么文件类型,或者是目录。")
- 标明高度和宽度(如果浏览器没有找到这两个参数,它需要一边下载图片,一边计算大小,如果图片很多,浏览器需要不断的调整页面,这不但影响速度,也影响浏览体验,当浏览器知道了高度和宽度参数后,即使图片暂时无法显示,页面上也会腾出图片的空位,然后继续加载后面的内容,从而使加载时间变快,浏览体验也更好)
- 减少http请求(合并文件,合并图片使用雪碧图)
19、讨论CSS hacks,条件引用或者其他
- <!--[if IE6]--><![end if]-->
- _margin IE6
- +margin IE7
- margin:0 auto\9 所有IE
- margin:\0 IE8
20、你用过媒体查询,或者针对移动端的布局/CSS吗?
- @media screen and (min-width:400px) and (max-width:700px){......}
- @media handheld and (min-width:20em),screen and (min-width:20em){......}
- 媒体查询,就是响应式布局,响应式布局框架:bootstrap、PureCSS等
21、解释下原型继承的原理
当查找一个对象的属性时,JavaScript会向上遍历原型链,直到找到给定名称的属性为止(大多数JavaScript的实现用_proto_属性来表示一个对象的原型链)
以下代码展示了JS引擎如何查找属性:
function getProperty(obj,prop){
if(obj.hasOwnProperty(prop)){
return obj[prop];
}else if(obj._proto_! == null){
return getProperty(obj._proto_,prop)
}else{
return undefined;
}
}
22、前端安全
CSRF:跨站请求伪造。攻击者盗用了你的身份,以你的名义发送恶意请求。他可以做到的事情包括:以你的名义发送邮件,发消息,盗取你的账号。甚至购买商品...造成的问题包括:个人隐私泄露以及财产安全。
原理:
登录受信任的网站A,并且在本地生成cookie,在不登录A网站的情况下,访问危险网站B
常见类型:
- 使用get更新请求资源,容易在B使用img标签造成攻击
- 前端虽然改成了post请求,但是B网站通过iframe等手段同样造成了攻击
防御机制:
- 验证码:用户每次提交都需要在表单中填写图片上一个随机字符串
- 添加一个隐藏的输入框:包含token,服务端验证是否匹配
- 使用HTTP refer头部进行判断,如果不是业务域名发起的HTTP请求,直接过滤。
XSS它的全名:Cross-sitescripting,为了和CSS层叠样式表区分所以取名XSS是一种网站应用程序的安全漏洞攻击,是代码注入的一种。它允许恶意用户将代码注入到网页上,这类攻击通常包含了HTML以及用户端脚本语言。
23、CMD VS AMD
CommonJS是服务器端模块的规范,Node.js采用了这个规范
- 根据CommonJS规范,一个单独的文件就是一个模块。每一个模块都是一个单独的作用域,也就是说,在该模块内部定义的变量,无法被其他模块读取,除非定义为globald对象的属性。
- CommonJS规范加载模块是同步的,也就是说,只要加载完成,才能执行后面的操作。
AMD规范则是非同步加载模块,允许指定回调函数。
- 由于Node.js主要用于服务器编程,模块文件一般都已经存在于本地硬盘,所以加载起来比较快,不用考虑非同步加载的方式,所以CommonJS规范比较适用。
- 但是,如果是浏览器环境,要从服务器端加载模块,这时就必须采用非同步模式,因此浏览器一般采用AMD规范。
来源:https://www.cnblogs.com/qijunjun/p/7324375.html