Basic HTML I (introduction, syntax, structure, common tags, picture tags, hyperlinks)

1. What is HTML?

HTML is a language used to describe Web pages

  • HTML refers to hypertext markup language
  • HTML is not a programming language, but a markup language
  • Markup language is a set of markup tags
  • HTML uses tags to describe Web pages

2. Basic HTML syntax and relationship

Basic syntax:
  • HTML tags are keywords surrounded by angle brackets, such as < HTML >
  • HTML tags usually appear in pairs, such as < HTML > and</html>
  • The first label in the label pair is the start label and the second label is the end label
  • Some special labels must be single labels, such as < br / >, < HR / >, which we call single labels.
Label relationship:

It can be divided into two types: inclusion relationship and juxtaposition relationship
Include relationships:

//Inclusive relationship is also called parent-child relationship

Juxtaposition relationship:

	//Juxtaposition is also called brotherhood

3.HTML initial structure

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
Structure analysis:

<! DOCTYPE > declaration must be on the first line of the HTML document, before the < HTML > tag
<! DOCTYPE > declaration is not an HTML tag. It tells the browser which HTML standard to write the page according to

<!DOCTYPE html>Tell the browser to follow the latest HTML5 Analyze the page according to the standard of

Common DOCTYPE declarations:

<HTML 4.01 Strict><XHTML 1.0 Strict>
<HTML 4.01 Transitional><XHTML 1.0 Transitional>
<HTML 4.01 Frameset><XHTML 1.0 Frameset>
<html lang="en">lang="en"It means to tell the browser that this is short HTML The language contained in the code is English
< head > part:

< head > is the container of all head tags. The following tags can be added to the head part:
< title > < base > < link > < meta > < script > and < style >

Title of web page
<title>My first page</title>

title instance:


meta Elements are used to specify the description of the page, keywords, the author of the document, the last modification time, and other metadata.
<meta> Label always in head Element.
Metadata can be used in browsers (how to display content or reload pages), search engines (keywords), or others web service
 Coding settings
<meta charset="UTF-8">
IE Settings for
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Display settings
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Convenient for search engine optimization
<meta name="title" content="HTML,CSS,Javascript">
The description of the page is convenient for search engine optimization
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
The designation of keywords is convenient for search engine optimization
<meta name="keywords" content="HTML, CSS, XML" />
Page author
<meta name="author" content="Meeting is ten miles of spring breeze">
Page cache settings
<meta http-equiv="Cache-Control" content="max-age=10080">


Style file
Script file
Import external style files
    <link rel="stylesheet" href="">
Page title Icon
	<link rel="icon" href="favicon.ico" type="image/x-icon">
	Defined HTML The body of the document.

4. Common HTML tags


HTML provides 6 levels of titles, < H1 > - < H6 >

Note: the text title label has its own bold, has its own text size, and occupies one line with the default spacing

Paragraph < p > label
	<P>I am a paragraph<p>
	<P>I am a paragraph<p>
	<P>I am a paragraph<p>

P tag page effect:

Note: there is a distance between paragraphs

Line feed < br / > label

HTML elements without content are called empty elements.
< br / > is an empty element that does not close the label (< br / > label definition line feed).
Force line wrapping for text that needs to be wrapped

	I'm a line breaking point<br/>I'm a new line

br tag page effect:

Horizontal line < HR / > label

< HR / > tags create horizontal lines in HTML pages.
The hr element can be used to separate content.

Tip: using horizontal lines (< HR / > labels) to separate sections in an article is one way (but not the only way).

Text formatting label

Example: when an article is bold, slanted, deleted, underlined, marked up and marked down, the text is formatted.

Bold<b>< / b > or < strong > < / strong >It is recommended to use the bold definition
tilt<i> < / I > or < EM ></em>The em weighted tilt definition is recommended
delete<s> < / s > or < del > < / del >< del > is recommended and < s > is not recommended
Underline<u></u>It is recommended to use style instead.
subscript<sub></sub>Annotation interpretation
Superscript<sup></sup>Annotation interpretation
Special characters

If some special symbols in some HTML pages cannot be displayed, we need to use our special characters to escape and display them in our pages.

Special charactersdescribeCharacter code
 Space (affected by font)&nbsp;
 Space (basically not affected by font, one Chinese width)&emsp;
<Less than sign&it;
>Greater than sign&gt;
&Sum number&amp;
®® trademark&reg;
™ trademark&trade;
×multiplication sign&times;
÷division sign&divide;
²Square 2&sup2;
³Square 3&sup3;

Note: General spaces, greater than sign, less than sign, and sign need to be memorized

5.div and span labels


div tag, which has no specific meaning, is a box used to divide the area of the page and monopolize one line.


span tag, like div, has no practical significance. It is mainly used to modify the text independently. How wide the content is, it takes up as much space as possible.
The difference from div tags is that multiple span tags can coexist in one line without damaging the text structure. Div is a big box and span is a small box.

6. Path of picture label

img tag

< img > is a single label used to load the pictures on the path to the page.

src yes img An attribute of the tag, url Is the path where the picture is located
<img src="url">
Picture label properties
attributeAttribute valueexplain
srcPicture pathessential
titleText promptTips displayed when the mouse hovers over the picture
altText promptThe picture does not display or fails to load the prompt information
widthwidthSet picture width
heightheightSet picture height
borderframeSet picture border thickness

Paths are divided into relative paths and absolute paths

Relative path
  1. Picture files are equivalent to HTML files. In the same folder, write the target file name + extension directly
    < img SRC = "picture name. gif" >
    < img SRC = ". / picture name. gif" (. / indicates the picture in the current path) >

  2. The parent folder of a picture file is equivalent to an HTML file. In the same folder, the parent folder name + target file name + extension are added
    <img src="web/code.png">
    <img src="./web/code.png">

  3. The picture file and HTML file are not in the same parent folder. You need to use... / to return to the upper level directory first, and bring the picture parent folder name + target file name + extension
    <img src=".../web/code.png">

Absolute path

It refers to the path where the file really exists on the hard disk. It is the absolute position in the directory and directly reaches the target location. It is usually the path starting from the drive letter.
For example: "C:\csdn\html\img\code.gif" or the complete network address of the picture
Note: absolute path is rarely used in development. Browsing on your own computer may be normal, but uploading to the web server may cause the picture to not be displayed normally. Absolute paths do not distinguish the direction of slashes

7. Hyperlink labels

Jump to different pages.

<a hrel="route" title="Information prompted after mouse over" target="Specify where to open the document">content</a>
External links


<a href="">CSDN</a>

When you click the link to return, it changes from blue to purple because you have jumped to the link

When you click the hyperlink to jump, you will find that it is on the current page. One of my websites directly jumps to the official website of CSDN

When you don't want to jump on the current page, make the target attribute

<a href="" target="blank">CSDN</a>

When you click jump, a window will reopen instead of jumping on the current page

target attribute:

attributeAttribute value
selfDefault value
blankNew window opens
internal link

When two files are in the same directory

The specification is the same as that of the image path
<a href="web.html"><a/>
pictures linking
<a href="">
	<img src="./csdn.png">

Use the hyperlink package outside the picture to make the picture have the ability to jump.

Bookmark link (anchor link)

Keywords: Front-end html

Added by adamgeorge on Wed, 16 Feb 2022 18:50:52 +0200