Tags in HTML are like keywords. Each tag has its own semantics (meaning). For example, the <p> tag represents a paragraph and the <b> tag represents bold. Depending on the tag, the browser will display the content in the tag in different ways.
In actual development, sometimes we also call HTML tags HTML elements.
property
↓
<div class=foo>C language network</div>
↑ ↑ ↑
start tag content end tag
In addition to the class attribute, the start tag can also contain other attribute information, such as id, title, etc., which we will explain later.
Note: Although HTML tags are not case-sensitive in syntax, for the sake of standardization and professionalism, it is strongly recommended to use lowercase when defining tags.
(1) Tag semantics
Learning tags is tricky, the focus is on remembering the semantics of each tag. A simple understanding refers to the meaning of the label, that is, what the label is used for. According to the semantics of the label. Giving the most reasonable label at the right place can make the page structure clearer.
(2) Title tag h1-h6
In order to make web pages more semantic, we often use title tags in pages. HTML provides 6 levels of web page titles, namely <h1> - <h6>
<h1>I am a first-level tag</h1>
h is the abbreviation of the word head, which means head title.
Tag semantics: Used as a title, and in descending order of importance.
● Features:
1. The text with the title will become bold, and the font size will also increase in sequence.
2. One title occupies its own line.
(3) Paragraph tags and line break tags
You want text to be displayed in sections on a web page. The <p> tag is used to define paragraph styles.
<p>I am a paragraph tag</p>
p stands for paragraph, which means paragraph; HTML can be divided into several paragraphs, and the lines will be automatically wrapped according to the size of the browser window, leaving gaps between paragraphs.
In HIML, the text in a paragraph is arranged from left to right until it reaches the right end of the browser window, and then automatically wraps. If you want a certain section of text to be forced to wrap in a new line, you need to use the line break tag <br/>.
break forces a newline with small spacing between single label lines.
News cases:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>International News</title></head><body><h1>International News</h1><h4>Ukraine sent drones to attack military airports in Ryazan and Saratov Oblasts of Russia that morning</ h4><p>On December 5, local time, the Russian Ministry of Defense issued a statement saying that Ukraine sent drones to attack military airports in Russia's Ryazan and Saratov regions that morning, but they were intercepted by the Russian air defense system. Three Russian soldiers were killed and four others were injured in the attack. </p><p>In addition, the crash of a Ukrainian drone above a military airport caused damage to the bodies of two Russian fighter jets. A few hours later, Ukraine reported that Russia had launched a new round of missile attacks. </p><h4>It is impossible for Russia to hand over control of the Zaporozhye nuclear power plant</h4><p>Russian Foreign Ministry spokesperson Zakharova told Sputnik News Agency that it is impossible for Russia to hand over control of Zaporozhye Nuclear Power Plant Control of thermonuclear power plants. </p><h4>Biden will not consider using Russian oil to replenish strategic oil reserves</h4><p>The White House said it was not surprised by Russia's reaction to the price ceiling. Biden will not consider using Russian oil to replenish the Strategic Petroleum Reserve. U.S. energy security envoy Hochstein said the United States still has enough strategic petroleum reserves (SPR) to deal with emergencies. The Biden administration will hold an online meeting with U.S. oil industry executives on December 8 to discuss how to support Ukraine's energy infrastructure. The US Secretary of Energy will meet with numerous oil company executives on the 14th. </p><p>C Language Network<br/>2022-12-6</p></body></html>
Displayed as follows:
(4) Text formatting tags
In web pages, sometimes you need to set bold, italic, or underline effects for text. In this case, you need to use text formatting tags in HTML. Make text appear in a special way.
Tag semantics: Highlighting importance is more important than ordinary text.
<strong>Bold</strong><b>Bold</b><em>Italic</em><i>Italic</i><del>Strikethrough</del><s>Strikethrough</ s><ins>Underline</ins><u>Underline</u>
Shown below:
(5) div and span tags
<div> and <span> have no semantics. They are just boxes used to hold content.
division split partition span span span
● Features:
The <div> tag is used for layout, but now only one <div> can be placed in a row. The large box occupies one row.
The <span> tag is used for layout. There can be multiple <span>s on one line. There can be multiple small boxes on one line.
(6) Image tags and paths
1. Image tags
In HTML tags, the <img> tag is used to define images in HTML pages.
<img src=imageURL />
Abbreviation for the word image. Meaning image.
src is a required attribute of the <img> tag. It is used to specify the path and file name of the image file.
The so-called attributes: a simple understanding is the characteristics of this image tag.
<imgsrc=bg.pngalt=/>
Additional properties for image tags
Things to note when using image tags
(1) Image tags can have multiple attributes, which must be written after the tag name.
(2) The attributes are in no particular order. Tag names and attributes, and attributes are separated by spaces.
(3) Attributes take the format of key-value pairs, that is, key = "value" format, attribute = attribute value"
2. Path
(1) Directory folder and root directory:
In actual work, our files cannot be placed randomly, otherwise it will be difficult to find them quickly, so we need a folder to manage them.
Directory folder: It is an ordinary folder, which only stores the relevant materials we need to make pages, such as html files, pictures, etc.
Root directory: The first level of the opened directory folder is the root directory.
(2) VSCode opens the directory folder
File - open the folder. Selecting the directory folder is very convenient for managing files later. Or drag it in directly.
There will be a lot of pictures on the page. Usually we will create a new folder to store these image files (images). When looking for images, we need to use the "path" method to specify the location of the image files.
Paths can be divided into:
(1) Relative path, a directory path established based on the location of the referenced file.
(2) Absolute path refers to the absolute position in the directory, which directly reaches the target location, usually the path starting from the drive letter.
(7) Hyperlink tags
1. Link syntax format
<ahref=jump target target=popup method of target window>text or image</a>
Abbreviation for the word anchor: anchor
The two attributes function as follows
2. Link classification
(1) External links, such as <a href=http://www.baidu.com>baidu<a>.
(2) Internal links, the mutual links between internal pages of the website, can directly link the internal page names, such as <a href=index.html>Homepage<a>.
(3) Empty link, when the link target is not determined, <a href=#>Homepage<a>.
(4) Download link, if the address in href is a file or compressed package, the file will be downloaded.
(5) Web page element links Various web page elements in the web page, such as text images, tables, audio, video, etc., can be added with hyperlinks.