HTML tags with the contents of the page in order to impart semantic object ( Semantic ). In other words, it is necessary to give your web page content a meaning that some user agent can understand.
HTML specifies a set of tags that are used to mark the content differently. Each label is a description of what it contains. The most commonly used HTML descriptions are titles, paragraphs, links, and pictures. At present, there are 114 tags in HTML, but according to the 80/20 principle, using about 25 tags can satisfy 80% of the tags.
The latest version of HTML, HTML5, provides a new set of structured tags for grouping related content tags to better standardize the overall structure of the web page. These include a new label
<header>,<nav>(ie navigation,<article>navigation),<section>, ,<aside>and<footer>.
1. Closure of the label
For each element that contains content (such as titles, paragraphs, and pictures), there are two different ways to label them based on whether the content they contain is text , one is to use closed tags, and the other is to use non- Close the label.
1.1 Closed label for text
Examples:<h1>Hello, CSS!</h1>
1.2 Quoted content with self-closing label
Examples:<img src="images/dog.jpg" alt="This is my dog." >
Tip:
For self-closing tags, XHTML requires that it must be written like this:<img src="images/dog.jpg" alt="This is my dog." />
In HTML5, the last slash indicating closing can be omitted and written as:<img src="images/dog.jpg" alt="This is my dog." >
2. Properties
Tip: The screen reader used by visually impaired users will read the content of the alt attribute aloud, so be sure to add content that can be understood by a listen (or a look) to the alt attribute of the
label
.
3. Headings and paragraphs
4. Compound elements
HTML provides not only the title, picture and paragraph marks and other basic content, also provides for creating lists,
labeling complex user interface components such as tables and forms, these so-called composite elements that they are made of multi-
label together constitute of.
5. Nested tags
Simply put, it is to nest one label inside another label.
6. HTML5 template
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>An HTML Template</title>
</head>
<body>
<!-- 这里是网页内容 -->
</body>
</html>
7. Block-level elements and inline elements
Document flow effect: HTML elements will flow from the top of the page to the bottom in the order in which they appear in the mark.
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 custom display value.
Block-level elements (such as titles and paragraphs) will be stacked on top of each other and arranged down the page, with each element occupying a line. The elements in the row (such as links and pictures) will be juxtaposed with each other, and only when the space is not enough to juxtapose, it will be folded to the next line.
No matter which HTML element you want to understand, the first question to ask should be: is it a block-level element or an inline element? Knowing this, when writing tags, you can anticipate how an element is positioned in the initial state, so that you can further think about how to reposition it with CSS in the future.
There are two things to know:
The block-level element box will expand to the same width as the parent element.
Inline box element will shrink wrap the contents, and will pack tightly as possible.
7. Nested elements
HTML tags are nested in the tags, and boxes are nested on the screen.
8. Document Object Model
The Document Object Model ( DOM for short ) is to observe the elements on the page and the attributes of each element from the browser's perspective, thereby deriving a family tree of these elements. Through the DOM, you can determine the relationship between the elements. By referring
to a specific position in the DOM in CSS , you can select the corresponding HTML element and modify its style attributes.
The process of CSS to manipulate the DOM is to select one or a group of elements, and then modify the attributes of these elements. After modifying the element through CSS, such as changing the width or inserting a pseudo-element in the markup, these changes will immediately occur in the DOM and be reflected on the page.
In short, it is to build the DOM through HTML tags, and then use CSS to modify the DOM when the page is first loaded and the user interacts with the page.
References