Common labels:
1. Title label h1-h6 (important)
In order to make web pages more semantic, we often use title tags in pages. HTML provides six levels of web page titles, namely h1-h6.
<h1>This is the first level title</h1>
Abbreviation for the word head, meaning head and title.
Label semantics:
Used as a title and diminishing in importance.
<h1>This is the first level title</h1>
<h2>This is the secondary title</h2>
<h3>This is a three-level title</h3>
<h4>This is a four level title</h4>
<h5>This is a five level title</h5>
<h6>This is a six level title</h6>
Label features:
1. The text with a title will be bold and the font size will change.
2. One title is exclusive to one line.
2. Paragraph labels (important)
In the web page, to display the text in an orderly way, you need to display the text in segments. In the HTML tag, the p tag is used to define paragraphs, which can divide the whole web page into several paragraphs.
<p>This is a paragraph</p>
Abbreviation for the word paragraphs, meaning paragraphs.
Tag semantics: text can be divided into different paragraphs.
characteristic:
1. The text will wrap automatically according to the size of the browser window in a short circuit.
2. Keep gaps between paragraphs.
3 line feed label
In HTML, the text in a paragraph will be arranged from right to right until the right end of the browser window, and then it will wrap automatically. If you want a paragraph of text to be forced to wrap, you need to use * * line wrap tag.br**
There is a new line at the end of the sentence<br />
The abbreviation of the word break, which means to break and line feed.
Label semantics: forced line feed.
characteristic:
1.<br />It's a single label 2.<br />Labels simply start a new line. Unlike paragraphs, some vertical spacing will be inserted between paragraphs.
4. Text formatting label
In web pages, sometimes you need to set bold, italic or underline effects for text. At this time, you need to use HTML text formatting tags to display the text in a special way.
Tag semantics: highlight the importance, which is more important than ordinary words.
<strong>This is bold text</strong>strong>perhaps<b>This is bold text</b><br /> <em>This is italic text</em>perhaps<i>This is italic text</i><br /> <del>This is strikethrough text</del>perhaps<s>This is strikethrough text</s><br /> <ins>This is underlined text</ins>perhaps<u>This is underlined text</u><br /> <sub>This is the subscript text</sub>and<sup>This is superscript text</sup><br />
Among them, bold and inclined are the key points
5.div and span labels
<div>and<span>There is no semantics. It is a box for storing content. <div>This is div</div> <span>This is span</span>
div is the abbreviation of division, which means division and span means span.
characteristic:
<div>Labels are used for layout, but now only one can be placed in a row<div>. Big box <span>Labels are used for layout. There can be multiple labels on a line<span>. Small box
6. Image label and path (key)
1. Image label
In HTML tags, img tags are used to define images in HTML pages.
<img src="image URL" />
Abbreviation for the word image, meaning image.
**src is a required attribute of img tag, * * it is used to specify the path and file name of image file.
The so-called attributes: simple understanding is the characteristics of the whole image label.
Additional properties of image labels:
src:The path of the picture is a required attribute of the picture. <img src="https://lol.qq. com/act/export/artbook/content/champion/11_ missfortune/missfortune_ 02. JPG "ALT =" lucky sister "title =" this beautiful sister is lucky sister "height =" 675 "border =" 15 "/ > < br / > alt:Replacement text is the text displayed when the image cannot be displayed. title:Tip this article is the text displayed when the mouse is placed on the image. width: Pixel attribute, used to set the width of the image. height:Pixel attribute, used to set the height of the image border: Pixel attribute, used to set
Note on image label attribute:
1.Image tags can have multiple attributes, which must be after the tag name. 2.There is no order between attributes. Tag names and attributes, attributes and attributes are separated by spaces. 3.Property takes the form of a key value pair, i.e key="value"Format, properties="Attribute value".
2. Path
1. Directory, folder and root directory: in actual work, our files cannot be placed randomly, otherwise it is difficult to find them quickly, so we need a folder to manage them.
Directory folder: it is an ordinary folder, which just stores the relevant materials we need to make the page, such as html Documents, pictures, etc. Root directory: the first layer of the open directory folder is the root directory
2. There will be a lot of pictures on the page. Usually, we will create a new folder to store these image files. When searching for an image, you need to use the "path" method to specify the position of the image
Paths can be divided into:
1.Relative path: the directory path established based on the location of the reference file. Here, simply put, it is the image relative to HTML The location of the page. 1.Same level path Images and other files html The page is in the same directory. <img src="1.jpg" /> 2.Next level path Images and other files html Next level directory of the page(Here is images)Down. <img src="images/1.jpg" /> <!--Symbol is "/" --> 3.Upper level path Images and other files html Under the upper directory of the page. <img src="../1.jpg" /> <!--Symbol is "../" --> The relative path starts from the file where the code is located to find the target file, and what we call the upper level, the lower level and the same level here is the relative path of the image HTML The location of the page. 2.Absolute path: refers to the absolute location in the directory, which directly reaches the target location. Usually, it starts from the drive letter. For example,"D:\HTML practice\HTMLtest\1.jpg"Or a complete network address"https://cn.bing.com/th?id=OHR.WinteringFowl_ZH-CN8158075445_1920x1080.jpg&rf=LaDigue_1920x1080.jpg" 1.Local absolute path <img src="D:\HTML practice\HTMLtest\1.jpg" alt="" /> 2.Network absolute path <img src="https://lol.qq.com/act/export/artbook/content/champion/11_missfortune/missfortune_02.jpg" alt =""/><br />
7. Summary of complete page code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Common labels</title>
</head>
<body>
<h1>This is the first level title</h1>
<h2>This is the secondary title</h2>
<h3>This is a three-level title</h3>
<h4>This is a four level title</h4>
<h5>This is a five level title</h5>
<h6>This is a six level title</h6>
<p>This is a paragraph
There is no line break in this paragraph
</p>
<p>This is a paragraph<br />
This paragraph has a line break
</p>
<p>
<strong>This is bold text</strong>strong>perhaps<b>This is bold text</b><br />
<em>This is italic text</em>perhaps<i>This is italic text</i><br />
<del>This is strikethrough text</del>perhaps<s>This is strikethrough text</s><br />
<ins>This is underlined text</ins>perhaps<u>This is underlined text</u><br />
<sub>This is the subscript text</sub>and<sup>This is superscript text</sup><br />
</p>
<div>Labels are used for layout, but now only one can be placed in a row</div>
<span>Labels are used for layout. There can be multiple labels on a line.</span>
<span>Labels are used for layout. There can be multiple labels on a line.</span>
<span>Labels are used for layout. There can be multiple labels on a line.</span>
<!--Only set the address of the picture-->
<img src="https://lol.qq.com/act/export/artbook/content/champion/11_missfortune/missfortune_02.jpg"/><br />
<!--You can only see the wrong picture address here alt Content of attribute-->
<img src="https://lol.qq. com/act/export/rtbook/content/champion/11_ missfortune/missfortune_ 02. JPG "ALT =" lucky sister "/ > < br / >
<!--Yes title Property, you can see the text above after moving the mouse to the picture in Chapter 3-->
<img src="https://lol.qq. com/act/export/artbook/content/champion/11_ missfortune/missfortune_ 02. JPG "ALT =" lucky sister "title =" this beautiful sister is lucky sister "/ > < br / >
<!--Set the width of the picture to 675-->
<img src="https://lol.qq. com/act/export/artbook/content/champion/11_ missfortune/missfortune_ 02. JPG "ALT =" lucky sister "title =" this beautiful sister is lucky sister "width =" 675 "/ > < br / >
<!--Set the height of the picture to 675-->
<img src="https://lol.qq. com/act/export/artbook/content/champion/11_ missfortune/missfortune_ 02. JPG "ALT =" lucky sister "title =" this beautiful sister is lucky sister "height =" 675 "/ > < br / >
<!--Generally, we only set one of the height and width of the picture. The picture will be automatically scaled according to the height or width. If the height and width are set to 675 at the same time, the picture will be abnormally stretched-->
<img src="https://lol.qq. com/act/export/artbook/content/champion/11_ missfortune/missfortune_ 02. JPG "ALT =" lucky sister "title =" this beautiful sister is lucky sister "width =" 675 "height =" 675 "/ > < br / >
<!--Add a border attribute to the picture-->
<img src="https://lol.qq. com/act/export/artbook/content/champion/11_ missfortune/missfortune_ 02. JPG "ALT =" lucky sister "title =" this beautiful sister is lucky sister "height =" 675 "border =" 15 "/ > < br / >
</body>
</html>