Detailed description of HTML programming markup and document structure _ HTML/Xhtml _ webpage Creation

This article mainly introduces the HTML programming markup and document structure, which is the basic knowledge in the HTML getting started learning, for more information, see Mark the content in HTML in order to grant the webpage semantics (semantic ). In other words, you need to give your webpage content the meaning that some user agents can understand.

HTML specifies a group of tags used to mark the content differently. Each tag is a description of its content. The most common HTML descriptions are titles, paragraphs, links, and images. Currently, there are a total of 114 HTML tags, but according to the 80/20 principle, about 25 of them can meet 80% of the tag requirements.

The latest HTML version of HTML5 provides a new set of structured tags for grouping tags of relevant content, so as to better standardize the overall structure of the web page. These new tags include

, (That is, navigation, navigation ),, , And .

1. Tag Closure

For each element that contains content (such as the title, paragraph, and image), there are two different ways to tag the content based on whether the content is text, one is to use closed tags, and the other is to use non-closed tags.

1.1 Use closed labels for text

Example: Hello, CSS!
1.2 use self-closed tags for reference content

Example:

Tip:
For self-closing tags, The XHTML requirements must be written as follows:

Copy XML/HTML Code to clipboard

In HTML5, You can omit the last slash indicating the closure and write it:

Copy XML/HTML Code to clipboard

2. Attributes

Tip: the screen reader used by the visually impaired user reads the content of the alt attribute out loud, so the tag must be
The alt attribute can be added to understand the content once you hear it (or read it.

3. Title and paragraph
4. composite elements

HTML not only specifies the basic content tags such as titles, images, and paragraphs, but also specifies,
Tags of complex user interface components such as tables and forms are called composite elements, that is, they are composed of multiple
Tags.

5. nested labels

Simply put, a tag is nested in another tag.
6. HTML5 Template

Copy XML/HTML Code to clipboard

5. An HTML Template

7. Block-level elements and intra-row Elements

Document Stream effect: HTML elements are sequentially routed from the top of the page to the bottom of the page according to the order in which they appear in the tag.

The display attribute of almost all HTML elements is either block or inline. The most obvious exception is the table element, which has its own display value.

Block-level elements (such as titles and paragraphs) are stacked together and arranged down the page. Each element occupies one row. The elements in the row (such as links and images) are tied to each other. They are folded to the next row only when the space is insufficient.

No matter which HTML element you want to know, the first question should be: is it a block-level element or an in-Row Element? After learning this, You can pre-think about how to locate an element in the initial state when writing the tag, so that you can further think about how to use CSS to reposition it in the future.

There are two things to know:

The block-level element box is extended to the same width as the parent element.

The element box in the row will shrink and wrap it as tightly as possible.

7. nested Elements

HTML tags are nested in tags, while those nested on the screen are boxes.
8. Document Object Model

The Document Object Model (DOM) is a family tree that observes the elements on the page and the attributes of each element from the browser perspective. The relationship between elements can be determined through DOM. Reference DOM in CSS
You can select the corresponding HTML element and modify its style attributes.

The process of css dom operations is to select one or more elements, and then modify the attributes of these elements. After an element is modified through CSS, such as modifying the width or inserting a pseudo element in the tag, these changes will happen immediately in the DOM and appear on the page.

In short, it is to use HTML tags to construct the DOM, and then use CSS to modify the DOM when the page is loaded for the first time and the user interacts with the page.