发布你的项目
在您上次发布此项目后,您进行了更改。
请重新载入 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("Hello, " + name); } sayHello("大卫");
var names = ["大卫", "鲍勃", "凯特"];
var person = { name: "鲍勃", skills: ["JS", "HTML"] };
var names = ["大卫", "鲍勃", "凯特"]; 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 = "鲍勃"; if (name === "鲍勃") { console.log("Hello, " + name); } else if (name === "凯特") { console.log("Hello, " + name); } else { console.log("Hello, stranger!"); }
var name = "鲍勃"; switch(name) { case "鲍勃": console.log("Hello, " + name); break; case "凯特": console.log("Hello, " + name); break; default: // 没有满足条件的情况下执行的动作 console.log("Hello, stranger!"); }
// 选择 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";