HTML elements
HTML Element
What is HTML element?
HTML elements refer to all code from the start tag to the end tag.
For example:
<p>Paragraph content</p>
<p> is the start tag, </p> is the end tag, "Paragraph "Content" is the element content
<a>Link content</a>
<a> is the start tag, </a> is the end tag, "Link content" is Element content
HTML element syntax
HTML element starts with a start tag
HTML element starts with an end tag Terminating
The content of the element is the content between the start tag and the end tag
Some HTML elements have empty content (empty content)
Empty elements are carried out in the start tag Closing (ends with the end of the opening tag)
Most HTML elements can have attributes
Note: You will learn more about attributes in the next chapter of this tutorial.
##Nested HTML elements
What is nesting? What are the nesting rules?
Nesting means that block-level elements (block) contain inline elements (inline), layer by layer, until completed. HTML documents are composed of nested HTML elements. HTML tags include block-level elements (block) and inline elements (inline) Block-level elements are generally used to build website architecture, layout, and carry content... It includes the following tagsThe code is as follows: Address, blockquote, center, dir, div, dl, dt, dd, fieldset, form, h1~h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ulInline elementsGenerally used in certain details or parts of website content to "emphasize, distinguish styles, superscripts, subscripts, anchor points", etc. The following tags are all embedded elements
The code is as follows:
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var
Nesting rules for HTML tags
Block elements can be included Inline elements or some block elements, but inline elements cannot contain block elements, it can only contain other inline elements
The code is as follows:
<div>< ;h1></h1><p></p></div> —— Right</p> <p> <a href=”#”><span>< /span></a> —— True</p> <p>
Block-level elements cannot be placed inside <p>: The code is as follows:
li can contain div tags - this item does not need to be listed separately, but many people on the Internet are confused about this, so I will briefly explain it here:
The li and div tags are both containers for loading content. They have equal status and there is no distinction between levels (for example: strict hierarchies such as h1 and h2^_^). You must know that the li tag is connected to its parent. Both ul and ol can be accommodated. Why do some people think that li cannot accommodate a div? Don't think that li is so stingy. Although li looks quite thin, in fact li has a big heart...
Block-level elements and block-level Element juxtaposition, inline elements and inline element juxtaposition
The code is as follows:
##HTML Document Example
<!DOCTYPE html> <html> <body> <p>这里是测试事例</p> </body> </html>The above example contains three HTML elements.
HTML Example Parsing
##<p> Element:
<p>Here is the test case </p>
The <p> element defines a paragraph in an HTML document.
This element has a start tag <p> and an end tag </p>. The element content is: Here is the test example
<body> Element:
<body>
<p>Here is a test example</p> </body>
The <body> element defines the main body.
element content is another HTML element (the p element).
<html> Element:
<html>
<body>
<p>This is a test case</p>
</body>
</html>
The <html> element defines the entire HTML document.
The content of the element is another HTML element (body element).
Don’t forget the closing tagEven if you forget to use the closing tag, most browsers will display the HTML correctly:
<p>This is a paragraph
<p>This is a paragraph
The above example can also be displayed normally in the browser because the closing tag is optional.
But don’t rely on this approach. Forgetting to use a closing tag can produce unpredictable results or errors.
HTML Empty ElementAn HTML element with no content is called an empty element. Empty elements are closed in the opening tag.
<br> is an empty element without a closing tag (<br> tag definition wraps).
In XHTML, XML, and future versions of HTML, all elements must be closed.
Adding a slash in the opening tag, such as <br />, is the correct way to close an empty element, and is accepted by HTML, XHTML, and XML.
Even though <br> is valid in all browsers, using <br /> is actually a longer-term guarantee.
HTML Tip: Use lowercase tags HTML tags are not case-sensitive: <P> is equivalent to <p>. Many websites use uppercase HTML tags. W3CSchool uses lowercase tags because the World Wide Web Consortium (W3C) recommended lowercase in HTML 4 and will mandate lowercase in a future version of (X)HTML.
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
