網(wǎng)站開(kāi)發(fā)與網(wǎng)頁(yè)設(shè)計(jì) HTML入門學(xué)習(xí)_第1頁(yè)
網(wǎng)站開(kāi)發(fā)與網(wǎng)頁(yè)設(shè)計(jì) HTML入門學(xué)習(xí)_第2頁(yè)
網(wǎng)站開(kāi)發(fā)與網(wǎng)頁(yè)設(shè)計(jì) HTML入門學(xué)習(xí)_第3頁(yè)
網(wǎng)站開(kāi)發(fā)與網(wǎng)頁(yè)設(shè)計(jì) HTML入門學(xué)習(xí)_第4頁(yè)
網(wǎng)站開(kāi)發(fā)與網(wǎng)頁(yè)設(shè)計(jì) HTML入門學(xué)習(xí)_第5頁(yè)
已閱讀5頁(yè),還剩92頁(yè)未讀 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、找到文件所在位置后確定找到啦例如:背景變啦記事本寫(xiě)入語(yǔ)句在IE中刷新width:水平線長(zhǎng)度:水平線長(zhǎng)度color:水平線顏色:水平線顏色noshade:3d陰影陰影size:水平線的粗細(xì):水平線的粗細(xì)(4)顯示特殊字符LI屬性VALUE :指定一個(gè)新的數(shù)字序列起始值指定一個(gè)新的數(shù)字序列起始值TYPE: 取值同上取值同上START: 取值為任意整數(shù)取值為任意整數(shù)TYPE: 取值取值TYPE: 取值取值舉例結(jié)果定義列表 -定義列表標(biāo)記符 - 定義術(shù)語(yǔ)標(biāo)記符 (結(jié)束標(biāo)記可省略) -描述標(biāo)記符 (結(jié)束標(biāo)記可省略)定義列表通常用于定義術(shù)語(yǔ),也可用于所排文檔。1. 插入圖像插入圖像 在在HTML中,使用中

2、,使用IMG標(biāo)記符可以在網(wǎng)頁(yè)中加入圖像。它具有兩個(gè)基標(biāo)記符可以在網(wǎng)頁(yè)中加入圖像。它具有兩個(gè)基本屬性:本屬性:src和和alt,分別用于設(shè)置圖像文件的位置和替換文本。,分別用于設(shè)置圖像文件的位置和替換文本。2設(shè)置圖像屬性設(shè)置圖像屬性(1)指定圖像的寬和高)指定圖像的寬和高 在在HTML中,使用中,使用IMG標(biāo)記符的標(biāo)記符的width和和height屬性可以指定圖像的寬屬性可以指定圖像的寬度和寬度,以告訴瀏覽器度和寬度,以告訴瀏覽器Web頁(yè)應(yīng)分配給圖像多少空間(以像素為單頁(yè)應(yīng)分配給圖像多少空間(以像素為單位)。位)。 (2)圖像的邊框)圖像的邊框 使用使用IMG標(biāo)記符的標(biāo)記符的border屬性,可

3、以給圖像添加邊框效果,邊框的取值屬性,可以給圖像添加邊框效果,邊框的取值是像素?cái)?shù)。是像素?cái)?shù)。 在網(wǎng)頁(yè)中插入圖象格式:例如:結(jié)果圖象布局(1)指定圖像的高和寬格式: X、Y可取像素?cái)?shù),也可取百分?jǐn)?shù) (注意百分?jǐn)?shù)加引號(hào)) 圖片寬度圖片高度 使用表格1創(chuàng)建表格HTML表格模型使用戶可以將各種數(shù)據(jù)(文本、圖像、鏈接、表單、表單域以及其它表格)排成行列,獲得特定效果,利用利用HTML處理網(wǎng)頁(yè)表格處理網(wǎng)頁(yè)表格 1表格的基本構(gòu)成表格的基本構(gòu)成 通常在通常在HTML中創(chuàng)建一個(gè)普通的表格應(yīng)包括以下標(biāo)記符:中創(chuàng)建一個(gè)普通的表格應(yīng)包括以下標(biāo)記符:(1)TABLE TABLE標(biāo)記符用于定義整個(gè)表格標(biāo)記符用于定義整個(gè)表

4、格,表格內(nèi)的所有內(nèi)容都應(yīng),表格內(nèi)的所有內(nèi)容都應(yīng)該位于該位于和和之間。之間。(2)CAPTION 如果表格需要標(biāo)題,那么就應(yīng)該使用如果表格需要標(biāo)題,那么就應(yīng)該使用CAPTION標(biāo)記符將標(biāo)記符將表格標(biāo)題表格標(biāo)題包括在包括在和和之間。之間。 (3)TR TR標(biāo)記符用于定義表格的行標(biāo)記符用于定義表格的行,對(duì)于每一個(gè)表格行,都對(duì)應(yīng),對(duì)于每一個(gè)表格行,都對(duì)應(yīng)一個(gè)一個(gè)TR標(biāo)記符。標(biāo)記符。TR標(biāo)記符的結(jié)束標(biāo)記符可以省略。標(biāo)記符的結(jié)束標(biāo)記符可以省略。圖像鏈接 超鏈接不僅可以用文本作為鏈接源,還可以使用圖像作為鏈接源,方法是用A標(biāo)記符將IMG標(biāo)記符包圍起來(lái),當(dāng)用戶單擊該圖像時(shí),跳轉(zhuǎn)到指定位置。例如: (4)TD和

5、和TH 在表格行中的每個(gè)單元格,都對(duì)應(yīng)于一個(gè)在表格行中的每個(gè)單元格,都對(duì)應(yīng)于一個(gè)TD標(biāo)記標(biāo)記符或者符或者TH標(biāo)記符,用于標(biāo)記表格的內(nèi)容,其中可以包標(biāo)記符,用于標(biāo)記表格的內(nèi)容,其中可以包括文字、圖像或其他對(duì)象。括文字、圖像或其他對(duì)象。TD與與TH的功能和用法幾乎的功能和用法幾乎完全相同(可以任意混合使用,但效果略有不同),完全相同(可以任意混合使用,但效果略有不同),唯一不同之處在于唯一不同之處在于TD表示表格所對(duì)應(yīng)的列數(shù)和向?qū)?yīng)表示表格所對(duì)應(yīng)的列數(shù)和向?qū)?yīng)的單元格,而的單元格,而TH表示表格的標(biāo)題行。表示表格的標(biāo)題行。例如:例如:結(jié)果說(shuō)明(1)為定義表格的標(biāo)記符,表格的所有內(nèi)容都放在它們之間。

6、(2) 為定義表格標(biāo)題,ALIGN屬性定義標(biāo)題的位置。 TOP-標(biāo)題放在表格的上部 BOTTOM-標(biāo)題放在表格的下部 RIGHT-標(biāo)題放在表格的上部右側(cè) LEFT-標(biāo)題放在表格的上部左側(cè)(3)定義表頭項(xiàng) 結(jié)束符可省略合并單元格合并單元格 在在和和標(biāo)記內(nèi)使用標(biāo)記內(nèi)使用rowspan屬性可以進(jìn)行行合并,屬性可以進(jìn)行行合并,rowspan的取值表示垂直方向上合并的行數(shù)的取值表示垂直方向上合并的行數(shù);使用;使用colspan屬性屬性可以進(jìn)行列合并,可以進(jìn)行列合并, colspan的取值表示水平方向上的合并的列的取值表示水平方向上的合并的列數(shù)。數(shù)。 (2)邊框與分隔線)邊框與分隔線 在在TABLE標(biāo)記內(nèi)

7、使用標(biāo)記內(nèi)使用frame、rules和和border屬性可以設(shè)置屬性可以設(shè)置表格的邊框和單元格分隔線。表格的邊框和單元格分隔線。(3)控制單元格空白)控制單元格空白 在在TABLE標(biāo)記符中使用標(biāo)記符中使用cellspacing屬性可以控制單元格之屬性可以控制單元格之間的空白,間的空白, 定義表項(xiàng) 結(jié)束符可省略定義表行開(kāi)始, 結(jié)束符可省略表格的行與列(1)行合并和標(biāo)記內(nèi)使用ROWSPAN屬性進(jìn)行行合并,格式為: 表項(xiàng) X 為縱方向上合并的行數(shù)。(2)列合并和標(biāo)記內(nèi)使用COLSOAN屬性進(jìn)行列合并,格式為: 表數(shù)據(jù)項(xiàng) Y 為水平方向上合并的列數(shù)。3例如:圖片與多媒體圖片與多媒體1. 插入圖像插入圖

8、像 在在HTML中,使用中,使用IMG標(biāo)記符可以在網(wǎng)頁(yè)中加入圖像。它標(biāo)記符可以在網(wǎng)頁(yè)中加入圖像。它具有兩個(gè)基本屬性:具有兩個(gè)基本屬性:src和和alt,分別用于設(shè)置圖像文件的位置和,分別用于設(shè)置圖像文件的位置和替換文本。替換文本。2設(shè)置圖像屬性設(shè)置圖像屬性(1)指定圖像的寬和高)指定圖像的寬和高 在在HTML中,使用中,使用IMG標(biāo)記符的標(biāo)記符的width和和height屬性可以屬性可以指定圖像的寬度和寬度,以告訴瀏覽器指定圖像的寬度和寬度,以告訴瀏覽器Web頁(yè)應(yīng)分配給圖像多頁(yè)應(yīng)分配給圖像多少空間(以像素為單位)。少空間(以像素為單位)。 (2)圖像的邊框)圖像的邊框 使用使用IMG標(biāo)記符的標(biāo)

9、記符的border屬性,可以給圖像添加邊框效果,屬性,可以給圖像添加邊框效果,邊框的取值是像素?cái)?shù)。邊框的取值是像素?cái)?shù)。 (3)圖像和文字的距離圖像和文字的距離 #=value例如例如:ALIGN屬性圖像和文本混排時(shí),圖像和文本的相對(duì)位置可使用IMG的ALIGN屬性.Top. Middle. Buttom 文字位置向上對(duì)齊,居中對(duì)齊,向下對(duì)齊。Left . Right 文字位置相左對(duì)齊,相右對(duì)齊。結(jié)果圖象布局(1)指定圖像的高和寬格式: X、Y可取像素?cái)?shù),也可取百分?jǐn)?shù) (注意百分?jǐn)?shù)加引號(hào)) 圖片寬度圖片高度在網(wǎng)頁(yè)中插入圖象格式:例如:背景音樂(lè)背景音樂(lè) #=WAV 文件的文件的 URL #=循環(huán)數(shù)

10、循環(huán)數(shù)插入視頻剪輯插入視頻剪輯 用 url.avi 這一 AVI(Video for MSWINDOWS) 文件來(lái)播放視頻;用 url.gif 這一 GIF 圖象作為視頻的封面,即:在瀏覽器尚未完全讀入 AVI 文件時(shí),先在 AVI 播放區(qū)域顯示該圖象。 循環(huán)播放循環(huán)播放 將循環(huán)播放不止。 延時(shí)延時(shí) #=毫秒數(shù)毫秒數(shù) 何時(shí)開(kāi)始播放何時(shí)開(kāi)始播放 AVI #=fileopen, mouseover缺省值是 #=fileopen,即在鏈接到含本標(biāo)記的頁(yè)面(如本頁(yè))時(shí)開(kāi)始播放 AVI。 mouseover 是指您把鼠標(biāo)移到 AVI 播放區(qū)域之上時(shí)才開(kāi)始播放 AVI。 也可以兩者同時(shí)設(shè)置: 另外,用鼠標(biāo)

11、在 AVI 播放區(qū)域點(diǎn)擊一下,也將令瀏覽器開(kāi)始播放該 AVI。 RIGHT:右對(duì)齊LEFT :左對(duì)齊CENTER:居中對(duì)齊JUSTIFY:兩端對(duì)齊ALIGN屬性ALIGN屬性可用于多種標(biāo)記符,最典型的是應(yīng)用于DIV P Hn HR中。圖像和文字的距離圖像和文字的距離 #=value例如例如:4 圖像的邊框可以在可以在IMG標(biāo)記符內(nèi)使用屬性標(biāo)記符內(nèi)使用屬性hspace和和vspace設(shè)置圖像周圍空設(shè)置圖像周圍空白,其中白,其中hspace示水平方向的空白,示水平方向的空白,vspace表示垂直方向的空表示垂直方向的空白,它們的取值都是像素?cái)?shù)。白,它們的取值都是像素?cái)?shù)。 (4)圖像的對(duì)齊)圖像的對(duì)

12、齊 圖像在頁(yè)面中的對(duì)齊圖像在頁(yè)面中的對(duì)齊 設(shè)置圖像在頁(yè)面中的對(duì)齊與設(shè)置文本對(duì)齊類似,可以使用設(shè)置圖像在頁(yè)面中的對(duì)齊與設(shè)置文本對(duì)齊類似,可以使用DIV或或P標(biāo)記符將標(biāo)記符將IMG標(biāo)記符括起來(lái),然后使用標(biāo)記符括起來(lái),然后使用align屬性。屬性。 圖像與周圍內(nèi)容的垂直對(duì)齊圖像與周圍內(nèi)容的垂直對(duì)齊 使用使用IMG標(biāo)記符的標(biāo)記符的align屬性,可以控制圖像與周圍內(nèi)屬性,可以控制圖像與周圍內(nèi)容的垂直對(duì)齊。容的垂直對(duì)齊。 圖文混排時(shí)的圖像對(duì)齊圖文混排時(shí)的圖像對(duì)齊 如果要在圖像的左、右環(huán)繞文字,也應(yīng)該使用如果要在圖像的左、右環(huán)繞文字,也應(yīng)該使用IMG標(biāo)記標(biāo)記符的符的align屬性。屬性。 格式 : X值設(shè)

13、置水平方向的空白,Y值設(shè)置垂直方向的空白,單位為像素?cái)?shù)。例如:結(jié)果圖像在頁(yè)面的對(duì)齊 設(shè)置圖像在頁(yè)面的對(duì)齊與設(shè)置文本對(duì)齊類似,可以使用DIV或P標(biāo)記符的ALIGN屬性. 結(jié)果ALIGN屬性圖像和文本混排時(shí),圖像和文本在垂直方向的對(duì)齊可使用IMG的ALIGN屬性,.結(jié)果 使用超鏈接URL (Universal Resource Locator) 它包括3部分:一個(gè)協(xié)議代碼;一個(gè)裝有所需文件的計(jì)算機(jī)地址(或一個(gè)電子郵件地址或是新聞組件名稱)以及包含有信息的文件地址和文件名。 絕對(duì)URL是指internet上資源的完整地址,包括協(xié)議種類,、計(jì)算機(jī)域名和包含路徑的文檔名。其形式為: 協(xié)議:/計(jì)算機(jī)域名/

14、文檔名例如:HTTP:/WWW 就是一個(gè)相對(duì)的URL創(chuàng)建超鏈接指向本地網(wǎng)頁(yè)的鏈接格式 超鏈接 注意:網(wǎng)頁(yè)文件不在同一目錄下要寫(xiě)明路徑名。(2)指向其它網(wǎng)頁(yè)的鏈接如果超鏈接指向的內(nèi)容是外部網(wǎng)頁(yè),則應(yīng)使用絕對(duì)的URL例如 微軟站點(diǎn) (3)指向網(wǎng)頁(yè)中特點(diǎn)部分的鏈接除了可以對(duì)不同頁(yè)面進(jìn)行鏈接以外,用戶可以對(duì)同一頁(yè)面的不同部分進(jìn)行鏈接。例如:可以在長(zhǎng)文檔的頂部或底部以超鏈接的方式顯示一個(gè)目錄,并在頁(yè)面的底部放一個(gè)返回頂部的鏈接。方法為:在需要跳轉(zhuǎn)的位置放置A標(biāo)記符,并用NAME進(jìn)行命名(錨點(diǎn))但在標(biāo)記之間不用任何文字。例如:在頁(yè)面的開(kāi)始處用下列語(yǔ)句進(jìn)行標(biāo)記:對(duì)頁(yè)面進(jìn)行標(biāo)記之后,就可以用A標(biāo)記符設(shè)置指向這

15、些標(biāo)記位置的鏈接。對(duì)上面的語(yǔ)句可以用:此處返回頁(yè)面頂部注意: 對(duì)錨點(diǎn)鏈接,應(yīng)使用符號(hào)。當(dāng)用戶在瀏覽器中單擊文字“此處”時(shí),將顯示以標(biāo)記開(kāi)始的頁(yè)面部分。我們可以簡(jiǎn)單地記住:表示單擊標(biāo)記,表示單擊后訪問(wèn)地頁(yè)面部分。同樣, 用戶也可以在不同的頁(yè)面設(shè)置錨點(diǎn),然后在A標(biāo)記符的HREF屬性中添加頁(yè)面地址或頁(yè)面名稱,并添加標(biāo)記,從而與另一個(gè)頁(yè)面中的命名錨點(diǎn)進(jìn)行鏈接。例如: 圖像與超鏈接 在超鏈接中,鏈接對(duì)象既可以是網(wǎng)頁(yè)文件,也可以是圖像文件、文本文件、聲音文件或視頻文件。1 鏈接到圖像請(qǐng)單擊此處以顯示圖像。 圖像、文本、聲音文件或視頻文件利用利用HTML創(chuàng)建表單,這樣創(chuàng)建的表單通常由兩類元素構(gòu)成,創(chuàng)建表單,

16、這樣創(chuàng)建的表單通常由兩類元素構(gòu)成,一是普通的頁(yè)面元素,例如表格、圖像、文字等,二是用于接一是普通的頁(yè)面元素,例如表格、圖像、文字等,二是用于接收信息的特定頁(yè)面元素,也就是所謂的表單控件。收信息的特定頁(yè)面元素,也就是所謂的表單控件。 1表單標(biāo)記符表單標(biāo)記符 HTML中表單標(biāo)記符為中表單標(biāo)記符為FORM,其主要作用是設(shè)定表單的,其主要作用是設(shè)定表單的起止位置,并指定處理表單數(shù)據(jù)程序的起止位置,并指定處理表單數(shù)據(jù)程序的URL地址。地址。 2表單輸入標(biāo)記符表單輸入標(biāo)記符 INPUT是表單輸入標(biāo)記符,在表單創(chuàng)建中使用頻繁,大部是表單輸入標(biāo)記符,在表單創(chuàng)建中使用頻繁,大部分表單內(nèi)容需要用到此標(biāo)記符。分表單

17、內(nèi)容需要用到此標(biāo)記符。 3控件定義方法控件定義方法(1)文本框和口令框)文本框和口令框 創(chuàng)建單行文本框的基本語(yǔ)法如下:創(chuàng)建單行文本框的基本語(yǔ)法如下:Type=text/password/checkbox/redio/submit/file/hidden/image/button此屬性指定要?jiǎng)?chuàng)建的控件類型,默認(rèn)值是text,即創(chuàng)建單行文本框(4)復(fù)選框與單選框(5)文件選擇框文件選擇框”格式為: 程序代碼:瀏覽器中顯示結(jié)果:(7) 創(chuàng)建普通按鈕在HTML中,網(wǎng)頁(yè)設(shè)計(jì)者可以使用BUTTON標(biāo)記符創(chuàng)建三種按鈕提交 submit重置 reset普通 button格式為: 片的同時(shí)顯示文本(只有將相關(guān)信

18、息包含在與內(nèi)即可。例如:結(jié)果如下:(8)創(chuàng)建選項(xiàng)菜單)創(chuàng)建選項(xiàng)菜單要?jiǎng)?chuàng)建選項(xiàng)菜單,應(yīng)在要?jiǎng)?chuàng)建選項(xiàng)菜單,應(yīng)在FORM標(biāo)記符中插入標(biāo)記符中插入SELECT標(biāo)記,并將標(biāo)記,并將每個(gè)可獨(dú)立選用的項(xiàng)用一個(gè)每個(gè)可獨(dú)立選用的項(xiàng)用一個(gè)OPTION標(biāo)記標(biāo)出來(lái)。格式為:標(biāo)記標(biāo)出來(lái)。格式為: SELECT 標(biāo)記符屬性:標(biāo)記符屬性:Name: 此屬性指定控件名此屬性指定控件名Sizenumber 此屬性指定選項(xiàng)菜單中一次顯示多少行此屬性指定選項(xiàng)菜單中一次顯示多少行Multiple:如設(shè)置了此布爾屬性,則允許用戶選擇多個(gè)選項(xiàng),否:如設(shè)置了此布爾屬性,則允許用戶選擇多個(gè)選項(xiàng),否則,僅允許選擇一個(gè)選項(xiàng)。則,僅允許選擇一個(gè)選

19、項(xiàng)。OPTION屬性:屬性:Selected: 如果設(shè)置了此布爾屬性,則說(shuō)明當(dāng)前選項(xiàng)為預(yù)先選如果設(shè)置了此布爾屬性,則說(shuō)明當(dāng)前選項(xiàng)為預(yù)先選中的。中的。Value :指定控件的初始值。如沒(méi)有設(shè)置此屬性,則控件的初:指定控件的初始值。如沒(méi)有設(shè)置此屬性,則控件的初始值為始值為OPTION標(biāo)記符中包含的內(nèi)容。標(biāo)記符中包含的內(nèi)容。Labeltext 此屬性使網(wǎng)頁(yè)設(shè)計(jì)者可以為選項(xiàng)指定一個(gè)標(biāo)簽。此屬性使網(wǎng)頁(yè)設(shè)計(jì)者可以為選項(xiàng)指定一個(gè)標(biāo)簽。當(dāng)當(dāng)使用此屬性時(shí),瀏覽器將采用此屬性的值而非使用此屬性時(shí),瀏覽器將采用此屬性的值而非OPTION標(biāo)記符標(biāo)記符中的內(nèi)容作為選項(xiàng)標(biāo)簽。例如:中的內(nèi)容作為選項(xiàng)標(biāo)簽。例如:例如,在表單中使用僅允許選擇一個(gè)選項(xiàng)的菜單程序運(yùn)行結(jié)果如下:下面程序顯示了如何在表單中使用允許選擇多個(gè)選項(xiàng)的菜單:運(yùn)行結(jié)果如下:表單的提交與處理 提交表單數(shù)據(jù)和處理表單數(shù)據(jù)的方法由FORM標(biāo)記符中的METHOD和ACTION屬性決定。ACTION后表明提交后需要執(zhí)行的駐留在WEB服務(wù)器上的程序(包括路徑)可能是一個(gè)CGI程序或ASP程序這兩種程序由Vbscript或JAVAscript完成,ACTION屬性提供處理表單的腳本地址。一旦讀者輸入信息后,服務(wù)器便激活這個(gè)程序,完成查詢?nèi)蝿?wù)。METHOD有兩種,get 和 post (默認(rèn)為

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論