Relearn the front-end series of HTML interview questions (in update……)

1. Introduce your understanding of browser kernels

  • It is mainly divided into two parts: Rendering Engine and Rendering EngineJSengine
    • Rendering engine: is responsible for retrieving the content of a web page (HTML, XML, images), collating information (for example, addingCSSEtc.), and calculate the display mode of the web page, which will then be output to the monitor or printer. Browser kernels interpret web pages differently and render them differently. All Web browsers, E-mail clients, and other applications that need to edit and display web content require a kernel.
    • jsEngine: Parsing and executionjavascriptTo achieve the dynamic effect of the web page.
    • : Arrows_Counterclockwise: Initially rendering engines andJSThe engine did not differentiate very clearly afterwardsJSAs engines became more independent, the kernel tended to refer only to the rendering engine.

2. What are common browser kernels

  • Microsoft Edge: EdgeHTML

  • IE: Trident

  • Firefox: Gecko

  • Chrom, Safari: WebKit

  • Opera: Presto

  • In-depth reading: the origin of the five major browser kernels and a summary of the major browser kernels in China

3. Briefly explain your understanding of HTML semantics

Endorsing answer:

  • Do the right thing with the right label.
  • htmlSemantization makes the content of the page structured and clearer, facilitating parsing by browsers and search engines.
  • Even in the absence of stylesCSSIs also displayed in a document format and is easy to read.
  • Search engine crawlers also rely on HTML tags to determine the context and weight of individual keywordsSEO.
  • Make it easier for people reading source code to divide the site into blocks, easy to read maintenance understanding.
  • Other devices parse (screen readers, blind readers, mobile devices) to render a web page in a meaningful way.

Brilliant answer:

  • I thinkhtmlSemantically means that we should use appropriate tags to structure web content.htmlIs essentially defining the structure of a web document.
  • A semantic document makes the results of a page clearer and easier to understand. This not only facilitates maintenance and understanding by developers, but also enables the machine to interpret the content of the document correctly.
  • For example, we often use b tags and strong tags, which are bold text in style, but the strong tag has the semantics of emphasis. To a general display, we might look the same, but to a machine, there’s a big difference. If the user is using a screen reader to access a web page, the strong tag has a noticeable change in tone, while the B tag does not.
  • If a search engine crawler is analyzing our web pages, it will rely onhtmlTag to determine the context and weight of each keyword, a semantic document is crawler friendly. It is conducive to the interpretation of the content of the document by the crawler, which is conducive to our websiteseo, fromhtml5As can be seen, the standard is inclined to semantic way to build web pages, add semantic tags, delete tags without semantic.
  • Table – > div +css——-> Page structure with appropriate tags to express the correct meaning

4. It’s at the beginning of every HTML fileDoctypeDo you know what it is

  • , <! DOCTYPE>The declaration is at the front of the document, just before the tag. This tag tells the browser which HTML specification to use for the document. (Important: tell the browser which specification to parse the page according to)

5. div+cssWhat are the advantages of the table layout

  • It’s a lot easier when you change it just by changing the CSS file.

  • Page loading speed, clear structure, simple page display.

  • Expression is separated from structure.

  • Easy to optimize (SEO) search engines are friendlier and easier to rank high.

6. imgWhat’s the difference between Alt and title? The similarities and differences between strong and EM?

  • Alt: indicates the prompt text to be displayed when the image cannot be displayed. Title: Prompt text displayed when the mouse moves in

  • Strong: indicates the importance of the content. Em: indicates the emphasis of the content

7. What are inline elements, block-level elements, void elements

First of all, according to the CSS specification, every element has a display attribute, which determines the type of the element. Each element has a default display value. For example, if the default display value of div is "block", it is a "block-level" element. The default value of the span display attribute is "inline", which is the "inline" element. Common block elements are: <div>, <p>, <h1>... < H6 >, < OL >, <ul>, < DL >, <table>, <address>, <blockquote>, <form> commonly used inline elements are: < A >, < SPAN >, <br>, < I >, <em>, <strong>, <label>, <q>, <var>, <cite>, <code> common inline block elements include: <img>, <input><hr/> <img/> <input/> <link/>
<meta/><area> <base> <col> <command> <embed> <keygen> <param> <source> <track> < WBR >Copy the code

8. src 和 hrefThe difference between

  • href Is a hypertext reference, which points to the location of the resource and establishes an association with the object file.srcThe purpose is to download the resource to the page;Browser parsinghrefProcessing of the document is not blocked(This is why the official recommendation is to use link import instead of @import),srcBlocks processing of the document.

9.HTML5Why only write<doctype>?

HTML5 is not based on SGML, so you don't need to reference DTDS, but you need docTypes to regulate browser behavior (to make browsers behave the way they should); HTML4.01 is based on SGML, so you need to reference a DTD to tell the browser what type of document the document is using.Copy the code

10. What is the difference between using link and @import when importing page styles?

(1) Link is an XHTML tag. In addition to loading CSS, it can also be used to define RSS, rel connection attributes, etc. @import is provided by CSS and can only be used to load CSS; (2) When the page is loaded, link is loaded at the same time, and the CSS referenced by @import waits until the page is loaded; (3) Import is proposed by CSS2.1, and can only be recognized in IE5, while link is XHTML tag, there is no compatibility problem; (4) Link supports using JS to control DOM to change styles, while @import does not.Copy the code

11.html5What are the new features and elements removed? How to deal withHTML5Browser compatibility issues with the new TAB? How to distinguish HTML fromHTML5?

* HTML5 is no longer a subset of SGML, it's all about adding graphics, location, storage, multitasking, etc. Canvas painting; Video and audio elements for media playback; Local offline storage localStorage Stores data for a long time. Data is not lost after the browser is closed. SessionStorage data is automatically deleted after the browser closes; More semantic content elements such as article, footer, header, nav, section; Form controls, Calendar, Date, time, Email, URL, search; New technologies webworker, Websocket, Geolocation; Elements removed: Pure elements: Basefont, Big, Center, FONT, S, Strike, TT, U; Elements that negatively affect usability: Frame, Frameset, Noframes; * Support for new HTML5 tags: IE8/IE7/IE6 supports tags generated by the document.createElement method. You can take advantage of this feature to enable these browsers to support new HTML5 tags. You can also use a mature framework like HTML5shim. <! --[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <! [endif]--> * How to distinguish HTML5: DOCTYPE declaration/new structural elements/functional elementsCopy the code

12.HTML5How to use offline storage and how to explain the working principle?

When the user is not connected to the Internet, the site or application can be accessed normally. When the user is connected to the Internet, the cache file on the user machine can be updated. How it works: HTML5 offline storage is based on the caching mechanism (not the storage technology) of a newly created.AppCache file, which stores resources offline through parsed lists that are stored like cookies. Later, when the network is offline, the browser displays the data stored offline. How to use: 1. Add a manifest attribute to the page header as follows. 2. Write offline storage resources in the cache.manifest file; CACHE MANIFEST #v0.11 CACHE: js/app.js CSS /style. CSS NETWORK: resourse/logo.png FALLBACK: / /offline. HTML 3. In offline state, operate window.applicationCache to implement requirements.Copy the code

13. What’s wrong with the browserHTML5How about offline storage resources for management and loading?

When online, the browser finds the MANIFEST attribute in the HTML header and requests the MANIFEST file. If it is the first time to access the app, the browser will download the corresponding resource according to the contents of the MANIFEST file and store it offline. If the app has already been accessed and the resource has been stored offline, the browser will load the page using the offline resource. Then the browser will compare the new manifest file with the old manifest file. If the file has not changed, nothing will be done. The resources in the file are then re-downloaded and stored offline. When offline, the browser uses the resources stored offline.Copy the code

14. Please describe the cookies,sessionStorage 和 localStorageThe difference between?

Cookies are data stored (usually encrypted) on a user's Client Side by a website to identify the user. Cookie data is always carried in the same HTTP request (even if it is not needed) and is passed back and forth between the browser and the server. SessionStorage and localStorage do not automatically send data to the server and only store data locally. Storage size: Cookie data size cannot exceed 4K. SessionStorage and localStorage, while also limited in size, are much larger than cookies, reaching 5M or more. Fixed period: localStorage stores persistent data. 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. Cookie The cookie set remains valid until the expiration time, even if the window or browser is closedCopy the code

15.iframeWhat are the disadvantages?

* Iframe blocks the Onload event on the main page; * Search engine searchers cannot interpret such pages, which is bad for SEO; * Iframe and the home page share the connection pool, and browsers have restrictions on connections to the same domain, so parallel page loading can be affected. These two disadvantages need to be considered before using iframe. If you need to use an iframe, it is best to use javascript to dynamically add the SRC attribute value to the iframe to get around these two problems.Copy the code

16.LabelWhat is the function of? How does it work?

The label label defines the relationship between form controls. When the user selects this label, the browser automatically shifts focus to the form control associated with the label. <label ="Name">Number:</label> <input type="text" Name ="Name" id="Name"/> <label>Date:<input type="text" name="B"/></label>Copy the code

17.HTML5How do I turn off autocomplete?

Set autoComplete =off for forms or an input that do not want the prompt.Copy the code

18. How to implement communication between multiple tabs in the browser? (ali)

WebSocket, SharedWorker; You can also call localStorge, cookies and other local storage methods. When localStorge is added, modified or deleted in another browsing context, it triggers an event. We monitor the event and control its value to carry out page information communication. Quirks: Safari throws a QuotaExceededError exception when setting localStorge in traceless mode;Copy the code

19. How to create a circular clickable area on a page?

1. Map +area or SVG 2. Border-radius 3Copy the code

20. Implementation does not use border drawing1pxHigh lines, consistent across browsers in standard mode and weird mode.

<div style="height:1px; overflow:hidden; background:red"></div>Copy the code

21 web page verification code is what, is to solve what security problems.

A public, fully automated program that distinguishes users from computers and human beings. Can prevent malicious crack password, brush tickets, forum irrigation; Effectively prevent hackers to a specific registered users with a specific program to crack the way to continue the login attempt.Copy the code

22.titlewithh1What is the difference between b and strong? What is the difference between I and em?

The title attribute has no clear meaning and only represents a title, while H1 represents a title with clear hierarchy, which also has a great influence on the capture of page information. <strong> is used to emphasize the content, while <B> is used to show the content. I content is displayed in italics, and em indicates emphasized text; Physical Style Elements pre Semantic Style Elements strong, em, ins, del, Code should use semantic style tags accurately, but not overuse them. Natural style tags are preferred when in doubt.Copy the code

23. Tell me about your interest in Web standards andw3cUnderstanding and recognition

  • Tags should be closed, English lowercase, and not nested chaos, using semantic tags to improve the probability of search
  • Using an external connectioncssandjsTo separate structure, style and behavior
  • The content can be accessed by a wide range of devices, the code is simplified, the development of components, the code is easy to maintain, reusable, easy to update

24.HTML and XHTMLWhat’s the difference?

  • htmlIs a design language based on web pages,xhtmlIs a kind of basisxml, strict syntax, standard design language
  • The main difference is thisXHTMLElements must be properly nested, elements must be closed, tags must be lowercase, they must have a root element,htmlThere are no such restrictions

25.iframeWhat are the advantages

  • Solves the loading problems of slow loading third-party content such as ICONS and ads
  • Security sandboxes can be implemented
  • Scripts can be loaded in parallel

26. List the common structure tags and describe their functions

  • Structure tags are specifically used to identify the different structure of a page, relative to usage

    Element, structure tags can be semantic

    <header>The header of the document<nav>The navigation links section of the page<section></section>Used to define sections in a document that represent a specific component of the document<article></article>Often used to define content independent of the rest of the document<footer>The footer<aside></aside>Some additional components, advertising columns, sidebars, and related reference informationCopy the code

27. What are the common manifestations of hyperlinks

  • Plain hyperlink<a href="www.xxx.com">ssss</a>
  • Download link target document for download resource
  • Email link< a href = "mailo:[email protected]" > SSSS < / a >
  • Empty connection
  • Anchor point jump

This article belongs to the original, if there is infringement, please contact me to delete, thank you for your support.