网页制作最基础入门

一个简单简历网站:
基础知识请看讲义

  1. 在这个实验中,通过HTML构建了一个简单的简历网站。使用了基本的HTML标签,如<header><section><footer>等来划分页面的不同部分,<h1> - <h2>用于标题,<p>用于段落,<ul><li>用于无序列表。
  2. 虽然这个简历网站的功能比较基础,但展示了如何通过HTML组织和呈现个人信息。在实际应用中,可以进一步通过CSS和JavaScript来增强页面的交互性和美观性。

一、实验目的

  1. 掌握HTML基本结构和标签的使用。
  2. 学会设计简单的页面布局。
  3. 理解如何通过HTML展示个人信息。

二、实验步骤

  1. 页面结构分析
    • 一个简单的简历网站通常包含头部(包含姓名、联系方式等)、主体部分(工作经历、教育背景、技能等)和底部(版权信息等)。
  2. 代码编写
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF - 8">
    <title>个人简历</title>
    <style>
        /* 简单的样式设置,用于美化页面 */
        body {
            font-family: Arial, sans - serif;
            margin: 0;
            padding: 0;
        }

        header {
            background - color: #333;
            color: white;
            text - align: center;
            padding: 20px;
        }

        section {
            padding: 20px;
        }

        footer {
            background - color: #333;
            color: white;
            text - align: center;
            padding: 10px;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <header>
        <h1>张三</h1>
        <p>联系电话: 12345678901</p>
        <p>电子邮箱: zhangsan@email.com</p>
    </header>
    <!-- 主体部分 -->
    <section>
        <h2>工作经历</h2>
        <p>
            <strong>XX公司</strong> - 软件工程师(2018 - 2022)
            <ul>
                <li>参与公司核心项目的开发,负责模块A的设计与实现。</li>
                <li>与团队成员协作,优化项目性能,提高系统稳定性。</li>
            </ul>
        </p>
        <h2>教育背景</h2>
        <p>
            <strong>XX大学</strong> - 计算机科学与技术(2014 - 2018)
            <ul>
                <li>主修课程包括数据结构、算法分析、操作系统等。</li>
                <li>参与校内科研项目,获得优秀成果奖。</li>
            </ul>
        </p>
        <h2>技能</h2>
        <p>
            - 熟练掌握Java、Python编程语言。
            - 熟悉数据库管理系统,如MySQL、Oracle。
            - 具备良好的前端开发技能,熟悉HTML、CSS、JavaScript。
        </p>
    </section>
    <!-- 底部 -->
    <footer>
        &copy; 2023张三. 版权所有。
    </footer>
</body>

</html>

稍微加点颜色:

<!DOCTYPE html>   
<html>
   
<head>
    <meta charset="UTF - 8">
    <title>个人简历</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans - serif;
            line - height: 1.6;
            margin: 0;
            padding: 0;
            background - color: #f4f4f4;
        }

        /* 头部样式 */
        header {
            background - color: #3498db;
            color: white;
            text - align: center;
            padding: 40px;
        }

        header img {
            width: 150px;
            height: 150px;
            border - radius: 50%;
            border: 5px solid white;
            margin - bottom: 20px;
        }

        header h1 {
            margin - top: 0;
        }

        /* 主体部分样式 */
        section {
            background - color: white;
            box - shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            margin: 20px;
            padding: 30px;
        }

        section h2 {
            color: #3498db;
            border - bottom: 2px solid #3498db;
            padding - bottom: 10px;
        }

        /* 列表样式 */
        ul {
            list - style - type: none;
            padding: 0;
        }

        /* 底部样式 */
        footer {
            background - color: #333;
            color: white;
            text - align: center;
            padding: 20px;
        }
    </style>   
</head>
   
<body>
    <!-- 头部 -->
    <header>
        <img src="your_photo.jpg" alt="个人照片">
        <h1>张三</h1>
        <p>联系电话: 12345678901</p>
        <p>电子邮箱: zhangsan@email.com</p>
    </header>
    <!-- 主体部分 -->
    <section>
        <h2>工作经历</h2>
        <p>
            <strong>XX公司</strong> - 软件工程师(2018 - 2022)
            <ul>
                <li>参与公司核心项目的开发,负责模块A的设计与实现。</li>
                <li>与团队成员协作,优化项目性能,提高系统稳定性。</li>
            </ul>
        </p>
        <h2>教育背景</h2>
        <p>
            <strong>XX大学</strong> - 计算机科学与技术(2014 - 2018)
            <ul>
                <li>主修课程包括数据结构、算法分析、操作系统等。</li>
                <li>参与校内科研项目,获得优秀成果奖。</li>
            </ul>
        </p>
        <h2>技能</h2>
        <p>
            - 熟练掌握Java、Python编程语言。
            - 熟悉数据库管理系统,如MySQL、Oracle。
            - 具备良好的前端开发技能,熟悉HTML、CSS、JavaScript。
        </p>
    </section>
    <!-- 底部 -->
    <footer>
        &copy; 2023张三. 版权所有。
    </footer>   
</body>
   
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值