前端基础知识

[HTML && CSS]

1.Doctype严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?

严格模式:使用此类型的网页,浏览器解析将相对严格,不允许使用任何表现样式的标识和属性,比如在元素中直接使用background-color背景色属性。

混杂模式:浏览器对XHTML的解析较为宽松。允许使用4.01中的标签,但必须符合XHTML的语法。

2:行内元素有哪些?块级元素有哪些?CSS的盒模型?

行内元素:span,a,var ,em,input,img,img,textarea,var,em,strong,select,

块级标签:div,p,h1-h3,ul,ol,dl,li,dd,dt,table,td,tr,

CSS的盒模型:CSS布局中的每一个元素,在浏览器的解析中,都被当做一个盒状物。

3.CSS引入的方式有哪些? link和@import的区别是?

CSS引入的方式

在html文档的head部分加入:

在html文档的head部分直接写入css文档。

直接在html标签里写入对这个标签的css控制

测试信息

link和@import的区别是link写在html页面中,@import写在CSS页面中

4.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?

CSS选择符: 类选择器 、 标签名选择器、 ID选择器 、 后代选择器(派生选择器)、 群组选择器

可以继承: 类选择器 、 标签名选择器、 后代选择器(派生选择器)、群组选择器

优先级算法:

标签内直接定义:1000

ID选择器:100

类选择器 :10

标签名选择器:1

内联和important中,important优先级高

5:前端页面有哪三层构成,分别是什么?作用是什么?

结构层;主要指DOM节点;HTML/XHTML

样式层;主要是指页面渲染;CSS

脚本层:主要指页面动画效果;JS/AS

6:css的基本语句构成是?

选择符、属性、值

8:你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些?怎么会出现?解决方法是什么?

IE6、7、8、FF、Opear、Safari、Chrome、Maxthon

Trident:Windows 下的 IE 浏览器使用的内核代号。除 IE 外,众多的 IE Shell(如 Maxthon )都使用这个内核。

Gecko:Mozilla Firefox 浏览器使用的内核代号。

Presto:Opera 浏览器使用的内核代号,这是目前公认网页浏览速度最快的浏览器内核。

KHTML/WebCore: Konqueror/Safari 浏览器使用的内核代号。

经常遇到的浏览器兼容问题:

1.在有的浏览器中,默认字体大小为12px,所以在设字体大小的时候,最小设为12px,如果在做的过程中,发现字体小于12,可直接作为图片使用

2.a标签对里不能嵌套a标签对

3.若给a标签内的内容样式加上样式,需要设置display:block;(在IE中如果设置宽高会自动变成块,在FF中则不会),但如果设置了float属性,就不需要设置display:block。

4.ul,ol在FF默认情况下,有list-style-type样式和padding值,dl在IE和FF默认情况下,有padding值,所以应该事先声明ul,li,ol,dl,dd,dd{margin:0;padding:0}。

5.作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应

6.关于手形光标. cursor: pointer. 而hand 只适用于 IE.

7.css布局中的居中问题:在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“margin-right: auto;margin-left: auto; ”需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,只要在每个拆出的div里定义margin-right: auto;margin-left: auto; 就可以了。

8.浮动ie产生的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离,这时需要设置display:inline; //使浮动忽略}

9.如何居中一个浮动元素?

对其设置margin:x auto;

10.有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况!

有,HTML5的是目前正在为未来的HTML标准的主要修订的发展。其前任一样,4.01和XHTML 1.1的HTML,HTML5的是一个结构和提交万维网内容的标准。新标准结合了诸如视频播放,拖动和放下以前曾在第三方浏览器插件依赖例如Adobe Flash,微软的Silverlight的功能,和谷歌齿轮。

12:如果让你来制作一个访问量很高的大型网站,你会如何来管理所有CSS文件、JS与图片?

把所有的CSS文件都放入一个样式表中,通过把所有的脚本放到一个文件中来减少HTTP请求的方法。js文件也采用同样的方法。把所有的背景图像都放到一个图片文件中,然后通过CSS的background-image和background-position属性来显示图片的不同部分。

14:你对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?

前端界面工程师:1. 与交互设计师、视觉设计师协作,根据设计图完成页面制作。 2. 维护及优化网站前端性能。

前景: 长期以来,国内前端开发在整个软件开发行业内占得比重较小,发展较晚。网站也多倾向于赢利最大化而轻视用户体验。前后端比例悬殊大。近几年来,随着 以用户为中心 的思想普及发展。前端开发呈现出强劲的发展态势,前端开发人员在项目中的重要性日益突出。前端开发人员呈现出严重的人员短缺现象。

[Javascript]

1:js是什么,js和html 的开发如何结合?

js是一种基于对象和事件驱动,并具有安全性的脚本语言。

可以html的三个地方编写js脚本语言:一是在网页文件的标签对中直接编写脚本程序代码;二是将脚本程序代码放置在一个单独的文件中,在网页文件中引用这个脚本程序语言;三是将脚本程序代码作为某个元素的事件属性值或超链接的href属性值。

div{margin: 0;padding: 0;border:1px red solid;}

2.怎样添加、移除、移动、复制、创建和查找节点

添加:append

删除:remove

移动:

复制:

创建:create

查找:

3.怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别

4.面向对象编程:b怎么继承a

5.看看下面alert的结果是什么

view sourceprint?1.function b(x, y, a) {

.arguments[2] = 10;

.alert(a);

}

b(1, 2, 3);

如果函数体改成下面,结果又会是什么?

a = 10;

alert(arguments[2] );

6.请编写一个JavaScript函数 parseQueryString,它的用途是把URL参数解析为一个对象

var obj = parseQueryString(url);

alert(obj.key0) // 输出0

7.ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?

8.什么是闭包?下面这个ul,如何点击每一列的时候alert其index?

这是第一条这是第二条这是第三条

闭包是可以包含自由(未绑定)变量的代码块;这些变量不是在这个代码块或者任何全局上下文中定义的,而是在定义代码块的环境中定义。

9.最近看的一篇Javascript的文章是?

10.常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?

最常用的库:jquery-1.4.2.min.js

常用的前端开发工具:firebug、photoshop、editplus、取色器、色板、eclipse

11.说说YSlow(可以详细一点)

yslow是一个工具,也可以理解成是一个插件,是基于Mozilla Firefox上firebug插件的一个插件。它的出现的主要目的就是检测我们的页面性能。它让用户可以就近取得所需的内容,解决网络拥挤的状况,提高用户访问网站的响应速度;其次,yahoo在ETags配置上也有独特之处,声明过期,就是说,用户从服务器取数据的时候,如果文件变化了,给他反馈新的文件,如果文件没有变化,只需告诉客户端没有变化即可,不必再把文件取回来,这样就节省了大量的网络带宽和资源。另外,只要将那些在加载过程中要执行的脚本放到底部,就可以实现最大的下载并行。

小说网对其评价:(a) 从样式表着手,避免CSS表达式。CSS表达式需要很多资源,有时甚至会造成页面假死。(b) 缓存一下不常修改的文件,并开启 GZIP压缩,减少网络传输时间(c) 减少DNS查找。YSlow认为一个页面上2个以内的域名比较合理。有些网站挂了不少统计代码,或者广告代码。统计拖累用户速度、广告影响用户视觉。(d) 避免重定向(跳转),我们在给链接地址的时候,一般会把链接地址写成 http://xxx.cn/xxx 或者 http://xxx.cn/xxx/ ,有区别吗?有!服务器如果接收到的URL是http://xxx.cn/xxx,它会自动重定向到http://xxx.cn/xxx/,虽然进入的都 是同一个页面,但是前者比后者多走了一步,重定向,显然多多少少浪费了一点时间。

Google 对其评价:多数人可能认为GOOGLE没什么值得借鉴的,毕竟整站就那么几行代码。

但是这几行代码,每天要承受过亿的用户访问量,在如此大的压力下,运行流畅,有很大一个因素取决于Minify JS。通过查看它的源代码可以发现,google不仅将JS进行了压缩,连页面代码中也没有不必要的空格和符号,使用了最短最简洁的变量名。联系到开发方 面,建议大家采用yuicompressor,在调试时使用便于开发的模式,调试完成后直接压缩并发布。让用户得到最快捷的用户体验。

你可能感兴趣的:(前端基础知识)