Although I have started to learn JS, I suddenly thought about the tags, elements, attributes and styles in html-css that once confused me. I felt it was time to summarize their concepts and relationships.

1. Tags and elements:

For example,

This is a tag;

Here is the content

This is an element. That is to say, the element consists of a starting tag and an ending tag, which are used to contain certain content;

Note: Single tags are an exception. For example,
itself is both a start tag and an end tag, but it does not contain any content, so it is just a tag.

HTML web pages are actually text files composed of many various html elements, and any web browser can directly run html files. So it can be said that the html element is the basic object that constitutes the html file, and the html element can be said to be a general term. Tags are used to mark HTML elements.

2. Attributes and styles:

a. Attributes:

Attributes provide various additional information for html elements, which always end with "attribute name = "Attribute value" appears as a name-value pair, and attributes are always defined in the opening tag of an HTML element.

For example:

?

The class here is the attribute. An element can have multiple attributes, separated by spaces. For example,

b. Style:

Style is a new preferred way to change the style of HTML elements. Through HTML styles, styles can be added directly to HTML elements by using the style attribute, or they can be added in the style tag and placed in the head. Or define it indirectly in an independent style sheet (CSS file). The style has a value, usually with a unit, and appears in the format of "Style: Style Value". For example:

.box{background-color:#000;width:100px;text-align:center;}

The background-color, width, etc. here are styles. There can also be multiple styles, and each style is separated by ;. For example, a selector {style 1; style 2;...}