HTML练习题：创建一个多页面的在线简历-CSDN博客

本文链接：https://blog.csdn.net/2401_86440076/article/details/140987267

第一部分：考点与作答区

考点：

HTML页面结构：创建多个HTML页面并链接它们。
内部链接：使用<a>标签创建页面内的跳转链接。

作答区： 请创建一个包含三个页面的在线简历：

首页：包含个人简介和导航链接。
经历页：包含教育背景和工作经历。
技能页：包含技能列表和联系信息。

第二部分：解题思路与答案

解题思路：

创建三个HTML文件：index.html, experience.html, skills.html。
在每个文件中创建基本的HTML结构。
使用<a>标签创建页面间的导航链接。

答案：

<!-- index.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>张三的个人简历</h1>
    <p>欢迎来到我的在线简历！</p>
    <nav>
        <ul>
            <li><a href="experience.html">教育背景和工作经历</a></li>
            <li><a href="skills.html">技能列表和联系信息</a></li>
        </ul>
    </nav>
</body>
</html>

<!-- experience.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>教育背景和工作经历</h1>
    <p>这里是我的教育背景和工作经历的详细信息。</p>
    <nav>
        <ul>
            <li><a href="index.html">返回首页</a></li>
            <li><a href="skills.html">技能列表和联系信息</a></li>
        </ul>
    </nav>
</body>
</html>
www.lyggyzp.com
www.aqtcrcw.com
www.jzszrcw.com
www.ycxsrcw.com
www.cdczrcw.com
<!-- skills.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>技能列表和联系信息</h1>
    <p>这里是我的技能列表和联系信息。</p>
    <nav>
        <ul>
            <li><a href="index.html">返回首页</a></li>
            <li><a href="experience.html">教育背景和工作经历</a></li>
        </ul>
    </nav>
</body>
</html>

第三部分：扩展考点与扩展作答区

扩展考点：

CSS样式：使用CSS为页面添加统一的样式。
页面布局：使用HTML和CSS创建一个包含头部、内容和尾部的通用页面布局。

扩展作答区：

创建一个CSS文件，为所有页面添加样式，包括字体、颜色、导航栏等。
使用HTML的<header>, <main>, 和 <footer>标签创建一个通用的页面布局，并在所有页面中应用它。

第四部分：扩展解答思路与答案

扩展解答思路：

创建一个名为styles.css的CSS文件，并定义基本的样式规则。
在每个HTML页面的<head>标签中引入styles.css。
使用<header>, <main>, 和 <footer>标签重构页面的结构。

扩展答案：

/* styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header, footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
}

main {
    padding: 20px;
    background-color: white;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

nav ul li a {
    color: #333;
    text-decoration: none;
}

nav ul li a:hover {
    text-decoration: underline;
}

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>张三的简历 - 首页</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>张三的个人简历</h1>
    </header>
    <main>
        <p>欢迎来到我的在线简历！</p>
        <nav>
            <ul>
                <li><a href="experience.html">教育背景和工作经历</a></li>
                <li><a href="skills.html">技能列表和联系信息</a></li>
            </ul>
        </nav>
    </main>
    <footer>
        <p>&copy; 2024 张三</p>
    </footer>
</body>
</html>

<!-- experience.html 和 skills.html 的修改类似，只需更改main内容 -->

在这个扩展答案中，我们通过CSS为页面添加了统一的样式，并使用HTML的<header>, <main>, 和 <footer>标签创建了一个通用的页面布局。这个练习题的扩展部分适合那些已经掌握了HTML和CSS基础，并希望学习如何创建具有统一风格和布局的多页面网站的开发者。