ISCA 技术部 杨旭东
记事本 + 浏览器
#include <stdio.h>
int main() {
printf("Hello World\n");
return 0;
}
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World\n");
}
}
print "Hello World\n"
puts "Hello World\n"
Hello World!View Example
<h1>Hello World!</h1>
<style type="text/css">
h1 { color: #2B65AE; text-shadow: 2px 4px 3px #DDE; }
</style>
View Example
实战：音乐盒
What is it?
What does it look like?
How does it work?
“What is it?”
<html>
<head>
<title>My Jukebox</title>
</head>
<body>
<h1>My Jukebox</h1>
<audio src="当冬夜渐暖.mp3" controls></audio>
</body>
</html>
View Example
<a href="http://google.com/">Go to Google!</a>
<元素名称 属性1="属性1的值" 属性2="属性2的值" ...> 元素内容 </元素名称>
<a href="链接地址">链接内容</a><div>一个块内的内容</div>
<span>一段文字</span><ul> (或者 <ol>)
<li>第一条目</li>
<li>第二条目</li>
...
</ul> (或者 </ol>)<input type="text" value="文本框内容"> →
“What does it look like?”
body {
background: #304160;
text-align: center;
}
h1 {
font-family: Trebuchet MS;
color: white;
text-shadow: 1px 2px 2px rgba(0,0,0,0.3);
}
<html> <head> <title>My Jukebox</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head>View Example
<link href="styles.css" rel="stylesheet" type="text/css" />↓
<css src="styles.css" />
#header a, #footer a {
text-decoration: none;
font-size: 80%;
}
哪些元素 { 属性1名称: 属性1内容; 属性2名称: 属性2内容; ... }
元素名称：h1 / body / a / ...
h1 {
font-size: 10000%;
}
元素ID：#special-heading / #meow / ...
<h1>我是文章第一章的标题</h1>
<h1>我是第二章的</h1>
<h1 id="special-heading">HI, I'M SPECIAL!</h1>
<h1>我是第四章的</h1>
#special-heading { color: yellow; }
<ul> <li id="li-1">我有一头小毛驴</li> <li id="li-2">我从来也不骑</li> <li id="li-3">有一天我心血来潮</li> <li id="li-4">骑它去赶集</li> ...
#li-1, #li-3, #li-5, #li-7 { color: blue; }
#li-2, #li-4, #li-6, #li-8 { color: green; }
西山苍苍 东海茫茫 吾校庄严 巍然中央 东西文化 荟萃一堂 大同爰跻 祖国以光 莘莘学子来远方 莘莘学子来远方 春风化雨乐未央 行健不息须自强 自强 自强 行健不息须自强 自强 自强 行健不息须自强 ...
元素类别：.odd / .crazy / ...
<ul> <li class="li-odd">西山苍苍 东海茫茫</li> <li class="li-even">吾校庄严 巍然中央</li> <li class="li-odd">东西文化 荟萃一堂</li> <li class="li-even">大同爰跻 祖国以光</li> ...
.li-odd { color: blue; } .li-even { color: green; }
li:nth-child(2n+1) { color: blue; }
li:nth-child(2n) { color: green; }
选择器 {
属性1: 属性值1;
属性2: 属性值2;
}
color: 颜色 [#035DFA, rgb(3, 93, 250), blue];background-color: 颜色;font-size: 大小 [120%, 25px, 2em];font-weight: bold [normal];font-style: italic [normal];text-decoration: underline [none];text-shadow: 横向偏移 纵向偏移 模糊程度 颜色;opacity: 透明度 [0, 0.5, 1];“How does it work?”
var blue = true; function changeColor() { blue = !blue; document.querySelector("body").style.background = blue ? "#304160" : "#fabb23"; } document.querySelector("h1").onclick = changeColor;
</audio> <script src="script.js"></script> </body> </html>View Example
var element = document.querySelector("选择器"); element.style.display = "none";
element.style.CSS属性名 = 新属性值 opacity → opacity font-weight → fontWeight background-color → backgroundColor
audioElement.src = "新文件位置";
inputElement.value = "文本框内容"; element.innerHTML = "重写元素内部HTML";
element.onclick = 事件处理器; setTimeout(事件处理器, 毫秒数); setInterval(事件处理器, 毫秒数);