sx10教學(xué)資源3標(biāo)簽

網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)店裝修經(jīng)濟(jì)與工商管理系蔣元芳QQ：85016498超鏈接圖像表單元素范圍標(biāo)簽<span>換行標(biāo)簽<br/>第3章行級(jí)標(biāo)簽3.1.1

超鏈接的基本概念超鏈接（hyperlink）是網(wǎng)頁(yè)互相聯(lián)系的橋梁，超鏈接可以看作一個(gè)“熱點(diǎn)”，它可以從當(dāng)前網(wǎng)頁(yè)定義的位置跳轉(zhuǎn)到其他位置，包括當(dāng)前頁(yè)的某個(gè)位置，以及Internet、本地硬盤(pán)或局域網(wǎng)上的其他文件，甚至跳轉(zhuǎn)到聲音、圖像等多媒體文件。1．超鏈接的分類(lèi)根據(jù)超鏈接目標(biāo)文件的不同，鏈接可分為頁(yè)面超鏈接、錨點(diǎn)超鏈接、電子郵件超接鏈等；根據(jù)超鏈接單擊對(duì)象的不同，超鏈接可分為文字超鏈接、圖像超鏈接、圖像映射。

2．路徑創(chuàng)建超級(jí)鏈接時(shí)必須了解鏈接與被鏈接文本的路徑。在一個(gè)網(wǎng)站中，路徑通常有3種表示方式：絕對(duì)路徑、根目錄相對(duì)路徑和文檔目錄相對(duì)路徑。3.1

超鏈接3.1.2

超鏈接的應(yīng)用1．錨點(diǎn)標(biāo)簽<a>…</a><a

href="URL"target="打開(kāi)窗口方式">熱點(diǎn)</a>2．指向其他頁(yè)面的鏈接①鏈接到同一目錄內(nèi)的網(wǎng)頁(yè)文件，格式為：<a

href="目標(biāo)文件名.htm">熱點(diǎn)文本</a>②鏈接到下一級(jí)目錄中的網(wǎng)頁(yè)文件，格式為：<a

href="子目錄名/目標(biāo)文件名.htm">熱點(diǎn)文本</a>③鏈接到上一級(jí)目錄中的網(wǎng)頁(yè)文件，格式為：<a

href="../目標(biāo)文件名.htm">熱點(diǎn)文本</a>④鏈接到同級(jí)目錄中的網(wǎng)頁(yè)文件，格式為：<a

href="../子目錄名/目標(biāo)文件名.htm">熱點(diǎn)文本</a>3.1

超鏈接3.1.2

超鏈接的應(yīng)用3．指向書(shū)簽的鏈接<a

name="記號(hào)名">目標(biāo)文本附近的字符串</a>（1）指向頁(yè)面內(nèi)書(shū)簽的鏈接<a

href="#記號(hào)名">熱點(diǎn)文本</a>（2）指向其他頁(yè)面書(shū)簽的鏈接<a

href="目標(biāo)文件名.html#記號(hào)名">熱點(diǎn)文本</a>即單擊“熱點(diǎn)文本”，將跳轉(zhuǎn)到目標(biāo)頁(yè)面“記號(hào)名”開(kāi)始的網(wǎng)頁(yè)元素。3.1

超鏈接3.1.2

超鏈接的應(yīng)用4．指向下載文件的鏈接如果鏈接到的文件不是HTML文件，則該文件將作為下載文件。指向下載文件的鏈接格式為：<a

href="下載文件名">熱點(diǎn)文本</a>5．指向電子郵件的鏈接單擊指向電子郵件的鏈接，將打開(kāi)默認(rèn)的電子郵件程序，如FoxMail、Outlook

Express等，并自動(dòng)填寫(xiě)郵件地址。指向電子郵件鏈接的格式為：<a

href="mailto:E-mail地址">熱點(diǎn)文本</a>3.1

超鏈接3.2.1

Web上常用的圖像格式1．GIFGIF（圖形交換格式）文件最多使用256種顏色，最適合顯示色調(diào)不連續(xù)或具有大面積單一顏色的圖像，例如導(dǎo)航條、按鈕、圖標(biāo)或其他具有統(tǒng)一色彩和色調(diào)的圖像。2．JPEGJPEG（聯(lián)合圖像專(zhuān)家組標(biāo)準(zhǔn)）文件格式是用于攝影或連續(xù)色調(diào)圖像的高級(jí)格式。隨著JPEG文件品質(zhì)的提高，文件的大小和下載時(shí)間也會(huì)隨之增加。3．PNGPNG（可移植網(wǎng)絡(luò)圖形）文件格式是一種替代GIF格式的無(wú)專(zhuān)利權(quán)限制的格式。3.2

圖像3.2.2

圖像標(biāo)簽<img>圖像標(biāo)簽的格式為：<img

src="圖像文件名"alt="替代文字"title="鼠標(biāo)懸停提示文字"

width="圖像寬度"height="

圖像高度"

border="

邊框?qū)挾?

hspace="

水平方向空白"vspace="垂直方向空白"align="環(huán)繞方式|對(duì)齊方式"/>3.2

圖像3.2.3

用圖像作為超鏈接熱點(diǎn)圖像也可作為起鏈接熱點(diǎn)，單擊圖像則跳轉(zhuǎn)到被鏈接的文本或其他文件。格式為：<a

href="URL"><img

src="圖像文件名"/></a>3.2

圖像3.3.1

<input>元素<input>元素用來(lái)定義用戶(hù)輸入數(shù)據(jù)的輸入字段，根據(jù)不同的type屬性，輸入字段可以是文本字段、密碼字段、復(fù)選框、單選按鈕、按鈕、隱藏域、圖像、文件等。<input>元素的基本語(yǔ)法及格式為：<input

type="表項(xiàng)類(lèi)型"

name="表項(xiàng)名"

value="默認(rèn)值"

size="x"maxlength="y"

/>3.3

表單元素1.文字框文本框的格式為：<input

type="text"name="文本框名">2.密碼框密碼框的格式為：<input

type="password"name="密碼框名">3.3

表單元素3.按鈕①重置按鈕<input

type="reset"value="按鈕名">②提交按鈕<input

type="submit"value="按鈕名">③普通按鈕<input

type="button"value="按鈕名">④圖片按鈕<input

type=“image”src=“圖片來(lái)源”>【演練3-7】制作不同類(lèi)型的表單按鈕。3.3

表單元素4.復(fù)選框?qū)?lt;input>元素的type屬性設(shè)置為“checkbox”，則定義的表單元素為復(fù)選框。復(fù)選框的格式為：<input

type="checkbox" name="

復(fù)

選

框

名

" value="

提

交

值

"checked="checked">5.單選按鈕單選按鈕用于一組相互排斥的選項(xiàng)，組中的每個(gè)選項(xiàng)應(yīng)具有相同的名稱(chēng)，以確保瀏覽者只能選擇一個(gè)選項(xiàng)。單選按鈕的格式為：<input

type="radio" name="

單

選

鈕

名

" value="

提

交

值

"checked="checked">3.3

表單元素6.隱藏域網(wǎng)站服務(wù)器發(fā)送到客戶(hù)端的信息，除用戶(hù)直觀看到的頁(yè)面內(nèi)容之外，可能還包含一些“隱藏”信息。將<input>元素的type屬性設(shè)置為hidden類(lèi)型即可創(chuàng)建一個(gè)隱藏域。<input

type="hidden"name="隱藏域名"value="提交值">7.文件域文件域用于上傳文件，將<input>元素的type屬性設(shè)置

為file類(lèi)型即可創(chuàng)建一個(gè)文件域。文件域會(huì)在頁(yè)面中創(chuàng)建一

個(gè)不能輸入內(nèi)容的地址文本框和一個(gè)“瀏覽”按鈕。格式為：<input

type="file"name="文件域名">3.3

表單元素3.3.2

選擇欄<select>如果一個(gè)列表選項(xiàng)過(guò)長(zhǎng)，可以考慮使用選擇欄。<select>標(biāo)簽的格式為：<select

size="x"name="控制操作名"multiple="multiple"><option

…>…</option><option

…>…</option>…</select><option>標(biāo)簽的格式為：<option

value="可選擇的內(nèi)容"selected

="selected">…</option>3.3

表單元素3.3.3

多行文本域<textarea>…</textarea>在意見(jiàn)反饋欄中往往需要瀏覽者發(fā)表意見(jiàn)和建議，且提供的輸入?yún)^(qū)域一般較大，可以輸入較多的文字。使用<textarea>標(biāo)簽可以設(shè)置允許成段文字的輸入，格式為：<textareaname="文本域名"rows="行數(shù)"cols="列數(shù)">初始文本內(nèi)容</textarea>3.3

表單元素3.3.4

表單的高級(jí)用法在某些情況下，用戶(hù)需要對(duì)表單元素進(jìn)行限制，設(shè)置表單元素為只讀或禁用，常應(yīng)用于以下場(chǎng)景：只讀場(chǎng)景：網(wǎng)站服務(wù)器不希望用戶(hù)修改的數(shù)據(jù)，這些數(shù)

據(jù)在表單元素中顯示。例如，注冊(cè)或交易協(xié)議、商品價(jià)格等。禁用場(chǎng)景：只有滿(mǎn)足某個(gè)條件后，才能選用某項(xiàng)功能。

例如，只有用戶(hù)同意注冊(cè)協(xié)議后，才允許單擊“注冊(cè)”按鈕。只讀和禁用效果分別通過(guò)設(shè)置“readonly”和

“disabled”屬性來(lái)實(shí)現(xiàn)。3.3

表單元素<div>標(biāo)簽主要用來(lái)定義網(wǎng)頁(yè)上的區(qū)域，通常用于較大范圍的設(shè)置，而<span>標(biāo)簽被用來(lái)組合文檔中的行級(jí)元素。3.4.1

基本語(yǔ)法范圍標(biāo)簽<span>用于標(biāo)識(shí)行內(nèi)的某個(gè)范圍，以實(shí)現(xiàn)行內(nèi)某個(gè)部分的特殊設(shè)置以區(qū)分其他內(nèi)容。其語(yǔ)法格式為：<span>內(nèi)容</span>3.4

范圍標(biāo)簽<span>3.4.2

span與div的區(qū)別

span與div的區(qū)別在于，span僅僅是個(gè)行級(jí)元素，不會(huì)換行，而div是一個(gè)塊級(jí)元素，它包圍的元素會(huì)自動(dòng)