1. In which browsers have you tested the page you made? What are the kernels of these browsers?
IE: trident kernel Firefox: gecko kernel
Safari:webkit kernel
Opera: It used to be the presto kernel, Opera has now switched to Google Chrome's Blink kernel
Chrome: Blink (based on webkit, jointly developed by Google and OperaSoftware)
2. What is the role of Doctype? What is the difference between strict mode and promiscuous mode?
<!DOCTYPE> is used to tell the browser which mode to render the document in. Strict mode: page layout and JS parsing are implemented with the highest standard supported by the browser. Mixed mode: not strictly implemented according to the standard, mainly used for compatibility with old browsers and backward compatibility
3. What are the advantages of div+css layout over table layout?
It is more convenient when the version is revised, as long as the css file is changed.
The page loads faster, the structure is clear, and the page display is concise.
Presentation is separated from structure.
Easy to optimize (seo) search engine is more friendly, the ranking is easier to front.
4. What are the similarities and differences between the alt and title of img?
alt(alt text): For user agents (UA) that cannot display images, forms, or applets, the alt attribute is used to specify alternate text. The language of the replacement text is specified by the lang attribute. (In IE browser, alt will be displayed as tooltip when there is no title)
title(tooltip): This attribute provides suggested information for the element that sets this attribute.
5. Why is it more effective to use multiple domain names to store website resources?
CDN cache is more convenient to break through browser concurrency limit
Save cookie bandwidth
Save the number of connections of the main domain name and optimize page response speed
Prevent unnecessary security issues
6. Please describe the difference between cookies, sessionStorage and localStorage? ***
The data in sessionStorage (session), these data can only be accessed by pages in the same session and the data will be destroyed when the session ends. Therefore, sessionStorage is not a persistent local storage, but only a session-level storage. And localStorage is used for persistent local storage, unless the data is actively deleted, the data will never expire.
The difference between web storage and cookies
The concept of Web Storage is similar to that of cookies, the difference is that it is designed for larger capacity storage. The size of the cookie is limited, and the cookie will be sent every time you request a new page, which wastes bandwidth virtually. In addition, the cookie needs to specify the scope and cannot be called across domains. In addition, Web Storage has methods such as setItem, getItem, removeItem, clear, etc. Unlike cookies, front-end developers need to encapsulate setCookie and getCookie by themselves. But cookies are also indispensable: the role of cookies is to interact with the server and exist as part of the HTTP specification, while WebStorage is only born to "store" data locally.
7. Briefly describe the difference between src and href?
src is used to replace the current element, and href is used to establish a link between the current document and the referenced resource.
src is the abbreviation of source, which points to the location of external resources, and the content pointed to will be embedded in the location of the current tag in the document; when the src resource is requested, the resources pointed to will be downloaded and applied to the document, such as js scripts, img pictures and frames and other elements.
<scriptsrc=”js.js”></script>
When the browser parses this element, it will suspend the download and processing of other resources until the resource is loaded, compiled, and executed. The same is true for elements such as pictures and frames, similar to embedding the pointed resource into the current tag. This is also why the js script is placed at the bottom instead of the head.
href is the abbreviation of HypertextReference, which points to the location of the network resource, establishes a link with the current element (anchor) or the current document (link), if we add it to the document
<linkhref=”common.css”rel=”stylesheet”/>
Then the browser will recognize the document as a css file, and will download resources in parallel without stopping the processing of the current document. This is why it is recommended to use the link method to load css instead of using the @import method.
8. Developers often optimize performance after the css/js code is launched. From the time the user refreshes the webpage, where is a js request usually cached?
Answer: dns cache, cdn cache, browser cache, server cache.
9. Is there any way to set the CSS style of a DOM?
External style sheet, importing an external css file
Internal style sheet, put the css code inside the <head> tag
Inline style, define the css style directly inside the HTML element
10. What is the difference between b tags and strong tags, i tags and em tags?
The latter has semantics, the former does not.
Then the question comes again, when is it semantic? Semantic understanding?
Do the right thing with the right label!
Semantic html is to make the content of the page structured, which is convenient for browsers and search engines to analyze; it is also displayed in a document format without style CCS, and it is easy to read. Search engine crawlers rely on tags to determine the context and weight of each keyword, which is good for SEO. Make it easier for people who read the source code to divide the website into blocks, which is easy to read, maintain and understand.
Semantic and better content tags such as header, nav, footer, aside, article, section, etc.
11. What is BFC?
BFC (block-level formatting context), a box that creates a new BFC is independently laid out, and the layout of elements inside the box does not affect elements outside the box. Two adjacent boxes in the same BFC have the problem of overlapping margins in the vertical direction. BFC means that an independent rendering area is created in the browser. The layout of all elements in this area will not affect the layout of elements outside the area. This rendering area only works on block-level elements.
12. Introduction to box model:
W3C standard box model
Width in CSS = width of content
The height (height) in CSS = the height of the content (content)
Actual width of div=width+(padding+border+margin)*2
Actual height of div=height+(padding+border+margin)*2
IE box model (also known as weird box model)
CSS width (width) = content (content) width + (border+padding) *2
CSS height (width) = content (content) height + (border+padding) *2
div actual width = width + margin2
div actual height = height + margin2
13. Why do you want to initialize the style?
Due to browser compatibility issues, different browsers have different default style values for tags. If it is not initialized, it will cause display differences between different browsers, but initializing CSS will have a small impact on search engine optimization.
14. What are the inline elements? What are block-level elements? What are the empty (void) elements?
(1) 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 value of span is "inline", which is an "inline" element.
(2) The inline elements are: ab span img input select strong
Block-level elements are: div ul ol li dl dt dd h1 h2 h3 h4…p
(3) Well-known empty elements: <br><hr><img><input><link><meta> Little-known: <area><base><col><command><embed><keygen><param><source><track><wbr>