admin 管理员组

文章数量: 1184232


2024年4月19日发(作者：linux命令打开火狐浏览器)

1，让一个input的背景颜色变成红色

1

2，div的高宽等于浏览器可见区域的高宽，浏览器滚动，div始终覆盖浏览器的整个可

见区域

思路：

(1)先放置一个div1，浮动：position:absolute;top:0px;left:0px;

(2)再放置一个div2，浮动：

position:absolute;top:0px;left:0px;width:100%;height:100%;

(3)在div2中放置一个div3，令其高度超过浏览器高度，使div2产生滚动条

(4)对html,body进行样式设置：width:100%;height:100%;overflow:hidden->

不让浏览器产生滚动条，避免页面出现两个滚动条

(5)编写JavaScript，另div2的高度等于页面可见高度，宽度等于页面可见宽度，注意，

在计算完可见高度height和可见宽度width后，要对这两个值做处理，可见宽度-div2的滚动

条的宽度，滚动条的宽度我这里假设是20px

这样题目基本就完成了，不过浏览器的兼容性还不是很好。

贴出代码：

01

href="/TR/html4/%22">/TR/html4/loose.

02

03

04

05

前端试题(html3/4)

06

11

12

13

14

15

16

17

18

19

20

38

39

3，IE、FF下面CSS的解释区别

（1） 让页面元素居中

ff{margin-left:0px;margin-right:0px;width:***}

ie上面的设置+text-align:center

（2） ff：不支持滤镜

ie：支持滤镜

（3） ff：支持!important

ie支持*，ie6支持_

（4） min-width,min-height

FF支持，IE不支持，IE可以用css expression来替代

（5） Css Expression

FF不支持，IE支持

（6） cursor：hand

IE下可以显示手指状，FF下不行

（7） UL的默认padding和margin

IE下ul默认有margin，FF下ul默认有padding

（8） FORM的默认margin

IE下FORM有默认margin，FF下margin默认为0

4，一个定宽元素在浏览器（IE6，IE7，Firefox）中横向居中对齐的布局，请写出主

要的HTML标签及CSS

思路：

IE6/7：text-align:center

Firefox：margin:0 auto(margin-top和margin-bottom也可以为其他数字，关键是

margin-left,margin-right为auto)

贴出代码：

01

href="/TR/html4/">/TR/html4/

02

03

04

05

让页面元素居中（兼容各个浏览器）

06

10

11

12

13

this div will be centerd!

14

5，CSS中margin和padding的区别

margin是元素的外边框，是元素边框和相邻元素的距离

Padding是元素的内边框，是元素边框和子元素的距离

6，最后一个问题是，如何制作一个combo选项，就是可以输入可以下拉菜单选择。

思路：

（1）布局select和input，让input覆盖select，除了select的下拉图标，以方便select

选择

（2）编写JS，为select添加onchange事件，onchange时将input的value置成select

选中的指

贴出代码

01

02

03

04 可输入的下拉框

05

10

11

12

13

14

20

21

22

29

7，中alt和tittle的区别

alt：图片显示不出来了就提示alt

title：鼠标划过图片显示的提示

8，用css、html编写一个两列布局的网页，要求右侧宽度为200px，左侧自动扩展。

01

"/TR/xhtml1/DTD/">

02

03

04

05

双列布局，右侧定宽

06

11

12

13

14

15

16

9，解释

mentById(“ElementID”).ze=”1.5em”

em是相对长度单位，相当于当前对象内文本的字体尺寸，如果当前行内文本的字体尺寸

未被指定，则相对于浏览器的默认字体尺寸。

该语句将id为ElementID的元素的字体设置为当前对象内文本的字体尺寸的1.5倍

10，Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 行内

元素有哪些？块级元素有哪些？CSS的盒模型？

DOCTYPE是文档类型，用来说明使用的HTML或者XHTML是什么版本，其中的DTD

叫文档类型定义，里面包含了文档规则，浏览器根据定义的DTD来解析页面的标识并展现出来

DOCTYPE有两种用途：一个可以进行页面的有效性验证，另一个可以区分浏览器使用严

格模式还是混杂模式来解析CSS。

严格模式和混杂模式是浏览器解析CSS的两种模式，目前使用的大部分浏览器对这两种模

式都支持，但是IE5只支持混杂模式。

可那个过DOCTYPE声明来判断哪种模式被触发

（1） 没有DOCTYPE声明的网页采用混杂模式解析

（2） 对使用DOCTYPE声明的网页视不同浏览器进行解析

（3） 对于浏览器不能识别的DOCTYPE声明，浏览器采用严格模式解析

（4） 在ie6下，如果在DOCTYPE声明之前有一个xml声明比如

，采用混杂模式解析，在IE7，IE8中这

条规则不生效。

(5) 在ie下，如果DOCTYPE之前有任何字符，都会导致它进入混杂模式，如：

区分这两种模式可以理解浏览器解析CSS的区别，主要是在盒模式的解释上。

常见的块级元素有：DIV,FORM,TABLE,P,PRE,H1~H6,DL,OL,UL等

常见的内联元素：SPAN,A,STRONG,EM,LABEL,INPUT,SELECT,TEXTAREA,IMG,BR

等

CSS盒模型用于描述为一个HTML元素形成的矩形盒子，盒模型还涉及元素的外边距，内边距，

边框和内容，具体来讲最里面的内容是元素内容，直接包围元素内容的是内边距，包围内边距的

是边框，包围边框的是外边距。内边距，外边距，边框默认为0。

11，CSS引入的方式有哪些? link和@import的区别?

引入css的方式有下面四种

（1） 使用style属性

（2） 使用style标签

（3） 使用link标签

（4） 使用@import引入

Link和@import区别：

（1） link属于XHTML标签，@import是CSS提供的一种方式。Link除了加载CSS

外，还可以做很多事情，如定义RSS，rel连接属性等；@import只能加载CSS

（2） 加载顺序不同，当页面被加载的时候，link加载的CSS随之加载，而@import引

用的CSS会等到页面完全下载完之后才会加载

（3） 兼容性差别，由于@import是CSS2.1提出的，所以老的浏览器不支持，IE系列

的浏览器IE5以上才能识别，而link没有这个问题

使用DOM控制样式的差别，使用JavaScript控制DOM去改变样式的时候，只能操作link，

@import不可以被DOM操作。

12，如何居中一个浮动元素?

一个浮动元素里面包含的元素可以水平居中，原理如下：

让浮动元素left相对于父元素container右移50%，浮动元素left的子元素left-child

相对于left左移50%就可以实现left-child相对于container水平居中

垂直居中类似，不过操作的不是left而是top

贴出代码：

01

"/TR/html4/">

02

03

04

05

让浮动元素居中

06

14

15

16

17

这是一个浮动的元素

18

19

20

13，HTML5和CSS3的了解情况

有所了解

HTML5和CSS3分别是新推出的HTML和CSS规范，前世是XHTML2和CSS2，目前

还在草案阶段，不过得到了Apple，Opera，Mozilla，Google，Microsoft不同程度的支持，

也开发出了不少基于他们的应用。

HTML5相对于原来的HTML规范有一些变化：

（1）DOCTYPE更简洁

（2）新增了一些语义化标签，如article,header,footer,dialog等

（3）新增了一些高级标签，如,

CSS3相对于CSS2也新增了不少功能

（1） 选择器更加丰富

（2） 支持为元素设置阴影

（3） 无需图片能提供圆角

14，你怎么来实现下面这个设计图

（1） 切图

（2） 布局，采用两栏布局，分别左浮动

（3） 编写css代码

贴出代码：

01

02

03

04

05 品致页面制作

06

22

23

24

25

26

27

28

29

30

品•致

31

第11期

32

33

34

35

36

37

38

    39

  • 老虎伍兹为何被女人“吃掉”？

    • 40

  • 41

  • 你必须告诉一声的九件事

    • 42

  • 43

  • 男人，被时尚抛弃的一群？

    • 44

  • 45

  • 30天牛奶养生让你焕发青春肌肤

    • 46

  • 47

  • 你是否曾经关注过你的心脏？

    • 48

  • 49

50

51

52

53

54

15，css 中id和class如何定义,哪个定义的优先级别高?

id：#***，***为HTML中定义的id属性

class:.***，***为HTML中定义的class属性

id比class的优先级高

16，用html实现如下表格(不如嵌套实用表格)

三行三列,其中第一行第一列和第二行第一列合并; 第二行第二列和第二行第三列合并(现

场画表)

使用表格嵌套，源码如下：

01

href="/TR/html4/">/TR/html4/

02

03

04

05

品致页面制作

06

07

08

09

10

11

22

23

24

25

26

27

28

1

12

13

14

15

16

17

18

19

20

2 3
4

21

5 6 7

29

30

运行结果如下：

17，web标准网站有那些优点

（1） Web标准网站结构和布局分离，使网站的访问和维护更加容易

（2） Web标准网站结构，布局以及页面访问都标准化，使网站能在更多的web标准设

备中访问，兼容性更好

（3） Web标准网站语义化更好，语义化的XHTML不仅对用户友好，对搜索引擎也友好。

以下为Web前端开发笔试题集锦之Javascript篇，移步HTML/CSS篇

1, 判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，

总长度为5-20

var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;

("a1a__a1a__a1a__a1a__");

2，截取字符串abcdefg的efg

var str = "abcdefg";

if (/efg/.test(str)) {

var efg = (f("efg"), 3);

alert(efg);

}

3，判断一个字符串中出现次数最多的字符，统计这个次数

//将字符串的字符保存在一个hash table中，key是字符，value是这个字符出现的次数

var str = "abcdefgaddda";

var obj = {};

for (var i = 0, l = ; i < l; i++) {

var key = str[i];

if (!obj[key]) {

obj[key] = 1;

} else {

obj[key]++;

}

}

/*遍历这个hash table，获取value最大的key和value*/

var max = -1;

var max_key = "";

var key;

for (key in obj) {

if (max < obj[key]) {

max = obj[key];

max_key = key;

}

}

alert("max:"+max+" max_key:"+max_key);

4，IE与FF脚本兼容性问题

(1) ：

表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象

(2) 获取事件源

IE用srcElement获取事件源，而FF用target获取事件源

(3) 添加，去除事件

IE：Event(“onclick”, function) Event(“onclick”, function)

FF：ntListener(“click”, function, true) EventListener(“cli

ck”, function, true)

(4) 获取标签的自定义属性

IE：或div1[“value”]

FF：可用ribute(“value”)

(5) mentByName()和[name]

IE；mentByName()和[name]均不能获取div元素

FF：可以


本文标签： 元素 浏览器 页面 模式 可见

版权声明：本文标题：前端工程师笔试面试题 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1713522502a638917.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

更多相关文章

Win8新手必备：如何正确安装和使用IE浏览器

2月前

系统自带的IE浏览器是和系统捆绑在一起的，不是普通的软件，不能卸载和自己安装，如果IE浏览器出现了故障，可以还原系统或重装。那Win8如何重装IE浏览器呢？重装IE浏览器有什么方法？下面，小编就和大家说一下Win8重装IE浏览器的方法

解密0x000007b：轻松解决电脑遇到的蓝屏问题

2月前

电脑蓝屏问题通常是很多小伙伴都头疼的问题，对于大多数人来说蓝屏问题都是不容易解决的。而蓝屏情况也不止一种，如果遇到蓝屏代码0x000007b该如何解决呢？ 更多尽在小白系统重装官网 系统：win10专业版

提升上网效率小技巧：一步到位清除Adobe Flash Player与四大浏览器的缓存！

2月前

浏览器是人们在网络生活中不可缺少的存在，我们使用各种浏览器上网的时候，可能会出现各种程序出错的问题。或者，可能使用浏览器的时间就了，发现电脑有点卡顿，这时候就需要情况缓存了。那么，如何清理电脑浏览器的缓存呢？下面分享4款常用浏览器清理

一键优化上网速度：Firefox、Chrome、Edge与Safari的缓存管理秘籍

2月前

浏览器是人们在网络生活中不可缺少的存在，我们使用各种浏览器上网的时候，可能会出现各种程序出错的问题。或者，可能使用浏览器的时间就了，发现电脑有点卡顿，这时候就需要情况缓存了。那么，如何清理电脑浏览器的缓存呢？下面分享4款常用浏览器清理

解锁提速新技能：针对单个网站的Edge、Chrome缓存清理指南

2月前

参考方法：打开 浏览器 开发者工具→ 选择 应用程序标签页 → 在侧栏应用程序分类下 选择 清除缓存→ 点击

困在CSDN的360浏览器用户必看：一招直达网页！

2月前

从百度或者csdn的搜索中打开，会发现打不开网页，以前也出现过，只是以为这篇文章被删了，昨天接连多个文章打不开，怀疑的浏览器的问题，复制网址到edge浏览器就打开了 刚刚又出现了，怀疑360会拦截某些内容 edge浏览

不再被视频束缚：揭秘如何在Flash中心高效提取网页内容

2月前

视频下载神器完全指南：轻松保存网页视频的终极方案 你是否曾在观看精彩视频时，想要将其保存到本地却无从下手？或者担心错过重要内容，希望有个工具能帮你随时下载保存？VideoDownloadHelper 正是你需要的解决方案！这款

高手秘籍：Adobe Flash Player帮你一键提取网页视频精华

2月前

视频下载神器完全指南：轻松保存网页视频的终极方案 你是否曾在观看精彩视频时，想要将其保存到本地却无从下手？或者担心错过重要内容，希望有个工具能帮你随时下载保存？VideoDownloadHelper 正是你需要的解决方案！这款

新手必看：轻松配置锐捷设备的Telnet服务和密码登陆

2月前

组网拓扑： 配置要点：Console口登录设备 配置路由器以太网口的IP地址 配置Telent密码 确定Telent是否正确 验证配置配置步骤：

遇到QQ登录延迟？快来看看是不是你家的网络或防火墙惹的祸！(代码：0x00000001)

2月前

解决方法：1、首先请您检查下防火墙设置，建议 暂时关闭防火墙；2、可能是由于QQ系统调整引起的，所以会造成某些号段不能登陆，建议您可以 稍后再进行尝试；

IE大揭秘：快速从网页提取文字和图片至剪贴板的实用教程

2月前

步骤一：打开你的IE浏览器→菜单栏的“工具”→internet选项， 步骤二：切换到“安全”选项卡→再点击“自定义级别”，步骤三：在设置框下面找到脚本下的“允许对剪贴板进行编程访问”设置为启用，最后一路确定保存，

平面媒体的挑战与互联网的胜利：广告领域的颠覆与重构

2月前

互联网行业经历了这些年来各路人马的尝试之后，已经基本上摸索出了所谓互联网思维下的商业模式套路。在产品积累到足够的用户后，这些现成的商业模式都可以拿来为我所用。初步归纳一下，可能会有24种模式商业模式。当然，更多聪明绝顶的企业，还在不断

互联网赚钱宝典：平台如何赚取巨额利润

2月前

作者：徐戈链接：来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。自从谷歌开始在搜索结果旁边放广告以来，广告已经成了互联网行业默认的首选变现方式。但是实际上，

IE浏览器异常，无法正常使用，如何修复？_ie功能异常

1月前

今天给大家推荐一款IE浏览器修复神器，有时打开一些网站会被要求用IE打开，但有的宝宝电脑不知什么原因会出现异常，无响应之类的等等... 那我们可以尝试如下方法进行修复： 法一：重置IE浏览器 （1）打开【控制面

在虚拟机上搭建云平台环境（3）Controller和Computer网卡配置_配置controller、compute二台主机静态网络ip,根据学生物理主机而确定ip地址(例如:

1月前

Controller和Computer网卡配置本文涉及到代码复制，粘贴。CSDN中会复制多余信息导致出错，选择删除多余信息，或者去我的Blog添加配置 首先配置第一块网卡信息一、首先配置Contro

Win7系统下如何设置IE为默认浏览器_w7怎么从浏览器内把ie设置成默认浏览器

1月前

在win7系统中，自带有ie浏览器，但是有些用户可能会安装其他浏览器，这样原先默认IE浏览器就会被篡改，习惯了使用IE浏览器的用户们就不喜欢了，那么要如何设置IE为默认浏览器呢，具体步骤如下。 1、首先从开始菜单或者打开“计算

如何在控制面板卸载IE浏览器

1月前

IE浏览器是微软平台的系统内置的默认浏览器，在安装系统时就默认安装上了。IE浏览器不同于普通一般的应用程序，在卸载软件时是无法找到其对应程序的，只能在控制面板中卸载相应的更新。操作图示如下： 在控制面板中找到 程序卸载-

Win10正式版怎么卸载IE浏览器？

1月前

Win10正式版怎么卸载IE浏览器？ 首先win10正式版自带Microsoft Edga浏览器，其性能及稳定性远优秀于IE浏览器。其次就是我们可以下载第三方浏览器，因此很有必须在Win10系统中卸载IE浏览器。下面就是在Wi

【如何清除浏览器某一特定窗口的缓存（Microsoft Edge、Chrome等）】_清除某个网站的缓存

1月前

参考方法：打开 浏览器 开发者工具→ 选择 应用程序标签页 → 在侧栏应用程序分类下 选择 清除缓存→ 点击

Python爬虫（入门+进阶）学习笔记 1-8 使用自动化神器Selenium爬取动态网页（案例三：爬取淘宝商品）

1月前

selenium 是一套完整的web应用程序测试系统，包含了测试的录制（selenium IDE）,编写及运行（Selenium Remote Control）和测试的并行处理（Selenium Grid）。Selenium的核心Sel

发表评论

全部评论 0
暂无评论