02(HTML Elements)

1. Inline elements

• In HTML4, elements were divided into two main categories: inline (inline elements) and block-level elements. An inline element occupies only the space contained in the border of its corresponding label, with no line breaks. Common inline elements area b span img strong sub sup button input label select textarea

2. Block level elements

• Block-level elements occupy the entire width of their parent element (container) and have a newline effect. Common block-level elements arediv ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p

3. The difference between inline elements and block-level elements

• Formatting, by default, inline elements do not start with a new line, while block-level elements start with a new line.
• Content, by default, inline elements can only contain text and other inline elements. Block-level elements can contain inline elements and other block-level elements.
• The difference between inline elements and block-level elements is mainly due to W3C box model attributes: Width has no effect on inline elements, height has no effect (line-height can be set), margin and padding have no effect on other elements, left and right have effect.

4. Classification of HTML5 elements

In HTML5, elements are mainly divided into four categories: structural elements, block-level elements, in-line semantic elements, and interactive elements

1. Structural elements: Are responsible for defining the structure of the Web context

• Section: In Web page applications, this element can also be used for section descriptions of sections.
• Header: The header on the topic of a page. The header element is usually in a pair of body elements.
• Footer: The bottom of a page, usually marked with information about a web site.
• Nav: An element used specifically for menu navigation, link navigation, short for Navigator.
• Article: Used to show the main content of a piece of text, usually in a concentrated text display area.

2. Block-level elements: Mainly completes the division of web page areas to ensure effective segmentation of content

• Aside: For notes, tips, sidebars, abstracts, inserted quotes, etc.
• Figure: An element that combines and displays multiple elements, usually in conjunction with FICaption.
• Code: indicates a code.
• Dialog: Used to express a conversation between people. This element contains the combination of dt for the speaker and DD for what is being said.

3. Inline semantic elements: mainly complete the reference and description of the specific content of the Web page, and are the basis of rich content presentation.

• Meter: Indicates values within a specific range, which can be used for wages, quantities, percentages, etc.
• Time: indicates the time value.
• Progress: indicates the progress bar. The Max, min, step and other attributes can be controlled to complete the progress representation and monitoring.
• Video: A video element that supports direct playback of video files and supports buffer preloading and multiple video media formats.
• Audio: Audio element, used to support and implement direct playback of audio files, supporting buffer preloading and a variety of audio media formats.

4. Interactive elements: Functional expression of content that has some correlation between content and data and is the basis of events.

• Details: Used to indicate a specific piece of content, but the content may not be displayed by default until you interact with Legend by some means (e.g., clicking).
• Datagrid: Used to control client data and display and can be updated by dynamic scripts.
• Menu: Mainly used for interactive menus (once deprecated elements that have been revived).
• Command: Used to process command buttons.

5. Empty element (single tag)

• HTML tags that have no content inside the tag are called empty elements. The empty element is closed in the start tag.
• Common empty elements are :br HR IMG Input link meta

6. The link tag

• The link tag defines the relationship between a document and external resources.
• The link element space-time element, which contains only attributes. This element can only exist in the head section, but it can occur any number of times.
• The REL attribute in the link tag defines the relationship between the current document and the linked document. The common term stylesheet refers to defining an externally loaded stylesheet (CSS).

7. Use the difference between link and @import when importing page styles

① Affiliation: @import is the syntax rule provided by CSS, only the role of the import style sheet: link is the tag provided by HTML, not only can load CSS files, but also can define RSS, REL connection properties, the introduction of site ICONS, etc.

② Loading sequence: When loading the page, the CSS introduced by the link tag is loaded at the same time; The CSS introduced by @import will be loaded after the page is loaded.

③ Compatibility: @import is a CSS2.1 syntax, only IE5+ can recognize; The link tag, as an HTML element, has no compatibility issues.

④ DOM controllability: you can use JS to manipulate DOM and insert link tags to change styles. Because DOM methods are based on documents, you can’t use @import to insert styles.

7. Browser knowledge

• Main functions: To present the web resources selected by the user, the user needs to request the resources from the server and display them in the browser window. The format of the resources is USUALLY HTML, but also includes PDF, image and other formats. The user uses THE URL(Uniform resource Identifier) to specify the location of the requested resources.
• The HTML and CSS specifications specify how browsers interpret HTML documents, and these specifications are maintained by the W3C, the organization responsible for developing Web standards.
• The browser is divided into two parts: shell(the shell of the browser, such as menu and toolbar, which provides interface operations and parameter Settings for users) and kernel (the core of the browser, which displays content based on markup language programs or modules).
• Kernel classification: divided into rendering engine and JS engine. The rendering engine is responsible for rendering the content requested in the browser window. By default, the rendering engine can display HTML, XML documents, and images, as well as other types of data (PDF) with plug-ins (browser extensions). The JavaScript engine is used to parse and execute JavaScript to achieve dynamic web pages. At first there was no clear distinction between rendering engines and JS engines, but as JS engines became more and more independent, the kernel tended to refer only to rendering engines.

8. Comparison of common browser kernels

• Trident: The Internet Explorer kernel is out of sync with the W3C standard, with a number of bugs and security issues unresolved.
• Gecko: A powerful and rich kernel for Firefox and Flock that supports many complex web effects and browser extensions, but uses a lot of resources (eg: memory).
• Presto: Opera used a kernel that was recognized as the fastest kernel for web browsing. It handled scripting languages such as JS three times faster than other kernels, but lost some web compatibility.
• Webkit: A kernel used by Safari that has the advantage of fast web browsing (not as fast as Presto but better than Gecko and Trident), but has the disadvantage of low fault tolerance for web code, that is, low compatibility with web code, which will render some web pages that are not written to standard correctly. Webkit is the predecessor of the KED team’s KHTML engine.
• Blink: The browser kernel, a spin-off of Webkit, was developed by Google and Opera Software.

9. Kernel used by common browsers

• Parse the received document and build a DOM tree based on the document definition. The DOM tree is composed of DOM elements and attribute nodes.
• The CSS is parsed to generate the CSSOM rule tree.
• The render tree is constructed based on DOM tree and CSSOM rule tree. The node of the render tree is called a render object, which is a rectangle containing properties such as color and size. The render object corresponds to the DOM element, but this correspondence is not one-to-one. Invisible DOM elements are not inserted into the render tree. There are also DOM elements that correspond to several visible objects, which are typically elements with complex structures that cannot be described by a rectangle.
• When rendered objects are created and added to the tree, they have no location or size, so when the browser generates the render tree, the layout is based on the render tree (backflow). At this stage, the browser figures out the exact location and size of each node on the page. This behavior is often called “automatic reordering.”
• At the end of the layout phase, the paint phase begins, traversing the render tree and calling the paint method of the render objects to display their contents on the screen. Drawing uses UI components. This process is done step by step, with the render engine rendering the contents on the screen as early as possible for better user experience. You don’t build and lay out the Render tree until all the HTML has been parsed. It parses part of the content and displays part of the content, while probably downloading the rest of the content over the network.