記錄一下前端的學習，貼一下代碼和效果截圖：
第一部分：簡單文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>英雄聯盟 （電子競技遊戲）</h1>
<p><strong>《英雄聯盟》</strong>（簡稱lol）是由美國<em>Riot Games</em>開發，中國大陸地區由騰訊遊戲運營的網絡遊戲。</p>
<p><strong>《英雄聯盟》</strong>除了即時戰略、團隊作戰外，還擁有一百多位特色各異的英雄、豐富的地圖及玩法、
自動匹配的展望平臺，包括天賦樹、召喚師系統、符文等元素。[<ins>1</ins>]</p>
<p>2016年1月，根據官方數據顯示，LOL全球最高同時在線已突破<del>750</del> 900萬，全球日活躍高達2700萬，全球月活躍已達6700萬，
註冊用戶億計，LOL億計成爲當今世界最具人氣和影響力的網絡遊戲之一。[<ins>2</ins>]</p>
</body>
</html>
第二部分：表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html">
</head>
<body>
<h2>英雄技能</h2>
<table border="1">
<tr bgcolor="#ddd">
<td width="100px"><strong>技能名</strong></td>
<td width="50px"><strong>觸發</strong></td>
<td width="100px"><strong>技能屬性</strong></td>
<td><strong>技能效果</strong></td>
<td width="65px">圖標</td>
</tr>
<tr>
<td><strong>堅韌</strong></td>
<td><strong>被動</strong></td>
<td colspan="2">蓋倫如果在9秒內不受到任何傷害，之後的每秒都會回覆自己最大生命值的0.4%。小兵的傷害不會中斷堅韌效果。</td>
<td><img src="skill1.png" width="65px" height="65px" /></td>
</tr>
<tr>
<td><strong>致命打擊</strong></td>
<td><strong>Q</strong></td>
<td>冷卻時間：8</td>
<td>蓋倫移除身上的所有減速效果，並獲得30%移動速度加成，持續1.5/2/2.5/3/3.5秒。<br />
在接下來的4.5秒內，他的下次普通攻擊會造成30/55/80/105/130(+1.4AD)物理傷害，並沉默目標1.5秒。</td>
<td><img src="skill2.png" width="64px" height="64px" /></td>
</tr>
<tr>
<td><strong>勇氣</strong></td>
<td><strong>W</strong></td>
<td>冷卻：24/23/22/21/20</td>
<td><strong>被動：</strong>擊殺一個單位會永久提供0.25護甲和魔法抗性加成，最大值：30<br />
<strong>主動：</strong>蓋倫獲得一個持續2/3/4/5/6秒的防禦護盾，減少即將到來的30%傷害。</td>
<td><img src="skill3.png" width="64px" height="65px" /></td>
</tr>
<tr>
<td><strong>審判</strong></td>
<td><strong>E</strong></td>
<td>冷卻：9</td>
<td>蓋倫快速地旋舞大劍，持續3秒，在持續期間對周圍敵人總共造成物理傷害——14/18/22/26/30加上他總攻擊力的34/35/36/37/38%，5次(英雄每升3級加1次)。<br />
E【審判】會在攻擊單個敵人時造成33%額外傷害。<br />
取消E【審判】會返還相當於剩餘持續時長的冷卻時間。<br />
E【審判】可以暴擊，並造成額外傷害。</td>
<td><img src="skill4.png" width="64px" height="64px" /></td>
</tr>
<tr>
<td><strong>德瑪西亞正義</strong></td>
<td><strong>R</strong></td>
<td>冷卻：120/100/80</td>
<td><strong>被動：</strong>最近獲得最多擊殺數的敵人會成爲<strong>大反派</strong>。蓋倫的E【審判】和普攻會對<strong>大反派</strong>造成額外真實傷害，傷害值爲<strong>大反派</strong>1%的最大生命值。<br />
<strong>主動：</strong>蓋倫召喚德瑪西亞之力，試圖斬殺一名敵方英雄，目標損失的生命越多，則此技能造成的傷害越高。造成175/350/525魔法傷害加上目標已損失生命值的28/33/40%。對<strong>大反派</strong>造成真實傷害。
</td>
<td><img src="skill5.png" width="64px" height="64px" /></td>
</tr>
</table>
</body>
</html>
第三部分：表單
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table width="100%" border="1">
<tr>
<td align="right" width="150px">
<font color="#FF0000">*</font>用戶名:
</td>
<td>
<input type="text" size="30" />
<font color="red">用戶名不得小於3個字符</font>
</td>
</tr>
<tr>
<td align="right">
<font color="#FF0000">*</font>密碼:
</td>
<td>
<input name="text" type="text" size="30" />
</td>
</tr>
<tr>
<td align="right">
<font color="#FF0000">*</font>確認密碼:
</td>
<td><input name="text2" type="text" size="30" /></td>
</tr>
<tr>
<td align="right">
<font color="#FF0000">*</font>Email:
</td>
<td><input name="text3" type="text" size="30" /></td>
</tr>
<tr>
<td align="right">
<font color="#FF0000">*</font>真實姓名:
</td>
<td><input name="text4" type="text" size="30" /></td>
</tr>
<tr>
<td align="right">
<font color="#FF0000">*</font>性別:
</td>
<td>
<select>
<option>男</option>
<option>女</option>
</select>
</td>
</tr>
<tr>
<td align="right">
<font color="#FF0000">*</font>生日:
</td>
<td><select name="select">
<option>1980</option>
<option>1981</option>
<option>1982</option>
<option>1983</option>
<option>1984</option>
<option>1985</option>
<option>1986</option>
<option>1987</option>
<option>1988</option>
<option>1989</option>
<option>1990</option>
<option>1991</option>
</select>
<select name="select2">
<option>1</option>
<option>2</option>
<option>...</option>
<option>12</option>
</select>
<select name="select3">
<option>1</option>
<option>2</option>
<option>...</option>
<option>31</option>
</select></td>
</tr>
<tr>
<td align="right">
<font color="#FF0000">*</font>手機:
</td>
<td><input name="text7" type="text" size="30" /></td>
</tr>
<tr>
<td align="right">
<font color="#FF0000">*</font>居住地:
</td>
<td><select name="select4">
<option>四川省</option>
<option>河南省</option>
<option>廣東省</option>
<option>河北省</option>
<option>黑龍江省</option>
<option>海南省</option>
<option>安徽省</option>
<option>內蒙古省</option>
<option>廣西省</option>
<option>湖南省</option>
<option>湖北省</option>
<option>浙江省</option>
</select>
<select name="select5">
<option>成都市</option>
<option>重慶市</option>
<option>...</option>
<option>北京市</option>
</select> <select name="select6">
<option>成華區</option>
<option>龍泉驛區</option>
<option>...</option>
<option>金牛區</option>
</select> <select name="select7">
<option>三聖鄉</option>
<option>星輝路</option>
<option>...</option>
<option>蜀都大道</option>
</select></td>
</tr>
<tr>
<td align="right">
<font color="#FF0000">*</font>QQ:
</td>
<td><input name="text9" type="text" size="30" />
<br />
<font size="-1" color="#0099FF">設置我的QQ在線狀態</font>
</td>
</tr>
</table>
</body>
</html>