零基礎入門開發行業 - 0.0.2

05-01

上一篇文章中，我們做了搞事情的準備工作，並且小小的搞了一下事情，大家肯定還不明白搞事情的原理，別急，現在我們一一解答。

首先先將上一篇文章中搞的事情拿過來：

<html><head> <title>Hello World!</title></head><body> <div><p>這是我的第一個網頁。</p></div></body></html>

之前我們了解了什麼是標籤（即元素），那麼現在就一個一個標籤的告訴你是什麼和怎麼用。

<html></html>

這個標籤的名字和我們這門語言一毛錢的一樣。所以這就是這門語言的開始，幾乎所有關於這門語言中的內容大部分都會寫在這個標籤之中，瀏覽器就會識別這個標籤，並知道這個標籤中的東西就是要顯示的內容。

一般的一個頁面中<html></html>標籤只出現一次。

好，到這裡你就需要記住一點，每次寫一個單獨的頁面（指的是以.html結尾的文件）的時候第一步就是寫上這對標籤。

而<html></html>標籤基本上是由兩部分組成，也就是上面代碼中的<head></head>標籤和<body></body>標籤。

<head></head>

除了上面的<html></html>標籤之外，其他的標籤基本上你有一些英語基礎都大致上能夠理解它的意思。

<head></head>標籤就是頭部的意思，這個<head></head>標籤中的內容並不會顯示在你的內容中，但是卻包含了許多重要的信息，比如說頁面的標題（<title></title>標籤），比如說頁面的編碼格式（關於更多的編碼格式我會在之後說明），再比如說使用到的其他文件等等。

可以這麼說，<head></head>標籤雖然並不會在內容中展示出來，但是他決定的大部分內容的顯示方式和樣式。

同樣的，這麼重要的標籤當然只能有一個啦。

所以，順便的，當你寫完<html></html>標籤後順手再在裡面寫上一個<head></head>標籤就對啦。

<body></body>

看了<head></head>標籤之後，聰明的你肯定也想到了，既然說<html></html>標籤中一般只包含兩個部分，其中一個是頭部<head></head>標籤，那麼另一個<body></body>標籤是不是就指的是要展示的內容呢？

答對啦，<body></body>標籤就是網頁中展示內容的部分，同樣也只有一個哦！寫完<head></head>標籤之後就把<body></body>標籤也寫在後面吧。

壞小孩在這裡可能就會問了，那麼把<head></head>標籤和<body></body>標籤調換一下位置會是什麼情況呢？那我問問你，把你的腦袋和屁股調換一下位置會是什麼情況呢？

開玩笑啦，瀏覽器怎麼可能會沒有這麼智能，調換一下位置依然會正確顯示的，不過不建議這樣做哦，因為既然有了規則就要遵守，否則要規則有什麼用呢？更何況反著寫對於你自己看來說不也是很彆扭么。

上面三大塊說完，下面就要說到細節部分了。

<title></title>

標題這個東西呀，貌似你寫什麼東西都逃脫不掉的，所以<title></title>標籤也是<head></head>標籤內容中唯一一個必須要存在的標籤。不可以沒有它。

<title></title>標籤中的內容將會顯示在瀏覽器的標籤頁上，當你收藏一個頁面的時候，<title></title>標籤中的內容也將是收藏時顯示的默認名字。

<div></div>

div的全稱是division。這不是知識點，看過忘了就好了。

<div></div>標籤可以說是萬能標籤，或者說是哪裡都有標籤。因為它在HTML中是必不可少的。

<div></div>標籤你可以看成是一個無色透明的沒有邊框的矩形，它的大小你可以改變，當你不設定它的大小的時候，它的寬度會和它緊挨著的、它外面的那個標籤的寬度相等，它的高度會根據內容的高度而變化。

<div></div>標籤就是一個矩形的容器用來盛放你的內容，給你的內容定型，給你的內容指定範圍，就像是用一個東西來盛水，盛水的東西決定了水的形狀。<div></div>標籤起到的就是這個盛水的容器的作用。

<p></p>

paragraph指的是段落，所以說<p></p>標籤中就是用來盛放文字內容的，當然也是可以放圖片啦。

當然，你的文字不放在<p></p>標籤內也是可以顯示的，上面的代碼中，你將<p></p>標籤刪掉，保存再打開，裡面的內容可是不發生任何變化的。那麼就有疑問了，既然沒啥變化，要p標籤有什麼用處呢？別急，當我們之後涉及到樣式的時候你就知道了。

到此，上面簡單的HTML標籤就都講解完了，當然，HTML中不只僅僅有這幾個標籤，飯要一口一口吃嘛，一口吃不成一個胖子，所以慢慢來。

為了下面的內容，我這裡呢再普及一點知識。

層級

看了上面的HTML，在一層套一層的標籤中中你應該能感覺到一個層級的概念，就是套在外面著一層的是裡面那一層的父級標籤（又可以叫做父標籤、父級元素、父元素等，看你喜歡咯），而對應的裡面的那一層是外面的那一層的子級標籤（子標籤、子元素、子級元素等）。這裡指的是兩個緊緊挨著標籤了，如果不是挨著的，那麼你就可以按照數親戚關係一樣數標籤了，同級的就是兄弟元素啊，差著一級的就是孫子標籤啥的，嗯，反正現在人大多數也數不明白，就去看親戚關係計算器吧。

其實上面說那麼多也就前兩句有用，大部分的時間中你只用考慮標籤的父元素，子元素和兄弟元素就可以了。

調試

編寫網頁就涉及到瀏覽器，這裡我推薦使用Google出品的Chrome瀏覽器進行調試。

調試步驟：

打開一個頁面
在網頁中右鍵
右鍵在單中選擇「檢查」

這個時候你能看到彈出了半個新的頁面，這個就是瀏覽器中內置的用於調試HTML頁面的工具，不只是你自己編寫的網頁可以打開這個東西，所有在瀏覽器中打開的網頁都可以打開這個調試工具，在這個調試工具中你可以查看當前頁面的所有元素，層級，代碼，源代碼。網頁中的一切信息都逃不過你的眼睛。在這裡你還可以查看網頁佔用的內存，網路請求，數據存儲等。

如果你打開的一個頁面無法右鍵怎麼辦？Chrome瀏覽器右上角的三個點點按鈕可以打開菜單，在菜單中找到「更多工具」，點擊「更多工具」下的開發者工具就好了。

好啦，下面將會繼續講解元素，元素樣式。