In the first step of understanding the front end of the last section, we have a preliminary understanding of the document type of the web page, and achieved the most concise a web page. But in practice, we can’t just read the text on the web like a novel. It can also insert some pictures and audio and video, so that the function of the web page is more powerful, more dazzling colors. Let’s take a look at each function point in turn.

  • Insert the picture
    • Prepare an image (say 1.jpg) and place it in the same directory as the page you created in the previous section. (If you are not sure, create a new folder and place the page files and images in this folder.)
    • Open the file with a text editor and add the following line (Note that the name of the referenced image in <img SRC ="./1.jpg"> is the same as the name of the actual image(Be sure to save
    <img src="./1.jpg">
Copy the code
    • Open the file in your browser and you’ll see an image on the page.
  • Insert audio
    • Prepare an audio file (preferably in MP3 format, let’s say called music.mp3) in the same directory as the page created in the previous section
    • Open the file with a text editor and add the following line (Note that <audio SRC ="./music.mp3" controls></audio> reference the audio name as the actual audio name)
    <audio src="./music.mp3" controls></audio>
Copy the code
    • Open the file in your browser and you’ll see an audio control button that can play, pause, fast-forward, rewind and adjust the volume.
  • Insert the video
    • Prepare a video file (preferably in MP4 format, let’s say video-.mp4) in the same directory as the page created in the previous section
    • Open the file with a text editor and add the following line (Note that the name of the video referenced in <video SRC ="./video.mp4" controls></video> should be the same as the actual video name)
    <video src="./video.mp4" controls></video>
Copy the code
    • Open the file in your browser, and you’ll see a video playing window on the page. Click to play the video in full screen, play it, pause it, fast-forward it, rewind it, and adjust the volume.
  • In addition, we usually see the page can jump back and forth, this is also very good implementation. Let’s say we want to add a hyperlink to the page that will take us to Baidu. We just need to add the following sentence (The href="https://www.baidu.com" is the address to jump to)
<a href="https://www.baidu.com"</a>Copy the code

  • At this point we can click to jump to Baidu
  • Another interesting feature is the automatic refresh of the page. When we buy train tickets during the Spring Festival, we will certainly encounter the situation that we cannot buy tickets. After knowing this function, we will not have to worry about buying train tickets in the future (slightly exaggerated). Just add the following statement to our code:content="2"Page refresh every 2 seconds
<meta http-equiv="refresh" content="2">
Copy the code

Here you are not feeling that writing a page is not only easy but also very fun.

  • The above code
I am also a page <img SRC ="./1.jpg">
<audio src="./music.mp3" controls></audio>
<video src="./video.mp4" controls></video>
<a href="https://www.baidu.com"<meta http-equiv= <meta http-equiv="refresh" content="2">
Copy the code
  • Do you feel that this is messy, this is still very few tags, if the entire page is written this way, it will not be all in a pile. In order to manage our code well, we also split the page structure into head and body like a person, and the entire page is HTML, so it has the following structure
<html>
<head>
</head>
<body>
</body>
</html>
Copy the code

The head tag puts things that are not very relevant to the content of the page, while the body tag usually puts things that the page needs to show, like the images, audio and video we just wrote. You can use the meta tag in head to solve the problem. Add the following code to head:

<meta charset="UTF-8">
Copy the code

If there are any garbled characters, save this file and change the encoding to UTF-8.

<title> This is the title </title>Copy the code

As you can see, we’ve changed the title now.

  • The complete code
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="refresh" content="2"> <title> This is the title </title> </head> <body> I am also a page <img SRC ="./1.jpg">
	<audio src="./music.mp3" controls></audio>
	<video src="./video.mp4" controls></video>
	<a href="https://www.baidu.com"</a> </body> </ HTML >Copy the code

In fact, there are a lot of fun tags that can achieve a variety of different effects, such as tables, lists, forms, etc., I will not give you a list here. We can review and learn in detail through relevant HTML videos and W3school.