Summary of basic HTML interview questions

This article mainly shares HTML basic interview questions and answers with you, hoping to help everyone.

1 What does DOCTYPE do? How to distinguish between standard mode and mixed mode? What do they mean?

Tells the browser which version of the HTML specification to use to render the document. An absent or incorrectly formed DOCTYPE will cause the HTML document to be rendered in promiscuous mode.
Standards mode runs at the highest standard supported by the browser; in Quirks mode, the page is displayed in a looser backward-compatible way.

2 Why do you only need to write in HTML5?

HTML5 is not based on SGML (Standard Generalized Markup Language), so there is no need to reference DTD (DTD Document Type Definition), but DOCTYPE is needed to standardize browser behavior.

HTML4.01 is based on SGML, so DTD needs to be quoted. In order to tell the browser the document type used by the document, as follows:

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

Inline elements: a span img input select
Block-level elements: p ul ol li dl dt dd h1 p
Empty elements ：<br> <hr> <link> <meta>

4 What is the difference between using link and @import when importing styles on the page?

The same places are all external reference CSS methods. The difference:

1. link is an xhtml tag. In addition to loading css, you can also define RSS and other others. Transaction; @import belongs to the CSS category and can only load CSS

2. link When referencing CSS, it is loaded at the same time when the page is loaded; @import needs to be loaded after the page is fully loaded, and @import is The referenced CSS will wait until the CSS file that references it is loaded before loading

3. link is an xhtml tag, no compatibility issues; @import was proposed in css2.1, a lower version The browser does not support

4. link. It supports using javascript control to change the style, and @import does not support the

5. link style. The weight of the style is higher than The weight of @import

6. import is required when using it in html<style type="text/css">tag

5 Flash of Unstyle Content (FOUC)

@import will wait until the document is loaded before loading the CSS style sheet. Therefore, there will be a period of time between the completion of the page DOM loading and the completion of the CSS import, and the content on the page will be unstyled.

Solution: Use the link tag to load the CSS style file. Because the links are loaded sequentially, the page will wait until the CSS is downloaded before downloading the HTML file. This way, the layout is done first and there will be no FOUC problem.

6 Please introduce your understanding of the browser core?

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

Rendering engine: Responsible for obtaining the content of the web page (HTML, XML, images, etc.), organizing the information (such as adding CSS, etc.), and calculating the display method of the web page, and then outputting it to the monitor or printer. Different browser kernels will have different grammatical interpretations of web pages, so the rendering effects will also be different.
JS engine: Parse and execute javascript to achieve dynamic effects on web pages.

At first, the rendering engine and the JS engine were not clearly distinguished. Later, the JS engine became more and more independent, and the kernel tended to refer only to the rendering engine.

7 What are the common browser kernels?

1. Trident(MSHTML): IE MaxThon TT The World 360 Sogou Browser

2. Geckos: Netscape6 and above FireFox Mozilla Suite /SeaMonkey

3. Presto: Opera7 and above (Opera kernel was originally: Presto, now: Blink)

4. Webkit: Safari Chrome

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

Newly added functions such as images, location, storage, and multitasking.
New elements:

1. canvas

2. Video and audio elements for media playback

3. Local offline storage. localStorage stores data for a long time, and the data is not lost after the browser is closed; the sessionStorage data is automatically deleted after the browser is closed

4. Content elements with better semantics, such as article footer header nav section

5. Location API: Geolocation

6. Form control, calendar date time email url search

7. New Technology: web worker (web worker is 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: click, select content, etc., while the web worker is in the background Run) web socket

8. Drag and drop API: drag, drop

Removed elements:

1. Purely expressive elements: basefont big center font s strike tt u

2. Poor performance elements: frame frameset noframes

Distinguishing:

1. The way DOCTYPE is declared is important to distinguish Factors

2. Divided according to newly added structures and functions

9 Briefly describe your understanding of HTML semantics?

1. #Removing or losing styles can give the page a clear structure.

2. It is helpful for SEO and search engines to establish good communication, and helps crawlers to crawl more information. Crawlers rely on tags to determine the context and the weight of each keyword.

3. Convenient for other devices to parse.

4. Easy for team development and maintenance, semantics based on readability.

#10 How to use offline storage of HTML5 files and what is the working principle?

When online, the browser finds that the HTML header has the manifest attribute, and it will request the manifest file. If it is the first visit, the browser will download the corresponding resources based on the content of the manifest file. , and store it offline. If it has been accessed and the resource has been stored offline, the browser will use the offline resource to load the page. The browser will then compare the new manifest file with the old manifest file. If the file has not changed, no operation will be performed. If the file has changed, the resources in the file will be re-downloaded and stored offline. For example,

Add the manifest attribute to the page header

<html manifest=&#39;cache.manifest&#39;>

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

11 cookies, sessionStorage and localStorage the difference?

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

Difference:

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

2. The storage size limit is different. The data saved by cookie is very small and cannot exceed 4k, while the data saved by sessionstorage and localstorage is large and can reach 5M.

3. The validity period of data is different. The cookie remains valid until the set cookie expiration time, even if the window or browser is closed. Sessionstorage is only valid until the browser window is closed. Localstorage is always valid, even when windows and browsers are closed, for long-term data storage.

4. Different scopes. Cookies are shared among all homologous windows; sessionstorage is not shared between different browsers, even on the same page; localstorage is shared among all homologous windows

12 iframe What are the advantages and disadvantages?

Advantages:

1. iframe can display the embedded web page intact.

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

3. If the web page has the same header and version in order to unify the style, it can be written as one page and nested with iframe, which can increase the reusability of the code.

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

Disadvantages:

1. Search engine crawlers cannot interpret this kind of page

2. Frame structure Various scroll bars appear in

3. When using the frame structure, ensure that the correct navigation links are set.

4. iframe page will increase the http request of the server

13 What is the function of label? How is it used?

The label label is used to define the relationship between form controls. When the user selects the label, the browser will automatically turn the focus to the form control related to the label. There are two attributes in label that are very useful, FOR and ACCESSKEY.
FOR attribute function: Indicates the HTML element to be bound to the label label. When you click this label, the bound element will gain focus. For example,

<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">

ACCESSKEY attribute function: indicates the hotkey to access the element bound to the label tag. When you press the hotkey, the bound element will gain focus. For example,

<Label FOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBox" type="text">

14 How to turn off the auto-complete function in HTML5 form?

The HTML input box can have an auto-complete function. When you enter content into the input box, the browser will find similar content from the history of your previous input boxes with the same name and place them next to each other. Below the input box, you don't have to enter everything in, just select the items in the list. But sometimes we want to turn off the auto-complete function of the input box. For example, when the user enters content, we want to use AJAX technology to search and list from the database instead of searching in the user's history.

Method:

1. Set the autocomplete in the Internet options menu of IE

2. Set the autocomplete of the form input box Set on or off to turn on the auto-complete function of the input box

15 如何实现浏览器内多个标签页之间的通信?

1. WebSocket SharedWorker

2. 也可以调用 localstorge、cookies 等本地存储方式。 localstorge 在另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。

注意：Safari 在无痕模式下设置 localstorge 值时会抛出QuotaExceededError 的异常

16 webSocket如何兼容低浏览器？

1. Adobe Flash Socket  ActiveX HTMLFile (IE)  基于 multipart 编码发送 XHR 基于长轮询的 XHR

2. 引用WebSocket.js这个文件来兼容低版本浏览器。

16 页面可见性（Page Visibility）API 可以有哪些用途？

1. 通过visibility state的值得检测页面当前是否可见，以及打开网页的时间。

2. 在页面被切换到其他后台进程时，自动暂停音乐或视频的播放。

17 如何在页面上实现一个圆形的可点击区域？

1. map+area或者svg

2. border-radius

3. 纯js实现，一个点不在圆上的算法

18  实现不使用 border 画出1px高的线，在不同浏览器的Quirks mode和CSS Compat模式下都能保持同一效果

<p style="height:1px;overflow:hidden;background:red"></p>

19 网页验证码是干嘛的，是为了解决什么安全问题？

1. 区分用户是计算机还是人的程序;

2. 可以防止恶意破解密码、刷票、论坛灌水；

20 title与h1的区别、b与strong的区别、i与em的区别？

title属性没有明确意义，只表示标题；h1表示层次明确的标题，对页面信息的抓取也有很大的影响
strong标明重点内容，语气加强含义；b是无意义的视觉表示
em表示强调文本；i是斜体，是无意义的视觉表示
视觉样式标签：b i u s
语义样式标签：strong em ins del code

21 元素的alt和title有什么异同？

在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字。

相关推荐：

前端面试题小结

CSS基础面试题小结、

JavaScript面试基础知识题分享

The above is the detailed content of Summary of basic HTML interview questions. For more information, please follow other related articles on the PHP Chinese website!