整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
TML5技术对于产品经理来说真的很炫，很酷，对于编程者来说，这都是心血设计啊。以下H5测验提供了与HTML5框架相关的多选题（MCQ）。如果自认为自己学到了点东西，那么自己测试一下吧。
A- 苹果野生动物园
B- Google Chrome
C- 以上两种。
D- 以上都没有。
A- 页脚
B- 导航
C节
D- 对话框
A-周
B时间
C号
D-范围
A- 输出
B- 占位符
C- 自动对焦
D- 必需
A- 在会话终止后，会话存储数据将被浏览器删除。
B- 如果要清除所有设置，您需要调用localStorage.clear（）方法。
C- 以上两种。
D- 以上都没有。
A- 支持常用的音频格式ogg，mp3和wav。
B- 您可以使用<source>标签来指定媒体以及媒体类型和许多其他属性。
C- 音频元素允许多个源元素和浏览器将使用第一个识别的格式。
D- 以上所有。
A- 项目
B- itemprop
C- 项目检查
D- 项目组
A- onbeforeload
B- onblur
C- onlostfocus
D- 失物招领
A- ondragleave
B- ondrag
C-ondragover
D- ondragstart
A-载入的元数据
B- onloadstart
C- 消息
D- onoffline
答案：C 说明：以上浏览器均支持HTML5。
答案：B 说明：'nav'标签表示用于导航的文档的一部分。
答案：C 说明：'number'输入控件只接受数值。step属性指定精度，默认为1。
答案：B 说明：HTML5引入了一个名为placeholder的新属性。<input>和<textarea>元素上的此属性为用户提供了可在字段中输入的内容。占位符文本不能包含回车符或换行符。
答案：A 说明:在会话终止后，会话存储数据将被浏览器删除。
答案：D 说明:所有上述选项都是正确的。
答案：B 说明:itemprop - 用于分组项目。
答案：B 说明:onblur - 当窗口失去焦点时触发事件。
答案：C 说明:ondragover - 当元素被拖动到有效的放置目标上时触发事件。
答案：D说明:onoffline - 当文档脱机时触发事件。
最后想问问10道题都答对的有几个呢？欢迎下方留言和学技巧一起探讨学习H5技术。
TML称为超文本标记语言，是一种标识性的语言。在前端开发中离不开HTML，支持不同数据格式的文件镶入，前端工程师在面试过程中涉及到一些基础知识，常见的前端HTML5面试题有哪些呢？
本文，千锋武汉Web前端培训小编分享一些HTML5面试题及答案。准备参加web前端面试的小伙伴们来看一看吧，希望能够对大家有所帮助！
1、 什么是 HTML5？
HTML5是HTML(超文本标记语言)的最新版本。它是一种为万维网构建和显示内容的语言，万维网是互联网的核心技术。WHATWG(Web超文本应用技术工作组)另一次W3C个人聚会认为，W3C没有认真考虑当前方言的现实改进需求，它已经开始处理HTML-HTML5的新确定。因此，HTML5是HTML 4.01和XHTML 1.0的另一种改编，它集中于Web应用程序设计者的必要性上，并且还倾向于在当前细节中发现的问题。
具体而言，HTML5包含许多新的句法特征。新元素，如<section>, <article>, <header>和<nav>，是文档语义实质的重要组成部分。它们还包含<section>, <article>, <header>和<canvas>标记，以及SVG内容的集成。这些组件旨在简化合并和处理网络上的交互式媒体和图形内容，而无需诉诸限制性模块和API。少数成分和性状已被排出。一些组件，例如，<video>, <audio>和<menu>已经被更改、重新定义或标准化。API和DOM不再被重新考虑，而是HTML5规范的基本部分。
2、什么是<!DOCTYPE >？是否需要在HTML5中使用？
<!DOCTYPE>是关于页面写入了什么版本的HTML的指令。<!DOCTYPE>标记没有结束标记，它不区分大小写。<!DOCTYPE>声明必须是HTML5文档中的第一行，在标记之前。如HTML 4.01，全部<!DOCTYPE>声明需要引用文档类型定义(DTD)，因为HTML 4.01是基于标准通用标记语言(SGML)的。而HTML5并不基于SGML，因此不需要对文档类型定义(DTD)的引用。
3、HTML5有哪些的新特性？
HTML5中最有趣的新特性：
* 二维画图中的<canvas>元素
* 媒体播放的<video> 和<audio>元素
* 支持本地存储
* 新的内容特定元素，如<section>，<article>，<footer>，<header>，<nav>，<menu>
4、HTML5的优势有哪些？
一些网络研究的前5名似乎提供了以下HTML5特性;
* 相关性
* 标记/代码简洁
* 语义清晰
* 简明的表单和网络应用程序
* 缓存式离线应用程序
5、Canvas是什么？怎样写Canvas？
Canvas是HTML5的一个元素，它使用JavaScript在网页上绘制图形。Canvas是一个矩形区域。它的每一个像素都可以由HTML5语言来控制。使用Canvas绘制路径、框、圆、字符和添加图像有几种方法。如果要在我们的HTML文档中添加Canvas标签，我们需要ID、宽度和高度。下面是如何将基本Canvas标签写入HTML文档的示例。
<canvas id="myFirstCanvas" width="100" height="100"> </canvas>
6、HTML5地理定位是什么？如何使用？
HTML5 地理定位用于定位用户的位置HTML5 地理定位API用于获取用户的地理位置。由于这会侵犯用户隐私，除非用户批准，否则该位置不可用。使用 getCurrentPosition() 方法获取用户的位置。下面的示例是返回用户位置的纬度和经度的简单地理定位示例：
<script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude +"Longitude: " + position.coords.longitude; } </script>
7、使用HTML5需要遵守哪些规则？
* 新的特性应该基于HTML、CSS、DOM和JavaScript
* 减少对外部插件的需求(如Flash)
* 更好的错误处理
* 更多的替换脚本的标记
* HTML5应与设备无关
* 开发过程必须可视化
8、HTML5中的Session storage存储对象是什么？如何创建和访问？
Session storage 存储对象存储一个会话的数据。当用户关闭浏览器窗口时，数据将被删除。如下所示，我们可以在这里创建“blogName”作为会话并访问Session storage<script type="text/javascript"> sessionStorage.blogName="OnlineInterviewQuestions"; document.write(sessionStorage.name); </script>
9、Html5应用程序缓存和Html浏览器缓存有什么区别？
新的HTML5规范允许浏览器在连接客户端时预取一些或全部网站资产，如HTML文件、图像、CSS、JavaScript等。对于获取此内容，用户以前没有必要访问此内容。换句话说，应用程序缓存可以预取完全未被访问的页面，从而在常规浏览器缓存中不可用。预取文件可以加速站点的性能，尽管您最初使用带宽下载这些文件。
10、简要描述下最新的HTML5标准中的API是什么？
下面是HTML 5标准提供的新API列表。* Canvas ：Canvas 由HTML代码中定义的具有高度和宽度属性的可绘制区域组成。JavaScript代码可以通过一组完整的绘图函数访问该区域，这与其他常见的2DAPI类似，因此允许动态生成图形。Canvas 的一些预期用途包括构建图形、动画、游戏和图像合成。
* 定时媒体回放
* 离线存储数据库
* 文档编辑
* 拖放
* 跨文档消息传递
* 浏览器历史管理
* MIME类型和协议处理程序注册
11、LocalStorage本地存储在HTML5中有什么用途？
LocalStores 本地存储就是一个轻量级的sqllite数据库。可以在客户端本地存储数据，用于在断开网络连接的情况下读取本地缓存cookies，LocalStores可以将数据长期保存在客户端，直至人工清除为止，接下来演示下实例：
1、使用localStorage对象保存数据：
localStorage.setItem(key , value)
2、使用localStorage获取保存的数据：
localStorage.getItem(key)
3、清除localStorage保存的数据：
localStorage.removeItem(key)
4、清除全部localStorage对象保存的数据：
localStorage.clear( )
12、你能列出HTML5中新的输入类型属性吗？
search：用于搜索域，比如站点搜索或 Google 搜索，域显示为常规的文本域。
url ：用于应该包含 URL 地址的输入域在提交表单时，会自动验证 url 域的值。
email：用于应该包含 e-mail 地址的输入域，在提交表单时，会自动验证 email 域的值。
datetime：选取时间、日、月、年(UTC 时间)
date：选取日、月、年
month：选取月、年
week：选取周和年
time：选取时间(小时和分钟)
datetime-local：选取时间、日、月、年(本地时间)
number：用于应该包含数值的输入域，您还能够设定对所接受的数字的限定。
range：用于应该包含一定范围内数字值的输入域，类型显示为滑动条。
以上千锋武汉Web前端培训小编仅介绍了部分Web前端HTML面试题及答案，如果想要在众多竞争者中脱颖而出，除了专业技能还需要掌握一些求职面试的技巧，在面试过程中争取更多的主动权。关注“武汉千锋”微信公众号，会定期为大家分享最新Web前端面试题、发展趋势、学习资料，助力大家学好Web前端。
如果你也想快速学好Web前端，可以来千锋武汉Web前端培训，更可以申请两周免费试听课程，让你亲身实地感受高品质面授教学。
千锋武汉Web前端培训课程以实战项目驱动教学，结合时下流行技术，加入大数据可视化内容，同时深化了PHP+MySQL开发内容，精准匹配企业线下及未来需求，除了培养学员的开发技术，着力培养学员的大前端视角与全栈思维，深度贯穿前端后端开发，紧贴主流企业一线需求，助力千锋学员毕业即高薪就业。
众号【传智播客博学谷】回复关键词：前端 PS Java(100G) Python(80G) 大数据 区块链 测试 PPT JS(40g+300教程) HTML 简历 领取相关学习资料！
一、HTML
1、<image>标签上title属性与alt属性的区别是什么？
alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等。
title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。参考《alt和title属性的区别及应用》
2、分别写出以下几个HTML标签：文字加粗、下标、居中、字体
加粗：<b>、<strong>
下标：<sub>
居中：<center>
字体：<font>、<basefont>、参考《HTML标签列表》
3、请写出至少5个html5新增的标签，并说明其语义和应用场景
section：定义文档中的一个章节
nav：定义只包含导航链接的章节
header：定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
footer：定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
aside：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。
参考《HTML5 标签列表》
4、请说说你对标签语义化的理解？
a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
b. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
c. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
d. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
5、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
声明位于文档中的最前面，处于 标签之前。告知浏览器以何种模式来渲染文档。
严格模式的排版和 JS 运作模式是，以该浏览器支持的最高标准运行。
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
6、你知道多少种Doctype文档类型？
标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，
Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
7、HTML与XHTML——二者有什么区别
a. XHTML 元素必须被正确地嵌套。
b. XHTML 元素必须被关闭。
c. 标签名必须用小写字母。
d. XHTML 文档必须拥有根元素。
参考《XHTML 与 HTML 之间的差异》
8、html5有哪些新特性、移除了那些元素？
a. HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
b. 拖拽释放(Drag and drop) API
c. 语义化更好的内容标签（header,nav,footer,aside,article,section）
d. 音频、视频API(audio,video)
e. 画布(Canvas) API
f. 地理(Geolocation) API
g. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
h. sessionStorage 的数据在页面会话结束时会被清除
i. 表单控件，calendar、date、time、email、url、search
j. 新的技术webworker, websocket等
移除的元素：
a. 纯表现的元素：basefont，big，center, s，strike，tt，u；
b. 对可用性产生负面影响的元素：frame，frameset，noframes；
9、iframe的优缺点？
优点：
a. 解决加载缓慢的第三方内容如图标和广告等的加载问题
b. iframe无刷新文件上传
c. iframe跨域通信
缺点：
a. iframe会阻塞主页面的Onload事件
b. 无法被一些搜索引擎索引到
c. 页面会增加服务器的http请求
d. 会产生很多页面，不容易管理。
参考《iframe的一些记录》
10、Quirks模式是什么？它和Standards模式有什么区别？
在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。IE6以前的页面大家都不会去写DTD，所以IE6就假定 如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。
区别：总体会有布局、样式解析和脚本执行三个方面的区别。
a. 盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。
b. 设置行内元素的高宽：在Standards模式下，给等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
c. 设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用
d. 设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。
11、请阐述table的缺点
a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。
b. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td
c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱
d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。
e. 不够语义
参考《为什么说table表格布局不好？》
12、简述一下src与href的区别
src用于替换当前元素；href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接
公众号【传智播客博学谷】回复关键词：前端 PS Java Python 大数据 区块链 测试 PPT JS HTML 简历 领取相关学习资料！
*请认真填写需求信息，我们会在24小时内与您取得联系。
