Front-end Basics HTML CSS

1. Understanding and knowledge of Web standards and website

Tag closure, label lowercase, no nesting, improve search robot search probability, use of external chain CSS and JS scripts, structure behavior of the separation, file download and page speed, content can be accessed by more users, content can be accessed by a wider range of devices, less code and components, easy maintenance, revision convenience, No need to change the content of the page, provide a print version without the need to copy content, improve the usability of the site;

What is the difference between 2.xhtml and HTML?

HTML is a basic Web page design language, XHTML is an XML-based labeling language

The most important differences are:

XHTML elements must be nested correctly.

XHTML elements must be closed.

The label name must be in lowercase letters.

The XHTML document must have a root element.

3.Doctype? Strict and promiscuous modes-how do you trigger these two patterns to differentiate between them?

Used to declare documents using that specification (html/xhtml) is generally strictly over-frame-based HTML documents

Adding an XML declaration can be triggered and resolved to a bug that IE5.5 has IE5.5

4. What are the inline elements? What are the block-level elements? CSS box model?

Block-level elements: div p H1 H2 H3 h4 form UL

Inline elements: A b br i span input Select

CSS box model: Content, Border, margin,padding

What are the ways 5.CSS is introduced? What is the difference between link and @import?

Inline embedded outer chain import

Difference: Loading at the same time

The former does not have compatibility, the latter CSS2.1 the following browsers do not support

Link supports the use of JavaScript to change styles, which cannot be

What are the 6.CSS selectors? What attributes can be inherited? How is the priority algorithm calculated? Inline and important which priority is high?

Tag Selector class Selector ID Selector

Inheritance is better than specifying id>class> tag selection

The latter has a high priority

7. What are the three layers of the front-end page, and what are the roles?

Structure Layer Html Presentation layer CSS behavior Layer JS

What is the basic statement composition of 8.CSS?

Selector {Attribute 1: value 1; Property 2: Value 2; ...}

9. What are the browsers that you have made? What are the cores of the browser?

IE (ie kernel) firefox (Gecko) Google (WebKit) opear (Presto)

10. How to solve several IE6 bugs

1. Use display for double-sided bug float

2.3 MP problem using float caused by use of dislpay:inline-3px

3. Hyperlink hover After click fails to use the correct writing order link visited hover active

4.Ie z-index problem add position:relative to Parent

5.Png Transparent use JS code to change

6.min-height min Height! Important Solution '

7.select hiding under IE6 using IFRAME nesting

8. Why there is no way to define a width container around 1px (IE6 default row height, using over:hidden,zoom:0.08 line-height:1px)

9.ie 6 does not support!important

What is the difference between the title and Alt attribute on a 11.img label?

Alt when the picture is not displayed is represented by the text.

Title provides information for this property

12. Describes the role and purpose of CSS reset.

Reset the browser's CSS default properties browser for different symbols, different styles, and then reset them to unify

13. Explain CSS sprites, how to use it.

The CSS Wizard consolidates a bunch of small images onto a large picture, reducing the number of requests to the server for pictures

14. What is the difference between browser standard mode and weird mode?

Different rendering modes for box models

Use Window.top.document.compatMode to show why the pattern

15. How do you optimize your website's files and resources? The expected solutions include:

File merge

File minimization/File compression

Using CDN Hosting

Use of the cache

16. What is semantic HTML?

Intuitive recognition tags are good for search engine crawling

17. Several ways to clear the float, the advantages and disadvantages of each

1. Use empty label to clear floating clear:both (theoretically clear any label,, add meaningless label)

2. Use Overflow:auto (empty tag element to clear floating and have to increase the abuse of unintentional code, using zoom:1 for IE compatibility)

3. Clear float with Afert pseudo element (for non IE browser)

18.css hack

<!--[if IE 6]--><! [End If]-->

_marging \\IE 6

+margin \\IE 7

marging:0 Auto \9 all IE

Margin \\IE 8