1, page import styles, use the link and @import What is the difference?
Answer: 1 difference: essential difference: link belongs XHTML tags and CSS @import is a way to completely provided.
2 differences: differences in load order: When a page is loaded (that is, the viewer when browsing), link referenced CSS will also be loaded, and references @import CSS will wait until the entire page is downloaded and then loaded . We will not start the style (is flashing) Sometimes when browsing @import CSS page loads, and when Suman quite obvious.
3 differences: differences compatibility: @import is proposed CSS2.1, so older browsers do not support, @ import only recognized IE5 or more, and link label no such problem.
Differences 4: dom (document o bject model Document Object Model) style differences when controls: control when using javascript dom to change the style, use only link tags, because @import dom can not control.
2, <img> tag title attributes and differences alt attribute 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, at least 5 html5 Please write the new label, and the 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 is often the directory containing the logo, and navigation of the page title.
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, both HTML and XHTML-- What is the difference?
answer:
1) 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, iframe 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. Some can not be indexed by search engines to
c. page will increase the server http request d. will have a lot of pages, not easy to manage.
6. What is the principle of full-screen scrolling? Use what CSS property?
Answer: Principle: somewhat similar to the carousel, the overall arrangement of the elements has been down, assuming that there are five need to show full-screen page, the height is 500%, 100% just to show the rest of the y-axis can be positioned by the transform, also can be achieved by margin-top
overflow：hidden;transition：all 1000ms ease;
7. What is responsive design? What are the basic principles of responsive design is? How low compatible 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 viewport meta declaration.
<meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
8, :: before and:? After the double colon and colon alone explain what difference these two pseudo-element role
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, exists only in the pages.
: Before and: after pseudo-elements of these two, is emerging in CSS2.1 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 text smaller than 12px of Chrome support?
Answer: p {font-size: 10px; -webkit-transform: scale (0.8);} // 0.8 is a scaling
10, briefly your understanding of semantic HTML?
Answer: 1, do the right thing with the right label.
2, html semantic structured content make the page structure more clear, easy to browsers, search engines resolve;
3, also shown in a document format even without CSS style case, and is easy to read;
4, the search engine crawler also depend on the context of HTML tags determine the weight and the weight of each keyword using SEO;
5, so that people who read the source code is easier to block sites on the site, to facilitate maintenance of reading comprehension.
Reproduced in: https: //www.jianshu.com/p/f118ca2765c0