AI 编程对比

airaz · 发表于 2024-8-10 09:21:33

本帖最后由 airaz 于 2024-8-10 09:24 编辑

用html给我写个网页：网页宽度固定1000，网页标题为“五碗面”，五行四列的表格，第一行是名称，第二行是图片，第三行是图片，第四行介绍，第五行是下载地址。每列为一个不同的软件。这个网页要让搜索引擎很容易找到

copilot  微软

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="description" content="五碗面 - 软件介绍和下载">
<meta name="keywords" content="五碗面, 软件, 下载, 图片, 介绍">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五碗面</title>
<style>
      body {
         width: 1000px;
         margin: 0 auto;
         font-family: Arial, sans-serif;
      }
      table {
         width: 100%;
         border-collapse: collapse;
      }
      th, td {
         border: 1px solid #ddd;
         padding: 8px;
         text-align: center;
      }
      th {
         background-color: #f2f2f2;
      }
</style>
</head>
<body>
<h1>五碗面</h1>
<table>
      <tr>
         <th>名称</th>
         <th>名称</th>
         <th>名称</th>
         <th>名称</th>
      </tr>
      <tr>
         <td><img src="image1.jpg" alt="软件1图片"></td>
         <td><img src="image2.jpg" alt="软件2图片"></td>
         <td><img src="image3.jpg" alt="软件3图片"></td>
         <td><img src="image4.jpg" alt="软件4图片"></td>
      </tr>
      <tr>
         <td><img src="image5.jpg" alt="软件5图片"></td>
         <td><img src="image6.jpg" alt="软件6图片"></td>
         <td><img src="image7.jpg" alt="软件7图片"></td>
         <td><img src="image8.jpg" alt="软件8图片"></td>
      </tr>
      <tr>
         <td>软件1介绍</td>
         <td>软件2介绍</td>
         <td>软件3介绍</td>
         <td>软件4介绍</td>
      </tr>
      <tr>
         <td><a href="download1.html">下载地址1</a></td>
         <td><a href="download2.html">下载地址2</a></td>
         <td><a href="download3.html">下载地址3</a></td>
         <td><a href="download4.html">下载地址4</a></td>
      </tr>
</table>
</body>
</html>

airaz · 发表于 2024-8-10 10:09:05

大兔崽子发表于 2024-8-10 09:42
这个鬼最不靠谱呀，需求都搞不对，把它开了

那个鬼还来了这么一句

编程小白白gezi · 发表于 2024-8-10 10:07:20

console.log("AI is very good")

7ian · 发表于 2024-8-10 09:57:38

GLM

[HTML] 纯文本查看 复制代码

<!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="五碗面软件介绍，提供软件名称、图片、介绍和下载地址">
    <title>五碗面</title>
    <style>
        body {
            width: 1000px;
            margin: 0 auto;
            font-family: Arial, sans-serif;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            padding: 10px;
            text-align: center;
        }
        img {
            width: 100px;
            height: auto;
        }
    </style>
</head>
<body>
    <h1>五碗面软件列表</h1>
    <table>
        <tr>
            <th>名称</th>
            <th>图片</th>
            <th>图片</th>
            <th>介绍</th>
            <th>下载地址</th>
        </tr>
        <tr>
            <td>软件一</td>
            <td><img src="software1.jpg" alt="软件一图片"></td>
            <td><img src="software1-feature.jpg" alt="软件一特色图片"></td>
            <td>软件一是一款非常实用的工具，用于...</td>
            <td><a href="download/software1.exe">下载</a></td>
        </tr>
        <tr>
            <td>软件二</td>
            <td><img src="software2.jpg" alt="软件二图片"></td>
            <td><img src="software2-feature.jpg" alt="软件二特色图片"></td>
            <td>软件二是专注于提升工作效率的软件...</td>
            <td><a href="download/software2.exe">下载</a></td>
        </tr>
        <tr>
            <td>软件三</td>
            <td><img src="software3.jpg" alt="软件三图片"></td>
            <td><img src="software3-feature.jpg" alt="软件三特色图片"></td>
            <td>软件三为用户提供便捷的解决方案...</td>
            <td><a href="download/software3.exe">下载</a></td>
        </tr>
        <tr>
            <td>软件四</td>
            <td><img src="software4.jpg" alt="软件四图片"></td>
            <td><img src="software4-feature.jpg" alt="软件四特色图片"></td>
            <td>软件四具有强大的功能和友好的界面...</td>
            <td><a href="download/software4.exe">下载</a></td>
        </tr>
        <tr>
            <td>软件五</td>
            <td><img src="software5.jpg" alt="软件五图片"></td>
            <td><img src="software5-feature.jpg" alt="软件五特色图片"></td>
            <td>软件五是专业级的工具，适用于...</td>
            <td><a href="download/software5.exe">下载</a></td>
        </tr>
    </table>
</body>
</html>

大兔崽子 · 发表于 2024-8-10 09:47:18

文心一言 (这个也可以开了)

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>  
<html lang="zh">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>五碗面</title>  
    <meta name="description" content="这是一个关于五个软件的介绍页面，包括名称、图片、详细介绍和下载地址。">  
    <meta name="keywords" content="软件, 介绍, 下载, 五碗面">  
    <style>  
        body {  
            margin: 0;  
            padding: 0;  
            font-family: Arial, sans-serif;  
        }  
        .container {  
            width: 1000px;  
            margin: 0 auto;  
        }  
        table {  
            width: 100%;  
            border-collapse: collapse;  
        }  
        th, td {  
            border: 1px solid #ddd;  
            padding: 8px;  
            text-align: left;  
        }  
        th {  
            background-color: #f2f2f2;  
        }  
        img {  
            width: 100%;  
            height: auto;  
        }  
    </style>  
</head>  
<body>  
    <div class="container">  
        <h1>五碗面软件介绍</h1>  
        <table>  
            <tr>  
                <th>名称</th>  
                <th>图片</th>  
                <th>图片</th>  
                <th>介绍</th>  
                <th>下载地址</th>  
            </tr>  
            <tr>  
                <td>软件A</td>  
                <td><img src="path_to_image_a.jpg" alt="软件A图片"></td>  
                <td><img src="path_to_image_b_for_A.jpg" alt="软件A第二张图片"></td>  
                <td>软件A的详细介绍...</td>  
                <td><a href="download_url_A">下载软件A</a></td>  
            </tr>  
            <tr>  
                <td>软件B</td>  
                <td><img src="path_to_image_b.jpg" alt="软件B图片"></td>  
                <td><img src="path_to_image_c_for_B.jpg" alt="软件B第二张图片"></td>  
                <td>软件B的详细介绍...</td>  
                <td><a href="download_url_B">下载软件B</a></td>  
            </tr>  
            <!-- 更多软件行... -->  
            <tr>  
                <td>软件E</td>  
                <td><img src="path_to_image_e.jpg" alt="软件E图片"></td>  
                <td><img src="path_to_image_f_for_E.jpg" alt="软件E第二张图片"></td>  
                <td>软件E的详细介绍...</td>  
                <td><a href="download_url_E">下载软件E</a></td>  
            </tr>  
        </table>  
    </div>  
</body>  
</html>

大兔崽子 · 发表于 2024-8-10 09:42:02

airaz 发表于 2024-8-10 09:23
codegeex4:9b-all-fp16

这个鬼最不靠谱呀，需求都搞不对，把它开了

airaz · 发表于 2024-8-10 09:27:10

codestral:22b-v0.1-q8_0

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Five bowls of noodles - Discover, view and download various softwares.">
<meta name="keywords" content="software, downloads, noodle, applications">
<title>五碗面</title>
<style>
      table {
         width: 1000px;
         border-collapse: collapse;
      }
      th, td {
         border: 1px solid black;
         padding: 8px;
         text-align: center;
      }
</style>
</head>
<body>
<table>
      <tr>
         <th>Name</th>
         <th>Software 2</th>
         <th>Software 3</th>
         <th>Software 4</th>
      </tr>
      <tr>
         <td><img src="software1.png" alt="Software 1"></td>
         <td><img src="software2.png" alt="Software 2"></td>
         <td><img src="software3.png" alt="Software 3"></td>
         <td><img src="software4.png" alt="Software 4"></td>
      </tr>
      <tr>
         <td><img src="software1_image2.png" alt="Software 1 Image 2"></td>
         <td><img src="software2_image2.png" alt="Software 2 Image 2"></td>
         <td><img src="software3_image2.png" alt="Software 3 Image 2"></td>
         <td><img src="software4_image2.png" alt="Software 4 Image 2"></td>
      </tr>
      <tr>
         <td>Software 1 Description</td>
         <td>Software 2 Description</td>
         <td>Software 3 Description</td>
         <td>Software 4 Description</td>
      </tr>
      <tr>
         <td><a href="software1_download.zip">Download</a></td>
         <td><a href="software2_download.zip">Download</a></td>
         <td><a href="software3_download.zip">Download</a></td>
         <td><a href="software4_download.zip">Download</a></td>
      </tr>
</table>
</body>
</html>

airaz · 发表于 2024-8-10 09:23:47

codegeex4:9b-all-fp16

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五碗面</title>
<style>
      body {
         margin: 0;
         padding: 0;
         font-family: Arial, sans-serif;
      }
      table {
         width: 1000px;
         border-collapse: collapse;
         margin: 20px auto;
      }
      th, td {
         border: 1px solid #ccc;
         text-align: center;
         padding: 10px;
      }
      tr:nth-child(even) {
         background-color: #f2f2f2;
      }
</style>
</head>
<body>

<table>
<tr>
      <th>名称</th>
      <th>图片</th>
      <th>图片</th>
      <th>介绍</th>
      <th>下载地址</th>
</tr>
<tr>
      <td>软件1</td>
      <td><img src="software1.png" alt="Software 1" width="100"></td>
      <td><img src="software1_extra.png" alt="Software 1 Extra" width="100"></td>
      <td>这是软件1的介绍。</td>
      <td><a href="download1.html">下载链接</a></td>
</tr>

</table>

</body>
</html>
```

请注意，您需要替换每个`<img>`标签中的`src`属性以指向实际的图片文件路径。另外，每行的`alt`属性用于提供图片的替代文本，这对于搜索引擎优化（SEO）很重要。如果您的软件
数量超过了四行，请按照上面的格式添加更多的行。

此外，为了帮助搜索引擎更好地索引您的网页，您还需要在`<head>`部分添加一些元标签。例如：

```html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五碗面</title>

<meta name="description" content="这里是您的网页描述，简洁而具有吸引力。">
<meta name="keywords" content="关键词1, 关键词2, 关键词3">

<style>
      body {
         margin: 0;
         padding: 0;
         font-family: Arial, sans-serif;
      }
      table {
         width: 1000px;
         border-collapse: collapse;
         margin: 20px auto;
      }
      th, td {
         border: 1px solid #ccc;
         text-align: center;
         padding: 10px;
      }
      tr:nth-child(even) {
         background-color: #f2f2f2;
      }
</style>
</head>

		自动登录	找回密码
密码			注册

[闲聊] AI 编程 对比

[闲聊] AI 编程对比