A small collection of small knowledge points of HTML5

1, DOCTYPE role? What is the difference between standard mode and compatibility mode?

(1), <! The doctype> declaration is located in the first line in the HTML document, before the

(2), standard mode of typesetting and JS operation mode are all supported by the browser to the highest standards of operation. In compatibility mode, pages are displayed in a relaxed, backwards-compatible fashion, simulating the behavior of older browsers to prevent sites from working.

2, HTML5 why only need to write <! DOCTYPE html>?

HTML5 is not SGML-based, so there is no need to reference the DTD, but it requires DOCTYPE to regulate the browser's behavior (let the browser run as it should), and HTML4.01 is based on SGML, so the DTD needs to be referenced, To inform the browser document of the type of document used.

3. What are the elements in the line? What are block-level elements? What are the empty (void) elements?

First: The CSS specification stipulates that each element has the display property, determines the type of the element, each element has a default display value, such as the display of the div default value is "block", or "blocks-level" element; The span default display property value is " Inline ", is the" inline "element.

(1) Inline elements are: A b span img input Select strong (Accent tone)

(2) block-level elements are: div ul ol li DL DT DD H1 H2 H3 H4...P

(3) Common empty elements:

<br>

Little-known is:

<area><base><col><command><embed><keygen><param><source>< Track><wbr>

4. What is the difference between using link and @import when page import style?

(1) Link is XHTML tag, in addition to loading CSS, can also be used to define RSS, define the Rel connection properties, and @import is provided by CSS, can only be used to load CSS;

(2) When the page is loaded, link will be loaded at the same time, and the CSS referenced by @import will wait until the page is loaded and then loaded;

(3) Import is CSS2.1 proposed, only in IE5 above to be recognized, and link is XHTML label, no compatibility problem;

5, introduce your understanding of the browser kernel?

It is divided into two main parts: the rendering engine (layout engineer or rendering engine) and the JS engine.

Rendering Engine: Responsible for obtaining the content of the Web page (HTML, XML, images, etc.), organizing the message (such as adding CSS, etc.), and calculating how the Web page is displayed, and then outputting it to the monitor or printer. The browser's kernel is different from the syntax of the Web page, so the effect of rendering is not the same. The kernel is required for all Web browsers, e-mail clients, and other applications that need to edit and display Web content.

JS Engine: Parsing and executing JavaScript to achieve the dynamic effect of Web pages.

The first rendering engine and the JS engine are not clearly distinguished, and then the JS engine becomes more independent, the kernel tends to refer only to the rendering engine.

6. What are the common browser cores?

Trident kernel: ie,maxthon,tt,the world,360, Sogou browser and so on. [also known as MSHTML]

Gecko Kernel: Netscape6 and above, Ff,mozillasuite/seamonkey, etc.

Presto kernel: Opera7 and above. [Opera kernel originally: Presto, now: Blink;]

WebKit kernel: Safari,chrome and so on. [Chrome's: Blink (WebKit's branch)]

7. What are the new features and elements removed from HTML5? How do I handle browser compatibility issues with HTML5 new tags? How do I differentiate between HTML and HTML5?

* HTML5 is now not a subset of SGML, mainly about image, location, storage, multi-tasking and other functions.

Painting canvas;

Video and audio elements for media playback;

Local offline storage Localstorage long-term storage data, the browser is closed after the data is not lost;

Sessionstorage data is automatically deleted after the browser is closed;

Semantically better content elements, such as article, footer, header, nav, section;

form controls, calendar, date, time, email, url, search;

New technology Webworker, WebSocket, geolocation;

Elements to remove:

Elements of pure expression: Basefont,big,center,font, s,strike,tt,u;

Elements that have a negative impact on usability: frame,frameset,noframes;

* Support HTML5 New Tags:

IE8/IE7/IE6 supports labels generated by the Document.createelement method,

You can use this feature to enable these browsers to support HTML5 new tags,

After the browser supports the new tab, you also need to add a default style for the label.

Of course, you can use the mature framework directly, such as Html5shim;

<!--[If Lt IE 9]>

<script> src= "Http://html5shim.googlecode.com/svn/trunk/html5.js" </script>

<! [endif]-->

* How to distinguish the Html5:doctype declaration \ New structure element \ Function element

8. Describe your understanding of HTML semantics?

Do the right thing with the right label.

HTML semantics to make the content of the page structured, clearer structure, easy to browser, search engine analysis;

It is displayed in a document format even in the absence of CSS, and is easy to read;

Search engine crawler also relies on the HTML tag to determine the context and the weight of each keyword, in favor of SEO;

Make it easier for people who read the source code to block the site and maintain understanding of the site.

9, HTML5 offline storage How to use, work principle can explain?

When a user is not connected to the Internet, the site or app can be accessed normally, and the cached files on the user's machine are updated when the user connects to the Internet.

Principle: HTML5 's offline storage is based on a new. AppCache file's caching mechanism (not the storage technology) that stores resources offline through the parse list on the file, and these resources are stored as cookies. Then, when the network is offline, the browser will display the page with data that is stored offline.

How to use:

1, the page head as below add a manifest attribute;

2, the Cache.manifest files in the preparation of offline storage resources;

CACHE MANIFEST

#v0.11

CACHE:

Js/app.js

Css/style.css

NETWORK:

Resourse/logo.png

FALLBACK:

//offline.html

3, in the offline state, the operation Window.applicationcache to achieve the requirements.

10. How does the browser manage and load the HTML5 offline storage resources?

In the case of online, the browser found that the HTML header has the Manifest property, it will request the manifest file, if it is the first time to access the app, then the browser will be based on the contents of manifest files to download the appropriate resources and offline storage. If the app has been accessed and the resource has been stored offline, the browser will load the page with an offline resource, then the browser will compare the new manifest file with the old manifest file, and if the file does not change, do nothing, if the file changes, Then the resources in the file will be downloaded again and stored offline.

Offline, the browser directly uses resources that are stored offline.

11, please describe the difference between cookies,sessionstorage and localstorage?

A cookie is the data (usually encrypted) stored on the user's local terminal (client Side) for the purpose of marking the user's identity.

Cookie data is always carried in the same-Origin HTTP request (even if not required), and is passed back and forth between the browser and the server.

Sessionstorage and Localstorage do not automatically send data to the server and are saved locally only.

Storage size:

The cookie data size cannot exceed 4k.

Sessionstorage and Localstorage have a storage size limit, but are much larger than cookies and can reach 5M or larger.

Period of time:

Localstorage Store persistent data, the browser is closed after the data is not lost unless the data is actively deleted;

Sessionstorage data is automatically deleted after the current browser window is closed.

Cookies are set to expire before the cookie expires, even if the window or browser is closed

12. What are the disadvantages of IFRAME?

*iframe will block the OnLoad event on the main page;

* Search engine Retrieval program can not read this page, not conducive to SEO;

*iframe shares the connection pool with the main page, and the browser restricts the connection to the same domain, which can affect the parallel loading of the page.

These two drawbacks need to be considered before using an IFRAME. If an IFRAME is needed, it is best to use JavaScript

Dynamically adds the SRC attribute value to the IFRAME, which can bypass the above two questions.

13, what is the role of label? How is that used?

Label label to define the relationship between form controls, and when the user selects the label, the browser automatically shifts focus to the label-related form controls.

<label for= "Name" >Number:</label>

<input type= "text" name= "name" id= "name"/>

<label>date:<input type= "text" name= "B"/></label>

14. How does the HTML5 form turn off auto-complete?

Set the form or input to autocomplete=off that you do not want to prompt.

15, how to realize the communication between multiple tabs in the browser? (Ali)

WebSocket, Sharedworker;

You can also call Localstorge, cookies and other local storage methods;

Localstorge when added, modified, or deleted in another browsing context, it triggers an event,

We listen to the event, control its value to the page information communication;

Note that Quirks:safari throws a Quotaexceedederror exception when setting the Localstorge value in the non-trace mode;

16, WebSocket How to be compatible with low browser? (Ali)

Adobe Flash sockets,

ActiveX Htmlfile (IE),

Send XHR based on multipart encoding,

XHR based on long polling

17. What is the use of page visibility (pages Visibility API)?

Detects whether the page is currently visible through the value of visibilitystate, and when the page is opened;

Automatically pauses the playback of music or video when the page is switched to another background process;

18, how to implement a circular clickable area on the page?

1, Map+area or SVG

2, Border-radius

3, Pure JS implementation needs to find a point in the not round simple algorithm, get mouse coordinates and so on

19, the realization does not use the border to draw the 1px High Line, can maintain the consistent effect in the different browser standard mode and the strange mode.

<div style= "height:1px;overflow:hidden;background:red" ></div>

20, the Web page verification code is what, is to solve any security problems.

Distinguish whether the user is a computer or a human public automatic program. Can prevent malicious crack password, brush tickets, forum irrigation;

Effectively prevent hackers on a particular registered user with a specific program of brute force to make a continuous landing attempt.

21. The difference between the title and the H1, the difference between B and strong, and the difference between I and EM?

The Title property does not have the explicit meaning only is the title, H1 is the level clear title, to the page information crawl also has the very big influence;

Strong is the key content, the meaning of the tone strengthening, the use of reading equipment to read the network:<strong> will be stressed, and <B> is to display the emphasis of content.

I content is shown in italics, EM denotes the underlined text;

Physical style Elements--Natural style label

b, I, U, S, pre

Semantic style Elements--Semantic style tags

Strong, EM, ins, Del, code

It should be accurate to make the semantic style label, but not abusive, if you are not sure when you prefer to use natural style labels.

-------------"This article reproduced!

A small collection of small knowledge points of HTML5