（HTML完結篇）制作一個簡單頁面(詳解)-零基礎自學網頁制作

面制作技術詳解

演示視頻在文章底部

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的邊框。

如圖：

因為圖片寬度的問題，下方的x軸的scroll也出現了，我們不想看到它，影響美觀。

添加“overflow-x：hidden”即可，hidden（隱藏）。

如圖：hidden之后，將無法滾動或拖動畫面。

最后，我們要把右側的scroll也隱藏掉，因為點擊鼠標，滾動滾輪就夠了，滾動條實在礙眼。

從前面的例子可知，hidden是不行的，有沒有別的辦法？

那就是在蓋div的外部再添加一個div，讓這個div的寬度略小于里面div的寬度，小到剛剛擋住滾動條既可以。如圖：

這個div這樣寫即可

</div>

同時還要給里面的div添加margin來讓它們對齊

</div>

完整代碼：用HTML制作一個簡單頁面（代碼閱讀練習）——零基礎自學網頁制作

面效果展示

頁面完整代碼

<!DOCTYPE HTML>
<html>
<head> 
<title>文內鏈接</title>
<style>
a:hover
{
background-color:yellow;
}
</style>
</head> 
<body >
<div style="width:50%;margin:auto;"><!--使頁面居中顯示，并展視窗50%寬度-->
<div style="position:fixed; top:0px;"><!--使導航菜單懸停在頂端-->
<a style="margin: 0px 30px 0px 10px;" href="#chapter1">試飛進程</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter2">研制情況</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter3">服役動態</a>
<a style="margin: 0px 30px 0px 0px;"href="#chapter4">總體評價</a>
</div><!--使導航菜單懸停在頂端（結尾）-->
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;"><!--小div套大div隱藏滾動條-->
<div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >
<p><!--小div-->
<h2><a id="chapter1" >試飛進程</a></h2>
殲-20隱形戰斗機首架技術驗證機于2011年1月11日中午12時50分左右進行首次升空飛行測試，13時08分成功著陸，歷時18分鐘。<br>
整個首飛過程在殲-10S戰斗教練機陪伴下完成 。
2016年10月28日，首次發布“空軍試飛員將駕殲-20飛機亮相中國航展”后，還陸續發布了“殲-20戰機列裝空軍作戰部隊”“空軍殲-20戰機首次開展海上方向實戰化訓練”等。
<h2><a id="chapter2">研制情況</a></h2>
在2016年11月1日，第十一屆珠海航展，殲-20首次進行空中飛行展示。兩架殲-20做了公開飛行，不僅在現場引起轟動，也立刻被西方媒體大量報道。殲-20是中國現代空中力量的代表作，也進入了世界最先進的第五代戰斗機行列，它是中國國防能力高速發展的一個象征。<br>
2018年11月11日，第十二屆中國航展在珠海迎來“高光時刻”：殲-20戰機在公開飛行展示中掛彈開倉，震撼獻禮人民空軍成立69周年紀念日。 <br>
2019年10月13日，慶祝人民空軍成立70周年航空開放活動新聞發布上，空軍新聞發言人申進科大校介紹殲-20戰機列陣人民空軍“王牌部隊”
<h2><a id="chapter3" >服役動態</a></h2>
2017年3月9日，中央電視臺報道殲-20戰斗機正式進入空軍序列。<br>
2017年3月13日，《中國日報》發布消息稱，中國自主研制的殲-20近期將裝配國產發動機。<br>
2017年7月30日，殲-20三機編隊參加在朱日和舉行的慶祝中國人民解放軍成立90周年閱兵。殲擊機梯隊飛來，3架殲-20隱形戰斗機以楔形編隊的形式在天空中飛過。<br>
2017年9月28日，在中國國防部行記者會上，國防部新聞發言人吳謙大校介紹殲-20飛機已經列裝部隊。<br>
2017年11月10日上午，中國空軍發言人申進科大校表示，殲-20 列裝部隊后，已經開展編隊訓練。<br>
2018年2月9日，中國空軍新聞發言人申進科大校發布消息，殲-20開始列裝空軍作戰部隊。<br>
2018年10月30日，中國空軍4架殲-20隱形戰斗機現身珠海金灣機場上空。<br>
2019年10月1日，殲-20現身慶祝中華人民共和國成立70周年閱兵式；閱兵中，殲-20與殲-16、殲-10C三型飛機分別以5機楔隊組成戰斗隊形接受檢閱；該三款殲擊機被譽為中國空軍殲擊機家族的“三劍客”，是未來聯合作戰的骨干力量
<h2><a id="chapter4" >總體評價</a></h2>
殲-20是眼下亞洲區域最先進的戰機，這讓中國空軍在面對日本、韓國與印度等國家的空軍時占有顯著優勢。外媒將殲-20與其他國家戰機進行了對比。俄羅斯蘇霍伊蘇-57戰斗機由于研制進度幾度推遲，尚未正式交付入役；美國F-35戰斗機也多次出現飛機供氧不足的問題，大面積停飛，出口受阻；韓國KF-X隱形戰機先是被爆出因掌握不了關鍵技術而被迫降成四代半戰機的情況，后又傳出了合作方印尼打算撤資并已告知韓國的消息。因此，中國殲-20戰機成為亞太區域領跑的優勢戰機。<br>
中國空軍正向全疆域作戰的現代化戰略性軍種邁進，成為有效塑造態勢、管控危機、遏制戰爭、打贏戰爭的重要力量。殲-20戰機列裝空軍作戰部隊，將進一步提升空軍綜合作戰能力，有助于空軍更好的肩負起維護國家主權、安全和領土完整的神圣使命。<br>
殲20是我國自主研制的第五代戰斗機，它的研制實現了既定的四大目標——打造跨代新機、引領技術發展、創新研發體系、建設卓越團隊。打造跨代新機，是按照性能、技術和進度要求，研制開發我國自己的新一代隱身戰斗機。引領技術發展，指通過自主創新實現強軍興軍的目標。殲20在態勢感知、信息對抗、協同作戰等多方面取得了突破，這是中國航空工業從跟跑到并跑，再到領跑的必由之路。創新研發體系，是指建設最先進的飛機研制條件和研制流程。通過一大批大國重器的研制，我們建立了具有我國特色的數字化研發體系。建設卓越團隊，是指通過型號研制，錘煉一支愛黨愛國的研制隊伍，這些擁有報國情懷、創新精神的優秀青年是航空事業未來發展的生力軍。未來，我們將在戰斗機的機械化、信息化、智能化發展征程上不斷前行。
</p>
<img border="0" src="img/image1.jpg" usemap="#map" / >
<map name="map" id="map">
<area shape="poly"  coords="142,62,186,175,246,236,243,298,263,323,396,338,478,313,516,246,496,224,320,158,348,142,336,129,232,108" href="https://www.zhihu.com/question/284642168" / title="殲20氣動外形分析"><!--必須保證畫面尺寸與頁面顯示尺寸一致！-->
</map>
</div><!--小div(結尾)-->
</div><!--小div套大div隱藏滾動條（結尾）-->
</div><!--使頁面居中顯示，并展視窗50%寬度（結尾）-->
</body> 
</html>

頁面制作技術解析

1.頁面內容居中顯示方法

2.導航欄懸停頂端方法

3.鼠標滑過導航標題或鏈接時改變背景色提示

3.隱藏滾動條方法

4.圖片區域鏈接

大家結合代碼和技術解析，先自行分析一下每段代碼的作用，以及它們之間的前后關系。這一步練習對培養代碼閱讀能力很有好處，希望大家可以先自行閱讀分析。

下一次，我會逐步演示“頁面制作技術解析”中的五個步驟以及一些注意事項。

使用碎片時間，學習完整知識！關注大魚師兄，一起精研技藝。

TML元素的屬性

屬性是為HTML元素提供的附加信息。

為相同的HTML元素指定不同的屬性，會呈現不同的功能或效果。

舉個例子：

比如我們在上一篇中練習過的<a></a>標簽構成的超鏈接元素中有一個href屬性，這個屬性指定的是點擊后跳轉的頁面地址，相同的<a>標簽改變href屬性就能跳轉不同的頁面。例如

<a href="https://www.bilibili.com/read/cv2720755">殲-20戰斗機</a>
<a href="http://mil.chinanews.com/mil/hd2011/2014/03-06/315569.shtml">殲-20戰斗機</a><!-- 注釋 看起來一樣的超鏈接元素因為href屬性不同，打開的頁面也不同。-->

小伙伴們自己寫的時候要注意使用半角符號，不然不能正確打開鏈接。

超鏈接元素中還有一個控制鏈接頁面打開的屬性叫做target，是用來控制新打開頁面窗口的位置。下面我們就看看target屬性為_blank和_parent的情況下的不同。例如

<a href="https://www.bilibili.com/read/cv2720755" target="_blank">殲-20戰斗機</a>
<a href="http://mil.chinanews.com/mil/hd2011/2014/03-06/315569.shtml" target="_parent">殲-20戰斗機</a><!-- 注釋 看起來一樣的超鏈接元素因為target屬性不同，打開的頁面所在窗口不同。-->

測試后，target="_blank"時，新頁面在測試頁面窗口旁邊新建一個窗口打開。

target="_parent"時，新頁面在原有測試頁面窗口中打開。

如圖所示：

左邊為_blank,右邊為_parent,點擊左邊鏈接后，新窗口在原有窗口旁邊打開。如下圖：

點擊右側

新頁面在原窗口處打開。

<a>標簽的target屬性還有_self、_top這樣的屬性，感興趣的小伙伴可以自行測試。

一般HTML元素的通用屬性有：class 、id 、style 、title這四類，其中class 、id 、style這三個屬性會在CSS的講解中詳細學習。

下面我們通過練習來看看title屬性的作用。

HTML元素屬性使用練習1

NO.1: title

title屬性用于顯示元素的額外信息使用。示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網頁</title>
</head> 
<body>
  <h1>第一個網頁</h1><hr>
<a href="https://www.bilibili.com/read/cv2720755" target="_blank" title="中國最先進戰斗機">殲-20戰斗機</a>
</body> 
</html>

效果如圖：當鼠標移動到超鏈接上時，"中國最先進戰斗機"的說明就出現在下側。

NO.2:href/src/url

這三個屬性雖然寫法不同，但都是為元素指定路徑使用的。不屬于通用屬性。

例如<a>標簽中指定鏈接路徑使用的是href，而<img>標簽中導入圖片的路徑是src，url在css中也常用來引入鏈接。具體練習大家可以翻看《HTML中的元素使用方法2——零基礎自學網頁制作》一文。

這里要介紹的是關于網頁中的路徑的兩個重要概念：絕對路徑、相對路徑。

絕對路徑是指文件在硬盤上真正存在的路徑。

相對路徑就是相對自己的目標文件的位置。

怎么理解這兩個概念呢？舉個例子：

如果我們要在"第一個頁面.html"中顯示一張圖片image1.jpg，它們都在我的"D盤/零基礎自學網頁制作"這個文件夾中。如圖：

如果用絕對路徑導入寫法是這樣的：

<img src="file:///D:/零基礎自學網頁制作/image1.jpg"/>

相對路徑這樣寫：

<img src="image1.jpg"/>

大家觀察一下，也看出了絕對路徑與相對路徑的區別了。

另外，這樣的鏈接也屬于絕對路徑：href="https://www.bilibili.com/read/cv2720755"

那么什么時候使用相對路徑什么時候使用絕對路徑呢？這個問題我會在明天深入為大家講解，這涉及到網頁或網站上傳服務器的問題。

做教程確實是沒什么人看，但是我依然會堅持，我是一名高校教師（認證資料等疫情結束后去辦公室拍攝上傳吧），把自己的知識寫出來對自己來說是一個提高，也把原來很多常用卻不甚了然的概念再次打磨清晰是我最大的收獲。本篇教程針對完全沒有基礎的網頁制作學習者，利用碎片時間學習，只要我們堅持，必然可以完成網頁制作的學習，為未來學習更加復雜的內容打下基礎！

喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

HTML完整學習目錄

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>標簽實現文本內鏈接——零基礎自學網頁制作

在線咨詢

上一篇：干貨來了！Vue 學習路線圖收好！
下一篇：簡要地教你使用HTML 5.2對話框

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商