預備知識：HTML網頁設計基礎.ppt

HTML網頁設計基礎,1 認識和使用HTML 2 HTML常用標記 3 HTML表單標記 4 用 FrontPage設計HTML,1 認識和使用HTML,1.1 什么是HTML HTML使用各種不同的標記符號來分別標識和設定不同的網頁元素。 每一個網頁元素通常由開始標記、結束標記，以及夾在這兩個標記中的內容所組成。 一個HTML元素的形式可表示為： 內容 ,說明：,也可以在之間使用標記； 不區(qū)分大小寫； 連續(xù)的空格、Tab鍵只當成一個空格； 可以使用注釋； Html文檔中的錯誤會跳過不予理會； 各元素可以嵌套不可以交錯。,需要區(qū)分大小寫嗎？ 整個Html文件可以在一行中書寫嗎？ 一個標識可以在多行中書寫嗎？ 屬性之間有次序要求嗎？,1.2 HTML文檔基本架構 網頁標題 這是正文部分！ ,1.3 創(chuàng)建一個簡單的HTML文檔,圖 創(chuàng)建一個簡單HTML文檔,圖 執(zhí)行結果,2 HTML常用標記,2.1 段落標記 1標題標記 格式： 標題文字 ,說明：標記符用于定義段落標題的大小級數(shù)。 最大是 ，最小。 align屬性可控制文字的對齊方式，值可以是left，center，或者right。,h1,h6,2.1 段落類標記,2分段標記 格式： 文字 ,說明：標記符用于劃分段落。 是成對標記符，用于定義內容從新的一行開始，并與上段之間有一個空行。,3換行標記 格式： 文字 ,說明：標記符用于定義從新的一行顯示，它不產生一個空行，但連續(xù)多個標記可以產生多個空行的效果。 標記符是非成對標記符。,4橫線標記 格式： 說明：hr標記為非成對標記。,2.2 文字格式標記 1字體標記 格式： 文字,2空格用“”表示。,（1）face屬性：定義字體，如face=“隸書”。 （2）size屬性：定義大小，屬性值為17，也可以使用相對大小來設置，如size=“+5”、 size=“-5”。 （3）color屬性。定義顏色，可用英文來表示，如： color=“red”；也可使用16進制的RGB來表示， color=“#FF0000”。 此外，字體標記符還包括粗體標記符、斜體標記符等。,2.3 列表標記 1無序列表標記 格式： 列表項1 列表項2 列表項n 說明：disk （默認）、 square 、circle , 花語 各種花所代表的含義如下： 玫瑰：純潔的愛 劍蘭：用心堅固 滿天星：愛憐 紫羅蘭：永恒之美 勿忘我：愛到永遠 ,2有序列表標記 格式： 列表項1 列表項2 列表項n 說明：type的值為：1、a、A、i、I。,2.4 表格標記 格式： 文字文字 d11d12 d21d22 ,2 HTML常用標記,2.5 超鏈接標記 格式： 用作超鏈接的文字或圖像,2 HTML常用標記,標記符是成對標記符，主要屬性有： （1）href。鏈接文件的地址。 （2）target。鏈接目標的位置。 1.指向電子郵件的鏈接 與我聯(lián)系 2.指向站內文件的鏈接 花節(jié) 3.指向其他網址的鏈接 友情鏈接,2.6 圖像標記 格式： 非成對。 HTML 和 XHTML 標準指定了 5 種圖像對齊屬性值：left、right、top 、middle 和 bottom。 Netscape 又增加了 4 種垂直對齊屬性：texttop、absmiddle、baseline 和 absbottom，Internet Explorer 則增加了 center。 注意：不同的瀏覽器以及同一瀏覽器的不同版本對 align 屬性的某些值的處理方式是不同的。 注意：HTML 4.01 不推薦使用 align 屬性，XHTML 1.0 Strict DTD 不支持該屬性，同時 HTML 5 也不再支持該屬性。,2 HTML常用標記,3 HTML表單標記,3.1 表單定義格式 格式： ,表單的制作及注意事項： Method屬性：指定表單中信息傳送給Web應用程序時所采用的方式。 Get：把信息作為字符串附加在URL后面。此方式傳送信息量小，且以明文顯示，保密性差。 Post：把表單中的所有信息進行包裝后再傳送，不受長度限制，且以密文顯示，保密性好。,表單的制作及注意事項： Action屬性：指明表單提交后將激活的處理程序。 action屬性值： 提交后將數(shù)據(jù)寫入E-mail： 提交后交數(shù)據(jù)寫入某ASP文件 ,3.2 常用表單域標記 1標記 格式： ,1.文本框： 2.密碼框： 3.復選框： 4.單選按鈕： 5.按鈕 ,2標記 格式： 文字 文字 ,3標記 格式： ,同一表單中所有字段的名稱必須以英文命名且不得重復，這個名稱將用于后端處理。,3.3 表單制作舉例,圖 表單范例執(zhí)行結果,3.4 用 FrontPage設計HTML,3.4.1 FrontPage工作窗口 1普通方式 2HTML方式 3預覽方式,3.4.2 網頁制作基礎 1利用模板創(chuàng)建網