上節(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呢泽台，這是因為考慮到文字的默認(rèn)顏色就是純黑色的，如果背景色也是純黑色的溃睹，那么文字就完全看不見了胰坟。
通過設(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)前的字體尺寸，瀏覽器默認(rèn)的文本大小是16像素杭措，因此1em的默認(rèn)尺寸就是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)的默認(rèn)字體蛹屿，用戶就能看到自己喜歡的默認(rèn)字體。
如果一定要強制使用某個字體错负，就需要調(diào)查了解各種操作系統(tǒng)默認(rèn)具備的常用字體的名稱，使用逗號分隔的方式同時設(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ā)布時間先后次序進行閱讀卿啡。
