發布您的專案
自上次發布此專案後,您已經做過修改。
請重新整理頁面,再次載入 Thimble。
若需詳細錯誤資訊,請開啟您瀏覽器開發者工具當中的主控台。
註: 若您使用隱私瀏覽模式的話,請先回到一般模式再重新載入網站。
<!-- 在此新增您的留言 -->
<table> <tr> <th>標題</th> <th>標題</th> </tr> <tr> <td>值</td> <td>值</td> </tr> </table>
<ol> <li>項目 1</li> <li>項目 2</li> <li>項目 3</li> </ol>
<ul> <li>項目 1</li> <li>項目 2</li> <li>項目 3</li> </ul>
<form action="" method="get"> <label for="first-name">名字</label> <input id="first-name" type="text" name="firstname"><br> <label for="last-name">姓氏</label> <input id="last-name" type="text" name="lastname"><br> <input type="submit" value="送出"> </form>
<script src="script.js"></script>
<!-- 添加 <link> 至您的 HTML 檔案,這些標籤通常應放在 <head> 標籤段落當中。 --> <link href="style.css" rel="stylesheet">
<video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> 您的瀏覽器不支援 <video> 標籤。 </video>
<audio controls> <source src="audio.mp3" type="audio/mpeg"> 您的瀏覽器不支援 <audio> 標籤。 </audio>
/* 在此新增您的留言 */
p { font-size: 20px; }
.className { background-color: green; }
#idName { background-color: green; }
/* 要套用動畫的元素 */ .animated { animation-name: animationName; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: ease-out; } /* 動畫程式碼 */ @keyframes animationName { 0% { background-color: red; } 50% { background-color: orange; } 100% { background-color: yellow; } }
/* 基本樣式 */ a:link { color: RoyalBlue; text-decoration: none; } /* 造訪過 */ a:visited { color: Orchid; } /* 選擇鏈結時 */ a:active { color: OrangeRed; } /* 滑鼠停在鏈結上 */ a:hover { text-decoration: underline; }
@media screen and (max-width: 320px) { /* 當螢幕寬度小於等於 320px 時的規則 */ } @media screen and (min-width: 321px) and (max-width: 768px) { /* 當螢幕寬度介於 321px 至 768px 時的規則 */ } @media screen and (min-width: 769px) { /* 當螢幕寬度大於 768px 時的規則 */ }
@font-face { font-family: myFirstFont; src: url(sansation_bold.woff); font-weight: bold; }
/* 在每一個 class='arrow' 的元素前面加入箭頭 */ .arrow::before { content: "→"; background: DodgerBlue; color: white; }
// 在此新增您的留言
function sayHello(name) { console.log("哈囉" + name + "!"); } sayHello("David");
var names = ["David", "Bob", "Kate"];
var person = { name: "Bob", skills: ["JS", "HTML"] };
var names = ["David", "Bob", "Kate"]; var name; for (var i = 0; i < names.length; i++) { name = names[i]; console.log(name); }
var count = 5; while (count > 0) { console.log(count); count = count - 1; }
var name = "Bob"; if (name === "Bob") { console.log("哈囉" + name + "!"); } else if (name === "Kate") { console.log("哈囉" + name + "!"); } else { console.log(""哈囉陌生人!""); }
var name = "Bob"; switch(name) { case "Bob": console.log("哈囉" + name + "!"); break; case "Kate": console.log("哈囉" + name + "!"); break; default: // 如果不符合任何條件就做這些事 console.log(""哈囉陌生人!""); }
// 選擇 id="button" 的元素 var element = document.querySelector('#button'); element.addEventListener("click", function() { console.log("Click!"); });
// 選擇 id='alert' 的元素 var element = document.querySelector('#alert'); element.style.background = "OrangeRed";