3.Quirks模式是什么?它和Standards模式有什么区别答案:从IE6开始,引入了Standards模式,标准模式中,浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。在IE6之前CSS还不够成熟,所以IE5等之前的浏览器对CSS的支持很差,IE6将对CSS提供更好的支持,然而这时的问题就来了,因为有很多页面是基于旧的布局方式写的,而如果IE6
4.div+css的布局较table布局有什么优点?改版的时候更方便只要改css文件。页面加载速度更快、结构化清晰、页面显示简洁。表现与结构相分离。易于优化(seo)搜索引擎更友好,排名更容易靠前。5.a:img的alt与title有何异同?b:strong与em的异同?答案:a:alt(alttext):为不能显示图像、窗体或applets的用户代理(UA),alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成tooltip显示)title(tooltip):该属性为设置该属性的元素提供建议性的信息。
b:strong:粗体强调标签,强调,表示内容的重要性em:斜体强调标签,更强烈强调,表示内容的强调点6.你能描述一下渐进增强和优雅降级之间的不同吗渐进增强progressiveenhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级gracefuldegradation:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。
现在产品经理看到IE6,7,8网页效果相对高版本现代浏览器少了很多圆角,阴影(CSS3),要求兼容(使用图片背景,放弃CSS3),你会如何说服他?
7.为什么利用多个域名来存储网站资源会更有效?CDN缓存更方便突破浏览器并发限制节约cookie带宽节约主域名的连接数,优化页面响应速度防止不必要的安全问题
8.请谈一下你对网页标准和标准制定机构重要性的理解。(无标准答案)网页标准和标准制定机构都是为了能让web发展的更‘健康’,开发者遵循统一的标准,降低开发难度,开发成本,SEO也会更好做,也不会因为滥用代码导致各种BUG、安全问题,最终提高网站易用性。
9.请描述一下cookies,sessionStorage和localStorage的区别?sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
12.知道什么是微格式吗?谈谈理解。在前端构建中应该考虑微格式吗?答案:微格式(Microformats)是一种让机器可读的语义化XHTML词汇的集合,是结构化数据的开放标准。是为特殊应用而制定的特殊格式。优点:将智能数据添加到网页上,让网站内容在搜索引擎结果界面可以显示额外的提示。(应用范例:豆瓣,有兴趣自行google)
13.在css/js代码上线之后开发人员经常会优化性能,从用户刷新网页开始,一次js请求一般情况下有哪些地方会有缓存处理?答案:dns缓存,cdn缓存,浏览器缓存,服务器缓存。
屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页.例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音.
PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页(通常是因为这些设备对CSS的支持较弱)使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页.
搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问.
你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为.SEO主要还是靠你网站的内容和外部链接的。
便于团队开发和维护W3C给我们定了一个很好的标准,在团队中大家都遵循这个标准,可以减少很多差异化的东西,方便开发和维护,提高开发效率,甚至实现模块化开发。
主要的互联网目录OpenDirectory自身不是搜索引擎,而是一个大型的网站目录,他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的,主要收录网站主页;搜索引擎是自动收集的,除了主页外还抓取大量的内容页面。
链接交换和链接广泛度(LinkPopularity)网页内容都是以超文本(Hypertext)的方式来互相链接的,网站之间也是如此。除了搜索引擎以外,人们也每天通过不同网站之间的链接来Surfing(“冲浪”)。其它网站到你的网站的链接越多,你也就会获得更多的访问量。更重要的是,你的网站的外部链接数越多,会被搜索引擎认为它的重要性越大,从而给你更高的排名。
合理的标签使用======================================
Css篇:
1.有哪项方式可以对一个DOM设置它的CSS样式?外部样式表,引入一个外部css文件内部样式表,将css代码放在
标签内部内联样式,将css样式直接定义在HTML元素内部2.CSS都有哪些选择器?派生选择器(用HTML标签申明)id选择器(用DOM的ID申明)类选择器(用一个样式类名申明)属性选择器(用DOM的属性申明,属于CSS2,IE6不支持,不常用,不知道就算了)除了前3种基本选择器,还有一些扩展选择器,包括后代选择器(利用空格间隔,比如div.a{})群组选择器(利用逗号间隔,比如p,div,#a{})CSS选择器的优先级是怎么样定义的?基本原则:一般而言,选择器越特殊,它的优先级越高。也就是选择器指向的越准确,它的优先级就越高。复杂的计算方法:用1表示派生选择器的优先级用10表示类选择器的优先级用100标示ID选择器的优先级div.test1.spanvar优先级1+10+10+1span#xxx.songsli优先级1+100+10+1#xxxli优先级100+1
看下列代码,
标签内的文字是什么颜色的?
答案:red。与样式定义在文件中的先后顺序有关,即是后面的覆盖前面的,与在
3.CSS中可以通过哪些属性定义,使得一个DOM元素不显示在浏览器可视范围内?最基本的:设置display属性为none,或者设置visibility属性为hidden技巧性:设置宽高为0,设置透明度为0,设置z-index位置在-1000
4.超链接访问过后hover样式就不出现的问题是什么?如何解决?答案:被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序:L-V-H-A(link,visited,hover,active)
5.什么是CssHack?ie6,7,8的hack分别是什么?答案:针对不同的浏览器写不同的CSScode的过程,就是CSShack。示例:#test{width:300px;height:300px;background-color:blue;/*firefox*/background-color:red\9;/*allie*/background-color:yellow\0;/*ie8*/+background-color:pink;/*ie7*/_background-color:orange;/*ie6*/}:root#test{background-color:purple\9;}/*ie9*/@mediaalland(min-width:0px){#test{background-color:black\0;}}/*opera*/@mediascreenand(-webkit-min-device-pixel-ratio:0){#test{background-color:gray;}}/*chromeandsafari*/}
6.请用Css写一个简单的幻灯片效果页面答案:知道是要用css3。使用animation动画实现一个简单的幻灯片效果。/**HTML**/div.ani
7.行内元素和块级元素的具体区别是什么?行内元素的padding和margin可设置吗?块级元素(block)特性:
总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;内联元素(inline)特性:和相邻的内联元素在同一行;宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变(也就是padding和margin的left和right是可以设置的),就是里面文字或图片的大小。
浏览器还有默认的天生inline-block元素(拥有内在尺寸,可设置高宽,但不会自动换行),有哪些?答案:、、
8.什么是外边距重叠?重叠的结果是什么?答案:外边距重叠就是margin-collapse。在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。折叠结果遵循下列计算规则:两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。两个外边距一正一负时,折叠结果是两者的相加的和。9.rgba()和opacity的透明效果有什么不同?答案:rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,而rgba()只作用于元素的颜色或其背景色。(设置rgba透明的元素的子元素不会继承透明效果!)
10.css中可以让文字在垂直和水平方向上重叠的两个属性是什么?答案:垂直方向:line-height水平方向:letter-spacing
关于letter-spacing的妙用知道有哪些么?答案:可以用于消除inline-block元素间的换行符空格间隙问题。
11.如何垂直居中一个浮动元素?//方法一:已知元素的高宽
#div1{background-color:#6699FF;width:200px;height:200px;
position:absolute;//父元素需要相对定位top:50%;left:50%;margin-top:-100px;//二分之一的height,widthmargin-left:-100px;}
//方法二:
#div1{width:200px;height:200px;background-color:#6699FF;
margin:auto;position:absolute;//父元素需要相对定位left:0;top:0;right:0;bottom:0;}如何垂直居中一个(用更简便的方法。)#container//
的容器设置如下{display:table-cell;text-align:center;vertical-align:middle;}12.px和em的区别。px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。浏览器的默认字体高都是16px。所以未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em。
13.描述一个"reset"的CSS文件并如何使用它。知道normalize.css吗?你了解他们的不同之处?重置样式非常多,凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢?原因是不同的浏览器对一些元素有不同的默认样式,如果你不处理,在不同的浏览器下会存在必要的风险,或者更有戏剧性的性发生。你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格,但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理,但又不扰乱其他的东西(如粗体的标题)。在这一方面,无法做每一个复位重置。它也确实有些超过一个重置,它处理了你永远都不用考虑的怪癖,像HTML的audio元素不一致或line-height不一致。
14.Sass、LESS是什么?大家为什么要使用他们?他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。例如Less是一种动态样式语言.将CSS赋予了动态语言的特性,如变量,继承,运算,函数.LESS既可以在客户端上运行(支持IE6+,Webkit,Firefox),也可一在服务端运行(借助Node.js)。
为什么要使用它们?结构清晰,便于扩展。可以方便地屏蔽浏览器私有语法差异。这个不用多说,封装对浏览器语法差异的重复处理,减少无意义的机械劳动。可以轻松实现多重继承。完全兼容CSS代码,可以方便地应用到老项目中。LESS只是在CSS语法上做了扩展,所以老的CSS代码也可以与LESS代码一同编译。15.display:none与visibility:hidden的区别是什么?display:隐藏对应的元素但不挤占该元素原来的空间。visibility:隐藏对应的元素并且挤占该元素原来的空间。即是,使用CSSdisplay:none属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在。
16.知道css有个content属性吗?有什么作用?有什么应用?答案:css的content属性专门应用在before/after伪元素上,用于来插入生成内容。最常见的应用是利用伪类清除浮动。//一种常见利用伪类清除浮动的代码.clearfix:after{content:".";//这里利用到了content属性display:block;height:0;visibility:hidden;clear:both;}
.clearfix{*zoom:1;}after伪元素通过content在元素的后面生成了内容为一个点的块级元素,再利用clear:both清除浮动。
知道css计数器(序列数字字符自动递增)吗?如何通过csscontent属性实现css计数器?答案:css计数器是通过设置counter-reset、counter-increment两个属性、及counter()/counters()一个方法配合after/before伪类实现。