HTML interview summary

Summary of questions: 160cbf100651ed https://segmentfault.com/a/1190000040189169

What are the new features of HTML5?

• HTML5 is no longer a subset of SGML. It is mainly about the addition of functions such as images, locations, storage, and multitasking.
• Drag and drop API
  Content tags with better semantics (header, nav, footer, aside, article, section)
  Audio, video API (audio, video)
  Canvas API
  Geolocation API
  Local offline storage localStorage long-term storage of data, data will not be lost after the browser is closed; sessionStorage data is automatically deleted after the browser is closed
  Form controls, calendar, date, time, email, url, search
  New technologies webworker, websocket, Geolocation
• Removed element
  Purely expressive elements: 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 tags generated by the document.createElement method,
  You can use this feature to make these browsers support HTML5 new tags,
  After the browser supports the new tag, you also need to add the default style of the tag:
• Of course, the best way is to use a mature framework directly, and the most used is the html5shim framework
  <!--[if lt IE 9]>
  <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
  <![endif]-->
  How to distinguish: DOCTYPE declaration\new structural elements\functional elements

Doctype work? How to distinguish between strict mode and promiscuous mode? What do they mean?

1. What is the function of Doctype?
The <!DOCTYPE> declaration is called a document type definition (DTD), and the purpose of the declaration is to tell the browser the type of the document. Let the browser parser know which specification should be used to parse the document. The <!DOCTYPE> declaration must be in the first line of the HTML document. This is not an HTML tag.

2. How to distinguish between strict mode and promiscuous mode? What is their meaning?
Both the standard mode (strict mode) typesetting and JS operation mode run at the highest standard supported by the browser.

In compatibility mode (promiscuous mode or weird mode), the page is displayed in a loosely backward compatible manner, simulating the behavior of old browsers to prevent the site from not working.

How to realize the communication between multiple tabs in the browser?

One, call localStorage

Use localStorage.setItem(key, value) to add (modify, delete) content in one tab; listen to storage events in another tab. Through the value stored in localstorge.getItem(key), communication between different tab pages is realized.

Two, call cookie+setInterval()

Store the information to be delivered in a cookie, and read getCookie to get the information at regular intervals, and then you can get the information to be delivered at any time.

are the elements in the 160cbf10065456 line? What are the block-level elements? What are the void elements? What is the difference between inline elements and block-level elements?

Inline elements are: a, b, span, img, input, select, strong

Block-level elements are: div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, p

Empty elements: br, hr, img, input, link, meta

the difference:

In-line elements cannot be set width and height, and do not monopolize the entire line

Block-level elements can be set width and height, monopolizing the entire row

Briefly describe the difference between src and href?

src is used to replace the current element; href is used to establish a connection between the current document and the referenced resource.

src is the abbreviation of source, pointing to the location of external resources, the content pointed to will be embedded in the document where the current tag is located

href is the abbreviation of Hypertext Reference, points to the location of network resources, and establishes a link with the current element (anchor) or the current document (link)

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

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

is the difference between the browser's local storage of cookies, sessionStorage, and localStorage?

In higher versions of browsers, js provides sessionStorage and globalStorage. LocalStorage is provided in HTML5 to replace globalStorage.

Web Storage in html5 includes two storage methods: sessionStorage and localStorage.

sessionStorage is used to locally store the data in a session. These data can only be accessed by pages in the same session and the data will be destroyed when the session ends. Therefore, sessionStorage is not a persistent local storage, but a session-level storage.

LocalStorage is used for persistent local storage. Unless the data is actively deleted, the data will never expire.

The difference between web storage and cookies
The concept of Web Storage is similar to cookie, the difference is that it is designed for larger capacity storage. The size of the cookie is limited, and each time you request a new page, the cookie will be sent, which invisibly wastes bandwidth. In addition, the cookie needs to specify the scope and cannot be called across domains.

In addition, Web Storage has methods such as setItem, getItem, removeItem, and clear, unlike cookies, which require front-end developers to encapsulate setCookie and getCookie.

But cookies are also indispensable: the role of cookies is to interact with the server and exist as part of the HTTP specification, while Web Storage is only for the purpose of "storing" data locally.

Browser support In addition to IE7 and below, 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 things. For example, the userData in IE7 and IE6 is actually It is a solution for javascript local storage. Through simple code packaging, it can be unified that all browsers support web storage.

Both localStorage and sessionStorage have the same operation methods, such as setItem, getItem and removeItem, etc.
The difference between cookie and session:
1. The cookie data is stored on the client's browser, and the session data is stored on the server.
2. The cookie is not very secure, others can analyze the cookies stored locally and cheat by cookies

考虑到安全应当使用session。

3. The session will be saved on the server for a certain period of time. When access increases, it will take up the performance of your server

考虑到减轻服务器性能方面，应当使用COOKIE。

4. The data saved by a single cookie cannot exceed 4K. Many browsers limit a site to save a maximum of 20 cookies.
5. So personal advice:

将登陆信息等重要信息存放为SESSION
其他信息如果需要保留，可以放在COOKIE中

The difference between XML and JSON?

(1). Data volume.

JSON相对于XML来讲，数据的体积小，传递的速度更快些。

(2). Data interaction.

JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。

(3). Data description.

JSON对数据的描述性比XML较差。

(4). In terms of transmission speed.

JSON的速度要远远快于XML。

browser render the page?

The advantages and disadvantages of iframe?

iframe:

1. The iframe can display the embedded webpage intact.

2. If there are multiple web pages referencing iframes, then you only need to modify the content of the iframe to change the content of each page called, which is convenient and quick.

3. If the web page has the same head and version in order to unify the style, it can be written as a page and nested with an iframe, which can increase the reusability of the code.

4. If you encounter slow-loading third-party content such as icons and advertisements, these problems can be solved by iframes.

iframe:

1. A lot of pages will be generated, which is not easy to manage.

2. If there are many frames, there may be up and down scroll bars, 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 will not be conducive to search engine optimization.

4. Many mobile devices (PDA phones) cannot fully display the frame, and the device compatibility is poor.

5. The iframe frame page will increase the server's http request, which is not advisable for large websites.

What is the difference between Canvas and SVG graphics?

1. What is Canvas?

Canvas is a new label from H5

Canvas canvas, use JavaScript to draw images on web pages

2. What is SVG?

SVG Scalable Vector Graphics (Scalable Vector Graphics), based on XML

about meta tags?
The meta tag is used to describe the attributes of an HTML page document, such as the author, date, keywords of the page, refresh, page level settings, etc.

The meta tag can be divided into two parts:

• http-equiv: http header information

• name: page description information

  http-equiv is similar to the http header protocol, and the function is to respond to the browser with some useful information to help display the content of the web page correctly and accurately. Commonly used http-equiv types are: Content-Type and Content-Language (setting of display character set).