To realize a self introduction page, it is required to use the page's jump, audio, video and other comprehensive attributes.
The code of the main page is: (introduction. HTML)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>self-introduction</title>
<style>
a {
display:inline-block;
margin: 0 60px;
}
li {
list-style: none;
float: left;
}
</style>
</head>
<body background="images/ab.jpg">
<h3 align="center"><font color="blue" size="20">self-introduction</font></h3>
<hr color="red" width='1000'/>
<ul>
<li><a href="one.html">home page</a></li>
<li><a href="two.html">My album </a></li>
<li><a href="two.html">My album </a></li>
<li><a href="three.html">Sophomore,Junior learning plan</a></li>
<li><a href="four.html">my hometown</a></li>
<li><a href="five.html">My story</a></li>
</ul>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<h4 align="center">©2003-2009 xx.com.ALL rights. xxx Limited company[ xICP Bei 05023328]</h4>
</body>
</html>
The results are as follows:
When you click the function of the corresponding module on the home page, you will jump to the corresponding page. Here we use hyperlinks, unordered lists, character entities and other related knowledge. We mainly use hyperlinks in the list, and then clear the style of the list to achieve the effect of parallel typesetting.
The code of the second page is: (one.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body background="images/ab.jpg">
<h3 align='center'><font color='red'>home page</font></h3>
<p>Introduce yourself, omit 10000 words...</p>
<br><br><br><br>
<a href="introduction.html">Back to the home page</a>
</body>
</html>
The results are as follows:
The knowledge of hyperlinks is mainly used here. Add the path of the main page (introduction.html) to the href attribute of < A / >. When you click back to the home page, the page will jump to the main page.
The code of the third page is: (two.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
margin: 0 auto;
}
</style>
</head>
<body background="images/ab.jpg">
<table border='2' text-align='center'>
<caption><h3><font color='red'>Album Collection</font></h3></caption>
<tr>
<td ><img src="images/a.jpg" alt=""></td>
<td colspan="2"><img src="images/b.jpg" alt=""></td>
</tr>
<tr>
<td>
<img src="images/c.jpg" alt="">
</td>
<td><img src="images/d.jpg" alt=""></td>
</tr>
</table>
<br>
<a href="introduction.html">Back to the home page</a>
</body>
</html>
The results are as follows:
Here we mainly use the relevant knowledge of hyperlinks, tables and pictures. First write a table. When the pictures to be used are inserted into the table, you can layout them at will. When you click back to the home page, you can jump to the page, as above.
The code of the fourth page is: (three.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body background="images/ab.jpg">
<h3 align='center'><font color='red'>Learning Planning</font></h3>
<ul>
<li>Sophomore learning plan</li>
<ol>
<li>study hard</li>
<li>study hard</li>
<li>study hard</li>
</ol>
<br><br>
<li>Junior learning plan</li>
<ol>
<li>study hard</li>
<li>study hard</li>
<li>study hard</li>
</ol>
</ul>
<br><br>
<a href="introduction.html">Back to the home page</a>
</body>
</html>
The results are as follows:
Here we use the relevant knowledge of hyperlinks and lists. The layout shown in the figure is realized through the nesting of lists, and the page Jump can be realized.
The code of the fifth page is: (four.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body background="images/ab.jpg">
<h3 align='center'><font color='red'>my hometown</font></h3>
<p> My hometown has beautiful mountains and rivers and outstanding people. No matter who is born and raised in my hometown, or who is living in a local foreigner, or who is a Chinese living abroad, who doesn't have a hard feelings for his hometown. Everyone loves his hometown for more than 100 reasons. Hometown is the cradle of life, recording his life track. When I think of his hometown, I will think From the hometown relatives, think of bringing happiness to yourself.</p>
<video src="../10.16/video/mailang.webm " muted controls autoplay width='100%' height='300px'></video>
<br>
<audio src="music/Dao Lang - Xihai love song.mp3" controls='controls' autoplay='autoplay' muted></audio>
<br><br>
<a href="introduction.html">Back to the home page</a>
</body>
</html>
The results are as follows:
Here we use the knowledge of hyperlinks, pictures and audio tags. Embed the video into the page. Add the control attribute to it through the controls attribute. Note that if you want to realize the automatic playback function, you need to add the muted attribute to the video. Then add the audio file, and add the controls attribute to it, otherwise the playback control will not be displayed.
The code of the sixth page is: (five.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body background="images/ab.jpg">
<h3 align='center'><font color="red">My story</font></h3>
<p> Omit ten thousand words......</p>
<a href="introduction.html">Back to the home page</a>
</body>
</html>
The results are as follows:
This page mainly realizes the function of hyperlink jump. The method is the same as above.
The above is the implementation effect and specific implementation scheme of each sub page. However, in the process of implementation, it is best to layout the page in combination with CSS style to make the page more beautiful.