1.问:<keygen>是正确的HTML5标签吗?

答:是。

<keygen> 标签规定用于表单的密钥对生成器字段。当提交表单时,私钥存储在本地,公钥发送到服务器。

2.问:<bdo>标签可以改变文本方向?

答:可以。

bdo 元素可覆盖默认的文本方向。例子:

<bdo dir="rtl">
Here is some Hebrew text
</bdo>

结果是:

3.问:下列代码是否合法

<figure>
<img src="myimage.jpg" alt="My image">
<figcaption>
<p>This is my self portrait.</p>
</figcaption>
</figure>

答:合法。

<figure> 标签规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。<figcaption> 元素为 figure 添加标题(caption)

4.问: 哪种情况下应该使用small标签?

答:small标签一般使用场景是在版权信息和法律文本里使用,也可以在标题里使用标注附加信息(bootstrap中可见),但不可以用来创建副标题。

5.问:在一个结构良好的web网页,多个h1标签会不利于seo吗?

答:不影响。

6.问:在一个搜索结果页面,你想高亮搜索关键词,你会用什么html标签?

答:<mark>。

<mark> 标签定义带有记号的文本.

7.问:下列代码中scope属性是做什么的?

<article>
<h1>Hello World</h1>
<style scoped>
p {
color: #FF0;
}
</style>
<p>This is my text</p>
</article> <article>
<h1>This is awesome</h1>
<p>I am some other text</p>
</article>

答:scoped 属性是一个布尔属性。如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素。

8.问:HTML5支持块级超链接吗?

答:支持。很多时候,可以用 a标签包含其他块级或内联元素。

9.问:下列代码中,页面一加载会触发http请求吗?

<img src="mypic.jpg" style="visibility: hidden" alt="My picture">

答:会。

10.问:下列代码中,页面一加载会触发http请求吗?

<div style="display: none;">
<img src="mypic.jpg" alt="My photo">
</div>

答:会。

浏览器在代码中发现一个 img 标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;

11.问:下列代码中,main1.css会在"hello world!"输出之前,下载并解析吗?

<head>
<link href="main1.css" rel="stylesheet">
<script>
alert('Hello World');
</script>
</head>

答:会。

浏览器先拿到man1.css文件,然后发现了一个包含一行Javascript代码的 script 标签,赶快执行它;

12.问:下列代码中,在main2.css获取前main1.css一定会被下载解析吗?

<head>
<link href="main1.css" rel="stylesheet">
<link href="main2.css" rel="stylesheet">
</head>

答:不会。

main1.css还不会被解析,要等main2.css下载后一起解析,不过一定下载了。浏览器下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时浏览器的下载过程会启用单独连接进行下载。样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。

13.问:下列代码中,在Paragraph 1渲染在页面之前,main2.css一定会被下载并解析吗?

<head>
<link href="main1.css" rel="stylesheet">
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<link href="main2.css" rel="stylesheet">
</body>

答:是。

渲染和下载是同时进行的,都是从上到下。这里Paragraph 1在main2.css的上方,被渲染了一次,等到main2.css下载并解析时,会对它再渲染一次。所以在Paragraph 1呈现在页面前,main2.css一定会被下载解析。只是它被渲染了两次。

需要提到:js是阻塞加载(不能并行下载和解析)。原因:

当引用了js的时候,浏览器发送一个 js 请求就会一直等待该请求的返回。因为浏览器需要一个稳定的dom树结构,而JS中很有可能有代码直接改变了DOM树结构,比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转,浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以 就会阻塞其他的下载和呈现。

所以js的引用一般也是放到body下面,而css的引用放在head中。

来源:http://davidshariff.com/quiz/

参考:前端面试(HTML)

http://camnpr.com/archives/must-know-the-seven-html5-features.html

前端开发面试题收集(html部分)的更多相关文章

  1. 前端开发面试题收集 JS

    前端开发面试题收集-JS篇 收集经典的前端开发面试题 setTimeout的时间定义为0有什么用? javascript引擎是单线程处理任务的,它把任务放在队列中,不会同步执行,必须在完成一个任务后才 ...

  2. 前端开发面试题收集(css部分)

    http://davidshariff.com/quiz/ 做了下这里面前端开发面试的题,发现有些不会,所以在此做个整理以供自己学习,参考,总结. 1.问: CSS属性是否区分大小写? ul { Ma ...

  3. 前端开发面试题收集(js部分)

    1.问:js中"1"+2+"3"+4 运算结果是? 答: js中,字符串和数值相加,得到的还是字符串,这里的结果1234也是字符串. 2.问:4+3+2+&qu ...

  4. 前端开发面试题收集 HTML

    Doctype是什么?说明特点. <!doctype>声明必须处于HTML文档的头部,在标签之前. <!doctype>声明不是一个HTML标签,是一个用于告诉浏览器使用哪种H ...

  5. 前端开发面试题收集 css

    什么是CSS盒子模型 页面上的每个元素都被浏览器看做是一个矩形的盒子. 由内容.填充.边框.边界组成. 什么是 css sprite 将多个图片拼接在一个图片中,通过background-positi ...

  6. 【理论面试篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题

    ##2017.10.30收集 面试技巧 5.1 面试形式 1)        一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2)        面试官喜欢什么样的人 ü  技术好. ...

  7. 前端开发面试题-CSS(转载)

    本文由 本文的原作者markyun 收集总结. 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(conte ...

  8. 前端开发面试题-HTML(转载)

    本文由 本文的原作者markyun 收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的! ...

  9. 前端开发面试题-JavaScript(转载)

    本文由 本文的原作者markyun 收集总结. 介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol ...

随机推荐

  1. Angular企业级开发(5)-项目框架搭建

    1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-S ...

  2. 学习AOP之透过Spring的Ioc理解Advisor

    花了几天时间来学习Spring,突然明白一个问题,就是看书不能让人理解Spring,一方面要结合使用场景,另一方面要阅读源代码,这种方式理解起来事半功倍.那看书有什么用呢?主要还是扩展视野,毕竟书是别 ...

  3. Web性能优化:图片优化

    程序员都是懒孩子,想直接看自动优化的点:传送门 我自己的Blog:http://cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到 ...

  4. TODO:GitHub创建组织的步骤

    TODO:GitHub创建组织的步骤 使用GitHub进行团队合作,写这个步骤主要作用是为了OneTODO作为一个团队组织进行代码的分享,让更多人来参与. 使用帐号.密码登录GitHub 2.右上角加 ...

  5. JavaScript Date对象

    本篇主要介绍 Date 日期和时间对象的操作. 目录 1. 介绍:阐述 Date 对象. 2. 构造函数:介绍 Date 对象的构造函数new Date()几种方式. 3. 实例方法:介绍 Date ...

  6. Swift enum(枚举)使用范例

    //: Playground - noun: a place where people can play import UIKit var str = "Hello, playground& ...

  7. H5 canvas的 width、height 与style中宽高的区别

    Canvas 的width height属性 1.当使用width height属性时,显示正常不会被拉伸:如下 <canvas id="mycanvas" width=&q ...

  8. BPM的魅力何在?

    BPM(Business Process Management , 企业流程管理平台) 是带动企业流程自动化的帮 手,也是最能忠实反应出企业作业流程问题症结的系统工具,在管理上,BPM可以让管理者利用 ...

  9. 一个软件开发者的BPM之路

    我是小林,一名普通的软件工程师,从事BPM(业务流程管理)软件开发工作.我没有几十年的技术底蕴,无法像大牛们一样高谈阔论,品评BPM开发之道:也不是资深的流程管理专家,能与大家分析流程管理的时弊.我只 ...

  10. TabLayout + ViewPager

    一.实现思路 1.在build.gradle中添加依赖,例如: compile 'com.android.support:support-v4:23.4.0'compile 'com.android. ...