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

下載本文檔

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

文檔簡介

第2章HTML入門超文本標(biāo)識語言（HTML）HTML（HypertextMarkupLanguage）是一種專門用于Web頁制作的編程語言，用來描述超文本各個部分的內(nèi)容，告訴瀏覽器如何顯示文本，怎樣生成與別的文本或圖像的鏈接。HTML文檔由文本、格式化代碼和導(dǎo)向其他文檔的超鏈接組成。HTML基礎(chǔ)1．標(biāo)記符

標(biāo)記符又稱標(biāo)簽，HTML是影響網(wǎng)頁內(nèi)容顯示格式的標(biāo)記符集合，瀏覽器根據(jù)標(biāo)記符決定網(wǎng)頁的實際顯示效果。在HTML中，所有的標(biāo)記符都用尖括號括起來。例如，<HTML>表示HTML標(biāo)記符。絕大多數(shù)標(biāo)記符都是成對出現(xiàn)的，包括開始標(biāo)記符和結(jié)束標(biāo)記符。如：<HTML>…<／HTML>.

HTML標(biāo)記符是不區(qū)分大小寫的，但通常約定標(biāo)記符使用大寫字母，這有利于HTML文檔的維護(hù)。屬性是用來描述對象特征的特性。在HTML中，所有的屬性都放置在開始標(biāo)記符的尖括號里，屬性與標(biāo)記符之間用空格分隔，屬性的值放在相應(yīng)屬性之后，用等號分隔，而不同的屬性之間用空格分隔。格式為：<標(biāo)記符屬性1=屬性值1屬性2=屬性值2…>受影響的內(nèi)容<／標(biāo)記符>HTML屬性通常也不區(qū)分大小寫。（1）HTML標(biāo)記符

<HTML><／HTML>這兩個標(biāo)記符是HTML文檔的標(biāo)記符。<HTML>處于文檔的最前端，表示文檔的開始，即瀏覽器從<HTML>開始解釋。而<／HTML>則位于文件的最后一行，這樣的結(jié)果表示這一整份的文檔都是HTML語法的文檔。（2）HEAD標(biāo)記符

<HEAD><／HEAD>是HTML文件頭標(biāo)記符，用來描述HTML首部的內(nèi)容，說明文檔的整體信息。所有首部信息并不會出現(xiàn)在利用WWW瀏覽器所看到的窗體中。<HEAD><／HEAD>通常與某些標(biāo)記符一起使用，如<TITLE><／TITLE>標(biāo)記符。

（3）TITLE標(biāo)記符

<TITLE><／TITLE>指的是一份文檔的標(biāo)題。通常來說，每一份文檔都應(yīng)該有一個標(biāo)題來簡述這一份文檔的特色或是主題。對于WWW瀏覽器而言，標(biāo)題所在的位置雖然依照瀏覽器的不同而不同，但是大部分都位于瀏覽器的最上方。（4）BODY標(biāo)記符

<BODY><／BODY>指的是定義出一個HTML文檔的體部，位于首部下面。在<BODY>標(biāo)記符內(nèi)的文字，所有使用標(biāo)記符的地方都可以經(jīng)瀏覽器正確地顯示在瀏覽器窗體中。標(biāo)題處理在HTML中，用戶可以通過Hx標(biāo)記符來標(biāo)識文檔中的標(biāo)題和副標(biāo)題，其中n是1到6的數(shù)字。<H1>表示最大的標(biāo)題，<H6>表示最小的標(biāo)題。使用標(biāo)題樣式時，必須使用結(jié)束標(biāo)記符。標(biāo)題文字標(biāo)記符的格式：<Hxalign="對齊方式">標(biāo)題文字</Hn>屬性align用來設(shè)置標(biāo)題在頁面中的對齊方式：left（左對齊）、center（居中）或right（右對齊）。如:<H4align="left">計算機(jī)系</H4><Hx>…</Hx>標(biāo)記符默認(rèn)顯示宋體。<Hx>…</Hx>標(biāo)記符會自動插入一個空行，不必再用空行標(biāo)記符。在一個標(biāo)題行下無法使用不同大小的字體。與HEAD中的<TITLE>…<／TITLE>定義的網(wǎng)頁標(biāo)題不同，標(biāo)題格式顯示在瀏覽器窗口內(nèi)，而不顯示在瀏覽器的標(biāo)題欄中。段落處理

在HTML中段落處理是通過段落標(biāo)記來完成的，常用的段落標(biāo)記符有：1．注釋標(biāo)記符

HTML的注釋標(biāo)記符的格式為：<!--注釋內(nèi)容-->2．強(qiáng)制換行標(biāo)記符

強(qiáng)制換行標(biāo)記符為<BR>，放在一行的末尾，可以使后面的文字、圖片、表格等顯示于下一行，而又不會在行與行之間留下空行，即強(qiáng)制文本換行。

3．強(qiáng)制換段標(biāo)記符

在HTML文檔中，無法用多個回車、空格、Tab鍵來調(diào)整文檔段落的格式。要用HTML的標(biāo)記符來強(qiáng)制換行、分段。（1）強(qiáng)制換段標(biāo)記符強(qiáng)制換段標(biāo)記符的格式為：文字<P>,段與段之間會有一個空行。（2）設(shè)置段落標(biāo)記符設(shè)置段落標(biāo)記符的格式為：<Palign=“對齊方式”>文字<／P>4．顯示預(yù)排格式標(biāo)記符當(dāng)用其他編輯工具編排好了一段文字后，其中很可能有一些HTML文件不支持的控制符號，如同車、多個空格、Tab鍵等。如果希望在瀏覽網(wǎng)頁時仍保留在編輯工具中已經(jīng)排好的段落格式，可以使用<PRE>標(biāo)記符將預(yù)先排好的格式保留下來。顯示預(yù)排格式標(biāo)記符的格式為：<PRE>預(yù)先排好的格式<／PRE>5．分區(qū)顯示標(biāo)記符分區(qū)顯示標(biāo)記符的格式為：<DIValign="對齊方式">文本或圖像<／DIV>6．水平線在頁面中插入一條水平標(biāo)尺線（HorizontalRules），可以使不同功能的文字分隔開，看起來整齊、明了。水平線標(biāo)記符的格式為：<HRalign="對齊方式"size="橫線粗細(xì)"width="橫線長度"color="橫線顏色"noshade>文本格式處理文本格式處理包括文字設(shè)置和格式處理。

1．文字設(shè)置在網(wǎng)頁中為了增強(qiáng)頁面的層次，其中的文字可以用不同的大小、字體、字型和顏色，通常用FONT標(biāo)記符來完成。

FONT標(biāo)記符設(shè)置格式為：<FONTsize="數(shù)字"face="字體名"color="顏色">被設(shè)置的文字<／FONT>size屬性是字號屬性，用于控制文字的大小，它的取值既可以是絕對值，也可以是相對值。face屬性是字體標(biāo)記符，用來指定字體樣式。color屬性可用來控制文字的顏色，屬性值可以是顏色名稱或十六進(jìn)制值。舉例（1）進(jìn)入記事本進(jìn)行編寫（2）進(jìn)入IE瀏覽器進(jìn)行運行找到文件所在位置后確定找到啦運行結(jié)果文本格式（1）字符格式

標(biāo)記功能標(biāo)記功能<B></B>或<strong></strong>粗體<SUB></SUB>下標(biāo)<I></I>或<em></em>或<cite></cite>斜體<SUP></SUP>上標(biāo)<U></U>下畫線<BIG></BIG>大字體<SMALL></SMALL>小字體<STRIKE></STRIKE>刪除線例如：3．設(shè)置頁面屬性（1）設(shè)置頁面背景顏色<BODY>標(biāo)記符中使用bgcolor屬性可以為網(wǎng)頁設(shè)置背景顏色。

<BODYbgcolor=#value>（2）設(shè)置頁面背景圖像單純使用一種顏色作為背景顯然有些單調(diào)，網(wǎng)頁設(shè)計者也可選擇特定圖案作為頁面的背景，使用BODY標(biāo)記符的background屬性即可。HTML語句為：

<BODYbackground=“網(wǎng)頁背景圖案的地址”>

頁面左邊的空白<bodyleftmargin=#>

頁面上方的空白(天頭)<bodytopmargin=#>#=marginamount1在頁面中加入背景顏色在<BODY>中鍵入<BODYBGCOLOR=“RED”>效果為：背景變啦加入方法是記事本寫入語句別忘記存盤啊在IE中刷新2在頁面中加入背景圖案在<BODY>中鍵入<BODYBACKGROUND=“圖片文件”>圖片文件的名字可以是.gif或.jpg，加入后效果為：（3）段落格式<P></P>----分段標(biāo)記，通常結(jié)束符可省略<BR>------換行標(biāo)記<HR>-----添加水平線標(biāo)記其中：<Hn>n=1-6定義標(biāo)題大小width：水平線長度color：水平線顏色noshade：3d陰影size：水平線的粗細(xì)（4）顯示特殊字符特殊字符數(shù)字代碼代碼名稱“""&&&<<<>>>列表格式p1071有序列表<OL></OL>-----有序列表標(biāo)記符<LI></LI>------列表項標(biāo)記符（結(jié)束標(biāo)記可省略）LI屬性VALUE:指定一個新的數(shù)字序列起始值TYPE：取值同上START:取值為任意整數(shù)TYPE：取值屬性值含義1阿拉伯?dāng)?shù)字：1、2、3等默認(rèn)值A(chǔ)大寫字母：ABCa小寫字母：abcI大寫羅馬數(shù)字：IIIIIIIVi小寫羅馬數(shù)字：iiiiiiiv例如：2無序列表<UL></UL>-----無序列表標(biāo)記符<LI></LI>------列表項標(biāo)記符（結(jié)束標(biāo)記可省略）TYPE：取值值含義Disc實心圓，通常是非嵌套列表的默認(rèn)值Circle空心圓，通常是嵌套列表的默認(rèn)值Square實心或空心方框，通常取決瀏覽器屬性舉例結(jié)果定義列表<DL></DL>-----定義列表標(biāo)記符<DT></DT>------定義術(shù)語標(biāo)記符（結(jié)束標(biāo)記可省略）<DD></DD>-----描述標(biāo)記符（結(jié)束標(biāo)記可省略）定義列表通常用于定義術(shù)語，也可用于所排文檔。1.插入圖像在HTML中，使用IMG標(biāo)記符可以在網(wǎng)頁中加入圖像。它具有兩個基本屬性：src和alt，分別用于設(shè)置圖像文件的位置和替換文本。2．設(shè)置圖像屬性（1）指定圖像的寬和高在HTML中，使用IMG標(biāo)記符的width和height屬性可以指定圖像的寬度和寬度，以告訴瀏覽器Web頁應(yīng)分配給圖像多少空間（以像素為單位）。（2）圖像的邊框使用IMG標(biāo)記符的border屬性，可以給圖像添加邊框效果，邊框的取值是像素數(shù)。

在網(wǎng)頁中插入圖象格式：<IMGSRC=“圖片文件名”ALT=“該圖片的說明文件”>例如：結(jié)果圖象布局（1）指定圖像的高和寬格式：<IMGSRC=“圖片文件名”WIDTH=XHEIGHT=Y>

X、Y可取像素數(shù)，也可取百分?jǐn)?shù)（注意百分?jǐn)?shù)加引號）圖片寬度圖片高度使用表格創(chuàng)建表格HTML表格模型使用戶可以將各種數(shù)據(jù)（文本、圖像、鏈接、表單、表單域以及其它表格）排成行列，獲得特定效果，利用HTML處理網(wǎng)頁表格1．表格的基本構(gòu)成通常在HTML中創(chuàng)建一個普通的表格應(yīng)包括以下標(biāo)記符：（1）TABLE

TABLE標(biāo)記符用于定義整個表格，表格內(nèi)的所有內(nèi)容都應(yīng)該位于<TABLE>和<／TABLE>之間。（2）CAPTION如果表格需要標(biāo)題，那么就應(yīng)該使用CAPTION標(biāo)記符將表格標(biāo)題包括在<CAPTION>和<／CAPTION>之間。（3）TR

TR標(biāo)記符用于定義表格的行，對于每一個表格行，都對應(yīng)一個TR標(biāo)記符。TR標(biāo)記符的結(jié)束標(biāo)記符可以省略。圖像鏈接超鏈接不僅可以用文本作為鏈接源，還可以使用圖像作為鏈接源，方法是用A標(biāo)記符將IMG標(biāo)記符包圍起來，當(dāng)用戶單擊該圖像時，跳轉(zhuǎn)到指定位置。例如：<AHREF=“target.htm”><IMGSRC=“cloud.gif”></A>（4）TD和TH在表格行中的每個單元格，都對應(yīng)于一個TD標(biāo)記符或者TH標(biāo)記符，用于標(biāo)記表格的內(nèi)容，其中可以包括文字、圖像或其他對象。TD與TH的功能和用法幾乎完全相同（可以任意混合使用，但效果略有不同），唯一不同之處在于TD表示表格所對應(yīng)的列數(shù)和向?qū)?yīng)的單元格，而TH表示表格的標(biāo)題行。例如：結(jié)果說明（1）<TABLE></TABLE>為定義表格的標(biāo)記符，表格的所有內(nèi)容都放在它們之間。（2）<CAPTION></CAPTION>為定義表格標(biāo)題,ALIGN屬性定義標(biāo)題的位置。

TOP---標(biāo)題放在表格的上部BOTTOM---標(biāo)題放在表格的下部RIGHT---標(biāo)題放在表格的上部右側(cè)LEFT---標(biāo)題放在表格的上部左側(cè)（3）<TH></TH>定義表頭項結(jié)束符可省略合并單元格在<TD>和<TH>標(biāo)記內(nèi)使用rowspan屬性可以進(jìn)行行合并，rowspan的取值表示垂直方向上合并的行數(shù)；使用colspan屬性可以進(jìn)行列合并，colspan的取值表示水平方向上的合并的列數(shù)。（2）邊框與分隔線在TABLE標(biāo)記內(nèi)使用frame、rules和border屬性可以設(shè)置表格的邊框和單元格分隔線。（3）控制單元格空白在TABLE標(biāo)記符中使用cellspacing屬性可以控制單元格之間的空白，<TD></TD>定義表項結(jié)束符可省略<TR></TR>定義表行開始，結(jié)束符可省略表格的行與列（1）行合并<TD>和</TH>標(biāo)記內(nèi)使用ROWSPAN屬性進(jìn)行行合并，格式為:<TDROWSPAN=X>表項<TD>X－－為縱方向上合并的行數(shù)。（2）列合并<TD>和</TH>標(biāo)記內(nèi)使用COLSOAN屬性進(jìn)行列合并，格式為:<TDCOLSPAN=Y>表數(shù)據(jù)項<TD>Y－－為水平方向上合并的列數(shù)。例如：圖片與多媒體1.插入圖像在HTML中，使用IMG標(biāo)記符可以在網(wǎng)頁中加入圖像。它具有兩個基本屬性：src和alt，分別用于設(shè)置圖像文件的位置和替換文本。2．設(shè)置圖像屬性（1）指定圖像的寬和高在HTML中，使用IMG標(biāo)記符的width和height屬性可以指定圖像的寬度和寬度，以告訴瀏覽器Web頁應(yīng)分配給圖像多少空間（以像素為單位）。（2）圖像的邊框使用IMG標(biāo)記符的border屬性，可以給圖像添加邊框效果，邊框的取值是像素數(shù)。（3）圖像和文字的距離<imgvspace=#hspace=#>#=value例如:<imgsrc=“sun.jpg”vspace=20hspace=10>ALIGN屬性圖像和文本混排時，圖像和文本的相對位置可使用IMG的ALIGN屬性.Top.Middle.Buttom

文字位置向上對齊，居中對齊，向下對齊。Left.Right文字位置相左對齊，相右對齊。結(jié)果圖象布局（1）指定圖像的高和寬格式：<IMGSRC=“圖片文件名”WIDTH=XHEIGHT=Y>X、Y可取像素數(shù)，也可取百分?jǐn)?shù)（注意百分?jǐn)?shù)加引號）圖片寬度圖片高度在網(wǎng)頁中插入圖象格式：<IMGSRC=“圖片文件名”ALT=“該圖片的說明文件”>例如：背景音樂<bgsoundsrc=#>#=WAV文件的URL

<bgsoundloop=#>#=循環(huán)數(shù)插入視頻剪輯<imgsrc="url.gif"dynsrc="url.avi">用url.avi這一AVI(VideoforMS－WINDOWS)文件來播放視頻；

用url.gif這一GIF圖象作為視頻的封面，即：在瀏覽器

尚未完全讀入AVI文件時，先在AVI播放區(qū)域顯示該圖象。<imgsrc="SAMPLE-S.GIF"dynsrc="SAMPLE-S.AVI">循環(huán)播放<imgloop=#><loop=infinite>將循環(huán)播放不止。<imgsrc="SAMPLE-S.GIF"dynsrc="SAMPLE-S.AVI"loop=3>延時<imgloopdelay=#>#=毫秒數(shù)<imgsrc="SAMPLE-S.GIF"dynsrc="SAMPLE-S.AVI"loop=3loopdelay=250>何時開始播放AVI<imgstart=#>#=fileopen,mouseover缺省值是#=fileopen，即在鏈接到含本標(biāo)記的頁面(如本頁)時開始播放AVI。mouseover是指您把鼠標(biāo)移到AVI播放區(qū)域之上時才開始播放AVI。也可以兩者同時設(shè)置：<imgstart=fileopen,mouseover>另外，用鼠標(biāo)在AVI播放區(qū)域點擊一下，也將令瀏覽器開始播放該AVI。<imgsrc="SAMPLE-S.GIF"dynsrc="SAMPLE-S.AVI"start=mouseover>（3）設(shè)置文字和超鏈接的顏色在設(shè)置了背景圖案或背景顏色后，常常需要更改正文字符和超鏈接的顏色，以便與背景相適應(yīng)。設(shè)置正文和超鏈接顏色時，可以使用BODY標(biāo)記符的text、link、vlink和alink屬性。其中，text屬性用于設(shè)置正文的顏色；link屬性用于設(shè)置未被訪問的超鏈接的顏色；vlink用于設(shè)置已被訪問過的超鏈接的顏色；alink用于設(shè)置活動超鏈接（即當(dāng)前選定的超鏈接）的顏色。TEXT－－屬性用于設(shè)置正文的顏色LINK－－屬性用于設(shè)置未被訪問的鏈接顏色VLINK－－屬性用于設(shè)置已經(jīng)被訪問的鏈接顏色ALINK－－屬性用于設(shè)置活動鏈接顏色（當(dāng)前選定的鏈接）例如：<bodybgcolor=“#000000”text=“#ffffff”link=“#999999”Vlink=“#cccccc”alink=“#666666”>注意：顏色可以用英文表示，

也可用＃FFFFFF如在BODY中不設(shè)置背景及字符鏈接顏色，瀏覽器采用默認(rèn)的設(shè)置，white（白色）或gray（灰色）為BGCOLOR，black為TEXT，blue為LINK，purple為VALINK,red為ALINK。利用HTML制作滾動字幕

滾動字幕是一種常用的網(wǎng)頁效果，使用MARQUEE標(biāo)記符可以設(shè)計滾動字幕，利用MARQUEE標(biāo)記符中各種屬性來控制滾動字幕的滾動方式。例如：<body><marquee>我的個人網(wǎng)頁，歡迎訪問</marquee>文字移動屬性的設(shè)置方向<direction=#>#=left,right<marqueedirection=left>啦啦啦，我從右向左移！</marquee><P>

<marqueedirection=right>啦啦啦，我從左向右移！</marquee>式<bihavior=#>#=scroll,slide,alternate<marqueebehavior=scroll>啦啦啦，我一圈一圈繞著走！</marquee><P>

<marqueebehavior=slide>啦啦啦，我只走一次就歇了！</marquee><P>

<marqueebehavior=alternate>啦啦啦，我來回走耶！</marquee>循環(huán)<loop=#>#=次數(shù)；若未指定則循環(huán)不止(infinite)<marqueeloop=3width=50%behavior=scroll>啦啦啦，我只走3趟喲！</marquee><P>

<marqueeloop=3width=50%behavior=slide>啦啦啦，我只走3趟喲！</marquee><P>

速度<scrollamount=#><marqueescrollamount=20>啦啦啦，我走得好快喲！</marquee>延時<scrolldelay=#><marqueescrolldelay=500scrollamount=100>啦啦啦，我走一步，停一停！</marquee>（5）段落對齊<DIV></DIV>標(biāo)記符為文檔分節(jié)。以便為文檔不同的部分應(yīng)用不同的段落格式。它需要與ALIGN屬性配合使用。位于DIV標(biāo)記符中的多段文本將被認(rèn)為是一個節(jié)?？蔀樗鼈冊O(shè)置一致的對齊格式。RIGHT：右對齊LEFT：左對齊CENTER：居中對齊JUSTIFY：兩端對齊ALIGN屬性ALIGN屬性可用于多種標(biāo)記符，最典型的是應(yīng)用于DIVPHnHR中。例如：瀏覽器結(jié)果圖像和文字的距離<imgvspace=#hspace=#>#=value例如:<imgsrc=“sun.jpg”vspace=20hspace=10>4圖像的邊框<IMGBORDER=“邊寬”>可以在IMG標(biāo)記符內(nèi)使用屬性hspace和vspace設(shè)置圖像周圍空白，其中hspace示水平方向的空白，vspace表示垂直方向的空白，它們的取值都是像素數(shù)。（4）圖像的對齊①圖像在頁面中的對齊設(shè)置圖像在頁面中的對齊與設(shè)置文本對齊類似，可以使用DIV或P標(biāo)記符將IMG標(biāo)記符括起來，然后使用align屬性。②圖像與周圍內(nèi)容的垂直對齊使用IMG標(biāo)記符的align屬性，可以控制圖像與周圍內(nèi)容的垂直對齊。③圖文混排時的圖像對齊如果要在圖像的左、右環(huán)繞文字，也應(yīng)該使用IMG標(biāo)記符的align屬性。格式：<IMGSRC=“圖片文件名”HSPACE=XVSPACE=Y>X值設(shè)置水平方向的空白，Y值設(shè)置垂直方向的空白，單位為像素數(shù)。例如：結(jié)果圖像在頁面的對齊設(shè)置圖像在頁面的對齊與設(shè)置文本對齊類似，可以使用DIV或P標(biāo)記符的ALIGN屬性.結(jié)果ALIGN屬性圖像和文本混排時，圖像和文本在垂直方向的對齊可使用IMG的ALIGN屬性，.結(jié)果使用超鏈接URL(UniversalResourceLocator)

它包括3部分：一個協(xié)議代碼；一個裝有所需文件的計算機(jī)地址（或一個電子郵件地址或是新聞組件名稱）以及包含有信息的文件地址和文件名。絕對URL是指internet上資源的完整地址，包括協(xié)議種類，、計算機(jī)域名和包含路徑的文檔名。其形式為：協(xié)議：//計算機(jī)域名/文檔名例如：HTTP://WWW./pup/netbook/example.htm就是一個絕對的URL.相對URL是指internet上資源相對于當(dāng)前頁面的地址，包括從當(dāng)前頁面指向目的頁面位置的路徑。例如：pub/example.htm

就是一個相對的URL創(chuàng)建超鏈接指向本地網(wǎng)頁的鏈接格式<AHREF=“另一個網(wǎng)頁文件”>超鏈接</A>注意：網(wǎng)頁文件不在同一目錄下要寫明路徑名。（2）指向其它網(wǎng)頁的鏈接如果超鏈接指向的內(nèi)容是外部網(wǎng)頁，則應(yīng)使用絕對的URL例如<AHREF=“”>微軟站點</A>（3）指向網(wǎng)頁中特點部分的鏈接除了可以對不同頁面進(jìn)行鏈接以外，用戶可以對同一頁面的不同部分進(jìn)行鏈接。例如：可以在長文檔的頂部或底部以超鏈接的方式顯示一個目錄，并在頁面的底部放一個返回頂部的鏈接。方法為：在需要跳轉(zhuǎn)的位置放置A標(biāo)記符，并用NAME進(jìn)行命名（錨點）但在標(biāo)記<A></A>之間不用任何文字。例如：在頁面的開始處用下列語句進(jìn)行標(biāo)記：<P><NAME=“top”></A></P>對頁面進(jìn)行標(biāo)記之后，就可以用A標(biāo)記符設(shè)置指向這些標(biāo)記位置的鏈接。對上面的語句可以用：<AHREF=“#top”>此處</A>返回頁面頂部注意：對錨點鏈接，應(yīng)使用符號＃。當(dāng)用戶在瀏覽器中單擊文字“此處”時，將顯示以標(biāo)記<ANAME=“top”>開始的頁面部分。我們可以簡單地記?。?lt;AHREF>表示單擊標(biāo)記，<ANAME>表示單擊后訪問地頁面部分。同樣，用戶也可以在不同的頁面設(shè)置錨點，然后在A標(biāo)記符的HREF屬性中添加頁面地址或頁面名稱，并添加＃標(biāo)記，從而與另一個頁面中的命名錨點進(jìn)行鏈接。例如：圖像與超鏈接在超鏈接中，鏈接對象既可以是網(wǎng)頁文件，也可以是圖像文件、文本文件、聲音文件或視頻文件。1鏈接到圖像<P>請單擊<AHREF=“C:/Windows/winlogo.gif”>此處</A>以顯示圖像。。圖像、文本、聲音文件或視頻文件（2）嵌套表格將表格作為一個單元格的內(nèi)容放置在<TD></TD>之間即可例如：使用框架1框架的基本概念（1）什么是框架：與表格類似，框架可以使設(shè)計者以行和列的方式組織頁面信息，其不同的是：框架中能包含滾動條，可以包含超鏈接、通過單擊超鏈接可以改變自身或其它框架的內(nèi)容。它的典型用法是：在某一個或若干個框架中包含固定信息，而在另一個框架中顯示頁面的主要內(nèi)容，通過單擊其它框架的超鏈接，來不斷改變該主意框架的內(nèi)容顯示。（2）框架的定義格式：<FRAMESET><FRAME><FRAME><FRAME>……………</FRAMESET>，如果要創(chuàng)建橫縱框架，應(yīng)使用嵌套語句。例如：注意：在HTML文檔中，如果包含F(xiàn)RAMESET標(biāo)記符，則不能包含BODY標(biāo)記符?？蚣苁前葱泻土羞M(jìn)行排列的，建立框架結(jié)構(gòu)時，應(yīng)使用FRAMESET標(biāo)記符的ROWS和COLS屬性，分別用于構(gòu)造橫向縱向分隔架，這兩個屬性不能同時使用，如需創(chuàng)建橫縱框架，應(yīng)使用嵌套。Rows和Cols的取值可以是：象素數(shù)：指定框架的絕對大?。?shù)：指定框架相對瀏覽器的大小n*：由前兩種方法指定剩余部分,僅用*（n=1）為整個窗口，*.*均分二例如：<framesetrows=“120,*,120”>在垂直方向上將窗口分3個框架<framesetcols=“150,*”>在水平方向上將窗口分2個框架。使用表單表單的概述（1）定義：表單是Web頁的一個組成部分，它包含一個可以由讀者鍵入或選擇信息的區(qū)域，并能將信息返回給網(wǎng)頁制作著。（2）表單的內(nèi)容：它包含普通內(nèi)容、控件以及控件標(biāo)簽（3）控件：控件是表單中用于接收用戶輸入或處理的元素，典型的控件有：文本框、復(fù)選框、單選框、菜單等。（4）控件的類型：按鈕提交按鈕Submit重置按鈕Reset普通按鈕Button利用HTML創(chuàng)建表單，這樣創(chuàng)建的表單通常由兩類元素構(gòu)成，一是普通的頁面元素，例如表格、圖像、文字等，二是用于接收信息的特定頁面元素，也就是所謂的表單控件。1．表單標(biāo)記符HTML中表單標(biāo)記符為FORM，其主要作用是設(shè)定表單的起止位置，并指定處理表單數(shù)據(jù)程序的URL地址。

2．表單輸入標(biāo)記符INPUT是表單輸入標(biāo)記符，在表單創(chuàng)建中使用頻繁，大部分表單內(nèi)容需要用到此標(biāo)記符。3．控件定義方法（1）文本框和口令框創(chuàng)建單行文本框的基本語法如下：<INPUTtype="text"name=""value=""size=""maxlength="">復(fù)選框、單選框都使用Input菜單框使用Select標(biāo)記符創(chuàng)建，需同時使用Optgroup和Option標(biāo)記符號文本輸入框單行文本Input多行文本Textarea文件選擇框用于選擇文件與表單內(nèi)容一起提交Input隱藏控件：用于不需在表單中顯示的文本，但與表單一起提交，也使用Input對象控件：通用控件用Object標(biāo)記符創(chuàng)建，常用嵌入多媒體對象。（5）FORM標(biāo)記符如果在網(wǎng)頁中添加表單，應(yīng)在文檔中添加<FORM></FORM>標(biāo)記。格式為：<FormMethod=“Get/Post”Action=“URL”type=“type”><各種表單元素（包括控件和其它內(nèi)容）></Form>注意：<Form>標(biāo)記不能嵌套使用，不能省略結(jié)束標(biāo)記FORM標(biāo)記符作為包含控件的容器。它指定了：表單的布局（由FORM標(biāo)記符內(nèi)的內(nèi)容決定）用于處理已提交表單的程序（由Action決定），該程序必須能夠處理表單數(shù)據(jù)（CGI)用戶數(shù)據(jù)提交服務(wù)器的方法（由Method屬性指定）創(chuàng)建輸入型表單元素（1）Input屬性：Type=text/password/checkbox/redio/submit/file/hidden/image/button此屬性指定要創(chuàng)建的控件類型，默認(rèn)值是text，即創(chuàng)建單行文本框

Name此屬性指定控件的名稱Value此屬性指定控件的初始值。除非控件類型是“redio”或“checkbox”，否則此屬性可以省略。Size此屬性指定控件的初始寬度。屬性值通常是像素，但當(dāng)type屬性為“text”或“password”時，該值的含義是字符數(shù)。Maxlength當(dāng)type屬性為“text”或“password”時，此屬性指定用戶輸入文本的最大個數(shù)，若長度超過了size屬性的指定，此時，瀏覽器會允許數(shù)據(jù)的滾動，其默認(rèn)值是不限大小。Checked當(dāng)type屬性為“text”或“password”時，此布爾屬性指定了該框是否選中。對于其它類型的控件，瀏覽器會忽略此屬性。Src＝URL當(dāng)type屬性為“image”時，此屬性指定了用于修飾圖形化提交按鈕的圖片的位置。（2）創(chuàng)建文本框創(chuàng)建單文本格式<INPUTtype=“text”name=““value=““size=numberMaxlength=number>其中：Name屬性指定了控件的名稱，當(dāng)在腳本中處理該控件時，可以引用其名稱，Value此屬性指定控件的初始值。Size屬性指定文本框的寬度，Maxlength屬性指定了用戶輸入文本的最大個數(shù)。例如：具有單行文本框的表單（3）創(chuàng)建口令框表單中的口令框與文本框類似，但其中的所有文本顯示出來的都是星號（*）。注意：口令框只能提供很低層次的安全性，因為口令框中的值與文本框的值一樣，在提交表單時，是以字符格式傳送的，任何具有很低訪問權(quán)限的人都能使用不太復(fù)雜的的技術(shù)獲得這些數(shù)據(jù)。如果提供更高的安全性應(yīng)采用其它方法。要創(chuàng)建一個口令框，應(yīng)在<FORM></FORM>標(biāo)記間輸入一個INPUT標(biāo)記符，然后指定TYPE屬性為“password”，其語法如下：<INPUTtype=“password”name=““value=““size=numberMaxlength=number>其中：type為口令文本框；name用來引用輸入的內(nèi)容；Value此屬性指定控件的初始值。Size屬性指定文本框的寬度，Maxlength屬性指定了用戶輸入文本的最大長度用戶輸入文本的最大長度，例如：運行結(jié)果：（4）復(fù)選框與單選框<INPUTtype=“checkbox/radio”name=““value=““(Checked)>選項文本Type屬性說明該控件是一個復(fù)選框：name中的值則用于以后在腳本中引用該復(fù)選框及單選框；value屬性則是當(dāng)將這個復(fù)選框及單選框選中后的設(shè)定值。checked屬性是可選項，它告訴瀏覽器當(dāng)?shù)谝淮物@示時，應(yīng)將這個復(fù)選框或單選框顯示為被選中狀態(tài)；最后位于INPUT標(biāo)記符外的“選項文本”則是指與特定的復(fù)選框或單選框有關(guān)的任何文本。例如：（5）文件選擇框如果網(wǎng)頁設(shè)計者需要用戶在表單中選擇文件，然后將選中的內(nèi)容發(fā)送到服務(wù)器，則可以使用“文件選擇框”格式為：

<INPUTtype=“File”name=““value=““size＝number>Type屬性說明該控件是一個文件選擇框；name中的值則用于以后在腳本中引用這個文件；value屬性是該控件的缺省值；size屬性設(shè)置用于保存文件名字段的寬度。以下HTML代碼顯示了如何在表單中包含文件選擇框。程序代碼：瀏覽器中顯示結(jié)果：（7）創(chuàng)建普通按鈕在HTML中，網(wǎng)頁設(shè)計者可以使用BUTTON標(biāo)記符創(chuàng)建三種按鈕提交submit重置reset普通button格式為：

<BUTTONname=““value=““TYPE＝submit/reset/buttonr>需要包含在按鈕中的信息可以是文本或圖像</BUTTON>使用BUTTON創(chuàng)建按鈕可以有更多的選擇，可在按鈕上顯示圖片的同時顯示文本（只有將相關(guān)信息包含在<BUTTOM>與</BUTTON>內(nèi)即可。例如：結(jié)果如下：（8）創(chuàng)建選項菜單要創(chuàng)建選項菜單，應(yīng)在FORM標(biāo)記符中插入SELECT標(biāo)記，并將每個可獨立選用的項用一個OPTION標(biāo)記標(biāo)出來。格式為：<SELECT><OPTION><OPTION>………………</SELECT>SELECT標(biāo)記符屬性：Name：此屬性指定控件名Size＝number此屬性指定選項菜單中一次顯示多少行Multiple：如設(shè)置了此布爾屬性，則允許用戶選擇多

溫馨提示

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

評論

0/150

提交評論