Shulou(Shulou.com)06/03 Report--

Editor to share with you what the basic HTML interview questions are, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

What is the function of 1 DOCTYPE? How to distinguish between standard mode and hybrid mode? What's the point of them?

Tells the browser which version of the HTML specification to use to render the document. The absence or incorrect form of DOCTYPE can cause HTML documents to be rendered in promiscuous mode.

Standard mode (Standards mode) runs at the highest standard supported by browsers; in hybrid mode (Quirks mode) pages are displayed in a looser, backward-compatible way.

Why only need to write 2 HTML5?

HTML5 is not based on SGML (Standard Generalized Markup Language Standard Universal markup language), so there is no need to reference DTD (DTD document type definition), but DOCTYPE is needed to regulate browser behavior.

HTML4.01 is based on SGML, so you need to reference DTD. To tell the browser the type of document used by the document, as follows:

What are the elements in the 3 lines? What are the block-level elements? What are the void elements?

Inline element: a span img input select

Block-level element: p ul ol li dl dt dd H2 p

Empty element:

What's the difference between using link and @ import when importing styles into a 4 page?

In the same place, they all refer to CSS externally, and the difference is as follows:

Link is a xhtml tag, which can define other transactions such as RSS besides loading css. @ import belongs to the category of CSS and can only load CSS.

When link references CSS, the page loads at the same time; @ import needs to be loaded after the page is fully loaded, and the CSS referenced by @ import will not be loaded until the CSS file that references it is loaded.

Link is a xhtml tag and there is no compatibility problem. @ import is proposed in css2.1 and is not supported by lower versions of browsers.

Link supports using javascript control to change styles, while @ import does not

The weight of link style is higher than that of @ import.

Import requires tags when using html

5 No style content flicker (FOUC) Flash of Unstyle Content

@ import importing the CSS file will wait until the document is loaded before loading the CSS stylesheet. Therefore, there is no style for the content on the page for a period of time between the completion of the page DOM loading and the completion of the CSS import.

Workaround: load the CSS style file using the link tag. Because the link is loaded sequentially, the page will wait until the CSS is downloaded before downloading the HTML file, so that it is laid out first, and there will be no FOUC problems.

6 introduce your understanding of the browser kernel?

It is divided into two parts: the rendering engine (Layout Engine or Rendering Engine) and the JS engine.

Rendering engine: responsible for obtaining the content of the web page (HTML, XML, images, etc.), organizing messages (such as adding CSS, etc.), and calculating how the web page is displayed, which is then output to the monitor or printer. Different browsers have different grammatical interpretations of web pages, so the rendering effect is also different.

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

At first, there was no clear distinction between the rendering engine and the JS engine, but then the JS engine became more and more independent, and the kernel tended to refer only to the rendering engine.

What are the common browser kernels?

Trident (MSHTML): IE MaxThon TT The World 360 Sogou browser

Geckos:Netscape6 and above FireFox Mozilla Suite/SeaMonkey

Presto:Opera7 or above (Opera kernel formerly Presto, now Blink)

Webkit:Safari Chrome

What are the new features of 8 HTML5 and which elements have been removed? How to deal with the browser compatibility of new HTML5 tags? How to distinguish between HTML and HTML5

Newly added image, location, storage, multitasking and other functions.

New elements:

Canvas

Video and audio elements for media playback

Local offline storage. LocalStorage stores data for a long time, and the data is not lost after the browser is closed. The data of sessionStorage is automatically deleted after the browser is closed.

Better semantic content elements, such as article footer header nav section

Location API:Geolocation

Form controls, calendar date time email url search

New technology: web worker (web worker is a JavaScript that runs in the background, independent of other scripts, and does not affect the performance of the page. You can continue to do whatever you want to do: click, select, etc., while web worker is running in the background) web socket

Drag and drop API:drag, drop

Removed elements:

Pure expressive element: basefont big center font s strike tt u

Poor performance element: frame frameset noframes

Distinguish:

The way DOCTYPE declares itself is an important factor in distinguishing

Distinguish according to the newly added structure and function

9 briefly describe your understanding of HTML semantics?

When the style is removed or lost, it can make the page show a clear structure.

Help SEO and search engines to establish good communication, help crawlers to grab more information, crawlers rely on tags to determine the context and the weight of each keyword.

It is convenient for other devices to analyze.

Easy for team development and maintenance, semantically based on readability.

How to use the offline storage of 10 HTML5 files and how does it work?

Online, the browser finds that the HTML header has a manifest attribute, and it will request the manifest file. If it is visited for the first time, the browser will download the corresponding resources according to the contents of the manifest file and store them offline. If the resource has been accessed and the resource is stored offline, the browser uses the offline resource to load the page. Then the browser will compare the new manifest file with the old manifest file, if the file has not changed, it will not do anything, if the file has changed, then the resources in the file will be re-downloaded and stored offline. For example,

Add a manifest attribute to the header of the page

Write resources for offline storage in cache.manifest files

CACHE MANIFEST#v0.11CACHE:js/app.jscss/style.cssNETWORK:Resourse/logo.pngFALLBACK: / / offline.html

11 what is the difference between cookies,sessionStorage and localStorage?

What they have in common: they are all saved on the browser side and are of the same origin.

Difference:

Cookies is the data stored on the user's local terminal in order to identify the user's identity, and it is always carried in the same origin http request, that is, cookies is passed back and forth between the browser and the server, while sessionstorage and localstorage will not automatically send the data to the server, but only save it locally.

Storage size limits are different. The data saved by cookie is very small, no more than 4k, while the data saved by sessionstorage and localstorage is large, up to 5m.

The validity of the data is different. Cookie is valid until the set cookie expiration time, even if the window or browser is closed. Sessionstorage is valid only until the browser window closes. Localstorage is always valid, and windows and browsers are always saved for long-term data preservation.

The scope is different. Cookie is shared in all cognate windows; sessionstorage is not shared in different browsers, even on the same page; localstorage is shared in all cognate windows

What are the advantages and disadvantages of the 12 iframe framework?

Advantages:

Iframe can display embedded web pages intact.

If there are multiple pages referencing iframe, then you only need to modify the content of iframe, you can achieve the change of each page content called, convenient and fast.

If the page is in order to unify the style, the header and version are the same, it can be written as a page and nested with iframe, which can increase the reusability of the code.

If you encounter slow-loading third-party content such as icons and ads, these problems can be solved by iframe.

Disadvantages:

The crawler of the search engine cannot interpret this kind of page

All kinds of scroll bars appear in the frame structure.

When using a frame structure, be sure to set the correct navigation link.

The iframe page increases the http request from the server

What is the purpose of 13 label? How does it work?

The label tag is used to define the relationship between form controls, and when the user selects the tag, the browser automatically shifts its focus to the form control associated with the label. Two attributes in label are very useful, FOR and ACCESSKEY.

FOR attribute function: represents the HTML element to be bound by the label tag. When you click on this tag, the bound element will get focus. For example,

Name

ACCESSKEY attribute function: represents the hotkey that accesses the element bound by the label tag. When you press the hotkey, the bound element will get focus. For example,

Name

How does form of 14 HTML5 turn off autocomplete?

HTML input box can have automatic completion function, when you enter content into the input box, the browser will look for similar content from your previous history of the input box with the same name and list it at the bottom of the input box, so that you don't have to enter it all, just select the items in the list. But sometimes we want to turn off the autocomplete function of the input box, for example, when the user enters something, we want to use AJAX technology to search from the database and enumerate instead of searching in the user's history.

Methods:

Set it in autocomplete in the internet option menu of IE

Set the autocomplete of the form input box to on or off to turn on the autocomplete function of the input box.

15 how to realize the communication between multiple tabs in the browser?

WebSocket SharedWorker

You can also call local storage methods such as localstorge and cookies. When localstorge is added, modified, or deleted in another browsing context, it triggers an event, and we communicate with the page by listening for the event and controlling its value.

Note: Safari throws an exception to QuotaExceededError when setting the localstorge value in trace-free mode

16 how is webSocket compatible with low browsers?

Adobe Flash Socket ActiveX HTMLFile (IE) sends XHR based on multipart coding XHR based on long polling

Refer to the WebSocket.js file to be compatible with older browsers.

16 what can be used for page visibility (Page Visibility) API?

Check whether the page is currently visible through the visibility state, and when the page was opened.

Automatically pauses the playback of music or video when the page is switched to another background process.

17 how to achieve a circular clickable area on the page?

Map+area or svg

Border-radius

Pure js implementation, an algorithm whose point is not on a circle

18 to achieve the same effect in Quirks mode and CSS Compat modes of different browsers without using border to draw high 1px lines.

What is the CAPTCHA of the 19th web page, and what security problem is it to solve?

A program that distinguishes whether a user is a computer or a human

It can prevent malicious password cracking, ticket brushing and forum irrigation.

20 the difference between title and H2, b and strong, I and em?

The title attribute has no clear meaning, but only indicates the title; H2 represents a clear hierarchical title, which also has a great impact on the crawling of page information.

Strong marks the key content and the tone strengthens the meaning; b is a meaningless visual representation.

Em means emphasized text; I is italic, a meaningless visual representation

Visual style tags: b i u s

Semantic style tags: strong em ins del code

What are the similarities and differences between alt and title of element 21?

When alt and title are set at the same time, alt appears as an alternative text for the picture, and title is the explanatory text for the picture.

The above is all the contents of the article "what are the basic interview questions for HTML". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.