Web Front-end Interview questions (HTML)

Interview Questions (HTML) (With answers)


1. The Doctype? What is the difference between standard mode and compatible mode?

(1) The declaration is located in the first line of the HTML document, before the tag. Tell the browser’s parser what document to use to parse the document. A non-existent or improperly formatted DOCTYPE will cause the document to be rendered in compatibility mode.

(2) The standard mode of typesetting and JS mode of operation are the highest standard supported by the browser. In compatibility mode, pages are displayed in a loosely backward compatible manner, mimicking the behavior of older browsers in case the site doesn’t work.

2. Why do HTML5 only need to write?

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.

3. What are the inline elements? What are block-level elements? What are the void elements?

4. 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;

5. Explain your understanding of browser kernels?

It is mainly divided into two parts: layout Engineer or Rendering Engine and JS Engine.

Rendering engine: Takes the content of a web page (HTML, XML, images, etc.), collates information (such as adding CSS, etc.), calculates how the page should appear, and then outputs it to a monitor or printer. The syntax of the web page will be interpreted differently depending on the browser kernel, so the rendering effect will be different. All Web browsers, E-mail clients, and other applications that need to edit and display web content require a kernel.

Javascript engine: parse and execute javascript to achieve the dynamic effect of web pages.

At the beginning, rendering engines and JS engines were not clearly distinguished, but later JS engines became more and more independent, and the kernel tended to refer only to rendering engines.

6. What are common browser kernels?

Trident kernel: IE,MaxThon,TT,The World,360, Sogou browser, etc. [also known as MSHTML]

Gecko: kernel Netscape6 and above version, FF, MozillaSuite/SeaMonkey, etc

Presto kernel: Opera7 and above. [Opera kernel: Presto, now: Blink;]

Webkit kernel: Safari,Chrome, etc. [Chrome: Blink(WebKit offshoot)]

7. What are the new features and elements removed from HTML5? How to deal with the browser compatibility of HTML5 new tags? How to distinguish HTML from HTML5?

HTML5 is no longer a subset of SGML, but is 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;

Removed elements:

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 use this feature to make these browsers support new HTML5 tags,

Once the browser supports the new tag, it also needs to add the default style for the tag.

You can also use a mature framework like HTML5shim.

What is your understanding of HTML semantics?

Do the right thing with the right label.

HTML semantics make the content of the page structured, clearer structure, easy to browser, search engine parsing;

Displays in a document format even without styling CSS and is easy to read;

Search engine crawlers also rely on HTML tags to determine the context and the weight of each keyword, which is good for SEO.

Make it easier for people reading source code to divide the site into blocks, easy to read maintenance understanding.

Can you explain how HTML5 offline storage works?

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:

Add a manifest attribute to the page header as shown below.

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.

How do browsers manage and load HTML5 offline storage resources?

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.

Please describe the difference between cookies, sessionStorage and localStorage?

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.

Term time:

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 closed

What are the disadvantages of iframe?

* 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.

What does Label do? 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.

How do HTML5 forms turn off autocomplete?

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

How to implement communication between multiple tabs in the browser?

WebSocket, SharedWorker;

You can also call localStorge, cookies and other local storage methods.

Localstorge fires an event whenever it is added, modified, or deleted from another browsing context,

We monitor the event, control its value to carry on the page information communication;

Quirks: Safari throws a QuotaExceededError exception when setting localStorge in traceless mode;

How does webSocket work with low browsers?

Adobe Flash Socket,

ActiveX HTMLFile (IE),

Send XHR based on multipart encoding

XHR based on long polling

What uses can the Page Visibility API be used for?

Through the value of visibilityState to detect whether the page is currently visible, and the time to open the page;

Pause music or video automatically when the page is switched to another background process.

How to implement a circular clickable area on a page?

1. Map +area or SVG

2, the border – the radius

3. Pure JS implementation requires a simple algorithm, such as whether a point is on a circle or not, and obtaining mouse coordinates

Achieve the same effect in standard mode and weird mode in different browsers without using border to draw a 1px high line.

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.

The difference between title and H1, B and strong, 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.

1. Strong is used to indicate the important content of the network.
Will stress, andIs to show and emphasize the content.

I content is displayed in italics, and em indicates emphasized text;

Physical Style Elements — Natural Style tags

b, i, u, s, pre

Semantic Style Elements — Semantic Style tags

strong, em, ins, del, code

Semantic style tags should be used accurately, but not overused, and natural style tags are preferred when in doubt.