深圳大学-Web开发和人机交互导论实验-超链接与多媒体文件应用

最新推荐文章于 2024-10-08 17:48:41 发布

纯粹的摆烂狗

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量476

点赞数 3

分类专栏：深圳大学-Web开发和人机交互导论实验文章标签：前端人机交互

本文链接：https://blog.csdn.net/qq_73179413/article/details/140798872

版权

深圳大学-Web开发和人机交互导论实验专栏收录该内容

5 篇文章 0 订阅

订阅专栏

任务一

任务一代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易灯箱画廊设计</title>
    <style title type="text/css">
        h3 {
            font-size: 36px;
            color: white;
            text-align: center;
            padding: 10px auto;
        }
        img {
            border: 0;
            width: 100px;
            height: 80px;
        }

        ul {
            margin: 0 auto;
            width: 800px;
            list-style-type: none;
            height: 120px;
        }
        li {
            float: left;
            width: 110px;
            height: 95px;
            margin: 8px;
        }
        div {
            text-align: center;
        }
        iframe{
            margin-left: 400px;
        }
    </style>
</head>

<body style="background-color:#33cc99">
    <h3>简易灯箱画廊设计</h3>
    <embed src="/lab2/Archive/trees/Sleep Away.mp3" autostart="true" loop="true" width="0" height="0"></embed>
    <hr size="3" color="red">
    <div class>
        <ul>
            <li><a href="/lab2/Archive/trees/t1.jpg" target="iframe">T1<img src="/lab2/Archive/trees/t1.jpg"></a></li>
            <li><a href="/lab2/Archive/trees/t2.jpg" target="iframe">T2<img src="/lab2/Archive/trees/t2.jpg"></a></li>
            <li><a href="/lab2/Archive/trees/t3.jpg" target="iframe">T3<img src="/lab2/Archive/trees/t3.jpg"></a></li>
            <li><a href="/lab2/Archive/trees/t4.jpg" target="iframe">T4<img src="/lab2/Archive/trees/t4.jpg"></a></li>
            <li><a href="/lab2/Archive/trees/t5.jpg" target="iframe">T5<img src="/lab2/Archive/trees/t5.jpg"></a></li>
            <li><a href="/lab2/Archive/trees/t6.jpg" target="iframe">T6<img src="/lab2/Archive/trees/t6.jpg"></a></li>
        </ul>
        <br/>
        <iframe src="/lab2/Archive/trees/t1.jpg" name="iframe" width="800px" height="700px" frameborder="0"></iframe>

    </div>
</body>

</html>

任务一效果

在这里插入图片描述

任务二

任务二代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p{
            font-family: 隶书;
            font-size: 20px; 
        }
        ul {
			list-style-type: none;
            margin-left: 120px;
		}
        li {
			float: left;
			margin: 20px;
		}
        #div1{
            background-color: rgb(153, 204, 0);
			height: 290px;
			width: 1420px;
        }
        #div2{
            background-color: rgb(51, 153, 255);
            height: 50px;
            width: 1420px;
        }
    </style>
    <title>多媒体及滚动字幕</title>
</head>
<body>
    <h1 style="text-align: center;">明月几时有</h1>
    <hr color="blue" size="3">
    <div style="color: blue;text-align: center;">
        <p>明月几时有？把酒问青天。</p>
        <p>不知天上宫阙，今夕是何年。</p>
        <p>我欲乘风归去，又恐琼楼玉宇，高处不胜寒，起舞弄清影，何似在人间。 </p>
        <p>转朱阁，抵绮户，照无眠。</p>
        <p>不应有恨，何事偏向别时圆。</p>
        <p>人有悲欢离合，月有阴晴圆缺，此事古难全。</p>
        <p>但愿人长久，千里共婵娟。</p>
    </div>
    <hr color="red" size="3">
    <div id="div1">
        <ul>
            <li><embed src="/lab2/Archive/embed/62.swf" width="300" height="250" autostart="true" loop="true"></li>
            <li><embed src="/lab2/Archive/embed/music.mp3" width="300" height="250" autostart="false" loop="true"></li>
            <li><embed src="/lab2/Archive/embed/0303.swf" width="300" height="250" autostart="true" loop="true"></li>
        </ul>
    </div>
    <div id="div2">
        <marquee >欢迎来到我的多媒体世界！</marquee>
    </div>

</body>
</html>

任务二效果

在这里插入图片描述

任务三

任务三代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p span a {
            margin: 12px;
        }
        .b{
            text-align: center;
            list-style-type: none;
            padding: 0;
        }
        .b li {
            display: inline;
            margin: 20px;
        }
    </style>
    <title>网站导航</title>
</head>

<body>
    <p>使用段落标记和超链接实现网站导航</p>
    <p style="text-align: center;">
        <span><a href="https://www.baidu.com">百度</a></span>
        <span><a href="https://www.sina.com.cn/">新浪</a></span>
        <span><a href="https://www.163.com/index.html">网易</a></span>
        <span><a href="https://www.qq.com/">腾讯</a></span>
        <span><a href="https://www.sohu.com/">搜狐</a></span>
        <span><a href="https://www.so.com/">360搜索</a></span>
    </p>
    <hr color="#6495ed" size="3">
    <p>利用无序列表实现水平导航条</p>
    <ul class="b">
        <li><a href="https://www.baidu.com">百度</a></li>
        <li><a href="https://www.sina.com.cn/">新浪</a></li>
        <li><a href="https://www.163.com/index.html">网易</a>
        <li><a href="https://www.qq.com/">腾讯</a></li>
        <li><a href="https://www.sohu.com/">搜狐</a></li>
        <li><a href="https://www.so.com/">360搜索</a></li>
    </ul>
</body>

</html>

任务三效果

在这里插入图片描述

任务四

任务四代码

<!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>
    <h1 style="text-align: center;">专业课程导航</h1>
    <p>专业课程导航</p>
    <ul>
        <li><a href="http://baidu.com">英语</a></li>
        <li><a href="http://baidu.com">高数</a></li>
        <li><a href="http://baidu.com">大学物理</a></li>
    </ul>
    <div>
        <h2 style="text-align: left;">英语</h2>
        <p style="margin-left: 2em;">基础英语、高级英语、报刊选读、视听、口语、英语写作、翻译理论与实践、语言理论、语言学概论、主要英语国家文学史及文学作品选读、主要英语国家国情等。<a href="4.html">返回</a></p>

    </div>
    <div>
        <h2 style="text-align: left;">高数</h2>
        <p style="margin-left: 2em;">《高等数学》课程介绍随着科学技术的迅猛发展数学正日益成为各学科进行科学研究的重要手段和工具。高等数学是近代数学的基础是理科各专业和经济管理专业类学生的必修课也是在现代科学技术、经济管理、人文科学中应用最广泛的一门课程。因此学好这门课程对学生今后的发展是至关重要的。本课程是学生进入大学后学习的第一门重要的数学基础课。通过本课程的教学使学生掌握处理数学问题的思想和方法培养学生科学思维能力同时为后续课程的学习奠定良好的基础。<a href="4.html">返回</a></p>
    </div>
    </div>
    <div>
        <h2 style="text-align: left;">大学物理</h2>
        <p style="margin-left: 2em;">以物理学基础为内容的大学物理课程，是理工科个专业学生一门重要的通识性的必修基础课。大学物理课程既为学生打好必要的物理基础，又在培养学生科学的世界观，增强学生分析问题和解决问题的能力，培养学生的探索精神、创新意识等方面，具有其他课程不能替代的重要作用。<a href="4.html">返回</a></p>
    </div>
    </div>
</body>
</html>

任务四效果

在这里插入图片描述

实验结论

在本次实验中，我学习了如何使用HTML的超链接跳转方式和嵌入多媒体文件的方法，包括视频和图片。得到以下结论:
1.超链接能够实现页面之间的跳转和链接，将不同的页面连接在一起。这种链接方式可以方便用户在不同页面之间进行导航和跳转，提供了更好的交互性和导航体验。
2.嵌入视频能够增强页面的多媒体展示效果。这种多媒体的呈现方式能够丰富页面的内容，吸引用户的注意力，提供更生动、直观的信息展示方式。
3.嵌入图片能够提升页面的可视化效果和美观度。通过在网页中嵌入图片，可以轻松地展示图像内容，丰富页面的视觉效果。