html5网页制作免费

原创

mob64ca12db7156 2024-08-27 05:19:35 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12db7156的原创作品，请联系作者获取转载授权，否则将追究法律责任

HTML5网页制作入门指南

在信息技术飞速发展的时代，网页制作变得越来越重要。HTML5作为一种新兴的标准，不仅为开发者提供了更强大的功能，还让网页制作变得更简单、更高效。本文将指导你使用HTML5制作一个简单的网页，其中包含代码示例和甘特图的展示。

HTML5的基本结构

HTML5网页的基本结构非常简单，一个完整的HTML文档由以下几部分组成：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5网页制作示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        欢迎来到我的HTML5网页
    </header>
    <main>
        <section>
            <h2>关于HTML5</h2>
            <p>HTML5是超文本标记语言的最新版本，它增加了许多新特性，使得网页更加丰富多彩。</p>
        </section>
        <section>
            <h2>我的项目计划</h2>
            <div class="gantt">
                %%{init: {'theme': 'default'}}%%
                gantt
                    title 项目甘特图
                    dateFormat  YYYY-MM-DD
                    section 第1阶段
                    需求分析           :done,    des1, 2023-09-01, 2023-09-10
                    设计                :active,  des2, 2023-09-11, 5d
                    section 第2阶段
                    开发                :         dev1, 2023-09-16, 10d
                    测试                :         dev2, after dev1, 5d
            </div>
        </section>
        <section>
            <h2>项目进度表</h2>
            | 阶段           | 开始日期      | 结束日期      | 进度   |
            |----------------|---------------|---------------|--------|
            | 需求分析       | 2023-09-01    | 2023-09-10    | 100%   |
            | 设计           | 2023-09-11    | 2023-09-15    | 60%    |
            | 开发           | 2023-09-16    | 2023-09-26    | 0%     |
            | 测试           | 2023-09-27    | 2023-10-02    | 0%     |
        </section>
    </main>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
</body>
</html>

CSS样式的基本应用

除了HTML5，CSS也是网页制作中不可或缺的一部分。它用于美化网页，使得网页更加吸引人。以下是一个简单的CSS样式示例，可以配合上面的HTML代码一起使用。

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

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

main {
    padding: 20px;
}

section {
    margin-bottom: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}

th {
    background: #f4f4f4;
}