May 29, 2021 Article blog
2. 2. Why does HTML5 only need to be written?
3. 3, what are the elements in the line? What are the block-level elements?
4. 4. What's the difference between using link and @import when importing styles?
5. 5, No Style Content Flash (FOUC) Flash of Unstyle Content
6. 6. Tell me about your understanding of the browser kernel?
7. 7. What are the common browser cores?
9. 9. A brief description of your understanding of HTML semantics?
10.. 10, HTML5 file offline storage how to use, how does it work?
11.. 11, cookies, the difference between sessionStorage and localStorage?
12.. 12, iframe framework has those advantages and disadvantages?
13.. 13, what is the role of label? How do you use it?
14.. 14. How does HTML5's form turn off autocomplete?
15.. 15. How to achieve communication between multiple tabs within the browser?
16.. 16, webSocket how compatible with low browsers?
17.. 17. What can the Page Visibility API do?
18.. 18. How to achieve a circular clickable area on the page?
19.. 19, what is the web verification code, in order to solve what security problems?
21.. 21. What are the similarities and differences between the alt and tip of the element?
HTML has been updated to HTML5, so you should also know that this article provides you with a reference.
The role of doctype is to tell the browser which version of the HTML specification is used to render the document. The incorrect or non-existence of DOCTYPE causes HTML documents to be rendered in a promiscuous mode.
Standard mode operates to the highest standards supported by the browser;
HTML5 is not based on SGML (Standard Generalized Markup Language standard common markup language), so there is no need to reference DTD (DTD document type definition), but DOCTYPE is required to regulate browser behavior.
HTML4.01 is based on SGML, so you need to reference DTD. To tell the browser document the type of document it is using, as follows:
In-line elements: input, select, a, span, img
Block elements: dl, dt, dd, h1, pdiv, ul, ol, li
The same place is the external reference CSS way, the difference is:
link is an xhtml label that defines other transactions, such as RSS, in addition to loading css, @import belongs to the CSS category and can only load CSS
When link references CSS, the page loads at the same time as it loads, @import needs to be loaded after the page is fully loaded, and @import the referenced CSS waits until the CSS file that references it is loaded
link is an xhtml tag with no compatibility issues, @import was proposed in css 2.1 and is not supported by a lower version of the browser
link supports the use of javascript control to change styles, while @import does not
The style of the link method has a higher weight than the weight of the @import
import requires a label when using html
@import Importing a CSS file waits until the document is loaded before loading the CSS style sheet. Therefore, there is a time between the completion of the page DOM load and the completion of the CSS import that the content on the page is unstyped.
Workaround: Load the CSS style file with the link label. Because link is loaded sequentially, the page waits until the CSS download is complete before downloading the HTML file, so that the layout is good and there is no FOUC problem.
It is divided into two parts: the Layout Engine or Rendering Engine and the JS engine.
Render engine: Responsible for getting the content of a web page (HTML, XML, images, etc.), organizing messages (e.g. adding CSS, etc.), and calculating how the page is displayed, which is then output to a monitor or printer. The browser's kernel will have different syntax interpretations of the page, so the rendering effect will not be the same.
JS Engine: Parse and execute javascript to achieve dynamic web page effects.
At first the rendering engine and the JS engine were not very clear, and then the JS engine became more independent, and the kernel tended to refer only to the render engine.
TRIDENT (MSHTML): IE MaxThon TT The World 360 Sogou Browser
Geckos: Netscape6 and above version of FireFox Mozilla Suite/SeaMonkey
Presto: Opera7 and above (Opera core originally: Presto, now: Blink)
Webkit :Safari Chrome
New additions to image, location, storage, multitasking, and more.
New element: Canvas for video and audio elements for media playback
Local offline storage. l ocalStorage long-term storage of data, browser closed data is not lost; SessionStorage's data is automatically deleted when the browser is closed
Better ideophistic content elements, such as article footer header nav section
Location API: Geolocation
Form control, calendar date time email url search
New technology: Web worker is JavaScript running in the background, independent of other scripts, that does not affect the performance of the page. You can continue to do whatever you want: tap, pick, and so on, while the web worker is running in the background) web socket
Drag and drop API: drag, drop
Removed elements:
Pure performance element: basefont big center font s strike tt u
Poor performance element: frame frameset noframes
distinguish:
The way DOCTYPE declares is a regional factor
It is distinguished according to the newly added structure and function
Removing or losing styles gives the page a clear structure.
Good communication between SEO and search engines helps reptiles grab more information, relying on tags to determine context and weight individual keywords.
Easy for other devices to parse.
Easy for team development and maintenance, semantic based on readability.
Online, the browser discovers that the HTML header has the manifest property, it requests the manifest manifest file, and if it is accessing it for the first time, the browser downloads the resource based on the contents of the manifest file and stores it offline. I f the resource has been accessed and the resource has been stored offline, the browser loads the page with the offline resource. The browser then compares the new manifest file with the old manifest file, does nothing if the file does not change, and if the file changes, the resources in the file are re-downloaded and stored offline.
What we have in common: they are all saved on the browser side and are homologous.
distinguish:
Cookies are data stored on the user's local terminal to identify the user and are always carried in the same source http request, i.e. cookies are passed back and forth between the browser and the server, while sessionstorage and localstorage do not automatically send the data to the server and save it locally only.
Storage size limits vary. Cookies hold no more than 4k of data, while sessionstorage and localstorage hold large amounts of data up to 5M.
The validity period of the data is different. C ookies are valid until the set cookie expiration time, even if the window or browser is closed. S essionstorage is only valid until the browser window is closed. Localstorage is always valid, and windows and browser closures are kept for long-term data retention.
The scope is different. Cookies are shared in all same-origin windows, sessionstorage is not shared in different browsers, even on the same page, and localstorage is shared in all same-origin windows
Pros:
Iframe is able to display embedded web pages as they are.
If you have multiple pages that reference iframe, you only need to modify the content of iframe to make changes to the content of each page you call, which is quick and easy.
If the head and version are the same for a uniform style, the web page can be written as a page, nested with iframe, to increase the reusability of the code.
If you encounter slow-loading third-party content such as icons and ads, these issues can be resolved by iframe.
Cons:
Search engine crawlers can't interpret such pages
Various scroll bars appear in the frame structure
When using the frame structure, make sure to set up the correct navigation links.
The iframe page increases the server's http request
Label labels are used to define the relationship between form controls, and when the user selects the label, the browser automatically shifts focus to the form controls associated with the label. T wo properties in label are very useful, FOR and ACCESSKEY.
FOR property feature: Represents the HTML element that the label is bound to, and when you click on the label, the bound element gets the focus.
ACCESSKEY Property Feature: Represents the hotkey of the element bound to the label label, and when you press the hotkey, the bound element gets the focus.
HTML input boxes can have the ability to do this automatically, and when you enter content into the input box, the browser finds similar content from the history of your previous input box of the same name and lists it under the input box, so you don't have to enter it all, just select the items in the list. But sometimes we want to turn off autocomplete of input boxes, such as when a user enters content, we want to use AJAX technology to search from the database and list instead of searching in the user's history.
method:
Set it up automatically in IE's Internet options menu
Set the autocomplete of the form input box to on or off to turn on the autocomplete function of the input box
WebSocket SharedWorker
You can also call localstorge, cookies, and other local storage methods. When a localstorge is added, modified, or deleted in another browsing context, it triggers an event that we communicate page information by listening to the event and controlling its value.
Note: Safari throws an exception to QuotaExceedError when setting the localstorge value in private mode
Adobe Flash Socket ActiveX HTMLFile (IE) sends XHR based on multipart encoding XHR based on long polling
Reference WebSocket .js this file to be compatible with lower-version browsers.
Visibility state is worth detecting whether the page is currently visible and when it was opened.
Music or videos are automatically paused when the page is switched to another background process.
map-and-area or svg
border-radius
Pure js implementation, an algorithm where a point is not on the circle
A program that distinguishes whether a user is a computer or a person;
Can prevent malicious password cracking, ticketing, forum irrigation;
The title
property has no explicit meaning, only a title,
h1
represents a well-hierarchical title, which also has a significant impact on the crawl of page information
Strong
indicates the key content, the tone reinforces the meaning;
b
is the meaningless visual representation
em
emphasizes text;
i
is italics, meaningless visual representations
Visual style label: b i u s
Semantic style label: strong em ins del code
When alt and title are set at the same time,
alt
appears as an alternative to the text of the picture,
title
is the explanatory text of the picture.
These are the interview questions and answers about HTML5 compiled by the small compilation.
Reprinted from: https://www.cnblogs.com/CaseyWei/