HTML+CSS Basic HTML tags for easy entry (1)

Comments in

html

There are many kinds of HTML tags. You can refer to the manual. Next, we will explain some of our commonly used tags.

First we will talk about the P tag paragraph (p)

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
		<p>大家好</p>
</body>
</html>

Then we will browse Run on the server, the output is: Hello everyone

Look at the following code:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
		<p>大家好</p>
		<p>大家好！</p>
</body>
</html>

The paragraph will wrap itself, so the output is:

Hello everyone

<meta>----- is an auxiliary tag within the head tag, usually used to set encoding and optimize keywords for promotion

<br> -------Line break

<font>---------Format text

<table>------Table

<span>------Inline label

Tips and Notes:

Tip: Use <span> to group inline elements so that they can be formatted with styles.

Note: span has no fixed format. It only changes visually when you apply a style to it.

<h1> to <h6>-----Control font size

<div>----- --Split the document into independent and different parts (we will explain it when we learn css)

<hr>-------Title and title separated by horizontal lines Paragraph

Next, let’s first explain these simple tags

The following code:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
		<p>大家好<span>123456</span></p>
		<p>大家好</p>
		
		111111111111111<br>1111111111111111 <!--换行-->

		<hr>  <!--用来和以上隔开，有一条黑色的直线-->

		<font size='18' color="red">我们都一样</font>   <!--font设置字体大小，颜色-->

		<hr>

		<h1>中国</h1>
		<h2>中国</h2>
		<h3>中国</h3>
		<h4>中国</h4>
		<h5>中国</h5>
		<h6>中国</h6>

</body>	
</html>

Everyone copy the code to your computer, create a file with the suffix .html and then Double-click to preview

Table

Please look at the following code:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
		<table>
			<tr>
				<th>美国</th>
				<th>日本</th>
				<th>中国</th>
			</tr>

			<tr>
				<td>123</td>
				<td>456</td>
				<td>789</td>
			</tr>

			<tr>
				<td>123</td>
				<td>456</td>
				<td>789</td>
			</tr>
		</table>
</body>
</html>

The table is composed of rows and columns. To be precise, it cannot be called columns, but can only be called cells.

The <tr> tag in the above code represents the row and <td> represents the cell. But we are previewing It is displayed in the form of a table, so it is called 3 rows and 3 columns.

<th> Defines the header cell, which is generally used for titles. For example, we make a weekly schedule from Monday to Sunday. These words need to be bolded etc.

The above code execution results:

United States Japan China

123 456 789

We are not used to seeing such a table, so let me add a border to the table

in the above code. We add border='1' to the table tag and then we add a width and height to the table width="300" height="200"

The specific code is as follows:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
		<table border="1" width="300" height="200">
			<tr>
				<th>美国</th>
				<th>日本</th>
				<th>中国</th>
			</tr>

			<tr>
				<td>123</td>
				<td>456</td>
				<td>789</td>
			</tr>

			<tr>
				<td>123</td>
				<td>456</td>
				<td>789</td>
			</tr>
		</table>
</body>
</html>

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table border="1" width="300" height="200"> <tr> <th>美国</th> <th>日本</th> <th>中国</th> </tr> <tr> <td>123</td> <td>456</td> <td>789</td> </tr> <tr> <td>123</td> <td>456</td> <td>789</td> </tr> </table> </body> </html>

submit Reset Code

Automatic operation

HTML+CSS Basic HTML tags for easy entry (1)

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]