Summary of HTML interview questions H5, questions h5

Summary of HTML interview questions H5, questions h5
1. What are the new features of H5 and what elements are removed? How to deal with the compatibility of new h5 labels in browsers and how to distinguish between html and html5

1. html5 is not a subset of SGL (General Markup Language), but includes: image, location, storage, multitasking, and other functions.

2. Newly Added images are canvas and media playback video and audio elements. localStorage is stored offline locally and data can be saved after the browser is closed. sessionStorage automatically deletes data after the browser is closed.

3. add content labels: article, footer, header, nav, and section. Add Form Controls: calendar, date, time, email, url, and search. control elements: webworker, websocket, and Geolocation.

4. removed elements: Modify tags for basefont, big, center, font, s, strike, tt, and u, and frame, frameset, and noframes with poor performance.

5. Handle compatibility issues with h5 new tag browsers

5.1. IE8-you can use document. createElement to create a tag and provide the default style and capability for the tag.
5.2. The html5shim framework can also be referenced.

6. differentiate html and html5: mainly through the doctype header, new tags and functional elements.

Ii. Benefits of html Semantics

1. When the style is lost, the structure of the page is clear.

2. screen readers can read Content Based on Semantic tags (such as blind websites)

3. pad and mobile phones can be processed differently based on semantic tags. For example, the title on the mobile phone is in bold, while the title on the pad is in a large font.

4. Friendly to search engines and Crawlers

Iii. Advantages and Disadvantages of iframe

1. Advantages

1.1 re-load the new page without refreshing;
1.2. It is convenient for background management or is not used for search engine-friendly systems.

2. Disadvantages:

2.1 do not use search engines, because crawlers can only see the framework but cannot see the framework link.
2.2 The frame is sometimes confusing, especially when multiple frames exit the scroll bar.
2.3. Hard to print (currently only frame pages can be printed, rather than the entire frameset)
2.4 The browser's back button is invalid (he can only move back the iframe currently obtaining the cursor)
2.5. Most tablets and mobile phones do not support frameworks
2.6 Add http requests
2.7 iframe will block page loading, including the window of the iframe page. onload events can be triggered only after iframe is loaded. However, you can use js to dynamically set the src attribute of iframe to avoid this situation (supported by chrome and safari)

3. Differences between iframe and frame
3.1 iframe and frame have the same functions;
3.2 iframe can be used independently, while frame must be used together with frameset
3.5 In html5, iframe only supports the src attribute, but does not support frameset and frame.

Iv. functions and applications of label labels

1. the lable label is mainly stored as a Title Description element. It generally includes: for association and the Way to put form control in the label.
2. Main attributes of lable labels:
2.1. Tag Association for the for attribute, but the for Attribute must be a form control tag.
2.2. accesskey attribute: used to set the hot key, but cannot conflict with the browser hot key. Otherwise, the browser's hot key will be triggered first.
3. label nesting
3.1 labe labels cannot be nested.
3.2 label can contain only one input child (including elements such as checkbox and text), button, select, and textarea.
3.3 When label is nested, event triggering follows the bubble principle.

<label id="inputOne" >    <input id="inputOne_inner" type="button" value="Test" /></label>

<script type="text/javascript">    $(function(){        $('#inputOne').click(function(){            console.log('label.........');        });        $('#inputOne_inner').click(function(event){            event.stopPropagation();            console.log('input.........')        });    });</script>

Because the bubble is blocked in the click event of inputOne_inner, only 'input ................... '.
4. for Association
4.1. for Association, events on the labe tag will trigger the corresponding event of the associated element (and the bubble blocking action of the associated element is invalid ):

<Label id = "labeTow" for = "inputTow"> Tow-label </label> <! -- The Event bound to labe triggers the event of the associated element --> <input id = "inputTow" type = "button" value = "Tow"/>

<script type="text/javascript">    $(function(){        $('#labeTow').click(function(){            console.log('labelTow.........');        });        $('#inputTow').click(function(event){            event.stopPropagation();            console.log('inputTow.........');        });    });</script>

Click labeTow to make the following output (the label will first trigger its own event and then trigger the corresponding event of the associated element ):
LabelTow ................
InputTow ...............
Click inpuTow to make the output as follows:
InputTow .............
5. The label cannot be the descendant of the and button labels.
6. The form attribute is added to the lable label in html5. One or more forms to which the rule label belongs