个人技术博客--使用html、css、js搭建网页

这个作业属于哪个课程	2401_CS_SE_FZU
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	编写软件工程实践总结和个人技术博客
其他参考文献	哔哩哔哩

1.概述

2.技术详述

2.1合作使用简单实例

2.1.1 代码展示

2.1.2 详细说明

2.2 实现轮播图

2.2.1 问题简述

2.2.2 页面展示

2.2.3 代码展示

2.2.4 详细说明

3.总结

4.参考文献

1.概述

HTML、CSS和JavaScript是构建现代网页和Web应用的三个核心技术，它们各自有不同的职责，但经常一起使用以创建交互式和视觉吸引人的网页

2.技术详述

2.1合作使用简单实例

2.1.1 代码展示

html文件代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>奥运会奖牌榜</title>
    <link rel="stylesheet" href="styles.css"> <!-- 引入 CSS 文件 -->
</head>
<body>
    <div class="header-title">
        <img src="images_olympic/emblem-oly.png" alt="奥运会标志" class="header-image">
        <h1>奖牌榜</h1>
    </div>

    <div class="container">
        <div class="country header">
            <div class="info">排名</div>
            <div class="info">国旗</div>
            <div class="info">国家</div>
            <div class="medals">
                <div>金牌</div>
                <div>银牌</div>
                <div>铜牌</div>
                <div>总数</div>
            </div>
        </div>
        
        <div id="medal-table">
            <!-- 国家奖牌数据将通过JavaScript插入到这里 -->
        </div>
    </div>

    <script src="script.js"></script> <!-- 引入 JavaScript 文件 -->
</body>
</html>

css文件代码

body {
    background-color: #f0f0f0; /* 背景颜色 */
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.header-title {
    background-color: #007BFF; /* 蓝色背景 */
    color: white; /* 标题文本颜色 */
    text-align: center;
    padding: 60px 0 20px 0; /* 添加更多上方的内边距来移动标题 */
    width: 100%; /* 宽度铺满 */
    box-sizing: border-box; /* 确保内边距不影响宽度 */
}

.header-title h1 {
    margin: 0; /* 移除 h1 元素的默认外边距 */
}

.header-image {
    max-width: 150px; /* 图片最大宽度 */
    height: auto; /* 自适应高度 */
    margin-bottom: 20px; /* 图片与标题之间的间距 */
}

.container {
    max-width: 800px; /* 最大宽度 */
    margin: 20px auto; /* 居中 */
    padding: 0 20px; /* 内边距 */
}

.country {
    background-color: white; /* 白色背景框 */
    margin: 10px 0; /* 每行之间的间距 */
    padding: 10px;
    border-radius: 5px; /* 圆角 */
    display: flex;
    align-items: center; /* 垂直居中 */
}

.flag {
    width: 50px; /* 国旗宽度 */
    height: auto; /* 自适应高度 */
    margin-left: 5px; /* 在国旗与排名之间添加小的左边距 */
}

.info {
    padding: 0 10px; /* 内部留白 */
}

.medals {
    display: flex;
    justify-content: space-between; /* 奖牌数量之间的空间分配 */
    width: 40%; /* 奖牌数量区域宽度 */
    text-align: right; /* 文本右对齐 */
    margin-left: auto; /* 将奖牌区域推向右侧 */
}

.header {
    background-color: #e0e0e0; /* 表头背景颜色 */
    font-weight: bold; /* 加粗 */
}

js文件代码

// 读取 CSV 文件并解析成表格
fetch('medals.csv')
    .then(response => response.text())
    .then(data => {
        let rows = data.split("\n"); // 将 CSV 按行拆分
        let tableContent = ''; // 用于存储动态生成的 HTML 内容

        // 遍历 CSV 文件的每一行，跳过第一行（标题行）
        rows.slice(1).forEach((row, index) => {
            let columns = row.split(","); // 拆分每行的列
            let country = columns[0];
            let flag = columns[1];
            let gold = columns[2];
            let silver = columns[3];
            let bronze = columns[4];
            let total = columns[5];

            // 为每个国家动态生成 HTML 结构
            tableContent += `
                <div class="country">
                    <div class="info">${index + 1}</div> <!-- 显示排名 -->
                    <img class="flag" src="${flag}" alt="${country}国旗">
                    <div class="info">${country}</div>
                    <div class="medals">
                        <div>${gold}</div>
                        <div>${silver}</div>
                        <div>${bronze}</div>
                        <div>${total}</div>
                    </div>
                </div>
            `;
        });

        // 将生成的 HTML 内容插入到页面中的 #medal-table 容器中
        document.getElementById('medal-table').innerHTML = tableContent;
    });

2.1.2 详细说明

在html文件中通过引入css文件和js文件来保证三个文件同时应用在一个网页中。在这个例子中，我们能发现html文件负责网页的结构和内容，css文件负责对html文件中每个组件的样式调整和布局，js文件负责交互性，比如获取鼠标点击等效果。

2.2 实现轮播图

2.2.1 问题简述

在设计某个网页，特别是首页时，我们往往需要用轮播图来动态的展示网页的内容，并且实现与用户的交互，这便涉及到本文所提到的三种基础技术的共同使用。

2.2.2 页面展示

图中是我编写的一个轮播图的具体效果，底下也有操作器，可以对轮播图进行选择。

2.2.3 代码展示

以上三段代码，是轮播图的所有代码，代码行数很少，但是足以达到我们所需的效果，这便是三种技术组合的优势所在。

2.2.4 详细说明

首先，我们在html文件中定义了名为carousel和carousel-indicators的两个组件，这两个组件分别是轮播图和轮播图操作按钮。观察代码我们能发现，每个轮播项都是一个<div>元素，并且有一个类名carousel-item。active类表示当前活跃或显示的轮播项。每个carousel-item包含一个<img>元素，用于显示图片，以及一个包含链接的<div>元素，类名为carousel-text。<img>元素的src属性指定了图片的路径，alt属性提供了图片的替代文本。<a>元素是一个链接，它的href属性指向一个URL，用户点击后会跳转到指定的网页。style属性用于设置链接的颜色。<div>元素包含了轮播图的指示器，每个指示器是一个<span>元素，类名为indicator。当前活跃的指示器有一个额外的active类。onclick属性设置了当用户点击指示器时执行的JavaScript函数setSlide(index)，这里的index应该是对应轮播项的索引。

在html文件的其他部分，我们引入了css文件和js文件。在css代码中我们又对轮播图中的每个部分进行设计，包括图片，容器，文字，轮播项整体。在js代码中则实现了轮播图的基本功能，包括自动播放和手动控制。用户可以通过点击指示器来切换轮播图，或者等待轮播图自动播放到下一张。

3.总结

HTML负责网页的结构和内容，CSS负责样式和布局，JavaScript负责交互性和动态行为。这种分离使得开发者可以专注于各自的领域，提高开发效率和代码可维护性。它们共同确保了网页可以在不同的操作系统和设备上以一致的方式呈现。合理的HTML结构和CSS样式有助于搜索引擎更好地索引网页内容，而JavaScript可以增强页面的互动性，吸引用户停留。

4.参考文献

W3School在线教程