Basic knowledge of HTML-and common tags-and the difference between relative path and absolute path

1. Basic knowledge of HTML
1. Website: refers to a collection of web pages related to specific content made on the Internet according to certain rules and using HTML.
A webpage is a "page" in a website, usually a file in HTML format, which needs to be read through a browser.
A webpage is the basic element that constitutes a website. It usually consists of pictures, links, text, sounds, videos and other elements. Usually, the webpages we see are usually
files ending with .htm or .html suffix, so they are commonly called HTML files.
2. What is HTML?
HTML refers to Hyper Text Markup Language (Hyper Text Markup Language), which is a language used to describe web pages.
HTML is not a programming language, but a markup language, which is a set of markup tags.
The so-called hypertext has two meanings:
(1) It can add pictures, sounds, animations, multimedia and other content (beyond text limitations).
(2) It can also jump from one file to another, and connect with files on hosts all over the world (hyperlink text).
A web page is composed of web page elements, which are described by html tags, and then displayed to users through browser analysis.
3. Web standards (focus) Web standards are a collection of a series of standards formulated by the W3C organization and other standardization organizations.
W3C (World Wide Web Consortium) is the most famous international standardization organization.
In addition to following the Web standards to make the pages written by different developers more standard and uniform, it also has the following advantages:
(1). The development of the Web is more promising.
(2). The content can be accessed by a wider range of devices.
(3). Easier to be searched by search engines.
(4). Reduce website traffic costs.
(5). Make the website easier to maintain.
(6). Improve page browsing speed.
4. The composition of the Web standard
mainly includes three aspects: Structure, Presentation and Behavior.

The best experience solution proposed by the Web standard: separation of structure, style, and behavior.
Simple understanding: The structure is written in the HTML file, the performance is written in the CSS file, and the behavior is written in the JavaScript file.
5. Commonly used kernel devices: there are mainly five kinds, as shown in the following figure:


2. Basic syntax overview

1. HTML tags are keywords surrounded by angle brackets, for example.
2. HTML tags usually appear in pairs, such as and, which we call double tags. The first tag in the tag pair is the
   start tag, and the second tag is the end tag.
3. Some special tags must be single tags (rare cases), for example
   , we call them single tags.
   Double-label relationships can be divided into two categories: containment relationships and parallel relationships.
   4. Every web page will have a basic structure tag (also called a skeleton tag), and the content of the page is also written on these basic tags.
   HTML pages are also called HTML documents.
   
   
   

5. Character set
Character set (Character set) is a collection of multiple characters. So that the computer can recognize and store various characters. Within the tag, the charset attribute of the tag can be used to specify which character encoding the HTML document should use.

Commonly used values ​​of charset are: GB2312, BIG5, GBK and UTF-8, of which UTF-8 is also called the universal code, which basically contains the characters that all countries in the world need to use. Note: The above syntax is the code that must be written , Otherwise it may cause garbled characters. Under normal circumstances, use the "UTF-8" encoding uniformly, and try to write the standard "UTF-8" uniformly instead of "utf8" or "UTF8". 6. .4 Summary 1. The above three codes vscode are automatically generated and basically do not need us to rewrite. 2. The document type declaration tag tells the browser that this page uses the html5 version to display the page. 3. Tell the browser or search engine this It is an English website. This page is displayed in English.

3. The semantics of tags
1. Learning tags is skillful. The key point is to remember the semantics of each tag. Simple understanding refers to the meaning of the label, that is, what the label is used for.
According to the semantics of the tag, giving the most reasonable tag in the right place can make the page structure clearer.
Tag semantics
(1). It
is a single tag, tag semantics: forced line break.
(2). The
tag simply starts a new line. Unlike paragraphs, some vertical spaces are inserted between paragraphs.
3. In the web page, sometimes it is necessary to set the effect such as bold, italic or underline for the text. At this time, the text formatting tags in HTML need to be used
to display the text in a special way.
Label semantics: highlight the importance, more important than ordinary text.
4.

And label

Labels are used for layout, but now only one line can be placed

. The big box tag is used for layout, and there can be multiple *＊5, image tags and paths (emphasis) on a line. In HTML tags, tags are used to define images in HTML pages. Format: <img src="Image URL"/> The abbreviation of the word image, which means image. src is a required attribute of the tag, it is used to specify the path and file name of the image file. The so-called attribute: simple understanding is the characteristic of this image tag. Other attributes of the image tag: as shown in the figure below:

6. Points to note about image tag attributes:
① An image tag can have multiple attributes, which must be written after the tag name.
② There is no order between the attributes, and the label name and attribute, and between attribute and attribute are separated by spaces.
③ The attribute takes the format of key-value pairs, that is, the format of key="value", and the attribute="attribute value".
　　Directory folder and root directory: In
actual work, our files cannot be randomly placed, otherwise it is 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 the page, such as html files, pictures, etc.
Root directory: The first level of the open directory folder is the root directory.
7. Path
There will be a lot of pictures on the page. Usually we will create a new folder to store these image files (images). Then we need
to use the “path” method to specify the location of the image files when we look for the images .
The path can be divided into:

1. Relative path: The directory path established based on the location of the referenced file.
   In simple terms, the position of the image relative to the HTML page.
   

2. Absolute path: refers to the absolute location under the directory, which directly reaches the target location, usually the path starting from the drive letter.
   For example, "D:\web\img\logo.gif" or the full web address "http://www.itcast.cn/images/logo.gif".
   8. Hyperlink tags (emphasis)
   In HTML tags, tags are used to define hyperlinks, which are used to link from one page to another.

3. Syntax format of the link: text or image
   2. Classification of the link

4. External links: For example, <a href="http:// www.baidu.com "> Baidu.

5. Internal links: Interlinks between internal pages of the website. Just link the name of the internal page directly, such as the home page of <a href=“index.html”>.

6. Empty link: <a href="#"> homepage if the link target is not determined at that time.

7. Download link: If the address in href is a file or compressed package, this file will be downloaded.

8. Web page element links: You can add hyperlinks to various web page elements in the web page, such as text, images, tables, audio, video, etc.

9. Anchor link: Click on the link to quickly locate a certain position on the page.
    In the href attribute of the link text, set the attribute value to the form of #name, as in episode 2.
    Find the target location tag and add it inside An id attribute = the name just now, such as:

   Episode 2 Introduction

   
   8. Comments and special characters
   in HTML If you need to add some comment text that is easy to read and understand but does not need to be displayed on the page in the HTML document, you need to use comment tags.
   Comments in HTML end with "".

Shortcut key: ctrl + / Purpose of tagging: The content in the comment tag is for programmers to see, this code is not executed and will not be displayed on the page.

The purpose of adding comments is to better explain the function of the code, so that relevant developers can understand and read the code. The program will not execute the comment content.
＊9. Special characters: Key points to remember: space, greater than sign, less than sign. The others are rarely used. If you need to look back, you can.
In HTML pages, some special symbols are difficult or inconvenient to use directly. In this case, we can use the following characters instead.
Commonly used characters are shown in the figure below: