HTML5+CSS3+JavaScript网页实战-阿里云开发者社区

HTML5+CSS3+JavaScript网页实战

2024-06-26 80

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： HTML5+CSS3+JavaScript网页实战

1. HTML5基础

HTML5，作为构建和呈现网页内容的标准标记语言，带来了许多革命性的变化。它不仅提供了更加语义化的标签，使得网页内容更具可读性和可访问性，还增加了对多媒体的原生支持，无需依赖第三方插件即可播放视频和音频。在本文中，我们将深入探讨HTML5的新特性，如<article>, <section>, <nav>, <header>, 和 <footer>等标签，并展示如何使用这些标签来构建清晰、结构化的网页内容。通过实例，我们将看到HTML5如何帮助我们创建更加符合现代网页设计标准的网页。

2. CSS3样式设计

CSS3，作为网页设计的关键技术之一，为开发者提供了丰富的样式和动画效果，使得网页外观更加吸引人。在本文中，我们将详细介绍CSS3的新增功能，如圆角、阴影、渐变和动画等，并通过实例展示如何利用这些功能来美化网页元素。我们将学习到如何使用CSS3创建响应式布局，使网页能够在不同设备上呈现最佳的视觉效果。通过掌握CSS3，我们可以将普通的网页转变为具有吸引力和用户友好性的交互式界面。

3. JavaScript交互性

JavaScript是一种功能强大的脚本语言，它为网页添加了丰富的交互性和动态效果。在本文中，我们将探讨JavaScript在网页设计中的重要性和应用。我们将学习如何使用JavaScript处理用户事件，如点击、滚动和表单提交等，并通过操作DOM元素来实现页面的动态更新。此外，我们还将介绍JavaScript的异步编程技术，如Ajax和Promises，以提高网页的响应速度和用户体验。通过本文的学习，我们将能够利用JavaScript为网页增添更多的活力和互动性。

4.网站主题：我的大学生活

5.工具选择：webstorm

在开发HTML5、CSS3和JavaScript的网页应用时，选择一款合适的开发工具至关重要。WebStorm便是一款被广泛使用的专业开发工具，它特别为JavaScript开发者设计，并被誉为“Web前端开发神器”。以下是对WebStorm的详细介绍：

（1）软件概览

开发商: 由JetBrains公司开发，这是一家知名开发工具提供商。
功能特点: 提供智能代码辅助、代码补全、错误突出显示、重构、调试和版本控制等功能。
支持技术: 广泛支持前端技术，如HTML、CSS、JavaScript，以及TypeScript、React、

Angular、Vue.js等框架，也支持Node.js等后端技术。

集成度: 集成了代码编辑器、调试器、版本控制系统等，为开发者提供了全流程的开发工具。

（2）智能代码辅助与补全

WebStorm能够分析项目，为应用程序中定义的方法、函数、模块、变量和类提供最佳代码补全建议。
代码辅助是上下文感知的，也能特定于不同的框架。

（3）调试功能

提供了强大的调试功能，便于开发者查找和修复代码中的错误和问题。

（4）插件库

除了内置功能外，WebStorm还提供了丰富的插件库，允许开发者根据需要扩展功能。

（5）资源与社区

JetBrains提供了详细的官方文档和活跃的开发者社区，为学习和解决问题提供了丰富的资源。

（6）注意事项

尽管WebStorm功能强大，但它是一款商业软件，需要付费使用。
由于功能丰富，学习曲线可能较陡峭，需要一定时间熟悉和掌握。
相对于一些轻量级编辑器，WebStorm可能占用更多的系统资源。

总的来说，WebStorm是一款功能全面、智能且高效的开发工具，特别适合进行复杂的Web前端和后端开发。无论是初学者还是资深开发者，都能从WebStorm的丰富功能和优秀性能中获益良多。

6.代码展示

以下是我们网站的部分代码展示，分为HTML、CSS和JavaScript三个部分。

6.1HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <style> 
 
    </style>
    <link rel="stylesheet" type="text/css" href="css/daohang.css">
      <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<div class="navbar">
    <div class="logo">
        <img src="image/logo.jpg" alt="Logo">
    </div>
    <a href="index.html">首页</a>
    <a href="page1.html">个人介绍</a>
    <a href="page2.html">学校介绍</a>
    <div class="dropdown">
        <a href="#">大学生活</a>
        <div class="dropdown-content">
            <a href="page3.html">学习生活</a>
            <a href="page4.html">课余生活</a>
            <a href="page5.html">社团活动</a>
        </div>
    </div>
    <a href="page6.html">网站说明</a>
    <a class="message-board" href="page7.html">留言板</a>
</div>
<div class="carousel-container">
  <iframe src="page8.html" frameborder="0" scrolling="no" width="1600" height="367" ></iframe>
</div>
<div class="container">
    <div class="text">
        <h1 style="text-align: center;">欢迎来到我的大学生活</h1>
    <h3>&nbsp;&nbsp;在这个精心设计的网页上，你能够全方位地了解我的大学生活概况。这里不仅记录了我的学习生活，还展示了我的各种兴趣爱好。你可以深入了解我在学习上的不懈努力和取得的成果，感受我对知识的热爱与追求。同时，我的课余生活也是丰富多彩的，无论是参与的社团活动，还是与同学们的欢乐时光，都被我记录在这里。</h3>
    <h3>&nbsp;&nbsp;通过浏览这个网页，你可以看到我在学习之余如何平衡生活，追求自己的兴趣。无论是沉浸在书海中寻找答案，还是在运动场上挥洒汗水，亦或是在音乐中寻觅心声，这些都构成了我大学生活的珍贵记忆。希望你能在这个网页上，感受到我的大学生活的全貌，体会那份属于青春的热情与活力。</h3>
  </div>
    <div class="image">
        <img src="image/index1.jpg" alt="Your Image">
    </div>
</div>
<div class="kongbai"></div>
<div class="container">
  <div class="image1">
        <img src="image/index2.jpg" alt="Your Image">
  </div>
  <div class="text1">
    <h1 style="text-align: center;">关于我的兴趣爱好</h1>
    <h3>&nbsp;&nbsp;听音乐是我每日的必修课。对我而言，音乐不仅仅是一种娱乐方式，更是一种情感的表达和释放。当我心情低落时，一段轻柔的旋律能抚慰我的心灵；而当我心情愉悦时，激昂的节奏又能与我产生共鸣。不同类型的音乐，如古典、流行、摇滚或民谣，都为我展现了不同的情感世界。我尤其喜欢在安静的夜晚，戴上耳机，让自己完全沉浸在音乐之中，那种与世隔绝的感觉让我如痴如醉。</h3>
  <h3>&nbsp;&nbsp;而旅行，则是我探索世界、丰富人生阅历的重要途径。每一次的旅行都是一次全新的冒险，它让我有机会走出熟悉的环境，去接触不同的人、事、物。在旅途中，我欣赏过壮丽的自然风光，感受过各地独特的人文气息，也品尝过各种地道的美食。这些旅行经历不仅让我增长了见识，还让我更加深刻地理解了世界的多元性和复杂性。</h3>
  </div>
</div>
<div class="kongbai"></div>
<footer style="background-color: #8dc8e6; padding: 20px; text-align: center;">
    <p style="color: #fff; font-size: 16px; margin: 0;">shichengfu123@qutlook.com</p>
</footer>
<script src="js/point.js"></script>
<script src="js/scrka.js"></script>
</body>
 
</html>

6.2 JavaScript

var carouselContainer = document.getElementById('carousel-container');
    var prevButton = document.getElementById('prev-button');
    var nextButton = document.getElementById('next-button');
    var images = carouselContainer.querySelectorAll('img');
    var currentIndex = 0;
    var interval = 3000;
 
    prevButton.addEventListener('click', function () {
        currentIndex--;
        if (currentIndex < 0) {
            currentIndex = images.length - 1;
        }
        moveImages();
    });
 
    nextButton.addEventListener('click', function () {
        currentIndex++;
        if (currentIndex >= images.length) {
            currentIndex = 0;
        }
        moveImages();
    });
 
    setInterval(function () {
        currentIndex++;
        if (currentIndex >= images.length) {
            currentIndex = 0;
        }
        moveImages();
    }, interval);
 
    function moveImages() {
        images.forEach(function (img, index) {
            if (index === currentIndex) {
                img.style.left = '0';
            } else {
                img.style.left = '100%';
            }
        });
    }

6.3 CSS

  .kongbai{
    margin: auto;
    width: 100rem;
    height: 70px;
    background-color: #ffff;
  }
  .carousel-container {
            margin: auto;
            width: 100rem;
            height: 400px;
            background-color: #ffff;
        }
      .container {
          width: 1600px;
          margin: 0 auto;
          overflow: hidden;
          background-color: #ffff;
          border-radius: 20px;
          box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
      }
      .text {
          float: left;
          width: 50%;
          height: 400px;
          padding: 20px;
          box-sizing: border-box;
          background-color: #ffff;
          border-top-left-radius: 20px;
          border-bottom-left-radius: 20px;
      }
      .image {
          float: right;
          width: 50%;
          height: 400px;
          background-image: url('your-image.jpg');
          background-size: cover;
          background-position: center;
          border-top-right-radius: 20px;
          border-bottom-right-radius: 20px;
          overflow: hidden;
      }
      .image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 50%;
      }
      .text p {
          margin-top: 0;
      }
      .text1 {
          float: right;
          width: 50%;
          height: 400px;
          padding: 20px;
          box-sizing: border-box;
          background-color: #ffff;
          border-top-left-radius: 20px;
          border-bottom-left-radius: 20px;
      }
      .image1 {
          float: left;
          width: 50%;
          height: 400px;
          background-image: url('your-image.jpg');
          background-size: cover;
          background-position: center;
          border-top-right-radius: 20px;
          border-bottom-right-radius: 20px;
          overflow: hidden;
      }
      .image1 img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 50%;
      }
      .image img {
          transition: transform 0.3s ease; /* 添加过渡效果 */
      }
      
      .image img:hover {
          transform: scale(1.1); /* 图片放大 */
          border-radius: 0; /* 边框半径设置为0，使图片恢复为方形 */
      }
      .image1 img {
          transition: transform 0.3s ease; /* 添加过渡效果 */
      }
      .image1 img:hover {
          transform: scale(1.1); /* 图片放大 */
          border-radius: 0; /* 边框半径设置为0，使图片恢复为方形 */
      }

HTML5+CSS3+JavaScript网页实战

1. HTML5基础

2. CSS3样式设计

3. JavaScript交互性

4.网站主题：我的大学生活

5.工具选择：webstorm

（1）软件概览

（2）智能代码辅助与补全

（3）调试功能

（4）插件库

（5）资源与社区

（6）注意事项

6.代码展示

6.1HTML

6.2 JavaScript

6.3 CSS

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

HTML5+CSS3+JavaScript网页实战

1. HTML5基础

2. CSS3样式设计

3. JavaScript交互性

4.网站主题：我的大学生活

5.工具选择：webstorm

（1）软件概览

（2）智能代码辅助与补全

（3）调试功能

（4）插件库

（5）资源与社区

（6）注意事项

6.代码展示

6.1HTML

6.2 JavaScript

6.3 CSS

热门文章

最新文章

相关课程

相关电子书

相关实验场景