HTML+CSS個人筆記
時間：2023-06-24 17:06:01 | 來源：網(wǎng)站運營
時間：2023-06-24 17:06:01 來源：網(wǎng)站運營
HTML+CSS個人筆記：
一．HTML入門
HTML文檔基本格式
一、使用Dreamweaver新建默認文檔時會自帶一些源代碼，代碼如下所示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8" /><title>無標題文檔</title></head><body></body></html> 這些源代碼構(gòu)成了HTML文檔的基本格式，其中主要包括<!DOCTYPE>文檔類型聲明、<html>根標記、<head>頭部標記、<body>主體標記。
結(jié)構(gòu)說明：
1.<!DOCTYPE> 標記位于文檔的最前面，用于向瀏覽器說明當前文檔使用哪種 HTML 或 XHTML 標準規(guī)范。
2.<html>標記標志著HTML文檔的開始，</html>標記標志著HTML文檔的結(jié)束。
3.<head>標記用于定義HTML文檔的頭部信息，也稱為頭部標記。
4.<body>標記用于定義HTML文檔所要顯示的內(nèi)容，也稱為主體標記。
二、語法規(guī)范：
1.在HTML頁面中，帶有“< >”符號的元素被稱為HTML標記。HTML標記可以分為單標記、雙標記、注釋標記。
???? 單標記
單標記也稱空標記，是指用一個標記符號即可完整地描述某個功能的標記。其基本語法格式如下：
< 標記名/>
例如代碼：
<hr />
??? 雙標記
雙標記也稱體標記，是指由開始和結(jié)束兩個標記符組成的標記。其基本語法格式如下：
<標記名>內(nèi)容</標記名>
例如代碼：
<h2>傳智播客網(wǎng)頁平面設(shè)計免費公開課</h2>??? 注釋標記
如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標記。其基本語法格式如下：
<!-- 注釋語句 -->
HTML標記及其屬性、頭部標記
一、HTML標記及其屬性
1.在HTML頁面中，帶有“< >”符號的元素被稱為HTML標記。HTML標記可以分為單標記、雙標記、注釋標記。
???? 單標記
單標記也稱空標記，是指用一個標記符號即可完整地描述某個功能的標記。其基本語法格式如下：
< 標記名/>
例如代碼：
<hr />??? 雙標記
雙標記也稱體標記，是指由開始和結(jié)束兩個標記符組成的標記。其基本語法格式如下：
<標記名>內(nèi)容</標記名>
例如代碼：
<h2>傳智播客網(wǎng)頁平面設(shè)計免費公開課</h2>??? 注釋標記
如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標記。其基本語法格式如下：
<!-- 注釋語句 -->
二、 頭部標記
制作網(wǎng)頁時，經(jīng)常需要設(shè)置頁面的基本信息，如頁面的標題、作者、和其他文檔的關(guān)系等。為此HTML提供了一系列的標記，這些標記通常都寫在head標記內(nèi)，因此被稱為頭部相關(guān)標記。
??? 設(shè)置頁面標題標記<title>
<title>標記用于定義HTML頁面的標題，即給網(wǎng)頁取一個名字，必須位于<head>標記之內(nèi)。一個HTML文檔只能含有一對<title></title>標記，<title></title>之間的內(nèi)容將顯示在瀏覽器窗口的標題欄中。其基本語法格式如下：
<title>網(wǎng)頁標題名稱</title>??? 定義頁面元信息標記<meta />
<meta />標記用于定義頁面的元信息，可重復(fù)出現(xiàn)在<head>頭部標記中，在HTML中是一個單標記。<meta />標記本身不包含任何內(nèi)容，通過“名稱/值”的形式成對的使用其屬性可定義頁面的相關(guān)參數(shù)，例如為搜索引擎提供網(wǎng)頁的關(guān)鍵字、作者姓名、內(nèi)容描述，以及定義網(wǎng)頁的刷新時間等。
下面介紹<meta/>標記常用的幾組設(shè)置，具體如下：
<meta name="名稱" content="值"/> 在<meta>標記中使用name/content屬性可以為搜索引擎提供信息，其中name屬性提供搜索內(nèi)容名稱，content屬性提供對應(yīng)的搜索內(nèi)容值。
<meta http-equiv="名稱" content="值" /> 在<meta>標記中使用http-equiv/content屬性可以設(shè)置服務(wù)器發(fā)送給瀏覽器的HTTP頭部信息，為瀏覽器顯示該頁面提供相關(guān)的參數(shù)。其中，http-equiv屬性提供參數(shù)類型，content屬性提供對應(yīng)的參數(shù)值。
其中http-equiv屬性的值為refresh，content屬性的值為數(shù)值和url地址，中間用“;”隔開，用于指定在特定的時間后跳轉(zhuǎn)至目標頁面，該時間默認以秒為單位。
??? 引用外部文件標記<link>
一個頁面往往需要多個外部文件的配合，在<head>中使用<link>標記可引用外部文件，一個頁面允許使用多個<link>標記引用多個外部文件。其基本語法格式如下：
<link 屬性="屬性值"/> 例如，使用<link>標記引用外部CSS樣式表：
<link rel="stylesheet"type="text/css" href="style.css" /> 上面的代碼，表示引用當前HTML頁面所在文件夾中，文件名為“style.css”的CSS樣式表文件。
??? 內(nèi)嵌樣式標記<style>
<style>標記用于為HTML文檔定義樣式信息，位于<head>頭部標記中，其基本語法格式如下：
<style 屬性=”屬性值”>樣式內(nèi)容</style> 在HTML中使用style標記時，常常定義其屬性為type，相應(yīng)的屬性值為text/css，表示使用內(nèi)嵌式的CSS樣式。
標題段落標記 、文本樣式標記
一、標題段落標記
一篇結(jié)構(gòu)清晰的文章通常都有標題和段落，HTML網(wǎng)頁也不例外，為了使網(wǎng)頁中的文字有條理地顯示出來，HTML提供了相應(yīng)的標記。
? 標題標記
為了使網(wǎng)頁更具有語義化，我們經(jīng)常會在頁面中用到標題標記，HTML提供了6個等級的標題，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，從<h1>到<h6>重要性遞減。其基本語法格式如下：
<hn align="對齊方式">標題文本</hn> 該語法中n的取值為1到6，align屬性為可選屬性，用于指定標題的對齊方式。接下來通過一個簡單的案例說明標題標記的使用，主體代碼如下所示。
<body><h1>1級標題</h1><h2>2級標題</h2><h3>3級標題</h3><h4>4級標題</h4><h5>5級標題</h5><h6>6級標題</h6></body>二、段落標記
在網(wǎng)頁中要把文字有條理地顯示出來，離不開段落標記，就如同我們平常寫文章一樣，整個網(wǎng)頁也可以分為若干個段落，而段落的標記就是<p>。其基本語法格式如下：
<p align="對齊方式">段落文本</p>
該語法中align屬性為<p>標記的可選屬性，和標題標記<h1>~<h6>一樣，同樣可以使用align屬性設(shè)置段落文本的對齊方式。
<p>是HTML文檔中最常見的標記，默認情況下，文本在一個段落中會根據(jù)瀏覽器窗口的大小自動換行。
了解了段落標記之后，接下來通過一個案例來演示段落標記<p>的用法和其對齊方式，主體代碼如下所示。
<body> <p>專業(yè)于Java、.Net、PHP、C/C++、網(wǎng)頁設(shè)計、平面設(shè)計、UI設(shè)計、iOS培訓</p> <p>JAVA學院</p> <p>網(wǎng)頁平面設(shè)計學院</p> <p>PHP學院</p> </body> 從上面例子容易看出，通過使用<p>標記，每個段落都會單獨顯示，并在段落之間設(shè)置了一定的間隔距離。
??三、 水平線標記<hr />
在網(wǎng)頁中常?？吹揭恍┧骄€將段落與段落之間隔開，使得文檔結(jié)構(gòu)清晰，層次分明。這些水平線可以通過插入圖片實現(xiàn)，也可以簡單地通過標記來完成，<hr />就是創(chuàng)建橫跨網(wǎng)頁水平線的標記。其基本語法格式如下：
<hr 屬性="屬性值"/>
??四、 換行標記<br />
在HTML中，一個段落中的文字會從左到右依次排列，直到瀏覽器窗口的右端，然后自動換行。如果希望某段文本強制換行顯示，就需要使用換行標記<br />，這時如果還像在word中直接敲回車鍵換行就不起作用了。
五、 文本樣式標記
多種多樣的文字效果可以使網(wǎng)頁變得更加絢麗，為此HTML提供了文本樣式標記<font>，用來控制網(wǎng)頁中文本的字體、字號和顏色。其基本語法格式如下：
<font 屬性="屬性值">文本內(nèi)容</font> 該語法中<font>標記常用的屬性有3個，分別是face、color和size。
了解了<font>標記的基本語法和常用屬性，接下來通過一個案例來演示<font>標記的用法和效果，主體代碼如下所示。
<body><h2>使用font標記設(shè)置文本樣式</h2><p>我是默認樣式的文本</p><p><font size="2"color="blue">我是2號藍色文本</font></p><p><font size="5"color="red">我是5號紅色文本</font></p><p><font face="微軟雅黑" size="7"color="green">我是7號綠色文本，我的字體是微軟雅黑哦</font></p></body>二．HTML常用標記
HTML標記
一、HTML標記及其屬性
在HTML頁面中，帶有“< >”符號的元素被稱為HTML標記。HTML標記可以分為單標記、雙標記、注釋標記。
??? 單標記
單標記也稱空標記，是指用一個標記符號即可完整地描述某個功能的標記。其基本語法格式如下：
< 標記名/>
例如代碼：
<hr />
??? 雙標記
雙標記也稱體標記，是指由開始和結(jié)束兩個標記符組成的標記。其基本語法格式如下：
<標記名>內(nèi)容</標記名>
例如代碼：
<h2>傳智播客網(wǎng)頁平面設(shè)計免費公開課</h2>??? 注釋標記
如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標記。其基本語法格式如下：
<!-- 注釋語句 -->
標題標記
? 標題段落標記
一篇結(jié)構(gòu)清晰的文章通常都有標題和段落，HTML網(wǎng)頁也不例外，為了使網(wǎng)頁中的文字有條理地顯示出來，HTML提供了相應(yīng)的標記。
??? 標題標記
為了使網(wǎng)頁更具有語義化，我們經(jīng)常會在頁面中用到標題標記，HTML提供了6個等級的標題，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，從<h1>到<h6>重要性遞減。其基本語法格式如下：
<hn align="對齊方式">標題文本</hn> 該語法中n的取值為1到6，align屬性為可選屬性，用于指定標題的對齊方式。接下來通過一個簡單的案例說明標題標記的使用，主體代碼如下所示。
<body><h1>1級標題</h1><h2>2級標題</h2><h3>3級標題</h3><h4>4級標題</h4><h5>5級標題</h5><h6>6級標題</h6></body>默認情況下標題文字是加粗左對齊的，并且從<h1>到<h6>字號遞減。
段落標記
? 段落標記
在網(wǎng)頁中要把文字有條理地顯示出來，離不開段落標記，就如同我們平常寫文章一樣，整個網(wǎng)頁也可以分為若干個段落，而段落的標記就是<p>。其基本語法格式如下：
<p align="對齊方式">段落文本</p>
該語法中align屬性為<p>標記的可選屬性，和標題標記<h1>~<h6>一樣，同樣可以使用align屬性設(shè)置段落文本的對齊方式。
<p>是HTML文檔中最常見的標記，默認情況下，文本在一個段落中會根據(jù)瀏覽器窗口的大小自動換行。
了解了段落標記之后，接下來通過一個案例來演示段落標記<p>的用法和其對齊方式，主體代碼如下所示。
<body><p>傳智播客專業(yè)于Java、.Net、PHP、C/C++、網(wǎng)頁設(shè)計、平面設(shè)計、UI設(shè)計、iOS培訓——最專業(yè)的培訓機構(gòu)，花一份錢掌握多種技能。傳智播客為你提升職場核心競爭力，從菜鳥到職場達人的轉(zhuǎn)變就在這里，你還等什么？</p><p>JAVA學院</p><p>網(wǎng)頁平面設(shè)計學院</p><p>PHP學院</p></body>水平線標記
? 水平線標記<hr />
在網(wǎng)頁中常常看到一些水平線將段落與段落之間隔開，使得文檔結(jié)構(gòu)清晰，層次分明。這些水平線可以通過插入圖片實現(xiàn)，也可以簡單地通過標記來完成，<hr />就是創(chuàng)建橫跨網(wǎng)頁水平線的標記。其基本語法格式如下：
<hr屬性="屬性值" />
換行標記
? 換行標記<br />
在HTML中，一個段落中的文字會從左到右依次排列，直到瀏覽器窗口的右端，然后自動換行。如果希望某段文本強制換行顯示，就需要使用換行標記<br />，這時如果還像在word中直接敲回車鍵換行就不起作用了。
文本樣式標記
文本樣式標記
多種多樣的文字效果可以使網(wǎng)頁變得更加絢麗，為此HTML提供了文本樣式標記<font>，用來控制網(wǎng)頁中文本的字體、字號和顏色。其基本語法格式如下：
<font 屬性="屬性值">文本內(nèi)容</font>
該語法中<font>標記常用的屬性有3個，分別是face、color和size。
了解了<font>標記的基本語法和常用屬性，接下來通過一個案例來演示<font>標記的用法和效果，主體代碼如下所示。
<body><h2>使用font標記設(shè)置文本樣式</h2><p>我是默認樣式的文本</p><p><font size="2"color="blue">我是2號藍色文本</font></p><p><font size="5"color="red">我是5號紅色文本</font></p><p><font face="微軟雅黑" size="7"color="green">我是7號綠色文本，我的字體是微軟雅黑哦</font></p></body>文本格式化標記
文本格式化標記
在網(wǎng)頁中，有時需要為文字設(shè)置粗體、斜體或下劃線效果，為此HTML準備了專門的文本格式化標記，使文字以特殊的方式顯示。常用的文本格式化標記如下表所示。
| 標記 | 顯示效果 |
| <b></b><strong></strong> | 文字以粗體方式顯示（XHTML推薦使用strong） |
| <i></i><em></em> | 文字以斜體方式示（XHTML推薦使用em） |
| <s></s>和<del></del> | 文字以加刪除線方式顯示（XHTML推薦使用del） |
| <u></u>和<ins></ins> | 文字以加下劃線方式顯示（XHTML不贊成使用u） |
了解了常用的文本格式化標記，接下來通過一個案例來演示其中某些標記的效果，主體代碼如下所示。
<body><p>我是正常顯示的文本</p><p><b>我是使用b標記加粗的文本</b>，<strong>推薦使用strong加粗</strong></p><p><i>我是使用i標記傾斜的文本</i>，<em>推薦使用em斜體文本</em></p><p><u>我是u帶下劃線文本</u>，不建議使用</p><p><s>我是s帶刪除線文本</s>，<del>推薦使用del帶刪除線文本</del></p></body> 常用圖像格式
網(wǎng)頁中圖像太大會造成載入速度緩慢，太小又會影響圖像的質(zhì)量，所以選擇合適的圖像格式應(yīng)用于網(wǎng)頁很重要。
目前網(wǎng)頁上常用的圖像格式主要有GIF、JPG和PNG三種。
圖像標記
HTML網(wǎng)頁中任何元素的實現(xiàn)都要依靠HTML標記，要想在網(wǎng)頁中顯示圖像就需要使用圖像標記，接下來將詳細介紹圖像標記<img />以及和他相關(guān)的屬性。其基本語法格式如下：
<img src="圖像URL" />
該語法中src屬性用于指定圖像文件的路徑和文件名，他是img標記的必需屬性。
為了使初學者更好地理解和應(yīng)用這些屬性，接下來對他們進行詳細地講解，具體如下：
??? 圖像的替換文本屬性alt
由于一些原因圖像可能無法正常顯示，比如網(wǎng)速太慢，瀏覽器版本過低等。因此為頁面上的圖像加上替換文本 是個很好的習慣，在圖像無法顯示時告訴用戶該圖片的內(nèi)容。
? 圖像的寬度、高度屬性width、height
通常情況下，如果不給<img/>標記設(shè)置寬和高，圖片就會按照他的原始尺寸顯示，當然也可以手動更改圖片的大小。width和height屬性用來定義圖片的寬度和高度，通常我們只設(shè)置其中的一個，另一個會按原圖等比例顯示。如果同時設(shè)置兩個屬性，且其比例和原圖大小的比例不一致，顯示的圖像就會變形或失真。
? 圖像的邊框?qū)傩詁order
默認情況下圖像是沒有邊框的，通過border屬性可以為圖像添加邊框、設(shè)置邊框的寬度，但邊框顏色的調(diào)整僅僅通過HTML屬性是不能夠?qū)崿F(xiàn)的。
了解了圖像的寬度、高度以及邊框?qū)傩裕酉聛硎褂眠@些屬性對圖像進行一些修飾，主體代碼如下所示。
<body><img src="logo.gif" alt="傳智播客-專業(yè)的java培訓,.net培訓,php培訓,網(wǎng)頁培訓,平面培訓,iOS培訓機構(gòu)" border="2" /><img src="logo.gif" alt="傳智播客-專業(yè)的java培訓,.net培訓,php培訓,網(wǎng)頁培訓,平面培訓,iOS培訓機構(gòu)" width="120" /><img src="logo.gif" alt="傳智播客-專業(yè)的java培訓,.net培訓,php培訓,網(wǎng)頁培訓,平面培訓,iOS培訓機構(gòu)" width="120" height="100" /></body>圖像標記
? 圖像的邊距屬性vspace和 hspace
在網(wǎng)頁中，由于排版需要，有時候還需要調(diào)整圖像的邊距。HTML中通過vspace和hspace屬性可以分別調(diào)整圖像的垂直邊距和水平邊距。
? 圖像的對齊屬性align
圖文混排是網(wǎng)頁中很常見的效果，默認情況下圖像的底部會相對于文本的第一行文字對齊，但是在制作網(wǎng)頁時經(jīng)常需要實現(xiàn)其他的圖像和文字環(huán)繞效果，例如圖像居左文字居右等，這就需要使用圖像的對齊屬性align。
相對路徑和絕對路徑
實際工作中，通常新建一個文件夾專門用于存放圖像文件，這時再插入圖像，就需要采用“路徑”的方式來指定圖像文件的位置。
? 絕對路徑
絕對路徑一般是指帶有盤符的路徑或完整的網(wǎng)絡(luò)地址，
例如“D:/HTML+CSS網(wǎng)頁制作/chapter02/img/logo.gif”
或者“
http://www.itcast.cn/images/logo.gif”
網(wǎng)頁中不推薦使用絕對路徑，因為網(wǎng)頁制作完成之后我們需要將所有的文件上傳到服務(wù)器，這時圖像文件可能在服務(wù)器的C盤，也有可能在D盤、E盤，可能在aa文件夾中，也有可能在bb文件夾中。也就是說，很有可能不存在“D:/HTML+CSS網(wǎng)頁制作/chapter02/img/logo.gif”這樣一個路徑。
? 相對路徑
相對路徑不帶有盤符，通常是以HTML網(wǎng)頁文件為起點，通過層級關(guān)系描述目標圖像的位置。
常用圖像格式
1.GIF：連續(xù)色調(diào)的無損壓縮格式。其壓縮率一般在50%左右，目前幾乎所有相關(guān)軟件都支持它，GIF格式文件中可以存多幅彩色圖像，如果把存于一個文件中的多幅圖像數(shù)據(jù)逐幅讀出并顯示到屏幕上，就可構(gòu)成一種最簡單的動畫。
2.JPG：jpg全名是JPEG，圖片以 24 位顏色存儲單個位圖。JPEG支持最高級別的壓縮，不過，這種壓縮是有損耗的，不支持透明。
3.PNG:存儲灰度圖像時，灰度圖像的深度可多到16位，存儲彩色圖像時，彩色圖像的深度可多到48位，并且還可存儲多到16位的α通道數(shù)據(jù)，常用于網(wǎng)頁中是因為它壓縮比高，生成文件容量小，支持透明。
特殊字符標記
無序列表
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。
無序列表始于 <ul> 標簽。每個列表項始于 <li>。
例1：
<ul type="disc"> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li></ul> 例2：
<ultype="circle"> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li></ul> 例3：
<ultype="square"> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li></ul> 列表項內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
有序列表
同樣，有序列表也是一列項目，列表項目使用數(shù)字進行標記。
有序列表始于<ol> 標簽。每個列表項始于 <li> 標簽。
例1：數(shù)字列表
<ol> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li></ol> 例2：字母列表
<oltype="A"> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li></ol> 例3：小寫字母列表
<oltype="a"> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li></ol> 例4：羅馬字母列表
<oltype="I"> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li></ol> 例5：小寫羅馬字母列表
<oltype="i"> <li>蘋果</li> <li>香蕉</li> <li>檸檬</li> <li>桔子</li></ol> 嵌套列表
嵌套列表
例1：
<ul> <li>咖啡</li> <li>茶 <ul> <li>紅茶</li> <li>綠茶</li> </ul> </li> <li>牛奶</li></ul>例2：
<ul> <li>咖啡</li> <li>茶 <ul> <li>紅茶</li> <li>綠茶 <ul> <li>中國茶</li> <li>非洲茶</li> </ul> </li> </ul> </li> <li>牛奶</li></ul>自定義列表
自定義列表是項目及其注釋的組合。
自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
例1：一個定義列表
<dl> <dt>計算機</dt> <dd>用來計算的儀器 ......</dd> <dt>顯示器</dt> <dd>以視覺方式顯示信息的裝置... ...</dd></dl>超級鏈接
HTML 使用超級鏈接與網(wǎng)絡(luò)上的另一個文檔相連。幾乎可以在所有的網(wǎng)頁中找到鏈接。點擊鏈接可以從一張頁面跳轉(zhuǎn)到另一張頁面。
超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當前文檔中的某個部分。當您把鼠標指針移動到網(wǎng)頁中的某個鏈接上時，箭頭會變?yōu)橐恢恍∈帧?br>
1) 我們通過使用 <a> 標簽在 HTML 中創(chuàng)建鏈接。
2) 有兩種使用 <a> 標簽的方式：
√ 通過使用 href 屬性 - 創(chuàng)建指向另一個文檔的鏈接
√ 通過使用 name 屬性 - 創(chuàng)建文檔內(nèi)的書簽。
3）HTML 鏈接語法
鏈接的 HTML 代碼很簡單。它類似這樣：
<a href="url">Link text</a>
4）href 屬性規(guī)定鏈接的目標。
開始標簽和結(jié)束標簽之間的文字被作為超級鏈接來顯示。
三．HTML5標簽
detailes標簽
<details> 標簽
1.作用：
1）用來供用戶開啟關(guān)閉的交互式控件。任何形式的內(nèi)容都能被放在 <details> 標簽里邊。
2）與 <summary> 標簽配合使用可以為 details 定義標題。標題是可見的，用戶點擊標題時，會顯示出 details。
summary標簽
<summary> 標簽
1.作用：
<summary> 元素應(yīng)該是 <details> 元素的第一個子元素。為 <details> 元素定義一個可見的標題。 當用戶點擊標題時會顯示出詳細信息。
2.舉例：
meter標簽
<meter> 標簽
1.作用
定義度量衡。僅用于已知最大和最小值的度量。比如：磁盤使用情況，查詢結(jié)果的相關(guān)性等。
2.注意：
<meter> 不能作為一個進度條來使用。
3.屬性：
4.舉例
5.meter度量衡如何改變顏色：
在meter中要想改變顏色，需要用到五個值，分別是：
min（最小值）、max（最大值）、low、high、value和optimum，其中前四個值會把整個進度劃分成3區(qū)間，
綠色：當value和optimum值在一個區(qū)間時，它就會呈現(xiàn)出綠色。
黃色：當optimum在high和max之間的時候，value在low和high之間，它就會呈現(xiàn)出黃 色
當optimum在low和high之間的時候，value值在min和low之間，在high和max 之間的時候就會呈現(xiàn)出黃色。
當optimum在min和low之間的時候，value值在low和high之間會呈現(xiàn)出黃色。
紅色：當optimum在high和max之間的時候，value值在min和low之間時就會呈現(xiàn)出紅 色。
當optimum在min和low之間的時候，value在high和max之間就會呈現(xiàn)出紅色。
當optimum在綠色區(qū)域的時候，value也在綠色區(qū)域的時候，整個就會呈現(xiàn)出綠色
當optimum在綠色區(qū)域的時候，value值在黃色區(qū)域的時候，整個就會呈現(xiàn)出黃色
當optimum在綠色區(qū)域的時候，value值在紅色區(qū)域的時候，整個就會呈現(xiàn)出紅色
當optimum在綠色區(qū)域的時候，valu值在中間綠色區(qū)域是為綠色
當optimum在綠色區(qū)域的時候，value值在min和low之間和在high和max之間時都呈現(xiàn)出黃色
當optimum在綠色區(qū)域的時候，value也在綠色區(qū)域的時候，整個就會呈現(xiàn)出綠色
當optimum在綠色區(qū)域的時候，value值在黃色區(qū)域的時候，整個就會呈現(xiàn)出黃色
當optimum在綠色區(qū)域的時候，value值在紅色區(qū)域的時候，整個就會呈現(xiàn)出紅色
progress 標簽
<progress> 標簽
1.作用：
標簽定義運行中的任務(wù)進度（進程）
2.屬性：
3.注意：
1）請將 <progress> 標簽與 JavaScript 一起使用來顯示任務(wù)的進度。
2）<progress> 標簽不適合用來表示度量衡（例如，磁盤空間使用情況或相關(guān)的查詢結(jié)果）。
3）如果要表示度量衡，請使用 <meter> 標簽代替。
4.舉例：
全局屬性:contenteditable 屬性
contenteditable 屬性
- 作用：contenteditable 屬性指定元素內(nèi)容是否可編輯。
- 屬性：
3.注意： 當元素中沒有設(shè)置 contenteditable 屬性時，元素將從父元素繼承。
4.舉例：
四．CSS入門
CSS介紹
層疊樣式表----CascadingStyle Sheets
層疊樣式表定義如何顯示HTML元素，樣式通常存儲在樣式表中,把樣式添加到 HTML中，是為了解決
內(nèi)容與表現(xiàn)分離的問題
外部樣式表可以極大提高工作效率,外部樣式表通常存儲在CSS文件中，多個樣式定義可層疊為一個。
CSS 能夠?qū)W(wǎng)頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。
css語法
CSS 規(guī)則由兩個主要的部分構(gòu)成：選擇器，以及一條或多條聲明:
說明：
1）選擇器通常是您需要改變樣式的 HTML 元素。
2）屬性（property）是您希望設(shè)置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。
3）每條聲明由一個屬性和一個值組成。
CSS注釋
CSS注釋以 "/*" 開始, 以 "*/" 結(jié)束, 注釋是用來解釋你的代碼，瀏覽器會忽略它。
CSS選擇器
開發(fā)中經(jīng)常需要找到網(wǎng)頁中的特定元素設(shè)置樣式，如何找到元素---選擇器
1）什么是CSS選擇器：按照一定的規(guī)則選出符合條件的元素，為之添加CSS樣式
2）選擇器的分類：? 通用選擇器
? 元素選擇器
? 類選擇器
? ID選擇器
? 屬性選擇器
? 組合選擇器
? 偽類選擇器
? 偽元素選擇器
我們將重點介紹使用通用選擇器、元素選擇器、類選擇器、ID選擇器、偽類選擇器
id 選擇器
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。
HTML元素以id屬性來設(shè)置id選擇器。（id屬性值在同一頁面文件中不要重復(fù)出現(xiàn)）
CSS 中 id 選擇器以 "#" 來定義。
class 選擇器
class 選擇器用于描述一組元素的樣式，class選擇器有別于id選擇器，class可以在多個元素中使用。
class 選擇器在HTML中以class屬性表示,
在 CSS 中，類選擇器以一個點"."號來定義。通用選擇器
通用選擇器可以選擇頁面上的所有元素，并對它們應(yīng)用樣式，
用 * 來表示。
五．文本樣式屬性
font-family
font-family 屬性設(shè)置文本的字體系列。
注意：
1） 若有中文字體樣式設(shè)置和英文字體樣式設(shè)置，首先將英文字體寫在前面，中文字體寫在后面。
2） 防止設(shè)置字體不存在，一般會設(shè)置多個字體。
3） 英文字體只適用于英文，中文字體適用于中文也適用于英文。
font-style
font-style 用于指定斜體文字的字體樣式屬性。
這個屬性有三個值：
- 1）normal 正常 - 正常顯示文本
- 2）italic 斜體 - 以斜體字顯示的文字
- 3）oblique 傾斜的文字 - 文字向一邊傾斜（和斜體非常類似，但不太支持）
font-size
font-size 屬性設(shè)置文本的大小。
字體大小的值可以是絕對或相對的大小。
1）絕對大小：具體數(shù)值+單位
2）相對大?。?br>
相對于周圍的元素來設(shè)置大小
如果你不指定一個字體的大小，默認大小和普通文本段落一樣，是16像素（16px=1em）。
（1）em（基于父元素的倍數(shù)關(guān)系）
em的尺寸單位由W3C建議。1em和當前字體大小相等。在瀏覽器中默認的文字大小是16px，因此，1em的默認大小是16px?？梢酝ㄟ^下面這個公式將像素轉(zhuǎn)換為em：px/16=em
舉例：
（2）百分比（基于父元素的百分比）
舉例：
能否管理文字的大小，在網(wǎng)頁設(shè)計中是非常重要的。但是，你不能通過調(diào)整字體大小使段落看上去像標題，或者使標題看上去像段落。請務(wù)必使用正確的HTML標簽，就<h1> - <h6>表示標題和
font-weight
font-weight加粗
屬性值：
注意：
1）100-900，一個數(shù)字表示一個重量
2）normal=400
3）bold=700
font-variant
font-variant
設(shè)置小型大寫字母的字體顯示文本，這意味著所有的小寫字母均會被轉(zhuǎn)換為大寫，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小
屬性：
font
font縮寫屬性的使用
font可以設(shè)置的屬性有：
font-style
font-variant
font-weight
font-size/line-height
font-family
注意：
1）style,variant,weight可以任意調(diào)換順序，也可以省略
2） /line-height也可以省略，不省略則必須寫在font-size后面
3） font-size,font-family不可以調(diào)換位置，不可以省略
六．CSS文本屬性
超級鏈接---target屬性
使用 target 屬性，可以定義被鏈接的文檔在何處顯示
屬性取值：
?_self:在當前窗口打開并顯示
? _blank：打開一個新的窗口并顯示
后面三個屬性值需要和iframe標記一起使用，以指定在特定窗口打開
? _parent：父窗口打開
? _top：頂層窗口打開
?_name：具體指定name窗口打開
電子郵件鏈接
電子郵件鏈接：
href后使用mailto:
舉例：
<a href="mailto:289719@qq.com?Subject=Hello"target="_top">
color
color：文本顏色屬性，用來設(shè)置文字的顏色。可以使用的設(shè)置方法：
?十六進制值 - 如:
＃FF0000? 一個RGB值 - 如:
RGB(255,0,0)? 顏色的名稱 - 如:
red、blue..... 舉例
? 還可以使用rgba(255,0,0,0.5)
最后一個參數(shù)用來指定顏色透明度
text-align
text-align: 文本的對齊方式,用來設(shè)置文本的水平對齊方式。? center :文本可居中
? left/right :對齊到左或右
? justify :兩端對齊
當text-align設(shè)置為"justify"，每一行被展開為寬度相等，左，右外邊距是對齊（如雜志和報紙）。
舉例：
text-decoration
text-decoration:文本修飾,用來設(shè)置或刪除文本的裝飾。從設(shè)計的角度看 text-decoration屬性主要是用來刪除鏈接的下劃線：
? none：無裝飾
? underline：下劃線
? overline：上劃線
? line-through：刪除線
text-transform
text-transform：文本轉(zhuǎn)換，用來指定在一個文本中的大寫和小寫字母。可用于所有字句變成大寫或小寫字母，或每個單詞的首字母大寫。
?uppercase ：將每個單詞的所有字符變大寫
?Lowercase：將每個單詞的所有字符變小寫
?capitalize：每個單詞的首字母大寫
text-indent
text-indent：文本縮進文本縮進屬性是用來指定文本的第一行的縮進。
單詞/字母間距
單詞/字母間距?word-spacing：單詞之間間距
?letter-spacing:字母之間間距
text-shadow
text-shadow：文本陰影效果：
屬性：
舉例：
<style>h1{text-shadow: 5px 5px 5px #FF0000;}</style><body><h1>文本陰影效果！</h1></body>也可以兩個顏色效果疊加 h1{ text-shadow: 10px 10px 5px #de8,20px 20px 20px #f00; }white-space
white-space：建立布局過程中如何處理元素中的空白符屬性：overflow
overflow:規(guī)定當內(nèi)容溢出元素框時發(fā)生的事情。屬性：text-overflow
規(guī)定當文本溢出包含元素時發(fā)生的事情。
屬性：
display
屬性規(guī)定元素應(yīng)該生成的框的類型。
屬性：
文本溢出框處理方法
處理方法一：
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;樣式說明：
1）overflow:hidden；---樣式隱藏溢出文本；
2）text-overflow:ellipsis；可以用來多行文本的情況下，用省略號“…”隱藏超出范圍的文本
3）white-space:nowrap;樣式強制文本不能換行；
處理方法二：
overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;樣式說明：
1）-webkit-line-clamp：用來限制在一個塊元素顯示的文本的行數(shù)。這個屬性是webkit的私有屬性，是一個不規(guī)范的屬性，它沒有出現(xiàn)在 CSS 規(guī)范草案中。為了實現(xiàn)該效果，它需要組合其他的WebKit屬性，常見結(jié)合屬性：
?display: -webkit-box; 必須結(jié)合的屬性，將對象作為彈性伸縮盒子模型顯示。
?-webkit-box-orient 必須結(jié)合的屬性，設(shè)置或檢索伸縮盒對象的子元素的排列方式 。
這個屬性比較合適WebKit瀏覽器或移動端（絕大部分是WebKit內(nèi)核的）瀏覽器。
CSS繼承性與層疊性
1）繼承性
這邊先舉一個例子來說（只取了關(guān)鍵部分）
<style type="text/css"> div{ color:blue; border:2px solid red; } </style></head><body> <div> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> </div>那么我們看得到結(jié)果CSS中是對div進行樣式修改，div的后代同時也被CSS所修改這里就看得到繼承性。
但不是所有的標簽都有繼承性這邊先介紹幾種最主要的，其他之后往后學的時候會遇見就知道。
具有繼承性屬性標簽：color，text-開頭，line-開頭，font-開頭的。
繼承性從大貫穿到到小
不具有繼承性的屬性：
?邊框?qū)傩?br>
?外邊距屬性
?內(nèi)邊距屬性
?背景屬性
?定位屬性
?布局屬性
2）層疊性
我們對樣式進行操作時，當CSS中有多個選擇器選中一個標簽并且修改了他的相同屬性時這時候被修改的元素應(yīng)該聽誰的，這里就涉及到了繼承性的問題。
CSS權(quán)重
CSS權(quán)重指的是樣式的優(yōu)先級，有兩條或多條樣式作用于一個元素，權(quán)重高的那條樣式對元素起作用,權(quán)重相同的，后寫的樣式會覆蓋前面寫的樣式。
可以把樣式的應(yīng)用方式分為幾個等級，按照等級來計算權(quán)重：
?！important,加在樣式屬性后，權(quán)重值為10000
?內(nèi)聯(lián)樣式，如：style=””，權(quán)重值為1000
?ID選擇器，如：#content，權(quán)重值為100
?類，偽類和屬性選擇器，如： content、:hover 權(quán)重值為10
?標簽選擇器和偽元素選擇器，如：div、p、:before 權(quán)重值為1
?通用選擇器（*）、子選擇器（>）、相鄰選擇器（+）、同胞選擇器（~）、權(quán)重值為0
權(quán)重的計算實例：實例一：
<style type="text/css"> div{ color:red !important; } </style>......<div style="color:blue">這是一個div元素</div><!-- 兩條樣式同時作用一個div，上面的樣式權(quán)重值為10000+1，下面的行間式的權(quán)重值為1000，所以文字的最終顏色為red -->實例二：
<style type="text/css"> #content div.main_content h2{ color:red; } #content .main_content h2{ color:blue; }</style>......<div id="content"> <div class="main_content"> <h2>這是一個h2標題</h2> </div></div><!--第一條樣式的權(quán)重計算： 100+1+10+1，結(jié)果為112；第二條樣式的權(quán)重計算： 100+10+1，結(jié)果為111；h2標題的最終顏色為red-->當遇到?jīng)_突時進行比較，先比較id，id權(quán)重100，class權(quán)重10，標簽權(quán)重1。
七．浮動與定位
偽類
偽類偽類并不是真正意義上的類，它的名稱是由系統(tǒng)定義的，通常由標記名、類名或id名加“：”構(gòu)成。
1）為什么要使用鏈接偽類為了提高用戶體驗，需要為超鏈接指定不同的狀態(tài)，使得超鏈接在
點擊前、點擊后和鼠標懸停時、超鏈接訪問后的樣式不同。在CSS中，通過鏈接偽類可以實現(xiàn)不同的鏈接狀態(tài)，
2）四種常用的鏈接偽類? a:link{ CSS樣式規(guī)則; }：未訪問時超鏈接的狀態(tài)
? a:visited{ CSS樣式規(guī)則; }：訪問后超鏈接的狀態(tài)
? a:hover{ CSS樣式規(guī)則; }：鼠標經(jīng)過、懸停時超鏈接的狀態(tài)
? a: active{ CSS樣式規(guī)則; }：鼠標點擊不動時超鏈接的狀態(tài)
舉例：
使用鏈接偽類來制作一個網(wǎng)頁導航，具體實現(xiàn)步驟如下：
? 搭建HTML結(jié)構(gòu)，具體代碼如下所示。
<a href="#">公司首頁</a><a href="#">公司簡介</a><a href="#">產(chǎn)品介紹</a><a href="#">聯(lián)系我們</a>? 定義CSS樣式，具體代碼如下所示：
<style type="text/css">a:link,a:visited{ /*未訪問和訪問后*/ color:#FC0; text-decoration:none; /*清除超鏈接默認的下劃線*/ margin-right:20px;}a:hover{ /*鼠標懸停*/ color:#0F0; text-decoration:underline; /*鼠標懸停時出現(xiàn)下劃線*/}a:active{color:#F00;} /*鼠標點擊不動*/</style>效果如下圖所示。
需要注意的是，同時使用鏈接的4種偽類時，通常按照
a:link、a:visited、a:hover和a:active的順序書寫，否則定義的樣式可能不起作用。元素的浮動屬性
定義浮動在CSS中，通過float屬性來定義浮動，其基本語法格式如下：
選擇器{float:屬性值;}
在上面的語法中，常用的float屬性值有三個，分別表示不同的含義，具體如下：
?left：元素向左浮動
?right:元素向右浮動
?none:元素不浮動（默認值）
1）不設(shè)置浮動
當對頁面中的所有元素均不應(yīng)用float屬性，也就是說元素的float屬性值都為其默認值none。頁面效果如下圖所示。
可見如果不對元素設(shè)置浮動，則該元素及其內(nèi)部的子元素將按照標準文檔流的樣式顯示，即塊元素占頁面整行。
2）box01左浮動
以box01為設(shè)置對象，對其應(yīng)用左浮動樣式，具體CSS代碼如下：
.box01{ /*定義box01左浮動*/
float:left;
}
保存HTML文件，刷新頁面，效果如下圖所示。
通過上圖容易看出，設(shè)置左浮動的box01漂浮到了box02的左側(cè)，也就是說box01不再受文檔流控制，出現(xiàn)在一個新的層次上。
3）box02左浮動
在上述案例的基礎(chǔ)上，繼續(xù)為box02設(shè)置左浮動，具體CSS代碼如下：
.box01,.box02{ /*定義box01、box02左浮動*/
float:left;
}
保存HTML文件，刷新頁面，效果如下圖所示。
在上圖中，box01、box02、box03三個盒子整齊地排列在同一行，可見通過應(yīng)用“float:left;”樣式可以使box01和box02同時脫離標準文檔流的控制向左漂浮。
4）box03左浮動
在上述案例的基礎(chǔ)上，繼續(xù)為box03設(shè)置左浮動，具體CSS代碼如下：
.box01,.box02,.box03{ /*定義box01、box02、box03左浮動*/
float:left;
}
保存HTML文件，刷新頁面，效果如下圖所示。
在上圖中，box01、box02、box03三個盒子排列在同一行，同時，周圍的段落文本將環(huán)繞盒子，出現(xiàn)了圖文混排的網(wǎng)頁效果。
float的另一個屬性值“right”在網(wǎng)頁布局時也會經(jīng)常用到，他與“l(fā)eft”屬性值的用法相同但方向相反。
注意：
對元素同時定義float和margin-left或margin-right屬性時，在IE6瀏覽器中，出現(xiàn)的左外邊距或右外邊距將是所設(shè)置的margin-left或margin-right值的兩倍。這就是網(wǎng)頁制作中經(jīng)常出現(xiàn)的IE6雙倍邊距問題。
清除浮動
1.清除浮動屬性clear由于浮動元素不再占用原文檔流的位置，所以他會對頁面中其他元素的排版產(chǎn)生影響。在CSS中，clear屬性用于清除浮動，其基本語法格式如下：
選擇器{clear:屬性值;}
在上面的語法中，clear屬性的常用值有三個，分別表示不同的含義，具體如下：
?left：不允許左側(cè)有浮動元素（清除左側(cè)浮動的影響）
?right：不允許右側(cè)有浮動元素（清除右側(cè)浮動的影響）
?both：同時清除左右兩側(cè)浮動的影響
接下來對上面案例中的<p>標記應(yīng)用clear屬性，來清除周圍浮動元素對段落文本的影響。在<p>標記的CSS樣式中添加如下代碼：
clear:left; /*清除左浮動*/
添加該樣式后，保存HTML文件，刷新頁面，效果如下圖所示。
2.常用的幾種清除浮動的方法clear屬性只能清除元素左右兩側(cè)浮動的影響。然而在制作網(wǎng)頁時，經(jīng)常會遇到一些特殊的浮動影響，例如，對子元素設(shè)置浮動時，如果不對其父元素定義高度，則子元素的浮動會對父元素產(chǎn)生影響，如下圖所示父元素變成了一條直線。
這里為大家總結(jié)三種常用的清除浮動的方法。
1）使用空標記清除浮動
在浮動元素之后添加空標記，并對該標記應(yīng)用“clear:both”樣式，可清除元素浮動所產(chǎn)生的影響，這個空標記可以為<div>、<p>、<hr />等任何標記。
以上述案例為基礎(chǔ)，在浮動元素box01、box02、box03之后添加class為box04的空div，然后對box04應(yīng)用“clear:both;”樣式。這時效果如下圖所示。
在上圖中，子元素浮動對父元素的影響已經(jīng)不存在。由于上述方法在無形中增加了毫無意義的結(jié)構(gòu)元素（空標記），因此在實際工作中不建議使用。
2）使用overflow屬性清除浮動
對元素應(yīng)用“overflow:hidden;”樣式，也可以清除浮動對該元素的影響。繼續(xù)以上述案例為基礎(chǔ)，對父元素應(yīng)用“overflow:hidden;”樣式，來清除子元素浮動對父元素的影響。這時效果如下圖所示。
在上圖中，子元素浮動對父元素的影響已經(jīng)不存在。
3）使用after偽對象清除浮動
after偽對象也可以清除浮動，該方法只適用于IE8及以上版本瀏覽器和其他非IE瀏覽器。繼續(xù)以上述案例為基礎(chǔ)，對父元素應(yīng)用after偽對象樣式， CSS代碼如下：
.father:after{ /*對父元素應(yīng)用after偽對象樣式*/ display:block; clear:both; content:""; visibility:hidden; height:0;}這時效果如下圖所示。
在上圖中，子元素浮動對父元素的影響已經(jīng)不存在。
overflow屬性
overflow屬性當盒子內(nèi)的元素超出盒子自身的大小時，內(nèi)容就會溢出（IE6除外），這時如果想要規(guī)范溢出內(nèi)容的顯示方式，就需要使用CSS的overflow屬性，其基本語法格式如下：
選擇器{overflow:屬性值;}
在上面的語法中，overflow屬性的常用值有visible、hidden、auto和scroll四個。
1）“overflow:visible;”樣式
設(shè)置“overflow:visible;”樣式后，盒子溢出的內(nèi)容不會被修剪，而呈現(xiàn)在元素框之外，如下圖所示。
2）“overflow:hidden;”樣式
設(shè)置“overflow: hidden;”樣式后，盒子溢出的內(nèi)容將會被修剪且不可見，如下圖所示。
3）“overflow:auto;”樣式
設(shè)置“overflow: auto;”樣式后，元素框能夠自適應(yīng)其內(nèi)容的多少，在內(nèi)容溢出時，產(chǎn)生滾動條，否則，則不產(chǎn)生滾動條。當內(nèi)容溢出時，如下圖所示。
4）“overflow:scroll;”樣式
當定義overflow的屬性值為scroll時，元素框中也會產(chǎn)生滾動條，如下圖所示。
與“overflow:auto;”不同，當定義“overflow: scroll;”時，不論元素是否溢出，元素框中的水平和豎直方向的滾動條都始終存在。
元素的定位
元素的定位屬性元素的定位屬性主要包括定位模式和邊偏移兩部分。
1）定位模式
在CSS中，position屬性用于定義元素的定位模式，其基本語法格式如下：
選擇器{position:屬性值;}
在上面的語法中，position屬性的常用值有四個，分別表示不同的定位模式，具體如下：
?static：自動定位（默認定位方式）
?relative：相對定位，相對于其原文檔流的位置進行定位
?absolute：絕對定位，相對于其上一個已經(jīng)定位的父元素進行定位
?fixed：固定定位，相對于瀏覽器窗口進行定位
2）邊偏移
通過邊偏移屬性top、bottom、left或right，來精確定義定位元素的位置，其取值為不同單位的數(shù)值或百分比，對他們的具體解釋如下：
?top：頂端偏移量，定義元素相對于其父元素上邊線的距離
?bottom：底部偏移量，定義元素相對于其父元素下邊線的距離
?left：左側(cè)偏移量，定義元素相對于其父元素左邊線的距離
?right：右側(cè)偏移量，定義元素相對于其父元素右邊線的距離
元素的類型與轉(zhuǎn)換
常見的幾種定位模式
1）靜態(tài)定位
靜態(tài)定位是元素的默認定位方式，當position屬性的取值為static時，可以將元素定位于靜態(tài)位置。 所謂靜態(tài)位置就是各個元素在HTML文檔流中默認的位置。
任何元素在默認狀態(tài)下都會以靜態(tài)定位來確定自己的位置，所以當沒有定義position屬性時，并不說明該元素沒有自己的位置，他會遵循默認值顯示為靜態(tài)位置。在靜態(tài)定位狀態(tài)下，無法通過邊偏移屬性（top、bottom、left或right）來改變元素的位置。
2）相對定位
相對定位是將元素相對于他在標準文檔流中的位置進行定位，當position屬性的取值為relative時，可以將元素定位于相對位置。對元素設(shè)置相對定位后，可以通過邊偏移屬性改變元素的位置，但是他在文檔流中的位置仍然保留。如下圖所示：
如上圖中，對child02設(shè)置相對定位后，他會相對于其自身的默認位置進行偏移，但是他在文檔流中的位置仍然保留。
3）絕對定位
絕對定位是將元素依據(jù)最近的已經(jīng)定位（絕對、固定或相對定位）的父元素進行定位，若所有父元素都沒有定位，則依據(jù)body根元素（瀏覽器窗口）進行定位。當position屬性的取值為absolute時，可以將元素的定位模式設(shè)置為絕對定位。如下圖所示：
在上圖中，設(shè)置為絕對定位的元素child02，依據(jù)瀏覽器窗口進行定位。并且，這時child03占據(jù)了child02的位置，即child02脫離了標準文檔流的控制，不再占據(jù)標準文檔流中的空間。
另外，對child02設(shè)置了絕對定位，當瀏覽器窗口放大或縮小時，child02相對于其直接父元素的位置都將發(fā)生變化。如下圖所示：
4）固定定位
固定定位是絕對定位的一種特殊形式，他以瀏覽器窗口作為參照物來定義網(wǎng)頁元素。當position屬性的取值為fixed時，即可將元素的定位模式設(shè)置為固定定位。
當對元素設(shè)置固定定位后，他將脫離標準文檔流的控制，始終依據(jù)瀏覽器窗口來定義自己的顯示位置。不管瀏覽器滾動條如何滾動，也不管瀏覽器窗口的大小如何變化，該元素都會始終顯示在瀏覽器窗口的固定位置。但是，由于IE6不支持固定定位，因此，在實際工作中較少使用。
5）z-index層疊等級屬性
當對多個元素同時設(shè)置定位時，定位元素之間有可能會發(fā)生重疊，如下圖所示：
在CSS中，要想調(diào)整重疊定位元素的堆疊順序，可以對定位元素應(yīng)用z-index層疊等級屬性，其取值可為正整數(shù)、負整數(shù)和0。z-index的默認屬性值是0，取值越大，定位元素在層疊元素中越居上
八．表格
為什么要應(yīng)用表格
為什么要應(yīng)用表格為了清晰地顯示數(shù)據(jù)或信息，常常使用表格對數(shù)據(jù)或信息進行統(tǒng)計，同樣在制作網(wǎng)頁時，為了使網(wǎng)頁中的元素有條理地顯示，也需要使用表格對網(wǎng)頁進行規(guī)劃。
創(chuàng)建表格的基本語法
創(chuàng)建表格的基本語法格式如下：
<table> <tr> <td>單元格內(nèi)的文字</td> ... </tr> ...</table>在上面的語法中包含三對HTML標記，分別為：
<table></table>、<tr></tr>、<td></td>它們是創(chuàng)建表格的基本標記，缺一不可，對它們的具體解釋如下：
? <table></table>：用于定義一個表格。
? <tr></tr>：用于定義表格中的一行，必須嵌套在<table></table>標記中，在<table></table>中包含幾對<tr></tr>，就表示該表格有幾行。
? <td></td>：用于定義表格中的單元格，必須嵌套在<tr></tr>標記中，一對<tr></tr>中包含幾對<td></td>，就表示該行中有多少列（或多少個單元格）。
注意：直接在<tr></tr>標記中輸入文字的做法是不被允許的。table標記
<table>標記HTML語言為其提供了一系列的屬性，用于控制表格的顯示樣式。
?
border屬性：在<table>標記中，border屬性用于設(shè)置表格的邊框，默認值為0。
?
cellspacing屬性：cellspacing屬性用于設(shè)置單元格與單元格邊框之間的空白間距，默認為2px。
?
cellpadding屬性：cellpadding屬性用于設(shè)置單元格內(nèi)容與單元格邊框之間的空白間距，默認為1px。
?
width與height屬性：默認情況下，表格的寬度和高度靠其自身的內(nèi)容來支撐
?
align屬性：用于定義元素的水平對齊方式，其可選屬性值為left、center、right。
?
bgcolor屬性：用于設(shè)置表格的背景顏色。
?
background屬性：用于設(shè)置表格的背景圖像。
tr標記
<tr>標記通過對<table>標記應(yīng)用各種屬性，可以控制表格的整體顯示樣式，但是制作網(wǎng)頁時，有時需要表格中的某一行特殊顯示，這時就可以為行標記<tr>定義屬性，其常用屬性如下：
? height：設(shè)置行高度，常用屬性值為像素值。
? align：設(shè)置一行內(nèi)容的水平對齊方式，常用屬性值為left、center、right。
? valign：設(shè)置一行內(nèi)容的垂直對齊方式，常用屬性值為top、middle、bottom。
? bgcolor：設(shè)置行背景顏色，預(yù)定義的顏色值、十六進制#RGB、rgb(r,g,b)
? background：設(shè)置行背景圖像，url地址。
td標記
<td>標記? width：設(shè)置單元格的寬度，常用屬性值為像素值。
? height：設(shè)置單元格的高度，常用屬性值為像素值。
? align：設(shè)置單元格內(nèi)容的水平對齊方式，常用屬性值為left、center、right
? valign：設(shè)置單元格內(nèi)容的垂直對齊方式，常用屬性值為top、middle、bottom
? bgcolor：設(shè)置單元格的背景顏色，常用屬性值為預(yù)定義的顏色值、十六進制#RGB、rgb(r,g,b)。
? background：設(shè)置單元格的背景圖像，常用屬性值為url地址。
? colspan：設(shè)置單元格橫跨的列數(shù)（用于合并水平方向的單元格），常用屬性值為正整數(shù)。
? rowspan：設(shè)置單元格豎跨的行數(shù)（用于合并豎直方向的單元格），常用屬性值為正整數(shù)。
與<tr>標記不同的是，可以對<td>標記應(yīng)用width屬性，用于指定單元格的寬度，同時<td>標記還擁有colspan和rowspan屬性，用于對單元格進行合并。
th標記
<th>標記應(yīng)用表格時經(jīng)常需要為表格設(shè)置表頭，以使表格的格式更加清晰，方便查閱。設(shè)置表頭非常簡單，只需用表頭標記<th></th>替代相應(yīng)的單元格標記<td></td>即可。
九．表單
表單控件
表單控件表單控件用于定義不同的表單功能，如：密碼輸入框、文本域、下拉列表、復(fù)選框等。
input控件
?
input控件單行文本輸入框、單選按鈕、復(fù)選框、提交按鈕、重置按鈕等，要想定義這些元素就需要使用input控件，其基本語法格式如下：
<input type="控件類型"/>
在上面的語法中，<input />標記為單標記，type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類型。除了type屬性之外，<input/>標記還可以定義很多其它的屬性，具體解釋如下：
? type
? text：單行文本輸入框
? password：密碼輸入框
? radio：單選按鈕
? checkbox：復(fù)選框
? button：普通按鈕
? submit：提交按鈕
? reset：重置按鈕
? image：圖像形式的提交按鈕
? hidden：隱藏域
? file：文件域
? name：由用戶自定義，表示控件的名稱
? value：由用戶自定義，表示input控件中的默認文本值
? size：正整數(shù)，表示input控件在頁面中的顯示寬度
? readonly：表示該控件內(nèi)容為只讀（不能編輯修改）
? disabled：表示第一次加載頁面時禁用該控件（顯示為灰色）
? checked：表示定義選擇控件默認被選中的項
? maxlength：整整數(shù)，表示控件允許輸入的最多字符數(shù)
舉例：
<form action="#"method="post"> 用戶名： <inputtype="text" value="張三" maxlength="6" /><br /><br /> 密碼： <inputtype="password" size="40" /><br /><br/> 性別： <inputtype="radio" name="sex" checked="checked" />男 <inputtype="radio" name="sex" />女<br /><br /> 興趣： <inputtype="checkbox" />唱歌 <inputtype="checkbox" />跳舞 <inputtype="checkbox" />游泳<br/><br /> 上傳頭像： <inputtype="file" /><br /><br /> <inputtype="submit" /> <inputtype="reset" /> <inputtype="button" value="普通按鈕" /> <inputtype="image" src="img/login.gif" /> <inputtype="hidden" /> </form>運行完整的案例代碼，得到效果圖如下所示。
有時需要將<input />控件聯(lián)合<label>標記使用，以擴大控件的選擇范圍，從而提供更好的用戶體驗。
textarea控件
?
textarea控件通過textarea控件可以輕松地創(chuàng)建多行文本輸入框，其基本語法格式如下：
<textarea cols="每行中的字符數(shù)" rows="顯示的行數(shù)"> 文本內(nèi)容</textarea>在上面的語法格式中，cols和rows為<textarea>標記的必須屬性，其中cols用來定義多行文本輸入框每行中的字符數(shù)，rows用來定義多行文本輸入框顯示的行數(shù)，它們的取值均為正整數(shù)。
舉例：
<form action="#" method="post">評論：<br /> <textareacols="60" rows="8">評論的時候，請遵紀守法并注意語言文明，多給文檔分享人一些支持。 </textarea><br /><br /> <inputtype="submit" value="提交"/></form>運行完整的案例代碼，得到效果圖如下所示。
除了cols和rows屬性外，<textarea>標記還擁有幾個可選屬性，分別為disabled、name和readonly，它們的含義和用法同<input />標記中相應(yīng)的屬性相同。
select控件
?
select控件在HTML中，要想制作如下圖所示的下拉菜單，就需要使用select控件。
十．盒子模型
認識盒子模型
認識盒子模型? 盒子模型的重要性
盒子模型是CSS網(wǎng)頁布局的基礎(chǔ)，只有掌握了盒子模型的各種規(guī)律和特征，才可以更好地控制網(wǎng)頁中各個元素所呈現(xiàn)的效果。首先我們分析一下盒子的構(gòu)成。
上圖就是盒子模型的組成部分，網(wǎng)頁中所有的元素和對象都是由上圖所示的基本結(jié)構(gòu)組成，理解了盒子模型的結(jié)構(gòu)后，要想隨心所欲地控制頁面中每個盒子的樣式，還需要掌握盒子模型的相關(guān)屬性。
<select>使用select控件定義下拉菜單的基本語法格式如下：
<select> <option>選項1</option> <option>選項2</option> <option>選項3</option> ... </select>值得一提的是，在HTML中，可以為<select>和<option>標記定義屬性，以改變下拉菜單的外觀顯示效果，具體解釋如下：
? <select>
? size：指定下拉菜單的可見選項數(shù)（取值為正整數(shù)）。
? multiple：定義multiple="multiple"時，下拉菜單將具有多項選擇的功能，方法為按住Ctrl鍵的同時選擇多項。
? <option>
? selected：定義selected =" selected "時，當前項即為默認選中項。
舉例：
<form action="#"method="post">所在校區(qū)：<br /> <select> <option>-請選擇-</option> <option>杭州</option> <option>杭州</option> <option>杭州</option> <option>杭州</option> <option>杭州</option> </select><br /><br />特長（單選）:<br/> <select> <option>唱歌</option> <option selected="selected">畫畫</option> <option>跳舞</option> </select><br /><br />愛好（多選）:<br/> <select multiple="multiple" size="4"> <option>讀書</option> <option selected="selected">寫代碼</option> <option>旅行</option> <option selected="selected">聽音樂</option> <option>踢球</option> </select><br /><br /> <inputtype="submit" value="提交"/></form>運行完整的案例代碼，得到效果圖如下所示。
上面我們實現(xiàn)了不同的下拉菜單效果，但是，在實際網(wǎng)頁制作過程中，有時候需要對下拉菜單中的選項進行分組，這樣當存在很多選項時，要想找到相應(yīng)的選項就會更加容易。如下圖所示即為選項分組后的下拉菜單中選項的展示效果。
要想實現(xiàn)如上圖所示的效果，可以在下拉菜單中使用<optgroup></optgroup>標記，下面通過一個具體的案例來演示為下拉菜單中的選項分組的方法和效果，具體代碼如下所示。
<form action="#"method="post">城區(qū)：<br /> <select> <optgroup label="杭州"> <option>東城區(qū)</option> <option>西城區(qū)</option> <option>朝陽區(qū)</option> <option>海淀區(qū)</option> </optgroup> <optgroup label="杭州"> <option>浦東新區(qū)</option> <option>徐匯區(qū)</option> <option>虹口區(qū)</option> </optgroup> </select></form>盒子模型的組成屬性
盒子模型的組成屬性? 邊框?qū)傩?br>
為了分割頁面中不同的盒子，常常需要給元素設(shè)置邊框效果，在CSS中邊框?qū)傩园ㄟ吙驑邮綄傩裕╞order-style）、邊框?qū)挾葘傩裕╞order-width）、邊框顏色屬性（border-color）。
1、設(shè)置邊框樣式（border-style）：邊框樣式用于定義頁面中邊框的風格，常用屬性值如下：
? none：沒有邊框即忽略所有邊框的寬度（默認值）
? solid：邊框為單實線
? dashed：邊框為虛線
? dotted：邊框為點線
? double：邊框為雙實線
使用border-style屬性綜合設(shè)置四邊樣式時，必須按上右下左的順時針順序，省略時采用值復(fù)制的原則，即一個值為四邊，兩個值為上下/左右，三個值為上/左右/下。
接下來運用相應(yīng)的屬性值定義邊框樣式，具體CSS代碼如下：
<style type="text/css">h2{ border-style:double} /*4條邊框相同——雙實線*/.one{ border-top-style:dotted; /*上邊框——點線*/ border-bottom-style:dotted;/*下邊框——點線*/ border-left-style:solid; /*左邊框——單實線*/ border-right-style:solid; /*右邊框——單實線*/ /*上面4行代碼等價于：border-style:dotted solid;*/}.two{ border-style:soliddotted dashed; /*上實線、左右點線、下虛線*/}</style>運行例程代碼，得到效果圖如下所示：
上圖就是給盒子分別指定雙實線、單實線、虛線、點線后的邊框效果。
2、設(shè)置邊框?qū)挾龋╞order-width）:設(shè)置邊框?qū)挾鹊姆椒ㄈ缦拢?br>
? borer-top-width：上邊框?qū)挾?
? borer-right-width：右邊框?qū)挾?
? borer-bottom-width：下邊框?qū)挾?
? borer-left-width：左邊框?qū)挾?
? borer- width：上邊框?qū)挾?[右邊框?qū)挾?下邊框?qū)挾茸筮吙驅(qū)挾萞;
綜合設(shè)置四邊寬度必須按上右下左的順時針順序采用值復(fù)制，即一個值為四邊，兩個值為上下/左右，三個值為上/左右/下。
接下來運用相應(yīng)的屬性值定義邊框?qū)挾?，具體CSS代碼如下：
<style type="text/css">p{ border-width:1px; /*綜合設(shè)置4邊寬度*/ border-top-width:3px; /*設(shè)置上邊寬度覆蓋*/ /*上面2行代碼等價于：border-width:3px 1px 1px; */}</style>運行例程代碼，得到效果圖如下所示:
上圖就是給段落文本同時設(shè)置邊框?qū)挾群蜆邮降男Ч麍D。
3、設(shè)置邊框顏色（border-color）:設(shè)置邊框顏色的方法如下：
? border-top-color:上邊框顏色;
? border-right-color:右邊框顏色;
? border-bottom-color:下邊框顏色;
? border-left-color:左邊框顏色;
? border- color:上邊框顏色 [右邊框顏色 下邊框顏色左邊框顏色];
其取值可為預(yù)定義的顏色值、#十六進制、rgb(r,g,b)或rgb(r%,g%,b%)，實際工作中最常用的是#十六進制。
邊框的默認顏色為元素本身的文本顏色，對于沒有文本的元素，例如只包含圖像的表格，其默認邊框顏色為父元素的文本顏色。
綜合設(shè)置四邊顏色必須按順時針順序采用值復(fù)制，即一個值為四邊，兩個值為上下/左右，三個值為上/左右/下。
接下來運用相應(yīng)的屬性值定義邊框樣式，具體CSS代碼如下：
p{ border-style:solid; /*綜合設(shè)置邊框樣式*/ border-color:#CCC#FF0000; /*設(shè)置邊框顏色：兩個值為上下、左右*/}總結(jié)：
能夠用一個屬性定義元素的多種樣式，這種屬性在CSS中稱之為復(fù)合屬性。常用的復(fù)合屬性有font、border、margin、padding和background等。實際工作中常使用復(fù)合屬性，它可以簡化代碼，提高頁面的運行速度，但是如果只有一項值，最好不要應(yīng)用復(fù)合屬性，以免樣式不被兼容。
內(nèi)邊距屬性
內(nèi)邊距屬性 為了調(diào)整內(nèi)容在盒子中的顯示位置，常常需要給元素設(shè)置內(nèi)邊距，所謂內(nèi)邊距指的是元素內(nèi)容與邊框之間的距離，也常常稱為內(nèi)填充。
在CSS中padding屬性用于設(shè)置內(nèi)邊距，同邊框?qū)傩詁order一樣，padding也是復(fù)合屬性，其相關(guān)設(shè)置如下：
? padding-top:上邊距;
? padding-right:右邊距;
? padding-bottom:下邊距;
? padding-left:左邊距;
? padding:上邊距 [右邊距 下邊距左邊距];
在上面的設(shè)置中，padding相關(guān)屬性的取值可為：auto自動（默認值）、不同單位的數(shù)值、相對于父元素（或瀏覽器）寬度的百分比%，實際工作中最常用的是像素值px，不允許使用負值。
同邊框相關(guān)屬性一樣，使用復(fù)合屬性padding定義內(nèi)邊距時，必須按順時針順序采用值復(fù)制：一個值為四邊、兩個值為上下/左右，三個值為上/左右/下。
接下來通過案例演示元素內(nèi)邊距的設(shè)置方式，具體CSS代碼如下：
img{ padding:80px; /*圖像4個方向內(nèi)邊距相同*/ padding-bottom:0;/*單獨設(shè)置下邊距*/ /*上面兩行代碼等價于padding:80px 80px 0;*/} p{ padding:5%;} 使用padding相關(guān)屬性設(shè)置圖像和段落的內(nèi)邊距，其中段落內(nèi)邊距使用%數(shù)值。由于段落的內(nèi)邊距設(shè)置為了%數(shù)值，當拖動瀏覽器窗口改變其寬度時，段落的內(nèi)邊距會隨之發(fā)生變化（這時<p>標記的父元素為<body>）。
外邊距屬性值
外邊距屬性值 網(wǎng)頁是由多個盒子排列而成的，要想拉開盒子與盒子之間的距離，合理地布局網(wǎng)頁，就需要為盒子設(shè)置外邊距，所謂外邊距指的是元素邊框與相鄰元素之間的距離。
在CSS中margin屬性用于設(shè)置外邊距，它是一個復(fù)合屬性，與內(nèi)邊距padding的用法類似，設(shè)置外邊距的方法如下：
? margin-top:上邊距;
? margin-right:右邊距;
? margin-bottom:下邊距;
? margin-left:上邊距;
? margin:上邊距 [右邊距 下邊距左邊距];
margin相關(guān)屬性的值，以及復(fù)合屬性margin取1~4個值的情況與padding相同。但是外邊距可以使用負值，使相鄰元素重疊，在后面的課程中將詳細介紹外邊距取負值的情況。
接下來通過案例演示元素外邊距的設(shè)置方法，具體CSS代碼如下：
img{ border:5pxsolid red; float:left; /*設(shè)置圖像左浮動*/ margin-right:50px; /*設(shè)置圖像的右外邊距*/ margin-bottom:30px; /*設(shè)置圖像的左外邊距*/ /*上面兩行代碼等價于margin:0 50px 30px 0;*/} 在上面的案例中使用浮動屬性float使圖像居左，同時設(shè)置圖像的右外邊距和下外邊距，使圖像和文本之間拉開一定的距離，實現(xiàn)常見的排版效果。
盒子寬度
盒子寬度 網(wǎng)頁是由多個盒子排列而成的，每個盒子都有固定的大小，在CSS中使用寬度屬性width和高度屬性height可以對盒子的大小進行控制。CSS規(guī)范的盒子模型的總寬度和總高度的計算原則是：
? 盒子的總寬度
width+左右內(nèi)邊距之和+左右邊框?qū)挾戎?左右外邊距之和
? 盒子的總高度
height+上下內(nèi)邊距之和+上下邊框?qū)挾戎?上下外邊距之和
元素類型
元素類型 HTML標記語言提供了豐富的標記，用于組織頁面結(jié)構(gòu)。為了使頁面結(jié)構(gòu)的組織更加輕松、合理，HTML標記被定義成了不同的類型，一般分為塊標記和行內(nèi)標記，也稱塊元素和行內(nèi)元素
? 塊元素
塊元素在頁面中以區(qū)域塊的形式出現(xiàn)，其特點是，每個塊元素通常都會獨自占據(jù)一整行或多整行，可以對其設(shè)置寬度、高度、對齊等屬性，常用于網(wǎng)頁布局和網(wǎng)頁結(jié)構(gòu)的搭建。
? 行內(nèi)元素
行內(nèi)元素也稱內(nèi)聯(lián)元素或內(nèi)嵌元素，其特點是，不必在新的一行開始，同時，也不強迫其他的元素在新的一行顯示。一個行內(nèi)元素通常會和它前后的其他行內(nèi)元素顯示在同一行中，它們不占有獨立的區(qū)域，僅僅靠自身的字體大小和圖像尺寸來支撐結(jié)構(gòu)，一般不可以設(shè)置寬度、高度、對齊等屬性，常用于控制頁面中文本的樣式。
元素類型轉(zhuǎn)換
元素類型轉(zhuǎn)換? 定義
網(wǎng)頁是由多個塊元素和行內(nèi)元素構(gòu)成的盒子排列而成的，如果希望行內(nèi)元素具有塊元素的某些特性，例如可以設(shè)置寬高，或者需要塊元素具有行內(nèi)元素的某些特性，例如不獨占一行排列，就可以使用display屬性對元素的類型進行轉(zhuǎn)換。
? 行內(nèi)元素轉(zhuǎn)換為塊級元素
display:block
? 塊級元素轉(zhuǎn)換為行內(nèi)元素
display:inline。
行內(nèi)塊元素
display:inline-block;
此元素將顯示為行內(nèi)塊元素，可以對其設(shè)置寬高和對齊等屬性，但是該元素不會獨占一行。
外邊距合并問題
外邊距合并問題在普通文檔流中（沒有對元素應(yīng)用浮動和定位），當兩個相鄰或嵌套的塊元素相遇時，其垂直方向的外邊距會自動合并，發(fā)生重疊。
? 相鄰塊元素垂直外邊距的合并
當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則它們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者，這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并。
? 嵌套塊元素垂直外邊距的合并
當兩個嵌套關(guān)系的塊元素，如果父元素沒有上內(nèi)邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發(fā)生合并，合并后的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發(fā)生合并。
可以通過以下兩種方法解決這個問題：
（1）給父盒子加邊框（border）
具體css代碼書寫如下所示：
border:1px solid #F00; /*定義父div的上邊框*/
（2）給父盒子樣式加overflow:hidden
具體css代碼書寫如下所示：
overflow:hidden; /*定義父div的overflow屬性*/
十一．頁面背景相關(guān)屬性
背景屬性
背景屬性? 背景屬性的重要性
網(wǎng)頁能通過背景圖像給人留下第一印象，如節(jié)日題材的網(wǎng)站一般采用喜慶祥和的圖片來突出效果，所以在網(wǎng)頁設(shè)計中，控制背景顏色和背景圖像是一個很重要的步驟。
背景顏色
? 背景顏色 網(wǎng)頁元素的背景顏色使用background-color屬性來設(shè)置，其屬性值與文本顏色的取值一樣，可使用預(yù)定義的顏色、十六進制#RRGGBB、RGB代碼rgb(r,g,b)，默認為transparent透明，即子元素會顯示其父元素的背景。
接下來通過案例演示元素背景顏色的設(shè)置方法，具體CSS代碼如下：
h2{ font-family:"微軟雅黑"; color:#FFF; background-color:#F00; /*設(shè)置標題的背景顏色*/}背景圖像
? 背景圖像背景背景不僅可以設(shè)置為某種顏色，在CSS中，還可以將圖像作為網(wǎng)頁元素的背景，通過background-image屬性實現(xiàn)。
接下來通過案例演示元素背景圖像的設(shè)置方法，具體CSS代碼如下：
body{ background-color:#CCC; /*設(shè)置網(wǎng)頁的背景顏色*/ background-image:url(img/jianbian.jpg);/*設(shè)置網(wǎng)頁的背景圖像*/} 背景圖像平鋪
? 背景圖像平鋪默認情況下，背景圖像會自動向水平和豎直兩個方向平鋪，如果不希望圖像平鋪，或者只沿著一個方向平鋪，可以通過background-repeat屬性來控制，具體使用方法如下：
? repeat：沿水平和豎直兩個方向平鋪（默認值）
? no-repeat：不平鋪（圖像位于元素的左上角，只顯示一次）
? repeat-x：只沿水平方向平鋪
? repeat-y：只沿豎直方向平鋪
接下來通過案例演示元素背景顏色的設(shè)置方法，具體CSS代碼如下：
body{ background-color:#eef8ff; /*更改網(wǎng)頁的背景顏色*/ background-image:url(img/jianbian.jpg);/*設(shè)置網(wǎng)頁的背景圖像*/ background-repeat:repeat-x; /*設(shè)置背景圖像的平鋪*/} h2{ font-family:"微軟雅黑"; color:#FFF;}背景圖像定位
背景圖像定位 如果希望背景圖像出現(xiàn)在指定位置，就需要另一個CSS屬性—background-position，設(shè)置背景圖像的位置。
在CSS中，background-position屬性的值通常設(shè)置為兩個，中間用空格隔開，用于定義背景圖像在元素的水平和垂直方向的坐標，例如上面的“right bottom”，默認為“0 0”或“top left”即背景圖像位于元素的左上角
background-position屬性的取值有多種，具體如下：
1.使用不同單位（最常用的是像素px）的數(shù)值：直接設(shè)置圖像左上角在元素中的坐標，例如background-position:20px 20px。
2.使用預(yù)定義的關(guān)鍵字：指定背景圖像在元素中的對齊方式。
? 水平方向值：left、center、right。
? 垂直方向值：top、center、bottom。
3.使用百分比：按背景圖像和元素的指定點對齊。
? 0% 0% 表示圖像左上角與元素的左上角對齊。
? 50% 50% 表示圖像50% 50%中心點與元素50% 50%的中心點對齊。
? 20% 30% 表示圖像20% 30%的點與元素20% 30%的點對齊。
? 100% 100% 表示圖像右下角與元素的右下角對齊，而不是圖像充滿元素。
接下來通過案例演示元素背景圖像位置的設(shè)置方法，具體CSS代碼如下：
body{ background-image:url(img/wdjl.jpg); /*設(shè)置網(wǎng)頁的背景圖像*/ background-repeat:no-repeat; /*設(shè)置背景圖像不平鋪*/ background-position:50px 80px; /*用像素值控制背景圖像的位置*/ }背景圖像固定
? 背景圖像固定在網(wǎng)頁上設(shè)置背景圖像時，隨著頁面滾動條的移動，背景圖像也會跟著一起移動。如果希望背景圖像固定在屏幕上，不隨著頁面元素滾動，可以使用background-attachment屬性來設(shè)置，其屬性值如下：
? scroll：圖像隨頁面元素一起滾動（默認值）。
? fixed：圖像固定在屏幕上，不隨頁面元素滾動。
接下來通過案例演示設(shè)置元素背景圖像的固定，具體CSS代碼如下：
body{ background-image:url(img/wdjl.jpg); /*設(shè)置網(wǎng)頁的背景圖像*/ background-repeat:no-repeat; /*設(shè)置背景圖像不平鋪*/ background-position:50px80px; /*用像素值控制背景圖像的位置*/ background-attachment:fixed; /*設(shè)置背景圖像的位置固定*/ }十二．利用模板創(chuàng)建網(wǎng)頁
模板概述
當網(wǎng)站中有許多頁面版式色彩相同的情況下，將其定義為網(wǎng)頁模板，并定義其中部分可編輯，部分不可利用。省時，省力，操作簡單。
創(chuàng)建模板
選擇“文件/另存為模板”,模板文件擴展名為.dwt，模板文件一般存放在templates文件夾中。
定義可編輯區(qū)域
將以一個網(wǎng)頁另存為模板后，整個文檔將會被鎖定，在該文檔中不能進行編輯，因此，需要在模板文檔中定義可編輯區(qū)域。
“插入/模板/可編輯區(qū)域”，需要刪除，只需要選擇要刪除的可編輯區(qū)域及其內(nèi)容，按DELETE將其刪除。
定義可選區(qū)域
該部分內(nèi)容在文檔中可以出現(xiàn)也可以不出現(xiàn)。
定義可編輯的可選區(qū)域
該部分內(nèi)容在文檔中可以出現(xiàn)也可以不出現(xiàn)。若出現(xiàn)可以進行內(nèi)容編輯
定義重復(fù)區(qū)域
可以在基于模板的頁面中復(fù)制任意次數(shù)。
應(yīng)用模板到網(wǎng)頁
只需要創(chuàng)建不同的網(wǎng)頁元素，然后將模板應(yīng)用到創(chuàng)建的網(wǎng)頁上，這樣可以提高網(wǎng)站制作效果。
十三．多媒體技術(shù)
多媒體的支持條件
多媒體技術(shù)：
在網(wǎng)頁設(shè)計中，多媒體技術(shù)主要是指在網(wǎng)頁上運用音頻、視頻傳遞信息的一種方式。
HTML5多媒體的特性
在HTML5出現(xiàn)之前并沒有將視頻和音頻嵌入到頁面的標準方式，多媒體內(nèi)容在大多數(shù)情況下都是通過第三方插件或集成在Web瀏覽器的應(yīng)用程序置于頁面中。
運用HTML5中新增的
video標簽和
audio標簽可以避免這樣的問題。
視頻和音頻編解碼器
由于視頻和音頻的原始數(shù)據(jù)一般都比較大，如果不對其進行編碼就放到互聯(lián)網(wǎng)上，傳播時會消耗大量時間，無法實現(xiàn)流暢的傳輸或播放。
通過視頻和音頻編解碼器對視頻和音頻文件進行壓縮，就可以實現(xiàn)視頻和音頻的正常傳輸和播放。
視頻編解碼器
視頻編解碼器定義了多媒體數(shù)據(jù)流編碼和解碼的算法。其中編碼器主要是對數(shù)據(jù)流進行編碼操作，用于存儲和傳輸。
音頻編解碼器
音頻編解碼器定義了音頻數(shù)據(jù)流編碼和解碼的算法。與視頻編解碼器的工作原理一樣，音頻編碼器主要用于對數(shù)據(jù)流進行編碼操作，解碼器主要用于對音頻文件進行解碼。
多媒體格式
運用HTML5的video和audio標簽可以在頁面中嵌入視頻或音頻文件，如果想要這些文件在頁面中加載播放，還需要設(shè)置正確的多媒體格式。
視頻格式包含視頻編碼、音頻編碼和容器格式。
音頻格式是指要在計算機內(nèi)播放或是處理音頻文件。
支持視頻和音頻的瀏覽器
很多瀏覽器已經(jīng)實現(xiàn)了對HTML5中video和audio元素的支持
嵌入視頻和音頻
在HTML5中，video標簽用于定義播放視頻文件的標準。
音視頻中的source元素
雖然html5支持Ogg、MPEG4和WebM的視頻格式以及Vorbis、MP3和Wav的音頻格式，但各瀏覽器對這些格式卻不完全支持
在HTML5中，運用source元素可以為video元素或audio元素提供多個備用文件。
CSS控制視頻的寬高
在HTML5中，經(jīng)常會通過為video元素添加寬高的方式給視頻預(yù)留一定的空間，這樣瀏覽器在加載頁面時就會預(yù)先確定視頻的尺寸，為其保留合適的空間，使頁面的布局不產(chǎn)生變化。
在線咨詢
