HTML與CSS前臺頁面設(shè)計ppt課件(完整版)

1、HTML與CSS前臺頁面設(shè)計HTML、CSS網(wǎng)頁設(shè)計概述第一章HTML與CSS前臺頁面設(shè)計第一章 HTML、CSS網(wǎng)頁設(shè)計概述HTML與CSS前臺頁面設(shè)計本章要點HTML的基本概念CSS的基本概念網(wǎng)頁與網(wǎng)站及HTML、CSS網(wǎng)頁的開發(fā)環(huán)境第一章 HTML、CSS網(wǎng)頁設(shè)計概述HTML與CSS前臺頁面設(shè)計目錄：1.1 HTML的基本概念1.2 CSS的基本概念1.3 網(wǎng)頁與網(wǎng)站1.1 HTML的基本概念 HTML是Hypertext Markup Language的縮寫，即超文本標記語言，它是用于創(chuàng)建可跨平臺的超文本文檔的一種簡單標記語言，現(xiàn)在通常用來創(chuàng)建Web頁面及網(wǎng)頁。HTML之所以叫做超文本

2、標記語言是因為它不僅描述文本，而且對網(wǎng)頁中的圖像、聲音等各種元素都可以描述，同時因為它是通過標記（tag）來指明網(wǎng)頁中的文檔、圖像、聲音等各種元素如何顯示的，所以又被稱為標記語言。 使用HTML語言編寫的腳本一般被稱為網(wǎng)頁或者HTML文檔。HTML文檔的擴展名通常為.html或.htm。1.2 CSS的基本概念 CSS（Cascading Style Sheet），中文譯為層疊樣式表，是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標記性語言。 CSS最重要的作用是將HTML頁面的內(nèi)容與它的顯示分隔開來。在CSS出現(xiàn)前，幾乎所有的HTML文件內(nèi)都包含文件顯示的信息，比如字體的顏色、背景應(yīng)

3、該是怎樣的、如何排列、邊緣、連線等等，都必須一一在HTML文件內(nèi)列出，有時甚至重復(fù)列出。CSS使HTML頁面開發(fā)者可以將這些信息中的大部分隔離出來，簡化HTML文件，這些信息被放在一個輔助的，用CSS語言寫的文件中。HTML文件中只包含結(jié)構(gòu)和內(nèi)容的信息，CSS文件中只包含樣式的信息。1.3 網(wǎng)頁與網(wǎng)站 網(wǎng)頁與網(wǎng)站的區(qū)別簡單的來說：網(wǎng)站是由網(wǎng)頁集合而成的。大家通過瀏覽器所看到的Web頁面就是網(wǎng)頁，網(wǎng)頁說具體了就是一個HTML文件，而瀏覽器是是用來解讀這份文件的。 網(wǎng)站(Web Site)是發(fā)布在網(wǎng)絡(luò)服務(wù)器上由一系列網(wǎng)頁文件構(gòu)成的，為訪問者提供信息和服務(wù)的網(wǎng)頁文件集合。網(wǎng)頁是網(wǎng)站的基本組成要素，一

4、個大型網(wǎng)站可能含有數(shù)以百萬計的網(wǎng)頁，而一個小的企業(yè)網(wǎng)站或個人網(wǎng)站可能只有幾個網(wǎng)頁。 。1.3.4 HTML、CSS網(wǎng)頁的開發(fā)環(huán)境1. 手工直接編寫 由于HTML頁面文件是標準的ASCII文本文件，所以我們可以使用任何的文本編輯器來打開并編寫HTML文件，如Windows系統(tǒng)中自帶的記事本。2. 使用可視化軟件 Frontpage和Dreamweaver是最常用的可視化HTML頁面可視化制作工具。HTML頁面可視化制作工具的優(yōu)點就是直觀，使用方便，容易上手，在這種編輯器中我們可以直接編輯網(wǎng)頁，編輯器則自動為我們生成相應(yīng)的HTML代碼。 如果需要結(jié)合Web應(yīng)用程序開發(fā)的話，Visual Studi

5、o.NET與MyEclipse則是最好的HTML頁面可視化制作工具。Visual Studio.NET與MyEclipse都是專業(yè)的Web應(yīng)用程序開發(fā)工具，同時他們也都提供了功能完善的HTML頁面可視化制作工具。如果需要開發(fā)一個Web應(yīng)用程序而不是僅僅設(shè)計一個美觀的HTML頁面的話，Visual Studio.NET與MyEclipse則是最佳的選擇。HTML網(wǎng)頁中的圖片第一章本章結(jié)束第二章HTML與CSS前臺頁面設(shè)計HTML基礎(chǔ) 第二章 HTML基礎(chǔ) HTML與CSS前臺頁面設(shè)計本章要點HTML代碼的結(jié)構(gòu)HTML網(wǎng)頁的構(gòu)成第二章 HTML基礎(chǔ) HTML與CSS前臺頁面設(shè)計目錄：2.1 HTM

6、L代碼的結(jié)構(gòu)2.2 HTML網(wǎng)頁的構(gòu)成2.3 HTML網(wǎng)頁的瀏覽與測試2.4 綜合實例1.HTML代碼的組成 HTML用于描述功能的符號稱為“標記”。如“”、“”、“”等。標記在使用時必須用方括號“”括起來，而且是成對出現(xiàn)，無斜杠的標記表示該標記的作用開始，有斜杠的標記表示該標記的作用結(jié)束。 2.1 HTML代碼的結(jié)構(gòu)2.注釋與空白符 （1）注釋HTML注釋是一種文本內(nèi)容，出現(xiàn)在HTML源文檔中,但瀏覽器并不顯示他們，對于注釋來說，最大的區(qū)別就是HTML不允許對它進行嵌套。有兩種注釋方式：注釋方法1：注釋方法2： 2.1 HTML代碼的結(jié)構(gòu)（2）空格符 HTML頁面中空格符并不具有調(diào)整間距的功

7、能(加續(xù)出現(xiàn)多個空格符時，僅第一上空格符有效)，若要正確的使用空格符，請改用HTML空格符，才能完成空格符的功能?？崭穹柺峭ㄟ^代碼控制的?；菊Z法： 2.1 HTML代碼的結(jié)構(gòu)3.標記的嵌套 在大多數(shù)情況下，標記必須被放置在其他標記內(nèi)部，這個過程被稱為嵌套標記，必須先結(jié)束最靠近嵌套標記內(nèi)容的標記，在按照由內(nèi)及外的順序依次進行。 2.1 HTML代碼的結(jié)構(gòu)4.標準屬性 HTML標記可以擁有屬性。屬性提供了有關(guān)HTML元素的更多的信息。屬性總是以名稱=“值”的形式出現(xiàn)。比如：name=“form1”，其中“name”就是屬性名，“form1”就是屬性值。屬性值總是在HTML 元素的開始標

8、記中指定。關(guān)于標記和屬性有下面的一些說明：（1）HTML 標記是用來標記 HTML 元素的。（2）HTML 標記被 “” 符號包圍。（3）HTML 標記是成對出現(xiàn)的。例如 和 。（4）位于起始標記和終止標記之間的文本是元素的內(nèi)容。（5）HTML 標記對大小寫不敏感， 和 的作用的相同的。2.1 HTML代碼的結(jié)構(gòu)2.2 HTML網(wǎng)頁的構(gòu)成 1.HTML網(wǎng)頁結(jié)構(gòu) 在進行HTML文件編寫的時候，必須遵循HTML的語法規(guī)則。完整的HTML文檔文件由標題、段落、表格等各種對象組成。所有的HTML一般都包括有這個結(jié)構(gòu)標志。2.2 HTML網(wǎng)頁的構(gòu)成 2.HTML標記及其屬性 2.2 HTML網(wǎng)頁的構(gòu)成

9、3.head標記及其屬性 標記用來封裝其他位于文檔頭部的標記。把該標記放在文檔的開始處，緊跟著在標記后面并位于標記或標記之前。標記一般在標記和標記的中間，是用來定義一些頭部說明。標志中包含文檔的標題，文檔使用的腳本，樣式定義和文檔名信息。 2.2 HTML網(wǎng)頁的構(gòu)成 3.body標記及其屬性 2.3 HTML網(wǎng)頁的瀏覽與測試 1.利用IE與Firefox瀏覽HTML網(wǎng)頁 （1）利用IE瀏覽HTML網(wǎng)頁 選擇【文件】|【打開】，然后單擊“瀏覽”按鈕，去查找硬盤中存放的網(wǎng)頁文件，然后單擊“打開”按鈕，瀏覽器就能夠顯示編寫網(wǎng)頁的頁面效果了。（2）Mozilla Firefox 火狐3.6內(nèi)置支持Pe

10、rsonas皮膚，支持CSS、DOM和HTML5，以及全屏視頻播放和開放源代碼的“Web開放字體格式”。另外，火狐3.6還增添了一項新的安全功能，可以檢查FlashPlayer和QuickTime等插件版本，確保它們是最新版本，屏蔽存在安全問題的插件，并提醒用戶更新插件。 2.3 HTML網(wǎng)頁的瀏覽與測試 2 . 利用Firebug測試HTML網(wǎng)頁 Firebug是Joe Hewitt開發(fā)的一套與Firefox集成在一起的功能強大的web開發(fā)工具，可以實時編輯、調(diào)試和監(jiān)測任何頁面的CSS、HTML和 JavaScript。2.4 綜合實例 HTML基礎(chǔ) 第二章本章結(jié)束第二章HTML與CSS前臺

11、頁面設(shè)計HTML基礎(chǔ) 第二章 HTML基礎(chǔ) HTML與CSS前臺頁面設(shè)計本章要點HTML代碼的結(jié)構(gòu)HTML網(wǎng)頁的構(gòu)成第二章 HTML基礎(chǔ) HTML與CSS前臺頁面設(shè)計目錄：2.1 HTML代碼的結(jié)構(gòu)2.2 HTML網(wǎng)頁的構(gòu)成2.3 HTML網(wǎng)頁的瀏覽與測試2.4 綜合實例1.HTML代碼的組成 HTML用于描述功能的符號稱為“標記”。如“”、“”、“”等。標記在使用時必須用方括號“”括起來，而且是成對出現(xiàn)，無斜杠的標記表示該標記的作用開始，有斜杠的標記表示該標記的作用結(jié)束。 2.1 HTML代碼的結(jié)構(gòu)2.注釋與空白符 （1）注釋HTML注釋是一種文本內(nèi)容，出現(xiàn)在HTML源文檔中,但瀏覽器并不顯

12、示他們，對于注釋來說，最大的區(qū)別就是HTML不允許對它進行嵌套。有兩種注釋方式：注釋方法1：注釋方法2： 2.1 HTML代碼的結(jié)構(gòu)（2）空格符 HTML頁面中空格符并不具有調(diào)整間距的功能(加續(xù)出現(xiàn)多個空格符時，僅第一上空格符有效)，若要正確的使用空格符，請改用HTML空格符，才能完成空格符的功能?？崭穹柺峭ㄟ^代碼控制的?；菊Z法： 2.1 HTML代碼的結(jié)構(gòu)3.標記的嵌套 在大多數(shù)情況下，標記必須被放置在其他標記內(nèi)部，這個過程被稱為嵌套標記，必須先結(jié)束最靠近嵌套標記內(nèi)容的標記，在按照由內(nèi)及外的順序依次進行。 2.1 HTML代碼的結(jié)構(gòu)4.標準屬性 HTML標記可以擁有屬性。屬性提供

13、了有關(guān)HTML元素的更多的信息。屬性總是以名稱=“值”的形式出現(xiàn)。比如：name=“form1”，其中“name”就是屬性名，“form1”就是屬性值。屬性值總是在HTML 元素的開始標記中指定。關(guān)于標記和屬性有下面的一些說明：（1）HTML 標記是用來標記 HTML 元素的。（2）HTML 標記被 “” 符號包圍。（3）HTML 標記是成對出現(xiàn)的。例如 和 。（4）位于起始標記和終止標記之間的文本是元素的內(nèi)容。（5）HTML 標記對大小寫不敏感， 和 的作用的相同的。2.1 HTML代碼的結(jié)構(gòu)2.2 HTML網(wǎng)頁的構(gòu)成 1.HTML網(wǎng)頁結(jié)構(gòu) 在進行HTML文件編寫的時候，必須遵循HTML的語

14、法規(guī)則。完整的HTML文檔文件由標題、段落、表格等各種對象組成。所有的HTML一般都包括有這個結(jié)構(gòu)標志。2.2 HTML網(wǎng)頁的構(gòu)成 2.HTML標記及其屬性 2.2 HTML網(wǎng)頁的構(gòu)成 3.head標記及其屬性 標記用來封裝其他位于文檔頭部的標記。把該標記放在文檔的開始處，緊跟著在標記后面并位于標記或標記之前。標記一般在標記和標記的中間，是用來定義一些頭部說明。標志中包含文檔的標題，文檔使用的腳本，樣式定義和文檔名信息。 2.2 HTML網(wǎng)頁的構(gòu)成 3.body標記及其屬性 2.3 HTML網(wǎng)頁的瀏覽與測試 1.利用IE與Firefox瀏覽HTML網(wǎng)頁 （1）利用IE瀏覽HTML網(wǎng)頁 選擇【文

15、件】|【打開】，然后單擊“瀏覽”按鈕，去查找硬盤中存放的網(wǎng)頁文件，然后單擊“打開”按鈕，瀏覽器就能夠顯示編寫網(wǎng)頁的頁面效果了。（2）Mozilla Firefox 火狐3.6內(nèi)置支持Personas皮膚，支持CSS、DOM和HTML5，以及全屏視頻播放和開放源代碼的“Web開放字體格式”。另外，火狐3.6還增添了一項新的安全功能，可以檢查FlashPlayer和QuickTime等插件版本，確保它們是最新版本，屏蔽存在安全問題的插件，并提醒用戶更新插件。 2.3 HTML網(wǎng)頁的瀏覽與測試 2 . 利用Firebug測試HTML網(wǎng)頁 Firebug是Joe Hewitt開發(fā)的一套與Firefox

16、集成在一起的功能強大的web開發(fā)工具，可以實時編輯、調(diào)試和監(jiān)測任何頁面的CSS、HTML和 JavaScript。2.4 綜合實例 HTML基礎(chǔ) 第二章本章結(jié)束HTML網(wǎng)頁頭部標記 第三章HTML與CSS前臺頁面設(shè)計第3章 HTML網(wǎng)頁頭部標記 HTML與CSS前臺頁面設(shè)計本章要點TITLE標記及其屬性BASE標記及其屬性META標記及其屬性LINK標記及其屬性STYLE標記及其屬性SCRIPT標記及其屬性第3章 HTML網(wǎng)頁頭部標記 HTML與CSS前臺頁面設(shè)計目錄：3.1 title標記及其屬性3.2 base標記及其屬性3.3 meta標記及其屬性3.4 link標記及其屬性3.5 st

17、yle標記及其屬性3.6 script標記及其屬性3.7 綜合實例3.1 title標記及其屬性 標記是一個頁面標題標記。它將HTML文件的標題顯示在瀏覽器的標題欄中，用以說明文件的用途。這個標記只能應(yīng)用于標記與之間。標記一般格式為： 文件標題標明該HTML文件的標題，是對文件內(nèi)容的概括。一個好的標題應(yīng)該能使讀者從中判斷出該文件的大概內(nèi)容。文件的標題一般不會顯示在文本窗口中，而以窗口的名稱顯示出來。每個文檔只允許有一個標題。3.2 base標記及其屬性 標記是一個基底網(wǎng)址標記，在HTML中是一個單標記。該標記用以改變文件中所有連結(jié)標記的參數(shù)內(nèi)定值。它只能應(yīng)用于標記與之間，并在所有帶有URL地址

18、的語句之前。使用標記時，網(wǎng)頁上的所有相對路徑在鏈接時都將在前面加上基底網(wǎng)址。 3.2 base標記及其屬性 標記一般格式為：在HTML中， 標記提供兩種基本屬性：1href屬性該屬性設(shè)定鏈接地址的前綴，規(guī)定頁面鏈接的基準URL。2target屬性該屬性設(shè)定文件顯示的窗口，規(guī)定鏈接的頁面打開方式。在HTML中，根據(jù)實際需要，可選新窗口(_blank)、原窗口(_self)、父窗口(_parent)、最外層窗口(_top)四種打開方式。 3.3 meta標記及其屬性 標記是元信息標記，在HTML中是一個單標記。該標記可重復(fù)出現(xiàn)在頭部標記中，用來指明本網(wǎng)頁的作者、網(wǎng)頁制作工具、所包含的關(guān)鍵字，以及其

19、他一些描述網(wǎng)頁的信息。另一個作用就是創(chuàng)建HTTP響應(yīng)頭，以便讓瀏覽器知道如何去處理這個網(wǎng)頁。例如這個網(wǎng)頁什么時候過期，隔多少時間自動刷新等。 標記一般格式為：常用屬性如下：1name屬性為標記中的名稱/值對提供了名稱。2http-equiv屬性指示服務(wù)器在發(fā)送實際的文檔之前要傳送給瀏覽器的文檔頭部包含名稱/值對。3. content屬性為標記提供了名稱/值對中的值。content 屬性始終要和name屬性或 http-equiv屬性一起使用。 3.3 meta標記及其屬性 3.4 link標記及其屬性標記是關(guān)聯(lián)標記，在 HTML中是一個單標記。用于定義當前文檔與Web集合中其他文檔的關(guān)系，建立

20、一個樹狀鏈接組織。標記并不實際鏈接到文件中，只是提供鏈接該文件的一個路徑。link標記最常用的是用來鏈接CSS樣式表文件。標記一般格式為： 3.5 style標記及其屬性 標記是樣式標記，在HTML中是一個雙標記，用于為HTML文檔定義樣式信息。元素位于head部分中。使用中標記，可以規(guī)定在瀏覽器中如何呈現(xiàn)HTML文檔，幾乎所有瀏覽器都支持標記。標記一般格式為：樣式內(nèi)容3.6 script標記及其屬性 標記是腳本標記，在HTML中是一個雙標記，用于為HTML文檔定義客戶端腳本信息。此標記可在文檔中包含一段客戶端腳本程序（客戶端腳本程序能使文檔更好地對客戶端的事件作出反應(yīng)，此標記可以位于文檔中任

21、何位置，但常位于標記內(nèi)，以便于維護）。 本節(jié)將結(jié)合本章所學(xué)內(nèi)容，介紹一個HTML文檔頭部的設(shè)計。設(shè)計一個HTML文檔頭部，要求為頁面設(shè)定字符集；設(shè)定便于搜索引擎搜索的關(guān)鍵字；設(shè)定一些描述網(wǎng)頁的信息，告訴搜索引擎本站點的主要內(nèi)容；能夠調(diào)用外部樣式表并在頭部加載腳本文件。3.7 綜合實例 小結(jié)HTML頭部標記是，在頭部標記的下一層標記中，主要有：標題標記基底網(wǎng)址標記 元信息標記基鏈接標記定義文檔樣式標記定義客戶端腳本標記這些標記主要用于設(shè)定頁面的一些基本信息，如頁面標題，簡要描述網(wǎng)頁內(nèi)容，定義頁面關(guān)鍵字，定義文檔樣式表，插入腳本語言程序等。一般來說,位于頭部的內(nèi)容都不會在網(wǎng)頁上直接顯示，而是通過瀏

22、覽器內(nèi)部方式起作用。第3章本章結(jié)束HTML網(wǎng)頁頭部標記 HTML網(wǎng)頁主體與內(nèi)容標記 第4章HTML與CSS前臺頁面設(shè)計第4章 HTML網(wǎng)頁主體與內(nèi)容標記 HTML與CSS前臺頁面設(shè)計本章要點標題與段落標記的使用文本格式標記的使用與標記的使用HTML中特殊字符的使用 HTML與CSS前臺頁面設(shè)計目錄：4.1 標題與段落標記的使用4.2 文本格式標記的使用4.3 內(nèi)容（多用途）標記4.4 特殊字符4.5 綜合實例第4章 HTML網(wǎng)頁主體與內(nèi)容標記 4.1 標題與段落標記的使用 4.1.1 h1、h2、h3、h4、h5與h6一般文章都有標題、副標題、章和節(jié)等結(jié)構(gòu)，HTML中也提供了相應(yīng)的標題標記,其

23、中n為標題的等級，HTML總共提供六個等級的標題，n越小，標題字號就越大。hn標記一般格式為：標題 （n=1,6）說明：的屬性有color、align。分別標識標題的顏色和位置(左、右、中間)。 4.1.2 p為了排列的整齊、清晰，文字段落之間，常用來做標記。是HTML格式中特有的段落元素。在HTML格式里不需要在意文章每行的寬度，不必擔心文字是不是太長了而被截掉，它會根據(jù)窗口的寬度自動轉(zhuǎn)折到下一行。因此，在原始文件中的，指出在這兒告一段落，下面的文字另起一段。如果沒有遇到這個符號，它就會把所有的文字都擠在一個段落里，不遇到窗口邊界是不會換行的。段落標記里面可以加入文字,列表,表格等。文件段落

24、的開始由來標記，段落的結(jié)束由來標記，是可以省略的，因為下一個的開始就意味著上一個的結(jié)束。標記一般格式為：文本說明：標簽有一個常用屬性align，它用來指名字符顯示時的對齊方式，其值一般有l(wèi)eft（左）、center（中）、right（右）三種。 4.1 標題與段落標記的使用 4.1.3 blockquote標記可定義一個塊引用。與之間的所有文本都會從常規(guī)文本中分離出來，經(jīng)常會在左、右兩邊進行縮進，而且有時會使用斜體。也就是說，塊引用擁有它們自己的空間。標記一般格式為：文本4.1 標題與段落標記的使用 4.1.4 address可定義一個地址（比如電子郵件地址）。使用它來定義地址、簽名或者文檔的

25、作者身份。不論創(chuàng)建的文檔是簡短扼要還是冗長完整，都應(yīng)該確保每個文檔都附加了一個地址，這樣做不僅為讀者提供了反饋的渠道，還可以增加文檔的可信度。標記一般格式為：文本 4.1 標題與段落標記的使用 4.1.5 pre標記可定義預(yù)格式化的文本。被包圍在標記中的文本通常會保留空格和換行符，而文本也會呈現(xiàn)為等寬字體。標記的一個常見應(yīng)用就是用來表示計算機的源代碼。標記一般格式為：文本塊4.1 標題與段落標記的使用 4.2 文本格式標記的使用 4.2.1 em標記用來表示強調(diào)，其文本默認樣式為斜體。標記一般格式為：文本4.2.2 strong標記把文本定義為語氣更強的強調(diào)的內(nèi)容。其文本默認樣式為粗體。標記一

26、般格式為：文本 4.2 文本格式標記的使用 4.2.3 cite標記定義引用?？墒褂迷摌擞泴⒖嘉墨I的引用進行定義，比如書籍或雜志的標題。標記一般格式為：文本 4.2 文本格式標記的使用 4.2.4 i與b與標記均是字體樣式元素。顯示斜體文本效果，呈現(xiàn)粗體文本效果。與標記一般格式為：文本文本 4.2 文本格式標記的使用 4.2.5 big與small與標記也是字體樣式元素。呈現(xiàn)大號字體效果，呈現(xiàn)小號字體效果。與標記一般格式為：文本文本4.2 文本格式標記的使用 4.2.6 tt標記呈現(xiàn)類似打字機或者等寬的文本效果。標記一般格式為：文本4.2 文本格式標記的使用 4.2.7 sup與sub與標記

27、均是用于數(shù)學(xué)公式、科學(xué)符號和化學(xué)公式中的標記。標記可定義上標文本，標記可定義下標文本。標記一般格式為：文本 文本說明：與標記中的文本內(nèi)容將會以當前文本流中字符高度的一半來顯示，但是與當前文本流中文字的字體和字號都是一樣的。標記中的文本出現(xiàn)在當前文本流的上方，而標記中的文本出現(xiàn)在當前文本流的下方。4.2 文本格式標記的使用 4.2.8 q標記可定義一個短塊的引用。標記一般格式為：文本說明：與的區(qū)別，標記在本質(zhì)上與是一樣的。不同之處在于它們的顯示和應(yīng)用。標記用于簡短的行內(nèi)引用。如果需要從周圍內(nèi)容分離出來比較長的部分（通常顯示為縮進的塊），請使用標記。 4.2 文本格式標記的使用 4.2.9 dfn

28、標記定義一個項目。可標記那些對特殊術(shù)語或短語的定義?，F(xiàn)在流行的瀏覽器通常用斜體來顯示中的文本。標記一般格式為：文本 4.2 文本格式標記的使用 4.2.10 abbr與acronym標記表示一個縮寫形式，用于表示web頁面上的簡稱。標記最初是在 HTML4.0中引入的，表示它所包含的文本是一個更長的單詞或短語的簡寫形式。瀏覽器可能會根據(jù)這個信息改變對這些文本的顯示方式，或者用其他文本代替。標記一般格式為：文本簡稱 4.2 文本格式標記的使用 4.2.11 del與ins標記定義文檔中已被刪除的文本。標記一般格式為：文本標記定義已經(jīng)被插入文檔中的文本。標記一般格式為：文本說明：與標簽配合使用，來

29、描述文檔中的更新和修正。4.2 文本格式標記的使用 4.2.12 bdo標記可重新定義文字顯示方向。標記一般格式為：文本4.2 文本格式標記的使用 4.2.13 code、kbd、samp與var、與標記常用于顯示計算機/編程代碼。這幾個標記不只是讓用戶更容易理解和瀏覽的文檔，而且將來某些自動系統(tǒng)還可以利用這些恰當?shù)臉撕?，從的文檔中提取信息以及文檔中提到的有用參數(shù)。提供給瀏覽器的語義信息越多，瀏覽器就可以越好地把這些信息展示給用戶。4.2 文本格式標記的使用 4.2.14 hr標記在HTML頁面中創(chuàng)建一條水平線?？梢栽谝曈X上將文檔分隔成各個部分。標記一般格式為：4.2 文本格式標記的使用 4.

30、2.15 marquee滾動字幕的使用使得整個網(wǎng)頁更有動感，顯得很有生氣。用HTML的滾動字幕標簽所需的代碼最少，能夠以較少的下載時間換來較好的效果。標記一般格式為：滾動字幕4.2 文本格式標記的使用 4.3 內(nèi)容（多用途）標記4.3.1 divdiv是division的簡寫，division意為分割、區(qū)域。標記在HTML中表示一個塊，標記可以把文檔分割為獨立的、不同的部分，因而該標記被稱為區(qū)隔標記?？梢詫⑺米鱓eb頁面的組織工具，設(shè)定頁面文字、圖形、圖像、表格等的擺放位置?？梢酝ㄟ^CSS樣式(style)為其賦予不同的表現(xiàn)。div標記一般格式為：文檔4.3.2 span標記在HTML中表示

31、一個組合文檔中的行內(nèi)元素，標記可以把一行文檔中的某部分分割為獨立的區(qū)域，從而實現(xiàn)某種特定效果，因而該標記被稱為行內(nèi)區(qū)隔標記。標記一般格式為：文檔4.3 內(nèi)容（多用途）標記4.4 特殊字符特殊字符是指在HTML中具有特別含義的字符，比如小于號就表示HTML標記的開始，這個小于號是不會顯示在最終看到的網(wǎng)頁里面。那如果希望在網(wǎng)頁中顯示一個小于號，該怎么辦呢？這時就需要使用一些特殊的代碼組合來替代。在HTML中特殊字符是不能直接使用的。要使用特殊字符，應(yīng)使用它們的轉(zhuǎn)義序列。在超文本標記語言里，一個特殊字符有兩種表達方式，即字符轉(zhuǎn)義序列或數(shù)字轉(zhuǎn)義序列。所謂字符轉(zhuǎn)義序列，實際上就是用有意義的名稱來表示特殊

32、字符，通常由前綴“&”，加上字符對應(yīng)的名稱，再加上后綴“;”而組成。其表達方式如下：&name；其中name是一個用于表示字符的名稱，它是區(qū)分大小寫的。例如：& lt; font &lgt;顯示為，若直接寫為“則被認為是一個標注。4.4 特殊字符所謂數(shù)字轉(zhuǎn)義序列，就是用數(shù)字來表示文檔中的特殊字符，通常由前綴“”而組成。其表達方式如下： font-size:16px; 5.3 CSS樣式選擇器（3）后代選擇器 后代選擇器可用來尋找特定元素或元素組的后代。后代選擇器是用一個用空格符隔開的兩個或更多的單一選擇器組成的字符串。后代選擇器是根據(jù)文檔中的上下文來選取元素的。兩個選擇器之間用有空格隔開。di

33、v pcolor:red;5.3 CSS樣式選擇器（4）子選擇器 這個選擇器與后代選擇器的區(qū)別：子選擇器（child selector）僅是指它的直接后代，或者可以理解為作用于子元素的第一個后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進行選擇，而子選擇器是通過“”進行選擇。divpcolor:red;5.3 CSS樣式選擇器（5）屬性選擇器屬性選擇器可以根據(jù)某個屬性是否存在或?qū)傩缘闹祦韺ふ以?，因此能夠?qū)崿F(xiàn)某些非常有意思的效果?？梢哉J為class和id選擇器其實就是屬性選擇器，只不過是選擇了class或者id的值而已。低版本的瀏覽器不支持屬性選擇器，但當前主流的標準瀏覽器都很

34、好的支持屬性選擇器。屬性選擇器的格式是元素后跟中括號，中括號內(nèi)帶屬性，或者屬性表達式。有簡易屬性選擇器和精確屬性值選擇器。5.3 樣式的優(yōu)先級層疊的重要度次序：（1）標有!important的用戶樣式。（2）標有!important的作者樣式。（3）作者樣式。（4）用戶樣式。（5）瀏覽器/用戶代理應(yīng)用的樣式。5.4 綜合實例 使用CSS樣式第五章本章結(jié)束HTML網(wǎng)頁中的圖片第六章HTML與CSS前臺頁面設(shè)計第六章 HTML網(wǎng)頁中的圖片HTML與CSS前臺頁面設(shè)計本章要點img標記網(wǎng)頁中圖片的屬性圖文混排使用CSS樣式表設(shè)置圖片屬性第六章 HTML網(wǎng)頁中的圖片HTML與CSS前臺頁面設(shè)計目錄：6

35、.1 在網(wǎng)頁中加入圖片6.2 圖片與文字的排版6.3 網(wǎng)頁背景圖片6.4 利用CSS樣式在網(wǎng)頁中加入圖片6.5 綜合實例6.1 在網(wǎng)頁中加入圖片img標記及其屬性6.2 圖片與文字的排版圖像和文字之間的排列通過align屬性來設(shè)定。圖像的絕對對齊方式和相對文字對齊方式是不一樣的。絕對對齊方式的效果和文字的對齊一樣，只有3種：居左、居右、居中；而相對文字對齊方式是指圖像與一行文字的相對位置。6.3 網(wǎng)頁背景圖片1.設(shè)置頁面背景顏色主體標記中的bgcolor屬性可以設(shè)定整個頁面的背景顏色。與文字顏色相似，也是使用顏色名稱或者十六進制值來表現(xiàn)顏色效果。color_value指的就是顏色的值。6.3

36、網(wǎng)頁背景圖片2.設(shè)置頁面背景圖片頁面中可以使用JPG或GIF圖片作為頁面的背景圖，通過主體標記中的background屬性來實現(xiàn)。它與向網(wǎng)頁中插入圖片不同，放在網(wǎng)頁的最底層，文字和圖片等等都位于它的上面。文字、圖片等會覆蓋背景圖片。在默認的情況下，背景圖片在水平方向和垂直方向上會不斷重復(fù)出現(xiàn)，直到鋪滿整個網(wǎng)頁。img_file_url是指圖片文件的路徑。6.4 利用CSS樣式在網(wǎng)頁中加入圖片 1.應(yīng)用CSS圖像邊框6.4 利用CSS樣式在網(wǎng)頁中加入圖片 2. 使用CSS設(shè)置圖文環(huán)繞可以使用float、margin和padding屬性使正文環(huán)繞一個圖像。 float：設(shè)置元素向左或向右浮動；ma

37、rgin：設(shè)置圖像到其他元素的間距；padding：設(shè)置圖像到邊框的間距；6.5 綜合實例 HTML網(wǎng)頁中的圖片第六章本章結(jié)束創(chuàng)建超鏈接 第七章HTML與CSS前臺頁面設(shè)計第七章 創(chuàng)建超鏈接 HTML與CSS前臺頁面設(shè)計本章要點超鏈接的概念連接標記使用CSS樣式設(shè)置書簽格式圖片連接圖片映射HTML與CSS前臺頁面設(shè)計目錄：7.1 超鏈接概述7.2 超鏈接標記a及其屬性7.3 利用CSS樣式設(shè)置書簽格式7.4 圖片鏈接7.5 圖片映射鏈接7.6 綜合實例第七章 創(chuàng)建超鏈接 7.1 超鏈接概述超鏈接是一個網(wǎng)站的靈魂。一個網(wǎng)站是由多個頁面組成的，創(chuàng)建超鏈接有利于頁面與頁面之間的跳轉(zhuǎn)，從而將整個網(wǎng)站中

38、的頁面有機地連接起來，它是網(wǎng)頁中至關(guān)重要的元素。一般情況是將鼠標光標移至超連接處時顯示為下劃線，單擊鼠標即可跳轉(zhuǎn)到超鏈接的相應(yīng)頁面。每一個網(wǎng)頁都有獨一無二的地址，即URL。7.2 超鏈接標記a及其屬性超鏈接標記雖然在網(wǎng)頁設(shè)計制作中占有不可替代的地位，但是其標記只有一個，那就是標記。本章介紹的超鏈接應(yīng)用都是基于標記基礎(chǔ)上的。鏈接文字 7.2 超鏈接標記a及其屬性每一個文件都有自己的存放位置和路徑，理解一個文件到要鏈接的文件之間的路徑關(guān)系式創(chuàng)建超鏈接的根本。URL統(tǒng)一資源定位器，指的就是每一個網(wǎng)站都具有的獨立的地址。同一個網(wǎng)站下的每一個網(wǎng)頁都屬于同一個地址下，但是，當創(chuàng)建網(wǎng)頁時，不可能也不需要為每

39、一個鏈接都輸入完全的地址。我們只需要確定當前文檔同站點根目錄之間的相對路徑關(guān)系。因此，鏈接可以分為以下3種：絕對路徑相對路徑根路徑 7.2 超鏈接標記a及其屬性1.絕對路徑絕對路徑為文件提供完全的路徑，包括適用的協(xié)議，如http,ftp,rtsp等。一般常見的有：當鏈接到其他網(wǎng)站中的文件時，必須使用絕對鏈接。 7.2 超鏈接標記a及其屬性2.相對路徑相對路徑是最適合網(wǎng)站的內(nèi)部鏈接的。只要是屬于同一網(wǎng)站之下的，即使不在同一個目錄下，相對鏈接也非常適合。相對鏈接的使用方法為：如果鏈接到同一目錄下，則只需輸入要鏈接文檔的名稱。如鏈接到下一級目錄中的文件，只需先輸入目錄名，然后加“/”，再輸入文件名。

40、如鏈接到上一級目錄中的文件，則先輸入“./”，再輸入目錄名、文件名。7.2 超鏈接標記a及其屬性要從news1.html鏈接到news2.html，只需在設(shè)置鏈接的位置輸入“news2.html”。要從news3.html鏈接到國內(nèi)新聞目錄中的news2.html，只需輸入“國內(nèi)新聞/news2.html”。要從news1.html鏈接到上一級目錄中的news3.html，只需輸入“./news3.html”。7.2 超鏈接標記a及其屬性3.根路徑根目錄相對地址同樣適用于創(chuàng)建內(nèi)部鏈接，但大多數(shù)情況下，不建議使用此種地址形式。它在下列情況下使用：當站點的規(guī)模非常大，放置于幾個服務(wù)器上時當一個服務(wù)

41、器上同時放置幾個站點時根目錄相對地址的書寫形式也很簡單，首先以一個斜杠開頭，代表根目錄，然后書寫文件夾名，最后書寫文件名。 7.2.1 內(nèi)部鏈接所謂內(nèi)部鏈接，指的是在同一個網(wǎng)站內(nèi)部，不同的HTML頁面之間的鏈接關(guān)系。在建立網(wǎng)站內(nèi)部鏈接的時候，要考慮到使鏈接具有清晰的導(dǎo)航結(jié)構(gòu)，使用戶方便地找到所需內(nèi)容的HTML文件。7.2.2 書簽鏈接建立書簽鏈接分為兩步，一是建立書簽，二是為書簽制作鏈接。建立書簽：文字書簽鏈接：文字鏈接7.2 超鏈接標記a及其屬性7.2.3 外部鏈接所謂外部鏈接，指的是跳轉(zhuǎn)到當前網(wǎng)站外部，與其他網(wǎng)站中頁面或其他元素之間的鏈接關(guān)系。這種鏈接在一般情況下需要書寫絕對地址。制作外部

42、鏈接的時候，使用URL統(tǒng)一資源定位符來定位萬維網(wǎng)信息，這種方式可以簡潔、準確地描述信息所在的地點。常見的URL格式如表所示。7.2 超鏈接標記a及其屬性1.鏈接外部網(wǎng)站文字鏈接2.鏈接FTP文字鏈接3.鏈接到news新聞組文字鏈接4.發(fā)送e-mail發(fā)送郵件郵件主題抄送密件抄送 7.2 超鏈接標記a及其屬性7.2.4 文件（非HTML頁面）鏈接 除了鏈接到HTML頁面的超鏈接外，還可以制作提供文件下載的鏈接。如果希望制作下載文件的鏈接，只需在鏈接地址處輸入文件所在的位置即可。當瀏覽器用戶單擊鏈接后，瀏覽器會自動判斷文件的類型，以做出不同情況處理。文字鏈接file_url代表文件所在的路徑，可以

43、寫下相對路徑，也可以寫下絕對路徑。7.2 超鏈接標記a及其屬性7.3 利用CSS樣式設(shè)置書簽樣式 超鏈接在默認情況下，鏈接被顯示為帶下劃線，未被查看過時為藍色，訪問過的為紫色。我們可以通過CSS來設(shè)置鏈接不同狀態(tài)中的樣式 。鏈接分為5個狀態(tài)，它們的視覺外觀根據(jù)當前狀態(tài)而改變。這些狀態(tài)如下：link鏈接在沒有任何操作之前的標準狀態(tài)visited鏈接被單擊之后的狀態(tài)hover鼠標指針懸停在連接上時的狀態(tài)focus鏈接獲得焦點時的狀態(tài)active鏈接正在被單擊時的狀態(tài)在默認外觀中，link為藍色，visited為紫色，active為紅色，三者都帶有下劃線。使用CSS可以調(diào)節(jié)不同狀態(tài)下鏈接的字體、大小

44、、顏色、加粗斜體、下劃線等格式。 7.4 圖片連接 雖然鏈接主要是基于文本的，但是可以用一個鏈接來包裝一個圖像，從而使其變成一個鏈接。圖像的鏈接標記和文字是相同的。都是標記。區(qū)別在于，文本的鏈接在超鏈接標記之間輸入文本鏈接文字圖片的鏈接在之間輸入的是圖片的代碼。另外，圖片默認情況下沒有邊框，一旦添加鏈接后會有藍色邊框，想要去掉邊框，可在標記中將border屬性值設(shè)為0，如，或者在CSS樣式表中將圖片標記img的樣式統(tǒng)一設(shè)成imgborder:0;。7.5 圖片映射鏈接 圖像映射（image map）使你可以在一個單獨圖像中定義多個鏈接。例如，如果你有一個氣象圖，可以使用一個圖像映射鏈接到各個地

45、區(qū)的氣象預(yù)報。圖像映射中可單擊的范圍可以是基本形狀（矩形或者圓形），也可以是復(fù)雜的多邊形。7.6 綜合實例 第七章本章結(jié)束創(chuàng)建超鏈接 創(chuàng)建表格 第八章HTML與CSS前臺頁面設(shè)計第八章 創(chuàng)建表格 HTML與CSS前臺頁面設(shè)計本章要點表格基礎(chǔ)標記表格屬性表格高級標記高級表格HTML與CSS前臺頁面設(shè)計目錄：8.1 表格基礎(chǔ)標記8.2 創(chuàng)建簡單表格8.3 表格的屬性8.4 表格高級標記8.5 創(chuàng)建高級表格8.6 綜合實例第八章 創(chuàng)建表格 8.1 表格基礎(chǔ)標記在HTML的語法中，表格主要通過3個標記來構(gòu)成，表格標記、行標記、單元格標記。標記代表表格的開始，標記代表行開始，而和之間的就是單元格的內(nèi)容。

46、這幾個標記之間是從大到小，逐層包含的關(guān)系，由最大的表格，到最小的單元格。一個表格可以有多個和標記，分別代表多行和多個單元格。8.2 創(chuàng)建簡單表格8.3 表格的屬性在創(chuàng)建表格之后，我們還需要對表格的各方面屬性進行調(diào)整，表格的基本屬性如表所示。8.3 表格的屬性1.表格的寬度和高度width,height一般情況下只有一列的表格，width寫在的標簽內(nèi)，只有一行的表格，height寫在的標簽內(nèi)，多行多列的表格，width和height 寫在第一行或者第一列的標簽內(nèi)?？傊裱粭l原則：不出現(xiàn)多于一個的控制同一個單元格大小的height和width, 保證任何一個width和height都是有效的，也

47、就是你改動代碼中任何一個width和height的數(shù)值，都應(yīng)該在瀏覽器中看到變化。做到這一條不容易，需要較長時間的練習(xí)和思考。 8.3 表格的屬性2.表格的邊框border我們看到，默認情況下表格不顯示邊框，即border屬性值為0，我們可以設(shè)置表格邊框粗細，單位為像素。8.3 表格的屬性3.表格邊框顏色bordercolor添加了5像素的邊框后，我們發(fā)現(xiàn)，表格上下左右4條邊框顏色并不相同。對表格外邊框來說，左上邊框顏色淺，稱為亮邊框bordercolorlight，右下邊框顏色深，稱為暗邊框bordercolordark；而單元格的邊框相反，左上為暗邊框，右下為亮邊框。我們可以使用borde

48、rcolor屬性統(tǒng)一設(shè)置4條邊框為同一顏色，也可以使用bordercolorlight和bordercolordark分別設(shè)置亮邊框，暗邊框的顏色。8.3 表格的屬性4.表格背景顏色bgcolor通過bgcolor屬性可以設(shè)置表格、行以及單元格的背景顏色。 8.3 表格的屬性5.表格背景圖片background除了背景顏色外，我們還可以為表格設(shè)置背景圖像。 8.3 表格的屬性6.單元格間距cellspacing可以通過設(shè)置cellspacing屬性調(diào)節(jié)單元格與單元格之間的間距。8.3 表格的屬性7.單元格邊距cellpadding單元格邊距是指單元格中的內(nèi)容和邊框之間的距離。8.3 表格的屬性

49、8.水平對齊方式align在水平方向上，對齊方式分別有居左（left）、居中（center）、居右（right）三種。在表格標記中使用align屬性，是將整個表格居于瀏覽器的左、中、右方。在標記中使用align屬性，是將這一行的中所有單元格中的內(nèi)容相對所處的單元格居左、居中、居右。在標記中使用align屬性，是將該單元格中的內(nèi)容在單元格中居左、居中、居右。 8.3 表格的屬性9.表格外邊框樣式frame我們除了可以控制表格邊框的粗細顏色外還可以控制邊框的顯示樣式。使用frame屬性可以控制表格外邊框樣式，屬性值如表所示。8.3 表格的屬性10.表格內(nèi)邊框樣式rules使用rules屬性可以控制

50、表格內(nèi)邊框樣式，屬性值如表所示。8.4 表格高級標記1.th表格的表頭標記，通常情況是表格的第一行或第一列，其中的文字可以實現(xiàn)居中并且加粗顯示?？梢允褂锰娲鷺擞?，可以看做帶有加粗并居中功能的特殊單元格標記。8.4 表格高級標記2.caption在HTML語言中，可以自動通過標記為表格添加標題。通過這個標記可以直接添加表格的標題，而且可以控制標題文字的排列屬性。標題內(nèi)容之間的就是標題內(nèi)容；通過align設(shè)置標題文字相對表格的水平對齊方式（left、center、right）；通過valign設(shè)置標題文字相對表格的垂直對齊方式（top、bottom）； 8.4 表格高級標記3.thead,tbod

51、y,tfoot3種行組元素、使瀏覽器能夠支持長表格主體區(qū)域滾動，并保持表頭和表尾固定。我們可以為表頭、表體和表尾數(shù)據(jù)分別設(shè)置樣式。使用行組時，可以有一個或多個tbody元素，以及一個或沒有thead和tfoot元素。標記用于定義表格最上端的樣式。標記用于定義表格主體的樣式。標記用于定義表尾的樣式。8.4 表格高級標記4.colgroupcolgroup標簽用于對表格中的列進行組合，以便對其進行格式化。如需對全部列應(yīng)用樣式，標簽很有用，這樣就不需要對各個單元和各行重復(fù)應(yīng)用樣式了。 標簽只能在table元素中使用。value為列數(shù)。 8.4 表格高級標記5.colspan,rowspan 在復(fù)雜的

52、表格結(jié)構(gòu)中，有的單元格在水平方向上是跨多個單元格的，這就需要使用跨行屬性rowspan，有的單元格在垂直方向上是跨多個單元格的，這就需要使用跨列屬性colspan。value代表單元格跨的行列數(shù)。8.5 創(chuàng)建高級表格網(wǎng)頁排版有時會很復(fù)雜，在外部需要有一個大的表格來控制總體布局。但是如果一些內(nèi)部排版的細節(jié)也用它來實現(xiàn)，則容易引起行高、列寬的沖突，給表格制作帶來困難。如果利用多個嵌套的表格，外部的大表格負責(zé)整體的布局，內(nèi)部的小表格負責(zé)各個板塊的排版，這樣一來就會各司其職，互不沖突。8.6 綜合實例 第八章本章結(jié)束創(chuàng)建表格 第九章HTML與CSS前臺頁面設(shè)計創(chuàng)建表單 第九章 創(chuàng)建表單 HTML與CS

53、S前臺頁面設(shè)計本章要點常用表單標記的意義及使用表單布局標記的意義及使用第九章 創(chuàng)建表單 HTML與CSS前臺頁面設(shè)計目錄：9.1 表單的作用9.2 表單標記9.3 表單布局標記9.4 綜合實例9.1 表單的作用 HTML中的表單(form)是網(wǎng)頁中最常用的組件，是網(wǎng)站服務(wù)器端與客戶端之間溝通的橋梁。表單在網(wǎng)上隨處可見，它們被用于在登錄頁面輸入用戶名和密碼，對博客進行評論等。9.2 表單標記 1.form 可用標記來定義一個表單，當一個表單被定義后就可在表單內(nèi)放置表單標記。表單使用作為開始標記，以結(jié)尾。在一個HTML頁面中允許有多個表單，以表單的名字（name）和（id）作為它們之間的區(qū)分。表單

54、格式的代碼如下：設(shè)置各種表單標記9.2 表單標記 2.input 最常用的表單控件是input，這一類的表單控件被稱為輸入類控件，通過來標記。輸入類控件有很多種類型，通過type屬性進行設(shè)置。標記可以為表單提供單行文本輸入框、單選按鈕、復(fù)選按鈕、普通按鈕等。9.2 表單標記 3.textarea HTML語言提供了多行文本的輸入框，這是接收大量數(shù)據(jù)的文本區(qū)，它可以用于數(shù)據(jù)的輸入，又可用于數(shù)據(jù)的顯示區(qū)域。實現(xiàn)多行文本輸入?yún)^(qū)的標記為，其語法為：在文本區(qū)中顯示內(nèi)容9.2 表單標記 4. select和option HTML語言支持具有選擇功能的標記。使用選擇功能方便了用戶在多個選項中進行選擇，提高了

55、窗口區(qū)域的利用率。通過對標記的屬性size的值的設(shè)置，可產(chǎn)生不同的列表形式：如下拉列表和滾動列表。對屬性multiple進行設(shè)置，可以使同時選擇多個列表項。標記是定義一個列表結(jié)構(gòu)的標記，列表中的列表項（或稱菜單項）是真正被選擇的對象，對它的定義要用標記。因此，設(shè)置一個列表，要同時使用和標記。option標記 9.2 表單標記 5.optgroup 標記可以對選項進行分組，通過標記可以對選項進行分類，并使用label屬性在下拉列表里顯示為一個不可選的縮進標題。語法如下：9.3 表單布局標記 1.fieldset和legend 標記可將表單內(nèi)的相關(guān)標記分組。當一組表單控件放到標記內(nèi)時，瀏覽器會以特

56、殊方式來顯示它們，它們可能有特殊的邊界、3D效果，甚至可創(chuàng)建一個子表單來處理這些標記。 標記為標記定義標題，且必須在標記中使用。 9.3 表單布局標記 2 . label 可以對form表單中的文本內(nèi)容關(guān)聯(lián)一個標記，并使用標記的for屬性使其與表單組件關(guān)聯(lián)起來，效果為單擊文本是，光標顯示在相關(guān)聯(lián)的表單組件內(nèi)。使用時要將lable綁定到其它的控件，將標記的for屬性設(shè)置為與該控件的id相同。將lable綁定到控件的name屬性沒有作用。語法為：顯示內(nèi)容字符串9.4 綜合實例 創(chuàng)建表單 第九章本章結(jié)束第十章HTML與CSS前臺頁面設(shè)計對表格與表單應(yīng)用CSS樣式 第十章 對表格與表單應(yīng)用CSS樣式

57、HTML與CSS前臺頁面設(shè)計本章要點如何利用CSS樣式構(gòu)建美觀的數(shù)據(jù)表格CSS樣式在表單中的應(yīng)用第十章 對表格與表單應(yīng)用CSS樣式 HTML與CSS前臺頁面設(shè)計目錄：10.1 利用CSS樣式構(gòu)建美觀的數(shù)據(jù)表格10.2 CSS樣式在表單中的應(yīng)用10.3 綜合實例1. 表格標記 （1） 有關(guān)標記包括：， ， ， 等。10.1 利用CSS樣式構(gòu)建美觀的數(shù)據(jù)表格 （2）表格中常用的屬性 包括：邊框?qū)挾取⑦吙蝾伾?、邊框樣?、邊框?qū)傩?、填充間距 、寬度 、高度 、邊框共享等。10.1 利用CSS樣式構(gòu)建美觀的數(shù)據(jù)表格 2.對表格應(yīng)用樣式 包括可以進行下面的一些設(shè)置：（1）表格和單元格寬度 （2）文本對齊

58、 （3）邊框 （4）邊距設(shè)置 （5）背景設(shè)置 （6）標題和表頭的處理 （8）標題擺放 （9）表格行的顏色交替 （10）不完全表格 （11）內(nèi)部表格 （12）按列進行設(shè)置 （13）鼠標動態(tài)效果 10.1 利用CSS樣式構(gòu)建美觀的數(shù)據(jù)表格 1. 表單標記 包括：， ，等。10.2 CSS樣式在表單中的應(yīng)用 2.表單布局 包括可以進行下面的一些設(shè)置：（1）格式對齊 （2）標簽和輸入框分兩行顯示 （3）增加排序 10.2 CSS樣式在表單中的應(yīng)用 3. 修飾表單 在給表單布局后，需要對表單的字體，顏色，邊距等外觀進行設(shè)置，使整個表單看起來更友好。 包括可以進行下面的一些設(shè)置：（1）設(shè)置 （2）設(shè)置標題

59、 （3）設(shè)置強調(diào)信息 （4）設(shè)置提示信息 （5）強調(diào)輸入框 （6）輸入框和按鈕的特殊效果 10.2 CSS樣式在表單中的應(yīng)用 3. 復(fù)雜的表單布局 對于比較長和復(fù)雜的表單，表單上不僅有文本輸入框，還會有單選框、下拉列表等。這個時候在布局的時候要考慮到各種元素的整體排放了。 包括可以進行下面的一些設(shè)置：（1）表單控件分組設(shè)置樣式 （2）隱藏部分標簽 10.2 CSS樣式在表單中的應(yīng)用 10.3 綜合實例 對表格與表單應(yīng)用CSS樣式 第十章本章結(jié)束第十一章HTML與CSS前臺頁面設(shè)計使用CSS樣式完成網(wǎng)頁布局第十一章 使用CSS樣式完成網(wǎng)頁布局HTML與CSS前臺頁面設(shè)計本章要點網(wǎng)頁居中的實現(xiàn)方式

60、基于FLOAT的網(wǎng)頁布局的實現(xiàn)方式圖文混排復(fù)雜布局的的實現(xiàn)方式第十一章 使用CSS樣式完成網(wǎng)頁布局HTML與CSS前臺頁面設(shè)計目錄：11.1 CSS網(wǎng)頁布局介紹11.2 網(wǎng)頁居中11.3 基于FLOAT的網(wǎng)頁布局11.4 復(fù)雜布局11.5 綜合實例1. CSS網(wǎng)頁布局的意義 用CSS進行網(wǎng)頁布局使網(wǎng)站的信息更豐富、網(wǎng)頁表現(xiàn)更美觀，意義體現(xiàn)在如下方面： （1）使頁面載入得更快 （2）修改設(shè)計時更有效率（3）保持一致性（4）對瀏覽者和瀏覽器更具親和力 11.1 CSS網(wǎng)頁布局介紹 2. CSS盒模型 W3C組織建議把所有網(wǎng)頁上的對象都放在一個盒(box)中，可以通過創(chuàng)建定義來控制這個盒的屬性。盒模