HTML：学校网站练习

最新推荐文章于 2026-08-17 20:32:28 发布

原创最新推荐文章于 2026-08-17 20:32:28 发布 · 390 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

1、最终成果演示

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <center>
        <header>
            <h1 align="center">广东云浮中医药职业学院</h1>
            <b align="center">欢迎来到：<ins>计算机学院</ins></b>
        </header>
    </center>
    <hr>
    <nav>
        <ul>
            <li><a href="http://open.mh.gdyfvccm.edu.cn:8008/auth/oauth/authorize?client_id=c03b9f9d-cb04-43d5-913d-e7b58bb16435&response_type=token">首页</a></li>
            <li><a href="http://open.mh.gdyfvccm.edu.cn:8008/auth/oauth/authorize?client_id=c03b9f9d-cb04-43d5-913d-e7b58bb16435&response_type=token">关于我们</a></li>
            <li><a href="http://open.mh.gdyfvccm.edu.cn:8008/auth/oauth/authorize?client_id=c03b9f9d-cb04-43d5-913d-e7b58bb16435&response_type=token">学生风采</a></li>
            <li><a href="http://open.mh.gdyfvccm.edu.cn:8008/auth/oauth/authorize?client_id=c03b9f9d-cb04-43d5-913d-e7b58bb16435&response_type=token">联系方式</a></li>
        </ul>
    </nav>
    <hr>
    <h2>最新文章</h2>
    <h3>文章标题</h3>
    这里是文章的内容简介。<br>
    可以使用。<br>
    标签进行换行。<br><br>
    <img src="https://img.gaoxiaojob.com/uploads/company_logo/20221214093254_16037.png" alt="" height="150"><br>
    想了解广东云浮中医药职业学院：<a href="http://open.mh.gdyfvccm.edu.cn:8008/auth/oauth/authorize?client_id=c03b9f9d-cb04-43d5-913d-e7b58bb16435&response_type=token">点击这里</a>
    <h3>侧边栏</h3>
    侧边栏内容，如快速链接，广告等。<br>
    <table border="1">
        <tr>
            <th>专业</th>
            <th>链接</th>
        </tr>
        <tr>
            <td>计算机应用技术</td>
            <td><a href="http://open.mh.gdyfvccm.edu.cn:8008/auth/oauth/authorize?client_id=c03b9f9d-cb04-43d5-913d-e7b58bb16435&response_type=token">专业A详细</a></td>
        </tr>
        <tr>
            <td>数字媒体技术</td>
            <td><a href="http://open.mh.gdyfvccm.edu.cn:8008/auth/oauth/authorize?client_id=c03b9f9d-cb04-43d5-913d-e7b58bb16435&response_type=token">专业B详细</a></td>
        </tr>
    </table>
    <h3>联系我们</h3>
    姓名：<input type="text"><br>
    邮箱：<input type="text"><br>
    <input type="submit"><hr>
    <footer>版权所有©2024广东云浮中医药职业学院计算机学院</footer>
</body>
</html>

2、拆解讲述

一、新增标签讲述

<header>元素是HTML5中的一种具有引导和导航作用的结构元素，该元素可以包含所有通常放在页面头部的内容。

<nav>元素用于定义导航链接,是HTML5新增的元素，该元素可以将具有导航性质的链接归纳在一个区域中,使页面元素的语义更加明确。一般用于常见的首页、上一页和下一页。

<footer> 元素用来定义 section或document的页脚,通常该标签包含网站的版权、创作者的姓名、文档的创作日期及联系信息。

二、内容拆解展示

（一）头部名称

运用<header>元素，将作为题目的内容涵括在内

<center>
  <header>
    <h1 align="center">广东云浮中医药职业学院</h1>
    <b align="center">欢迎来到：<ins>计算机学院</ins></b>
  </header>
</center>

效果图：

（二）列表链接

接下来将列表都放在<nav>元素中，作为首页的内容

<nav>
    <ul>
        <li><a href="http://open.mh.gdyfvccm.edu.cn:8008/auth/oauth/authorize?client_id=c03b9f9d-cb04-43d5-913d-e7b58bb16435&response_type=token">首页</a></li>
        <li><a href="http://open.mh.gdyfvccm.edu.cn:8008/auth/oauth/authorize?client_id=c03b9f9d-cb04-43d5-913d-e7b58bb16435&response_type=token">关于我们</a></li>
        <li><a href="http://open.mh.gdyfvccm.edu.cn:8008/auth/oauth/authorize?client_id=c03b9f9d-cb04-43d5-913d-e7b58bb16435&response_type=token">学生风采</a></li>
        <li><a href="http://open.mh.gdyfvccm.edu.cn:8008/auth/oauth/authorize?client_id=c03b9f9d-cb04-43d5-913d-e7b58bb16435&response_type=token">联系方式</a></li>
    </ul>
</nav>

效果图：

（三）文本、表格链接与联系方式

文本无需多言、表格链接只需将链接插入表格内容之中、联系方式需要用到表单之中的text（文本）与submit（提交）

<h2>最新文章</h2>
<h3>文章标题</h3>
这里是文章的内容简介。<br>
可以使用。<br>
标签进行换行。<br><br>
<img src="https://img.gaoxiaojob.com/uploads/company_logo/20221214093254_16037.png" alt="" height="150"><br>
想了解广东云浮中医药职业学院：<a href="http://open.mh.gdyfvccm.edu.cn:8008/auth/oauth/authorize?client_id=c03b9f9d-cb04-43d5-913d-e7b58bb16435&response_type=token">点击这里</a>
<h3>侧边栏</h3>
侧边栏内容，如快速链接，广告等。<br>
<table border="1">
    <tr>
        <th>专业</th>
        <th>链接</th>
    </tr>
    <tr>
        <td>计算机应用技术</td>
        <td><a href="http://open.mh.gdyfvccm.edu.cn:8008/auth/oauth/authorize?client_id=c03b9f9d-cb04-43d5-913d-e7b58bb16435&response_type=token">专业A详细</a></td>
    </tr>
    <tr>
        <td>数字媒体技术</td>
        <td><a href="http://open.mh.gdyfvccm.edu.cn:8008/auth/oauth/authorize?client_id=c03b9f9d-cb04-43d5-913d-e7b58bb16435&response_type=token">专业B详细</a></td>
    </tr>
</table>
<h3>联系我们</h3>
姓名：<input type="text"><br>
邮箱：<input type="text"><br>
<input type="submit">

效果图：

（四）版权归属

使用<footer>标签包含注明版权的内容

<footer>版权所有©2024广东云浮中医药职业学院计算机学院</footer>

效果图：

标签

#html #前端