HTML introductory tutorial HTML tag symbols quickly mastered

Side note <br />If you know nothing about HTML and are still worried about how to get started with HTML, I highly recommend that you study this article, which will allow you to quickly master HTML. If you are already an HTML expert, I hope you can give me better suggestions.

summary
HTML, commonly known as Hypertext Markup Language, is the abbreviation of Hyper Text Markup Language. It is a markup language used to describe web documents. The web page file itself is just a text file. By adding tags to the text file, we can tell the browser how to display the content (such as how to process text, how to arrange the screen, how to display pictures, etc.). These tags are our HTML. Learning HTML is learning these tags. Today we will mainly learn some common HTML tags, also known as HTML elements.

Tag elements <br />Tag introduction
The html element consists of one or a pair of tags that define the containing scope. A tag is composed of two character strings “<” and ">”. The tag includes the start tag “<>” and the end tag “</>”.
There are four forms of html tag elements:
Empty element: <br>
Empty element with attributes: <hrfont="red">
Elements with content: <title>This is content</title>
An element with content and attributes: <fontcolor="red">This is content</font>
One thing to note here is that in HTML documents, the names of tags and attributes are size-independent.

Essential basic elements of HTML framework
<html></html> indicates the beginning and end of the document
<head></head> indicates the beginning and end of the document header
<title></title> indicates the beginning and end of the document title
<body></body> indicates the beginning and end of the main body of the document
The html comment format is a less-than sign (<), an exclamation mark (!) with no space between the less-than sign and the exclamation mark, followed by two dashes (--), then the comment content, and finally two dashes (--) and a greater-than sign (>).
For example: 

Tags related to paragraph control
<palign="#">
Create a paragraph. The attribute align indicates the alignment of the paragraph. # can be left, center, right, or justify.
<br>
The function is to wrap
<hrcolor="#">
The function is to insert a horizontal line, and the attribute color is used to indicate the color.

Tags related to text display
<center>…</center>
Center the text
<hnalign="#"></hn>
It is used to indicate the title of the document. n is an integer from 1 to 6, with 1 being the largest title and 6 being the smallest title. align is used to set the title alignment, including left, center, and right.
<fontsize=n color="#">...</font>
Set the font. size is the font size, an integer from 1 to 7. The larger the number, the larger the font.
<b>...</b>
Makes text bold.
<i>…</i>
Make text italic

The label created by the list element
a. Create a numbered list:
<ol>...</ol>Use the start attribute to set the starting sequence number.
<li>...</li>Use the value attribute to change the order of the numbers in the list.
b. Create a list with items matching:
<ul> and <li>, the type attribute of their tags specifies the style of the symbol:
disc, shown as a solid circle;
square, displays unfilled squares.
circle, displays a circle without a hollow
b. Create an unsigned list
The <dl> and <dt> tags create unsigned lists
<dd> and <dt>, create an indented list

Table element tags <br />Tables play a vital role in web page layout. Tables are defined using <table>.
The specific definition is: <tableborder=n aligh="#" bgcolor="rgb">
The border attribute is used to define the width of the table border, and the align attribute is used to set the alignment of the table, which can be left, right, or center. bgcolor is the color.
<caption>…</caption> is used to define the title of the table
<tr>...</tr>Add a new row to the table
<th>…</th> is used to define the table header
<td>…</td> is used to define a cell

HTML interactive form <br />The form is mainly responsible for data collection on the web page. For example, we usually register information, enter information and interact with the web page through forms.
A form is created using the <form>...</form> element. By embedding other related elements or controls between the two, you can create a form as part of an HTML document.
The basic syntax for creating a form is as follows:
<formmethod="get or post" action="URL">….</form>
The attribute method is used to specify the HTTP method used when sending form data to the server. Either get or post can be used. The submitted data is appended to the end of the URL and sent to the server as part of the URL.
Here are some common elements about forms:
The <input> element is used to receive user input. It is an empty element with attributes. The syntax for creating controls in a form is
<inputtype="type" name="name" size="size"value="value'>
The type attribute is used to specify the type of control to be created, the then attribute is used to specify the name of the control, the size attribute is used to specify the initial width of the control in the form, and the value attribute specifies the initial value of the control.
For the type of type, please refer to the following picture:

List box element <br />Allows users to select one or more items from a drop-down menu. The list box is created by the <select> element, and the individual options in the list box are provided by the <option> element.
Multi-line text input control
<textareaname="name" rows="number of rows" cols="number ofcolumns" >…</textarea>
The rows attribute is used to specify the number of text rows displayed in the visible area of the text box input control, and cols specifies the width of the visible area of the text input control.

Hyperlink Tags
<ahref="URL">…</a>
The attribute href is used to specify the target of the link. The target address is located by the URL. The text between the opening tags <a></a> will be used as the link text displayed in the browser.

Embed image tag
<img src="URL" width=n height=m>The src attribute specifies the location of the image resource, and the width and height attributes are used to specify the size of the image. It should be noted here that src should use a relative path instead of an absolute path as much as possible.
Special Character Elements Special characters include character references and entity references. Below we summarize the commonly used ones

Summary <br />We have summarized some of the most commonly used and most basic tag elements. Once you have mastered these basics, you can quickly become a beginner in HTML. Writing a simple HTML web page will not be a problem. This also lays the foundation for further learning in the future.

<<: What is COLLATE in MYSQL?

>>: Sample code for separating the front-end and back-end using FastApi+Vue+LayUI