上節(jié)課，使用
標(biāo)簽，可以對網(wǎng)頁進行換行，達到一定的排版效果。
但是
功能有限，比如無法控制某行文字的高度，也不好控制行與行之間的間距。
這節(jié)課來學(xué)習(xí)一個新的標(biāo)簽div。
div標(biāo)簽
div標(biāo)簽是塊級元素標(biāo)簽，是用于組合其他HTML元素的容器。
div元素沒有特定的含義，一般和CSS一同使用。用于對內(nèi)容塊設(shè)置樣式屬性。瀏覽器會在其前后顯示折行。
div元素常見的用途是文檔布局。
div標(biāo)簽的用法，是在內(nèi)容塊前面增加<div>，內(nèi)容塊后面增加</div>。
先來把【簡介】這行代碼前后增加<div>和</div>。
<div><b>簡介</b></div>
刷新頁面，發(fā)現(xiàn)簡介這行下面多了一個空行，其他沒什么變化。
div只是標(biāo)記一個內(nèi)容塊，至于內(nèi)容塊的樣式，要添加style來修改。
因此刪除這行后面的
，代碼修改為<div><b>簡介</b></div>。
刷新頁面，可以看到效果和之前的一樣了。
設(shè)置div的背景顏色
修改簡介這行代碼為：
<div style="background-color: #303030;"><b>簡介</b></div>
刷新頁面：
可以看到，簡介這一行整行的背景顏色被修改成暗黑色了。
為何背景顏色要改成303030，而不是完全的黑色000000呢，這是因為考慮到文字的默認顏色就是純黑色的，如果背景色也是純黑色的，那么文字就完全看不見了。
通過設(shè)置div的背景顏色，還有一個附帶的好處，就是知道div的覆蓋范圍了。當(dāng)程序中有很多個div，而且div還有嵌套的時候，通過設(shè)置div的背景顏色，可以區(qū)分和查看div覆蓋的區(qū)域范圍，從而方便調(diào)試和修改。
設(shè)置div的文字顏色
可以看到，簡介這行看起來一點都不好看，趕緊修改文字的顏色吧。
在<div style="background-color:#303030;的后面增加代碼如下：color:#ffffff;
刷新頁面：
可以看到文字顏色變成了白色。
style里面的css屬性設(shè)置，可以允許同時設(shè)置多個樣式屬性，控制內(nèi)容的不同顯示方式。
設(shè)置div的文字大小
再來改變文字的大小，讓標(biāo)題字體顯示大一些。
在color:#ffffff; 后面增加 font-size:30px;
刷新頁面：
可以看到文字變大了。
尺寸單位
這里要學(xué)習(xí)一個新的概念，就是尺寸單位。用于描述大小的單位就是尺寸單位。
例如，描述文字的大小，描述文字行的高度，描述div的寬度，描述行與行之間的間距，等等。
不同元素的尺寸單位可能不同，例如對字體大小的單位有：像素／em／百分比等方式；對div寬度的單位有：像素／百分比等等。
使用像素設(shè)置文本大小，如下：
font-size: 30px;
使用em來設(shè)置字體大小，如下：
font-size: 3.75em;
em單位相當(dāng)于倍數(shù)關(guān)系，1em等于當(dāng)前的字體尺寸，瀏覽器默認的文本大小是16像素，因此1em的默認尺寸就是16像素，3.75em相當(dāng)于60像素。
注意：所謂當(dāng)前的字體尺寸，就是指當(dāng)前元素的字體尺寸，如果當(dāng)前元素未定義字體尺寸，則等于當(dāng)前元素的父元素的字體尺寸。
所謂父元素，是指當(dāng)前元素的嵌套關(guān)系的上一級元素。
例如<body style="font-size: 20px;"><div style="font-size: 3em;">簡介</div></body>
可以計算出div這個元素的字體大小為60px。
由此，可以總結(jié)出像素是絕對的，不受上下級關(guān)系的影響，而em是受上下級關(guān)系的影響的，要根據(jù)具體情況來使用。
練習(xí)：
在body的 style里面增加font-size屬性，然后將div的font-size屬性修改為em單位，調(diào)整數(shù)值熟悉兩種方式。
設(shè)置div的文字字體
使用font-family屬性來設(shè)置文字字體。
例如，將文字字體設(shè)置為微軟雅黑。
在font-size:30px;后面增加 font-family: 'Microsoft Yahei';
刷新頁面后可以看到字體的變化。當(dāng)然也可能沒看到有什么變化。這取決于瀏覽器所在的操作系統(tǒng)。
大家知道，瀏覽器能顯示的字體受到操作系統(tǒng)字體的限制，無法顯示操作系統(tǒng)不存在的字體，因為，一般不要設(shè)置文字字體，讓瀏覽器使用系統(tǒng)的默認字體，用戶就能看到自己喜歡的默認字體。
如果一定要強制使用某個字體，就需要調(diào)查了解各種操作系統(tǒng)默認具備的常用字體的名稱，使用逗號分隔的方式同時設(shè)置好文字字體的優(yōu)先順序。
例如 font-family: 'Times', 'TimesNR', 'NSimsun','serif';
設(shè)置div的文字的斜體
使用font-style: italic; 顯示文字為斜體。也可以用font-style: normal; 顯示文字為正常不傾斜。
修改代碼：
刷新顯示：
設(shè)置div的文字的加粗
之前用了<b>標(biāo)簽來對文字加粗，也可以使用css屬性font-weight: bold; 來對文字進行加粗。也可使用font-weight: normal;取消加粗正常顯示。
增加font-weight: bold; 然后去掉<b>標(biāo)簽，修改代碼如下：
頁面刷新：
可以看到，不同的寫法能夠?qū)崿F(xiàn)相同的效果。
課后練習(xí)
1.將斜體字體效果去除
2.將工作經(jīng)歷和工作經(jīng)驗(部分)這2行文字也做成簡介這行文字的效果
往期教程
因為教程是系列教程，前后關(guān)聯(lián)性非常強，請大家按照微信公眾號【零基礎(chǔ)學(xué)編程】的歷史消息發(fā)布時間先后次序進行閱讀。
