HTML interview summary | More text challenge in August

Summarize some HTML related knowledge, arrange notes to share with you, some knowledge will often be asked in the front interview, so make a record, hope to be helpful to you, if there is any problem, can point out, will actively correct. If you like, you can like or leave a message and I will continue to update the interview questions ~~~~, thank you ~~~

What are the new features of HTML5?

HTML5 is now no longer a subset of SGML, it’s all about graphics, location, storage, multitasking, etc.
Drag the release (Drag and drop) API semantic better content labels (header, nav, footer, value, the article, section), audio, video API (audio, video) Canvas (Canvas) API Geolocation API Local offline storage localStorage Stores data for a long time. Data is not lost after the browser is closed. SessionStorage data in the browser closed after the automatic deletion of form controls, Calendar, date, time, email, URL, search new technology Webworker, WebSocket, Geolocation
– Removed elements that are purely represented: Basefont, big, Center, font, S, strike, TT, U; Elements that negatively affect usability: frame, frameset, noframes; Support for HTML5 new tags:
IE8/IE7/IE6 supports tags generated by the Document.CreateElement method. You can take advantage of this feature to make these browsers support the new HTML5 tag. After the browser supports the new tag, you need to add the default style of the tag:
Of course, the best way is to directly use the mature framework, the most used is HTML5shim framework

<! - [if lt IE 9] ><script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script><! [endif]-->Copy the code

How to distinguish: DOCTYPE declaration \ new structural element \ function element

Doctype? How to distinguish strict mode from promiscuous mode? What do they mean?

What is the function of Doctype?
declaration is called a file type definition (DTD) and tells the browser what type the file is. Let the browser parser know which specification should be used to parse the document.
declaration must be on the first line of the HTML document, which is not an HTML tag.

2. How to distinguish strict mode from promiscuous mode? What do they mean? The standard mode (Strict mode) typography and JS mode of operation operate at the highest standards supported by the browser. In compatibility mode (promiscuous or weird mode), pages are displayed in a loose, backward-compatible manner that mimes the behavior of older browsers in case the site doesn’t work.

How to achieve communication between multiple tabs in the browser?

Use localStorage. SetItem (key,value) in a TAB to add (modify, delete) the content; In another TAB, listen for storage events. The values stored in localStorge.getitem (key) are used to communicate between different labels. 2, call cookie+setInterval() to transfer the information stored in the cookie, read getCookie every certain time to get the information, you can get the information to be transferred at any time.

What are the inline elements? What are the block-level elements? What are the void elements? What is the difference between inline and block-level elements?

Block element: div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, p empty element: br, hr, img, input, link, meta difference: The width and height of an in-line element cannot be set. Block-level elements that do not monopolize the entire row can set the width and height to monopolize the entire row

What’s the difference between SRC and href?

SRC replaces the current element; Href is used to establish a connection between the current document and the referenced resource. Href, short for Hypertext Reference, refers to the location of the network resource, establishing a link between the current element (anchor point) or the current document (link)

<script src ="js.js"></script>

<link href="common.css" rel="stylesheet"/>
Copy the code

The difference between local browser storage cookies, sessionStorage and localStorage?

In later versions of the browser, JS provides sessionStorage and globalStorage. In HTML5 provides localStorage to replace globalStorage. Html5 Web Storage includes two types of Storage: sessionStorage and localStorage. SessionStorage is used to store the data of a session locally. The data can only be accessed by the pages in the same session and is destroyed when the session ends. Therefore, sessionStorage is not a persistent local storage, but only session-level storage. And localStorage for persistent localStorage, unless the active deletion of data, data will never expire. The concept of Web storage and cookie is similar, the difference is that it is designed for larger capacity storage. Cookie size is limited, and every time you request a new page Cookie will be sent to the past, which is a waste of bandwidth, in addition to the Cookie needs to specify the scope, can not be called across the domain. In addition, Web Storage with setItem, the getItem, removeItem, methods of the clear, don’t like cookies need encapsulation setCookie front-end developer himself, getCookie. But cookies can’t be missing either: The role of cookie is to interact with the server, as a part of the HTTP specification, and the Web Storage is only for the local “Storage” data and the browser support in addition to IE7 and below do not support, other standard browsers are fully supported (IE and FF need to run in the Web server), It is worth mentioning that IE always does good, such as IE7, IE6 userData is actually a javascript local storage solution. Through simple code encapsulation can be unified to all browsers to support Web Storage. SetItem, getItem, removeItem, and other cookie and session differences: 1. Cookie data is stored in the client’s browser, while session data is stored on the server. 2, Cookies are not very safe, others can be stored in the local cookie analysis and cookie spoofing consideration for security should use session. 3. The session is saved on the server for a certain period of time. In terms of reducing server performance, cookies should be used when more access is required. 4, a single cookie can not save more than 4K data, many browsers limit a site to save a maximum of 20 cookies. 5. Therefore, personal suggestion: store important information such as login information as SESSION. Other information can be stored in cookies if needed

The difference between XML and JSON?

(1) Data volume. Compared with XML, JSON data is smaller and faster to transfer. (2) Data interaction. The interaction between JSON and JavaScript is more convenient, easier to parse and process, and better data interaction. (3) Data description. JSON is less descriptive of data than XML. (4) Transmission speed. JSON is much faster than XML.

How does the browser render the page?

Pros and cons of iframe?

The advantages of an iframe are as follows: 1. The iframe can display the embedded web page intact. 2. If there are multiple pages that reference the iframe, you can change the content of each page that is invoked by simply changing the content of the iframe. 3. If the page has the same header and version in order to unify the style, it can be written as one page, nested with iframe, which can increase the code reuse. 4. If you encounter slow loading third-party content such as ICONS and ads, these problems can be solved by iframe. The disadvantages of iframe are as follows: 1. It generates many pages and is not easy to manage. 2. If there are too many frames, there may be up and down, left and right scroll bars, and the user experience is poor. 3. The code is complex and cannot be indexed by some search engines. Using iframe is not conducive to search engine optimization. 4. Many mobile devices (PDA phones) cannot fully display the framework, and the device compatibility is poor. 5. Iframe frame pages increase HTTP requests to the server, which is not desirable for large websites.

What is the difference between Canvas and SVG graphics?

1. What is Canvas? Canvas is H5’s new tag Canvas, using JavaScript to draw image 2 in the web page. What is SVG? Scalable Vector Graphics (SVG) based on Extensible Markup Language (XML) Meta tags are used to describe the attributes of an HTML page document, such as the author of the page, date, keywords of the page, refresh, page level Settings, etc. Meta tags can be divided into two parts:

Http-equiv: indicates the HTTP header information
Name: indicates the page description

Http-equiv is similar to the HTTP header protocol and is used to give the browser useful information to help display the content of the web page correctly and accurately. The common http-equiv types are content-type and content-language.