練習HTML——簡單的網頁設計
阿新 • • 發佈：2018-12-30
用了一天的時間學習孫鑫老師的HTML視訊，（視訊只有2個小時）主要內容就是關於編寫HTML語言的標記符號，深知這些符號是記不住的，所以除了跟著老師練習例項以外，自己也編寫了一個簡單的網頁設計，當然了，對於後臺程式碼沒有實現，只是簡單的進行了介面設計，整個網頁內容涵蓋了視訊中講到的所有的內容，自己做出一個最簡單的網頁，挺開心的，對於我的學習馬上就正式的進入了B/S的階段，對學習的內容充滿興趣就是最好的開始！
下面就是整個視訊中涉及到的所有內容：
登陸介面：
HTML程式碼：
<html> <head><title>歡迎登陸HTML網站</title></head> <body> <center> <h2><b><font color="red">歡迎登陸HTML網站</font></b></h2> <p> <a href="http://blog.csdn.net/xh921"><b>製作人：肖紅</b><br></a> <hr color="blue"> 使用者名稱：<input type="text" name="user" value="" width="30"><br> 密碼： <input type="password" name="pwd" value="" width="30"><br> <table> <tr> <td> <input type="reset" value="退出"> <a href="網站首頁.html"><input type="submit" value="登入"></a> </td> </tr> </table> <p> <a href="註冊資訊.html"><b><i><font size="4" color="green">如果您是首次登陸，請點選這裡註冊您的登陸資訊！！！ </font></i></b></a> </center> </body> </html>
其中用到了文字內容的樣式和格式，用程式碼編寫控制元件以及超連結。
首次登陸需要註冊資訊，下面是註冊介面：
HTML程式碼：
<html> <head><title>歡迎註冊資訊</title></head> <body> <center> <caption><b>註冊資訊</b></caption> <p> <form method="get" action="zhuce.html"> <table> <tr> <td>使用者名稱：</td> <td><input type="text" name="user" value="" width="30"></td> </tr> <tr> <td>密碼：</td> <td><input type="password" name="pwd" value="" width="30"></td> </tr> <tr> <td>性別：</td> <td> <input type="radio" name="sex" value="0" checked>男 <input type="radio" name="sex" value="1">女 </td> </tr> <tr> <td>興趣愛好：</td> <td> <input type="checkbox" name="interest" value="football">足球 <input type="checkbox" name="interest" value="basketball">籃球 <input type="checkbox" name="interest" value="volleyball">排球 <input type="checkbox" name="interest" value="swim">游泳<br> <input type="checkbox" name="interest" value="tennis">網球 <input type="checkbox" name="interest" value="traveling">旅遊 <input type="checkbox" name="interest" value="painting">繪畫 <input type="checkbox" name="interest" value="reading">讀書 </td> </tr> <tr> <td>最高學歷</td> <td> <select size="1" name="education"> <option value="" selected>...</optin> <option value="高中">高中</option> <option value="大專">大專</option> <option value="大學">大學</option> <option value="博士">碩士</option> <option value="博士">博士</option> </select> </td> </tr> <tr> <td valign="top">個人說明:</td> <td><textarea name="personal" rows="5" cols="30">個人簡介</textarea></td> </tr> <tr> <td> <input type="reset" value="重置"></td> <td><input type="submit" value="註冊"></td> </tr> </table> </form> <a href="網站首頁.html"><font color="red"><b><font size="5">提示:</font></b>註冊成功之後請點選這裡您將直接登陸系統！</font></a> </center> </body> </html>
其中用到的主要就是互動式表單的製作。
下面是網站首頁：
HTML程式碼：
<html> <head><title>歡迎登陸HTML網站首頁</title></head> <body> <a href="歡迎登陸HTML網站.html"> <img src="網站首頁圖示.gif" width="80" height="50"> </a> <center> <h1><font size="15">HTML網站</font></h1> <hr color="blue"> <p> <b><i><font size="3"> 該網站資源豐富，包含了不同級別網頁設計師需要的各種資源<br> <p> 有以系列為主的視訊教程，有各種書籍以及各方專業人士的技<br> <p> 術部落格，您所需要的應有盡有！學習HTML，我們永遠陪伴您！！ </font></i></b> </center> <p> <table border="1" align="center"> <tr align="center" valign="middle"> <td width="150" height="40"><b><font color="red">基礎學習知識</font></b></td> <td width="150" height="40"><b><font color="red">學習教程</font></b></td> <td width="150" height="40"><b><font color="red">線上書籍閱讀</font></b></td> <td width="150" height="40"><b><font color="red">練習基地</font></b></td> </tr> <tr align="center" valign="middle"> <td width="150" height="40"><b><font color="red">程式碼大全</font></b></td> <td width="150" height="40"><b><font color="red">最新文章</font></b></td> <td width="150" height="40"><b><font color="red">視訊教程</font></b></td> <td width="150" height="40"><b><font color="red">技術部落格</font></b></td> </tr> </table> </body> </html>
其中主要有表格的使用，加上了一個圖片超連結。
熟悉老師在視訊中所講的內容，應用這些最基本的東西自己製作了一個簡單的網頁，自己動手做一些小例項，不僅能夠熟悉學習內容，更能增加自己學習的興趣，時時刻刻給自己動力就是最好的學習的方式。