catalogue
HTML display text
The use of HTML is very simple. There is no need to install it. You can write it with a text document editor. Now let's learn how to make HTML files display text in web pages. Very simple, just use the H or h1~6 label. See the following figure for details:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<h>Hi</h>
<h1>Hi</h1>
<h2>Hi</h2>
<h3>Hi</h3>
<h4>Hi</h4>
<h5>Hi</h5>
<h6>Hi</h6>
</body>
</html>In the browser, seven sizes of "Hi" can be displayed from small to large.
HTML display picture
You must be worried: can web pages only display text foolishly? Can you show something else? Don't worry, let's see how to make the web page display pictures.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<img src="my_image.png" />
</body>
</html>Here we use < img SRC = "XXX" >, which means to load pictures.
HTML play music
We can now use HTML to make a good web page. You might think: if only there was sound in the web page. At this time, we will use the < audio > tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<audio controls="controls">
<source src="my_audio.mp3">
</audio>
</body>
</html>It's interesting, isn't it? We use the manual playback property of audio, or we can use the automatic playback property, but we need to use Javascript, which will not be displayed for the time being.
HTML layout
The web page is compiled, but it's messy and uncomfortable? If you have such trouble, let's learn CSS together.
Create a new text document and enter the following code to set the layout of an upper and lower structure:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
box-sizing: border-box;
}
.top {
height: 500px;
background-color: #ff0000;
}
.bottom {
height: 500px;
background-color: #0000ff;
}
</style>
</head>
<body>
<div class = "top"></div>
<div class = "bottom"></div>
</body>
</html>Find out, where is CSS code? Very simply, the CSS code is wrapped in the < style > tag. You can also separate them, but you need to use the < link > tag. You can search them on Baidu.
We can also make a layout of left and right structures:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
box-sizing: border-box;
}
.left {
height: 1000px;
background-color: #ff0000;
width: 50%;
float: left;
}
.right {
height: 1000px;
background-color: #0000ff;
width: 50%;
float: right;
}
</style>
</head>
<body>
<div class = "left"></div>
<div class = "right"></div>
</body>
</html>You can also make a slightly more complex layout:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
box-sizing: border-box;
}
.top {
height: 500px;
background-color: #ff0000;
}
.left {
height: 500px;
background-color: #ffff00;
width: 50%;
float: left;
}
.right {
height: 500px;
background-color: #0000ff;
width: 50%;
float: right;
}
</style>
</head>
<body>
<div class = "top"></div>
<div class = "left"></div>
<div class = "right"></div>
</body>
</html>
Well, that's all for today's course. Don't forget to praise those who feel helpful~~~