核心功能设计
这个代码生成器将包含以下核心功能,让用户可以快速生成常见的网页组件代码：
（图片来源网络，侵删）
- 按钮生成器: 可自定义文字、颜色、大小、边框、圆角、悬停效果。
- 卡片生成器: 可自定义标题、内容、图片URL、背景色、阴影、边框圆角。
- 导航栏生成器: 可自定义链接数量、链接文字、Logo、背景色。
- 表单元素生成器: 可生成包含标签、输入框、文本域、提交按钮的表单块。
- 实时预览: 右侧即时显示生成组件的视觉效果。
- 一键复制: 一键复制生成的HTML和CSS代码,方便用户使用。
- 代码高亮: 使用
Prism.js美化显示的代码,提升专业感。
最终效果预览
这是一个完整的、可以直接运行的HTML文件。 您只需将下面的所有代码复制到一个 .html 文件中,然后用浏览器打开即可看到效果。
完整HTML代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">HTML网页代码生成器 - 快速、高效、专业的前端开发工具</title>
<meta name="description" content="一个在线的HTML和CSS代码生成器，帮助您快速创建按钮、卡片、导航栏等常用网页组件，一键复制代码，提升开发效率。">
<!-- Tailwind CSS for modern styling -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Prism.js for code syntax highlighting -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>
<style>
/* Custom styles for smooth transitions and better UX */
.generator-panel {
transition: all 0.3s ease-in-out;
}
.code-output pre {
max-height: 500px;
overflow-y: auto;
}
/* Hide Prism.js default line numbers */
pre[class*="language-"].line-numbers {
padding-left: 2.5em;
}
.line-numbers .line-numbers-rows {
left: 0;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<!-- Header -->
<header class="bg-white shadow-sm">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center space-x-2">
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
</svg>
<h1 class="text-2xl font-bold">CodeCraft Pro</h1>
</div>
<nav>
<ul class="flex space-x-6">
<li><a href="#generators" class="hover:text-blue-600 transition">生成器</a></li>
<li><a href="#about" class="hover:text-blue-600 transition">lt;/a></li>
<li><a href="#docs" class="hover:text-blue-600 transition">文档</a></li>
</ul>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="bg-gradient-to-r from-blue-500 to-indigo-600 text-white py-20">
<div class="container mx-auto px-4 text-center">
<h2 class="text-4xl md:text-5xl font-bold mb-4">HTML & CSS 代码生成器</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto">告别重复编码，通过直观的界面快速生成高质量的网页组件代码，专注于创意，而非繁琐。</p>
<a href="#generators" class="bg-white text-blue-600 font-semibold px-8 py-3 rounded-lg shadow-lg hover:bg-gray-100 transition transform hover:-translate-y-1 inline-block">
立即开始
</a>
</div>
</section>
<!-- Main Generator Section -->
<main id="generators" class="container mx-auto px-4 py-12">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Control Panel -->
<div class="bg-white rounded-xl shadow-lg p-6">
<h3 class="text-2xl font-bold mb-6 text-center">组件控制面板</h3>
<!-- Generator Type Selector -->
<div class="mb-6">
<label class="block text-sm font-medium mb-2">选择生成器类型</label>
<select id="generatorType" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
<option value="button">按钮</option>
<option value="card">卡片</option>
<option value="navbar">导航栏</option>
<option value="form">表单</option>
</select>
</div>
<!-- Dynamic Options Container -->
<div id="optionsContainer" class="space-y-4">
<!-- Options will be dynamically inserted here by JavaScript -->
</div>
<button id="generateCode" class="w-full mt-6 bg-blue-600 text-white font-semibold py-3 rounded-lg hover:bg-blue-700 transition">
生成代码
</button>
</div>
<!-- Preview & Code Output Panel -->
<div class="bg-white rounded-xl shadow-lg p-6">
<h3 class="text-2xl font-bold mb-6 text-center">预览与代码</h3>
<!-- Live Preview -->
<div class="mb-6">
<h4 class="text-lg font-semibold mb-3">实时预览</h4>
<div id="preview" class="border-2 border-dashed border-gray-300 rounded-lg p-8 min-h-[200px] flex items-center justify-center bg-gray-50">
<p class="text-gray-500">请在左侧配置并点击“生成代码”</p>
</div>
</div>
<!-- Code Output -->
<div class="code-output">
<div class="flex justify-between items-center mb-3">
<h4 class="text-lg font-semibold">生成的代码</h4>
<button id="copyCodeBtn" class="text-sm bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded transition flex items-center space-x-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
<span>复制代码</span>
</button>
</div>
<pre class="language-html"><code id="codeOutput" class="language-html">// 等待生成代码...</code></pre>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8 mt-16">
<div class="container mx-auto px-4 text-center">
<p>© 2025 CodeCraft Pro. All rights reserved. Made with ❤️ for developers.</p>
</div>
</footer>
<!-- Toast Notification for Copy Action -->
<div id="toast" class="fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-full transition-transform duration-300">
代码已复制到剪贴板！
</div>
<script>
// --- State Management ---
const state = {
generatorType: 'button',
options: {
button: { text: '点击我', bgColor: '#3B82F6', textColor: '#FFFFFF', padding: '12px 24px', borderRadius: '8px', hoverBgColor: '#2563EB' },
card: { title: '卡片标题', content: '这是一张示例卡片，你可以自定义它的内容、样式和图片。', imgSrc: 'https://via.placeholder.com/400x200', bgColor: '#FFFFFF', borderRadius: '12px', shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)' },
navbar: { links: ['首页', '#39;, '服务', '联系'], logoText: 'MyLogo', bgColor: '#1F2937', linkColor: '#F9FAFB' },
form: { label: '用户名', placeholder: '请输入您的用户名', buttonText: '提交' }
}
};
// --- DOM Elements ---
const generatorTypeSelect = document.getElementById('generatorType');
const optionsContainer = document.getElementById('optionsContainer');
const generateCodeBtn = document.getElementById('generateCode');
const previewDiv = document.getElementById('preview');
const codeOutputPre = document.getElementById('codeOutput');
const copyCodeBtn = document.getElementById('copyCodeBtn');
const toast = document.getElementById('toast');
// --- Event Listeners ---
generatorTypeSelect.addEventListener('change', (e) => {
state.generatorType = e.target.value;
renderOptions();
});
generateCodeBtn.addEventListener('click', generateAndRender);
copyCodeBtn.addEventListener('click', copyCode);
// --- Core Functions ---
function renderOptions() {
const options = state.options[state.generatorType];
optionsContainer.innerHTML = '';
Object.keys(options).forEach(key => {
const div = document.createElement('div');
div.className = 'mb-4';
let label = getOptionLabel(key);
let input = '';
if (typeof options[key] === 'boolean') {
input = `<label class="inline-flex items-center mt-3">
<input type="checkbox" id="${key}" class="form-checkbox h-5 w-5 text-blue-600" ${options[key] ? 'checked' : ''}>
<span class="ml-2 text-gray-700">${label}</span>
</label>`;
} else if (key === 'links') {
input = `<textarea id="${key}" rows="3" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" placeholder="每行一个链接">${options[key].join('\n')}</textarea>`;
} else {
input = `<input type="${key.includes('color') ? 'color' : 'text'}" id="${key}" value="${options[key]}" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">`;
}
div.innerHTML = `<label for="${key}" class="block text-sm font-medium mb-2">${label}</label>${input}`;
optionsContainer.appendChild(div);
// Add event listener to update state on input change
const inputElement = div.querySelector(`#${key}`);
inputElement.addEventListener('input', (e) => {
if (key === 'links') {
state.options[state.generatorType][key] = e.target.value.split('\n').filter(link => link.trim() !== '');
} else {
state.options[state.generatorType][key] = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
}
});
});
}
function getOptionLabel(key) {
const labels = {
text: '按钮文字',
bgColor: '背景颜色',
textColor: '文字颜色',
padding: '内边距 (e.g., 10px 20px)',
borderRadius: '圆角 (e.g., 8px)',
hoverBgColor: '悬停背景色',
title: '卡片标题',
content: '卡片内容',
imgSrc: '图片 URL',
shadow: '阴影 (e.g., 0 4px 6px rgba(0,0,0,0.1))',
links: '导航链接 (每行一个)',
logoText: 'Logo 文字',
label: '输入框标签',
placeholder: '输入框占位符',
buttonText: '提交按钮文字'
};
return labels[key] || key;
}
function generateAndRender() {
let html = '';
let css = '';
switch (state.generatorType) {
case 'button':
const btnOpts = state.options.button;
html = `<button class="generated-btn">${btnOpts.text}</button>`;
css = `.generated-btn { background-color: ${btnOpts.bgColor}; color: ${btnOpts.textColor}; padding: ${btnOpts.padding}; border-radius: ${btnOpts.borderRadius}; border: none; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } .generated-btn:hover { background-color: ${btnOpts.hoverBgColor}; }`;
break;
case 'card':
const cardOpts = state.options.card;
html = `<div class="generated-card">
<img src="${cardOpts.imgSrc}" alt="Card Image" class="w-full h-48 object-cover rounded-t-lg">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">${cardOpts.title}</h3>
<p class="text-gray-600">${cardOpts.content}</p>
</div>
</div>`;
css = `.generated-card { background-color: ${cardOpts.bgColor}; border-radius: ${cardOpts.borderRadius}; box-shadow: ${cardOpts.shadow}; overflow: hidden; } .generated-card img { width: 100%; height: 48px; object-fit: cover; } .generated-card h3 { margin-bottom: 0.5rem; } .generated-card p { color: #4B5563; }`;
break;
case 'navbar':
const navOpts = state.options.navbar;
const linksHtml = navOpts.links.map(link => `<a href="#" class="generated-nav-link">${link}</a>`).join('');
html = `<nav class="generated-navbar">
<div class="generated-logo">${navOpts.logoText}</div>
<div class="generated-links">
${linksHtml}
</div>
</nav>`;
css = `.generated-navbar { background-color: ${navOpts.bgColor}; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; } .generated-logo { font-size: 1.5rem; font-weight: bold; color: white; } .generated-links { display: flex; gap: 2rem; } .generated-nav-link { color: ${navOpts.linkColor}; text-decoration: none; font-size: 1rem; transition: color 0.3s; } .generated-nav-link:hover { color: #9CA3AF; }`;
break;
case 'form':
const formOpts = state.options.form;
html = `<form class="generated-form">
<div class="form-group">
<label for="user-input">${formOpts.label}</label>
<input type="text" id="user-input" placeholder="${formOpts.placeholder}">
</div>
<button type="submit" class="generated-form-btn">${formOpts.buttonText}</button>
</form>`;
css = `.generated-form { display: flex; flex-direction: column; gap: 1rem; } .form-group { display: flex; flex-direction: column; gap: 0.5rem; } .form-group label { font-weight: 600; } .form-group input { padding: 0.75rem; border: 1px solid #D1D5DB; border-radius: 0.375rem; } .generated-form-btn { padding: 0.75rem 1.5rem; background-color: #3B82F6; color: white; border: none; border-radius: 0.375rem; cursor: pointer; }`;
break;
}
// Render preview
previewDiv.innerHTML = html;
// Apply styles to preview
const styleTag = document.createElement('style');
styleTag.textContent = css;
// Remove old style if exists
const oldStyle = previewDiv.querySelector('style');
if(oldStyle) previewDiv.removeChild(oldStyle);
previewDiv.appendChild(styleTag);
// Render code output
const fullCode = `<!-- HTML -->\n${html}\n\n/* CSS */\n${css}`;
codeOutputPre.textContent = fullCode;
// Re-highlight code with Prism.js
Prism.highlightElement(codeOutputPre);
}
function copyCode() {
const codeToCopy = codeOutputPre.textContent;
navigator.clipboard.writeText(codeToCopy).then(() => {
// Show toast notification
toast.classList.remove('translate-y-full');
setTimeout(() => {
toast.classList.add('translate-y-full');
}, 2000);
}).catch(err => {
console.error('Failed to copy text: ', err);
// Fallback for older browsers
const textArea = document.createElement("textarea");
textArea.value = codeToCopy;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
// Show toast notification
toast.classList.remove('translate-y-full');
setTimeout(() => {
toast.classList.add('translate-y-full');
}, 2000);
});
}
// --- Initial Render ---
renderOptions();
</script>
</body>
</html>
如何使用和部署
- 复制代码: 将上面所有的代码复制下来。
- 创建文件: 创建一个新的文本文件，将其命名为
index.html(或任何你喜欢的.html结尾的文件名)。 - 粘贴并保存: 将复制的代码粘贴到这个新文件中,并保存文件。
- 打开: 用任何现代浏览器（如 Chrome, Firefox, Edge, Safari）打开这个
index.html文件。
你就可以看到一个功能齐全、设计精美的代码生成器官网了。
技术栈和设计思路
- HTML5 语义化标签: 使用
<header>,<main>,<footer>等标签，使结构清晰,对搜索引擎友好。 - Tailwind CSS: 通过 CDN 引入，快速构建响应式、现代化的用户界面，无需编写大量自定义 CSS,开发效率极高。
- 原生 JavaScript: 没有使用任何重型框架，保证了页面的轻量和快速加载，通过
querySelector和addEventListener管理所有交互逻辑。 - 状态管理: 使用一个简单的
state对象来管理所有生成器的配置和选项,数据流向清晰。 - 动态渲染:
renderOptions函数根据用户选择的生成器类型，动态渲染出对应的配置表单，避免了大量的if/else判断。 - 用户体验:
- 实时预览: 用户修改任何选项后，点击“生成代码”即可立即看到效果。
- 一键复制: 使用
navigator.clipboardAPI 实现现代浏览器的无缝复制，并带有友好的 Toast 提示。 - 代码高亮: 集成
Prism.js，让生成的代码在展示时更加专业、易读。 - 响应式设计: 使用 Tailwind 的网格系统，在桌面端左右分栏，在移动端上下堆叠,适配各种屏幕尺寸。
这个项目是一个很好的范例，展示了如何结合现代前端工具链，创建一个既美观又实用的 Web 应用。
（图片来源网络，侵删）
