演示視頻在文章底部
1.頁面内容居中顯示方法
将這段代碼<div style="width:50%;margin:auto;">放置在<body>标簽之下。
将</div>放置在</body>之上。
将全部内容包裹在這個div中，就可以實現整個頁面居中。
内容顯示寬度為浏覽器視窗寬度的50%。
margin（外邊距）是在CSS布局中經常用到的屬性，它指定了該div元素距離四周的距離。使用“auto”值，可以實現居中。
2.導航欄懸停頂端方法
把四個a标簽裝到一個div中。
将<div style="position:fixed; top:0px;">添加到<a style="margin: 0px 30px 0px 10px;" href="#chapter1">試飛進程</a>之上。
将</div>添加到<a style="margin: 0px 30px 0px 0px;"href="#chapter4">總體評價</a>之下。
position是css布局中指定位置的屬性，“fixed”值是讓該div懸停于固定位置。
默認下，該div距離視窗頂端有10px左右的距離，因此為了讓它與視窗頂部對齊，添加top：0px。
3.鼠标滑過導航标題或鍊接時改變背景色提示
這就要介紹關于css的寫法了。
簡單來說，就是在<head></head>标簽中添加
<style>
a:hover
{
background-color:#ffff00;
}
</style>
學過HTML頁面中head标簽有啥用？——零基礎自學網頁制作的小夥伴應該知道，CSS腳本是可以添加在head元素中的。
其中，a:hover中的a指的是所有<a></a>标簽。
hover指的是：當鼠标懸停在a上面時的狀态。
使用：連接。
這個狀态下要執行的内容在{}中。
background-color:#ffff00;即背景色為黃色。
3.隐藏滾動條方法
首先，我們要明确一點，就是，滾動條是在内容長度超過視窗高度時産生的。
如果要取消視窗最右側滾動條，就要控制内容高度。
把<p></p>和<img/><map></map>全部裝進<div></div>中，控制該div的高度可以實現。
在<p>标簽色上面添加<div>。
在</map>标簽下面添加</div>。
下面，為div規定尺寸，添加style="width:610px; height:530px;"。
這樣，就不會超出視窗。但是代碼寫完後發現并不是，如圖：
多出的文字内容超出div範圍，右側滾動條依然存在。
這就要在div的style中再增加一條語句"overflow-y:scroll;"
這句話的意思是“overflow-y”（超出最大高度）就顯示滾動條（scroll）。而不是讓内容超出div的邊框。
<div style="width:610px; height:530px; overflow-y:scroll;" >
如圖：
因為圖片寬度的問題，下方的x軸的scroll也出現了，我們不想看到它，影響美觀。
添加“overflow-x：hidden”即可，hidden（隐藏）。
<div style="width:610px; height:530px; overflow-y:scroll; overflow-x:hidden;" >
如圖：hidden之後，将無法滾動或拖動畫面。
最後，我們要把右側的scroll也隐藏掉，因為點擊鼠标，滾動滾輪就夠了，滾動條實在礙眼。
從前面的例子可知，hidden是不行的，有沒有别的辦法？
那就是在蓋div的外部再添加一個div，讓這個div的寬度略小于裡面div的寬度，小到剛剛擋住滾動條既可以。如圖：
這個div這樣寫即可
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;">
</div>
同時還要給裡面的div添加margin來讓它們對齊
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;">
<div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >
<!--省略了p img map 請自行腦補或參考源碼-->
</div>
</div>
完整代碼：用HTML制作一個簡單頁面（代碼閱讀練習）——零基礎自學網頁制作
4.圖片區域鍊接
詳見
HTML中的圖片區域鍊接方法詳解——零基礎自學網頁制作
HTML圖片區域鍊接注意事項與Gimp基本用法——零基礎自學網頁制作
具體過程請參照演示視頻：
HTML部分結語
幾經周轉，我還是堅持将HTML部分的内容寫完了。
經過這段時間的實踐，我确定的原則是：
第一，事無巨細，有用的話，就要用大白話解釋清楚。
第二，不嫌瑣碎，盡量把内容堆齊。堆到全看完後能夠看懂常見頁面代碼、具有一定的開發能力。
第三，使用多媒體手段把操作過程演示清楚，什麼時候忘了，打開就能看。
第四，控制篇幅，做碎片化學習。
無論怎樣，寫作本身是一件非常有趣的事，通過互聯網還能分享出來也是件快樂的事。
HTML部分結束了。
下一步該籌備CSS部分了。
謝謝大家的支持與陪伴！也感謝自媒體平台免費提供的服務。
内容如有疏漏或錯誤，歡迎斧正！感激不盡。
使用碎片時間，學習完整知識！關注大魚師兄，一起精研技藝。
目錄HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什麼？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head标簽有啥用？——零基礎自學網頁制作
初識meta标簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顔色）——零基礎自學網頁制作
使用HTML添加表格4（行顔色與表格嵌套）——零基礎自學網頁制作
16進制顔色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與内聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>标簽實現文本内鍊接——零基礎自學網頁制作
HTML中的圖片區域鍊接方法詳解——零基礎自學網頁制作
HTML圖片區域鍊接注意事項與Gimp基本用法——零基礎自學網頁制作
用HTML制作一個簡單頁面（代碼閱讀練習）——零基礎自學網頁制作
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
