---
# System prepended metadata

title: 程式網頁設計

---

# 程式網頁設計
[toc]
# 認識HTML
> 日期 2021/02/22 星期一
```htmlmixed=
<html> 
<head> <!-- 網頁設定 -->
	<title>
	國立鳳新高中
	</title>
</head>
<body> <!-- 網頁內容 -->
	<p>段落<br>段落換行</p>
	&nbsp;空白 &copy; &reg; &lt; &le; &gt; &ge; &amp;<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>
```
> 如要在段落中換行可以用 \&nbsp; 或 全形空白
> \&nbsp; 空白
> \&copy; &copy;
> \&reg; &reg;
> \&lt; &lt;
> \&le; &le;
> \&gt; &gt;
> \&ge; &ge;
> \&amp; &amp;

# 認識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>
```