ChatGPT零基础入门制作精美HTML网页Prompt教程 |
您所在的位置：网站首页 › 百科网页制作 › ChatGPT零基础入门制作精美HTML网页Prompt教程 |
ChatGPT零基础入门制作精美HTML网页Prompt教程
使用ChatGPT零基础制作精美HTML功能性网页
这是一个实战的教程，让你可以0基础搭建一个HTML静态网页，网页的界面和功能类似于本站之前为大家所搭建的Prompt模板网页。 本次搭建主要使用的工具为ChatGPT和VS Code，有时候ChatGPT并不能够直接给出正确的答案，因为它的回答具有随机性，所以如果你不能够一次性获取正确的答应时，应该尝试反复更改Prompt，尽可能详细才可以有更大概率得到正确的预期结果。如果你确定自己的提示词没有问题，那就多问几次，可能有一次是可以给你正确答案的。 前置条件在执行项目安装之前，我们需要先安装Visual Studio Code代码编辑器，推荐同时安装Google浏览器或Edge微软默认浏览器也可以。 Visual Studio Code官方下载地址：Visual Studio Code – Code Editing. Redefined 浏览器二选其一下载即可，如果你的电脑中默认存在Edge浏览器，可以跳过此步骤。 Google浏览器官方下载地址：Google Chrome 网络浏览器 Edge浏览器官方下载地址：Microsoft Edge 网络浏览器 Visual Studio Code环境配置为方便理解和书写，本站以后称呼该代码编辑器为VS Code。 在我们下载完成之后，双击打开该软件，自动安装即可，不需要复杂的配置。 
安装完成后，将会看到如上的界面，这就是VS Code的主界面啦，可能和我的不太一样，但也大同小异。 我们此时需要做的就是安装一个插件，该插件的名字为Live Server。这个插件的好处是，当我们编辑HTML文件并保存之后，可以实时预览网页更改之后的样式，这非常方便，可以让我们更加灵活快捷的预览所有操作。 安装此插件的方式非常简单，在主界面的左侧找到扩展功能，然后搜索想要安装的插件名字Live Server，点击安装后重启VS Code即可。 
基础准备
在开始制作之前，我们还需要一个工作目录。也就是新建一个文件夹，然后在VS Code中，打开该文件夹。 工作目录位置随意，名称随意，只要你能自己找到就好。 
此时我们还需要在此文件夹内新建一个文件，这个文件夹就是我们的HTML网页文件啦。 我们新建一个名为index.html的文件，该文件就是我们这个网站的首页。为什么叫index.html？emmm，所有的网站首页文件基本都叫index.html，所以建议不要乱改，不然其它依赖服务可能找不到主页文件。 
好啦，准备工作结束，后面我们就要开始编写代码了。 HTML教程以下部分内容并没有严格根据HTML语言的规范和命名方式等，因为个别专业术语听起来晦涩难懂，不利于零基础的人学习。 基础知识既然我们是零基础，那么有问题肯定是要问ChatGPT的啦，下面是站长询问ChatGPT的Prompt，没有任何技巧，就像直接问你的老师一样。 我是一个对于网页开发零基础的人，现在想写一个简单的HTML网页，现在我很迷茫，不知道该如何开始，请给我一个HTML网页的示例代码。得到的回复如下： 当然可以，以下是一个简单的HTML网页示例代码： 我的第一个网页 body { background-color: #f0f0f0; font-family: Arial, sans-serif; } h1 { color: #333; } 欢迎来到我的网页！这是一个简单的HTML网页示例。 ©2023 我的网站 这个HTML代码的基本结构包含： : 定义文档类型和版本，这行告诉浏览器这是一个HTML5文档。 : 这是所有HTML代码的根元素。 : 包含一些元数据，如文档的字符编码，连接到样式表和脚本的链接等。 : 定义字符编码为UTF-8。 : 定义网页标题，显示在浏览器的标题栏或标签页上。 : 用于内部样式表，包含CSS代码，用于定义网页的布局和样式。 : 包含网页的所有内容，如文本，图像，视频，游戏，可播放音频等。 , , : HTML5的新元素，用于提高代码的可读性和可维护性。 在 标签中的 , , 等标签用于放置实际的网页内容。例如， 是一个标题元素，是一个段落元素。 希望这个示例可以帮助你开始你的网页开发旅程。如果你有任何进一步的问题，欢迎提问。 我们可以看到一部分网页的源码，我们将这些复制下载，粘贴到VS Code中，然后点击右下角的Go Live按钮。 
在点击右下角的Go Live按钮之后，我们将会看到如下界面。 
这看起来非常非常的简陋，但最起码我们已经成功的运行起来啦。 地址栏中的127.0.0.1:5500/index.html就是当前我们访问的网址，站长来解释一下这是什么意思。这个网址可以分为两个部分来理解，127.0.0.1:5500中的127.0.0.1就是我们的本机IP，5500是端口号，index.html是我们所写的网页文件。不理解？没关系，因为这并不重要。 我们此时可以修改部分内容，然后按下保存键，再切换回浏览器就会发现，浏览器中的文字也是被实时更新的。 
如果修改文件后，你的浏览器器内并没有更新内容，那么大概率是因为你没有按保存，如果不保存是无法刷新的哦。 
下面我们回来看一下源码，各源码代表了什么意思。为了方便大家理解，站长在每一行的代码上面加入注释，HTML的注释写法为。 我的第一个网页 body { background-color: #f0f0f0; font-family: Arial, sans-serif; } h1 { color: #333; } 欢迎来到开源AI百科教程网站！这是一个简单的HTML网页示例。 ©2023 openai.wiki 站长为每一行加了注释，大家应该看的懂吧，一个HTML的主要格式结构差不多就是这样的。所有标签基乎都是成双成对出现的，起始为，结束为，中间的内容就是该标签的子体。 网页标题 网页的风格写在这里，比如按钮是什么风格的？文字是什么颜色的？ 网页的实际内容写在这里现在的网页过于简单，如果你的网页还需要加一些特效，比如点击某个按钮之后可以自动复制一段文字，那么还需要加入一个代码块。 网页标题 网页的风格写在这里，比如按钮是什么风格的？文字是什么颜色的？ 网页的实际内容写在这里 脚本代码写在这里好啦，现在我们已经到HTML有了一个初步的基础认识，下面来继续问GPT应该怎么写。 表格制作想要让GPT帮你做一个网页，肯定是要先分析，你都要什么功能的，然后再让ChatGPT帮你来写。 既然我们想要仿照Prompt助手 (openai.wiki)这个网页来制作，那我们肯定需要先做一个表格，因为这是这个网站的核心功能。 帮我在这个网页中加入一个表格 我的第一个网页 body { background-color: #f0f0f0; font-family: Arial, sans-serif; } h1 { color: #333; } table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #ddd; padding: 8px; } 欢迎来到我的网页！这是一个简单的HTML网页示例。 姓名 电子邮件 年龄 张三 [email protected] 25 李四 [email protected] 28©2023 我的网站 
目前还很丑陋，很多东西也没写，站长先改一下，删除年龄一列，将姓名和电子邮件更改为类型和描述。 openai.wiki body { background-color: #f0f0f0; font-family: Arial, sans-serif; } h1 { color: #333; } table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #ddd; padding: 8px; } Prompt助手这是一个简单的HTML网页示例，由openai.wiki提供。 类型 描述 张三 [email protected] 李四 [email protected]©2023 prompt.openai.wiki 
还是很丑陋，我们可以先加一张背景图片，还需要在鼠标经过单元格时可以有一个动画，这样可以更加炫酷一点。 下面是我的HTML代码，我需要加一张背景图片，还需要鼠标悬停表格的某一行时可以有动画，请给出修改后的完整代码。 openai.wiki body { background-image: url('background.jpg'); /* 背景图片的路径，根据你的图片位置进行修改 */ background-size: cover; /* 让背景图片充满整个页面 */ font-family: Arial, sans-serif; } h1 { color: #333; } table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #ddd; padding: 8px; } tr:hover { background-color: #f5f5f5; /* 鼠标悬停时改变行的背景颜色 */ transform: scale(1.02); /* 鼠标悬停时放大行 */ transition: transform 0.3s ease-in-out; /* 添加动画效果 */ } Prompt助手这是一个简单的HTML网页示例，由openai.wiki提供。 类型 描述 张三 [email protected] 李四 [email protected]©2023 prompt.openai.wiki 可以在代码中看到，我们需要将一张希望做为背景图的图片命名为background.jpg，然后移动至Demo文件夹下即可，还有就是鼠标经过之后，已经可以有动画效果啦。 本站提供一张背景图给大家，记得重命名，然后保存看一下结果。 
文字颜色改成白色可能更好一些，鼠标悬停时的单元格颜色变为红色，直接问GPT即可。 我希望鼠标悬停时的单元格颜色变为红色半透明，网页中所有文字的颜色变为白色，请给出修改之后的完整代码。 （这里粘贴你的当前完整代码） openai.wiki body { background-image: url('background.jpg'); /* 背景图片路径，根据你的图片位置进行修改 */ background-size: cover; /* 让背景图片充满整个页面 */ font-family: Arial, sans-serif; color: #ffffff; /* 将所有文字颜色设置为白色 */ } h1 { color: #ffffff; } table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #ddd; padding: 8px; color: #ffffff; /* 将表格中的文字颜色设置为白色 */ } tr:hover td { background-color: rgba(255, 0, 0, 0.5); /* 鼠标悬停时改变单元格的背景颜色为红色半透明 */ transform: scale(1.02); /* 鼠标悬停时放大行 */ transition: transform 0.1s ease-in-out; /* 添加动画效果 */ } Prompt助手这是一个简单的HTML网页示例，由openai.wiki提供。 类型 描述 张三 [email protected] 李四 [email protected]©2023 prompt.openai.wiki 
表格动态加载
我们如果一行一行来写内容，那真的是太麻烦了，而且工作量巨大。 我们可以弄一个Json表格出来，把需要的内容都写在这个文档里，然后我们在网页中动态加载这个表格，以后如果想更改表格内容的话，直接更改这个文档即可。 [ { "act": "担任雅思写作考官", "category":"职业", "prompt": "我希望你假定自己是雅思写作考官，根据雅思评判标准，按我给你的雅思考题和对应答案给我评分，并且按照雅思写作评分细则给出打分依据。此外，请给我详细的修改意见并写出满分范文。第一个问题是：It is sometimes argued that too many students go to university, while others claim that a university education should be a universal right.Discuss both sides of the argument and give your own opinion.对于这个问题，我的答案是：In some advanced countries, it is not unusual for more than 50% of young adults to attend college or university. Critics, however, claim that many university courses are worthless and young people would be better off gaining skills in the workplace. In this essay, I will examine both sides of this argument and try to reach a conclusion.There are several reasons why young people today believe they have the right to a university education. First, growing prosperity in many parts of the world has increased the number of families with money to invest in their children’s future. At the same time, falling birthrates mean that one- or two-child families have become common, increasing the level of investment in each child. It is hardly surprising, therefore, that young people are willing to let their families support them until the age of 21 or 22. Furthermore, millions of new jobs have been created in knowledge industries, and these jobs are typically open only to university graduates.However, it often appears that graduates end up in occupations unrelated to their university studies. It is not uncommon for an English literature major to end up working in sales, or an engineering graduate to retrain as a teacher, for example. Some critics have suggested that young people are just delaying their entry into the workplace, rather than developing professional skills.请依次给到我以下内容：具体分数及其评分依据、文章修改意见、满分范文。\n" }, { "act": "充当 Linux 终端", "category":"编程", "prompt": "我想让你充当 Linux 终端。我将输入命令，您将回复终端应显示的内容。我希望您只在一个唯一的代码块内回复终端输出，而不是其他任何内容。不要写解释。除非我指示您这样做，否则不要键入命令。当我需要用英语告诉你一些事情时，我会把文字放在中括号内[就像这样]。我的第一个命令是 pwd\n" }, ----------------------- 省略中间内容过长内容 ----------------------- { "act": "充当英语翻译和改进者", "category":"翻译", "prompt": "我希望你能担任英语翻译、拼写校对和修辞改进的角色。我会用任何语言和你交流，你会识别语言，将其翻译并用更为优美和精炼的英语回答我。请将我简单的词汇和句子替换成更为优美和高雅的表达方式，确保意思不变，但使其更具文学性。请仅回答更正和改进的部分，不要写解释。我的第一句话是“how are you ?”，请翻译它。\n" }, { "act": "充当英翻中", "category":"翻译", "prompt": "下面我让你来充当翻译家，你的目标是把任何语言翻译成中文，请翻译时不要带翻译腔，而是要翻译得自然、流畅和地道，使用优美和高雅的表达方式。请翻译下面这句话：“how are you ?”\n" } ] prompt 下载 类型： JSON 大小： 64.05KB我们下载这个prompt.json文件，将其移动至Demo文件夹下，这样HTML将会自动查找文件，然后我们将后续的需求告诉GPT即可。 现在的表格内容我们希望是手动书写的，而是通过自动加载本地json文件来动态获取。 我已经把一个名为prompt.json的文件放置在html的相同目录下，表格的第一列形容为json文件中的category，第二列内容为act。 当鼠标悬停于表格上时，可以自动显示当前行的prompt内容，点击某一行时，自动复制prompt文字。 我的json文件格式如下所示： [ { "act": "担任雅思写作考官", "category":"职业", "prompt": "我希望你假定自己是雅思写作考官，根据雅思评判标准，按我给你的雅思考题和对应答案给我评分，并且按照雅思写作评分细则给出打分依据。此外，请给我详细的修改意见并写出满分范文。第一个问题是：It is sometimes argued that too many students go to university, while others claim that a university education should be a universal right.Discuss both sides of the argument and give your own opinion.对于这个问题，我的答案是：In some advanced countries, it is not unusual for more than 50% of young adults to attend college or university. Critics, however, claim that many university courses are worthless and young people would be better off gaining skills in the workplace. In this essay, I will examine both sides of this argument and try to reach a conclusion.There are several reasons why young people today believe they have the right to a university education. First, growing prosperity in many parts of the world has increased the number of families with money to invest in their children’s future. At the same time, falling birthrates mean that one- or two-child families have become common, increasing the level of investment in each child. It is hardly surprising, therefore, that young people are willing to let their families support them until the age of 21 or 22. Furthermore, millions of new jobs have been created in knowledge industries, and these jobs are typically open only to university graduates.However, it often appears that graduates end up in occupations unrelated to their university studies. It is not uncommon for an English literature major to end up working in sales, or an engineering graduate to retrain as a teacher, for example. Some critics have suggested that young people are just delaying their entry into the workplace, rather than developing professional skills.请依次给到我以下内容：具体分数及其评分依据、文章修改意见、满分范文。\n" }, { "act": "充当 Linux 终端", "category":"编程", "prompt": "我想让你充当 Linux 终端。我将输入命令，您将回复终端应显示的内容。我希望您只在一个唯一的代码块内回复终端输出，而不是其他任何内容。不要写解释。除非我指示您这样做，否则不要键入命令。当我需要用英语告诉你一些事情时，我会把文字放在中括号内[就像这样]。我的第一个命令是 pwd\n" }, { "act": "充当英语翻译和改进者", "category":"翻译", "prompt": "我希望你能担任英语翻译、拼写校对和修辞改进的角色。我会用任何语言和你交流，你会识别语言，将其翻译并用更为优美和精炼的英语回答我。请将我简单的词汇和句子替换成更为优美和高雅的表达方式，确保意思不变，但使其更具文学性。请仅回答更正和改进的部分，不要写解释。我的第一句话是“how are you ?”，请翻译它。\n" }, { "act": "充当英翻中", "category":"翻译", "prompt": "下面我让你来充当翻译家，你的目标是把任何语言翻译成中文，请翻译时不要带翻译腔，而是要翻译得自然、流畅和地道，使用优美和高雅的表达方式。请翻译下面这句话：“how are you ?”\n" }] 下面是我当前的完整代码，请在此基础上进行修改，然后给我修改后的完整HTML代码。 （这里粘贴你的当前完整代码） openai.wiki body { background-image: url('background.jpg'); /* 背景图片路径，根据你的图片位置进行修改 */ background-repeat: no-repeat; /* 背景图像不重复 */ background-size: 100% 100%; /* 让背景图片充满整个页面 */ font-family: Arial, sans-serif; color: #ffffff; /* 将所有文字颜色设置为白色 */ } h1 { color: #ffffff; } table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #ddd; padding: 8px; color: #ffffff; /* 将表格中的文字颜色设置为白色 */ } tr:hover td { background-color: rgba(255, 0, 0, 0.5); /* 鼠标悬停时改变单元格的背景颜色为红色半透明 */ transform: scale(1.02); /* 鼠标悬停时放大行 */ transition: transform 0.1s ease-in-out; /* 添加动画效果 */ } Prompt助手这是一个简单的 HTML 网页示例，由 openai.wiki 提供。 类型 描述©2023 prompt.openai.wiki // 使用 fetch 加载本地 JSON 文件 fetch('prompt.json') .then(response => response.json()) .then(data => { const table = document.getElementById('promptTable'); data.forEach(item => { const row = table.insertRow(); const categoryCell = row.insertCell(); const actCell = row.insertCell(); categoryCell.innerText = item.category; actCell.innerText = item.act; // 添加鼠标悬停事件 row.addEventListener('mouseover', (event) => { showPrompt(event, item.prompt); }); // 添加点击事件 row.addEventListener('click', () => { copyPrompt(item.prompt); }); }); }) .catch(error => { console.error('Error:', error); }); // 显示提示内容 function showPrompt(event, prompt) { const promptDiv = document.getElementById('promptDiv'); if (!promptDiv) { const newPromptDiv = document.createElement('div'); newPromptDiv.id = 'promptDiv'; newPromptDiv.style.position = 'absolute'; newPromptDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; newPromptDiv.style.color = '#ffffff'; newPromptDiv.style.padding = '8px'; newPromptDiv.style.borderRadius = '4px'; document.body.appendChild(newPromptDiv); } promptDiv.innerText = prompt; promptDiv.style.top = `${event.clientY}px`; promptDiv.style.left = `${event.clientX}px`; } // 复制提示内容 function copyPrompt(prompt) { navigator.clipboard.writeText(prompt) .then(() => { alert('已复制提示内容'); }) .catch(error => { console.error('Error:', error); }); }
根据上面的代码保存之后，将会看到，基本功能已经实现。但是背景图片被拉伸的比较严重，我们应该让ChatGPT修复一下这个问题。 我现在的网页中可以理解为存在两个图层，1是背景图片，2是表格。当我的表格内容较少时，背景图片并没有被拉伸，可以正常显示。 但当我的表格内容较长，浏览器需要下滑时，背景图片会自动跟随表格的大小而拉伸放大。 我希望可以避免这个问题，我希望表格和背景图片是相互独立的，正常加载背景图片，然后该背景图片可以被锁定，然后加载表格内容，当我向下浏览时，只有表格滚动，背景图不受影响。 openai.wiki body { font-family: Arial, sans-serif; color: #ffffff; margin: 0; padding: 0; } header { background-image: url('background.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: center top; padding: 20px; text-align: center; } main { background-color: rgba(0, 0, 0, 0) !important; /* 设置透明背景 */ padding: 20px; min-height: 100vh; box-sizing: border-box; overflow-y: auto; } h1 { color: #ffffff; } table { width: 100%; border-collapse: collapse; background-color: transparent; /* 设置表格背景为透明 */ } th, td { border: 1px solid #ddd; padding: 8px; color: #ffffff; background-color: transparent; /* 设置单元格背景为透明 */ } tr:hover td { background-color: rgba(255, 0, 0, 0.5); transform: scale(1.02); transition: transform 0.1s ease-in-out; } Prompt助手这是一个简单的 HTML 网页示例，由 openai.wiki 提供。 类型 描述©2023 prompt.openai.wiki // 使用 fetch 加载本地 JSON 文件 fetch('prompt.json') .then(response => response.json()) .then(data => { const table = document.getElementById('promptTable'); data.forEach(item => { const row = table.insertRow(); const categoryCell = row.insertCell(); const actCell = row.insertCell(); categoryCell.innerText = item.category; actCell.innerText = item.act; // 添加鼠标悬停事件 row.addEventListener('mouseover', (event) => { showPrompt(event, item.prompt); }); // 添加点击事件 row.addEventListener('click', () => { copyPrompt(item.prompt); }); }); }) .catch(error => { console.error('Error:', error); }); // 显示提示内容 function showPrompt(event, prompt) { const promptDiv = document.getElementById('promptDiv'); if (!promptDiv) { const newPromptDiv = document.createElement('div'); newPromptDiv.id = 'promptDiv'; newPromptDiv.style.position = 'absolute'; newPromptDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; newPromptDiv.style.color = '#ffffff'; newPromptDiv.style.padding = '8px'; newPromptDiv.style.borderRadius = '4px'; document.body.appendChild(newPromptDiv); } promptDiv.innerText = prompt; promptDiv.style.top = `${event.clientY}px`; promptDiv.style.left = `${event.clientX}px`; } // 复制提示内容 function copyPrompt(prompt) { navigator.clipboard.writeText(prompt) .then(() => { alert('已复制提示内容'); }) .catch(error => { console.error('Error:', error); }); }
现在背景图片虽然已经固定了，但表格区域却存在背景色，这导致我们无法看清表格内的文字，也无法看到背景图片。 我现在的html文件中，表格区域存在白色背景，我希望这个区域是透明的，因为它遮挡了我的背景图片。但是ChatGPT所给出的代码并没有让站长成功解决这个问题，仔细研究了一下发现，原来是因为ChatGPT之前给出的代码，将图片的作用域仅针对最上面啦，并没有给表格区域进行设置。找到了问题的原因，我们就好解决啦，继续提问。 我不希望背景图上仅存在于表格上方区域中，而是整个页面，否则表格区域并没有背景图片。 openai.wiki body { font-family: Arial, sans-serif; color: #ffffff; margin: 0; padding: 0; background-image: url('background.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: center top; } header { padding: 20px; text-align: center; } main { background-color: transparent; padding: 20px; min-height: 100vh; box-sizing: border-box; overflow-y: auto; } h1 { color: #ffffff; } table { width: 100%; border-collapse: collapse; background-color: transparent; /* 设置表格背景为透明 */ } th, td { border: 1px solid #ddd; padding: 8px; color: #ffffff; background-color: transparent; /* 设置单元格背景为透明 */ } tr:hover td { background-color: rgba(255, 0, 0, 0.5); transform: scale(1.02); transition: transform 0.1s ease-in-out; } Prompt助手这是一个简单的 HTML 网页示例，由 openai.wiki 提供。 类型 描述©2023 prompt.openai.wiki // 使用 fetch 加载本地 JSON 文件 fetch('prompt.json') .then(response => response.json()) .then(data => { const table = document.getElementById('promptTable'); data.forEach(item => { const row = table.insertRow(); const categoryCell = row.insertCell(); const actCell = row.insertCell(); categoryCell.innerText = item.category; actCell.innerText = item.act; // 添加鼠标悬停事件 row.addEventListener('mouseover', (event) => { showPrompt(event, item.prompt); }); // 添加点击事件 row.addEventListener('click', () => { copyPrompt(item.prompt); }); }); }) .catch(error => { console.error('Error:', error); }); // 显示提示内容 function showPrompt(event, prompt) { const promptDiv = document.getElementById('promptDiv'); if (!promptDiv) { const newPromptDiv = document.createElement('div'); newPromptDiv.id = 'promptDiv'; newPromptDiv.style.position = 'absolute'; newPromptDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; newPromptDiv.style.color = '#ffffff'; newPromptDiv.style.padding = '8px'; newPromptDiv.style.borderRadius = '4px'; document.body.appendChild(newPromptDiv); } promptDiv.innerText = prompt; promptDiv.style.top = `${event.clientY}px`; promptDiv.style.left = `${event.clientX}px`; } // 复制提示内容 function copyPrompt(prompt) { navigator.clipboard.writeText(prompt) .then(() => { alert('已复制提示内容'); }) .catch(error => { console.error('Error:', error); }); }
可以看到，这次问题已经成功得到解决啦。 搜索框因为内容比较多，所以站长又希望添加一下搜索框区域，方便直接直接进行索引。话不多说，直接问GPT。 我现在希望在表格上方多一输入文字的区域，在我搜索文字时，将会自动筛选表格中第二列所所在的相应内容。 （这里粘贴你的当前完整代码） openai.wiki body { font-family: Arial, sans-serif; color: #ffffff; margin: 0; padding: 0; background-image: url('background.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: center top; } header { padding: 20px; text-align: center; } main { background-color: transparent; padding: 20px; min-height: 100vh; box-sizing: border-box; overflow-y: auto; } h1 { color: #ffffff; } table { width: 100%; border-collapse: collapse; background-color: transparent; /* 设置表格背景为透明 */ } th, td { border: 1px solid #ddd; padding: 8px; color: #ffffff; background-color: transparent; /* 设置单元格背景为透明 */ } tr:hover td { background-color: rgba(255, 0, 0, 0.5); transform: scale(1.02); transition: transform 0.1s ease-in-out; } .search { margin-bottom: 20px; } Prompt助手 搜索：这是一个简单的 HTML 网页示例，由 openai.wiki 提供。 类型 描述©2023 prompt.openai.wiki let data = []; // 保存表格数据 // 使用 fetch 加载本地 JSON 文件 fetch('prompt.json') .then(response => response.json()) .then(jsonData => { data = jsonData; renderTable(data); }) .catch(error => { console.error('Error:', error); }); // 渲染表格 function renderTable(data) { const table = document.getElementById('promptTable'); // 清空表格内容 table.innerHTML = ''; // 添加表头 const headerRow = table.insertRow(); const headers = ['类型', '描述']; headers.forEach(headerText => { const th = document.createElement('th'); th.textContent = headerText; headerRow.appendChild(th); }); // 添加表格内容 data.forEach(item => { const row = table.insertRow(); const categoryCell = row.insertCell(); const actCell = row.insertCell(); categoryCell.innerText = item.category; actCell.innerText = item.act; // 添加鼠标悬停事件 row.addEventListener('mouseover', (event) => { showPrompt(event, item.prompt); }); // 添加点击事件 row.addEventListener('click', () => { copyPrompt(item.prompt); }); }); } // 筛选表格 function filterTable() { const input = document.getElementById('searchInput'); const filterValue = input.value.toLowerCase(); const filteredData = data.filter(item => { const description = item.act.toLowerCase(); return description.includes(filterValue); }); renderTable(filteredData); } // 显示提示内容 function showPrompt(event, prompt) { const promptDiv = document.getElementById('promptDiv'); if (!promptDiv) { const newPromptDiv = document.createElement('div'); newPromptDiv.id = 'promptDiv'; newPromptDiv.style.position = 'absolute'; newPromptDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; newPromptDiv.style.color = '#ffffff'; newPromptDiv.style.padding = '8px'; newPromptDiv.style.borderRadius = '4px'; document.body.appendChild(newPromptDiv); } promptDiv.innerText = prompt; promptDiv.style.top = `${event.clientY}px`; promptDiv.style.left = `${event.clientX}px`; } // 复制提示内容 function copyPrompt(prompt) { navigator.clipboard.writeText(prompt) .then(() => { alert('已复制提示内容'); }) .catch(error => { console.error('Error:', error); }); }
经过测试，可以直接搜索相应的内容，这一步竟然出奇的简单。 类别筛选我们再添加一个按类别筛选功能，将这些类别做为导航栏菜单的按钮。 同样，我们直接问ChatGPT，写的要求详细一些，这样可以尽量一次就得到答案。 帮我添加导航栏功能，导航栏的第一个按钮是（全部），用来显示所有表格中的所有类别，其它按钮根据json中的category字段做为唯一筛选条件生动生成。 openai.wiki body { font-family: Arial, sans-serif; color: #ffffff; margin: 0; padding: 0; background-image: url('background.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: center top; } header { padding: 20px; text-align: center; } main { background-color: transparent; padding: 20px; min-height: 100vh; box-sizing: border-box; overflow-y: auto; } h1 { color: #ffffff; } table { width: 100%; border-collapse: collapse; background-color: transparent; /* 设置表格背景为透明 */ } th, td { border: 1px solid #ddd; padding: 8px; color: #ffffff; background-color: transparent; /* 设置单元格背景为透明 */ } tr:hover td { background-color: rgba(255, 0, 0, 0.5); transform: scale(1.02); transition: transform 0.1s ease-in-out; } .search { margin-bottom: 20px; } Prompt助手 搜索：这是一个简单的 HTML 网页示例，由 openai.wiki 提供。 类型 描述©2023 prompt.openai.wiki let data = []; // 保存表格数据 // 使用 fetch 加载本地 JSON 文件 fetch('prompt.json') .then(response => response.json()) .then(jsonData => { data = jsonData; createNavbar(data); // 在这里调用 createNavbar renderTable(data); }) .catch(error => { console.error('Error:', error); }); // 创建导航栏 function createNavbar(data) { const navbar = document.getElementById('navbar'); // 添加一个显示所有项的按钮 const allButton = document.createElement('button'); allButton.textContent = '全部'; allButton.addEventListener('click', () => renderTable(data)); navbar.appendChild(allButton); // 获取所有的独特类别 const categories = [...new Set(data.map(item => item.category))]; // 为每个类别添加一个按钮 categories.forEach(category => { const button = document.createElement('button'); button.textContent = category; button.addEventListener('click', () => { const filteredData = data.filter(item => item.category === category); renderTable(filteredData); }); navbar.appendChild(button); }); } // 渲染表格 function renderTable(data) { const table = document.getElementById('promptTable'); // 清空表格内容 table.innerHTML = ''; // 添加表头 const headerRow = table.insertRow(); const headers = ['类型', '描述']; headers.forEach(headerText => { const th = document.createElement('th'); th.textContent = headerText; headerRow.appendChild(th); }); // 添加表格内容 data.forEach(item => { const row = table.insertRow(); const categoryCell = row.insertCell(); const actCell = row.insertCell(); categoryCell.innerText = item.category; actCell.innerText = item.act; // 添加鼠标悬停事件 row.addEventListener('mouseover', (event) => { showPrompt(event, item.prompt); }); // 添加点击事件 row.addEventListener('click', () => { copyPrompt(item.prompt); }); }); } // 筛选表格 function filterTable() { const input = document.getElementById('searchInput'); const filterValue = input.value.toLowerCase(); const filteredData = data.filter(item => { const description = item.act.toLowerCase(); return description.includes(filterValue); }); renderTable(filteredData); } // 显示提示内容 function showPrompt(event, prompt) { const promptDiv = document.getElementById('promptDiv'); if (!promptDiv) { const newPromptDiv = document.createElement('div'); newPromptDiv.id = 'promptDiv'; newPromptDiv.style.position = 'absolute'; newPromptDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; newPromptDiv.style.color = '#ffffff'; newPromptDiv.style.padding = '8px'; newPromptDiv.style.borderRadius = '4px'; document.body.appendChild(newPromptDiv); } promptDiv.innerText = prompt; promptDiv.style.top = `${event.clientY}px`; promptDiv.style.left = `${event.clientX}px`; } // 复制提示内容 function copyPrompt(prompt) { navigator.clipboard.writeText(prompt) .then(() => { alert('已复制提示内容'); }) .catch(error => { console.error('Error:', error); }); }
站长这么贴心，为了让大家都能够看懂，已经为每一行代码添加了注释。 openai.wiki /* 设置页面全局样式 */ body { font-family: Arial, sans-serif; /* 设置字体 */ color: #ffffff; /* 设置字体颜色 */ margin: 0; /* 设置边距 */ padding: 0; /* 设置填充 */ background-image: url('background.jpg'); /* 设置背景图像 */ background-repeat: no-repeat; /* 设置背景图像不重复 */ background-attachment: fixed; /* 设置背景图像固定 */ background-size: cover; /* 设置背景图像覆盖整个容器 */ background-position: center top; /* 设置背景图像的位置 */ } /* 设置头部样式 */ header { padding: 20px; /* 设置填充 */ text-align: center; /* 设置文本居中 */ } /* 设置主要内容区域样式 */ main { background-color: transparent; /* 设置背景颜色透明 */ padding: 20px; /* 设置填充 */ min-height: 100vh; /* 设置最小高度 */ box-sizing: border-box; /* 设置盒模型 */ overflow-y: auto; /* 设置溢出内容自动滚动 */ } /* 设置导航栏样式 */ #navbar { display: flex; /* 设置导航栏为弹性布局 */ justify-content: center; /* 设置子元素在主轴上居中 */ margin-bottom: 20px; /* 设置下边距 */ } /* 设置导航栏按钮的样式 */ #navbar button { margin: 0 10px; /* 设置外边距 */ padding: 5px 10px; /* 设置内边距 */ background-color: transparent; /* 设置背景颜色透明 */ border: none; /* 设置无边框 */ color: #ffffff; /* 设置字体颜色 */ cursor: pointer; /* 设置鼠标悬停时的样式为手型 */ } /* 设置导航栏按钮鼠标悬停时的样式 */ #navbar button:hover { background-color: rgba(255, 255, 255, 0.2); /* 设置背景颜色 */ border-radius: 4px; /* 设置边框圆角 */ } /* 设置标题样式 */ h1 { color: #ffffff; /* 设置字体颜色 */ } /* 设置表格样式 */ table { width: 100%; /* 设置宽度 */ border-collapse: collapse; /* 设置边框合并 */ background-color: transparent; /* 设置背景颜色透明 */ } /* 设置表头和单元格的样式 */ th, td { border: 1px solid #ddd; /* 设置边框 */ padding: 8px; /* 设置内边距 */ color: #ffffff; /* 设置字体颜色 */ background-color: transparent; /* 设置背景颜色透明 */ } /* 设置表格行鼠标悬停时的样式 */ tr:hover td { background-color: rgba(255, 0, 0, 0.5); /* 设置背景颜色 */ transform: scale(1.02); /* 设置放大 */ transition: transform 0.1s ease-in-out; /* 设置过渡效果 */ } /* 设置搜索框样式 */ .search { margin-bottom: 20px; /* 设置下边距 */ } Prompt助手 搜索：这是一个简单的 HTML 网页示例，由 openai.wiki 提供。 类型 描述©2023 prompt.openai.wiki let data = []; // 用来保存表格数据的数组 // 使用 fetch 加载本地 JSON 文件 fetch('prompt.json') .then(response => response.json()) // 解析 JSON 格式的响应 .then(jsonData => { // 处理解析后的数据 data = jsonData; // 将解析后的数据赋给 data createNavbar(data); // 根据数据创建导航栏 renderTable(data); // 根据数据渲染表格 }) .catch(error => { // 处理可能出现的错误 console.error('Error:', error); }); // 创建导航栏 function createNavbar(data) { const navbar = document.getElementById('navbar'); // 获取导航栏的元素 // 添加一个显示所有项的按钮 const allButton = document.createElement('button'); // 创建一个按钮元素 allButton.textContent = '全部'; // 设置按钮的文字 allButton.addEventListener('click', () => renderTable(data)); // 为按钮添加点击事件，点击时渲染全部数据 navbar.appendChild(allButton); // 将按钮添加到导航栏 // 获取所有的独特类别 const categories = [...new Set(data.map(item => item.category))]; // 使用 Set 来去除重复的类别 // 为每个类别添加一个按钮 categories.forEach(category => { // 遍历每一个类别 const button = document.createElement('button'); // 创建一个按钮元素 button.textContent = category; // 设置按钮的文字 button.addEventListener('click', () => { // 为按钮添加点击事件 const filteredData = data.filter(item => item.category === category); // 筛选出对应类别的数据 renderTable(filteredData); // 渲染筛选后的数据 }); navbar.appendChild(button); // 将按钮添加到导航栏 }); } // 渲染表格 function renderTable(data) { const table = document.getElementById('promptTable'); // 获取表格的元素 table.innerHTML = ''; // 清空表格内容 // 添加表头 const headerRow = table.insertRow(); // 创建一个新的表格行 const headers = ['类型', '描述']; // 表头的文字 headers.forEach(headerText => { // 遍历每一个表头 const th = document.createElement('th'); // 创建一个表头元素 th.textContent = headerText; // 设置表头的文字 headerRow.appendChild(th); // 将表头添加到表格行 }); // 添加表格内容 data.forEach(item => { // 遍历每一项数据 const row = table.insertRow(); // 创建一个新的表格行 const categoryCell = row.insertCell(); // 创建一个新的单元格 const actCell = row.insertCell(); //创建一个新的单元格 categoryCell.innerText = item.category; // 设置单元格的文字为数据的类别 actCell.innerText = item.act; // 设置单元格的文字为数据的描述 // 为表格行添加鼠标悬停事件 row.addEventListener('mouseover', (event) => { showPrompt(event, item.prompt); // 显示提示信息 }); // 为表格行添加点击事件 row.addEventListener('click', () => { copyPrompt(item.prompt); // 复制提示信息 }); }); } // 筛选表格 function filterTable() { const input = document.getElementById('searchInput'); // 获取输入框的元素 const filterValue = input.value.toLowerCase(); // 获取输入框的值，并转换为小写 const filteredData = data.filter(item => { // 筛选出包含输入值的数据 const description = item.act.toLowerCase(); // 将描述转换为小写 return description.includes(filterValue); // 判断描述是否包含输入值 }); renderTable(filteredData); // 渲染筛选后的数据 } // 显示提示信息 function showPrompt(event, prompt) { const promptDiv = document.getElementById('promptDiv'); // 获取提示信息的元素 if (!promptDiv) { // 如果提示信息的元素不存在 const newPromptDiv = document.createElement('div'); // 创建一个新的 div 元素 newPromptDiv.id = 'promptDiv'; // 设置元素的 id newPromptDiv.style.position = 'absolute'; // 设置元素的定位为绝对定位 newPromptDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; // 设置元素的背景颜色 newPromptDiv.style.color = '#ffffff'; // 设置元素的字体颜色 newPromptDiv.style.padding = '8px'; // 设置元素的内边距 newPromptDiv.style.borderRadius = '4px'; // 设置元素的边框圆角 document.body.appendChild(newPromptDiv); // 将元素添加到 body } promptDiv.innerText = prompt; // 设置元素的文字为提示信息 promptDiv.style.top = `${event.clientY}px`; // 设置元素的垂直位置为鼠标的垂直位置 promptDiv.style.left = `${event.clientX}px`; // 设置元素的水平位置为鼠标的水平位置 } // 复制提示信息 function copyPrompt(prompt) { navigator.clipboard.writeText(prompt) // 将提示信息复制到剪贴板 .then(() => { alert('已复制提示内容'); // 显示提示信息已复制的弹窗 }) .catch(error => { console.error('Error:', error); // 打印错误信息 }); }站长已经将此次演示项目的所有文档都打包上传了，直接下载即可查看。 Demo 下载 类型： ZIP 大小： 2.73MB 总结关于HTML对于零基础的人来说，可能还是有点难度的，尤其是美化部分。其实正经的网页一般没有人会在HTML里直接使用标签去实现，而是在根目录下新建一个.css文件，用来统一管理网页中的各种样式，这样更加直观。但我们是新手，如果给大家讲CSS样式文件，这对于大家来说更加难以理解了。 就现在所学的这些，写一个个人简历网页还是没有什么问题的，非常简单。如果大家还想学习怎么将这些部署到互联网上，绑定自己的域名，让所有人都可以访问，可以留言，站长会酌情考虑是否更新此部分内容。 |
【本文地址】