[Front-end interns preparing for autumn recruitment]—HTML and CSS interview questions summary (3)

[Front-end interns preparing for autumn recruitment]—HTML and CSS interview questions summary (3)

1. What are the inline elements? What are block-level elements? What are the empty (void) elements?

The CSS specification stipulates that each element has a display attribute to determine the type of the element, and each element has a default display value. For example, the default display attribute value of div is "block", which becomes a "block-level" element; the default display attribute of span is A value of "inline" is an "inline" element.

Inline elements are: a b span img input select strong(emphasis added) Block-level elements are:div ul ol li dl dt dd h1 h2 h3 h4…p

Well-known empty elements:<br><hr><img><input><link><meta>

Lesser known are:<area><base><col><command> <embed><keygen><param><source><track><wbr>

2. What are the CSS selectors? Which properties can be inherited? How is the priority algorithm calculated? What are the new pseudo-classes in CSS3?

1. id selector ( # myid )
2. Class selector ( .myclassname )
3. Label selector ( div, h1, p )
4. Adjacent selector ( h1 + p )
5. Child selector ( ul < li )
6. Descendant selector (li a)
7. Wildcard selector ( * )
8. Attribute selector (a[rel = "external"])
9. Pseudo-class selector (a: hover, li: nth - child)

• Inheritable: font-size font-family color, UL LI DL DD DT;
• Not inheritable: border padding margin width height ;
• The principle of priority and proximity, the closest style definition shall prevail;
• The loading style is based on the last loaded positioning;

The priority is: (important has higher priority than inline)

!important > id > class > tag

Examples of new pseudo-classes in CSS3:

• p:first-of-typeSelects each element that is the first <p>element of its parent <p>.

• <p>p:last-of-type selects each element that is the last element of its parent <p>.

• <p>p:only-of-type selects every element that is the only element of its parent <p>.

• p:only-child selects every element that is the only child of its parent <p>.

• p:nth-child(2) Selects every element that is the second child of its parent <p>.

• :enabled, :disabled control the disabled state of form controls.

• :checked, the radio button or checkbox is checked.

3. How to center div, how to center a floating element?

Set a width to the div and add margin:0 auto attribute

 div{
    
    
 width:200px;
 margin:0 auto;
 }

Center a floating element, determine the width and height of the container, the layer with a width of 500 and a height of 300, and set the outer margin

.div {
    
    
 Width:500px ; height:300px;//高度可以不设
 Margin: -150px 0 0 -250px;
 position:relative;相对定位
 background-color:pink;//方便看效果
 left:50%;
 top:50%;
 }

4. List the values ​​of display and explain their functions. The value of position, what is the origin of relative and absolute positioning?

display value

• block is displayed like a block type element.
  none The default value. Displayed like inline element types.
  inline-block is displayed like an inline element, but its content is displayed like a block type element.
  list-item Displays like a block type element, with styled list markup added.

2. The value of position

• absolute: Generates absolutely positioned elements, positioned relative to the first parent element other than static positioning.

• fixed (not supported by old IE): generate absolutely positioned elements, positioned relative to the browser window.

• relative: Generates a relatively positioned element, positioned relative to its normal position.

• static : the default value. Without positioning, the element appears in normal flow (top, bottom, left, right z-index declarations are ignored).

• inherit Specifies to inherit the value of the position attribute from the parent element.

5. Understanding and understanding of WEB standards and W3C

Tag closure, tag lowercase, no random nesting, increase the search probability of search robots, use external chain css and js scripts, separation of structure and behavior performance, faster 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 to maintain, easy to modify, no need to change page content, provide a print version without copying content, and improve the usability of the website;

6. What is the basic statement structure of css?

selector {property1:value1;property2:value2;...}

7. What are the display attributes? what can be done

display:block converts inline elements to block-level elements
display:inline converts block-level elements to inline elements
display:inline-block converts to inline elements

8. Which css properties can be inherited?

Inheritable: font-size font-family color, ul li dl dd dt;
Non-inheritable: border padding margin width height ;

9. What are the selectors, and what is the calculation formula for priority? Inline styles and ! important Which priority is higher?

#ID > .class > label selector !important has high priority

10. I want the inline element to be 10px away from the above element, can I add margin-top and padding-top?

margin-top, padding-top invalid

11. Steps from entering url in the browser address bar to displaying the page

short answer

• The browser submits the DNS domain name analysis according to the requested URL, finds the real IP, and initiates a request to the server;
• The server returns the data after the background processing is completed, and the browser receives the file (HTML, JS, CSS, images, etc.);
• The browser parses the loaded resources (HTML, JS, CSS, etc.) and builds the corresponding internal data structure (such as HTML's DOM);
• Load the parsed resource file, render the page, and complete.

answer in detail

1. From the browser receiving the url to opening the network request thread (this part can expand the mechanism of the browser and the relationship between the process and the thread)
2. Start the network thread to send a complete HTTP request (this part involves dns query, TCP/IP request, five-layer Internet protocol stack and other knowledge)
3. From the server receiving the request to the corresponding background receiving the request (this part may involve load balancing, security interception, background internal processing, etc.)
4. HTTP interaction between the background and the foreground (this part includes knowledge of HTTP headers, response codes, message structures, cookies, etc., and can provide cookie optimization for static resources, as well as encoding and decoding, such as gzip compression, etc.)
5. Cache issues brought out separately, HTTP cache (this part includes http cache header, ETag, catch-control, etc.)
6. The parsing process after the browser receives the HTTP packet (parsing html - lexical analysis and then parsing into dom tree, parsing css to generate css rule tree, merging into render tree, then layout, painting rendering, composite layer synthesis, GPU rendering , external chain resource processing, loaded and DOMContentLoaded, etc.)
7. Visual format model of CSS (rendering rules of elements, such as containing block, control box, BFC, IFC and other concepts)
8. JS engine parsing process (JS interpretation phase, preprocessing phase, execution phase to generate execution context, VO, scope chain, recycling mechanism, etc.)
9. Others (can expand different knowledge modules, such as cross-domain, web security, hybrid mode, etc.)

12. Please describe the difference between cookies, sessionStorage and localStorage?

• A cookie is data (usually encrypted) stored on the user's local terminal (Client Side) by the website to identify the user's identity
• Cookie data is always carried in the same-origin HTTP request (even if it is not required), that is, it will be passed back and forth between the browser and the server
• sessionStorage and localStorage will not automatically send data to the server, but only save the
  storage size locally:
  the cookie data size cannot exceed 4k. Although sessionStorage and localStorage also have storage size restrictions, they are much larger than cookies, and can reach 5M or more bigger

Effective time:
localStorage stores persistent data, and the data will not be lost after the browser is closed unless the data is actively deleted. sessionStorage data is automatically deleted after the current browser window is closed. closure

13. Restrictions on page access cookies

cookie (data stored on the user's local terminal)

Cookie refers to the data stored on the user's local terminal by some websites in order to identify the user's identity and track the session. Cookies are almost ubiquitous in the network system. When we browse the websites we have visited before, it may appear on the webpage: Hello XXX.

1. Cross-domain issues:
Cookies allow web developers to preserve their users' login status. But problems arise when your site has more than one domain name. According to the cookie specification, a cookie can only be used for one domain name and cannot be sent to other domain names. Therefore, if a cookie is set for one domain name in the browser, the cookie will be invalid for other domain names.

solve:

• Reverse proxy through nginx
• jsonp request
• HTTP only is set: If the HttpOnly attribute is set in the cookie, the cookie information cannot be read by programs (JS scripts, Applets, etc.), which can effectively prevent XSS attacks.

14. Functions and disadvantages of cookies

The role of cookies

• User data can be saved on the client, which plays a role of simple caching and user identification.
• Save the user's login status. After the user logs in successfully, the server generates a specific cookie and returns it to the client. The next time the client visits any page under the domain name, it sends the cookie information to the server. The server is checked to determine whether the user is logged in.
• Record user behavior.

disadvantages of cookies

• To increase traffic consumption, cookie information needs to be brought with each request.
• Security risks, cookies are transmitted in plain text. If the cookie is intercepted by someone, that person can get all session information.
• Limits on the number and length of cookies. Each domain can only have up to 20 cookies, and the length of each cookie cannot exceed 4KB, otherwise it will be cut off

15. Introduce the properties of cookies

You can see cookie information in the Application tab in the chrome console

There may be many cookie objects under a domain name. But a cookie can only be used for one domain name and cannot be sent to other domain names.

• Name
  is the name of a cookie (pay attention to encoding Value when using JavaScript to manipulate cookies.)

• value
  is the value of a cookie (pay attention to encoding Value when using JavaScript to manipulate cookies.)

• Domain
  is the domain name that can access this cookie

Note: The second-level domain name can read the cookies that set the domain as the top-level domain name or itself, but cannot read the cookies of other second-level domain names. So if you want the cookie to be shared in multiple second-level domain names, you need to set the domain as the top-level domain name, so that you can get the value of the cookie in all second-level domain names.

The top-level domain name can only get the cookie whose domain is set as the top-level domain name, and other domains set as the second-level domain name cannot be obtained.

• Path
  is the page path that can access this cookie. For example, if the domain is abc.com and the path is /test, then only pages under the /test path can read this cookie
• The Expires
  field is the timeout period for this cookie. If the value is set to a time, the cookie will become invalid when the time is reached. If not set, the default value is Session, which means that the cookie will be invalid together with the session. This cookie expires when the browser is closed (not the browser tab, but the entire browser).

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;

When it is a session cookie, the value is stored in the client memory and expires when the user closes the browser. It should be noted that some browsers provide a session recovery function. In this case, even if the browser is closed, the session cookie will be retained, as if the browser has never been closed.

The opposite of session cookies are persistent cookies, which will be stored on the user's hard drive until they expire or the cookie is cleared. It is worth noting here that the set date and time are only related to the client, not the server.

• Max-Age
  Max-Age is used to set the number of seconds before the cookie expires. For example:

Set-Cookie: id=a3fWa; Max-Age=604800;

• Max-Age can be positive, negative, or even 0.
• If the max-Age attribute is a positive number, the browser will persist it, that is, write it into the corresponding cookie file.
• When the max-Age attribute is negative, it means that the cookie is only a session cookie.
• When max-Age is 0, the cookie will be deleted immediately.
• If both Expires and Max-Age exist, Max-Age has higher priority.

HttpOnly
If this attribute is true, only the information of this cookie will be included in the http request header, and this cookie cannot be accessed through document.cookie.

Set whether this cookie can only be passed through https. Using the HTTPS security protocol can protect cookies from being stolen and tampered with during transmission between the browser and the web server.

• Size This cookie size
• SameSite

16. What is the web page verification code for? What kind of security problem is it to solve?

• A public fully automated program that distinguishes whether a user is a computer or a human. It can prevent malicious cracking of passwords, swiping tickets, and flooding forums
• Effectively prevent hackers from continuously attempting to log in to a specific registered user using specific program brute force cracking

17. Which SEO should the front-end pay attention to?

• Reasonable title, description, and keywords: search for the weight of the three items to be reduced one by one, the title value can emphasize the key points, important keywords should not appear more than 2 times, and should be at the front, and the title should be different for different pages; The description highly summarizes the content of the page, the length is appropriate, and keywords cannot be piled up too much. The description is different for different pages; keywords list important keywords
• Semantic HTML code, in line with W3C specification: Semantic code makes it easy for search engines to understand web pages
• Put the HTML code of important content at the top: search engines crawl HTML from top to bottom, and some search engines have restrictions on the length of crawling to ensure that important content will be crawled
• Do not use js output for important content: crawlers will not execute js to obtain content
• Use less iframes: Search engines will not crawl the content in iframes
• Non-decorative pictures must add alt
• Improve website speed: Website speed is an important indicator of search engine ranking

18. There are several ways to implement CSS animation

• transition
• keyframes（animation）

19. The difference between transition animation and key frame animation

• Transition animations require a state change
• Keyframe animation does not require state changes
• Key frame animation can control finer

How to achieve frame-by-frame animation?

• Use keyframe animation
• Remove tween (steps)

20. Performance of CSS animations

• not bad performance
• Better than JS in some cases
• But JS can do better
• Some high-risk attributes (such as box-shadow, etc.).

21.keyframe key frame animation

keyframe animation

• Equivalent to multiple motion tweens
• independent of element state changes
• more flexible definition

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>keyframe关键帧动画</title>
 <style>
 .container{
    
    
 width: 100px;
 height: 100px;
 background: red;
 animation: run 1s;
 animation-direction: reverse;
 animation-iteration-count: infinite;
 /*animation-fill-mode: forwards;*/
 /*animation-play-state: paused;*/
 }
 @keyframes run {
    
    
 0%{
    
    
 width: 100px;
 }
 100%{
    
    
 width: 800px;
 }
 }
 </style>
</head>
<body>
 <div class="container"></div>
</body>
</html>

Types of Animations in CSS

• transition tween animation (from one state to another state, there is animation between state switching)
• keyframe keyframe animation (each specified state is a keyframe)
• Frame by frame animation (jump)

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>transition补间动画</title>
 <style>
 .container{
    
    
 width: 100px;
 height: 100px;
 background: red;
 transition: width 1s, background 2s;
 }
 .container:hover{
    
    
 width: 300px;
 background: blue;
 }
 </style>
</head>
<body>
 <div class="container"></div>
</body>
</html>

The relationship between animation progress and time