Web前端：如何设置一个校园简介简易版 #综合练习

白菜头33

于 2024-09-29 22:12:47 发布

阅读量105

点赞数 6

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/2302_80916083/article/details/142644639

版权

效果图如图所示：

运行代码如下：

<body>
    <!-- head标签用于设置页面的页眉 -->
    <head>
        <h2 align="center">****学院</h2>
        <p align="center">欢迎来到****学院</p>
    </head>
<hr>
    <!-- nav标签用于定义导航 -->
    <nav>
        <!-- 无序列表 -->
        <ul type="disc">
            <!-- a标签建立超链接 -->
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">学生风采</a></li>
            <li><a href="#">联系方式</a></li>
        </ul>
    </nav>
<hr>
<!-- main标签用于定义<body>的主体部分 -->
<main>
    <!-- article标签定义文档、页面、应用程序或网站中一体化的内容 -->
    <article>
        <h3>最新文章</h3>
        <p style="font-size: 16px;">文章标题</p>
        <p> 这里是文章的内容简介；<br>
            可以使用<br>
            标签进行换行。
        </p>
        <!-- img标签导入图片：相对路径 -->
        <img src="../2、图像，超链接，书签链接/图片1.jpg" alt="图片无法加载" width="300" height="200"><br>

        <p>想了解****学院：<a href="#">点击这里</a></p>
        <br>
        <!-- section标签用于网站或应用程序中的分块 -->
        <section>
            <p>侧边栏内容，如快速链接、广告等。</p>
        </section>
        <!-- 表格：一定要设置border标签，否则不显示边框 -->
        <table border="2">
            <tr>
                <th>&nbsp;</th>
                <th>专业</th>
                <th>链接</th>
            </tr>
            <tr>
                <td>计算机应用技术</td>
                <td><a href="5、1-4 综合练习.html\专业A详情.html">专业A详情</a></td>
                <td rowspan="3">&nbsp;</td>
            </tr>
            <tr></tr>
                <td>数字媒体技术</td>
                <td><a href="5、1-4 综合练习.html\专业B详情.html">专业B详情</a></td>
            </tr>
        </table><br>
        <p>联系我们</p>
        <!-- 设置表单 -->
        <form>
            姓名：<input type="text" name="" value=""><br>
            邮箱：<input type="text" name="" value=""><br>
            <input type="submit" name="" value="提交">
        </form>
    </article>
<hr>
    <!-- footer标签用于设置页面的页脚 -->
    <footer>
        版权&copy;所有2024****学院
    </footer>
</main>
</body>