使用HTML製作一個簡單的個人主頁
2020-10-11 12:00:42
此網頁是我對html有了一個簡單，初步的認識後製作的一個網頁，主要目的是練習html的一些簡單操作，由於時間關係，有很多做的不好，細節處理不到位的地方。
廢話不多說，先來看效果
1、首頁
這一個網頁就是進行了網頁背景、背景音樂、段落的處理、水平線以及超連結的簡單練習。
2、我的相簿
這一頁主要是對大量圖片進行一個排版的練習
3、我的計劃
這一頁主要是對文字有序無序以及表格內部的背景顏色等等的練習
4、我的家鄉
這一部分是對段落的細節處理、還有文字與圖片結合的練習
5、我的故事
這個是對錶格進階版的練習，文字都是隨便寫的。這邊其實還可以處理的更加合理，比如說大三下面那段文字可以從左向右排版，而不只是放在中間，由於時間關係，我就沒有實現。
下面是程式碼
<html>
<head>
<title>馬哈哈的個人主頁</title>
</head>
<body background="HTML\主頁背景.jpg" >
<h1><p align="center"><font color="black" face="楷體">自我介紹</font></p></h1>
<hr size="3px" color ="red">
<center>  <a href="馬哈哈.html">首頁</a>
            <a href="我的相簿.html">我的相簿</a>
            <a href="我的計劃.html">我的計劃</a>
            <a href="我的家鄉.html">我的家鄉</a>
            <a href="我的故事.html">我的故事</a></center>
<embed height="50" width="300" src="HTML\初見.mp3" />
</br>
</br>
</br>
</br>
<center><font size ="5" face="楷體" color="white">歡迎來到馬哈哈的個人主頁！！！</font></br>
<font size ="5" face="楷體" color="white">祝你每天都有好心情哦</font></br></center>
</body>
</html>
<html>
<head>
<title>我的相簿</title>
</head>
<body>
<img src="HTML\m1.JPG" width="200px" height="260px">
 <img src="HTML\m2.JPG" width="200px" height="260px">
 <img src="HTML\m3.JPG" width="200px" height="260px">
 <img src="HTML\m4.JPG" width="200px" height="260px">
 <img src="HTML\m5.JPG" width="200px" height="260px">
 <img src="HTML\m6.JPG" width="200px" height="260px">
 <img src="HTML\m7.JPG" width="200px" height="260px">
 <img src="HTML\m8.JPG" width="220px" height="260px">
 <img src="HTML\m9.JPG" width="280px" height="260px">
 <img src="HTML\m10.JPG" width="270px" height="260px">
 <img src="HTML\m11.JPG" width="200px" height="260px">
 <img src="HTML\m1.JPG" width="200px" height="260px">
 <img src="HTML\m2.JPG" width="200px" height="260px">
 <img src="HTML\m3.JPG" width="200px" height="260px">
 <img src="HTML\m4.JPG" width="200px" height="260px">
</body>
</html>
<html>
<head>
<title>我的計劃</title>
</head>
<body background="HTML\pink.jpg" <!--bgsound="HTML\天外來物.html"-->>
<h2><p align="center"><font color="blue" face="黑體">我的計劃</font></p></h2>
<hr size="1px" color="black" widt"500px">
<h2><font face="楷體" color="red" >大三計劃</font></h2>
<!--有序顯示-->
<ol type="1">
<li>拿到計算機二級證書</li>
<li>準備2021年英語六級考試
<!--表格-->
<!--每天背30個單詞
一週至少聽兩次英語聽力
後期每天做一篇閱讀理解-->
<table border="1" ><!--border=0或者直接不寫border這個屬性表格就是沒有邊框的-->
<tr>
<td bgcolor="red">  </td>
<td bgcolor="blue">專案</td>
</tr>
<tr>
<td bgcolor="yellow">第一</td>
<td bgcolor="yellow">每天背30個單詞</td>
</tr>
<tr>
<td bgcolor="georgian">第二</td>
<td bgcolor="green">一週至少聽兩次英語聽力</td>
</tr>
<tr>
<td bgcolor="gray">第三</td>
<td bgcolor="gray">> 後期每天做一篇閱讀理解</td>
</tr>
</table>
</tr>
<li>堅持上和訊的課程
<li>堅持學習程式設計
<li>爭取大三暑期能夠去實習
</ol>
<h2><font face="楷體" color="red" >大四計劃</font></h2>
<!--無序顯示-->
<ul>
<li>找到好工作</li>
<li>順利畢業</li>
<li>來一場畢業旅行</li>
</ul>
</body>
</html>
<html>
<head>
<title>馬哈哈的家鄉</title>
</head>
<body background="HTML\純藍.jpg">
<h1><p align="center"><font color="gray" face="楷體">大美青海</font></p></h1>
<h4>青海湖</h4>
<p>青海湖，藏語名為「措溫布」（意為「青色的海」）。
位於青藏高原東北部、青海省境內，中國最大的內陸湖、鹹水湖。
由祁連山脈的大通山、日月山與青海南山之間的斷層陷落形成。</p>
<p>2012年7月30日，青海省氣象科學研究所最新的遙感監測結果顯示，青海湖面積持續8年增大。
2014年10月20日9時50分，青海湖海心山北側出現「龍吸水」壯觀場景。</p>
<h4>形成演變</h4>
<h5>  <font face="楷書" color="gray">形成原因</font></h5>
<p>青海湖的構造斷陷湖，湖盆邊緣多以斷裂與周圍山相接。距今20～200萬年前成湖初期，形成初期原是一個大淡水湖泊，與黃河水系相通，那時氣候溫和多雨，湖水通過東南部的倒淌河洩入黃河，是一個外流湖。至13萬年前，由於新構造運動，周圍山地強烈隆起，
從上新世末，湖東部的日月山、野牛山迅速上升隆起，使原來注入黃河的倒淌河被堵塞，迫使它由東向西流入青海湖，出現了尕海、耳海，後又分離出海晏湖、沙島湖等子湖。</p>
<h5>  <font face="楷書" color="gray">境域變化</font></h5>
<p>由於外洩通道堵塞，青海湖遂演變成了閉塞湖。加上氣候變幹，青海湖也由淡水湖逐漸變成鹹水湖。北魏時青海湖的周長號稱千里，唐代為400公里，清乾隆時減為350公里。在布哈河三角洲前緣約20公里處有古湖堤遺址；距湖東岸25公里處的察漢城（建於漢代），原在湖濱。東西兩邊已分別退縮25公里和20公里，水位下降約100米。青海湖呈橢圓形，周長300餘公里。</p>
 <img src="HTML\青海湖1.jpg" width="300px" height="260px" alt="青海湖二郎劍景區">
 <img src="HTML\青海湖2.jpg" width="300px" height="260px" alt="青海湖">
 <img src="HTML\青海湖3.jpg" width="300px" height="260px" alt="青海湖與天空">
 <img src="HTML\青海湖4.jpeg" width="300px" height="260px" alt="油菜花">
<h4>茶卡鹽湖</h4>
<p>在蒼茫雄渾的中國西北大地上，在面積約為20萬平方公里的柴達木盆地中，有一種獨具特色的自然景觀，那就是神祕而美麗的高原鹽湖。這些鹽湖星羅棋佈在高原之上，有的與雪山為鄰，把綿延的山巒和皚皚的白雪倒映湖中；有的靜臥在荒漠裡，四周圍繞著白色的鹽帶，宛若戴上銀白色的項圈。
其中，最讓人神往的就是隱匿在祁連山和崑崙山之間的茶卡鹽湖了。高濃度的滷水造就了茶卡鹽湖水天一色的純淨之美，許多目睹過它美麗容顏的人們都將它稱作「藍色的海洋」。遠望積鹽似雪，近看白雲倒影，如鏡面一般的湖面折射著蔚藍色的天空和雪白的雲朵，美得令人窒息。</p>
<center> <img src="HTML\c3.jpg" width="300px" height="260px">
   <img src="HTML\c4.jpg" width="300px" height="260px">
   <img src="HTML\c5.jpg" width="300px" height="260px"></center>
<h4>中國的天空之鏡</h4>
<p>汽車飛奔在遼闊的315國道上，公路兩旁是一望無際的茫茫草原，草原的遠方是蔚藍色的湖水，在綠草盈盈的原野上散發出神祕的幽藍色光芒。湖濱的地勢平坦開闊，草叢中的格桑花正開得熱烈，深深淺淺的紫、濃淡不一的粉，如繁星般點綴著整片草原。汽車飛馳，一處處藏民的帳篷飛快地從眼前掠過，當天邊的雪山逐漸清晰起來時，我們忍不住驚呼起來：「終於到了，
茶卡鹽湖！」海拔3100多米的茶卡鹽湖是一座天然結晶鹽湖，坐落在青海湖的西南方向、海西蒙古族藏族自治州烏蘭縣茶卡鎮附近，被譽為柴達木東大門，歷史上曾是商賈、遊客進疆入藏的必經之地。
「茶卡」在藏語中意為鹽池，也就是青鹽的海。茶卡鹽湖與塔爾寺、青海湖、孟達天池齊名，被稱作「青海四大景」。茶卡鹽湖是柴達木盆地四大鹽湖中最小的一個，東西長15.8公里，南北長9.2公里，呈橢圓形。鹽湖的總面積大約有105平方公里，相當於10個杭州西湖大小。在這裡，天是湖的一部分，湖是天的補充，似真似幻，遠處水與天已沒有明顯的界限。</p>
   <img src="HTML\c1.jpg" width="300px" height="260px">
   <img src="HTML\c2.jpg" width="300px" height="260px">
</body>
</html>
<html>
<head>
<title>關於馬哈哈的故事</title>
<body background="HTML\樓.jpg">
<!--<pre><center><h2><font color="maroon" face="宋體"><i>大一 懵懂無知</h2></center></pre>
<pre><center><h2><font color="navy" face="宋體"><i>大二 找到方向</h2></center></pre>
<pre><center><h2><font color="teal" face="宋體"><i>大三 堅定向前</h2></center></pre>-->
<table>
<tr>
<td><center><h4><font face="楷書" color="red">大一</font></h4></center></td>
<td> </td>
<td><center><h4><font face="楷書" color="red">大二</font></h4></center></td>
</tr>
<tr>
<td>大一上學期的時候，很多同學還處於熟悉周圍環境，適應大學生活，
忙於各種學生會社聯會社團之間，一切覺得新鮮而又充實。</br>
確實，剛來大學的我們，壓力也不需要那麼重，但不是沒有方向。依據學校要求不同，大一上學期一般是可以報名英語四級的，
如果沒有的話，可以考慮先做做四六級的題等下學期再報，當然，如果整個大一都報不了四六級的話，你可以選擇報考初級會計，國家計算機二級，這都是在大一可以考慮的，關於需不需要報班，
在於自己自學能力如何，自己考慮好以後做決定就行了。</br>
</td>
<td> </td>
<td>到了大二，我們基本上已經適應了整個大學的生活，應該說大多數同學
已經知道可以考證了，
甚至開始為自己量身客製化計劃。大二的我們，在大一的基礎上，
如果沒有通過四六級和國二，應該繼續為此而努力。
大二上把績點刷高，提前修掉大三上的專業課。
別虛和學長姐一起上課，他們也什麼都不懂。
多參加模擬法庭。儘量參加理律杯或者貿仲杯。如果你大一考過託福110+肯定沒問題的。當然還有各種小比賽。
比如成才杯金法槌什麼的。別因為沒準備好就錯過。</td>
</tr>
<tr>
<td> </td>
<td></br></br></br><center><h4><font face="楷書" color="red">大三</font></h4></center></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td></br></br>大三上出國交換。儘量是卓越計劃吧。
這就要求大二上儘量把大三的專業課先上了。
雖然說著大四可以補，但實際上沒有時間的。</td>
<td> </td>
</tr>
</table>
</body>
</head>
</html>