11款流行的HTML5网站模板（完全免费，内附下载地址）

于企业或个人来说，原创制作一个网站需要很多时间，先用 Photoshop 做网页设计，接着用 DIV+CSS 来写编写HTML代码，最后可能还要程序开发才能完成，不仅花费时间长，成本也是比较昂贵的。

如果你缺少设计或前端技能，但又想快速完成一个网站，那么我们建议你直接选择网站模板，比如静态类的 HTML/CSS 网站模板，使用他们可以省下设计、前端这个阶段的工作，而程序开发是可选的，只有需要后台才需要程序编写，不需要的话也可以直接替换模板的文字、图片就行。

今天我们整理了一些优秀免费无版权限制的 HTML5 网站模板，有不同的类型，比如作品展示用的模板适合摄影师、设计师、企业产品展示等。

注：小编已经打包好，下载模板地址在文章底部哦！！

New Age

这款是 APP 产品宣传官网模板，现在有很多 APP 程序员自己开发了一些有趣 APPs，但是不懂设计或没时间来制作网站，那么这款模板就可以用上啦，使用Bootstrap 框架搭建，手机端完全兼容。

在线演示

Howdy（个人简历式网页模板）

想做一份创意个人简历吗？请不要错过 Howdy 这款个人简历模板，设计、动画、实用性全有了！设计达人网小编推荐哦！

同时推荐：22款高端个人简历模板含PSD或HTML版本下载

还有技术展示数据表，增加简历描述的可视化，HR 看后一定会加分哦。

在线演示暂无，请下载源文件查看 DEMO ~~（建议下载查看，动画好帅）

Ethereal

Ethereal 模板有意思，是直接向左右滚动来查看网页，界面也的设计也很棒，喜欢个性独特风格的朋友不要错过。

在线演示

Creative

一个工作室类的单网页模板，有了个，就算你是个人，也可以用他来做个工作室一样的网站，用于宣传你的业务也是不错的。

在线演示

Megakit

这个免费模板可以说是超值哦，一共13种类型页面，每个页面设计都不简单哦，页面有 Service，About, Team, Events, FAQ, Contacts, Corporate, App Landing, Portfolio, Coming Soon等等，建议下载下来看 DEMO。

在线演示

Story

Story是一款左右布局为主的列表展示页以及作品展示，适用于作品介绍。

同时还支援当前页面弹窗来展示作品图片，很适合用来放自己的作品上去。

在线演示

Agency

在线演示

Karmo

超时尚的 Protfolio 网页模板，Bootstrap 模板构建，布局新颖，再加上流畅的动画效果，Nice！

有4个主要页面，分别是：Home / Services / SingleProject / Contact.

免费有这样的质量，真的超值哦！

在线演示

KapukAlas

响应式模板 KapukAlas，首页效果不错，但目前只有首页，如果有子页面就更好了！

在线演示 (HTML演示请下载源文件方可查看）

AitOnepage

这款主师来自 keenthemes 出品，质量很棒，流行的单页面设计，布局有 Aabout,Products, Pricing, Work, Service 和 Contact页面。

在线演示

Magnet

想展示作品集，并且喜欢简约设计感？嘿嘿~ 这个经典简约模板是不二之先啊。

在线演示

头条不给放网盘地址，需要下载的的，私信我！

1），模板文件add_jsp_.ftl

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%
String childPath = request.getContextPath();
String basePath = request.getScheme() + "://"
	+ request.getServerName() + ":" + request.getServerPort() + childPath +"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
	<%@ include file="/pub/scripts.jsp"%>

    <script type="text/javascript">

		function submit_save() {

			var varName_ = $("#name_").val();
			if(varName_ == null || varName_ == '') {
			    alert("请先输入名称！")
			    return false;
			} else {
                $("#addForm").submit();
			}
        }
    </script>
    
  </head>
  <body>
  		
		<!-- 标题区域 -->
		<div class="tleBg">
			<div class="title">
				<span class="txt"> <em></em><#list mapDataTableComment as listItmCom > ${listItmCom.columnComment} </#list>- 新增
				</span> <a href="javascript：;" class="search-hide"></a>
			</div>
			<div class="clr"></div>
		</div>
  		
  		<!-- 查询维度区域 -->
		<div class="t_list" id="addtable">
			<form name="addForm" id="addForm" action="<%=childPath %>/testT00_userConter/testT00_userAddSave" method="post">

				<table border="0" cellspacing="0" width="100%" cellpadding="0" class="t_list_1">
					<tbody>
					
					
					<#list mapDataList as listItm >
						
						<tr style="line-height: 36px;">
							<td width="15%">
								 
							</td>
							<td width="20%" class="text" style="text-align: right;">
								${listItm.columnComment}：
							</td>
							<td>
								<input type="text" id="${listItm.columnName}" name="${listItm.columnName}" style="width: 300px;" class="inputStyle" value="原左大括<#list mapDataTableComment as listItmCom > ${listItmCom.columnName} </#list>.${listItm.columnName}原右大括" />
							</td>
							<td width="15%">
								 
							</td>
						</tr>
					</#list>

					
						<tr>
							<td width="15%">
								 
							</td>
							<td width="20%" class="text" style="text-align: right;">
								 
							</td>
							<td>
								<input type="button" id="btn_add" value="保 存" class="t_button_gray" onclick="return submit_save();" />
								<input type="reset" id="btn_rest" value="重 置" class="t_button_gray" />
							</td>
							<td width="15%">
								 
							</td>
						</tr>

					</tbody>
				</table>
			</form>
		</div>
  		
  </body>
</html>

（2），根据模板及表元数据生成新增jsp页面

import freemarker.template.Configuration;
import freemarker.template.Template;

import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStreamWriter;
import java.io.Writer;
import java.sql.*;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @date: 2022/12/03 08:27
 * @desc: 测试入口
 */
public class TestCls {

    public static void main(String[] args) throws Exception {
        new TestCls().outTemplate();
    }

    // 输出到模板
    private void outTemplate() throws Exception {

        Configuration configuration = new Configuration();
        configuration.setDirectoryForTemplateLoading(new File("F:\\xbl\\myResource\\temp_test_"));
        Template template = configuration.getTemplate("add_jsp_.ftl");

        Map<String, List<EntryInfoPo>> dataMap = new HashMap<String, List<EntryInfoPo>>();
        List<EntryInfoPo> listEntryInfo = new ArrayList<EntryInfoPo>();
        listEntryInfo = testMetaAddComment();
        dataMap.put("mapDataList", listEntryInfo );

        // 表注释
        dataMap.put("mapDataTableComment", testTableComment());

        Writer outputWriter = new OutputStreamWriter(new FileOutputStream(new File("F:\\xbl\\myResource\\temp_test_\\add_.jsp") ) );
//        Writer outputWriter = new OutputStreamWriter(System.out );
        template.process(dataMap, outputWriter);
        System.out.println("输出完成！");
        outputWriter.close();
    }

    // 表注释
    private List<EntryInfoPo> testTableComment() throws Exception {

        List<EntryInfoPo> listTableComment = new ArrayList<EntryInfoPo>();
        EntryInfoPo entryInfoPo = new EntryInfoPo();
        entryInfoPo.setColumnName("testT00_userDto");
        entryInfoPo.setColumnComment("用户管理");
        listTableComment.add(entryInfoPo);
        return listTableComment;
    }

    private List<EntryInfoPo> testMetaAddComment() throws Exception {

        List<EntryInfoPo> listEntryInfoPo = new ArrayList<EntryInfoPo>();
        Connection connection = getDataBaseConnection();
        Statement statement = connection.createStatement();
        ResultSet resultSet = statement.executeQuery("show full columns from t00_user ");
        while (resultSet.next()) {

            String columnComment = resultSet.getString("Comment");
            String columnName = resultSet.getString("Field");
            EntryInfoPo entryInfoPo = new EntryInfoPo();
            entryInfoPo.setColumnName(columnName);
            entryInfoPo.setColumnComment(columnComment);
            listEntryInfoPo.add(entryInfoPo);
        }
        return listEntryInfoPo;
    }
    private Connection getDataBaseConnection() throws Exception {
        // 连接数据库
        Class.forName("com.mysql.jdbc.Driver");
        String databaseUrl = "jdbc:mysql://127.0.0.1:3306/grcdb05?useUnicode=true&characterEncoding=utf8";
        Connection connection = DriverManager.getConnection(databaseUrl, "root", "root");
        return connection;
    }
}

（3），创建一个空文件add_.jsp，执行步骤（2）能生成页面

现代社会，网页已经成为企业、个人展示和宣传的重要窗口，因此掌握网页制作技能是非常有必要的。今天，我们将为大家介绍8款优秀的网页设计模板网站，哪怕是小白也能帮助你快速搭建出令人惊艳的网页。

一、即时设计

即时设计是一款支持在线协作的专业级 UI 设计工具，用户数已突破230万，支持 Sketch、Figma、XD 格式导入，无需下载，在线使用。10000+精选设计资源、100+提效插件即拿即用；支持创建交互原型、获取设计标注，为产设研团队提供一站式协同办公体验，一个链接即可完成交付，内容修改实时同步。

响应式网页设计：

优点：

漏标的地方开发者也可以自行切图
支持多平台预设及批量导出
颜色整合显示，一键定位对应元素

二、17素材

17素材网主要收集jQuery网页特效、jQuery网页代码、网站模板、网页模板、企业模板、商城模板、图标等素材，为html网站模板开发人员提供高效率的工作方式。

部分素材需要积分才能下载。

三、 jquery 插件库

jQuery插件库是一组由开发者编写的、可重复使用的jQuery插件集合，为Web开发人员提供了多种常用功能的封装。这些插件可以快速实现诸如表单验证、图片轮播、下拉菜单、模态框等功能，使得Web开发人员能够更快地完成开发任务，减少代码重复性工作。

它快速、轻量并且简化了我们浏览 HTML 文档和操作页面元素的方式。因为它还具有高度可扩展性，所以在框架之上构建了许多jQuery 插件来为网站添加功能。从 UI 组件和元素到布局和网格，有一个jQuery 插件可以满足您网站所需的几乎所有功能。

详情页还可以查看详细代码。

四、凡科建站

凡科建站提供自助建站、做网站、快速建站等营销推广服务，凡科建站平台提供网站模板资源，拥有2000万+流量入口，精选优质服务商，7*8在线服务；四大搜索覆盖，快速上线，全网曝光，助力商家完成营销目标。

网站模板图片素材定期更新，简单易操作，小白也会使用；而且拥有SEO框架布局，首页、栏目产品及文章页均可独立设置标题/关键词/描述；后台直接修改联系方式、传真、邮箱、地址等，修改更加方便；同一个后台管理，四网合一，用户体验好！

优点：

3000+精美网站模板，免费使用
100+行业覆盖，应有尽有
素材丰富，图片、字体、视频等多种素材

五、网站模板库

网站模板库提供大量精选高质量并永久免费的(网站模版、网页模板、手机模板、企业网站模板、网站模版)，包括html模板、后台管理模板、博客模板及各行业类型等上千种模版。

模板素材众多。

优点：

后台操作简单，功能全面
分类详细，可以根据自己的需求快速找到合适的模板
网站自适应，根据屏幕大小改变网站布局，不变形

六、模板

提供海量精美免费网站模板、企业网站模板、html模板网站、公司网站模板、手机网站模板、自适应网站模板等免下载使用。

该网站收集了大量优质网站设计作品，适用于多个专业的 WordPress 主题模板、HTML5模板、CSS Menu等实用资源。

特色：

100%的响应
漂亮和干净的设计
清洁和注释代码

七、AB模板网

AB模板网专注企业网站模板制作，包括企业pbootcms网站模板，静态网页模板，网站源码下载，HTML网站模板等等。

这个网站专门提供织梦的网页模板，性质和上面一样，也是上传到服务器上。

特点：

手工书写DIV+CSS、代码精简无冗余
分类详细，根据需要直接定位
SEO框架布局，栏目及文章页均可独立设置标题/关键词/描述

八、织梦猫

织梦猫是一个网站模板分享交流平台，网站以织梦模板、建站资讯、织梦教程为主要内容，以“共享创造价值”为理念，以“尊重原创”为准则。满足用户不同的网站模板需求。

同样也提供dedecms的网页模板。

模板安装方法：

下载最新的织梦dedecms5.7 UTF8版本。
解压下载的织梦安装包，得到docs和uploads两个文件夹，将uploads里面的所有文件和文件夹上传到你的网站根目录
安装dede系统。(如果您已经安装,请跳过本步.)直接运行：http://您的域名/install
将web文件夹内的所有文件夹上传并覆盖到织梦的安装目录;
登陆后台并还原数据库：

1）进入dede后台，找到“系统”-“数据库备份/还原”

2）在屏幕右上角点击“数据还原”

3）点击屏幕下方的'开始还原'按钮

确定网站风格（无论是否修改，都点击一下确定）：

1）点击“系统”---系统基本参数

2）将“站点根网址”改为您的网址，如http://www.xxx.com/（本地安装请保持http://127.0.0.1。）

3）点击“确定”按钮

更新整站缓存：点击“生成”-“更新系统缓存”
更新网站：点击“生成”-“一键更新网站”-“更新所有”-“开始更新” 点击“生成”-“更新主页html” 至此，模板安装结束

这些网页模板网站提供了多样化的选择，从专业的商业网站到个人博客，从免费的模板到付费的高级模板，满足了不同用户的需求。无论您是有设计经验的专业人士还是初学者，这些网站都能帮助您快速搭建一个具有吸引力和功能性的网站。

如果你还有更好的方式或工具推荐，记得在评论区互动讨论！

整合营销服务商

11款流行的HTML5网站模板（完全免费，内附下载地址）

一、即时设计

二、17素材

三、 jquery 插件库

四、凡科建站

五、网站模板库

六、模板

七、AB模板网

八、织梦猫

更多工具推荐

您的项目需求