Good programmers web front-end share HTML5 common interview questions highlights five
1 , when the page is imported styles, use link and @import What is the difference?
Answer: The difference between 1 : essential difference: Link belong to XHTML tags, while @import entirely CSS a way to provide.
Differences 2 : Load different order: When a page is loaded (that is, the viewer when browsing), Link referenced CSS will also be loaded, and @import cited CSS will wait until the entire page is downloaded and then loaded . So sometimes browse @import to load CSS will initially without style (is flashing) when the page, Suman time quite obvious.
The difference 3 : compatibility difference: @import is CSS2.1 proposed, so older browsers do not support, @import only in IE5 can identify more, and link label is no such problem.
Differences 4 : Use dom (document o bject model Document Object Model ) difference when the control style: When using the javascript control dom time to change the style, use only link tags, because @import not dom can be controlled .
2 , <img> on the label title attribute alt distinguishing property of what is?
The answer: title attribute is the mouse draw up the contents displayed
alt attribute is to give those who can not see the images in your document viewer provides descriptive text.
3 , please write at least . 5 th html5 new label, and semantic description and application scenarios
The answer: Section : a section defined in the document
NAV : definition contains only the navigation links section
header : head custom page or chapter. It often contains the logo directory, page title and navigation properties.
footer : tail custom page or chapter. It often contains copyright information, addresses legal information links and feedback suggestions.
aside : definitions and page content associated with a lower degree of content - if it is removed, the rest of the content is still very reasonable.
4 , HTML and XHTML - both what's the difference?
answer:
. 1 , the HTML elements must be properly nested.
2 , XHTML elements must be closed.
3 , the tag name must be lowercase letters.
4 , XHTML documents must have a root element.
5 , iframes. Advantages and disadvantages?
Answer: Advantages:
a. to solve the problem of slow loading loading third-party content such as icons and advertisements, etc.
b. iframe no refresh file upload c. iframe cross-domain communication
Disadvantages:
a. iframe block the main page Onload event b. can not be some search engines to index
c. page will increase server http request d. will have a lot of pages, not easy to manage.
6 , full-screen scrolling What is the principle? It uses CSS which attributes?
Answer: Principle: somewhat similar to the carousel, the overall arrangement of the elements has been down, assuming 5 that needs to show full-screen page, the height is 500% , just to show 100% , and the rest can transform be y -axis positioning, but also by margin-top to achieve
overflow：hidden；transition：all 1000ms ease；
7 What is responsive design? What are the basic principles of responsive design is that? How compatible with low version of IE ?
Answer: responsive web design (Responsive Web design) is a website compatible with multiple terminals, instead of doing a specific version for each terminal.
The basic principle is to do the process through different media queries to detect device screen size.
Head of the page must have a meta statement viewport .
<meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
8 , :: the before and : after the double colon and colon single What is the difference? Explain these 2 action pseudo-elements
Answer: single colon (:) for CSS3 pseudo-class, double colon (: :) for CSS3 pseudo-element.
:: before is the existence of a sub-element of the definition of a pseudo-elements before the main content of the element. Does not exist in dom in, exists only in the pages.
: before and : after two pseudo-elements, in CSS2.1 emerging inside. At first, the prefix pseudo-element using a single colon syntax, but with the Web 's evolution, in the CSS3 specification, the syntax pseudo-element is modified to use a double colon to become :: before :: after
9 , how to make Chrome support is less than 12px text?
Answer: P {font-size: 10px; -webkit-Transform: Scale (0.8);} // 0.8 is a scaling
10 , briefly you HTML understand the semantics of?
Answer: 1 , do the right thing with the right label.
2 , HTML semantic structured so that the content of the page, the structure is more clear, easy to browsers, search engines resolve;
3 , even in the absence of style CSS also displayed in a case where the document format, and is easy to read;
4 , the search engine crawler also depends on the HTML tag for each keyword context and determine the weight of heavy by SEO;
5 , so that people who read the source code is easier to block sites on the site, to facilitate maintenance of reading comprehension.