[Front-end interns preparing for autumn recruitment] - Summary of HTML interview questions, recommended collection

[Front-end interns preparing for autumn recruitment] - Summary of HTML interview questions, recommended collection

1. The difference between src and href

Both src and href are used to refer to external resources , and their differences are as follows:

• src: Indicates a reference to a resource, and the content it points to will be embedded where the current tag is located. src will download and apply the resources it points to to the document, such as requesting js scripts. When the browser parses this element, it will suspend the download and processing of other resources until the resource is loaded, compiled, and executed, so generally js scripts will be placed at the bottom of the page.
• href: Indicates a hypertext reference, which points to some network resources and establishes a link relationship with the current element or this document. When the browser recognizes the file it points to, it downloads the resource in parallel without stopping processing of the current document. Commonly used on labels such as a and link.

2. Understanding of HTML semantics

Semanticization refers to selecting appropriate tags (code semantics) according to the structure of the content (content semantics) . In layman's terms, it is to do the right thing with the right label.

The advantages of semantics are as follows:

• It is friendly to machines, and the text with semantics is rich in expressiveness, which is more suitable for crawlers of search engines to crawl effective information, and is conducive to SEO. In addition, semantic classes also support screen-reading software, which can automatically generate directories based on articles;
• Friendly to developers, the use of semantic tags enhances readability, and the structure is clearer. Developers can clearly see the structure of the web page, which is convenient for team development and maintenance.

Common semantic tags:

<header></header>  头部

<nav></nav>  导航栏

<section></section>  区块（有语义化的div）

<main></main>  主要区域

<article></article>  主要内容

<aside></aside>  侧边栏

<footer></footer>  底部

3. The role of DOCTYPE (document type)

DOCTYPE is a document type declaration of a standard universal markup language in HTML5. Its purpose is to tell the browser (parser) what kind of document type definition (html or xhtml) should be used to parse the document . Different rendering modes will affect browsing. parser for CSS code and even JavaScript scripts. It must be declared on the first line of the HTML document.

Two modes for the browser to render the page (obtainable through document.compatMode, for example, the document type of Yuque official website is CSS1Compat ):

• CSS1Compat: Standard mode (Strick mode) , the default mode, the browser uses the W3C standard to parse and render the page. In standards mode, the browser renders pages in the highest standard it supports.
• BackCompat: Weird mode (mixed mode) (Quick mode) , the browser uses its own weird mode to parse and render the page. In quirks mode, pages are displayed in a more relaxed backwards-compatible way.

4. The difference between defer and async in the script tag

If there is no defer or async attribute, the browser will load and execute the corresponding script immediately. It will not wait for subsequent loaded document elements, it will start loading and executing when it is read, thus blocking the loading of subsequent documents.

The following figure can intuitively see the difference between the three:

Among them, blue represents the js script network loading time, red represents the js script execution time, and green represents html parsing.

The defer and async attributes are used to asynchronously load external JS script files, and they will not block the parsing of the page . The differences are as follows:

• Execution order Multiple tags with async attributes cannot guarantee the order of loading; multiple tags with defer attributes are executed in the order of loading;
• Whether scripts are executed in parallel: async attribute, indicating that the loading and execution of subsequent documents and js scripts are carried out in parallel , that is, asynchronous execution; defer attribute, the process of loading subsequent documents and the loading of js scripts (only loading and not Execution) is performed in parallel (asynchronously). The js script needs to wait until all elements of the document are parsed before executing, and before the DOMContentLoaded event is triggered to execute.

5. What are the commonly used meta tags?

metaTags are defined by nameand contentattributes, which are used to describe the attributes of webpage documents , such as the author of the webpage, webpage description, keywords, etc. In addition to the HTTP standard fixing some nameas a consensus for everyone to use, developers can also customize the name.

Commonly used meta tags:

(1) charset, used to describe the encoding type of HTML documents:

<meta charset="UTF-8" >

(2) keywords, page keywords:

<meta name="keywords" content="关键词" />

(3) description, page description:

<meta name="description" content="页面描述内容" />

(4) refresh, page redirection and refresh:

<meta http-equiv="refresh" content="0;url=" />

(5) viewport, adapted to the mobile terminal, you can control the size and proportion of the viewport:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Among them, contentthe parameters are as follows:

• width viewport: width (value/device-width)
• height viewport: height (value/device-height)
• initial-scale: initial zoom ratio
• maximum-scale: maximum zoom ratio
• minimum-scale: minimum zoom factor
• user-scalable: Whether to allow users to zoom (yes/no)

(6) Search engine index method:

<meta name="robots" content="index,follow" />

Among them, contentthe parameters are as follows:

• all: the file will be retrieved, and the links on the page can be queried;
• none: The file will not be retrieved, and the links on the page cannot be queried;
• index: the file will be retrieved;
• follow: Links on the page can be queried;
• noindex: the file will not be retrieved;
• nofollow: Links on the page cannot be queried.

6. What are the updates in HTML5

1. Semantic tags

• header: defines the header (header) of the document;
• nav: defines the part of the navigation link;
• footer: defines the footer (bottom) of the document or section;
• article: defines the content of the article;
• section: defines the section (section, section) in the document;
• aside: defines the content outside of its content (side);

2. Media tab

(1) audio: audio

<audio src='' controls autoplay loop='true'></audio>

Attributes:

• controls control panel
• autoplay automatically play
• loop='true' loop playback

(2) video video

<video src='' poster='imgs/aa.jpg' controls></video>

Attributes:

• poster: The specified video has not been fully downloaded, or the user has not clicked on the cover displayed before playing. By default, the first stitch of the current video file is displayed, of course, you can also specify it yourself through the poster.
• controls control panel
• width
• height

(3) source tag

Because browsers support different video formats, in order to be compatible with different browsers, you can use source to specify the video source.

<video>
    <source src='aa.flv' type='video/flv'></source>
    <source src='aa.mp4' type='video/mp4'></source>
</video>

3. Form

Form type:

• email : It can verify whether the currently entered email address is legal
• url: authentication URL
• number : Only numbers can be entered, and others cannot be entered, and it has its own up and down arrows for increasing and decreasing. The max attribute can be set to the maximum value, min can be set to the minimum value, and value is the default value.
• search : A small fork will be provided behind the input box, which can delete the input content, which is more user-friendly.
• range : Can be provided to a range where max and min can be set and value where the value attribute can be set to the default value
• color : provides a color picker
• time : hours minutes seconds
• data : date selection year month day
• datatime: time and date (currently only supported by Safari)
• datatime-local : datetime control
• week : week control
• month: month control

Form properties:

• placeholder : prompt information

• autofocus : get the focus automatically

• autocomplete="on" or autocomplete="off" There are two prerequisites for using this attribute:

• • The form must have been submitted
  • There must be a name attribute.

• required: It is required that the input box cannot be empty and must have a value before it can be submitted.

• pattern=" "Write the desired regular pattern inside, for example, mobile phone number patte="^(+86)?\d{10}$"

• multiple: You can select multiple files or multiple mailboxes

• form="form form ID"

Form events:

• oninput This event is triggered whenever the content of the input box in the input changes.
• oninvalid Fires this event when validation fails.

4. Progress bar, meter

• progress tag: used to indicate the progress of the task (not supported by IE and Safari), max is used to indicate the progress of the task, and value indicates how much has been completed

• meter attribute: used to display the remaining capacity or remaining inventory (IE, Safari does not support)

• • high/low: specifies the range that is considered high/low
  • max/min: Specifies the maximum/minimum value
  • value: Specifies the current metric value

Setting rules: min < low < high < max

5. DOM query operation

• document.querySelector()
• document.querySelectorAll()

The object they choose can be a label, a class (need to add a point), or an ID (need to add #)

6. Web Storage

HTML5 provides two new ways to store data on the client side:

• localStorage - data storage with no time limit
• sessionStorage - data storage for a session

7. Other

• Drag and drop: Drag and drop is a common feature where an object is grabbed and then dragged to another location. Set elements to be draggable and dropable:

<img draggable="true" />

• Canvas (canvas): The canvas element uses JavaScript to draw images on a web page. A canvas is a rectangular area whose individual pixels can be controlled. canvas has a variety of methods for drawing paths, rectangles, circles, characters, and adding images.

<canvas id="myCanvas" width="200" height="100"></canvas>

• SVG: SVG refers to Scalable Vector Graphics, which is used to define vector-based graphics for the web. It uses the XML format to define graphics. When the image is enlarged or resized, its graphic quality will not be lost. It is a standard of the World Wide Web Consortium
• Geolocation: Geolocation is used to locate the user's location. '

Summarize:

(1) New semantic tags: nav, header, footer, aside, section, article

(2) Audio and video tags: audio, video

(3) Data storage: localStorage, sessionStorage

(4) canvas (canvas), Geolocation (geographic positioning), websocket (communication protocol)

(5) New attributes added to the input tag: placeholder, autocomplete, autofocus, required

（6）history API：go、forward、back、pushstate

The elements removed are:

• Elements of pure expression: basefont, big, center, font, s, strike, tt, u;
• Elements that negatively affect usability: frame, frameset, noframes;

7. What is the function of the srcset attribute of img?

Different images are often used in responsive pages according to the screen density. At this time, the srcset attribute of the img tag is used. The srcset attribute is used to set different screen densities, img will automatically load different images. The usage is as follows:

<img src="image-128.png" srcset="image-256.png 2x" />

Using the above code, you can load image-128.png when the screen density is 1x, and load image-256.png when the screen density is 2x.

According to the above implementation, image addresses must be set for different screen densities. The current screen densities are 1x, 2x, 3x, and 4x. If you set 4 images for each image, the loading will be very slow. So there is a new srcset standard. code show as below:

<img src="image-128.png"
     srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"
     sizes="(max-width: 360px) 340px, 128px" />

Among them, srcset specifies the address of the picture and the corresponding picture quality. sizes is used to set the size zero point of the image. For the w unit in srcset, it can be understood as picture quality. Can be used if the visible area is smaller than the value of this quality. The browser will automatically choose the smallest available image.

The syntax of sizes is as follows:

sizes="[media query] [length], [media query] [length] ... "

sizes refers to the default display of 128px, if the width of the viewport is greater than 360px, it will display 340px.

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

• Inline elements are: a b span img input select strong;
• Block-level elements are: div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p;

An empty element, that is, an HTML element with no content. Empty elements are closed in the opening tag, that is, empty elements have no closing tag:

• The common ones are: <br>, <hr>, <img>, <input>, <link>, <meta>;
• The rare ones are: , <area>, <base>, <col>, <colgroup>, <command>, <embed>, <keygen>, <param>, <source>, <track>.<wbr>

9. Talk about web workers

In an HTML page, if the state of the page is not responsive when the script is executed, the page does not become responsive until the script is executed. A web worker is a js running in the background, independent of other scripts, and will not affect the performance of the page. And pass the result back to the main thread through postMessage. In this way, when performing complex operations, the main thread will not be blocked.

How to create web workers:

1. Detect browser support for web workers
2. Create web worker files (js, callback functions, etc.)
3. Create a web worker object

10. How to use HTML5 offline storage, and what is its working principle

Offline storage refers to: when the user is not connected to the Internet, the site or application can be accessed normally, and when the user is connected to the Internet, the cache file on the user's machine is updated.

**Principle:**HTML5's offline storage is based on a new .appcachefile caching mechanism (not a storage technology). Through the parsing list on this file, resources are stored offline, and these resources will be stored like cookies. Later, when the network is offline, the browser will display the page through the data stored offline

Instructions:

(1) Create a manifest file with the same name as html, and then add the manifest attribute to the head of the page:

<html lang="en" manifest="index.manifest">

(2) cache.manifestWrite resources that need to be stored offline in the file:

CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html

• CACHE : Indicates the list of resources that need to be stored offline. Since the page containing the manifest file will be automatically stored offline, there is no need to list the page itself.
• NETWORK : Indicates that the resources listed under it can only be accessed when they are online, they will not be stored offline, so these resources cannot be used offline. However, if there is the same resource in CACHE and NETWORK, then this resource will still be stored offline, which means that CACHE has a higher priority.
• FALLBACK : Indicates that if access to the first resource fails, then use the second resource to replace it. For example, the above file indicates that if access to any resource in the root directory fails, then access offline.html.

(3) In the offline state, operate window.applicationCacheto perform offline cache operations.

How to update the cache:

(1) Update the manifest file

(2) Operation via javascript

(3) Clear browser cache

Precautions:

(1) Browsers may have different capacity restrictions on cached data (the limit set by some browsers is 5MB per site).

(2) If the manifest file, or one of the files listed inside cannot be downloaded normally, the entire update process will fail, and the browser will continue to use the old cache.

(3) The html referencing the manifest must have the same origin as the manifest file and be under the same domain.

(4) The resources in FALLBACK must have the same source as the manifest file.

(5) When a resource is cached, the browser will also access the resource in the cache if it directly requests the absolute path.

(6) Even if other pages in the site do not set the manifest attribute, the requested resource will be accessed from the cache if it is in the cache.

(7) When the manifest file changes, the resource request itself will also trigger an update.

11. How does the browser manage and load HTML5 offline storage resources?

• When online , the browser finds that there is a manifest attribute in the html header, and it will request the manifest file. If it is the first time to visit the page, the browser will download the corresponding resources according to the contents of the manifest file and store them offline. If the page has been visited and the resource has been stored offline, the browser will use the offline resource to load the page, and then the browser will compare the new manifest file with the old manifest file, and if the file has not changed, do nothing Operation, if the file changes, the resources in the file will be re-downloaded and stored offline.
• When offline , the browser will directly use the resources stored offline.

12. What is the difference between title and h1, b and strong, i and em?

• The strong tag has semantics, and it has the effect of emphasizing the tone, while the b tag does not have it. The b tag is just a simple bold tag. The characters between the b tags are all set to bold, and the tone of the characters strengthened by the strong tag is achieved through bold, and the search engine pays more attention to the strong tag.
• The title attribute has no clear meaning and only indicates a title, while H1 indicates a title with a clear hierarchy, which has a great impact on the crawling of page information
• i content is displayed in italics, em means emphasized text

13. What are the advantages and disadvantages of iframe?

The iframe element creates an inline frame (or inline frame) that contains another document.

advantage:

• Used for slower loading content (such as ads)
• Can make scripts downloadable in parallel
• Can achieve cross-subdomain communication

shortcoming:

• The iframe will block the onload event of the main page
• not recognized by some search engines
• Will generate a lot of pages, not easy to manage

14. What is the function of label? how to use?

label tag to define the relationship between form controls: when the user selects the label tag, the browser will automatically turn the focus to the form control related to the label tag.

• Method 1:

<label for="mobile">Number:</label>
<input type="text" id="mobile"/>

• Method 2:

<label>Date:<input type="text"/></label>

15. Difference between Canvas and SVG

（1）SVG：

SVG Scalable Vector Graphics (Scalable Vector Graphics) is a language based on 2D graphics described by the Extensible Markup Language XML. SVG based on XML means that every element in the SVG DOM is available, and Javascript events can be attached to an element processor. In SVG, each drawn shape is considered an object. Browsers can automatically reproduce graphics if the properties of the SVG object change.

Its characteristics are as follows:

• independent of resolution
• Support for event handlers
• Best for applications with large rendering areas (such as Google Maps)
• High complexity slows down rendering (any app that makes heavy use of the DOM is not fast)
• Not suitable for gaming applications

（2）Canvas：

Canvas is a canvas that draws 2D graphics through Javascript and renders them pixel by pixel. When its position changes, it will be redrawn.

Its characteristics are as follows:

• dependent on resolution
• event handlers are not supported
• poor text rendering
• Ability to save resulting images in .png or .jpg format
• Best for graphics-intensive games where many objects are redrawn frequently

NOTE: A vector diagram, also known as an object-oriented image or a drawing image, is defined mathematically as a series of points connected by lines. Graphical elements in vector files are called objects. Each object is a self-contained entity with attributes such as color, shape, outline, size, and screen position.

16. What is the function of the head tag, and which tag is essential?

The tag is used to define the head of the document, which is the container for all head elements. Elements in can reference scripts, instruct the browser where to find style sheets, provide meta information, and more.

The header of the document describes various attributes and information of the document, including the title of the document, its location in the Web, and its relationship with other documents. The data contained in the header of most documents is not actually displayed to the reader as content.

The following tags can be used in the head section: <base>, <link>, <meta>, <script>, <style>, <title>.

where <title>defines the title of the document and is the only required element in the head section.

17. What is the function of document declaration (Doctype) and <!Doctype html>? How to distinguish strict mode from promiscuous mode? what do they mean?

**The role of the document statement: **The document statement is to tell the browser HTMLwhat version the current document HTMLis written in, so that the browser can correctly parse it according to the declared version.

The function of <!Doctype html>:<!doctype html> the function is to let the browser enter the standard mode, and use the latest HTML5standard to parse and render the page; if it is not written, the browser will enter the promiscuous mode, and we need to avoid such situations.

The difference between strict mode and promiscuous mode:

• Strict mode : Also known as standard mode, it means that the browser W3Cparses the code according to the standard;
• Promiscuous mode : Also known as weird mode and compatibility mode, it means that the browser parses the code in its own way. Promiscuous mode usually mimics the behavior of older browsers to prevent old sites from working;

Distinguishment : In the webpage DTD, it directly affects whether to use strict mode or browsing mode. It can be said DTDthat the use is closely related to the difference between the two methods.

• If the document contains strict DOCTYPE, then it is generally rendered in strict mode ( strict DTD - strict mode );
• Containing transitions DTDand URI, DOCTYPEalso render in strict mode, but having a transition DTDwithout URI(Uniform Resource Identifier, which is the address at the end of the declaration) causes the page to render in promiscuous mode ( Transition with URI DTD - Strict Mode; Transition without URI DTD - promiscuous mode );
• DOCTYPEAbsence or malformation will cause the document to be rendered in promiscuous mode ( DTD does not exist or is malformed - promiscuous mode );
• HTML5No DTD, so there is no difference between strict mode and promiscuous mode. HTML5There is a relatively loose method. When implemented, backward compatibility has been achieved as much as possible ( HTML5 has no distinction between strict and promiscuous ).

In short, the strict mode allows each browser to uniformly implement a set of specification compatibility mode to ensure the normal operation of the old website.

18. What is the reason for the garbled characters in the browser? How to solve?

Causes of garbled characters:

• The source code of the webpage is gbkencoded, and the Chinese characters in the content are utf-8encoded, so that garbled characters will appear when the browser is opened html, and garbled characters will appear on the contrary;
• htmlThe encoding of the web page is gbk, and the program calls out utf-8the content of the encoding from the database, which will also cause garbled encoding;
• The browser cannot automatically detect the encoding of the web page, resulting in garbled characters on the web page.

Solution:

• Use software to edit HTML web content;
• If the encoding of the web page is set to Y gbk, and the encoding format of the data stored in the database is Y UTF-8, at this time, the program needs to query the database data to display the data and advance the program to transcode;
• If there are garbled characters on the webpage when browsing in the browser, find the conversion code menu in the browser to convert.

19. The difference between progressive enhancement and graceful degradation

(1) Progressive enhancement : mainly for page reconstruction for low-version browsers, to ensure basic functions, and then for advanced browsers to improve and add functions in terms of effects and interactions to achieve more Good user experience.

(2) Graceful degradation : Build complete functions from the beginning, and then make them compatible with lower versions of browsers.

The difference between the two:

• Graceful degradation starts from the complex status quo and tries to reduce the supply of user experience; while progressive enhancement starts from a very basic, working version and expands on this basis to adapt to the needs of future environments ;
• Degradation (decay of functionality) means looking backwards, while progressive enhancement means looking forward while keeping its roots in a safe place.

The "graceful degradation" point of view believes that websites should be designed for the most advanced and complete browsers. And arrange the testing work under browsers that are considered "outdated" or lacking functions in the last stage of the development cycle, and limit the testing object to the previous version of mainstream browsers (such as IE, Mozilla, etc.). Under this design paradigm, older browsers are considered to provide only a "poor, but passable" browsing experience. Small adjustments can be made to suit a particular browser. But since they are not the focus of our attention, other than fixing larger bugs, other differences will be simply ignored.

The "progressive enhancement" view argues that the focus should be on the content itself. Content is the incentive to build a website. Some websites display it, some collect it, some search for it, some operate it, and some websites even include all of the above, but the same thing is that they all involve content. This makes "progressive enhancement" a much more reasonable design paradigm. That's why it was immediately adopted by Yahoo and used to build out its "Graded Browser Support" strategy.

20. Talk about HTML5 drag API

• dragstart: The main body of the event is the dragged and dropped element, which is triggered when the dragged and dropped element starts to be dragged and dropped.
• darg: The event body is the dragged and dropped element, which is triggered when the dragged and dropped element is being dragged and dropped.
• dragenter: The event body is the target element, which is triggered when the dragged element enters an element.
• dragover: The event body is the target element, which is triggered when it is dragged and moved within an element.
• dragleave: The event body is the target element, and is triggered when the dragged element moves out of the target element.
• drop: The event body is the target element, which is triggered when the target element fully accepts the dragged and dropped element.
  ozilla etc.). Under this design paradigm, older browsers are considered to provide only a "poor, but passable" browsing experience. Small adjustments can be made to suit a particular browser. But since they are not the focus of our attention, other than fixing larger bugs, other differences will be simply ignored.