HTML基础多种技术的练手页面（详细步骤）

步骤）"/>

HTML基础多种技术的练手页面（详细步骤）

文章目录

• 前言
• 一、需要的素材
• 二、实现步骤
• • 1.实现头部设计
  • 2.设置导航栏
  • 3.设置内容部分
  • 4.设置问答部分
  • 5.其他部分
• 总结

前言

今天又来水文章了，来介绍的是一个简单的HTML页面，虽然简单，但是麻雀虽小五脏俱全，应用了大量HTML技术来实现，下面展示下效果，不喜勿喷，如果看了底下的效果，感觉心动可以继续往下看下去。

这里有一个动态标签变化效果
这里有个布局效果和隐藏展示效果。


底下是对以上技术的再一次实现

这里利用JavaScript做了一个问答效果

最后补充板块，实现内连接，实现点击跳转，如果有兴趣我将接着往下讲，更多的是个人的思路以及理解，欢迎批评指正，不喜勿喷哦。

一、需要的素材

有些可能没用上，在这里都放着

二、实现步骤

1.实现头部设计

如何实现头部设计呢，很简单

首先找到一张Gif的动图，该动图背景色尽量设置为透明，便于和整体网页背景色起不到冲突，然后设计网站标题
代码如下：

<header><img src="img/2.gif" alt="图片跑路了" width="100" height="100"><strong style="font-size: 35px;color: indianred;">冬奥宣传网</strong></header>

这就能实现上述的效果了

2.设置导航栏

可以看到导航栏分为四个部分，而且居中这将通过css来实现，下面开始展示
代码如下（css部分）：

nav{display: block;width: 100%;float: left;text-align: center;background-color: none;padding-top: 10px;padding-bottom: 20px;}nav a{margin:10px auto;padding:30px;font-weight: bold;color:#3399FF;text-decoration:none; margin:10px;transition: all 2s ease;}nav a:hover {color:#FFFFFF;background-color: orange;text-decoration:none;font-size: 35px;}

	<nav><a href="#ch01">冬奥由来</a><a href="#ch02">精彩瞬间</a><a href="#ch03">冬奥问答</a><a href="#ch04" style="color: red;">中国冬奥</a></nav>

这样就能做到动画效果和实际的内标签效果了

3.设置内容部分

	<hr style="border: 3px dashed cornflowerblue"><setion><h2><a name="ch01"><span style="color:green;font-size: 25px;">冬奥由来:</span></a></h2><article><header><h3 align="center" style="font-size: 25px;color:green;" >冬奥的由来</h3>				</header><div id="jieshao"><div id="img11"><img src="img/jieshao.jpg" alt="图片不见了 width="150" height="255"></div> <p style="color:crimson ;"> 冬季奥林匹克运动会源于19世纪末和20世纪初，一些冰雪运动如滑雪、滑雪撬、滑冰、冰球等项目在欧美国家逐渐得到普及和发展。1887年挪威成立了世界上第一个滑雪俱乐部。1890年加拿大成立了世界上第一个冰球协会。1892年国际滑冰联盟在荷兰成立。1893年，在阿姆斯特丹举行了首届男子速度滑冰锦标赛。1908年，法国成立了世界范围的国际冰球联合会。在冰雪运动日益普及的情况下，现代奥运会创始人<span style="color: yellow;">顾拜旦</span>建议单独举办冬季奥运会。但由于1901年北欧两项运动在欧洲斯堪的纳维亚半岛的成功举行而被拖延。1908年第4届夏季奥运会上增加了花样滑冰项目。1920年第7届夏季奥运会上，国际奥委会拒绝接受北欧两项项目，而增加了冰球项目。花样滑冰和冰球加入奥运会后引起了观众的极大兴趣，但因天气条件给组织者带来诸多不便，尽管这两个项目都提前在 4月份进行，但大多数比赛和奥运会的开幕式在8月中旬才举行。这使得一届奥运会要长达5个月的时间，在人力、物力上耗费太大。鉴于此，人们倾向于把冰雪项目从奥运会中分离出来，单独进行冰雪项目的奥运会。正式的冬季奥林匹克运动会始于1924年。当时，在法国的夏蒙尼市承办了当时被称为“冬季运动周”的运动会，两年后国际奥委会正式将其更名为第1届冬季奥林匹克运动会。冬季奥运会最初规定每4年举行一次，与夏季奥运会在同年和同一国家举行。从1928年的第2届冬奥会开始，冬季奥运会与夏季奥运会的举办地点改在不同的国家举行。1994年起，冬奥会与夏奥会以2年为相隔交叉举行。为将冬奥会与夏奥会时间错开，故只有1992年冬奥会与1994年冬奥会相隔2年。</p></div></article><article><details style="color: cornflowerblue;"><summary><span style="color: cornflowerblue; font-size: 20px;">想看更多点击这里哦</summary><div id="jieshao"><div id="img11"><img src="img/2.jpg" alt="图片不见了width="150"height="255"></div> <p>冬季奥林匹克运动会，简称为冬季奥运会、冬奥会。国际奥林匹克委员会主办的世界性冬季项目运动会。冬季奥运会每隔4年举行一届，并与奥林匹克运动会在同一年内举行。1994年起，冬奥会与夏奥会以2年为相隔交叉举行。按实际举行次数计算届数。该赛事的主要特征是在冰上和雪地举行的冬季运动，如滑冰、滑雪等适合在冬季举行的项目。第一届冬季奥林匹克运动会于1924年在法国的夏慕尼举行。1986年，国际奥委会全会决定将冬季奥运会和夏季奥运会从1994年起分开每两年间隔举行，1992年冬季奥运会是最後一届与夏季奥运会同年举行的冬奥会。1908年第四届和1920年第七届奥运会，曾将花样滑冰、冰球列为比赛项目。1924年第八届奥运会前，在法国的夏蒙尼举行国际体育周，并进行冬季运动项目比赛。1925年国际奥委会布拉格会议决定每4年举行1次这类运动会，并将夏蒙尼国际体育周作为第一届冬季奥运会。冬季奥运会的比赛项目目前有：<span style="color: gold;">冰球、滑冰（速度滑冰、花样滑冰）、滑雪（高山滑雪、越野滑雪、跳台滑雪）、现代冬季两项（滑雪＋射击）、有舵雪橇和无舵雪橇。2002年美国盐湖城冬奥会中，我国短道速滑选手(大杨扬)为中国实现了中国冬奥会金牌零的突破。</span></p></div></details></setion>

有个细节就是summary标签实现了内容显示和隐藏

 #jieshao {width: 1000px;height: 450px;}#img11 {float:left;margin: 10px;}p{font-weight: bold;font-size: 20px;padding: 5px;color:#1E90FF;}

同时设置选择器确保格式的合理化，如此同样道理完成剩下的部分。

4.设置问答部分

问答部分采用JavaScript来实现，来实现对页面的展示。

<script language="JavaScript">function  check(theForm){if(theForm.qy.value=="1"){alert("答错了，小提示城市有两个哦");		}else {alert("恭喜你答对了");}}function  checkone(theForm){if(theForm.qy.value=="1"){alert("答错了，小提示快去问问爸爸妈妈");		}else {alert("恭喜你答对了");}}function  checktwo(theForm){if(theForm.qy.value=="1"){alert("恭喜你答对了");		}else {alert("答错了，小提示快去问问爸爸妈妈");}}</script>

代码部分如下：

<section><h2><a name="ch03"><span style="color: green;">冬奥问答:</span></a></h2><form id="xh"  method="post"   onclick="check(this)"><tr><td><span style="font-size: 20px; color：cyan">1、2022年冬季奥林匹克运动会将在_____ (城市) 举行?</span></td>	<td><input type="radio" name="qy" value="1" checked="checked" ><span style="font-size: 20px;color: mediumvioletred;">北京</span><input type="radio" name="qy" value="3"><span style="font-size: 20px;color: mediumvioletred;">北京和张家口</span></td></tr></form><form id="xh"  method="post"   onclick="checkone(this)"><tr><td><span style="font-size: 20px; color：cyan">2、2022 年冬奥会是第___届?</span></td>	<td><input type="radio" name="qy" value="1" checked="checked" ><span style="font-size: 20px;color: mediumvioletred;">22</span><input type="radio" name="qy" value="3"><span style="font-size: 20px;color: mediumvioletred;">24</span></td></tr></form><form id="xh"  method="post"   onclick="checktwo(this)"><tr><td><span style="font-size: 20px; color：cyan">3、___是奥运会历史 上第一-个举办过夏季奥运会和冬季奥运会的城市?</span></td>	<td><input type="radio" name="qy" value="1" checked="checked" ><span style="font-size: 20px;color: mediumvioletred;">北京</span><input type="radio" name="qy" value="3"><span style="font-size: 20px;color: mediumvioletred;">纽约</span></td></tr></form></section>

5.其他部分

	<setion><h2><a name="ch02"><span style="color: green;">精彩瞬间:</span></a></h2><article><div id="jing"><div id="img11"><img src="img/1.png" alt="图片不见了 width="150" height="255"></div> <p style="color:plum;"> 图片为外国女选手正在奋力冲线，其坚毅的眼神和强大的气势，令我们对运动员肃然起敬。</p></div></article><article><div id="jing"><div id="img11"><img src="img/2.png" alt="图片不见了 width="150" height="255"></div> <p style="color:plum;"> 图片为运动员正在做高难度引体动作，高度甚至和塔台奇高令人叹为观止。</p></div></article><article><details style="color: cornflowerblue;"><summary><span style="color: cornflowerblue; font-size: 20px;">想看更多点击这里哦</summary><article><div id="jing"><div id="img11"><img src="img/3.png" alt="图片不见了 width="150" height="255"></div> <p style="color:plum;"> 在茫茫的白雪中运动员一跃而起，与天地同色，在空中做出优美的姿势，令人折服。</p></div><div id="jing"><div id="img11"><img src="img/7.png" alt="图片不见了 width="150" height="255"></div> <p style="color:plum;"> 赛场上运动健儿奋力拼搏，赛场外观众们摇旗呐喊，冬天似乎在此时此刻不那么冷了。</p></div></article></details></article></div></setion>

样式部分为：

 #jing{width: 1000px;height:300px;}

还有中国冬奥部分内容这里涉及不多只是就是简单排版。

<section><h2><a name="ch04"><span style="color: red;">中国冬奥:</span></a></h2><article><div id="jing"><div id="img11"><img src="img/21.jpeg" alt="图片不见了 width="150" height="255"></div> <p style="color:plum;"> 随着北京2022年冬奥会即将开幕，实力与颜值并存的，中国冬奥健儿们蓄势待发，期待着为国争光！小新挑选了8名中国冬奥选手，手绘出他们的运动造型漫画，更有超酷“便装版”造型，你能认出他们都是谁吗？</p></div></article></section>

是对前面的知识的再次利用（实际上是偷懒）

总结

总体代码为：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>body{background-image: url(img/5.jpg);background-attachment: scroll;background-repeat: repeat-y;margin:10px auto;max-width: 1000px;border: none;}nav{display: block;width: 100%;float: left;text-align: center;background-color: none;padding-top: 10px;padding-bottom: 20px;}nav a{margin:10px auto;padding:30px;font-weight: bold;color:#3399FF;text-decoration:none; margin:10px;transition: all 2s ease;}nav a:hover {color:#FFFFFF;background-color: orange;text-decoration:none;font-size: 35px;}#jieshao {width: 1000px;height: 450px;}#img11 {float:left;margin: 10px;}p{font-weight: bold;font-size: 20px;padding: 5px;color:#1E90FF;}#jing{width: 1000px;height:300px;}</style><script language="JavaScript">function  check(theForm){if(theForm.qy.value=="1"){alert("答错了，小提示城市有两个哦");		}else {alert("恭喜你答对了");}}function  checkone(theForm){if(theForm.qy.value=="1"){alert("答错了，小提示快去问问爸爸妈妈");		}else {alert("恭喜你答对了");}}function  checktwo(theForm){if(theForm.qy.value=="1"){alert("恭喜你答对了");		}else {alert("答错了，小提示快去问问爸爸妈妈");}}</script></head><body><header><img src="img/2.gif" alt="图片跑路了" width="100" height="100"><strong style="font-size: 35px;color: indianred;">冬奥宣传网</strong></header><br><br><nav><a href="#ch01">冬奥由来</a><a href="#ch02">精彩瞬间</a><a href="#ch03">冬奥问答</a><a href="#ch04" style="color: red;">中国冬奥</a></nav><hr style="border: 3px dashed cornflowerblue"><setion><h2><a name="ch01"><span style="color:green;font-size: 25px;">冬奥由来:</span></a></h2><article><header><h3 align="center" style="font-size: 25px;color:green;" >冬奥的由来</h3>				</header><div id="jieshao"><div id="img11"><img src="img/jieshao.jpg" alt="图片不见了 width="150" height="255"></div> <p style="color:crimson ;"> 冬季奥林匹克运动会源于19世纪末和20世纪初，一些冰雪运动如滑雪、滑雪撬、滑冰、冰球等项目在欧美国家逐渐得到普及和发展。1887年挪威成立了世界上第一个滑雪俱乐部。1890年加拿大成立了世界上第一个冰球协会。1892年国际滑冰联盟在荷兰成立。1893年，在阿姆斯特丹举行了首届男子速度滑冰锦标赛。1908年，法国成立了世界范围的国际冰球联合会。在冰雪运动日益普及的情况下，现代奥运会创始人<span style="color: yellow;">顾拜旦</span>建议单独举办冬季奥运会。但由于1901年北欧两项运动在欧洲斯堪的纳维亚半岛的成功举行而被拖延。1908年第4届夏季奥运会上增加了花样滑冰项目。1920年第7届夏季奥运会上，国际奥委会拒绝接受北欧两项项目，而增加了冰球项目。花样滑冰和冰球加入奥运会后引起了观众的极大兴趣，但因天气条件给组织者带来诸多不便，尽管这两个项目都提前在 4月份进行，但大多数比赛和奥运会的开幕式在8月中旬才举行。这使得一届奥运会要长达5个月的时间，在人力、物力上耗费太大。鉴于此，人们倾向于把冰雪项目从奥运会中分离出来，单独进行冰雪项目的奥运会。正式的冬季奥林匹克运动会始于1924年。当时，在法国的夏蒙尼市承办了当时被称为“冬季运动周”的运动会，两年后国际奥委会正式将其更名为第1届冬季奥林匹克运动会。冬季奥运会最初规定每4年举行一次，与夏季奥运会在同年和同一国家举行。从1928年的第2届冬奥会开始，冬季奥运会与夏季奥运会的举办地点改在不同的国家举行。1994年起，冬奥会与夏奥会以2年为相隔交叉举行。为将冬奥会与夏奥会时间错开，故只有1992年冬奥会与1994年冬奥会相隔2年。</p></div></article><article><details style="color: cornflowerblue;"><summary><span style="color: cornflowerblue; font-size: 20px;">想看更多点击这里哦</summary><div id="jieshao"><div id="img11"><img src="img/2.jpg" alt="图片不见了width="150"height="255"></div> <p>冬季奥林匹克运动会，简称为冬季奥运会、冬奥会。国际奥林匹克委员会主办的世界性冬季项目运动会。冬季奥运会每隔4年举行一届，并与奥林匹克运动会在同一年内举行。1994年起，冬奥会与夏奥会以2年为相隔交叉举行。按实际举行次数计算届数。该赛事的主要特征是在冰上和雪地举行的冬季运动，如滑冰、滑雪等适合在冬季举行的项目。第一届冬季奥林匹克运动会于1924年在法国的夏慕尼举行。1986年，国际奥委会全会决定将冬季奥运会和夏季奥运会从1994年起分开每两年间隔举行，1992年冬季奥运会是最後一届与夏季奥运会同年举行的冬奥会。1908年第四届和1920年第七届奥运会，曾将花样滑冰、冰球列为比赛项目。1924年第八届奥运会前，在法国的夏蒙尼举行国际体育周，并进行冬季运动项目比赛。1925年国际奥委会布拉格会议决定每4年举行1次这类运动会，并将夏蒙尼国际体育周作为第一届冬季奥运会。冬季奥运会的比赛项目目前有：<span style="color: gold;">冰球、滑冰（速度滑冰、花样滑冰）、滑雪（高山滑雪、越野滑雪、跳台滑雪）、现代冬季两项（滑雪＋射击）、有舵雪橇和无舵雪橇。2002年美国盐湖城冬奥会中，我国短道速滑选手(大杨扬)为中国实现了中国冬奥会金牌零的突破。</span></p></div></details></setion><setion><h2><a name="ch02"><span style="color: green;">精彩瞬间:</span></a></h2><article><div id="jing"><div id="img11"><img src="img/1.png" alt="图片不见了 width="150" height="255"></div> <p style="color:plum;"> 图片为外国女选手正在奋力冲线，其坚毅的眼神和强大的气势，令我们对运动员肃然起敬。</p></div></article><article><div id="jing"><div id="img11"><img src="img/2.png" alt="图片不见了 width="150" height="255"></div> <p style="color:plum;"> 图片为运动员正在做高难度引体动作，高度甚至和塔台奇高令人叹为观止。</p></div></article><article><details style="color: cornflowerblue;"><summary><span style="color: cornflowerblue; font-size: 20px;">想看更多点击这里哦</summary><article><div id="jing"><div id="img11"><img src="img/3.png" alt="图片不见了 width="150" height="255"></div> <p style="color:plum;"> 在茫茫的白雪中运动员一跃而起，与天地同色，在空中做出优美的姿势，令人折服。</p></div><div id="jing"><div id="img11"><img src="img/7.png" alt="图片不见了 width="150" height="255"></div> <p style="color:plum;"> 赛场上运动健儿奋力拼搏，赛场外观众们摇旗呐喊，冬天似乎在此时此刻不那么冷了。</p></div></article></details></article></div></setion><section><h2><a name="ch03"><span style="color: green;">冬奥问答:</span></a></h2><form id="xh"  method="post"   onclick="check(this)"><tr><td><span style="font-size: 20px; color：cyan">1、2022年冬季奥林匹克运动会将在_____ (城市) 举行?</span></td>	<td><input type="radio" name="qy" value="1" checked="checked" ><span style="font-size: 20px;color: mediumvioletred;">北京</span><input type="radio" name="qy" value="3"><span style="font-size: 20px;color: mediumvioletred;">北京和张家口</span></td></tr></form><form id="xh"  method="post"   onclick="checkone(this)"><tr><td><span style="font-size: 20px; color：cyan">2、2022 年冬奥会是第___届?</span></td>	<td><input type="radio" name="qy" value="1" checked="checked" ><span style="font-size: 20px;color: mediumvioletred;">22</span><input type="radio" name="qy" value="3"><span style="font-size: 20px;color: mediumvioletred;">24</span></td></tr></form><form id="xh"  method="post"   onclick="checktwo(this)"><tr><td><span style="font-size: 20px; color：cyan">3、___是奥运会历史 上第一-个举办过夏季奥运会和冬季奥运会的城市?</span></td>	<td><input type="radio" name="qy" value="1" checked="checked" ><span style="font-size: 20px;color: mediumvioletred;">北京</span><input type="radio" name="qy" value="3"><span style="font-size: 20px;color: mediumvioletred;">纽约</span></td></tr></form></section><section><h2><a name="ch04"><span style="color: red;">中国冬奥:</span></a></h2><article><div id="jing"><div id="img11"><img src="img/21.jpeg" alt="图片不见了 width="150" height="255"></div> <p style="color:plum;"> 随着北京2022年冬奥会即将开幕，实力与颜值并存的，中国冬奥健儿们蓄势待发，期待着为国争光！小新挑选了8名中国冬奥选手，手绘出他们的运动造型漫画，更有超酷“便装版”造型，你能认出他们都是谁吗？</p></div></article></section></body>
</html>

这就是完整的一个应用了基础各种知识的应用页面。