要有大局觀……
沒錯，茶哥兒不會按著常規(guī)套路出牌的，我們web的第一節(jié)課就是學(xué)習(xí)什么是div。
div是我們最常用的標(biāo)簽，沒有之一。在HTML的標(biāo)簽中，每一個標(biāo)簽都是有語音的，div的語義就是無意義。
茶哥兒沒有那你們開涮，就是這個樣子的，div在我們的開發(fā)中經(jīng)常用來劃分區(qū)域，進行分快處理分塊開發(fā)。看了下圖你就能明白了。
圖片就是以我們簡書網(wǎng)的首頁為例，這么多元素的頁面如果先用div劃分大區(qū)域的話就是下邊的樣式，這樣看來是不是就很簡單了呢？
ok，上代碼來看看如何操作div(htm+css)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="width: 200px;height: 200px;background-color: red;"> 我是一個div </div>
</body>
</html>
之前已經(jīng)說過html和css的關(guān)系了（好基友，一輩子），如果單純寫一個div我們是看不到任何東西的（并不是不存在），代碼中我們通過加入css樣式（div標(biāo)簽中style屬性里邊寫的就是css樣式）從而改變了div的大小和背景色，于是我們就看到他了，這里我們使用的是css的行間樣式表。
這里我們做個設(shè)想：body里邊有100個div，要分別賦予寬200px，高200px，背景色是紅色。
我勒個去，這是個多么可怕的需求，我們難道要寫100個div，再寫100變style嗎？當(dāng)然了，如果我們只能使用行間樣式表那么肯定是要付出汗水與努力了，然而，我們還有另外兩種完美的解決方案：內(nèi)部樣式表&外部樣式表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div>我是一個div</div>
</body>
</html>
這個就是內(nèi)部樣式表了，我們在head標(biāo)簽內(nèi)添加了style標(biāo)簽，在style標(biāo)簽中書寫css樣式，但是為了找準(zhǔn)我們給哪個標(biāo)簽添加讓樣式，所以我們使用了選擇器：div{}，這個叫做標(biāo)簽名選擇器，會為相同的標(biāo)簽添加這個樣式。ok再來看看外部樣式表怎么寫：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/index.css">>
</head>
<body>
<div>我是一個div</div>
</body>
</html>
這段代碼是html文檔的，我們在head標(biāo)簽中添加了link標(biāo)簽用來導(dǎo)入外部文件，在這里我們導(dǎo)入了外部的“index.css”文件，看到這里就明白了吧，所謂的外部樣式表就是將樣式寫入到了外部的css文件中，然后通過link導(dǎo)入html文檔。來看看index.css：
div {
width: 200px;
height: 200px;
background-color: red;
}
外部樣式表與內(nèi)部樣式表寫法上是一致的，不同的是引入方式。
如果有一個div，同時有三種樣式表為其賦予顏色這個時候div應(yīng)該用哪個呢？想知道嗎，接著看下邊的總結(jié)。
總結(jié)：
- div用于分割屏幕，常用語分塊開發(fā)中；
- 行間樣式表：sytle標(biāo)簽寫在標(biāo)簽內(nèi)部；
- 內(nèi)部樣式表：style標(biāo)簽寫在head標(biāo)簽內(nèi)；
- 外部樣式表：沒有style標(biāo)簽，使用link標(biāo)簽引入css文檔；
- 如果一個標(biāo)簽同時有三種樣式表為其賦予樣式，行間樣式表優(yōu)先級最高，內(nèi)部樣式表與外部樣式表同等級，如何選用樣式取決于二者的引入順序。
創(chuàng)造即永恒，喝茶去……
