前端Html和Css面试题大自然的流风

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

看下列代码,

标签内的文字是什么颜色的?

123

答案: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元素(拥有内在尺寸,可设置高宽,但不会自动换行),有哪些?答案: