• 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html
  • 极客专栏正式上线!欢迎访问 https://www.jikewenku.com/topic.html

前端HTML+CSS面试经典题目合集(二)

极客题库 Geekerstar 11个月前 (05-24) 400次浏览 已收录 0个评论 扫描二维码
文章目录[隐藏]

iframe有那些缺点?

1.会产生很多页面,不容易管理。

2.iframe框架结构有时会让人感到迷惑,如果框架个数多的话,可能会出现上下、左右滚动条,会分散访问者的注意力,用户体验度差。

3.代码复杂,无法被一些搜索引擎索引到,这一点很关键,现在的搜索引擎爬虫还不能很好的处理iframe中的内容,所以使用iframe会不利于搜索引擎优化。

4.很多的移动设备(PDA 手机)无法完全显示框架,设备兼容性差。

5.iframe框架页面会增加服务器的http请求,对于大型网站是不可取的。

分析了这么多,现在基本上都是用Ajax来代替iframe,所以iframe已经渐渐的退出了前端开发。

Label的作用是什么,是怎么用的?

label标签来定义表单控制间的关系 , 当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。

<label for='Name'>Number:</label>
<input type=“ text “ name='Name' id='Name'/>
<label>Date:<input type='text' name='B'/></label>

注意:label的for属性值要与后面对应的input标签id属性值相同

<label for='Name'>Number:</label>
<input type=“ text “ name='Name' id='Name'/>

对鼠标用户而言改进了可用性

如何实现浏览器内多个标签页之间的通信?

WebSocket、 SharedWorker ;

也可以调用localstorage、 cookies 等本地存储方式;
localstorage另一个浏览上下文里被添加、修改或删除时,它都会触发一个事件,

我们通过监听事件,控制它的值来进行页面信息通信;

注意quirks: Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常;

如何在页面上实现一个圆形的可点击区域?

a、 map+area 或者 svg

b、 border-radius

c、纯 js 实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

title与h3的区别、b与strong的区别、i与em的区别?

title属性没有明确意义只表示是个标题, H1 则表示层次明确的标题,对页面信息的抓取也有很大的影响;

strong是标明重点内容,有语气加强的含义,使用阅读设备阅读网络时: strong会重读,而 B 是展示强调内容。

i内容展示为斜体, em 表示强调的文本;

Physical Style Elements — 自然样式标签

b, i, u, s, pre

Semantic Style Elements — 语义样式标签

strong, em, ins, del, code

应该准确使用语义样式标签, 但不能滥用 , 如果不能确定时首选使用自然样式标签。

实现不使用 border 画出1px高的线,在不同浏览器的标准模式与怪异模式下都能保持一致的效果?

<divstyle="width:100%;height:1px;background-color:black"></div> 

HTML5标签的作用?(用途)

a、使Web页面的内容更加有序和规范

b、使搜索引擎更加容易按照HTML5规则识别出有效的内容

c、使Web页面更接近于一种数据字段和表

简述一下src与href的区别?

src用于替换当前元素, href 用于在当前文档和引用资源之间确立联系。

src是 source 的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求 src 资源时会将其指向的资源下载并应用到文档内,例如 js 脚本, img 图片和 frame 等元素。

<script src ='js.js'></script>

当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是 Hypertext Reference 的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加

<link href='common.css' rel='stylesheet'/>

那么浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css ,而不是使用 @import 方式。

谈谈你对canvas的理解?

canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术。标记和 SVG以及 VML 之间的一个重要的不同是,有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成,但功能明显要弱一些。 canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能。

WebSocket与消息推送?

B/S架构的系统多使用HTTP协议
HTTP协议的特点:
1 无状态协议
2 用于通过 Internet 发送请求消息和响应消息
3 使用端口接收和发送消息,默认为80端口 底层通信还是使用Socket完成。

HTTP协议决定了服务器与客户端之间的连接方式,无法直接实现消息推送( F5 已坏) , 一些变相的解决办法:

双向通信与消息推送

轮询:客户端定时向服务器发送Ajax请求,服务器接到请求后马上返回响应信息并关闭连接。
优点:后端程序编写比较容易。
缺点:请求中有大半是无用,浪费带宽和服务器资源。
实例:适于小型应用。

长轮询:客户端向服务器发送Ajax请求,服务器接到请求后 hold 住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求。
优点:在无消息的情况下不会频繁的请求,耗费资小。
缺点:服务器hold连接会消耗资源,返回数据顺序无保证,难于管理维护。 Comet 异步的 ashx ,
实例:WebQQ、 Hi 网页版、 Facebook IM 。

长连接:在页面里嵌入一个隐蔵iframe,将这个隐蔵 iframe 的 src 属性设为对一个长连接的请求或是采用 xhr 请求,服务器端就能源源不断地往客户端输入数据。
优点:消息即时到达,不发无用请求;管理起来也相对便。
缺点:服务器维护一个长连接会增加开销。
实例:Gmail聊天

Flash Socket:在页面中内嵌入一个使用了 Socket 类的 Flash 程序 JavaScript 通过调用此 Flash 程序提供的 Socket 接口与服务器端的 Socket 接口进行通信, JavaScript 在收到服务器端传送的信息后控制页面的显示。
优点:实现真正的即时通信,而不是伪即时。
缺点:客户端必须安装Flash插件;非 HTTP 协议,无法自动穿越防火墙。
实例:网络互动游戏。

Websocket:

WebSocket是 HTML5 开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。依靠这种技术可以实现客户端和服务器端的长连接,双向实时通信。

特点:

a、事件驱动

b、异步

c、使用 ws 或者 wss 协议的客户端 socket

d、能够实现真正意义上的推送功能

缺点:少部分浏览器不支持,浏览器支持的程度与方式有区别。

img的title和alt有什么区别?

Alt 用于图片无法加载时显示 ,Title 为该属性提供信息,通常当鼠标滑动到元素上的时候显示

表单的基本组成部分有哪些,表单的主要用途是什么?

组成:表单标签、表单域、表单按钮

a、表单标签:这里面包含了处理表单数据所用 CGI 程序的 URL, 以及数据提交到服务器的方法。

b、表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等。

c、表单按钮:包括提交按钮,复位按钮和一般按钮;用于将数据传送到服务器上的 CGI 脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。

主要用途:表单在网页中主要负责数据采集的功能,和向服务器传送数据。

表单提交中Get和Post方式的区别?

(1)get 是从服务器上获取数据, post 是向服务器传送数据。

(2)get 是把参数数据队列加到提交表单的 ACTION 属性所指的 URL 中,值和表单内各个字段一一对应,在 URL 中可以看到。 post 是通过 HTTP post 机制,将表单内各个字段与其内容放置在 HTML HEADER 内一起传送到 ACTION 属性所指的 URL 地址 , 用户看不到这个过程。

(3)对于 get 方式,服务器端用 Request.QueryString 获取变量的值,对于 post 方式,服务器端用 Request.Form 获取提交的数据。

(4)get 传送的数据量较小,不能大于 2KB 。 post 传送的数据量较大,一般被默认为不受限制。但理论上, IIS4 中最大量为 80KB , IIS5 中为 100KB 。

(5)get 安全性低, post 安全性较高。

HTML5 有哪些新增的表单元素?

HTML5 新增了很多表单元素让开发者构建更优秀的 Web 应用程序,主要有:

datalist 是一个规定了输入域的选项列表,它是通过它包含的option来创建列表,必须要含有value值

keygen是一种验证用户的可靠方法,提供公钥和密钥,但是,兼容性差,所以用的不多。keygen已经被废弃了。

output主要是用来提供不同类型的输出。

HTML5 废弃了哪些 HTML4 标签?

HTML5 废弃了一些过时的,不合理的HTML 标签:

1.纯表现元素:basefont、big、center、font、s、strike、tt、u

2.对可用性产生负面影响的元素:frame、frameset、noframes

3.产生混淆的元素:acronym、applet、isindex、dir

HTML5 标准提供了哪些新的 API?

HTML5 提供的应用程序 API 主要有:

· Media API

· Text Track API

· Application Cache API

· User Interaction

· Data Transfer API

· Command API

· Constraint Validation API

· History API

HTML5 存储类型有什么区别?

HTML5 能够本地存储数据,在之前都是使用 cookies 使用的。 HTML5 提供了下面两种本地存储方案:

· localStorage 用于持久化的本地存储,数据永远不会过期,关闭浏览器也不会丢失。

· sessionStorage 同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储

cookies,seesionStorage,localStorage区别:

共同点:都是保存到浏览器端,都是同源。
区别:cookies会发给服务器。其他两个不会,只在本地保存,而且比cookie存储空间要大。 seesionStroage,在窗口关闭前有效。不在不同浏览器窗口共享。 localStroage,始终有效,永久数据。所有同源窗口共享 cookie:在过期前有效。所有同源窗口共享

HTML5 应用程序缓存和浏览器缓存有什么区别?

应用程序缓存是 HTML5 的重要特性之一,提供了离线使用的功能,让应用程序可以获取本地的网站内容,例如 HTML、CSS、图片以及 JavaScript。这个特性可以提高网站性能,它的实现借助于 manifest 文件,如下:

<!doctype html>  <html manifest=”example.appcache”>  …..  </html>

与传统浏览器缓存相比,它不强制用户访问的网站内容被缓存。

HTML5 Canvas 元素有什么用?

Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作,

<canvas id=” canvas1 ″ width= ” 300 ″ height= ” 100 ″ >

</canvas>

除了 audio 和 video,HTML5 还有哪些媒体标签?

HTML5 对于多媒体提供了强有力的支持,除了 audio 和 video 标签外,还支持以下标签:

标签定义嵌入的内容,比如插件。

<embed type=” video/quicktime ” src= ” Fishing.mov ” >

对于定义多个数据源很有用。

<video width=” 450 ″ height= ” 340 ″ controls>

     <source src=” jamshed.mp4 ″ type= ” video/mp4 ″ >

     <source src=” jamshed.ogg ” type= ” video/ogg ” >

</video>

标签为诸如 video 元素之类的媒介规定外部文本轨道。 用于规定字幕文件或其他包含文本的文件,当媒介播放时,这些文件是可见的。

HTML5 中如何嵌入视频?

和音频类似,HTML5 支持 MP4 、 WebM 和 Ogg 格式的视频,下面是简单示例:

<video width=” 450 ″ height= ” 340 ″ controls>

  <source src=” jamshed.mp4 ″ type= ” video/mp4 ″ >

   Your browser does’ nt support video embedding feature.

</video>

HTML5 中如何嵌入音频?

HTML5 支持 MP3 、 Wav 和 Ogg 格式的音频,下面是在网页中嵌入音频的简单示例:

<audio controls>

    <source src=” jamshed.mp3 ″ type= ” audio/mpeg ” >

    Your browser does’ nt support audio embedding feature.

</audio>

解释一下CSS的盒子模型?

回答一:

a、标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度

b、网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。

c、这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

回答二:

标准的盒模型:width = content

IE盒模型:width = content+padding-Left+padding-right+border-left + border-right

请你说说CSS选择器的类型有哪些,并举几个例子说明其用法?

链接:https://www.nowcoder.com/questionTerminal/ede31b7544f346cc8a8a99c51f19a104
来源:牛客网

CSS选择器有以下:
1.元素选择器(又称为类型选择器)

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

ml {color:black;}

2.类选择器

<h1 class="important">
This heading is very important.
</h1>

3.ID选择器

<p id="intro">This is a paragraph of introduction.</p>

4.属性选择器

a[href] {color:red;}

5.后代选择器(又称为包含选择器)

h1 em {color:red;}

6.子元素选择器

h1 > strong {color:red;}

7.相邻兄弟选择器

h1 + p {margin-top:50px;}

要动态改变层中内容可以使用的方法?

innerHTML,innerText

常见浏览器兼容性问题与解决方案?

(1)浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同

问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
碰到频率:100%
解决方案:CSS里 *{margin:0;padding:0;}
备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

(2)浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大

问题症状:常见症状是IE6中后面的一块被顶到下一行
碰到频率:90%(稍微复杂点的页面都会碰到,float布局最常见的浏览器兼容问题)
解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性
备注:我们最常用的就是div+CSS布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。

(3)浏览器兼容问题三:设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度

问题症状:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度
碰到频率:60%
解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。

(4)浏览器兼容问题四:行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug

问题症状:IE6里的间距比超过设置的间距
碰到几率:20%
解决方案 : 在display:block;后面加入display:inline;display:table;
备注:行内属性标签,为了设置宽高,我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后,在IE6下,他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

(5) 浏览器兼容问题五:图片默认有间距

问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。
碰到几率:20%
解决方案:使用float属性为img布局
备注 : 因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。(我的一个学生使用负margin,虽然能解决,但负margin本身就是容易引起浏览器兼容问题的用法,所以我禁止他们使用)

(6) 浏览器兼容问题六:标签最低高度设置min-height不兼容

问题症状:因为min-height本身就是一个不兼容的CSS属性,所以设置min-height时不能很好的被各个浏览器兼容
碰到几率:5%
解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}
备注:在B/S系统前端开时,有很多情况下我们又这种需求。当内容小于一个值(如300px)时。容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。

(7)浏览器兼容问题七:透明度的兼容CSS设置

一般在ie中用的是filter:alpha(opacity=0);这个属性来设置div或者是块级元素的透明度,而在firefox中,一般就是直接使用opacity:0,对于兼容的,一般的做法就是在书写css样式的将2个都写上就行,就能实现兼容


丨极客文库, 版权所有丨如未注明 , 均为原创丨
本网站采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行授权
转载请注明原文链接:前端HTML+CSS面试经典题目合集(二)
喜欢 (0)
[247507792@qq.com]
分享 (0)
Geekerstar
关于作者:
本站技术支持

您必须 登录 才能发表评论!

  • 精品技术教程
  • 编程资源分享
  • 问答交流社区
  • 极客文库知识库

客服QQ


QQ:2248886839


工作时间:09:00-23:00