sx10教學資源3標簽

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

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

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

超鏈接3.1.2

超鏈接的應(yīng)用1．錨點標簽<a>…</a><a

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

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

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

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

href="../子目錄名/目標文件名.htm">熱點文本</a>3.1

超鏈接3.1.2

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

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

href="#記號名">熱點文本</a>（2）指向其他頁面書簽的鏈接<a

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

超鏈接3.1.2

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

href="下載文件名">熱點文本</a>5．指向電子郵件的鏈接單擊指向電子郵件的鏈接，將打開默認的電子郵件程序，如FoxMail、Outlook

Express等，并自動填寫郵件地址。指向電子郵件鏈接的格式為：<a

href="mailto:E-mail地址">熱點文本</a>3.1

超鏈接3.2.1

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

圖像3.2.2

圖像標簽<img>圖像標簽的格式為：<img

src="圖像文件名"alt="替代文字"title="鼠標懸停提示文字"

width="圖像寬度"height="

圖像高度"

border="

邊框?qū)挾?

hspace="

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

圖像3.2.3

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

href="URL"><img

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

圖像3.3.1

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

type="表項類型"

name="表項名"

value="默認值"

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=“圖片來源”>【演練3-7】制作不同類型的表單按鈕。3.3

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

type="checkbox" name="

復(fù)

選

框

名

" value="

提

交

值

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

type="radio" name="

單

選

鈕

名

" value="

提

交

值

"checked="checked">3.3

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

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

為file類型即可創(chuàng)建一個文件域。文件域會在頁面中創(chuàng)建一

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

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

表單元素3.3.2

選擇欄<select>如果一個列表選項過長，可以考慮使用選擇欄。<select>標簽的格式為：<select

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

…>…</option><option

…>…</option>…</select><option>標簽的格式為：<option

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

="selected">…</option>3.3

表單元素3.3.3

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

表單元素3.3.4

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

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

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

“disabled”屬性來實現(xiàn)。3.3

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

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

范圍標簽<span>3.4.2

span與div的區(qū)別

span與div的區(qū)別在于，span僅僅是個行級元素，不會換行，而div是一個塊級元素，它包圍的元素會自動