What kinds of browser tests are commonly used? What Layout engines are available?

  • The browser
    • chrome
    • IE
    • Opera
    • Safari
    • FireFox
  • The kernel
    • Blink
    • Trident
    • Gecko
    • Webkit
    • Presto

2 What are the methods to clear floats?

  1. Add height to the parent element
  2. Add a float to the parent element, but the parent element needs a width
  3. Add an empty tag at the end: clear:both
  4. Add the br tag to the end setting clear:both
  5. Define pseudo classes for the parent element :after and zoom
  6. Define overflow: Hidden for the parent element
  7. Define overflow:auto for the parent element
  8. Define display:table for the parent element

3 What are the new features of HTML5? How to deal with the browser compatibility of HTML5 new tags?

  • Canvas painting
  • Audio and video for media playback
  • Header Footer Nav Aside section
  • If the locatStorage is not manually deleted, data will not be deleted even if the browser is closed
  • SessionStorage data is automatically deleted after the browser is closed
  • Form control Data Time Email URLL Search

IE8/IE7/IE6 supports the use of document.createElement() tags

What is your understanding of HTML semantics?

HTML semantics is about doing the right thing with the right tags

Its benefits include:

  • SEO search engine crawlers also rely on HTML tags to determine context and the weight of individual keywords
  • When developers look at the source code, it is more convenient to understand the content structure, which is convenient for later maintenance.
  • It is displayed in Chinese document format without CSS styles and is easy to read
  • Content structure is clear, easy to browser, search engine parsing

What is graceful degradation and progressive enhancement? **

Elegant downgrading: Build full functionality from the start, and then make incremental enhancements that are compatible with older browsers: build all the basic features that browsers support at the start, gradually adding features that only newer browsers support, and when browsers support them, they will automatically show up and work

6 Display: None and visibility:hidden

When tags are hidden, no more opening space is allocated to them in the document layout. The edges of the tags are closed as if there is no visbility to hide the corresponding elements. When tags are hidden, the original space remains in the document layout

7 What are the CSS selectors? Which attributes can be inherited? How is the priority algorithm calculated? CSS3 new pseudo class has those?

  • Id selectors
  • Class selectors
  • Label selector
  • Adjacent selector
  • Property selector
  • Descendant selector
  • Child selector
  • Wildcard selector
  • Pseudo class selector

What are the new features of CSS3?

  • Border-radius (rounded corner)
  • Box-shadow
  • Text-shadow (Text effects)
  • Gradient

Talk about your understanding of refactoring

Simplify structure and add readability while maintaining consistent behavior at the front of the site without changing external behavior. The idea is to optimize the site and maintain a consistent UI without changing the UI

Understanding of Web standards and W3C

Closed tags, lowercase tags, not disorderly nesting, improve the search probability of the search robot. Using external chain CSS and JS scripts, structure behavior performance classification, content can be accessed by a wider range of devices, less code and components, easy maintenance, easy revision, no need to change the page content

What is the difference between Html and XHTML?

The XHMLT element must be properly nested, the element must be closed, the tag must be lowercase, and there must be a root element

Introduce the standard CSS box model. How is the box model different from the lower version of IE?

The box model is made up of the content padding border Margin

Their difference lies in the difference of content breadth

Standard CSS box model: width +padding +border +margin

Low version of the box model: content width (padding +border)+margin

13 How to use media query?

Media queries can define different CSS styles for media of different sizes to be displayed on the appropriate device, which is a responsive layout

@media screen and(min-width:400px)and(max-width:700px){... }Copy the code

14. Which scenes are suitable for margin and padding?

Margin on the outside of the border when you need a blank space, when you don’t need a background (background color, background image), you need to choose the largest space between the two vertical boxes. Use margin padding on the inside of the border when you need a blank space, when you need a background (background color, background image). Background image) when the spacing between two vertical boxes is the padding of the two boxes

15 How to modify Chrome to remember passwords after automatically filling forms with yellow background **

Set Chrome to turn off auto-fill forms by setting the form attribute autocomplete=”off/on” to turn off auto-fill forms and remember passwords yourself

Please write the new html5 tags, and explain their semantics and application scenarios

  • The header tag sets the header of a page or section
  • The footer tag sets the end of a page or section
  • Aside sets content that has little to do with the content of the page
  • The NAV TAB sets the section used to link navigation
  • Section defines a section in a document

17 Describe the differences between cookies, sessionStorage and localStorage

Cookies are carried by same-origin HTTP requests, passing sessionStorage and localStorage between the server and the browser is not passing data to the server, it’s only stored locally and the cookie is only stored in 4K, The storage size of sessionStorage and localStorage is also limited, but more than cookies, with 5M

Cookies Before expiration time, data will be saved, even if you close the window and browser sessionStorage data, as long as you close the browser will automatically delete data localStorage data storage for a long time, unless manually deleted, even if you close the browser will not delete

18 How do I communicate with multiple tabs in the Browser?

Store data in seesionStorage or localStorage

19 What is the difference between title and H1, B and strong, I and EM?

The title tag doesn’t have any semantics, it’s just a title, it doesn’t appear on the page. H1 is a hierarchical tag, it’s also a title. The B tag is bold, the strong tag is bold, the I tag is slanted, the EM tag is slanted

Introduce the standard CSS box model. How is the box model different from the lower version of IE?

Standard CSS box width: content width + left/right padding+ left/right border+ left/right margin Lower version of the box model: content width (left and right Padding+ left and right border)+ left and right margin

21 How to calculate the CSS priority algorithm?

  • Label selector 1
  • Class selector 10
  • Id selector 100
  • Element Tag 1000
  1. Than weight, whose power is important, who has the highest priority
  2. The weight is the same, follow the nearest principle
  3. Inheritance has the lowest priority
  4. It’s on the pattern! Important has the highest priority

22 CSS3 new pseudo classes have those?

  • P :first-of-type Selects the first element belonging to its parent element
  • P :last-of-type Selects the last element belonging to its parent element
  • P :only-of-type Selects the only element belonging to its parent element
  • P :only-child Selects the only child element belonging to its parent
  • P :nth-chlid(2) selects the second child of the parent element
  • :enabled :disabled Indicates that the form control is disabled
  • : Checked check boxes or check boxes are selected

23 The value of position?

  • Static Does not separate itself from the document flow by default
  • Absolute Is located with reference to the left right top bottom of the parent element of the nearest value that is not static
  • Relative Position, not out of the document flow, with reference to the static left top right bottom
  • Position yourself by referring to the position of the visible window

How many properties does cSS3 have for making animations?

  • Animation animation
  • Transtion transition
  • The transform deformation

25 Common compatibility problems

  1. In IE8 and below, if the a tag contains an image, a blue circle will appear around the image
  2. Display :inline if a float tag is used and a margin tag is used, the display:inline will appear in IE6 pages
  3. Image spacing problem solution: Use float for IMG layout
  4. *{padding:0,margin:0}
  5. When the label height is set to less than 10px, it will exceed its own height in IE6 and IE7

What are the pseudo-element selectors?

  • :: Selection Highlights the selected part of the style of the setting element
  • ::first-letter sets the addition of a special style to the first character of the element
  • ::first-line Sets the style of the element’s first line of text