H5 Front end face test

Source: Internet
Author: User
Tags time limit
H5 front end face questions and Answers (1)
A few days ago to interview a company, the whole company to change the face of the test questions.
1. The new HTML5 document type and character set are.

The HTML5 document type is simple:

<!doctype html>

HTML5 uses the UTF-8 encoding example:

<meta charset= "UTF-8" >

How to embed audio in 2.HTML5.

Currently, the audio element supports three audio formats:

Copy Code

<!--control property to add playback, pause, and volume controls-->
<!--audio element allows multiple source elements. The source element can link different audio files. The browser will use the first recognizable format-->
<audio controls= "Controls" >
<source src= "jamshed.mp3″type=" Audio/mpeg ">
<source src= "jamshed.ogg″type=" Audio/ogg ">
Your Browser does ' NT support audio embedding.
</audio>

Copy Code
How to embed video in 3.HTML5.

Currently, the video element supports three types of videos:

<!--like audio elements-->
<video width= "height=" controls= "Controls" >
<source src= "Movie.ogg" type= "Video/ogg" >
<source src= "Movie.mp4" type= "Video/mp4" >
Your Browser does not support the "video tag."
</video>

4. What media labels are available in addition to audio and VIDIO,HTML5?

<embed> tags define embedded content, such as Plug-ins.

<embed src= "helloworld.swf"/>

The <source> tab allows you to specify alternate video/audio files for browsers to choose from for their media type or codec support.

<video width= "height=" controls= "Controls" >
<source src= "Movie.ogg" type= "Video/ogg" >
<source src= "Movie.mp4" type= "Video/mp4" >
Your Browser does not support the "video tag."
</video>

<track> play video with subtitles:

<video width= "height=" controls= "Controls" >
<source src= "Forrest_gump.mp4" type= "Video/mp4"/>
<source src= "Forrest_gump.ogg" type= "Video/ogg"/>
<track kind= "Subtitles" src= "subs_chi.srt" srclang= "en" label= "Chinese" >
<track kind= "Subtitles" src= "subs_eng.srt" srclang= "en" label= "中文版" >
</video>

What is the difference between a 5.HTML5 storage type.

HTML5 can store data locally, previously used by cookies. HTML5 offers the following two local storage scenarios:

Localstorage-There is no time limit for data storage, data will never expire, and closing browsers will not be lost
Sessionstorage-For a session data store, the page in the same conversation can be accessed and the data is destroyed when the session ends.

What is the effect of 6.HTML5 canvas elements.

For drawing graphics on a Web page, the element's label is powerful in that it can be manipulated directly on the HTML5.
Copy Code

<!doctype html>
<meta charset= "UTF-8" >
<title>Document</title>
<body>
<canvas id= "Canvas" ></canvas>
<script>
var Canvas=document.getelementbyid (' canvas ');
var ctx=canvas.getcontext (' 2d ');
ctx.fillstyle= ' #FF0000 ';
Ctx.fillrect (0,0,200,200);
</script>
</body>

Copy Code

Effect:

What are the new form elements 7.HTML5?

The new input type:

New Form elements:

8.HTML5 discarded those HTML4 tags.

What new APIs are provided by the 9.HTML5 standard.

1:canvas, needless to say, can draw a lot of gorgeous graphics, or even directly to make pseudo 3D games.

2: Media control, also very good understanding (literal translation is the playback function, if only with html5.0 below the label to write, the previous music playback is not possible to achieve the scroll bar. )

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.