One, HTML

What's new 1.HTML5 there? The new label what?

　　New features:

Semantic tags - semantic tag makes structured content pages, see to know the name of justice
Enhanced Forms - Input with multiple new form input types. These new features provide better control and validation input (including control eyedropper, date time control, etc.)
Video and audio --HTML5 provides a standard play audio files that use <audio>, <video> element
Canvas drawing - just graphics container label, you must use a script to draw graphics
SVG drawings --SVG refers Scalable Vector Graphics
Position geopositioning --HTML5 Geolocation (geolocation) for positioning the user's
API-- drag and drop is a common characteristic, that is, after crawling drag the object to another location
Web Worker - web worker is a JavaScript running in the background, independent of other scripts will not affect the performance of the page. You can continue to do anything willing to do: Click to select content, etc., at a time when web worker runs in the background
Web Storage-- better support for local offline storage, provides two new methods of data stored in the client: localStorage - no time limit for data storage; sessionStorage - for a session of data storage
WebSocket-- is an HTML5 began offering a full-duplex communication protocol on a single TCP connection, a more efficient server push technology.

　　New Tag:

Multimedia: <audio>, <video>, <source> element defines the medium of media resources, <embed>, <track> external text track [subtitled video]
新表单元素：<datalist>、<output>、<keygen>、<color>、<date>、<datetime>、<email>......
The new document segment and Platform: <header> head of the page, <section> sections, <aside> sidebar, <article> document content, the bottom of the <footer> Page

2.HTML5 semantic benefits?

Easy for users to read, improving the user experience, such as: title, alt term used to explain and picture messages, lost the style page rendering time make clear structure.
Conducive to SEO, the search engine to determine the right context and each keyword weight according to the label, and good search engine resume relations, reptiles crawl more conducive to effective information (reptiles depend on the label to determine the right context and each keyword weight )
Other convenient analytical devices, such as screen readers, reader for the blind, a mobile device, according to the semantic Web page rendering
Conducive to the development and maintenance of semantic more readable code more maintainable, more harmonious relationship with CSS3, if you follow the W3C standards team follow this standard can reduce the difference will help standardize

3. The browser standard mode and quirks mode?

　　In a page rendering mode Standard mode page rendering in accordance with the definition of HTML, CSS, and in quirks mode is the browser for compatibility with a long time ago for older browsers designed, does not strictly follow the W3C standards produced. There is a browser-based page description file types to determine which rendering mode adopted, if there is a complete DOCTYPE then the browser will use the standard mode, if the missing will use quirks mode. Here are a few differences:

Box model:

　　In quirks mode, the cartridge box model and model IE as the W3C standard box model

Picture element of the vertical alignment:

For inline elements and table-cell elements, in standard mode vertical-align property Baseline the default value is, in odd mode, table cells picture vertical-align property the default value is bottom, at the bottom of the picture so there space and pixels.

<Table> elements Font:

　　CSS, for the font attributes are inheritable, quirks mode for the table elements, some elements of the font will not inherited from the other elements in the package body or the like, in particular font-size property.

Inline elements Size:

　　In standard mode, non-replaced inline element not in custom size, quirks mode, these elements define the width, height dimensions of these elements may influence the properties of the display.

Element percentage height:

　　a: CSS predetermined percentage of the height of the following elements: an element comprising a percentage of the height of the block, is not negative, is not given if the height of the block containing the display, this value is identical to auto, so must the height of the percentage in the parent element using the case of highly declaration.

　　b: When an element height percentage use, in standard mode, depending on the height of the content changes, the odd mode, the percentage of the height is applied properly.

Overflow processing elements:

　　In standard mode, the default value overflow visible, in odd mode, the overflow will be extended as a box treated, i.e. by the size of the element content determination, overflow does not cut, automatically adjust the frame element, comprising overflow content.

4.CSS \ JS introduced the general location where? why?

　　To explain the basis for the entire placement is necessary to complete the process of loading the site:

First, the browser html code received from the server, and then start parsing html
Construction of the DOM tree (construct according to html code top-down), and at the same time render tree constructed
Js file loaded encountered in the implementation of the building blocked the DOM tree; build encountered css file, will block the rendering of the tree

defer attribute of the script tag: loading asynchronous (parallel) and the process of building a DOM tree is js files, but js file execution needs to be built in the DOM tree after completion
async attribute of the script tag: Construction of a DOM tree, loaded and executed asynchronously (in parallel) process and render tree of files is js

In summary, script tag is preferably placed in front of the </ body> tag, since the body on the back of all tags will not appear in the case when a blank page is loaded, the user can continue to provide visual feedback while in some cases, reduce the occurrence of errors. The css tags should be placed between the <head> </ head> tag, because if placed before </ body> tag, then when the DOM tree construction is complete, the render tree was constructed, then when rendering tree construction is complete, browse It shall not be longer re-render the entire page, so resulting in a waste of resources. Efficiency is not high. If on the <head> </ head> between the browser side edge build rendered much higher efficiency.

Here is BS standard template:

<! DOCTYPE HTML > 
< HTML > 
  < head > 
     <-! Web page character set -> 
    < Meta charset = "UTF-8" > 
  
    <-! Let the latest IE rendering mode -> 
    < Meta http- equiv = "X--the UA-Compatible" content = "IEs = Edge" > 
  
    <-! mobile device, a display site screen display width equal to the width of the apparatus, the contents of scale. 1:. 1 -> 
    < Meta name = "the viewport " Content =" width = width-Device, Initial-Scale =. 1 " > 
  
    <-! the following <meta>Label added to the page, you can make part of the domestic high-speed mode is the default browser to render the page: -> 
    < Metaname = "renderer" Content = "WebKit" > 
    <-! the three meta tags * must * on the front, any other content * must * follow later! -> 
  
    < title > on Bootstrap Basic Template </ title > 
    <-! On Bootstrap -> 
    < Link the href = "CSS / bootstrap.min.css" the rel = "this stylesheet" > 
 
    <-! Following this chunk comments are saying: "in order to make the following IE9 browser that supports HTML5 tags responsive and the need to introduce the following two JS files." -> 
 
    <-! HTML5 Shim and Respond.js HTML5 Elements of support for IE8 and Media Queries - -> 
    <-! the WARNING: Respond.js doesn '
    <-! [IF lt IEs. 9]> 
      <Script the src = "http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </ Script> 
      <Script the src = "HTTP: //cdn.bootcss.com/respond.js/1.4.2/respond.min.js "> </ Script> 
    <[endif]! -> 
  </ head > 
  < body > 
  
    <-! England: jQuery ( Bootstrap's plugins for JavaScript necessary) -> 
    <-! : You must file before the introduction of JQ introduction JS file, src cited here are recommended local online reference CDN). 
    <Script src = "JS / jQuery-2.1. 3.min.js "> </ Script> 
  
    <-! Compiled the Include All plugins (below), or the include Individual Files needed AS -> 
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

5.link and @inport introduction of CSS difference?

Different scope
- @import can be used in web page, it can also be used in the css file used to introduce multiple CSS files into one CSS file
- link CSS files can only be introduced into the web page
Range of different functions

@import CSS is a way provided only for loading CSS
XHTML link tag belongs, in addition to CSS can be loaded, but can also define RSS, connected to define attributes rel

Different load order

When a page is loaded, @ import cited CSS will wait until the entire page to be downloaded again loaded, so sometimes the browser will not start the style (flashing) when @import CSS page is loaded, the situation in network speed slow when more obvious.
Link referenced CSS will also be loaded

Compatibility differences
- @import is proposed CSS2.1, so older browsers do not support, @ import only identify more than IE5
- link labels do not have this problem
Control different styles
- Use link mode allows the user to switch CSS style

Several new features Precautions html (the interview will be asked)