網(wǎng)頁設(shè)計(jì)語言HTML

1、第3章 網(wǎng)頁設(shè)計(jì)語言HTML HTML是網(wǎng)頁制作的一種規(guī)范、一種標(biāo)準(zhǔn)。本章介紹了用HTML制作網(wǎng)頁的各種標(biāo)記符的設(shè)置方法，包括網(wǎng)頁數(shù)據(jù)的編輯與格式化、在網(wǎng)頁中使用超鏈接和插入圖片、網(wǎng)頁中的表格設(shè)計(jì)以及表格與文字的混排等。教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)與難點(diǎn)在網(wǎng)頁中使用超鏈接與圖片的編排列表的使用表格與文字的混排3.1 HTML概述 HTML（HyperText Markup Language）超文本標(biāo)記語言，幾乎所有的網(wǎng)頁都是以HTML格式書寫的。 HTML以標(biāo)識(shí)符來標(biāo)識(shí)、排列各對(duì)象。標(biāo)識(shí)符本身以“”標(biāo)識(shí)，標(biāo)識(shí)符內(nèi)的內(nèi)容稱為元素（element），元素代表了標(biāo)識(shí)符的意義，元素是與大小寫無關(guān)的。 用超文

2、本標(biāo)記語言（HTML）編寫的網(wǎng)頁文件其實(shí)只是很平常、很普通的文本文件。可以用你所熟悉的文字編輯器來編輯它，如Edit、Word、寫字板、記事本等，但一定要以純文本方式保存，瀏覽器只能識(shí)別純文本格式的文件。 標(biāo)記HTML的開始，在文件結(jié)束處要有對(duì)應(yīng)的符號(hào)。3.2 網(wǎng)頁數(shù)據(jù)編輯與格式化一、創(chuàng)建HTML文檔1用工具軟件創(chuàng)建HTML文檔 用比較完善的工具軟件來制作網(wǎng)頁，像FronPage2000，Dreamweaver 4等2用編輯工具編寫HTML文檔 EDIT、記事本、寫字板、Word等編輯工具可以用來編輯HTML文檔。二、標(biāo)簽格式 在HTML文件中，重要的文字部分都由“標(biāo)簽”括起來，這樣文字就成了

3、特別的文字，而標(biāo)簽本身則以“”號(hào)標(biāo)識(shí)，標(biāo)簽內(nèi)的內(nèi)容稱為元素，它代表了標(biāo)簽的意義。如： 中南省委宣傳部主頁 括住的文字稱為“內(nèi)容”，整個(gè)標(biāo)簽稱為一個(gè)“元件”。三、標(biāo)題格式 HTML提供六種標(biāo)題格式，其所用的標(biāo)記符為（標(biāo)題n，n=16）， 的字體最大， 的字體最小。其屬性如下：（1）ALIGN=LEFT，CENTER，RIGHT：文字左對(duì)齊（LEFT）、居中（CENTER）或右對(duì)齊（RIGHT）。（2）ID：指定標(biāo)記符的ID選擇器。（3）STYLE：指定標(biāo)記符的樣式表命令。（4）CLASS：指定標(biāo)記符的樣式類型。（5）LANG：指定標(biāo)題文字的語種。（6）DIR：指定標(biāo)題文字的方向。（7）TITLE

4、：指定標(biāo)記符的標(biāo)題。 此外，還有一些鼠標(biāo)操作的屬性。四、段落格式1分段與換行符 分段標(biāo)記符用于將文檔劃分為段落，標(biāo)記符為 要將文字強(qiáng)制換行，而不是另起段落，可以用換行標(biāo)記符BR實(shí)現(xiàn)該功能。注意，BR僅單獨(dú)使用，而非成對(duì)出現(xiàn)。2. 添加水平線 添加水平線的標(biāo)記符為（與BR類似，HR也不包括結(jié)束標(biāo)記符。3. 段落對(duì)齊（1） ALIGN屬性 ALIGN屬性用于設(shè)置段落的對(duì)齊方式，其常見取值有4種：RIGHT（右對(duì)齊）、LEFT（左對(duì)齊）、CENTER（居中對(duì)齊）、JUSTIFY（兩端對(duì)齊）。（2）DIV標(biāo)記符（3）CENTER標(biāo)記符（4）格式的嵌套五、 文字格式1字符格式 通過表3.1的標(biāo)記符設(shè)置字

5、符格式2字體大小、字符顏色和字體樣式（1） SIZE屬性：控制文字的大?。?）COLOR屬性：控制文字的顏色（3）FACE屬性：指定字體樣式六、列表格式1有序列表 定義有序列表需要使用有序列表標(biāo)記符和列表項(xiàng)（List item）標(biāo)記符，語法如下： List item1 List item22無序列表 無序列表標(biāo)記符和列表項(xiàng)標(biāo)記符3定義列表 定義列表的制作需要3個(gè)標(biāo)記符：定義列表標(biāo)記符，用來指定定義列表的開頭與結(jié)尾；定義術(shù)語（Definition term）標(biāo)記符，用來指定第一層數(shù)據(jù)；定義描述標(biāo)記符，用來指定第二層數(shù)據(jù)。標(biāo)記符必須有結(jié)束標(biāo)記，但和標(biāo)記符的結(jié)束標(biāo)記可以省略。3.3 在網(wǎng)頁中建立超鏈

6、接一、超鏈接標(biāo)記符 創(chuàng)建一個(gè)超鏈接需要使用標(biāo)記符，A是Anchor的首字母，標(biāo)記符的最基本屬性是HREF，用于指定鏈接到的文件位置。 其他屬性見教材。二、創(chuàng)建超鏈接1指向本地網(wǎng)頁的鏈接：絕對(duì)URL2 鏈接至位于相同文件夾的文件： 相對(duì)URL方式3鏈接至位于不同文件夾的文件4指向其他網(wǎng)頁的鏈接，如： 我要上網(wǎng)易5頁面的特定部分鏈接6連接至E-mail地址的超鏈接3.4 在網(wǎng)頁中插入圖片一、插入圖片 用標(biāo)記符在HTML文件中插入圖片，標(biāo)記符常用的屬性見教材。二、圖片布局 可以使用HEIGHT、WIDTH、BORDER屬性指定圖片的高度、寬度以及是否具有框線。1圖片的高度、寬度 ，如： 圖片的邊框

7、還可以用標(biāo)記符的SOLID屬性設(shè)置邊框顏色，格式。3. 圖片的對(duì)齊方式 圖片的對(duì)齊是指圖片本身在頁面中的對(duì)齊和圖片與文本的對(duì)齊。3.5 表格設(shè)計(jì)一、創(chuàng)建基本表格 可以用標(biāo)記符創(chuàng)建一個(gè)表格，并在它的中間加入標(biāo)題和需要的數(shù)據(jù)。表格定義的代碼為： 具體表格內(nèi)容 1. 表格的標(biāo)題元素定義了表格的說明。如： 在這里輸入標(biāo)題 行里的內(nèi)容 標(biāo)題的屬性ALIGN決定了標(biāo)題的對(duì)齊方式。TOP是將標(biāo)題放在表格的頂部，BOTTOM將標(biāo)題放在表格的下面。2. 行、表頭和數(shù)據(jù) 定義一個(gè)表格，需從第一行逐級(jí)向下，并且按行中單元格的順序開始定義。行、表頭和數(shù)據(jù)定義的代碼為： 表頭 數(shù)據(jù) 二、 表格及文字的對(duì)齊與布局1表格在

8、頁面中的對(duì)齊 利用表格的ALIGN屬性，可以將表格顯示在頁面的左邊或右邊。如果沒有設(shè)置這一屬性，表格單獨(dú)顯示為頁面的一行，在頁面的左側(cè)。ALIGN=”LEFT”將表格按左邊對(duì)齊，而表格的所有文本顯示在表格右側(cè)和頁面之間的位置。ALIGN=”RIGHT”將表格按右邊對(duì)齊，文本顯示在表格的左側(cè)。2. 表格內(nèi)數(shù)據(jù)的對(duì)齊 ALIGN屬性為單元格數(shù)據(jù)提供水平對(duì)齊方式，該屬性有LEFT（左對(duì)齊）、RIGHT（右對(duì)齊）、CENTER（居中）3個(gè)值。VALIGN屬性定義單元格數(shù)據(jù)的垂直對(duì)齊方式，該屬性有TOP（頂部對(duì)齊）、BOTTOM（底部對(duì)齊）、MIDDLE（中間對(duì)齊）3個(gè)值。三、設(shè)置表格尺寸 設(shè)置表格邊框

9、尺寸 利用的BORDER屬性可以設(shè)置表格邊框的尺寸，它以指定的粗度來顯示表格邊框。如： 2. 設(shè)置表格尺寸 利用的WIDTH和HEIGHT屬性可以設(shè)置表格尺寸。如： 3. 設(shè)置表元間隙 利用標(biāo)記符的CELLSPACING屬性可以設(shè)置表元的間隙。如： 4. 設(shè)置表元內(nèi)部空白 利用標(biāo)記符中的CELLPDDING屬性來，以像素為單位來設(shè)置它的值。如： 四、設(shè)置表格的色彩 設(shè)置表格、行或行中單元的相關(guān)顏色，可以在、和標(biāo)記符里使用BGCOLOR、BORDERCOLOR、BORDERCOLORLIGHT、BORDERCOLORDARK等屬性。 COLOR的值可以是以十六進(jìn)制表示的顏色，或者是16種顏色（BLACK、WHITE、GREEN、MAROON、OLIVE、MAVY、PURPLE、G