Continued - the basics of HTML! ! !
1. Form
In HTML, table is used to represent a table, tr is used to represent a row, and td is used to represent a column.
Demo: Represents a table with two rows and three columns
<!--根-->
<html>
<!--头-->
<head>
<title>my_website</title>
</head>
<!--体-->
<body>
<table border = 1px width = 50%>
<!--
1.border = 1px 是设置表格的边框为一像素
2.width = 50% 是占屏幕的50%宽
-->
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
</body>
</html>
If you want to set the height and alignment of the table, such as the following code:
<!--根-->
<html>
<!--头-->
<head>
<title>my_website</title>
</head>
<!--体-->
<body>
<table align = "center" border = 1px width = 50% height = 150px>
<!--
align = center 是表格的对齐的方式，放在哪个地方就是对那个位置的对齐，如对表格整体的对齐，或者对行或列的 对齐
-->
<tr align = "center" >
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr align = "center">
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
</body>
</html>
2. Cell Merging
1. Merge of row cells
Merge row cells, using rowspan to synthesize two row cells
Demo example:
<!--根-->
<html>
<!--头-->
<head>
<title>my_website</title>
</head>
<!--体-->
<body>
<table align = "center" border = 1px width = 50% height = 150px>
<tr align = "center" >
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr align = "center">
<td>d</td>
<td>e</td>
<td rowspan = "2" >f</td>
</tr>
<tr align = "center">
<td>g</td>
<td>h</td>
</tr>
</table>
</body>
</html>
2. Merge of column units
Merge of column cells, using colspan to merge two column cells
Demo：
<!--根-->
<html>
<!--头-->
<head>
<title>my_website</title>
</head>
<!--体-->
<body>
<table align = "center" border = 1px width = 50% height = 150px>
<tr align = "center" >
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr align = "center">
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr align = "center">
<td colspan = "2" >g</td>
<td>i</td>
</tr>
</table>
</body>
</html>
3. Precautions
- When using row to merge, delete the cell below
- When using col to merge cells, there is no requirement for which cell to delete
- row means row, col means column
4.th label
The th tag is also the tag of the cell, more than the td tag, it can bold and center the text.
Demo：
<html>
<!--头-->
<head>
<title>my_website</title>
</head>
<!--体-->
<body>
<table align = "center" border = 1px width = 50% height = 150px>
<tr align = "center" >
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr align = "center">
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<th>g</th>
<th>h</th>
<th>i</th>
</tr>
</table>
</body>
</html>
3. Background color
Use the bgcolor tag in HTML to modify the background color.
Demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body bgcolor="blue">
</body>
</html>
First explain this line of code meta charset="UTF-8":
The function of this line of code is to tell the browser which character to use to open the current page, not to set the character encoding method of the current page.
4. Background image
Use the background tag in HTML to insert a background image.
Demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body background="QQ图片20230323164957.jpg" >
</body>
</html>
5. Insert a picture
1. How to insert pictures?
In HTML, images are inserted using the img tag.
Demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="R-C.jpg">
</body>
</html>
2. Precautions
(1) When setting the height and width of the image, only the width is set, and the height will be scaled proportionally.
(2) The img tag is the image tag.
(3) The src attribute is the path of the image.
(4) width sets the width, and height sets the height.
(5) title sets the information displayed when the mouse hovers.
<img src="R-C.jpg" title = "我是一张图片！">
(6) alt sets the prompt message displayed when the picture fails to load.
<img src="R-C.jpg" alt = "图片找不到！">
6. Hyperlinks
1. Text hyperlinks
Hyperlinks are represented in HTML using the a tag.
Demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="https://www.jd.com/">京东</a>
</body>
</html>
Click to go to Jingdong interface!
Note:(1) href: hot reference (hot reference)
(2) The href attribute must be followed by the address of the resource. The path can be an absolute path or a relative path. It can be the path of a certain resource in the network or the path of a local resource.
(3) Features of hyperlinks:
- underlined
- When the mouse hovers over the hyperlink, there is a small hand shape, and it will jump to the webpage after clicking
2. Image hyperlink
1. Code display
Demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="https://www.jd.com/">
<img src="R-C.png" width="5%">
</a>
</body>
</html>
2. Precautions
A hyperlink has a target attribute, and its value can be:
- -blank: Open a new window to display the page content
- -self: display the page content in the current window
- -top: top-level window (among multiple windows opened consecutively, the first opened window is the top-level window)
- -parent: parent window (the previous window of the current window is the parent window)
3. The role of hyperlinks
A request can be sent from the browser to the server through a hyperlink
- The browser sends data to the server (called request: request)
- The server sends data to the browser (called response: response)
- In a B/S structured system, each request corresponds to a response
4. The convenience of hyperlinks
There is essentially no difference between the user clicking on the hyperlink and the user directly entering the URL (web address) on the browser address bar. They both send a request to the server. From an operational point of view, the use of hyperlinks is more convenient.
7. List
1. Unordered list
Lists are represented in HTML using the ul tag.
Demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>中国
<ul>
<li>四川
<ul>
<li>资阳</li>
<li>内江</li>
<li>成都</li>
</ul>
</li>
<li>湖南</li>
<li>云南</li>
</ul>
</li>
<li>美国</li>
<li>韩国</li>
<li>英国</li>
</ul>
</body>
</html>
2. Ordered list
In HTML, use ol to represent an ordered list.
Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<Ol TYPE="I">
<li>中国
<Ol type="A">
<li>四川
<Ol type="1">
<li>资阳</li>
<li>内江</li>
<li>成都</li>
</Ol>
</li>
<li>湖南</li>
<li>云南</li>
</Ol>
</li>
<li>美国</li>
<li>韩国</li>
<li>英国</li>
</Ol>
</body>
</html>
The type attribute can change what symbol the list uses as the serial number!
The above is the whole content of this blog. The next blog will continue to introduce the basic knowledge about HTML. Please wait patiently for the blogger’s update! ! !
If you guys find any problems in this blog or something you don’t understand, please let me know (private message in the background)! ! !
Those who are determined are the pillars of fame. Mountaineering does not end with hardships, but must reach the steep mountains.