高級功能

LunaTalk 支持HTML格式，幫助用戶開啟華麗的視覺盛宴，體驗遊戲般的界面，解鎖更多創意可能性！

HTML基礎語法教學

懶人版

想做什麼都可以告訴AI，直接讓AI幫你做🦾 舉例，直接寫：

（必寫）①全部回復以html格式進行回復。請注意：不要生成單獨的<script>，所有的script都放到元素內聯使用，必須script在html元素事件中，不支持<style>，必須scirpt內聯且不使用style。

②人物的語言對話全部放在雙引號內，字體全部使用藍色（可以附顏色代碼）、加粗。

③人物的內心獨白全部放在括號內，字體全部使用粉色、斜體。

④以下內容以表格形式輸出： … 表格背景顏色為淺藍色 表格文字顏色為深藍色

⑤以下選項以按鈕形式輸出： … 按鈕顏色為淺藍色 文字顏色為深藍色

點擊後自動填入文本框，參考格式如下：

<button onclick="
const textarea = document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');
if (textarea) {
textarea.value='選項文本';
textarea.dispatchEvent(new Event('input', { bubbles: true }));
} else {
alert('沒找到 textarea 哦');
}
">選項文本</button>

…

或者直接複製下方的各類格式，讓AI參考這些格式幫你製作。

手動版

以下是為零基礎用戶設計的HTML極簡教程，從變色到做表格全搞定，複製粘貼就能用！👇

一、文字

1. 顏色 & 大小

<font color="red">我是紅色</font>

<font color="#FF00FF">我是玫紅（用顏色代碼）</font>

<font size="5">我是大字（1-7，7最大）</font>

<span style="color: blue; font-size: 20px;">我是藍色20像素字</span>

標題文字 <h#>..........</h#> 將改為數字1~6；h1為最大字，h6為最小字

效果如圖：

顏色代碼大全：

2. 加粗 / 斜體 / 刪除線

<b>我是粗體</b>
<i>我是斜體</i>
<u>我有下劃線</u>
<s>我是刪除線（不推薦）</s>
<del>我是刪除線（標準寫法）</del>
<small>顯示小字體</small>
<big>顯示大字體</big>
<tt>打字機字體</tt>
<sub>下標字</sub>
<sup>上標字</sup>
<blink>文字閃爍效果</blink>

3. 組合技

<b><i>我是粗斜體！</i></b>
```text

**4. 換行**

```text
換行（也稱回車） <br>
分段 <p>
分隔線 <hr>
【1】分隔線的粗細 <hr size=點數>
【2】分隔線的寬度 <hr size=點數或百分比>
【3】分隔線對齊方向 <hr align="#">
#號可為 left：表向左對齊（預設值） center：表向中對齊 right：表向右對齊
【4】分隔線的顏色 <hr color=#rrggbb>
【5】實心分隔線 <hr noshade>
居中對齊 <center>..........</center>

二、文字特效

（注：目前版本，動態特效需要 電腦鼠標懸停/手機點擊文字 才能夠開始顯示特效）

1. 熒光文字

<div style="margin-bottom: 15px;">
     <span style="color: cyan; text-shadow: 0 0 5px cyan, 0 0 10px blue;">你好</span>
</div>

2. 閃爍文字

<div style="margin-bottom: 15px;">
      <span onmouseenter="(function(e){var v=true;setInterval(function(){v=!v;e.style.opacity=v?1:0;},500);})(this)">你好</span>
</div>

3. 漸變文字

<div style="margin-bottom: 15px;">
      <span onmouseenter="(function(e){var colors=['red','orange','yellow','green','blue','indigo','violet'];var i=0;setInterval(function(){e.style.color=colors[i%colors.length];i++;},300);})(this)">你好</span>
</div>

4. 打字機效果

<div style="margin-bottom: 15px;">
      <span onmouseenter="(function(e){var text='你好';var i=0;e.textContent='';setInterval(function(){if(i<=text.length){e.textContent=text.substring(0,i);i++;}else{i=0;e.textContent='';}},200);})(this)">你好</span>
</div>

5. 旋轉文字

<div style="margin-bottom: 15px;">
      <span style="display:inline-block;" onmouseenter="(function(e){var r=0;setInterval(function(){r+=10;e.style.transform='rotate('+r+'deg)';},100);})(this)">你好</span>
</div>

6. 放大縮小

<div style="margin-bottom: 15px;">
      <span style="display:inline-block;" onmouseenter="(function(e){var s=1,d=0.02;setInterval(function(){s+=d;if(s>1.5||s<0.5)d=-d;e.style.transform='scale('+s+')';},50);})(this)">你好</span>
</div>

7. 左右搖擺

<div style="margin-bottom: 15px;">
      <span style="display:inline-block;" onmouseenter="(function(e){var a=0,d=5;setInterval(function(){a+=d;if(a>30||a<-30)d=-d;e.style.transform='rotate('+a+'deg)';},100);})(this)">你好</span>
</div>

8. 上下跳動

<div style="margin-bottom: 15px;">
      <span style="display:inline-block;" onmouseenter="(function(e){var y=0,d=5;setInterval(function(){y+=d;if(y>20||y<0)d=-d;e.style.transform='translateY('+y+'px)';},100);})(this)">你好</span>
</div>

9. 顏色脈衝

<div style="margin-bottom: 15px;">
      <span onmouseenter="(function(e){var colors=['red','orange','yellow','green','blue','indigo','violet'];var i=0;setInterval(function(){e.style.color=colors[i%colors.length];e.style.fontSize=(20+Math.sin(i*0.5)*5)+'px';i++;},200);})(this)">你好</span>
</div>

10. 隨機移動

<div style="margin-bottom: 15px; position: relative; height: 60px;">
      <span style="position:absolute; left:0; top:0;" onmouseenter="(function(e){setInterval(function(){e.style.left=Math.random()*200+'px';e.style.top=Math.random()*40+'px';},500);})(this)">你好</span>
</div>

三、邊框製作

1. 圓角邊框

<div style="margin-bottom: 15px;">
      <span style="border: 2px solid black; border-radius: 15px; padding: 10px;">你好</span>
</div>

代碼具體含義如下

<div style="margin-bottom: 15px;">
外層塊，margin-bottom:15px 給下面元素留垂直空隙（與下一個塊之間的間距）。

<span>
span 是行內元素，默認不換行。加了 border 和 padding 後仍然是行內盒子（在某些場景希望用 display:inline-block 更可控）。

border: 2px solid black;
邊框由三部分組成：2px（線寬）、solid（線型：實線）、black（顏色）。

border-radius: 15px;
圓角半徑，值越大越圓（50% 可做成圓形）。

padding: 10px;
內邊距，把文字與邊框之間撐開 10px。

2. 虛線邊框

<div style="margin-bottom: 15px;">
      <span style="border: 2px dashed black; padding: 10px;">你好</span>
</div>

3. 雙線邊框

<div style="margin-bottom: 15px;">
       <span style="border: 4px double black; padding: 10px;">你好</span>
</div>

4. 陰影邊框

<div style="margin-bottom: 15px;">
       <span style="box-shadow: 5px 5px 15px rgba(0,0,0,0.3); padding: 10px;">你好</span>
</div>

5. 3D邊框

<div style="margin-bottom: 15px;">
       <span style="border: 5px outset #ccc; padding: 10px; background: #eee;">你好</span>
</div>

【霓虹燈邊框】

1. 彩色圓角邊框

<div style="margin-bottom: 15px;">
  <span style="border: 6px solid; border-radius: 15px; padding: 10px;"
    onmouseenter="(function(e){
      var colors=['red','orange','yellow','green','blue','indigo','violet'];
      var i=0;
      setInterval(function(){
        e.style.borderColor=colors[i%colors.length];
        i++;
      },300);
    })(this)">你好</span>
</div>

2. 彩色虛線邊框

<div style="margin-bottom: 15px;">
  <span style="border: 4px dashed; padding: 10px;"
    onmouseenter="(function(e){
      var colors=['red','orange','yellow','green','blue','indigo','violet'];
      var i=0;
      setInterval(function(){
        e.style.borderColor=colors[i%colors.length];
        i++;
      },300);
    })(this)">你好</span>
</div>

3. 彩虹雙線邊框

<div style="margin-bottom: 15px;">
  <span style="border: 6px double; padding: 10px;"
    onmouseenter="(function(e){
      var colors=['red','orange','yellow','green','blue','indigo','violet'];
      var i=0;
      setInterval(function(){
        e.style.borderColor=colors[i%colors.length];
        i++;
      },300);
    })(this)">你好</span>
</div>

4. 彩色陰影邊框

<div style="margin-bottom: 15px;">
  <span style="padding: 10px; border: 3px solid transparent;"
    onmouseenter="(function(e){
      var colors=['red','orange','yellow','green','blue','indigo','violet'];
      var i=0;
      setInterval(function(){
        var c=colors[i%colors.length];
        e.style.boxShadow='0 0 10px '+c+', 0 0 20px '+c+', 0 0 30px '+c;
        i++;
      },300);
    })(this)">你好</span>
</div>

5. 彩色 3D 邊框

<div style="margin-bottom: 15px;">
  <span style="border: 6px outset; padding: 10px; background:#eee;"
    onmouseenter="(function(e){
      var colors=['red','orange','yellow','green','blue','indigo','violet'];
      var i=0;
      setInterval(function(){
        e.style.borderColor=colors[i%colors.length];
        i++;
      },300);
    })(this)">你好</span>
</div>

【流動彩虹邊框（漸變平滑過渡）】

1. 彩色圓角邊框（平滑彩虹過渡）

<div style="margin-bottom: 15px;">
  <span style="border: 6px solid; border-radius: 15px; padding: 10px;"
    onmouseenter="(function(e){
      var h=0;
      setInterval(function(){
        e.style.borderColor='hsl('+h+',100%,50%)';
        h=(h+2)%360;
      },50);
    })(this)">你好</span>
</div>

2. 彩色虛線邊框（平滑彩虹過渡）

<div style="margin-bottom: 15px;">
  <span style="border: 4px dashed; padding: 10px;"
    onmouseenter="(function(e){
      var h=60;
      setInterval(function(){
        e.style.borderColor='hsl('+h+',100%,50%)';
        h=(h+2)%360;
      },50);
    })(this)">你好</span>
</div>

3. 彩虹雙線邊框（平滑彩虹過渡）

<div style="margin-bottom: 15px;">
  <span style="border: 6px double; padding: 10px;"
    onmouseenter="(function(e){
      var h=120;
      setInterval(function(){
        e.style.borderColor='hsl('+h+',100%,50%)';
        h=(h+2)%360;
      },50);
    })(this)">你好</span>
</div>

4. 彩色陰影邊框（平滑流光效果）

<div style="margin-bottom: 15px;">
  <span style="padding: 10px; border: 3px solid transparent;"
    onmouseenter="(function(e){
      var h=180;
      setInterval(function(){
        var c='hsl('+h+',100%,50%)';
        e.style.boxShadow='0 0 10px '+c+', 0 0 20px '+c+', 0 0 30px '+c;
        h=(h+2)%360;
      },50);
    })(this)">你好</span>
</div>

5. 彩色 3D 邊框（平滑彩虹過渡）

<div style="margin-bottom: 15px;">
  <span style="border: 6px outset; padding: 10px; background:#eee;"
    onmouseenter="(function(e){
      var h=240;
      setInterval(function(){
        e.style.borderColor='hsl('+h+',100%,50%)';
        h=(h+2)%360;
      },50);
    })(this)">你好</span>
</div>

四、背景製作

1. 彩色背景

<div style="margin-bottom: 15px;">
       <span style="background: linear-gradient(to right, red, orange, yellow, green, blue); padding: 10px; color: white;">你好</span>
</div>

2. 粉色背景

<div style="margin-bottom: 15px;">
       <span style="background: pink; padding: 10px; color: red;">你好</span>
</div>

3. 筆記背景

<div style="margin-bottom: 15px;">
       <span style="background: lightblue; color: black; padding: 10px;">你好</span>
</div>

4. 手機背景

<div style="margin-bottom: 15px;">
       <span style="background: linear-gradient(to bottom, #333, #999); color: white; padding: 10px;">你好</span>
</div>

5. 條紋背景

<div style="margin-bottom: 15px;">
      <span style="background: repeating-linear-gradient(45deg, #ff6b6b, #ff6b6b 10px, #ff8e8e 10px, #ff8e8e 20px); padding: 10px; color: white;">你好</span>
</div>

五、表格製作

1. 基礎表格

<table border="1" style="border-collapse: collapse;">
  <tr>
    <th>姓名</th>
    <th>職業</th>
    <th>戰鬥力</th>
  </tr>
  <tr>
    <td>張三</td>
    <td>程序員</td>
    <td>80</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>設計師</td>
    <td>95</td>
  </tr>
</table>

2. 單元格單獨設置

<table>
  <tr>
    <td style="background-color: yellow;">重要數據</td>
    <td style="color: red;">紅色文字
    </td>
  </tr>
</table>

3. 顏色表格

<table style="border-collapse: collapse; width: 100%;">
  <tr style="background-color: #000079; color: white;">
    <th>姓名</th>
    <th>職業</th>
    <th>戰鬥力</th>
  </tr>
  <tr style="background-color: #B9B9FF;">
    <td>張三</td>
    <td> 程序員</td>
    <td>  80</td>
  </tr>
  <tr style="background-color: #B9B9FF;">
    <td>李四</td>
    <td> 設計師</td>
    <td>  95</td>
  </tr>
</table>

六、按鈕與交互

1. 普通按鈕

<button>點我試試</button>

2. 帶顏色的按鈕

<!-- 藍色系 -->
<button style="color: white; background-color: #2196F3;">藍色</button>

<!-- 綠色系 -->
<button style="color: white; background-color: #4CAF50;">綠色</button>

<!-- 紅色系 -->
<button style="color: white; background-color: #f44336;">紅色</button>

<!-- 紫色系 -->
<button style="color: white; background-color: #9C27B0;">紫色</button>

<!-- 黑色系 -->
<button style="color: white; background-color: #000000;">黑色</button>

3. 漸變炫彩按鈕

<button style="
  color: white;
  background: linear-gradient(to right, #FF6B8B, #FF8E53);
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
">漸變炫彩按鈕</button>

4. 點擊按鈕自動填入文本框

<button onclick="
const textarea = document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');
if (textarea) {
textarea.value='你好';
textarea.dispatchEvent(new Event('input', { bubbles: true }));
} else {
alert('沒找到 textarea 哦');
}
" style="background-color: white; color: black;">你好</button>

5. 點擊按鈕自動填入剪貼板

<button onclick="
  const textarea = document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');
  if (textarea) {
    textarea.value='你好';
    textarea.dispatchEvent(new Event('input', { bubbles: true }));
    navigator.clipboard.writeText('你好');
  } else {
    alert('沒找到 textarea 哦');
  }
" style="background-color: white; color: black;">你好</button>

6. 彩色可點擊按鈕

<button style="
  color: white;
  background: linear-gradient(to right, #FF6B8B, #FF8E53);
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.5s;
"
onclick="
  // 點擊時：找到 textarea 並填入文字
  const textarea = document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');
  if (textarea) {
    textarea.value='漸變炫彩按鈕';
    textarea.dispatchEvent(new Event('input', { bubbles: true }));
  } else {
    alert('沒找到 textarea 哦');
  }
">
  漸變炫彩按鈕
</button>

7. 分區布局

<div style="background: lavender; padding: 10px; border-radius: 10px;">
      <h3>優雅分區</h3>
      <br>
      <p>這裡可以放任何內容～</p>
      <br>
      <button style="background: purple; color: white;">紫色按鈕</button>
</div>

8. 展開/收起

<details>
  <summary>點擊我展開/收起內容</summary>
  <p>這裡是隱藏的內容，無需任何JS！瀏覽器原生支持。</p>
</details>

七、注意事項

1. 只寫body

如果AI在幫你寫格式時，輸出了<!DOCTYPE html>、<html lang="zh-CN">、<head>等開頭內容，請將其刪除，我們的聊天框內只需要<body>的部分。

2. 隱藏文本

可以通過在代碼中插入的方式，來要求AI每次回復都輸出這些格式。隱藏文本不會顯示，用戶看不到，但AI能看到。

舉例：

八、具體示範

1. 狀態欄示範

（這個只是示範用的，沒有細究視覺效果，希望大家能做出更好看的卡面。請不要直接複製並發布為新卡，違者刪卡並取消作者獎勵。）

完整代碼如下：

<details>
  <summary>【場景】</summary>
  <div style="background: #7AFEC6; color: black; padding: 10px; border-radius: 10px;">
  <p>你是一個人類冒險者。你正站在你的小木屋前，周圍是村莊和茂密的樹林。（開局可以手動改寫你的姓名、性別、外表等信息）</p>
  </div>
</details>

<details>
  <summary>【信息】</summary>
  <div style="margin-bottom: 15px;">
    <div style="
      display:inline-block;
      background-image: repeating-linear-gradient(
        white 0px,
        white 28px,
        lightblue 29px,
        white 30px
      );
      color: black;
      padding: 10px;
      line-height: 28px;
    ">
      洛克, 男, 人類, Lv.1, 初級戰士, 金髮藍眼, 冒險者服飾, 一把長劍
      <p>血量：50/50</p>
      <p>魔力：50/50</p>
      <p>金幣：50</p>
      <p>技能：無</p>
      <p>物品：無</p>
    </div>
  </div>
</details>

【地圖】<p>
🏔️🏔️🏔️🏔️🌲🌲🌲🌲🌲<p>
🏔️🏔️🌲🌲🌲🌲🌲🌲🌲<p>
🌲🌲🏡🏡🏡🏡🏡🌲🌲<p>
🌲🌲🏡🌳🌳🌳🏡🌲🌲<p>
🌲🌲🏡🌳🏠🌳🏡🌲🌲<p>
🌲🌲🌳🌳🌳🌳🌳🌲🌲<p>
🌲🌲🌳🌳🌳🌳🐗🌲🌲<p>
🌲🌲🌲🌲🌲🌲🌲🌲🌲<p>
🌲🌲🌲🌲🌲🌲🌲🌲🌲

<details>
  <summary>【任務】</summary>
  <p>無</p>
</details>

【選項】
<p>
<button onclick="
const textarea = document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');
if (textarea) {
textarea.value='拜訪村長';
textarea.dispatchEvent(new Event('input', { bubbles: true }));
} else {
alert('沒找到 textarea 哦');
}
" style="background-color: lightgreen; color: black;">拜訪村長</button>
<p>
<button onclick="
const textarea = document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');
if (textarea) {
textarea.value='附近有一隻野豬，抓來燒烤';
textarea.dispatchEvent(new Event('input', { bubbles: true }));
} else {
alert('沒找到 textarea 哦');
}
" style="background-color: lightgreen; color: black;">附近有一隻野豬，抓來燒烤</button>
<p>
<button onclick="
const textarea = document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');
if (textarea) {
textarea.value='我要轉職！';
textarea.dispatchEvent(new Event('input', { bubbles: true }));
} else {
alert('沒找到 textarea 哦');
}
" style="background-color: lightgreen; color: black;">我要轉職！（改職業）</button>
<p>
<button onclick="
const textarea = document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');
if (textarea) {
textarea.value='我要轉生！';
textarea.dispatchEvent(new Event('input', { bubbles: true }));
} else {
alert('沒找到 textarea 哦');
}
" style="background-color: lightgreen; color: black;">我要轉生！</button>

2. 卡面示範

（點擊按鈕後，文字自動複製到剪貼板）

<body style="background-color:#000; font-family:Arial, sans-serif; display:flex; justify-content:center; align-items:center; min-height:100vh; color:#fff;">

  <div style="border:2px solid yellow; border-radius:12px; padding:20px; width:320px;">

    <!-- 標題 -->
    <h2 style="text-align:center; color:yellow; margin:0 0 20px 0;">▲ 個人檔案 ▲</h2>

    <!-- 性別 -->
    <div style="border:1px solid #555; border-radius:10px; padding:15px; margin-bottom:20px;">
      <div style="text-align:center; font-weight:bold; color:yellow; margin-bottom:10px;">性別</div>
      <hr style="border: none; border-top:1px solid yellow; margin:5px 0 15px 0;">
      <div style="display:flex; justify-content:space-around; margin-bottom:10px;">
        <button style="color:cyan; background:transparent; border:1px solid cyan; border-radius:6px; padding:8px 16px; cursor:pointer;"
          onclick="(function(){
            const txt='男';
            const textarea=document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');
            if(textarea){textarea.value=txt;textarea.dispatchEvent(new Event('input',{bubbles:true}));}
            navigator.clipboard.writeText(txt);
          })()">男</button>

        <button style="color:cyan; background:transparent; border:1px solid cyan; border-radius:6px; padding:8px 16px; cursor:pointer;"
          onclick="(function(){
            const txt='女';
            const textarea=document.querySelector('#lunatalk-input textarea.uni-textarea-textarea');
            if(textarea){textarea.value=txt;textarea.dispatchEvent(new Event('input',{bubbles:true}));}
            navigator.clipboard.writeText(txt);
          })()">女</button>

---

現在就製作一張精美有趣的角色卡試試吧！