# 程式網頁設計
[toc]
# 認識HTML
> 日期 2021/02/22 星期一
```htmlmixed=
<html>
<head> <!-- 網頁設定 -->
<title>
國立鳳新高中
</title>
</head>
<body> <!-- 網頁內容 -->
<p>段落<br>段落換行</p>
空白 © ® < ≤ > ≥ &<br>
<b>粗體</b><br>
<i>斜體</i><br>
<u>底線(格式)</u><br>
<del>刪除線</del><br>
<ins>插入</ins><br>
<strong>強調</strong><br>
<mark>標記</mark><br>
<pre>奇怪
的
段落</pre>
上標<sup>上標</sup><br>
上標<sub>下標</sub><br>
<hr>
<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>
<ul type="circle"> <!-- unordered-list 無序清單 -->
<li>我</li>
<li>是</li>
<li>無</li>
<li>序</li>
<li>清</li>
<li>單</li>
</ul>
<ol type="1" start="87"> <!-- ordered-list 有序清單 -->
<li>我</li>
<li>是</li>
<li>有</li>
<li>序</li>
<li>清</li>
<li>單</li>
</ol>
</body>
</html>
```
> 如要在段落中換行可以用 \ 或 全形空白
> \ 空白
> \© ©
> \® ®
> \< <
> \≤ ≤
> \> >
> \≥ ≥
> \& &
# 認識HTML
> 日期 2021/03/08 星期一
```htmlmixed=
<html>
<head>
<title>澳門首家線上賭場上限拉!~</title>
</head>
<body>
<a href="https://www.google.com.tw/" target="_blank">外部連結</a><br>
<a href="#here">內部書籤</a><br> <!-- 跳到id="here"的地方 -->
<a href="0308-2.html">相對路徑</a><br>
<a href="dir/0308-3.html">資料夾</a><br>
<p id="here">跳這</p>
<img src="https://i2.kknews.cc/SIG=3rp38fi/31sr0002pqns165os0qp.jpg" OnMouseOver="src='http://ww2.sinaimg.cn/large/9150e4e5ly1fffe6rl1j2j205i05idfw.jpg' ;" OnMouseOut="src='https://i2.kknews.cc/SIG=3rp38fi/31sr0002pqns165os0qp.jpg' ;"></img>
<br>
<br>
<img height="240" src="https://imgsa.baidu.com/forum/w%3D580/sign=c34a9b2d982bd40742c7d3f54b889e9c/48c832dbb6fd52661a783911a418972bd4073663.jpg" OnMouseOver="src='https://imgsa.baidu.com/forum/w%3D580/sign=96d8d6249fef76c6d0d2fb23ad16fdf6/703b90504fc2d562f630d4e8e81190ef76c66cfa.jpg' ;" OnMouseOut="src='https://imgsa.baidu.com/forum/w%3D580/sign=c34a9b2d982bd40742c7d3f54b889e9c/48c832dbb6fd52661a783911a418972bd4073663.jpg' ;"></img>
<br>
<br>
<table border="1" cellspacing="0"> <!-- 表格 -->
<tr> <th>A</th> <th>B</th> <th>C</th> </tr>
<tr> <td colspan="2">1 2</td> <td>3</td> </tr>
<tr> <td rowspan="2">4<br>7</td> <td rowspan="2" colspan="2">5 6<br>8 9</td> </tr>
</table>
</body>
</html>
```
```htmlmixed=
<html>
<head>
<title>澳門首家線上賭場上限拉!~</title>
</head>
<body>
<a href="../0308.html">上一層</a><br>
</body>
</html>
```
> OnMouseOver滑鼠移上去執行
> OnMouseOut 滑鼠移走執行
# 認識HTML
> 日期 2021/03/15 星期一
```htmlmixed=
<html>
<head>
<title>~愛是一道光 綠的你發慌~</title>
<style>
.class-div {
height:20px;
}
#d0 {
background:#4a6c6f;
color:#bee6ce;
}
#d1 {
background:#846075;
color:#bcffdb;
}
#d2 {
background:#af5d63;
color:#8dffcd;
}
#d3 {
background:#ed474a;
color:#68d89b;
}
#d4 {
background:#011627;
color:#4f9d69;
}
#d5 {
width:80px;
border:50px solid transparent;
border-top:0px solid black;
border-bottom:50px solid blue;
}
#d6 {
width:0px;
border:90px solid transparent;
border-top:90px solid blue;
}
#d7 {
width:0px;
padding:0px;
margin-left:50px;
border:90px solid transparent;
border-bottom:90px solid #516f33;
}
#d8 {
width:50px;
padding:0px;
margin-left:25px;
border:90px solid transparent;
border-top:0px solid transparent;
border-bottom:90px solid #496127;
}
#d9 {
width:100px;
padding:0px;
margin-left:0px;
border:90px solid transparent;
border-top:0px solid transparent;
border-bottom:90px solid #40531B;
}
#d10 {
width:50px;
height:70px;
margin-left:110px;
background:#52433D;
}
</style>
</head>
<body>
<div id="d0" class="class-div">會自動換行</div>
<div id="d1" class="class-div">會自動換行</div>
<div id="d2" class="class-div">會自動換行</div>
<div id="d3" class="class-div">會自動換行</div>
<div id="d4" class="class-div">會自動換行</div>
<br>
<div id="d5"></div>
<div id="d6"></div>
<br>
<div id="d7"></div>
<div id="d8"></div>
<div id="d9"></div>
<div id="d10"></div>
<span>不會自動換行</span><span>不會自動換行</span>
</body>
</html>
```
> 日期 2021/03/22 星期一
```htmlmixed=
<html>
<head>
<style>
#d1 {
width:0px;
height:0px;
border:50px solid #D2E0BF;
border-radius:60px 60px 5px 5px;
border-bottom-width:0px;
}
#d2 {
width:30px;
height:0px;
border:35px solid #CE96A6;
border-top-width:45px;
border-radius:35px 35px 0px 0px;
border-bottom-width:0px;
}
#d3 {
width:0px;
height:0px;
border:50px solid transparent;
border-top:150px solid #A47963;
}
#b1 {
width:5px;
height:50px;
background:black;
border:5px solid black;
border-left-color:transparent;
border-left-width:0px;
transition:width 0.5s ,height 0.5s ,border 1s;
}
#b1:hover {
width:500px;
height:50px;
padding:0px;
margin:0px;
border:5px solid black;
background:black;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<br>
<div id="b1"></div>
</body>
</html>
```
> 日期 2021/03/29 星期一
```htmlmixed=
<html>
<head>
<title>
段考搂~
</title>
<style>
@keyframes a1 {
0%{background: repeating-radial-gradient(circle,#084B83 2.5%,#42BFDD 7.5%,#BBE6E4 12.5%,#084B83 20%);}
33%{background: repeating-radial-gradient(circle,#42BFDD 2.5%,#BBE6E4 7.5%,#084B83 12.5%,#42BFDD 20%);}
67%{background: repeating-radial-gradient(circle,#BBE6E4 2.5%,#084B83 7.5%,#42BFDD 12.5%,#BBE6E4 20%);}
100%{background: repeating-radial-gradient(circle,#084B83 2.5%,#42BFDD 7.5%,#BBE6E4 12.5%,#084B83 20%);}
}
#d1 {
width:500px;
height:500px;
background: repeating-linear-gradient(130deg,#084B83 2.5%,#42BFDD 7.5%,#BBE6E4 12.5%,#084B83 20%);
}
#d2 {
width:500px;
height:500px;
background: repeating-radial-gradient(circle,#084B83 2.5%,#42BFDD 7.5%,#BBE6E4 12.5%,#084B83 20%);
}
#d2:hover {
animation:a1 0.5s infinite linear;
}
#d3 {
margin-top:100px;
font-size:30pt;
}
#d3:hover {
color:white;
text-shadow:-1px 0 3px #084B83,1px 0 3px #084B83,0 -1px 3px #084B83,0 1px 3px #084B83;
box-shadow:0px 0 10px #084B83;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3" valign="center" align="center" >Fucking shit I'm out</div>
</body>
</html>
```
> 日期 2021/03/29 星期一
```htmlmixed=
<html>
<head>
<title>少了一節課!</title>
<style>
#d1 {
width:100px;
height:100px;
background:#0B132B;
position:relative;
left:0px;
top:0px;
}
#out {
width:500px;
height:400px;
border:2px solid red;
position:relative;
left:100px;
top:100px;
}
</style>
<script>
function getE(id) {
return document.getElementById(id);
}
function getKey(event) {
var k=event.keyCode;
var L=parseInt(getE("d1").style.left);
var T=parseInt(getE("d1").style.top);
L=isNaN(L)?0:L;
T=isNaN(T)?0:T;
if(k==37) {
if(L>0) L-=10;
} else if(k==38) {
if(T>0) T-=10;
} else if(k==39) {
if(L<400) L+=10;
} else if(k==40) {
if(T<300) T+=10;
}
getE("d1").style.left=L+"px";
getE("d1").style.top=T+"px";
}
</script>
</head>
<body onkeydown="getKey(event);">
<div id="out">
<div id="d1"></div>
</div>
</body>
</html>
```
```htmlmixed=
<html>
<head>
<style>
#d1 {
width:500px;
height:50px;
background:red;
}
#timer {
width:100%;
height:20px;
background:red;
}
</style>
<script>
var t1, t2;
function getN(id) {
return document.getElementById(id);
}
function changeRange() {
getN("Range_num").innerHTML = getN("Range").value;
getN("d1").style.width = (5*getN("Range").value) + "px";
getN("d1").style.background = getN("color").value;
}
function start() {
t1=setInterval(gaming,100);
setTimeout(pause,10000);
t2=100;
getN("bgm").load();
getN("bgm").play();
}
function gaming() {
t2--;
getN("timer").style.width=t2+"%";
}
function pause() {
clearInterval(t1);
getN("bgm").pause();
}
</script>
</head>
<body>
<button onclick="start();">play</button><button onclick="start();">pause</button><br>
<input id="Range" type="range" min="0" max="100" value="100" oninput="changeRange();">
<label id="Range_num">100</label>
<hr>
<input id="color" type="color" value="#FF0000" oninput="changeRange();">
<br><br>
<div id="d1"></div><br>
<div id="timer"></div>
<audio id="bgm" loop>
<source src="Cat_life.mp3"></source>
</audio>
</body>
</html>
```
```htmlmixed=
<html>
<head>
<title>想睡zzz~</title>
<style>
#board {
width:500px;
height:500px;
border:2px dashed gray;
position:relative;
}
</style>
<script>
var t,t1,score;
function getE(id) {
return document.getElementById(id);
}
function rand(min,max) {
return Math.floor(Math.random()*(max-min+1))+min;
}
function born() {
var x=document.createElement("div");
var n=(rand(30,50));
x.style.width=n+"px";
x.style.height=n+"px";
x.style.background="#"+(rand(0,256*256*256-1)).toString(16);
getE("board").appendChild(x);
x.style.position="absolute";
x.style.top=rand(0,450)+"px";
x.style.left=rand(0,450)+"px";
setTimeout(born,1);
x.onclick=function () {hit(x);}
}
function hit(a) {
a.remove();
getE("score").innerHTML=score++;
}
function game_start() {
}
</script>
</head>
<body>
<button onclick="born();">新增</button>
<div id="board"></div>
</body>
</html>
```
```htmlmixed=
<html>
<head>
<title>二段ˇ_ˇ</title>
<script>
function getE(id) {
return document.getElementById(id);
}
function drags(ev) {
ev.dataTransfer.setData("text",ev.target.id);
}
function droping(ev) {
ev.preventDefault();
}
function drop(ev) {
ev.preventDefault();
var a=ev.dataTransfer.getData("text");
var b=ev.target.id;
var temp=getE(a).src;
getE(a).src=getE(b).src;
getE(b).src=temp;
}
</script>
</head>
<body>
<img id="a1" draggable="true" ondragstart="drags(event);" ondragover="droping(event);" ondrop="drop(event);" src="https://i2.kknews.cc/SIG=3rp38fi/31sr0002pqns165os0qp.jpg">
<img id="b1" draggable="true" ondragstart="drags(event);" ondragover="droping(event);" ondrop="drop(event);" src="http://ww2.sinaimg.cn/large/9150e4e5ly1fffe6rl1j2j205i05idfw.jpg">
</body>
</html>
```
Sign in with Wallet
Connect another wallet