HTML5网页制作源码大全，有哪些实用案例？-网页设计-锦华智联科技

HTML5网页制作源码大全

这份大全将分为以下几个部分,方便您按需查找和学习：

（图片来源网络，侵删）

第一部分：HTML5基础结构 & 新特性
第二部分：常用CSS3样式组件源码
第三部分：交互式JavaScript组件源码
第四部分：完整网站项目源码
第五部分：学习资源与灵感库

第一部分：HTML5基础结构 & 新特性

这是任何HTML5页面的起点,展示了现代网页的标准结构和一些强大的新标签。

1 标准HTML5页面结构

这是最基础的模板,包含了所有现代网页所需的头部和主体结构。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="网页描述，有助于SEO">
    <meta name="keywords" content="关键词1, 关键词2">网页标题</title>
    <!-- 引入CSS文件 -->
    <link rel="stylesheet" href="style.css">
    <!-- 引入字体图标库 (如 Font Awesome) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- 头部导航 -->
    <header>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">lt;/a></li>
                <li><a href="#services">服务</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </nav>
    </header>
    <!-- 主要内容区 -->
    <main>
        <section id="home">
            <h1>欢迎来到我的网站</h1>
            <p>这是一个使用HTML5和CSS3构建的现代化网页。</p>
        </section>
        <section id="about">
            <h2>关于我们</h2>
            <p>这里是一些关于我们公司的介绍...</p>
        </section>
        <article>
            <h2>文章标题</h2>
            <p>这是一篇文章的内容...</p>
        </article>
    </main>
    <!-- 页脚 -->
    <footer>
        <p>&copy; 2025 我的公司. 保留所有权利.</p>
    </footer>
    <!-- 引入JavaScript文件 -->
    <script src="script.js"></script>
</body>
</html>

2 HTML5语义化标签示例

展示了如何使用 <header>, <footer>, <nav>, <main>, <section>, <article>, <aside> 等标签来构建有意义的页面结构。

<body>
    <header>
        <h1>网站Logo</h1>
        <nav>...</nav>
    </header>
    <main>
        <section id="news">
            <h2>最新新闻</h2>
            <article>
                <h3>新闻标题 1</h3>
                <p>新闻内容摘要...</p>
                <time datetime="2025-10-27">2025年10月27日</time>
            </article>
            <article>
                <h3>新闻标题 2</h3>
                <p>新闻内容摘要...</p>
                <time datetime="2025-10-26">2025年10月26日</time>
            </article>
        </section>
        <aside>
            <h3>相关链接</h3>
            <ul>
                <li><a href="#">链接1</a></li>
                <li><a href="#">链接2</a></li>
            </ul>
        </aside>
    </main>
    <footer>
        <p>版权信息</p>
    </footer>
</body>

3 HTML5表单新特性

展示了input类型的新属性，如email, tel, date, range, color等，以及表单验证功能。

（图片来源网络，侵删）

<form action="/submit" method="post">
    <label for="email">电子邮箱:</label>
    <input type="email" id="email" name="email" required placeholder="your@email.com">
    <label for="phone">电话号码:</label>
    <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890">
    <label for="birthday">生日:</label>
    <input type="date" id="birthday" name="birthday">
    <label for="volume">音量:</label>
    <input type="range" id="volume" name="volume" min="0" max="100">
    <label for="favcolor">喜欢的颜色:</label>
    <input type="color" id="favcolor" name="favcolor">
    <button type="submit">提交</button>
</form>

第二部分：常用CSS3样式组件源码

这些是网页中常见的UI元素,可以直接复制使用。

1 响应式导航栏

一个在桌面端水平显示,在移动端（小屏幕）会变成“汉堡包”菜单的导航栏。

<!-- HTML -->
<nav class="navbar">
    <a href="#" class="nav-logo">Logo</a>
    <ul class="nav-menu">
        <li class="nav-item"><a href="#" class="nav-link">首页</a></li>
        <li class="nav-item"><a href="#" class="nav-link">lt;/a></li>
        <li class="nav-item"><a href="#" class="nav-link">服务</a></li>
        <li class="nav-item"><a href="#" class="nav-link">联系</a></li>
    </ul>
    <div class="hamburger">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
    </div>
</nav>
<!-- CSS (style.css) -->
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    padding: 1rem;
}
.nav-menu {
    display: flex;
    list-style: none;
}
.nav-link {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
}
.hamburger {
    display: none; /* 默认隐藏 */
    cursor: pointer;
}
.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: white;
    transition: all 0.3s ease-in-out;
}
/* 响应式设计 */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: #333;
        width: 100%;
        text-align: center;
        transition: 0.3s;
    }
    .nav-menu.active {
        left: 0;
    }
    .hamburger {
        display: block;
    }
}
/* JavaScript (script.js) - 切换菜单 */
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
hamburger.addEventListener("click", () => {
    navMenu.classList.toggle("active");
});

2 卡片式布局

常用于展示产品、文章或用户信息。

<!-- HTML -->
<div class="card-container">
    <div class="card">
        <img src="https://via.placeholder.com/150" alt="头像">
        <div class="card-content">
            <h3>张三</h3>
            <p>前端开发工程师，热爱学习新技术。</p>
        </div>
    </div>
    <div class="card">
        <img src="https://via.placeholder.com/150" alt="头像">
        <div class="card-content">
            <h3>李四</h3>
            <p>UI/UX设计师，追求极致的用户体验。</p>
        </div>
    </div>
</div>
<!-- CSS (style.css) -->
.card-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}
.card {
    width: 300px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
}
.card:hover {
    transform: translateY(-10px);
}
.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.card-content {
    padding: 20px;
}
.card-content h3 {
    margin-top: 0;
}

3 网格布局相册

一个响应式的图片网格,当鼠标悬停时显示标题。

（图片来源网络，侵删）

<!-- HTML -->
<div class="photo-grid">
    <div class="grid-item">
        <img src="https://picsum.photos/400/300?random=1" alt="图片1">
        <div class="overlay">
            <h3>风景 1</h3>
        </div>
    </div>
    <div class="grid-item">
        <img src="https://picsum.photos/400/500?random=2" alt="图片2">
        <div class="overlay">
            <h3>风景 2</h3>
        </div>
    </div>
    <div class="grid-item">
        <img src="https://picsum.photos/400/400?random=3" alt="图片3">
        <div class="overlay">
            <h3>风景 3</h3>
        </div>
    </div>
    <!-- 更多项目... -->
</div>
<!-- CSS (style.css) -->
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    padding: 20px;
}
.grid-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}
.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.grid-item:hover .overlay {
    transform: translateY(0);
}

第三部分：交互式JavaScript组件源码

这些组件为网页增添了动态效果和功能。

1 简单的选项卡切换

点击不同的标签,下方内容会随之改变。

<!-- HTML -->
<div class="tabs-container">
    <div class="tab-buttons">
        <button class="tab-btn active" data-tab="tab1">标签 1</button>
        <button class="tab-btn" data-tab="tab2">标签 2</button>
        <button class="tab-btn" data-tab="tab3">标签 3</button>
    </div>
    <div class="tab-content">
        <div id="tab1" class="tab-pane active">
            <p>这是标签 1 的内容。</p>
        </div>
        <div id="tab2" class="tab-pane">
            <p>这是标签 2 的内容。</p>
        </div>
        <div id="tab3" class="tab-pane">
            <p>这是标签 3 的内容。</p>
        </div>
    </div>
</div>
<!-- CSS (style.css) -->
.tab-buttons .tab-btn {
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid #ccc;
    background: #f1f1f1;
}
.tab-buttons .tab-btn.active {
    background: #ccc;
}
.tab-pane {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
    border-top: none;
}
.tab-pane.active {
    display: block;
}
<!-- JavaScript (script.js) -->
const tabButtons = document.querySelectorAll('.tab-btn');
const tabPanes = document.querySelectorAll('.tab-pane');
tabButtons.forEach(button => {
    button.addEventListener('click', () => {
        // 移除所有活动状态
        tabButtons.forEach(btn => btn.classList.remove('active'));
        tabPanes.forEach(pane => pane.classList.remove('active'));
        // 为当前点击的按钮和对应的面板添加活动状态
        button.classList.add('active');
        const tabId = button.getAttribute('data-tab');
        document.getElementById(tabId).classList.add('active');
    });
});

2 图片轮播/幻灯片

自动或手动切换的图片展示组件。

<!-- HTML -->
<div class="slideshow-container">
    <div class="mySlides fade">
        <img src="https://picsum.photos/800/400?random=4" style="width:100%">
    </div>
    <div class="mySlides fade">
        <img src="https://picsum.photos/800/400?random=5" style="width:100%">
    </div>
    <div class="mySlides fade">
        <img src="https://picsum.photos/800/400?random=6" style="width:100%">
    </div>
    <a class="prev" onclick="changeSlide(-1)">&#10094;</a>
    <a class="next" onclick="changeSlide(1)">&#10095;</a>
</div>
<!-- CSS (style.css) -->
.slideshow-container {
    max-width: 800px;
    position: relative;
    margin: auto;
}
.mySlides {
    display: none;
}
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}
@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}
<!-- JavaScript (script.js) -->
let slideIndex = 1;
showSlide(slideIndex);
function changeSlide(n) {
    showSlide(slideIndex += n);
}
function showSlide(n) {
    let i;
    let slides = document.getElementsByClassName("mySlides");
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    slides[slideIndex-1].style.display = "block";
}
// 自动播放
// setInterval(() => { changeSlide(1); }, 3000);

第四部分：完整网站项目源码

学习如何将上述组件组合成一个完整的网站。

1 个人作品集/博客网站

这是最常见的项目之一,通常包含：首页、关于我、我的作品、博客文章、联系方式等页面。

核心技术:
- HTML5: 语义化标签构建页面结构 (<header>, <main>, <article>, <footer>, <section>)。
- CSS3: Flexbox/Grid布局实现响应式设计，CSS动画和过渡效果美化交互。
- JavaScript: 实现选项卡切换、图片懒加载、平滑滚动、表单验证等。
学习资源:
- Traversy Media - Build a Portfolio Website: YouTube视频链接 (非常经典，手把手教学)
- freeCodeCamp - Responsive Web Design Certification: 课程链接 (包含多个项目实战)

2 电商产品展示页面

展示商品列表、筛选、排序和商品详情。

核心技术:
- HTML5: 表单用于筛选，<figure>和<figcaption>用于产品图片和描述。
- CSS3: Grid布局展示产品卡片，position: sticky实现固定筛选栏。
- JavaScript: 实现产品筛选、排序功能，动态加载产品数据。
学习资源:
- The Net Ninja - E-commerce Website Tutorial: YouTube播放列表 (从零开始构建一个完整的电商网站)

3 任务管理/待办事项应用

一个功能丰富的单页应用,增删改查任务。

核心技术:
- HTML5: 使用<ul>和<li>列表展示任务，<input>和<button>用于添加任务。
- CSS3: 使用checked伪类和兄弟选择器实现任务的完成/未完成状态切换。
- JavaScript (ES6+): 使用localStorage将数据保存在浏览器中，实现数据的持久化。Array.prototype.filter, map等方法操作任务数组。
学习资源:
- Web Dev Simplified - Build a To-Do App: YouTube视频链接 (非常简洁明了)

第五部分：学习资源与灵感库

1 代码片段与模板网站

CodePen: https://codepen.io/ - 全球最大的前端代码社区，可以在线编写、分享和调试HTML, CSS, JS代码，是寻找灵感和学习最佳实践的最佳去处。
CSS-Tricks: https://css-tricks.com/ - 一个全面的CSS和网页设计资源网站，有大量的教程、技巧和“Almanac”（CSS属性大全）。
GitHub: https://github.com/ - 搜索“HTML5 template”, “landing page”, “portfolio”等关键词，可以找到大量开源的完整项目源码。

2 UI组件库

如果你不想从零开始写样式,可以使用这些库，它们提供了美观且功能完善的组件。

Bootstrap: https://getbootstrap.com/ - 最流行的CSS框架，快速构建响应式、移动设备优先的网站。
Tailwind CSS: https://tailwindcss.com/ - 一个功能优先的CSS框架，它提供了低层级的实用工具类，让你可以完全控制设计。
Bulma: https://bulma.io/ - 一个基于Flexbox的、免费开源的CSS框架。

3 灵感与设计资源

Dribbble: https://dribbble.com/ - 寻找UI/UX设计灵感的圣地。
Awwwards: https://www.awwwards.com/ - 展示世界上最优秀、最创新和最具设计感的网站。
Mobbin.design: https://mobbin.design/ - 专注于收集移动应用的UI设计截图，非常适合学习移动端设计。

这份“HTML5网页制作源码大全”希望能为您提供一个清晰的路线图和丰富的资源。

学习建议：

从基础开始: 确保你理解HTML5的语义化标签和CSS3的核心布局技术。
动手实践: 不要只看不练，复制代码，修改它，让它变成你自己的。
模仿与创造: 先模仿优秀的作品，然后尝试将它们组合起来，创造你自己的项目。
善用资源: CodePen、GitHub等是你最好的朋友，多去逛逛，多看看别人的代码。

祝您学习愉快！