[英]Top 10 HTML 5 Interview Questions
http://www.webdevelopmenthelp.net/2013/04/HTML5-Interview-Questions.html
It's a collection of selected top 10 HTML5 Interview Questions and Answers. These are the most frequently asked interview questions for web developers.
1.What's new HTML 5 DocType and Charset?
As HTML 5 is now not subset of SGML so its DocType is simplified as follows:
<!doctype html>
And HTML 5 uses UTF-8 encoding as follows:
<meta charset="UTF-8">
2.How can we embed Audio in HTML 5?
HTML 5 comes with a standard way of embedding audio files. Supported audio formats are MP3, Wav and Ogg.
<audio controls>
<source src="jamshed.mp3" type="audio/mpeg">
Your browser does'nt support audio embedding feature.
</audio>
3.How can we embed Video in HTML 5?
Same like audio, HTML 5 defined standard way of embedding video files.Supported video formats are MP4, WebM and Ogg.
<video width="450" height="340" controls>
<source src="jamshed.mp4" type="video/mp4">
Your browser does'nt support video embedding feature.
</video>
4.What are the new media element in HTML 5 other than audio and video?
HTML 5 has strong support for media. Other than audio and video tags, it comes with the following tags:
- <embed> acts as a container for external application.
- <track> defines text track for media.
- <source> is helpful for multiple media sources for audio and video.
5.What is the usage of canvas Element in HTML 5?
<canvas> is an element in HTML5 which we can use to draw graphics with the help of scripting (which is most probably JavaScript).
This element behaves like a container for graphics and rest of things will be done by scripting. We can draw images, graphs and a bit of animations etc using <canvas> element.
<canvas id="canvas1" width="300" height="100">
</canvas>
6.What are the different types of storage in HTML 5?
HTML 5 has the capability to store data locally. Previously it was done with the help of cookies.
Exciting thing about this storage is that its fast as well as secure.
There are two different objects which can be used to store data.
- localStorage object stores data for a longer period of time even if the browser is closed.
- sessionStorage object stores data for a specific session.
7.What are the new Form Elements introduced in HTML 5?
There are a number of new form elements has been introduced in HTML 5 as follows:
- datalist
- datetime
- output
- keygen
- date
- month
- week
- time
- number
- range
- url
8.What are the deprecated Elements in HTML5 from HTML4?
Elements that are deprecated from HTML 4 to HTML 5 are:
- frame
- frameset
- noframe
- applet
- big
- center
- basefront
9.What are the new APIs provided by HTML 5 standard?
HTML 5 standard comes with a number of new APIs. Few of it are as follows:
- Media API
- Text Track API
- Application Cache API
- User Interaction
- Data Transfer API
- Command API
- Constraint Validation API
- History API
- and many more....
10.What is the difference between HTML 5 Application Cache and regular HTML Browser Cache?
One of the key feature of HTML 5 is "Application Cache" that enables us to make an offline version of a web application. It allows to fetch few or all of website contents such as HTML files, CSS, images, javascript etc locally. This feature speeds up the site performance. This is achieved with the help of a
manifest file defined as follows:
<!doctype html>
<html manifest="example.appcache">
.....
</html>
As compared with traditional browser caching, Its not compulsory for the user to visit website
contents to be cached.
1. HTML5 新的 DocType 和 Charset 是什么？
HTML5 现在已经不是 SGML 的子集，DocType 简化为：
- <!doctype html>
HTML 5 指定 UTF-8 编码的方式如下：
- <meta charset="UTF-8">
2. 如何在 HTML5 页面中嵌入音频?
HTML 5 包含嵌入音频文件的标准方式，支持的格式包括 MP3、Wav 和 Ogg：
- <audio controls>
- <source src="jamshed.mp3" type="audio/mpeg">
- Your browser does'nt support audio embedding feature.
- </audio>
3. 如何在 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>
4.除了音频和视频，HTML5 还支持其他什么新的媒体元素？
HTML 5 对媒体支持很强，除了 audio 和 video 外，还提供：
- <embed> 作为外部应用的容器
- <track> 定义媒体的文本跟踪
- <source> 对多种媒体源的支持很有帮助
5.What is the usage of canvas Element in HTML 5?
<canvas> is an element in HTML5 which we can use to draw graphics with the help of scripting (which is most probably JavaScript).
This element behaves like a container for graphics and rest of things will be done by scripting. We can draw images, graphs and a bit of animations etc using <canvas> element.
<canvas id="canvas1" width="300" height="100">
</canvas>
6. HTML5 有哪些不同类型的存储？
HTML 5 支持本地存储，在之前版本中是通过 Cookie 实现的。HTML5 本地存储速度快而且安全。
有两种不同的对象可用来存储数据：
- localStorage 适用于长期存储数据，浏览器关闭后数据不丢失
- sessionStorage 存储的数据在浏览器关闭后自动删除
7. HTML5 引入什么新的表单属性？
HTML5 引入大量新的表达属性：
- datalist
- datetime
- output
- keygen
- date
- month
- week
- time
- number
- range
- url
8. 与 HTML4 比较，HTML5 废弃了哪些元素？
废弃的元素包括：
- frame
- frameset
- noframe
- applet
- big
- center
- basefront
9. HTML5 标准提供了哪些新的 API？
HTML 5 提供很多新的 API，包括：
- Media API
- Text Track API
- Application Cache API
- User Interaction
- Data Transfer API
- Command API
- Constraint Validation API
- History API
- and many more....
10. HTML5 应用缓存和常规的 HTML 浏览器缓存有何差别？
HTML5 的应用缓存最关键的就是支持离线应用，可获取少数或者全部网站内容，包括 HTML、CSS、图像和 JavaScript 脚本并存在本地。该特性加速了网站的性能，可通过如下方式实现：
- <!doctype html>
- <html manifest="example.appcache">
- .....
- </html>
与传统的浏览器缓存比较，该特性并不强制要求用户访问网站。