1. What is the difference between using link and @import when importing page styles?

Answer: Difference 1: Essential difference: Link is an XHTML tag, while @import is completely CSS provided.

Difference 2: Load order difference: When a page is loaded (i.e. viewed by the viewer), the CSS referenced by link is loaded at the same time, while the CSS referenced by @import is loaded until the page has been downloaded. So sometimes the @import loaded CSS page will start out with no style (that is, flashing), which is obvious when the connection is slow.

Difference 3: compatibility difference: @import is not supported by older browsers because it is introduced in CSS2.1. @import can only be recognized in IE5 or higher, while link tags do not have this problem.

Difference 4: When using DOM (Document object Model) to control styles: When using javascript to control DOM to change styles, only the link tag can be used because @import is not dom controlled.

  1. What is the difference between the title attribute and the Alt attribute on the tag?

Answer: The title property is what the mouse clicks over to display

The Alt attribute is intended to provide text for visitors who cannot see the images in your document.

  1. Please write at least 5 new html5 tags and explain their semantics and application scenarios

Section: Defines a section in a document

Nav: Defines a section that contains only navigation links

Header: Defines the header of a page or section. It often contains logos, page titles, and a navigational table of contents.

Footer: Defines the end of a page or section. It often contains copyright information, links to legal information, and addresses for feedback suggestions.

Aside: Define content that is not related to the content of the page — if removed, the rest of the content still makes sense.

  1. HTML vs. XHTML – What’s the difference?

The answer:

  1. HTML elements must be properly nested.
  2. XHTML elements must be closed.
  3. The label name must be lowercase.
  4. XHTML documents must have a root element.

5. Advantages and disadvantages of IFrame?

Answer: Advantages:

A. Solve the loading problem of slow-loading third-party content such as ICONS and advertisements

B. Iframe No updated file uploads c. Iframe cross-domain communication

Disadvantages:

A. Iframe blocks the Onload event on the main page. B. It cannot be indexed by some search engines

C. Pages will increase HTTP requests from the server. D. Many pages will be generated, which is not easy to manage.


  1. How does full-screen scrolling work? What CSS properties are used?

Answer: Principle: Similar to rotation, the whole elements are arranged all the time. Suppose there are 5 full-screen pages to be displayed, then the height is 500%, and 100% is displayed. The rest can be positioned in the Y-axis by transform, and can also be realized by margin-top

Overflow: hidden; Transition: all 1000ms ease;

  1. What is responsive design? What are the fundamentals of responsive design? How to compatibility with earlier Versions of IE?

Answer: Responsive Web Design is a website that is compatible with multiple terminals, rather than making a specific version for each terminal.

The basic principle is to detect different device screen sizes through media query to do processing.

The page header must have a meta declared viewport.

<meta name=”viewport”content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no” />

  1. What’s the difference between a double colon and a single colon in ::before and :after? Explain what these two pseudo-elements do

Answer: Single colon (:) for CSS3 pseudo-classes, double colon (::) for CSS3 pseudo-elements.

::before is a pseudo-element defined in the presence of a child element before the body content of the element. It doesn’t exist in the DOM, it exists only in the page.

The pseudo-elements :before and :after are new to CSS2.1. At first, the pseudo-element prefix used a single colon syntax, but as the Web evolved, the CSS3 specification changed the pseudo-element syntax to use double colons, becoming ::before ::after

  1. How to make Chrome support text smaller than 12px?

Answer: p {the font – size: 10 px; – its – transform: scale (0.8); }//0.8 is the scale

  1. What is your understanding of HTML semantics?

Answer: 1. Do the right things with the right labels.

2, HTML semantics let the content of the page structure, structure more clear, easy to browser, search engine parsing;

3. Display in a document format even without styling CSS and be easy to read;

4. Search engine crawlers also rely on HTML tags to determine the context and weight of each keyword, using SEO;

5, make it easier to read the source code of the website will be divided into blocks, easy to read maintenance understanding.