Summary of learning HTML tags and basic elements

Summary of learning HTML tags and basic elements

1. Elements and tags in HTML <br />An element is a contained scope defined by a single or a pair of tags. A tag is a string of characters with a less than sign (<) and a greater than sign (>) on the left and right. A start tag is a tag that does not begin with a slash (/) and contains a sequence of allowed attribute-value pairs. The closing tag begins with a slash (/). like:
<body><!—Start tag-->
<font color=”read”>Connection</font> <!—where color=”read” is the attribute-value pair. "Connection" is the content -->
</body><!—End tag-->

2. Four forms of HTML elements <br />Empty elements<br>
Empty element with attributes <hr color="blue">
Element with content <title>Connection</title>
Element <font color=”read”>Link</font> with content and attributes
In summary, the examples

Copy code
The code is as follows:

<html>//Starting symbol. Even without a browser, it can be parsed
<head> //Begin document header
<title>
My name is cauthy! //Beginning document title
</title>//End of document title
</head> //End of the document header
<body color="red">//Begin document body
Hello World! //Content displayed by the browser
</body>//End of document body
</html> //End HTML document

Note: In HTML, attributes and tags are case-insensitive. Attribute values ​​can be enclosed in double quotes or not.

3. Tags related to paragraph control
<palign="#"> means paragraph, function: create a paragraph. The attribute align indicates the alignment of the segment, which can be leftright justify
<br> indicates linebreak Function: line break
<hrcolor="””> indicates horizontal rule. Function: insert a horizontal line. The attribute indicates the color. You can use read green or hexadecimal numbers, such as #ffoooo

Copy code
The code is as follows:

<html>
<head><title>Quiet Night Thoughts</title></head>
<body>
<p align="center">
Quiet Night Thoughts
<hr color="#ffoooo">
<p align="center">
The moonlight is bright in front of my bed, I thought it was frost on the ground.

Looking up at the bright moon, I think of my hometown.
</body>
</html>//Effect diagram

4. Tags related to text display
<center>…</center>: Center the text
<hn align="”>…<hn>: used to indicate the title of the document, n is an integer from 1 to 6, 1 represents the largest title, and the attribute align represents the alignment of the title, which can be center, left, right
<fontsize=”n”color=””>…</font>: used to set the font, size indicates the font size, n can be an integer from 1 to 7, the larger the number, the larger the displayed font.
<b>…</b>: Set the text to bold
<i>…</i>: Set the text to italic

Copy code
The code is as follows:

<html>
<head><title>Quiet Night Thoughts</title></head>
<body>
<center>
<h1><fontcolor="red"><b><i>Quiet Night Thoughts</i></b></font></h1>
Li Bai
<hr color="#ffoooo">
<p>
<font color="blue"size=6>
The moonlight is bright in front of my bed, I thought it was frost on the ground.

Looking up at the bright moon, I think of my hometown. </font>
</center>
</body>
</html>

5. How to input special characters <br />In HTML documents, symbols like non-breaking space, carriage return, HTML reserved words, and some characters that do not exist on the keyboard all need to be quoted to be entered. There are two types of references in HTML: character references and entity references.
Both character references and entity references begin with an & and end with a semicolon (;). If you are using a character reference, you need to add a # after the &, followed by the decimal code or hexadecimal code (the encoding of the character in the ISO 10646 character set) of the required character. If you are using an entity reference, write the character's mnemonic after the &.
In HTML, spaces can be entered using full-width spaces.

6. Comments in HTML
<!--This is the content of the comment-->

7. Class List - Create a numbered list <br />Use the <ol> and <li> tags to create a numbered list. The type attribute can be used to specify the type of numbering system, A (A, B, C), a (a, b, c), I (III III), i (i ii iii) 1 (1, 2, 3) By default, the start attribute is used in the <ol> tag to set the starting number.
Use the value attribute in the <li> tag to change the order of the numbers in the list.
Use the <ul> and <li> tags to create bulleted lists. The type attribute in Ul can be disc (solid circle) square (solid square) circle (hollow circle)
Use the <dl> and <dt> tags to create unsigned lists, and use the <dd> tag instead of <dt> to create indented lists.
Use both the <dt> and <dd> tags within a <dl> element to create a term list. List items in a term list consist of two parts, the term and its description. The term is specified by the <dt> tag and the description is specified by the <dd> tag.

Copy code
The code is as follows:

<ol start="10"type="I">
Mathematics
<livalue="20">Language
<li>Physics
</ol>
<ul type="circle">
Mathematics
<li>Language
<li>Physics
</ul>
<dl>
Mathematics
<dd>Language
<dt>Physical
<dd>Chemistry
</dl>

8. Table <br />The table is created using <table border= n align=”” bgcolor=””>…</table>, where border is the width of the table. The default value is 0, which means that the width of the table is not displayed.
<caption>…</caption>: Used to define the title of the table
<tralign=”” valign=”” >…</br>: The attribute align specifies the horizontal alignment of this line, which can be leftcenterright. valign specifies the vertical alignment, which can be top, middle, bottom
<th>…</th>: used for table headers
<td>…</td>: used to define a cell

Copy code
The code is as follows:

<html>
<head><title>Table</title></head>
<body>
<table border="5"align="center" bgcolor="bule">
<caption>Exam results</caption>
<tr align="center"valign="middle">
<th>Language</th>
<th>Mathematics</th>
<th>English</th>
</tr>
<tr align="center"valign="middle" >
<td>80</td>
<td>70</td>
<td>60</td>
<tr align="center"valign="middle" >
<td>60</td>
<td>70</td>
<td>80</td>
</table>
</body>
</html>

9. Form Creation
<form method="get or post" action="URL">: The attribute method specifies the HTTP method used when sending data to the server, which can be get or post method. Get is the default method. When the get method is used to submit a form, the submitted data is appended to the end of the URL (specified in the action attribute) and sent to the server as part of the URL. For example, if we set the action to reg.asp, after submitting the form, we will see http://localhost:8080/reg.asp?user=zhangsan&pwd=1234 in the browser address.
The Post method sends the information in the menu as a data block to the server. Regardless of which method is used, the data encoding is the same, in the format of: name1=value1&name2=value2
The action attribute specifies the address of the script that processes the form. In other words, after the form is submitted to the server, who will process it? The URL of the processor is specified in the action.
<inputtype=””name=””size=””value=””>: type specifies the type of control to be created. The attribute name is used to specify the name of the control. The server-side script that processes the form can obtain the form data represented by name-value pairs and use the name to retrieve the corresponding value. The Name attribute is not displayed in the form, and the size attribute is used to set the initial width of the control in the form. The attribute value specifies the initial value of the control.
Single-line text input control (type="text") Submit button (type="submit")
Reset button (type="rest") Password input control (type="password")
Radio button (type="radio") Check box (type="checkbox") Hidden control (type="hidden")
Create a multi-line text input <textarea name=”” rows=””cols=”” >…</textarea>
The following example uses a table to control the form

Copy code
The code is as follows:

<html>
<head><title>Form</title></head>
<body>
<form method="get" action="reg.jsp">
<table border="0">
<tr valign="middle"></tr>
<td>Username:</td>
<td><inputtype="text" size="20" name ="user"></td>
<tr align="left"valign="middle"></tr>
<td>Password:</td>
<td><inputtype="password"></td>
<tr align="left"valign="middle"> </tr>
<td>Interests</td>
<td><inputtype="checkbox"name="interest" value="football">Football
<input type="checkbox" name="interest" value="basketball">Basketball
</td>
<tr align="left"valign="middle"></tr>
<td>Gender</td>
<td><inputtype="radio" name="sex"checked value="1">Male
<input type="radio"name="sex" value="0">Female
</td>
</select></td>
<tr align="left"valign="middle"></tr>
<tdvalign="top">Personal Profile:</td>
<td><textareaname="personal" rols="5" cols="20">Personal Profile</textarea>
</td>
<tr align="left"valign="middle"></tr>
<td></td>
<td><inputtype="hidden"value="001" name="id"></td>
<tr align="left"valign="middle"></tr>
<td></td>
<td><inputtype="reset" value="Reset"><inputtype="submit" value="Submit"></td>
</table>
</form>
</body>
</html>

10. Hyperlinks

Copy code
The code is as follows:

<a href="URL">…link text</a>
<a href="form.html">Current directory</a>
<ahref=../”form.html”>The directory above the current directory</a>
<ahref=”E://form.html”>Absolute path</a>
<ahref=”http://www.baidu.com”>World Wide Web address</a>

11. Embed images

Copy code
The code is as follows:

<imag src=”URL” width=”” height=””>

<<:  Tutorial on how to create a comment box with emoticons using HTML and CSS

>>:  How to introduce pictures more elegantly in Vue pages

Recommend

Analysis of the differences between Iframe and FRAME

1. Use of Iframe tag <br />When it comes to ...

React+Typescript implements countdown hook method

First, setInterval is encapsulated as a Hook 👇 im...

MySQL 5.5.56 version (binary package installation) custom installation path step record

Installation path: /application/mysql-5.5.56 1. P...

Explanation of the working principle and usage of redux

Table of contents 1. What is redux? 2. The princi...

React Hooks Common Use Scenarios (Summary)

Table of contents 1. State Hook 1. Basic usage 2....

Tutorial on how to install htop on CentOS 8

If you are looking to monitor your system interac...

Detailed explanation of the group by statement in MySQL database group query

1: Statement order of grouping function 1 SELECT ...

Usage scenarios and source code analysis of Vue advanced components functional components

Table of contents introduce Usage scenarios Sourc...

Steps to set up and mount shared folders on Windows host and Docker container

Programs in Docker containers often need to acces...

Memcached method for building cache server

Preface Many web applications store data in a rel...

Summary of using the reduce() method in JS

Table of contents 1. Grammar 2. Examples 3. Other...

Summary of the differences between global objects in nodejs and browsers

In Node.js, a .js file is a complete scope (modul...

Advanced explanation of javascript functions

Table of contents Function definition method Func...

A guide to writing flexible, stable, high-quality HTML and CSS code standards

The Golden Rule Always follow the same set of cod...

Should I abandon JQuery?

Table of contents Preface What to use if not jQue...