初識HTML中的&lt;div&gt;塊元素-零基礎自學網頁制作

lt;div>塊元素基礎屬性講解

<div>元素是個有故事的元素，這個元素很早就出現在html超文本標記語言中，它設計之初就是為了解決網頁頁面布局的需求。但是遺憾的是它出生后一直懷才不遇。

在我還上初中的時候，智能手機還沒有出現，更沒有平板電腦等移動設備。上網是通過擺在桌子上的計算機來完成的。

那時，大街小巷上有好多網吧。

那時，馬云剛剛辭去工作準備創業。

那時，發送郵件的操作都會出現在計算機課程中。

那時，對頁面還沒有現在的跨平臺要求。

那時，flashplayer大行其道。

那時，dreamwaver、flash、fireworks被稱為網頁三劍客！

那時，制作網頁可以不用懂的html的寫法！

第一次接觸網頁制作是在大學的專業課上，使用三劍客，通過點擊軟件菜單中的按鈕就能制作網頁，精力都放在了如何使用flash制作酷炫的交互動畫上了。

那時，對html還沒有深刻的認識，但是卻對<table></table>這個標簽有著極深的印象。

因為當時的dreamwaver通過非代碼方式生成的頁面都是使用<table>表格元素進行布局的！

也就是說，在移動智能設備誕生之前，在用戶對頁面還沒有可以適應不同屏幕比例的要求前，<table>這個本來用來做表格的元素同時兼職了<div>的頁面布局工作，而且把兼職干成了主業，讓<div>這個專業的塊元素閑置了好久。

直到智能手機，平板電腦產生后，由于對頁面的跨平臺顯示的要求的出現（這類適應多平臺的頁面布局叫做響應式布局），<table>表格制作的頁面在響應式布局大行其道的今天，用它布局的頁面開始出現代碼冗余，維護困難等諸多問題。手機端的瀏覽器在播放視頻或其他交互動畫時也不再依賴flashplayer這個給我們帶來無數反感和惱火的插件。

從此，頁面制作的世道變了，從不需要編程就能制作頁面的三劍客，變成了必須懂得相關代碼寫法才能使用的HTML+CSS+JavaScript了。dreamwaverCC版本也恢復了寫代碼做頁面的操作方式，過去的點擊加拖拽的制作方式也消失了。這讓很多不懂編程和HTML等頁面制作核心技術的從業人感到難受。

dreamwaver的老東家Adobe后來也嘗試過推出新模式下通過界面操作來制作網頁的軟件，還搞出一個叫做Muse的軟件，但是依舊沒能撬動代碼書寫的方式。

這個故事在開始學習<div>和css布局之前我都會講給學生（一群文科生）聽，我只是想告訴大家，學習任何計算機技術，我們可以從簡單易學的方式入手，但要有透過這種方式向下挖掘核心知識的決心和勇氣！對于自己從事的工作我們不能滿足于會做，還要盡量透析它的原理，這樣才能在技術換代中不會被輕易淘汰。

在我研究生階段，有一門讓我終生難忘的選修課，這門課叫做《數字娛樂技術概述》，這門課既不娛樂也不概述，但是通篇都是數字，那位年輕的教授為我們透析了游戲、影視特效的核心----計算機圖形學。

從此我開始學習數學。因為老師的一句話：從2000年到現在（2014）雖然各種軟件層出不窮，但是計算機圖形學的核心算法卻幾乎沒什么改變。

向下挖掘雖然很難，但是有必要！與各位共勉！

下面開始今天的內容。

首先，我們將之前的"第一個頁面.html"文件復制一個，叫做"塊元素學習.html"。然后把<body></body>中間的內容清空。

如圖：

下面，我們在<body></body>中間添加<div></div>標簽。示例代碼如下：

<body><div></div></body>

我們看看效果：

啦啦啦，什么都沒有！

為了讓大家可以看出來不同，我們為<div>添加邊框屬性！

我們使用style屬性為<div>添加邊框，style屬性里的代碼就是以后在CSS中使用的代碼！實際上我們已經開始接觸CSS的一些內容了。具體寫法的講解大家可以看這個教程，這里不再贅述。

示例代碼如下：（通過style = "border-style: solid;"可以為很多元素添加邊框，就不需要大家記憶或查詢不同元素的不同寫法，是不是很方便！）

<div style = "border-style: solid;">

效果如圖：

因為里面沒有內容，所以<div>的寬度是0，因此顯示的就是一條直線。下面我們向<div>中添加內容。

為了看起來花哨些，加張圖片吧！

示例圖片

示例代碼如下：

<div style = "border-style: solid;"><img src = "img/示例圖片/image4.jpg"/ style = "width:50%；"></div>

大家請按照<img>中的scr自行建立文件夾和命名吧！如果您看不懂請參照《HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作》

效果如下：

其中，我們也是使用了style的方式為<img>設置的寬度，這個設置方法在<div>中一樣使用！

代碼示例：大家注意寫法，不同的屬性都添加到style的雙引號中即可，同時使用；隔開！

<div style = "border-style: solid; width:50%;">
  <img src = "img/示例圖片/image4.jpg"/ style = "width:50%;">
    </div>

效果如圖：

整個邊框縮小了50%，圖片更有趣，尺寸變成了div的50%乘以自身的50%。這個特性大家要記住。

為了方便觀看，我們去掉div的width設置。同時在<div>中繼續添加<div>標簽。為了方便顯示，我們在新的<div>中添加一段文字！

示例代碼如下：

<div style = "border-style: solid;">
  <img src = "img/示例圖片/image4.jpg"/ style = "width:50%;">
    <div>
    <p>學習網頁制作非常有趣！</p>
</div>
</div>

效果如下：

如果為了美觀，我們讓文字到圖片右邊的空間中怎么做呢？

示例代碼如下：

<div style = "float:right;"><p>學習網頁制作非常有趣！</p></div>

我們通過為新的<div>標簽中的style屬性添加float（浮動）屬性，同時設置為right（右）。

頁面效果如圖：

大家思考一下如何讓圖片與文字都靠在左邊呢？

是不是為圖片style添加float:left;同時把新<div>的float改為left？

我們試試看！

示例代碼如下：

<div style = "border-style: solid;">
  <img src = "img/示例圖片/image4.jpg" style = "width:50%; float:left;"/>
    <div style = "float:left;">
      <p>學習網頁制作非常有趣！</p>
</div>
</div>

頁面效果：

效果完全不對，圖片和文字跑到外邊來了。

這是div布局中經常出現的一個問題！解決方案有點奇葩，既不是修改<img>屬性也不是修改<div>屬性，而是增加一組空的<div></div>標簽！給這個新的空的<div>的style設置為"clear:both"即可修正。

示例代碼如下：

<div style = "border-style: solid;">
  <img src = "img/示例圖片/image4.jpg" style = "width:50%; float:left;"/>
    <div style = "float:left;">
      <p>學習網頁制作非常有趣！</p>
</div>
<div style = "clear:both;"></div>
</div>

頁面效果如下：

值得注意的是，如果您不使用<div>的話直接使用<img>和<p>，同時對兩個標簽的style設置為float：left，是沒有問題的，只有把它們放到<div>中才會出現上面的情況。

代碼如下：

<body>
  <img src = "img/示例圖片/image4.jpg" style = "width:50%; float:left;"/>
    <p style = "float:left;">學習網頁制作非常有趣！</p>
</body>

頁面顯示效果如下：

大家觀察一下，文字也變小了。至于為什么去掉<div>之后就不會出現上面那種出框的情況，而且文字也變小的問題在以后的講解中我們再深入探討！

現在希望大家可以記牢這個情況和操作，更多布局問題我們會在CSS的浮動（float）的講解中詳細說明。

疫情期間，請大家少出門，不聚會，沒事在家學學網頁制作，即抗擊疫情又提高自己!

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

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

面效果展示

頁面完整代碼

<!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.圖片區域鏈接

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

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

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

	雖然我們可以使用HTML table標簽來設計出漂亮的布局，但是table標簽是不建議作為布局工具使用的 - 表格不是布局工具。

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥教程(runoob.com)</title></head><body><divid="container"style="width:500px"><divid="header"style="background-color:#FFA500;"><h1style="margin-bottom:0;">主要的網頁標題</h1></div><divid="menu"style="background-color:#FFD700;height:200px;width:100px;float:left;"><b>菜單</b><br>HTML<br>CSS<br>JavaScript</div><divid="content"style="background-color:#EEEEEE;height:200px;width:400px;float:left;">內容在這里</div><divid="footer"style="background-color:#FFA500;clear:both;text-align:center;">版權 ? runoob.com</div></div></body></html>

上面的 HTML 代碼會產生如下結果：

HTML 布局 - 使用表格

使用 HTML <table> 標簽是創建布局的一種簡單的方式。

大多數站點可以使用 <div> 或者 <table> 元素來創建多列。CSS 用于對元素進行定位，或者為頁面創建背景以及色彩豐富的外觀。

	即使可以使用 HTML 表格來創建漂亮的布局，但設計表格的目的是呈現表格化數據 - 表格不是布局工具！

下面的例子使用三行兩列的表格 - 第一和最后一行使用 colspan 屬性來橫跨兩列：

實例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥教程(runoob.com)</title></head><body><tablewidth="500"border="0"><tr><tdcolspan="2"style="background-color:#FFA500;"><h1>主要的網頁標題</h1></td></tr><tr><tdstyle="background-color:#FFD700;width:100px;"><b>菜單</b><br>HTML<br>CSS<br>JavaScript</td><tdstyle="background-color:#eeeeee;height:200px;width:400px;">內容在這里</td></tr><tr><tdcolspan="2"style="background-color:#FFA500;text-align:center;">版權 ? runoob.com</td></tr></table></body></html>

上面的 HTML 代碼會產生以下結果：

HTML 布局 - 有用的提示

Tip: 使用 CSS 最大的好處是，如果把 CSS 代碼存放到外部樣式表中，那么站點會更易于維護。通過編輯單一的文件，就可以改變所有頁面的布局。如需學習更多有關 CSS 的知識，請訪問我們的CSS 教程。

Tip: 由于創建高級的布局非常耗時，使用模板是一個快速的選項。通過搜索引擎可以找到很多免費的網站模板（您可以使用這些預先構建好的網站布局，并優化它們）。

HTML 布局標簽

標簽	描述
<div>	定義文檔區塊，塊級(block-level)
<span>	定義 span，用來組合文檔中的行內元素。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：jQuery 獲取和設置HTML元素
下一篇：WinForms 中的 CheckBox 控件使用指南

您的項目需求

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

整合營銷服務商

初識HTML中的&amp;lt;div&amp;gt;塊元素-零基礎自學網頁制作

lt;div>塊元素基礎屬性講解

HTML完整學習目錄

面效果展示

頁面完整代碼

頁面制作技術解析

目錄

您的項目需求

初識HTML中的<div>塊元素-零基礎自學網頁制作