简答题1. iframe元素有哪些缺点?
iframe元素主要有4个方面的缺点。
(1)浏览器对同一域名的并发请求数是有限制的。iframe中的文档(即子文档)与父文档会共享连接,当并发请求数达到上限值时,子文档中的资源只能等待,直到前面的通信完成。
(2)阻塞父窗口的load事件。
(3)脚本的执行是同步和阻塞的,将script元素放置于iframe之前,同样也会阻塞iframe中资源的请求。
(4)制造点击劫持(Click Jacking),将一个不可见的iframe或包含用户感兴趣内容的iframe覆盖在文档的某个位置上,诱使用户点击iframe中的内容。
[考点] HTML元素 iframe
2. HTML5新增了几个多媒体元素,请列举使用这些元素的优势。
使用多媒体元素有以下4个方面的优势。
(1)支持移动设备,可为智能手机、平板电脑或其他移动设备提供丰富的观看体验。
(2)易于定制效果,使用传统的CSS就能为多媒体元素设计个性化的视觉体验,例如渐变、阴影、遮罩和动画等。
(3)轻松实现响应式设计,能在不同媒体(如计算机显示器、移动设备和辅助设备等)中渲染合适的样式,呈现最优的界面。
(4)语义化的元素,可提供明确的含义,提升文档的可访问性,便于阅读与理解。
[考点] 多媒体和绘图
3. 除了video和audio元素,HTML5还支持哪些多媒体元素?
HTML5还支持embed和track元素。embed元素用于嵌入外部资源,例如SVG矢量图形、应用程序或插件等。track元素是audio和video的子元素,为多媒体文件添加辅助文本信息,例如字幕、屏幕阅读器说明和主题等。在Chrome浏览器中,可用WebVTT(网络视频文本轨道)文件和track元素结合(如以下代码所示),给媒体资源添加可同步显示的字幕,效果如下图所示。
<video>
<source src="video/piano.webm" type="video/webm" />
<track kind="subtitles" src="video/piano.vtt" label="中文" srclang="zh" default />
</video>
带字幕的视频 [考点] 多媒体和绘图
4. 请简单描述一下canvas元素。
canvas是HTML5新增的元素,该元素能创建一个固定大小的画布,在画布中可以绘制或处理要展示的内容(例如图像、文本等),以下是它的特征和功能。
(1)只能通过JavaScript脚本来绘制图形,例如矩形、圆等。
(2)如果要为图形设置CSS样式、文本或动画,那么也得通过JavaScript来实现。
(3)canvas元素有很强的图像操作能力,不仅能实现图像的合成与裁剪,还能修改图像的像素数据,实现滤镜的一些效果(例如浮雕、模糊和黑白等)。
(4)如果在画布中绘制一个按钮,不能直接为这个按钮添加DOM事件(例如点击、聚焦等)。
[考点] 多媒体和绘图
5. 什么是SVG?
SVG (Scalable Vector Graphics)即可伸缩矢量图形,是一种用XML描述图形的标记语言,早在2003年就已成为W3C标准。与画布(Canvas)只能用JavaScript绘图不同,SVG提供了各种类型的元素,包括形状、文本、渐变、动画和滤镜等,并且可以为每个元素附加DOM事件,还能用CSS控制它们的样式,不过只能使用部分CSS属性,像border、background就不可用。SVG中也可插入图像(即插入img元素),执行裁剪、遮罩、旋转等功能。不过,SVG不能像Canvas那样,将处理过的图形输出,canvas元素有个toDataURL()方法,可以将画布中的内容编码成字符串形式。
[考点] 多媒体和绘图
6. 用canvas元素画一个蓝底白字的矩形按钮,如下图所示。
按钮
在HTML文档中先定义一个canvas元素,并且将画布的宽和高分别设置为200px和100px,再用脚本绘制按钮,具体如以下代码所示。
<canvas id="btnCanvas" width="200" height="100">
<p>这是一个按钮,用于启动游戏</p>
</canvas>
<script>
var canvas=document.getElementById("btnCanvas"),
ctx=canvas.getContext("2d");
ctx.fillStyle="#007ab9"; //矩形背景色
ctx.fillRect(0,0,canvas.width, canvas.height); //绘制矩形
ctx.font="40px serif"; //字体设置
ctx.fillStyle="#FFF"; //字体颜色
ctx.fillText("游戏开始",20, 60); //绘制文本
</script>
[考点] 多媒体和绘图
7. localStorage和sessionStorage有哪些异同?
localStorage是指本地存储,sessionStorage是指会话存储。它们都不会作为请求报文中的额外信息传递给服务器,并且存储容量也相同,但在使用的时候略有不同。本地存储永远不会过期,即使浏览器关闭,也还会存在,同源的本地存储可以共享。而会话存储只能应用于页面会话期间,当关闭页面或浏览器的时候,会话存储中的数据将会被自动清除。
[考点] 数据存储
8. 用什么方法可以防止Cookie被盗取?
Cookie是先由浏览器向服务器发起请求,再由服务器响应后回传Set-Cookie首部(此时可设置HttpOnly属性)并向客户端浏览器写入Cookie。在给Cookie设置HttpOnly属性后,就能够禁止页面的JavaScript访问这个Cookie,从而避免被盗取。
[考点] 数据存储
9. CSS指的是什么?
CSS (Cascading Style Sheets)即层叠样式表,它是一种样式语言,用于控制页面的表现(外观和内容排版)。它对HTML来说是一种有效的补充,利用CSS,可以创建各种规则,应用到所有的HTML元素。
[考点] CSS与CSS3
10. 什么叫渐进增强?它和优雅降级有哪些区别?
渐进增强(Progressive Enhancement)并不是一种技术,而是一种设计思想。各个浏览器的渲染能力各不相同,要做一个每个人看到的网页、感受到的体验都一致的网站是几乎不可能的。但还是得确保网站的可访问性,保证用户在任何环境下,都能正常访问核心内容或使用基本功能(避免页面打不开、排版错乱等),并为他们提供当前条件下最好的体验,这是渐进增强的核心思想。
优雅降级(Graceful Degradation)也是一种设计思想,保证在高版本浏览器中提供最好的体验,遇到低版本浏览器再降级进行兼容处理,使其能正常浏览。两种思想的区别如下所列。
(1)渐进增强是向上兼容,优雅降级是向下兼容。
(2)渐进增强是从简单到复杂,优雅降级是从复杂到简单。
(3)渐进增强关注的是内容,优雅降级关注的是浏览体验。
[考点] CSS与CSS3
11. 请谈谈你对CSS Hack的理解。
CSS Hack是一种编程技巧,它让CSS代码能兼容各个浏览器,尽量让页面取得想要的效果,避免出现错误的布局。不同厂商的浏览器(例如Chrome、Firefox等)或相同厂商不同版本的浏览器(例如IE6、IE7等)对CSS的解析能力有差异,并且各自还会存在特有的BUG,CSS Hack就会利用这些特点来执行或忽略相应的CSS样式。虽然CSS Hack能提升兼容性,但还是尽量少用,这是因为每次都要多写几段额外的兼容样式,这带来了巨大的维护成本,并且在浏览器升级后,浏览器支持了更多的CSS特性或修正了BUG,原先的写法可能就会失效。
[考点] CSS与CSS3
12. 什么是盒模型?
盒模型(box model,也称为框模型)就是从盒子顶部俯视所得的一张平面图,用于描述元素所占用的空间。有两种盒模型,W3C盒模型和IE盒模型(IE6以下,不包含IE6以及怪异模式下的IE5.5+),两者不同之处是对元素尺寸的计算方式。当用CSS给某个元素定义宽或高的时候,IE盒模型中内容的宽或高将会包含内边距和边框,而W3C盒模型并不会包含。
[考点] 视觉格式模型
13. 什么是外边距塌陷?当出现外边距塌陷时,外边距之间的计算方式是怎样的?
外边距塌陷(margin collapsing)也称为外边距合并,是指两个在正常流中相邻(兄弟或父子关系)的块级元素的外边距,组合在一起变成单个外边距。不过只有上下外边距才会有塌陷,左右外边距不会出现这种问题。
元素的外边距可以用正数或负数来指定,使用不同的组合会改变外边距的计算方式,总共有3种组合方式,如下所列:
(1)两个都是正数,取较大的值。
(2)两个都是负数,取绝对值较大的值。
(3)一正一负,取两个值相加的和。
[考点] 视觉格式模型
14. 为span元素定义下面的CSS样式后,元素的宽和高是如何计算的?
span {
border: 1px solid #000;
margin: 10px 0;
padding: 10px 0;
width: 300px;
height: 100px;
}
span是一个行内元素,它的盒类型默认是inline。行内元素不能定义width和height属性,它的宽度和高度都由其内容和边框决定。行内元素也不能定义上下外边距(margin)和上下内边距(padding)。虽然定义上下padding后,能使得元素变高,但元素占据的空间并没有改变。下面用代码解释行内元素的这个特点,效果如下图所示,在设置上下内边距(padding)后,行内元素与相邻的块级元素重叠在了一起。
<div>块级元素</div>
<span>行内元素</span>
块级元素和行内元素 [考点] 视觉格式模型
15. 将元素的display属性设为inline-block后,能把多个这样的元素排列在一行中,但元素之间会有间隙(如下图所示),如何才能去除间隙?
行内元素之间的间隙
之所以有间隙是因为在编写HTML文档的时候,为了便于阅读,通常会将结构格式化(如以下代码所示),格式化后的文档不但会包含换行符,而且还会包含空白符。浏览器会将这些额外的字符合并成一个空白符。
<div>
<span style="display:inline-block">行内块元素</span>
<span style="display:inline-block">行内块元素</span>
<span style="display:inline-block">行内块元素</span>
</div>
既然间隙是由这个多余的空白符造成的,那么只要去除了这个字符,就能解决间隙的问题,解决方法如下所列。
(1)在父元素div中定义CSS属性font-size为0。
(2)将3个span元素写在一行中。
(3)给父元素div定义负的CSS属性letter-spacing,减小字符之间的间距,再将span元素中的letter-spacing定义为0,清除间距。
[考点] 视觉格式模型
16. display:none与visibility:hidden都可隐藏元素,有什么区别?
将CSS属性display定义为none后,相当于元素没有了后代元素,在正常流中不占用任何空间,元素的真实尺寸将会丢失,还会导致浏览器的重排(reflow)和重绘(repaint)。而将CSS属性visibility定义为hidden后,在正常流中还是会占用空间,仍具有元素的真实尺寸,只会导致浏览器重绘。
[考点] 视觉格式模型
17. 请谈谈对BFC的理解。
BFC(Block Formatting Context)即块格式化上下文,它既不是一个CSS属性,也不是一段代码,而是CSS2.1规范中的一个概念,决定元素的内容如何渲染以及与其他元素的关系和交互。BFC有5条规则,具体如下所列。
(1)BFC有隔离作用,内部元素不会受外部元素的影响(反之亦然)。
(2)一个元素只能存在于一个BFC中,如果能同时存在于两个BFC中,那么就违反了BFC的隔离规则。
(3)BFC内的元素按正常流排列,元素之间的间隙由元素的外边距(margin)控制。
(4)BFC中的内容不会与外面的浮动元素重叠。
(5)计算BFC的高度,需要包括BFC内浮动子元素的高度。
[考点] 视觉格式模型
18. 什么是hasLayout?触发hasLayout后会带来什么样的后果?
hasLayout是微软的一个私有概念,它类似于BFC,能够运行在早期的IE6和IE7中,但在IE8及之后的IE版本中已经被抛弃。在早期的IE浏览器中,元素会被分为拥有布局(has layout)和没有布局,拥有布局的元素可以控制自己内容的尺寸和位置,而没有布局的元素需要由最近的拥有布局的祖先元素代劳。IE6中的很多BUG都是由于元素没有布局所引起的,例如浮动元素会引起双倍外边距(即10px的外边距会变成20px)。可以通过定义特定的CSS属性来触发hasLayout,使得这个元素拥有布局。下面所列的是能触发hasLayout的情况:
(1)float属性为left或right。
(2)position属性为absolute。
(3)值不是auto的width或height属性。
(4)值不是normal的zoom属性。
hasLayout除了能修复IE的BUG,还能像BFC一样,清除浮动、解决外边距塌陷问题。
[考点] 视觉格式模型
19. CSS中类选择器和ID选择器有哪些区别?
类选择器和ID选择器主要有以下4个方面的区别:
(1)类选择器是以点号(.)开头,ID选择器是以井号(#)开头。
(2)类选择器根据class属性的值选择元素,ID选择器根据id属性的值选择元素。
(3)类选择器可以应用于多个元素,ID选择器只能应用于一个元素。
(4)ID选择器的特殊性(specificity)比类选择器要高。
[考点] 选择器和层叠
20. 执行下面的样式代码后,三个section元素的字体颜色分别是什么?
<style>
div{
color: black;
}
.item{
color: blue;
}
.item:last-of-type {
color: red;
}
</style>
<div>
<section class="item">第一个元素</section>
<section class="item">第二个元素</section>
<section class="button">第三个元素</section>
</div>
第一个section元素定义了CSS类item,因此它的字体颜色为蓝色(blue)。第二个section元素的字体颜色还是蓝色,因为伪类:last-of-type只能与类型选择器搭配,不能与类选择器搭配。第三个section元素虽然定义了CSS类button,但并没有为它声明颜色属性,因此section元素中的字体颜色会继承父元素div中的字体颜色,也就是黑色(black)。
[考点] 选择器和层叠