admin 管理员组文章数量: 1086019
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
06
11
12
13
14
15
16
17
18
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
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
15
16
17
18
19
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
- 老虎伍兹为何被女人“吃掉”？
- 你必须告诉一声的九件事
- 男人，被时尚抛弃的一群？
- 30天牛奶养生让你焕发青春肌肤
- 你是否曾经关注过你的心脏？
39
40
41
42
43
44
45
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
| 1 | 12
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://www.roclinux.cn/p/1713522502a638917.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
更多相关文章
通过js就可以判断当前页面是在什么浏览器打开的
<!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title><title> <h
关于浏览器静止音频自动播放的问题
背景： 今天在制作前端页面时，想要给网页加上会自动播放的音乐，但是用audio标签设置音频的自动播放后，即使将autoplay属性设置成true&am
js 浏览器桌面通知notification
Notification是HTML5新增的API，用于向用户配置和显示桌面通知。上次在别的网站上看到别人的通知弹窗，好奇之余也想知道如何实现的。实际去查一下发现并不复杂，且可
safari浏览器打不开localhost(http)本地环境,将资源指向了https
项目场景： 使用umi(2.0)启动项目进行本地开发 问题描述 例如：使用safari浏览器访问本地地址后报错如下(谷歌浏览器正常) 解决流程： 看报错资源指向的地址不
页面切换到word文档后，鼠标总是转圈怎么办？
1、点击右上角的File 2、点击选项 3、先点击加载项，再点击转到 4、取消不常用加载项前面的√，然后点击确定就可以了
谷歌chrome浏览器安装json插件
下载 JSON-handle_0.6.1.crx 文件 下载地址： 在谷歌浏览器地址栏输入：chrome:extensions 回车 将下载文件拖入即可JSON-Handle
微信超链接自动跳转外部浏览器打开app下载文件，实现微信直接下载APK的解决方法
很多朋友都已经习惯在微信内分享网页链接和二维码了，通过扫描二维码下载APP或打开网页也成为大家惯用且非常方便的方式了。如此微信就成为了扫描二维码重要的工具，因为对于用户来说，
解决CentOS7无法安装Chrome浏览器
解决CentOS7无法安装Chrome浏览器 在centos7上是无法直接安装Chrome浏览器的，折腾了好久，终于找到了解决办法，特记录下，方便日后使
安装谷歌浏览器特定版本后禁止自动更新
问题描述 我们通过离线安装谷歌浏览器后，第一次打开浏览器时会默认下载最新版本，等到我们重启浏览器后它会自动更新。在项目中为了能固定浏览器版本，所以要禁止谷歌浏览器的更新&a
chrome浏览器安装油猴插件全过程
Step1:安装:tampermonkey 方法一：去Goole商店下载 方法二：官网下载：https:www.tampermonkey 偷懒方法
推荐8款插件，浏览器使用体验上升500%
在开始之前，先简单介绍一下Microsoft Edge（以下简称Edeg）浏览器： Microsoft Edge是由微软开发的基于Chromium开源项
【Windows 问题系列第 16 篇】如何去除 Chrome 中的请停用以开发者模式运行的扩展程序
这是【Windows 问题系列第 16 篇】，如果觉得有用的话，欢迎关注专栏。 你是否遇到过这样的问题，每次登陆 Chrome 浏览器的时候，右上角总
ChatGPT高级语音模式正在向Web网页端推出！
大家好，我是木易，一个持续关注AI领域的互联网技术产品经理，国内Top2本科，美国Top10 CS研究生，MBA。我坚信AI是普通
Win11如何恢复上下文菜单为旧版模式
Win11系统带来了很多新的特性，但是也有一些地方让人很不习惯，比如右键菜单，如何在Windows11上恢复经典上下文菜单,如果Windows11上新的右键单击上下文菜单不适合您，可以将其替换为旧的上下文菜单，方法如下。 尽管Windows
ASUS华硕原厂系统Win11.22H2 新版TLK工厂模式安装教程说明
华硕ASUS 天选 ROG 魔霸 魔霸新锐 枪神 冰刃 幻 飞行堡垒 A豆 无双 无畏 灵耀等全系列原厂OEM系统，恢复新机开箱状态。 自带恢复分区和麦克菲,自带office奥创中心等,原厂系统自动识别主板激活。 1
windows10下的浏览器userAgent
windows10 下各浏览器userAgent 版本号自行理解 8 -。- 浏览器userAgentChromeMozilla5.0 (Windows NT 10.0; WOW64) AppleWebKit537.36 (KHTML
使用Selenium库模拟浏览器操作
Selenium是一个用于自动化Web浏览器的Python库。它提供了一组强大的工具和API，使开发者能够以编程方式控制浏览器的行为，模拟用户与网页的交互。 Selenium可以用于各种Web自动
【软件工具 】非常好用的浏览器新标签页合集
文章目录 1. WeTab新标签页2. iTab新标签页3. Infinity新标签页4. 简法主页chrome浏览器插件5. Momentum6. OneTab7. WowTAB8. 远方新标签页（Dream Afa
解放双手！浏览器自动化神器，效率飙升！
每天面对大量重复性的网页操作，填写表单、抓取数据、定时检查网站更新，这些任务不仅耗时而且容易出错。 市面上虽然有一些自动化工具，但往往需要编程知识或者复杂的设置过程&
各个浏览器的详细信息-前端必须知道的知识
浏览器信息对于网站开发人员来说，浏览器信息和统计数据都是非常重要的。。。。。。。。网站统计浏览器统计 最流行的浏览器是什么？操作系统统计 最常见的操作系统是什么&
发表评论