# # # Doctype? What is the difference between standard mode and compatible mode? (1) <! The DOCTYPE> declaration is located on the first line of the HTML document, before the tag. Tell the browser’s parser what document to use to parse the document. A non-existent or improperly formatted DOCTYPE will cause the document to be rendered in compatibility mode. (2) The standard mode of typesetting and JS mode of operation are the highest standard supported by the browser. In compatibility mode, pages are displayed in a loosely backward compatible manner, mimicking the behavior of older browsers in case the site doesn’t work. ###HTML5 why only write <! DOCTYPE >? HTML5 is not based on SGML, so you don’t need to reference DTDS, but you need docTypes to regulate browser behavior (to make browsers behave the way they should); HTML4.01 is based on SGML, so you need to reference a DTD to tell the browser what type of document the document is using. What are the elements inside the line? What are block-level elements? What are the void elements? First of all, according to the CSS specification, every element has a display attribute, which determines the type of the element. Each element has a default display value. For example, if the default display value of div is “block”, it is a “block-level” element. The default value of the span display attribute is “inline”, which is the “inline” element. Div ul OL li DL dt DD h1 h2 h3 H4… P (3) Common empty elements:

<br/> <hr> <img> <input/> <link> <meta>
Copy the code

Less well known are:

 <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
Copy the code

What is the difference between using link and @import? (1) Link is an XHTML tag. In addition to loading CSS, it can also be used to define RSS, rel connection attributes, etc. @import is provided by CSS and can only be used to load CSS; (2) When the page is loaded, link is loaded at the same time, and the CSS referenced by @import waits until the page is loaded; (3) Import is proposed by CSS2.1, and can only be recognized in IE5, while link is XHTML tag, there is no compatibility problem; What is your understanding of the browser kernel? It is mainly divided into two parts: layout Engineer or Rendering Engine and JS Engine. #### rendering engine: takes the content of a web page (HTML, XML, images, etc.), collates the information (such as adding CSS, etc.), and calculates how the page should be displayed, and then outputs it to a monitor or printer. The syntax of the web page will be interpreted differently depending on the browser kernel, so the rendering effect will be different. All Web browsers, E-mail clients, and other applications that need to edit and display web content require a kernel. ####JS engine: parsing and executing javascript to achieve the dynamic effect of web pages. At the beginning, rendering engines and JS engines were not clearly distinguished, but later JS engines became more and more independent, and the kernel tended to refer only to rendering engines.

What are the common browser kernels? Trident kernel: IE,MaxThon,TT,The World,360, Sogou browser, etc. [also known as MSHTML] Gecko kernel: Netscape6 and above version, FF, MozillaSuite/SeaMonkey Presto kernel: Opera7 and above. [Opera kernel: Presto, now: Blink;] Webkit kernel: Safari,Chrome, etc. [Chrome: Blink (WebKit branch)] ### what’s new in HTML5, what’s removed, how to handle browser compatibility issues with html5’s new tags, how to distinguish BETWEEN HTML and HTML5?

* HTML5 is no longer a subset of SGML, it's all about adding graphics, location, storage, multitasking, etc. Canvas painting; Video and audio elements for media playback; Local Offline storagelocalStorage Stores data for a long time. Data is not lost after the browser is closed. SessionStorage data is automatically deleted after the browser closes; More semantic content elements such as article, footer, header, nav, section; Form controls, Calendar, Date, time, Email, URL, search; New technologies webworker, Websocket, Geolocation; Elements removed: Pure elements: Basefont, Big, Center, FONT, S, Strike, TT, U; Elements that negatively affect usability: Frame, Frameset, Noframes; * Support for new HTML5 tags: IE8/IE7/IE6 supports tags generated by the document.createElement method. You can take advantage of this feature to enable these browsers to support new HTML5 tags. You can also use a mature framework like HTML5shim. <! - [if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <! [endif]--> * How to distinguish HTML5: DOCTYPE declaration/new structural elements/functional elementsCopy the code

What is your understanding of HTML semantics? Do the right thing with the right label. HTML semantics make the content of the page structured, clearer structure, easy to browser, search engine parsing; Displays in a document format even without styling CSS and is easy to read; Search engine crawlers also rely on HTML tags to determine the context and the weight of each keyword, which is good for SEO. Make it easier for people reading source code to divide the site into blocks, easy to read maintenance understanding. How to use the offline storage of ###HTML5? Can you explain how it works? When the user is not connected to the Internet, the site or application can be accessed normally. When the user is connected to the Internet, the cache file on the user machine can be updated. How #### works: HTML5 offline storage is based on the caching mechanism (not storage technology) of a newly created.appCache file, which stores resources offline through parsed lists on the file, and these resources are stored like cookies. Later, when the network is offline, the browser displays the data stored offline. How to use #### : 1. Add a manifest attribute to the page header as follows: 2. Write offline storage resources in the cache.manifest file;

      CACHE MANIFEST
      # v0.11
      CACHE: 
      js/app.js css/style.css 
      NETWORK: resourse/logo.png 
      FALLBACK: 
      / /offline.html
Copy the code

3. In offline state, operate window.applicationCache to implement requirements. For details, see: HTML5: Offline storage

Please describe the difference between cookies, sessionStorage and localStorage. Cookies are data stored (usually encrypted) on a user’s Client Side by a website to identify the user. Cookie data is always carried in the same HTTP request (even if it is not needed) and is passed back and forth between the browser and the server. SessionStorage and localStorage do not automatically send data to the server and only store data locally. Storage size: Cookie data size cannot exceed 4K. SessionStorage and localStorage, while also limited in size, are much larger than cookies, reaching 5M or more. Fixed period: localStorage stores persistent data. Data will not be lost after the browser is closed unless the data is actively deleted. SessionStorage data is automatically deleted after the current browser window is closed. Cookie The cookie set remains valid until the expiration time, even if the window or browser is closed

What are the disadvantages of ###iframe? * Iframe blocks the Onload event on the main page; * Search engine searchers cannot interpret such pages, which is bad for SEO; * Iframe and the home page share the connection pool, and browsers have restrictions on connections to the same domain, so parallel page loading can be affected. These two disadvantages need to be considered before using iframe. If you need to use an iframe, it is best to use javascript to dynamically add the SRC attribute value to the iframe to get around these two problems. What does ###Label do? How does it work? The label label defines the relationship between form controls. When the user selects this label, the browser automatically shifts focus to the form control associated with the label.

<label for="Name">Number:</label><input type="" name =" text" name""="">
<label>Date:<input type="text"></label>
Copy the code

How to turn off autocomplete in ###HTML5 form? Set autoComplete =off for forms or an input that do not want the prompt. ### How to implement communication between multiple tabs in the browser? (Ali) WebSocket, SharedWorker; You can also call localStorge, cookies and other local storage methods. When localStorge is added, modified or deleted in another browsing context, it triggers an event. We monitor the event and control its value to carry out page information communication. Quirks: Safari throws QuotaExceededError when setting localStorge in traceless mode (ali)

Adobe Flash Socket, ActiveX HTMLFile (IE), XHR based on Multipart encoding, XHR based on long pollingCopy the code

What uses can the Page Visibility API be used for? Through the value of visibilityState to detect whether the page is currently visible, and the time to open the page; Pause music or video automatically when the page is switched to another background process. ### How to implement a circular clickable area on a page? 1, map+area or SVG 2, border-radius 3, pure JS implementation requires a point on the circle simple algorithm, get mouse coordinates, etc. ### implementation does not use border to draw 1px high line, in different browsers standard mode and weird mode can maintain the same effect.

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

### web captcha is what, is to solve what security problems. A public, fully automated program that distinguishes users from computers and human beings. Can prevent malicious crack password, brush tickets, forum irrigation; Effectively prevent hackers to a specific registered users with a specific program to crack the way to continue the login attempt. ### the difference between title and h1, b and strong, I and em?

The title attribute has no clear meaning and only represents a title, while H1 represents a title with clear hierarchy, which also has a great influence on the capture of page information. When using a reading device to read the Internet, people tend to emphasize the content with strong display. I content is displayed in italics, and em indicates emphasized text; Physical Style Elements — preSemantic Style Elements — strong, em, ins, del Code should use semantic style tags accurately, but not overuse them. Natural style tags are preferred when in doubt. Topics are collected on the network