預(yù)備知識(shí)：HTML網(wǎng)頁設(shè)計(jì)基礎(chǔ).ppt

1、HTML網(wǎng)頁設(shè)計(jì)基礎(chǔ),1 認(rèn)識(shí)和使用HTML2 HTML常用標(biāo)記3 HTML表單標(biāo)記4 用 FrontPage設(shè)計(jì)HTML,1 認(rèn)識(shí)和使用HTML,1.1 什么是HTML HTML使用各種不同的標(biāo)記符號(hào)來分別標(biāo)識(shí)和設(shè)定不同的網(wǎng)頁元素。 每一個(gè)網(wǎng)頁元素通常由開始標(biāo)記、結(jié)束標(biāo)記，以及夾在這兩個(gè)標(biāo)記中的內(nèi)容所組成。 一個(gè)HTML元素的形式可表示為： 內(nèi)容 ,說明：,也可以在之間使用標(biāo)記； 不區(qū)分大小寫； 連續(xù)的空格、Tab鍵只當(dāng)成一個(gè)空格； 可以使用注釋； Html文檔中的錯(cuò)誤會(huì)跳過不予理會(huì)； 各元素可以嵌套不可以交錯(cuò)。,需要區(qū)分大小寫嗎？ 整個(gè)Html文件可以在一行中書寫嗎？ 一個(gè)標(biāo)識(shí)可以在多行中

2、書寫嗎？ 屬性之間有次序要求嗎？,1.2 HTML文檔基本架構(gòu) 網(wǎng)頁標(biāo)題 這是正文部分！ ,1.3 創(chuàng)建一個(gè)簡(jiǎn)單的HTML文檔,圖 創(chuàng)建一個(gè)簡(jiǎn)單HTML文檔,圖 執(zhí)行結(jié)果,2 HTML常用標(biāo)記,2.1 段落標(biāo)記 1標(biāo)題標(biāo)記 格式： 標(biāo)題文字 ,說明：標(biāo)記符用于定義段落標(biāo)題的大小級(jí)數(shù)。 最大是 ，最小。 align屬性可控制文字的對(duì)齊方式，值可以是left，center，或者right。,h1,h6,2.1 段落類標(biāo)記,2分段標(biāo)記 格式： 文字 ,說明：標(biāo)記符用于劃分段落。 是成對(duì)標(biāo)記符，用于定義內(nèi)容從新的一行開始，并與上段之間有一個(gè)空行。,3換行標(biāo)記 格式： 文字 ,說明：標(biāo)記符用于定義從新的

3、一行顯示，它不產(chǎn)生一個(gè)空行，但連續(xù)多個(gè)標(biāo)記可以產(chǎn)生多個(gè)空行的效果。 標(biāo)記符是非成對(duì)標(biāo)記符。,4橫線標(biāo)記 格式： 說明：hr標(biāo)記為非成對(duì)標(biāo)記。,2.2 文字格式標(biāo)記 1字體標(biāo)記 格式： 文字,2空格用“”表示。,（1）face屬性：定義字體，如face=“隸書”。 （2）size屬性：定義大小，屬性值為17，也可以使用相對(duì)大小來設(shè)置，如size=“+5”、 size=“-5”。 （3）color屬性。定義顏色，可用英文來表示，如： color=“red”；也可使用16進(jìn)制的RGB來表示， color=“#FF0000”。 此外，字體標(biāo)記符還包括粗體標(biāo)記符、斜體標(biāo)記符等。,2.3 列表標(biāo)記 1無序

4、列表標(biāo)記 格式： 列表項(xiàng)1列表項(xiàng)2列表項(xiàng)n 說明：disk （默認(rèn)）、 square 、circle , 花語 各種花所代表的含義如下： 玫瑰：純潔的愛 劍蘭：用心堅(jiān)固 滿天星：愛憐 紫羅蘭：永恒之美 勿忘我：愛到永遠(yuǎn) ,2有序列表標(biāo)記 格式： 列表項(xiàng)1列表項(xiàng)2列表項(xiàng)n 說明：type的值為：1、a、A、i、I。,2.4 表格標(biāo)記 格式： 文字文字 d11d12 d21d22 ,2 HTML常用標(biāo)記,2.5 超鏈接標(biāo)記 格式： 用作超鏈接的文字或圖像,2 HTML常用標(biāo)記,標(biāo)記符是成對(duì)標(biāo)記符，主要屬性有： （1）href。鏈接文件的地址。 （2）target。鏈接目標(biāo)的位置。 1.指向電子郵件

5、的鏈接 與我聯(lián)系 2.指向站內(nèi)文件的鏈接 花節(jié) 3.指向其他網(wǎng)址的鏈接 友情鏈接,2.6 圖像標(biāo)記 格式： 非成對(duì)。 HTML 和 XHTML 標(biāo)準(zhǔn)指定了 5 種圖像對(duì)齊屬性值：left、right、top 、middle 和 bottom。 Netscape 又增加了 4 種垂直對(duì)齊屬性：texttop、absmiddle、baseline 和 absbottom，Internet Explorer 則增加了 center。 注意：不同的瀏覽器以及同一瀏覽器的不同版本對(duì) align 屬性的某些值的處理方式是不同的。 注意：HTML 4.01 不推薦使用 align 屬性，XHTML 1.0

6、Strict DTD 不支持該屬性，同時(shí) HTML 5 也不再支持該屬性。,2 HTML常用標(biāo)記,3 HTML表單標(biāo)記,3.1 表單定義格式 格式： ,表單的制作及注意事項(xiàng)： Method屬性：指定表單中信息傳送給Web應(yīng)用程序時(shí)所采用的方式。 Get：把信息作為字符串附加在URL后面。此方式傳送信息量小，且以明文顯示，保密性差。 Post：把表單中的所有信息進(jìn)行包裝后再傳送，不受長(zhǎng)度限制，且以密文顯示，保密性好。,表單的制作及注意事項(xiàng)： Action屬性：指明表單提交后將激活的處理程序。 action屬性值： 提交后將數(shù)據(jù)寫入E-mail： 提交后交數(shù)據(jù)寫入某ASP文件 ,3.2 常用表單域標(biāo)記 1標(biāo)記 格式： ,1.文本框：2.密碼框：3.復(fù)選框： 4.單選按鈕： 5.按鈕 ,2標(biāo)記 格式： 文字 文字 ,3標(biāo)記 格式： ,同一表單中所有字段的名稱必須以英文命名且不得重復(fù)，這個(gè)名稱將用于后端處理。,3.3 表單制作舉例,圖 表單范例執(zhí)行結(jié)果,3.4 用 FrontPage設(shè)計(jì)HTML,3.4.1 FrontPage工作窗口 1普通方式 2HTML方式 3預(yù)覽方式,3.4.2 網(wǎng)頁制作基礎(chǔ) 1利用模板創(chuàng)建網(wǎng)頁