[Html5学习笔记]HTML5拓展练习_第1期
文章简介
排版与发布：上杉九月
前言
前排提醒，本文章需要一定的Html基础，所以不推荐小白查看。
暂不归入零基础分类。
范例1
题目要求
•建立一个资料页面•建立一个css样式文件•此网页中有五种以上的[动物讯息]和[植物讯息]•所有动物数据与植物数据在同一个网页，各自以一个表格方式呈现
CSS样式
•字型为40px•字型颜色为咖啡色•背景颜色为粉红色
Html5代码
<!DOCTYPE html>
<html>
<head>
<title>范例1</title>
<meta charset="UTF-8">
<link href="myData.css" rel="stylesheet">
</head>
<body>
<table border="1">
<!--标题栏-->
<tr>
<th colspan="6">动物讯息</th>
</tr>
<!--动物名称-->
<tr>
<th>大熊猫</th>
<th>西伯利亚平原狼</th>
<th>树袋熊</th>
<th>袋鼠</th>
<th>美洲豹</th>
</tr>
<!--动物介绍-->
<tr>
<td>大熊猫（学名：Ailuropoda melanoleuca）：属于食肉目、熊科、大熊猫亚科和大熊猫属唯一的哺乳动物，头躯长1.2-1.8米，尾长10-12厘米。</td>
<td>西伯利亚平原狼（学名：Canis lupus campestris）：是灰狼的一个亚种，属于食物链中上层的掠食者，是西伯利亚雪橇犬“哈士奇”（hasky）的祖先。</td>
<td>树袋熊，又称考拉，是澳大利亚的国宝，也是澳大利亚奇特的珍贵原始树栖动物。英文名Koala bear来源于古代土著文字，意思是“no drink”。因为树袋熊从他们取食的桉树叶中获得所需的90%的水分，只在生病和干旱的时候喝水，当地人称它“克瓦勒”，意思也是“不喝水”。</td>
<td>袋鼠是任一种属于袋鼠目的有袋动物 ，主要分布于澳大利亚大陆和巴布亚新几内亚的部分地区。其中，有些种类为澳大利亚独有。不同种类的袋鼠在澳大利亚各种不同的自然环境中生活，从凉性气候的雨林和沙漠平原到热带地区。袋鼠是跳得最高最远的哺乳动物。</td>
<td>美洲豹，学名：Panthera onca (Linnaeus, 1758)，又叫美洲虎，是现存第三大的猫科动物。体重70—180千克，咬力可达1250磅。是生活在中南美洲的一种大型猫科动物。</td>
</tr>
</table>
<br>
<table border="1">
<!--标题栏-->
<tr>
<th colspan="6">植物讯息</th>
</tr>
<!--植物名称-->
<tr>
<th>玉兰花</th>
<th>迎春花</th>
<th>山竹子</th>
<th>山丹花</th>
<th>蓝盆花</th>
</tr>
<!--植物介绍-->
<tr>
<td>形态特征：落叶乔木，一般高4-6M，高者可达25M。单叶互生，叶片倒卵形，全缘。花先叶开放，直立，钟状，芳香，花大，碧白色，有时基部带红晕。聚合果圆柱形，红色。种子心脏形，黑色。花期3-4月份，9月份果熟。</td>
<td>形态特征：落叶灌木，株高0.3-5m，枝细长，拱曲弯垂，幼枝绿色，四棱形，叶对生，三小叶复叶，小叶卵形至椭圆形，长1-3cm，端急尖，边缘具短睫毛。花单生，先叶开放，有叶状狭窄的绿色苞片，有清香，花冠黄色，裂片6片，倒卵形或椭圆形，约为花冠筒长度的1/2。高脚碟状，径2-2.5cm。花期2-4月。</td>
<td>形态特征：山竹子高10-20m。树皮黑褐色，有黄色苦味的树脂液。枝条对生，小枝粗壮、方形。单叶对生，椭圆形或长椭圆形，长11-21cm，宽4.5-10cm，革质，叶柄短，叶基钝，叶尖急尖，全缘，叶脉明显，单花顶生，盛开时直径5-6.2cm；栽培种只有雌花稀有雄花，具单性结实能力。</td>
<td>形态特征：地下具卵球形鳞茎，有少数白色肉质鳞片。茎直立，高30─60厘米，无毛。叶线状至线状披针形，边缘和背面脉上有乳突。无珠芽。花一至数朵，生于茎端和叶腋内，直立，夏初开花；花被片六枚，两轮，披针形或长椭圆形；朱红色或橘红色，内面有紫褐色斑点，开放后开展，但不向外反卷或稍反卷。</td>
<td>形态特征：高30 ～50厘米，叶片披针形，边缘齿状。花序头状，花玫红色。花期4～5月。产地分布：北京、河北、山西、陕西、内蒙古、东北、甘肃、宁夏等省区。生长习性：喜光线良好、通风的环境。</td>
</tr>
</table>
</body>
</html>
CSS代码
body{
background-color: pink;
font-size: 40px;
color: #603811;
}
界面展示
范例2
题目要求
•网页最上方增加切换页面的导航列•导航列一共可切换三个不同的页面•各个网页需要建立一个css样式文件•各个网页需要建立一个JavaScript文件
Html5代码
Main.html
<!DOCTYPE html>
<html>
<head>
<title>范例2</title>
<meta charset="UTF-8">
<link href="myNavigation.css" rel="stylesheet">
<script type="text/javascript" src="navigation.js"></script>
</head>
<body>
<div>
<ul id="Menu">
<li><a class="active" href="mainNav.html">mainNav</a></li>
<li><a href="student.html">student</a></li>
<li><a href="aboutUs.html">aboutUs</a></li>
</ul>
<ul id="Button">
<div id="button" onclick="myFunction()">Click</div>
</ul>
</div>
</body>
</html>
About.html
<!DOCTYPE html>
<html>
<head>
<title>aboutUs</title>
<meta charset="UTF-8">
<link href="myAboutUs.css" rel="stylesheet">
<script type="text/javascript" src="aboutus.js"></script>
</head>
<body>
<div>
<ul id="Menu">
<li><a class="active" href="mainNav.html">mainNav</a></li>
<li><a href="student.html">student</a></li>
<li><a href="aboutUs.html">aboutUs</a></li>
</ul>
<ul id="Button">
<div id="button" onclick="myFunction()">Click</div>
</ul>
</div>
</body>
</html>
Student.html
<!DOCTYPE html>
<html>
<head>
<title>Student</title>
<meta charset="UTF-8">
<link href="myStudent.css" rel="stylesheet">
<script type="text/javascript" src="student.js"></script>
</head>
<body>
<div>
<ul id="Menu">
<li><a class="active" href="mainNav.html">mainNav</a></li>
<li><a href="student.html">student</a></li>
<li><a href="aboutUs.html">aboutUs</a></li>
</ul>
<ul id="Button">
<div id="button" onclick="myFunction()">Click</div>
</ul>
</div>
</body>
</html>
CSS代码（三份html使用同一份css样式）
#Menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
#Button {
text-align: center;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
JavaScript代码（三份html使用同一份js代码，显示信息稍作修改）
function myFunction()
{
document.getElementById("button").innerHTML = "首页"
}
界面展示
范例3
题目要求
•切换页面导航列 + json资料页•导航列共可切换三个不同的页面•各个网页需要建立一个css样式文件•建立一个JavaScript程序文件•各个网页需要建立一个json资料文件
Html5代码
Main.html
<!DOCTYPE html>
<html>
<head>
<title>范例3</title>
<meta charset="UTF-8">
<script type="text/javascript" src="json.js"></script>
<link href="myNavigation.css" rel="stylesheet">
<link href="navigation.json">
</head>
<body>
<div>
<ul id="Menu">
<li><a class="active" href="mainJson.html">main</a></li>
<li><a href="studentJson.html">student</a></li>
<li><a href="aboutJson.html">about</a></li>
</ul>
<ul id="Button">
<div id="button" onclick="myFunction()">About Us</div>
</ul>
</div>
<div>
<h1>首页</h1>
<div id="music"><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=447303772&auto=0&height=66"></iframe></div>
<div id="title_pictures"><img src="https://gitee.com/sakurasep/pictures/raw/master/Snipaste_2021-03-26_09-10-52.jpg" width="1440" height="720"></div>
<h1>Ven_殃雾的视频</h1>
<div id="video"><iframe src="https://player.bilibili.com/player.html?aid=247080603&bvid=BV1Fv411a72p&cid=310127366&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="1440" height="720"> </iframe></div>
</div>
<table>
<tr>
<td>
<p><span id="Name0"></span></p>
</td>
<td>
<p><span id="title0"></span></p>
</td>
<td>
<p><span id="Url0"></span></p>
</td>
</tr>
<tr>
<td>
<p><span id="Name1"></span></p>
</td>
<td>
<p><span id="title1"></span></p>
</td>
<td>
<p><span id="Url1"></span></p>
</td>
</tr>
<tr>
<td>
<p><span id="Name2"></span></p>
</td>
<td>
<p><span id="title2"></span></p>
</td>
<td>
<p><span id="Url2"></span></p>
</td>
</tr>
<tr>
<td>
<p><span id="Name3"></span></p>
</td>
<td>
<p><span id="title3"></span></p>
</td>
<td>
<p><span id="Url3"></span></p>
</td>
</tr>
</table>
<script type="text/javascript" src="navigation.json"></script>
</body>
</html>
About.html
<!DOCTYPE html>
<html>
<head>
<title>关于我们</title>
<meta charset="UTF-8">
<script type="text/javascript" src="json.js"></script>
<link href="myAboutUs.css" rel="stylesheet">
<link href="aboutus.json">
</head>
<body>
<div>
<ul id="Menu">
<li><a class="active" href="mainJson.html">main</a></li>
<li><a href="studentJson.html">student</a></li>
<li><a href="aboutJson.html">about</a></li>
</ul>
<ul id="Button">
<div id="button" onclick="myFunction()">About Us</div>
</ul>
</div>
<div>
<h1>关于 Sakura Team（ST）</h1>
<div id="music"><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=447303772&auto=0&height=66"></iframe></div>
<div id="title_pictures"><img src="https://gitee.com/sakurasep/pictures/raw/master/Snipaste_2021-03-26_09-09-24.jpg" width="1440" height="720"></div>
</div>
<table>
<tr>
<td>
<p><span id="Name0"></span></p>
</td>
<td>
<p><span id="Subject0"></span></p>
</td>
<td>
<p><span id="Url0"></span></p>
</td>
</tr>
<tr>
<td>
<p><span id="Name1"></span></p>
</td>
<td>
<p><span id="Subject1"></span></p>
</td>
<td>
<p><span id="Url1"></span></p>
</td>
</tr>
<tr>
<td>
<p><span id="Name2"></span></p>
</td>
<td>
<p><span id="Subject2"></span></p>
</td>
<td>
<p><span id="Url2"></span></p>
</td>
</tr>
<tr>
<td>
<p><span id="Name3"></span></p>
</td>
<td>
<p><span id="Subject3"></span></p>
</td>
<td>
<p><span id="Url3"></span></p>
</td>
</tr>
<tr>
<td>
<p><span id="Name4"></span></p>
</td>
<td>
<p><span id="Subject4"></span></p>
</td>
<td>
<p><span id="Url4"></span></p>
</td>
</tr>
</table>
<script type="text/javascript" src="aboutus.json"></script>
</body>
</html>
Student.html
<!DOCTYPE html>
<html>
<head>
<title>成员资料</title>
<meta charset="UTF-8">
<script type="text/javascript" src="json.js"></script>
<link href="myStudent.css" rel="stylesheet">
<link href="student.json">
</head>
<body>
<div>
<ul id="Menu">
<li><a class="active" href="mainJson.html">main</a></li>
<li><a href="studentJson.html">student</a></li>
<li><a href="aboutJson.html">about</a></li>
</ul>
<ul id="Button">
<div id="button" onclick="myFunction()">About Us</div>
</ul>
</div>
<div>
<h1>关于 Sakura Team（ST）的成员</h1>
<div id="music"><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=445546970&auto=0&height=66"></iframe></div>
<div id="title_pictures"><img src="https://gitee.com/sakurasep/pictures/raw/master/Snipaste_2021-03-26_09-14-34.jpg" width="1440" height="720"></div>
</div>
<table>
<tr>
<td>
<p><span id="Name0"></span></p>
</td>
<td>
<p><span id="Age0"></span></p>
</td>
<td>
<p><span id="Major0"></span></p>
</td>
</tr>
<tr>
<td>
<p><span id="Name1"></span></p>
</td>
<td>
<p><span id="Age1"></span></p>
</td>
<td>
<p><span id="Major1"></span></p>
</td>
</tr>
<tr>
<td>
<p><span id="Name2"></span></p>
</td>
<td>
<p><span id="Age2"></span></p>
</td>
<td>
<p><span id="Major2"></span></p>
</td>
</tr>
<tr>
<td>
<p><span id="Name3"></span></p>
</td>
<td>
<p><span id="Age3"></span></p>
</td>
<td>
<p><span id="Major3"></span></p>
</td>
</tr>
<tr>
<td>
<p><span id="Name4"></span></p>
</td>
<td>
<p><span id="Age4"></span></p>
</td>
<td>
<p><span id="Major4"></span></p>
</td>
</tr>
</table>
<script type="text/javascript" src="student.json"></script>
</body>
</html>
CSS代码
Main.css
#Menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(34, 139, 180);
}
table,th,tr,td {
text-align: center;
font-size: 20px;
border: 3px solid black;
border-collapse: collapse;
padding: 15px;
background-color: white;
color: black;
margin: auto;
}
body {
background-color: white;
font-size: 20px;
color: black;
padding: 15px;
}
h1,#title_pictures,#Button,#music,#video {
text-align: center;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: rgb(34, 139, 180);
}
About.css
#Menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(34, 139, 180);
}
table,th,tr,td {
text-align: center;
font-size: 20px;
border: 3px solid black;
border-collapse: collapse;
padding: 15px;
background-color: white;
color: black;
margin: auto;
}
body {
background-color: white;
font-size: 20px;
color: black;
padding: 15px;
}
h1,#title_pictures,#Button,#music {
text-align: center;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: rgb(34, 139, 180);
}
Student.css
#Menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(34, 139, 180);
}
table,th,tr,td {
text-align: center;
font-size: 20px;
border: 3px solid black;
border-collapse: collapse;
padding: 15px;
background-color: white;
color: black;
margin: auto;
}
body {
background-color: white;
font-size: 20px;
color: black;
padding: 15px;
}
h1,#title_pictures,#Button,#music {
text-align: center;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: rgb(34, 139, 180);
}
JavaScript代码（三份html使用同一份js代码）
function myFunction()
{
document.getElementById("button").innerHTML = "This is Our Team.Please go to https://sakurasep.club/ to check the details."
}
Json代码
Main.json
var main = [
{"Name":"作者","title":"项目名称","Url":"网址,支持https协议"},
{"Name":"Ven_殃雾","title":"编程风格总结","Url":"sakurasep.fun/posts/14819/"},
{"Name":"风邪","title":"用一场尽头之旅，告别过往","Url":"sakurasep.fun/posts/11484/"},
{"Name":"上杉九月","title":"Chevereto-年轻人的第一个私人图床","Url":"sakurasep.fun/posts/22362/"},
];
document.getElementById("Name0").innerHTML=main[0].Name;
document.getElementById("Name1").innerHTML=main[1].Name;
document.getElementById("Name2").innerHTML=main[2].Name;
document.getElementById("Name3").innerHTML=main[3].Name;
document.getElementById("title0").innerHTML=main[0].title;
document.getElementById("title1").innerHTML=main[1].title;
document.getElementById("title2").innerHTML=main[2].title;
document.getElementById("title3").innerHTML=main[3].title;
document.getElementById("Url0").innerHTML=main[0].Url;
document.getElementById("Url1").innerHTML=main[1].Url;
document.getElementById("Url2").innerHTML=main[2].Url;
document.getElementById("Url3").innerHTML=main[3].Url;
About.json
var subject = [
{"Name":"作者","Subject":"项目名称","Url":"网址,支持https协议"},
{"Name":"上杉九月","Subject":"个人博客","Url":"sakurasep.site"},
{"Name":"上杉九月","Subject":"团队博客","Url":"sakurasep.fun"},
{"Name":"上杉九月","Subject":"宣传网站","Url":"sakurasep.club"},
{"Name":"上杉九月","Subject":"图片站","Url":"sakurasep.top"}
];
document.getElementById("Name0").innerHTML=subject[0].Name;
document.getElementById("Name1").innerHTML=subject[1].Name;
document.getElementById("Name2").innerHTML=subject[2].Name;
document.getElementById("Name3").innerHTML=subject[3].Name;
document.getElementById("Name4").innerHTML=subject[4].Name;
document.getElementById("Subject0").innerHTML=subject[0].Subject;
document.getElementById("Subject1").innerHTML=subject[1].Subject;
document.getElementById("Subject2").innerHTML=subject[2].Subject;
document.getElementById("Subject3").innerHTML=subject[3].Subject;
document.getElementById("Subject4").innerHTML=subject[4].Subject;
document.getElementById("Url0").innerHTML=subject[0].Url;
document.getElementById("Url1").innerHTML=subject[1].Url;
document.getElementById("Url2").innerHTML=subject[2].Url;
document.getElementById("Url3").innerHTML=subject[3].Url;
document.getElementById("Url4").innerHTML=subject[4].Url;
Student.json
var members = [
{"Name":"姓名","Age":"年龄","Major":"专业"},
{"Name":"上杉九月","Age":"18","Major":"软件工程"},
{"Name":"Ven_殃雾","Age":"19","Major":"计算机科学与技术"},
{"Name":"风邪","Age":"18","Major":"地理科学"},
{"Name":"Anti-sacerdos","Age":"18","Major":"计算机科学与技术"}
];
document.getElementById("Name0").innerHTML=members[0].Name;
document.getElementById("Name1").innerHTML=members[1].Name;
document.getElementById("Name2").innerHTML=members[2].Name;
document.getElementById("Name3").innerHTML=members[3].Name;
document.getElementById("Name4").innerHTML=members[4].Name;
document.getElementById("Age0").innerHTML=members[0].Age;
document.getElementById("Age1").innerHTML=members[1].Age;
document.getElementById("Age2").innerHTML=members[2].Age;
document.getElementById("Age3").innerHTML=members[3].Age;
document.getElementById("Age4").innerHTML=members[4].Age;
document.getElementById("Major0").innerHTML=members[0].Major;
document.getElementById("Major1").innerHTML=members[1].Major;
document.getElementById("Major2").innerHTML=members[2].Major;
document.getElementById("Major3").innerHTML=members[3].Major;
document.getElementById("Major4").innerHTML=members[4].Major;
界面展示
写在最后
本次源码分享_密码:4e0a[1]
友情链接
上杉九月的博客[2] 上杉九月的图片站[3] Sakura's Team[4] About Us[5]
References
[1] 本次源码分享_密码:4e0a: https://sakurasep.lanzous.com/il1Jhnbuamb[2] 上杉九月的博客: https://sakurasep.site/[3] 上杉九月的图片站: https://sakurasep.top/[4] Sakura's Team: https://sakurasep.fun/[5] About Us: https://sakurasep.club/