Front-end questions of chinansoft high-tech WEB and front-end questions of chinansoft high-tech web

Front-end questions of chinansoft high-tech WEB and front-end questions of chinansoft high-tech web

For a friend's interview question, Baidu once looked at this soft high-tech seems to be a training institution... The answer below is my understanding and is for reference only.

 

HTML + CSS

1. Can you explain the css box model?

There are two types of box models: IE box model and W3C box model.

The standard CSS box model includes content, padding, border, and margin ).

　　

 

2. What is the difference between XHTML and HTML?

The main difference is that XHTML elements must be correctly nested, XHTML must be disabled, label names must be in lower case, and XHTML documents must have root elements.

For more information, see the differences between HTML and XHTML.

 

3. What are the elements in the row? What are the block-level elements?

1) In-row elements: a B span img input select strong ...;

2) block-level elements: div header main footer section ul p h1 h2 ...;

 

4. What are CSS delimiters? What attributes can be inherited? How is the priority algorithm calculated? Which of the following is the highest priority for inner and important?

1) id selector (#) and class selector (.), tag selector (div), sibling element selector (div + p), sub-selector (ul> li), descendant selector (div a), wildcard selector (*), attribute selector (input [type = "number"]), pseudo class selector (a: hover, p: nth-child)

2) All elements can inherit: visibility and cursor.

Inline elements can inherit: letter-spacing, word-spacing, white-space, line-height, color, font, font-family, font-size, font-style, font-variant, font-weight, text-decoration, text-transform, and direction.

List elements can inherit from the following types: list-style, list-style-type, list-style-position, and list-style-image.

Table elements can be inherited: border-collapse.

3) The Inline style table has a maximum weight of 1000;

The weight of the ID selector is 100;

The weight of the Class selector is 10;

The value of the HTML Tag selector is 1.

4) important has a higher priority than inline

 

5. What are the three layers of front-end pages, and what are their respective functions?

1) consists of structural layers, presentation layers, and behavior Layers

2) structure layer: Describe the webpage content;

Presentation Layer: displays content;

Behavior layer: responds to events on the webpage;

 

6. Which browsers support HTML5 and what are the kernels of these browsers?

Browsers that are widely used include IE, Google, Firefox, Safari, and Opera;

Kernel: IE (Trident), WebKit, Gecko, WebKit, Presto;

 

7. write more than five solutions to IE6 bugs. Which of the following do you think are the most troublesome?

1) IE6 is set to float left and right on block-level elements, and the Set margin causes a bilateral margin bug.

Solution: display: inline;

2) line-height, text vertical center deviation 1px

Solution: Use padding-top to center line-height, or add or subtract 1 to line-height.

3) img is added to the block element, and the bottom side is blank.

Solution: Set overflow: hidden; or img {display: block;} Or _ margin:-5px;

4) there will be spacing between li

Solution: float: left;

5) left and bottom under position are misplaced.

Solution: Set the width and height for the parent relative layer or add * zoom: 1

　　

It is very troublesome...

 

8. Describe the function and purpose of CSS reset

The function of reset is to make the CSS styles of various browsers have a unified benchmark, which is understood as initializing css styles.

 

9. How to Use CSS sprites?

Sprite is an image processing technology, commonly known as image genie.

1. compress the background image to a zip package.
2. Use the Css image concatenation generator to combine the image and then download the image.
3. After splicing, a Css rule is generated. This file locates the position and width and height of each image.
4. Locate the background image in the Css style

 

10. How do you optimize website files and resources?

1) cache js and css files using a browser

2) Optimize js and css code to avoid reuse.

3) Use css sprite to merge images.

4) Merge and compress files. Reduces http requests and sizes.

5) Use cdn to host resources

 

11. What are semantic HTML and what are the newly added semantic tags of html5?

1) html semantics makes the page content structured and the structure clearer, making it easy for browsers and search engines to parse.

This makes it easier for people who read code to block websites and facilitate reading, maintenance, and understanding.

2) For example: header, main, footer, canvas, etc.

 

12. Clear several floating methods, their respective advantages and disadvantages.

1) parent-level Element Definition Height: it has the advantages of being simple, less code, and easy to master. The disadvantage is that it is only suitable for highly fixed la S. problems may occur when the height is inconsistent.

2) Add the empty div label clear: both at the end. The advantage is that the Code is small and the browser supports it well. It is not prone to strange problems. The disadvantage is that if there are many floating la s on the page, adding a lot of empty divs makes people feel uncomfortable.

3) overflow: hidden for parent-level element settings: The advantage is that it is simple, the code is small, and the browser supports it well. The disadvantage is that it cannot be used with position because the excess size is hidden.

Only three types...

 

JS

1. What data types does JavaScript typeof return?

The following data types are returned: undefined, string, Boolean, number, object, and function.

 

2. What is the difference between split () join? Array Method pop () push () unshift () shift ().

1) The split () method is used to split a string into a string array.

The join () method is used to put all elements in the array into a string.

Difference: the former is to cut the string into an array, and the latter is to convert the array into a string.

2) shift () is used to delete the first element of the array from it and return the value of the first element.

The unshift () method can add one or more elements to the beginning of an array and return a new length.

The pop () method is used to delete and return the last element of the array.

The push () method adds one or more elements to the end of the array and returns a new length.

 

3. What is the difference between event binding and common events?

You cannot add multiple events by adding common events. The bottom event overwrites the preceding event. You can add multiple events by adding events by using addEventListener.

 

4. What are the compatibility between IE and the standard?

Get the current coordinates of the mouse:

Event. x, event. y;

Standard event. pageX, event. pageY;

Obtain the height and width of the form:

Document. body. offsetWidth and document. body. offsetHeight under IE

Under the standard, document.documentelement.clientwidthand document.doc umentElement. clientHeight

Add event:

Element. attachEvent ("onclick", func) under IE );

Standard element. addEventListener ("click", func, true );

 

5. What is the difference between a get request and a post request during ajax requests?

1) when a Get request is used, the parameter is displayed in the URL, but the Post method is not displayed.

2) a small amount of data is sent using the Get request, and a large amount of data is sent using the Post request.

3) Low Get request security and high Post security