前端程序员面试分类真题2

前端程序员面试分类真题2简答题1.

HTML和XHTML有哪些区别?正确答案：HTML与XHTML的区别主要有10个方面。

(1)XHTML需要良好的文档结构，也就是元素要合理嵌套。

（江南博哥）(2)在XHTML文档中，元素名称会区分大小写，并且元素名称和属性要小写。

(3)在XHTML文档中，所有元素都需要结束标签。

(4)在XHTML文档中，可混合各种XML应用。

(5)在XHTML文档中，注释标签(＜!----＞)中的内容将会被忽略。

(6)XHTML文档内的CDATA中的内容可以被执行。

(7)在XHTML1.0中，不推荐a、applet、form、frame、iframe、img和map元素拥有name属性，但加了也不会报错。

(8)在HTML中用脚本读取到的HTML标签名和属性名会以大写形式返回，而XHTML1.0则是小写。

(9)在XHTML文档中，元素的属性值需用引号包裹，并且禁止属性简化。

(10)在XHTML文档中，有些特殊字符必须被替换为实体引用。[考点]HTML与XHTML

2.

HTML实体的应用场景有哪些?正确答案：如果要在HTML文档中显示特殊字符(例如“＜”“＞”等)，那么就可以使用HTML实体。HTML实体还能预防XSS(跨站脚本攻击)攻击。XSS通常会将脚本代码注入HTML文档中，再解析执行，但使用了HTML实体后，就可以让相关代码只打印，而不执行。[考点]HTML与XHTML

3.

HTML和HTML5的区别有哪些?正确答案：HTML和HTML5主要有以下5个区别：

(1)旧版本的HTML比较依赖浏览器的插件，例如播放视频需要安装Flash插件。

(2)因为HTML5不再基于SGML，所以文档声明类型(DOCTYPE)只有一种。

(3)HTML5消除了过时或冗余的元素，例如font、center等。

(4)HTML5新增了许多语义化的元素(如article、header等)和新功能(如video、canvas等)，并提供了更好的跨平台支持。

(5)HTML5规定了新的全局属性和元素属性，全局属性有draggable、contenteditable等，元素属性有accept、placeholder等。[考点]HTML5

4.

你怎么看待WebApp、HybridApp和NativeApp?正确答案：随着HTML5功能的不断完善，促进了WebApp与HybridApp的发展，同时也影响了NativeApp的市场占有率。下表对这三种技术进行了概要说明。App技术App技术说明WebApp利用Web浏览器和Web技术通过网络执行任务的应用NativeApp以特定编程语言编写的智能手机应用程序，例如用于iOS系统的ObjectiveC和用于Android系统的JavaHybridApp将WebApp包装在本机容器中(常用的有WebView)，从而可以通过使用本机SDK来增强Web代码的处理能力

下图用两个圆描绘出了三者之间的关系，Hybrid位于Native和Web的重叠处。

三者的关系[考点]HTML5

5.

简述一下你对HTML5语义化的理解。正确答案：所谓语义是指对词语或句子含义的正确解释。HTML5中的语义化就是让元素、属性或属性值有含义，更准确地标记特定类型的内容。对元素语义化的目的是为了让元素的语义和呈现分离，元素只负责文档内容的结构与含义，而CSS样式控制内容的呈现，像b元素，没有语义却能将字体变粗，这类元素违背了语义化的目的，将会被废弃。[考点]HTML5

6.

语义化有哪些优势?正确答案：语义化有着巨大的优势，这里简要概括为3条，如下所列：

(1)良好的语义使得HTML文档结构清晰、布局合理、主体突出、可读性更强，便于开发者更快速地理解代码的意图。

(2)促进无障碍访问，降低信息污染，帮助残障人士的辅助设备(如屏幕阅读器等)识别元素含义，做出正确反馈。

(3)改善搜索引擎优化(SEO)。经过语义化的HTML能提供丰富的上下文信息和内容的含义，让爬虫更容易分析内容、区分类型以及对内容进行索引。[考点]HTML5

7.

什么是微格式?正确答案：微格式(Microformat)是一种数据结构化技术，通过添加属性(class或rel)和元数据(link元素)的方式来实现Web的语义化，让内容适合人类阅读，以及容易被机器处理。rel属性用来描述两个文档之间或文档与资源之间的关系，link和a元素都有这个属性，a元素的rel属性表示一种链接关系。新版的微格式定义了5种类前缀(即class属性的值)，具体说明如下表所列。类前缀类前缀描述h-*根元素，指定元素是微格式p-*表示一个纯文本元素u-8表示—个链接元素dt-*将元素作为日期或时间e-*解析元素的内容[考点]HTML5

8.

请描述下面代码的作用。

＜ulrole="listbox"＞

＜lirole="option"＞蓝色＜/li＞

＜lirole="option"aria-selected="true"＞红色＜/li＞

＜/ul＞正确答案：上面的代码通过ARIA属性，让设备知道ul元素表示选择框，li元素表示选择框的选项，并且第二个选项处于选中状态。ARIA属性是由WAI-ARIA(WebAccessibilityInitiative-AccessibleRichInternetApplications)引入的，这些属性为存在视觉障碍的用户服务，可添加在任何HTML元素中，它有两类定义方式：role和aria-*(以aria-开头的属性)。role属性定义了对象的通用类型(包括radio、checkbox、button等)；aria-*属性提供有关对象的特定信息，例如单选框或复选框的checked状态、按钮的disabled状态等。更多信息可以直接参考W3C中的WAI-ARIA章节。[考点]HTML5

9.

什么是ShadowDOM(影子中的DOM)?正确答案：ShadowDOM是浏览器的一种功能，能够自动添加子元素，例如audio元素在网页中能使用进度条、音量控制等功能，这些相关元素都由浏览器自动生成。在HTML文档中可以很简单地使用该元素，代码如下所示。

＜audiocontrolssrc="test.wav"＞＜/audio＞[考点]HTML元素元素基础

10.

元素属性src和href有什么区别?正确答案：两者的功能不同。href(hypertextreference)能够建立一条通道，将当前文档和定义的资源连接起来。src(source)是将定义的资源嵌入到当前文档中。[考点]HTML元素元素基础

11.

img元素中的title和alt属性有什么区别?正确答案：title是全局属性，提供额外的提示信息，当鼠标滑动到该元素时，显示定义的提示。link和style元素中的title比较特殊，表示样式表的名称；alt是局部属性，仅可用在img、input等元素中，提供在图片未载入或加载失败时的替代文本。注意，只有当input元素的type属性值为image时，才能使用有alt属性。[考点]HTML元素元素基础

12.

CSS有几种引入方式?它们有哪些区别?正确答案：有3种，分别是内联样式(inlinestyle)、内嵌样式(embeddedstyle)和外部样式(externalstyle)。它们的区别可参考下表中的对比，第一行描述了要比较的特征。CSS引入方式的对比方式特殊性HTTP请求重用范围文档大小伪类与伪元素内联样式最高无不可重用增加不可定义内嵌样式与外部相同无当前文档增加可定义外部样式与内嵌相同有整个项目保持可定义[考点]HTML元素元数据

13.

外部样式可用link元素引用，其结构如以下代码所示。其中rel属性的作用是什么?

＜linkrel="stylesheet"type="text/css"href="css/style.css"/＞正确答案：link元素除了拥有全局属性外，还包含5个特殊的属性：type、media、title、href和rel，其中rel属性用于定义当前文档与目标资源的关系。它有多个关键字可供选择，例如alternate、tag、stylesheet等。经常使用的是stylesheet，表示文档的外部样式表。[考点]HTML元素元数据

14.

JavaScript有几种引入方式?它们有哪些区别?正确答案：有3种，分别是内联脚本(inlinescript)、外部脚本(externalscript)和元素属性(elementattribute)。它们的区别可参考下表中的对比，第一行描述了要比较的特征。JavaScript引入方式的对比方式内容和行为HTTP请求重用范围文档大小特点内联脚本耦合无当前文档增加将内联脚本放在外部样式表之后，会延迟其他资源的下载外部脚本分离有整个项目保持容易维护，高复用，可用defer或async属性解决页面阻塞问题元素属性耦合无不可重用增加两种定义方式，分别是事件属性和在链接属性中使用特殊伪协议的URL。不但能制作可执行JavaScript的浏览器书签，还能用a元素模拟按钮的效果[考点]HTML元素元数据

15.

下面代码中的图像是否会被延迟下载?为什么?

＜linkrel="stylesheet"href="css/style.css"type="text/css"/＞

＜script＞

setTimeout(function(){

console.log(123);

},3000);

＜/script＞

＜imgsrc="img/lake.png"/＞正确答案：会。将内联脚本(把JavaScript代码放置在＜script＞和＜/script＞标签之间)放在外部样式表之后，会延迟资源下载，只有当样式表下载完成并且内联脚本执行完毕时，后续资源(例如代码中的图像)才能开始下载。这是因为内联脚本可能含有依赖于样式表中CSS规则的代码。[考点]HTML元素元数据

16.

用meta元素的两种声明方式，把当前HTML文档中的内容用UTF-8进行编码。正确答案：HTML5推荐使用meta元素中的charset属性来声明，charset是HTML5新增的属性，可用来表示HTML文档中的内容所用的字符编码，定义的属性值不区分大小写。下面的代码用该属性对内容进行UTF-8编码。

＜metacharset="UTF-8"/＞

过去，会使用一种比较长的编码声明方式，代码如下所示，它与上面的方式是等价的。

＜metahttp-equiv="content-type"content="text/html;charset=utf-8"/＞[考点]HTML元素元数据

17.

meta元素可以定义文档的哪些元数据?正确答案：meta元素可定义的元数据可简要概括为4类，如下所列：

(1)声明HTML文档内容所用的字符编码。

(2)完善文档描述信息，让搜索引擎更容易解析索引，提升SEO(searchengineoptimization)。

(3)适配移动设备，使页面在各种尺寸的屏幕中显示正确。

(4)指定首选样式表、执行重载或重定向。[考点]HTML元素元数据

18.

什么是锚点?正确答案：锚点(anchor)是一种特殊链接，能定位到HTML文档中的某个特定位置，这个文档既可以在当前域名下，也可以在其他域名下，代码如下所示。

＜ahref="#"＞返回顶部＜/a＞

＜ahref="#anchor"＞内部定位＜/a＞

＜ahref="/1.html#anchor"＞外部定位＜/a＞

通过HTML元素的id或name属性来设置锚点。目前只有a元素可以用name属性设置锚点，但HTML5将a元素的name属性被废弃了，所以推荐的用法是都用id属性来设置锚点。[考点]HTML元素超链接和图像

19.

什么是分区响应图?正确答案：分区响应图(即热点区域)能让图像上的部分位置有超链接。将map元素和area元素组合使用，可创建分区响应图，代码如下所示。

＜imgsrc="img/lake.png"usemap="#Map"/＞

＜mapname="Map"＞

＜areashape="circle"coords="50,50,30"href="/"＞

＜areashape="rect"coords="100,100,150,170"href="/"＞

＜/map＞

map元素中的name属性必须定义，且赋予一个名称，以便img元素使用us