HTML face question Finishing

HTML article:

1. Which of the Web pages do you test? What are the cores of these browsers?

• Ie:trident kernel
• Firefox:gecko kernel
• Safari:webkit kernel
• Opera: formerly the Presto kernel, opera has now switched to Google Chrome's blink kernel
• Chrome:blink (co-developed with Opera Software based on Webkit,google)

2. Every HTML file has a very important thing at the beginning, Doctype, do you know what this is?

Answer: <! The doctype> declaration is positioned at the front of the document, before the Focus: Tell the browser to parse the page according to which specification)

What is 3.Quirks mode? What's the difference between it and the standards model?

Starting with the IE6, we introduced the standards mode, which we often encounter when writing programs, that is, when a parameter is true, we use the new function, and if this parameter is not true, we use the old function, so that we can not destroy the original program and provide new features. IE6 is also similar to this, it takes the DTD as the "parameter", because the previous page is not going to write the DTD, so IE6 assumes that if the DTD is written, it means that the page will be a better layout for the CSS support, and if not, adopt the layout before the compatibility. This is the quirks mode (quirks mode, weird mode, weird mode)

Differences: Overall there are three differences in layout, style parsing, and scripting execution.

• Box model: In the standard, if you set the width and height of an element, it refers to the width and height of the element content, and in quirks mode, the width and height of IE also contains padding and border.
• Set the aspect of the elements in the line: In standards mode, setting Wdith and height for inline elements such as <span> will not take effect, and in quirks mode it will take effect.
• Set the height of a percentage: In standards mode, the height of an element is determined by the content it contains, and if the parent element does not have a percentage set height, the child element sets a percentage height that is not valid.
• Set horizontal centering with margin:0 Auto: Use margin:0 Auto to center the element horizontally in standards mode, but it will fail in quirks mode.

What are the advantages of the 4.DIV+CSS layout compared to the table layout?

• When the revision is more convenient, just change the CSS file.
• The page loads faster, has a clear structure, and the page is simple to display.
• The performance is separated from the structural phase.
• Easy to optimize (SEO) search engines are more friendly and ranked more easily by the front.

What are the similarities and differences between 5.a:img Alt and title? The similarities and differences between B:strong and em?

A:

• 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, you will see ALT as tool tip when there is no title)
• Title (tool tip): This property provides the recommended information for the element that sets the property.

B:

• Strong: Bold emphasis on labeling, emphasizing, the importance of expressing content
• EM: Italic accent labels, more strongly emphasized, highlighting points of content

6. Can you describe the difference between progressive enhancement and graceful demotion?

• Progressive Enhancement Progressive Enhancement: build pages for low-version browsers, ensure the most basic functionality, and then improve and append features such as effects and interactivity for advanced browsers to achieve a better user experience.
• Graceful downgrade graceful degradation: Build the full functionality from the beginning and then be compatible with the low-version browser.

7. Why is it more efficient to use multiple domain names to store site resources?

• CDN Cache is more convenient
• Breakthrough Browser Concurrency Limits
• Save Cookie Bandwidth
• Saves the number of connections to the primary domain and optimizes page response times
• Prevent unnecessary security issues

8. Please describe the difference between cookies,sessionstorage and localstorage?

Sessionstorage is used to store data locally in a session, which can only be accessed by a page in the same session and destroyed when the session ends. So sessionstorage is not a persistent local store, only session-level storage. While Localstorage is used for persistent local storage, the data will never expire unless the data is actively deleted.

The difference between Web storage and cookies

• The concept of WEB storage is similar to a cookie, except that it is designed for larger capacity storage. The size of the cookie is limited, and every time you request a new page, the cookie is sent past, which virtually wastes bandwidth, and 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, unlike cookies that require front-end developers to encapsulate Setcookie,getcookie themselves. However, cookies are also not available or missing: The role of cookies is to interact with the server as part of the HTTP specification, and Web Storage is only for local "storage" of data.

9. Briefly describe the difference between src and href.

SRC (source) is used to replace the current element, and the href (hypertext Reference) is used to establish a connection between the current document and the referencing resource.

10. What are the image formats that you will use to know your Web page production?

Png-8,png-24,jpeg,gif,svg

But none of the above is the final answer the interviewer wants. The interviewer wants to hear the Webp. (Are you interested in new technology, fresh things)

Popular Science WEBP: WEBP format, a graphic format developed by Google (Google) to speed up the loading of pictures. Image compression volume is about 2/3 of JPEG, and can save a lot of server bandwidth resources and data space. Well-known websites like Facebook and ebay have started testing and using the WEBP format.

In the same quality, the WEBP format image is 40% smaller than the JPEG format image

11. Know what a micro format is? Talk about understanding. Should I consider micro-formats in front-end builds?

Micro-format (microformats) is a set of semantic XHTML vocabularies that make machine readable, and an open standard for structured data. is a special format for special applications.

Pros: Add smart data to a Web page, allowing the site content to display additional hints in the search engine results interface. (Application example: watercress, interested in self-Google)

12. After the CSS/JS code is on-line, developers often optimize performance, starting from the user Refresh page, a JS request in general where there will be cache processing?

DNS Cache, CDN cache, browser cache, server cache.

13. A large number of pictures on a page (large e-commerce site), loading is very slow, you have ways to optimize the loading of these images, to give users a better experience.

• Picture lazy loading, in the non-viewable area of the page can add a ScrollBar event, to determine the location of the image and the top of the browser distance from the page, if the former is less than the latter, priority loading.
• If you have a slideshow, photo album, and so on, you can use the picture preload technology to download the previous and next first pictures of the current display.
• If the picture is a CSS picture, you can use Csssprite,svgsprite,iconfont, Base64 and other techniques.
• If the picture is too large, you can use a specially encoded image that loads with a specially compressed thumbnail to enhance the user experience.
• If the picture display area is smaller than the true size of the picture, the image is compressed and the size is consistent with the display, because the image is compressed on the server side according to business needs.

14. How do you understand the semantics of HTML structure?

• Remove or lose style to make the page structure clear
• A screen reader (if the visitor has a visual impairment) will "read" your page exactly according to your tag.
• Search engine crawlers also rely on tags to determine the context and weight of individual keywords
• It is important that your page is easily understood by crawlers, because the crawler largely ignores markup for performance and only focuses on semantic tagging.
• Facilitates team development and maintenance

15. Talk about the front-end point of view to do SEO need to consider what?

• Learn how search engines crawl Web pages and how to index them
• Meta tag optimization
• Learn about the main search engines
• The main Internet directory
• Search Engine Login
• Link Exchange and link-wide degrees (link popularity)
• Use of reasonable labels

HTML face question Finishing