An HTML file (HTML document) is composed of a bunch of tags (tag) structure, the so-called label is one with angle brackets <tagname>...</tagname>surround the HTML elements (HTML element), surrounded by different HTML tags represent different semantic (semantic ) The content block, and the browser (web browser) knows how to interpret HTML tags to present the final web page screen.
HTML documents are essentially text-only files, and an HTML document will look like this:
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is the first level heading</h1>
<p>This is a paragraph</p>
</body>
</html>
From the above HTML file, we can find that the content surrounded by each HTML tag can contain other HTML tags. Therefore, the structure of the HTML file belongs to a hierarchical tree-like (nested) structure:
+-------+
| html |
+---+---+
|
+--------+------+
| |
+--+---+ +---+--+
| head | | body |
+--+---+ +---+--+
| |
+---+---+ +----+----+
| title | | |
+-------+ +---+--+ +--+--+
| h1 | | p |
+---+--+ +--+--+
| |
text text
Among them, DOCTYPE , <html> , <head> , and <body> are tags that are used in every HTML document.
HTML element (Element)
We use different HTML tags to describe the content and semantics of different blocks in a webpage, such as describing a paragraph of text, a title, a picture, a video, or a hyperlink.
For example, the following text:
My cat is very cute.
If we want it to be a paragraph by itself, then we can add paragraph tags before and after <p>it, and it will become an HTML paragraph element:
<p>My cat is very cute.</p>
Let us continue to explain clearly what the terms "label", "content" and "element" actually refer to?
Tag:
The complete label contains:
- Start tag (Tag Opening) : that is, one pair of angle brackets
< >which then into the element name, as in the example above, p represents the name of paragraph elements<p>, representative of start tag HTML element starts here. - End tag (the closing Tag) : the start tag and writing the same, just in front of the name of the element more than a slash
/, the trailing end of the tag represents HTML element, as in the example above,</p>the end of the paragraph element represented.
Content:
Tag is enclosed by the intermediate element of this to the above example, the content is My cat is very cute.that a text.
Element:
The block composed of start tag + content + end tag is called an HTML element, and <p>My cat is very cute.</p>this entire string represents an HTML paragraph element.
Nesting Element
As mentioned earlier, the HTML file structure is a nested structure, and other HTML elements can be placed in HTML elements, which we call nesting elements.
For example, the following sentence:
<p>My cat is very cute.</p>
If we want to "emphasize" very cute, we can add the words "very cute" to the strong tag (which will be displayed in bold in the browser):
<p>My cat is <strong>very cute.</strong></p>
The results presented in the browser are as follows:
My cat is very cute.
Pay special attention to the fact that the nested label is a layer-by-layer coating, and the start and end labels of different layers cannot be misplaced with each other. For example, the following is wrong:
<p>My cat is <strong>very cute.</p></strong>
Because the strong tag is used in the content of the p element, the entire strong element including its start and end tags must be "wrapped" in the p tag to form a correct nesting relationship.
Empty Element / Void Element
Some HTML elements are not allowed to have content , we call them empty elements.
In addition, an empty element is an element without an end tag , such as an image element <img>. For example, we can use the img tag to display an image:
<img src="/images/myphoto.png">
We use the src attribute of the img tag to specify the location of the image file, but the img element itself does not have an end tag or content inside, because the image element directly embeds the image file on the HTML web page.
HTML tag attributes (Attribute)
There are so-called attributes in HTML tags. Attributes are used to provide additional information about the tag. The attributes appear in the opening tag . The syntax is as follows:
<tag attribute1="value2" attribute2="value2">
An attribute is composed of an attribute name, an equal sign, and an attribute value enclosed in double quotation marks, and different attributes are separated by spaces.
Like the example mentioned earlier <img src="/images/myphoto.png">, src is the attribute of img.
Actually, you can use double quotes (double quotes "") or single quotes'' to enclose the attribute value. Single and double quotes make no difference to the HTML attribute value. This feature can also be used if the attribute value in quotation marks, such as <option value=""abc">written will cause reading errors browser, as mistakenly value is empty, but you can change this <option value='"abc'>written up wrong.
Is there a difference in the case of HTML English words?
HTML "tag name" or "attribute name" can be written in English case (case insensitive), but it is common and recommended to always use lowercase (lowercase).
Recommended standard writing <img src="123">
This way of writing is not recommended <IMG SRC="123">
Can HTML tags wrap?
The extra white space or line breaks between the tag name, attribute name, and attribute quality will be ignored by the browser. You can use this feature to arrange the HTML code to make the HTML code easier to read.
E.g:
<tag
attribute1="value2"
attribute2 = "value2"
>
It is the same as the following:
<tag attribute1="value2" attribute2="value2">
But note that the attribute value between the double quotation marks cannot be random blanks, and the tag name or attribute name cannot be random blanks, like the following is the wrong syntax:
<t ag attribute1="val ue2" attr ibute2="value2">
Post a Comment
0 Comments