電子商務(wù)網(wǎng)站建設(shè)之HTML語(yǔ)言高級(jí)_第1頁(yè)
電子商務(wù)網(wǎng)站建設(shè)之HTML語(yǔ)言高級(jí)_第2頁(yè)
電子商務(wù)網(wǎng)站建設(shè)之HTML語(yǔ)言高級(jí)_第3頁(yè)
電子商務(wù)網(wǎng)站建設(shè)之HTML語(yǔ)言高級(jí)_第4頁(yè)
電子商務(wù)網(wǎng)站建設(shè)之HTML語(yǔ)言高級(jí)_第5頁(yè)
已閱讀5頁(yè)，還剩32頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第4章HTML語(yǔ)言高級(jí)4.1創(chuàng)建超鏈接4.2創(chuàng)建表格4.3創(chuàng)建表單4.4幀標(biāo)簽4.5分區(qū)標(biāo)簽6/12/20231超鏈接標(biāo)簽超鏈接標(biāo)記的格式如下：

<ahref="URL信息">超鏈接文本或圖像</a>超鏈接標(biāo)記除了必備的href屬性外，還有一個(gè)屬性target，它指明目標(biāo)頁(yè)面顯示的窗口target的默認(rèn)值是本頁(yè)面所在的瀏覽器窗口target=_blank 表示目標(biāo)頁(yè)面顯示于一個(gè)新的瀏覽器窗 口中target=_top 表示目標(biāo)頁(yè)面顯示于整個(gè)瀏覽器窗口 中，而不是顯示在幀所在窗口中target=幀名 表示目標(biāo)頁(yè)面顯示于指定幀所在的窗口 中6/12/20232例3.8在頁(yè)面中實(shí)現(xiàn)超鏈接功能<html><head><title>創(chuàng)建超鏈接</title></head><body>浙江大學(xué)寧波理工學(xué)院<p><ahref="/">浙江大學(xué)寧波理工學(xué)院</a><p><ahref="/"target="_blank">浙江大學(xué)寧波理工學(xué)院</a></body></html>6/12/20233超鏈接標(biāo)簽根據(jù)目標(biāo)頁(yè)面的位置不同，href屬性的URL信息構(gòu)成分為以下3種情況：目標(biāo)頁(yè)面位于另外的主機(jī)或采用非http協(xié)議，此時(shí)URL采用絕對(duì)路徑，即使用如下格式：協(xié)議名://主機(jī)名[/目錄信息]

若目標(biāo)頁(yè)面位于本主機(jī)，此時(shí)URL采用相對(duì)路徑： <ahref="des1.htm">超鏈接文本</a>或<ahref="/des2.htm">超鏈接文本</a>超鏈接的目標(biāo)不僅可以指向HTML文件的頭部，也可以指向某個(gè)文件的特定位置（稱(chēng)為“錨點(diǎn)”，anchor），其格式如下：<aname="定位標(biāo)記">文本或圖像等頁(yè)面元素</a>6/12/20234例3.9使用不同URL信息的超鏈接<html><head><title>超鏈接標(biāo)簽示例</title></head><body><ahref=“”>淘寶網(wǎng)</a><p><ahref="example307.html">example307.html</a><p><ahref="mailto:xiaowei@?subject=hi"target="_blank">郵件聯(lián)系</a><p><ahref="">指向網(wǎng)頁(yè)文件所在的目錄</a></body></html>6/12/20235創(chuàng)建表格表格標(biāo)簽<table> [<caption>標(biāo)題內(nèi)容</caption>] <tr> <th>表格內(nèi)標(biāo)題</th> <td>表格內(nèi)容</td> <td>表格內(nèi)容</td> </tr></table>6/12/20236表格標(biāo)簽<table></table>創(chuàng)建表格<tr></tr>創(chuàng)建表格中的一行，一般包括一個(gè)或多個(gè)列元素<td></td>創(chuàng)建表格中的一列<caption></caption>標(biāo)簽，定義表格的標(biāo)題<th></th>可以是表格中的第一個(gè)<td>標(biāo)簽，作為表格內(nèi)的標(biāo)題行6/12/20237<table>標(biāo)簽的屬性6/12/20238<tr>標(biāo)簽的屬性6/12/20239<td>標(biāo)簽的屬性6/12/202310例3.10若要在網(wǎng)頁(yè)上顯示如下效果的表格，考慮該如何設(shè)計(jì)HTML文件代碼查看源代碼6/12/202311利用表格進(jìn)行網(wǎng)頁(yè)布局表格標(biāo)簽除了繪制文本表格外，還經(jīng)常用來(lái)進(jìn)行網(wǎng)頁(yè)布局。表格是最常用的頁(yè)面元素，可以用來(lái)固定文本或圖像的顯示位置。通常我們使用<table>、<tr>、<td>標(biāo)記及其屬性對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行分塊顯示。在Internet上瀏覽的許多頁(yè)面都大量使用了表格，很多較復(fù)雜的頁(yè)面布局就是利用表格來(lái)完成的。6/12/202312例3.12使用表格標(biāo)簽設(shè)計(jì)如下頁(yè)面結(jié)構(gòu)。查看源代碼6/12/202313例3.13試用HTML表格結(jié)構(gòu)設(shè)計(jì)如下網(wǎng)站截圖的右下角目錄部分。查看源代碼6/12/202314利用表格進(jìn)行網(wǎng)頁(yè)布局//cn/common/whpj.html//6/12/202315什么是表單？6/12/202316什么是表單？表單是實(shí)現(xiàn)圖形用戶(hù)界面的基本元素，它包括按鈕、文本框、單選框、復(fù)選框等，它們是HTML實(shí)現(xiàn)交互功能的主要接口。用戶(hù)通過(guò)表單向服務(wù)器提交數(shù)據(jù)。表單的使用包括兩個(gè)部分：一部分是用戶(hù)界面，提供用戶(hù)輸入數(shù)據(jù)的元件；另一部分是處理程序，可以是客戶(hù)端程序，在瀏覽器中執(zhí)行；也可以是服務(wù)器處理程序，處理用戶(hù)提交的數(shù)據(jù)，返回處理結(jié)果。6/12/202317表單的定義定義表單的語(yǔ)法如下： <formmethod="get|post"action="處理程序名"> [<inputtype=輸入域種類(lèi)name=輸入域名>] [textarea定義] [select定義]</form><form></form>標(biāo)簽對(duì)用來(lái)創(chuàng)建一個(gè)表單，即定義表單的開(kāi)始和結(jié)束位置，具有action、method、target、title、enctype等屬性。6/12/202318表單的輸入域不同類(lèi)型的輸入域?yàn)橛脩?hù)提供靈活多樣的數(shù)據(jù)輸入方式。表單的輸入域有如下3大類(lèi)：以標(biāo)記<input>定義的多種輸入域，包括text，radio，checkbox，password，hidden，button，submit和reset等。以標(biāo)記<textarea>定義的文本域。以標(biāo)記<select>和<option>定義的下拉列表框。6/12/202319常用的表單輸入域6/12/202320<input>表單輸入標(biāo)記<input>標(biāo)記在表單中使用頻繁，大部分表單內(nèi)容需要用到此標(biāo)記。其語(yǔ)法如下：

<input

name=namevalue=valuealigh=left|center|righvalign=top|middle|bottomtype=text|password|checkbox|radio|submit|reset|hidden|buttonmaxlength=nsize=nchecked

onclick=functiononselect=function>

其中value：用于設(shè)定表單默認(rèn)值； checked：表示選擇框中，此項(xiàng)被默認(rèn)選中；

maxlength：表示在輸入單行文本的時(shí)候，最大允許字符數(shù)； size：用于設(shè)定表單框的尺寸； onclick：表示在按下按鈕時(shí)調(diào)用指定的子程序； onselect：表示當(dāng)前項(xiàng)被選擇時(shí)調(diào)用指定的子程序。6/12/202321<input>標(biāo)簽舉例姓名：<inputtype="text"name="name"size="20">密碼：<inputtype="password"name="password"size="20"maxlength="15">性別：<inputtype="radio"name="gender"value="boy">男<inputtype="radio"name="gender"value="girl">女興趣愛(ài)好： <inputtype="checkbox"name="interest">音樂(lè) <inputtype="checkbox"name="interest">運(yùn)動(dòng) <inputtype="checkbox"name="interest">看書(shū)<inputtype="button"name="submit"value="確認(rèn)"><inputtype="submit"name="ok"value="提交"><inputtype="reset"name="reset"value="重置">6/12/202322例3.14一個(gè)簡(jiǎn)單的<input>標(biāo)簽實(shí)例<html><head><title><input>標(biāo)簽舉例</title></head><body>姓名：<inputtype="text"name="name"size="20"><p>密碼：<inputtype="password"name="password"size="20"maxlength="15"><p>性別：<inputtype="radio"name="gender"value="boy">男<inputtype="radio"name="gender"value="girl">女<p>興趣愛(ài)好：<inputtype="checkbox"name="interest">音樂(lè)    <inputtype="checkbox"name="interest">運(yùn)動(dòng)    <inputtype="checkbox"name="interest">看書(shū)    <inputtype="checkbox"name="interest">上網(wǎng)    <inputtype="checkbox"name="interest">旅游    <p><inputtype="submit"name="ok"value="提交"><inputtype="reset"name="reset"value="重置"> </body> </html>6/12/202323<select>標(biāo)簽用<select>標(biāo)記可以在表單中插入一個(gè)下拉菜單，其語(yǔ)法如下：

<select

name=namesize=nmultiple> <optionvalue=設(shè)定值[selected]>表項(xiàng)內(nèi)容 </option> <optionvalue=設(shè)定值[selected]>表項(xiàng)內(nèi)容 </option> …… </select> 其中name：設(shè)定下拉菜單的名稱(chēng)；

size：設(shè)定菜單框的高度，也就是一次顯示幾個(gè)菜單項(xiàng)；

multiple：是可選項(xiàng)，若定義該屬性，則下拉列表中的內(nèi)容允許進(jìn) 行多選。

6/12/202324<select>標(biāo)簽舉例例3.15<select>下拉菜單舉例<html><head><title><select>標(biāo)簽舉例</title></head><body>請(qǐng)選擇你所在的年級(jí)：<select><option>大一</option><option>大二</option><option>大三</option><option>大四</option></select></body></html>6/12/202325將下面兩個(gè)例子分別與例3.15進(jìn)行比較例3.16<html><head><title><select>標(biāo)簽舉例</title></head><body>請(qǐng)選擇日期：<selectsize=7><option>星期日</option><option>星期一</option><option>星期二</option><option>星期三</option><option>星期四</option><option>星期五</option><option>星期六</option></select> </body> </html>例3.17<html><head><title><select>標(biāo)簽舉例</title></head><body>請(qǐng)選擇你喜歡的球類(lèi)運(yùn)動(dòng)：<selectsize=3multiple><option>足球</option><option>籃球</option><option>排球</option><option>乒乓球</option><option>羽毛球</option><option>臺(tái)球</option><option>網(wǎng)球</option></select></body></html>6/12/202326<select>標(biāo)簽<select>標(biāo)簽中包含了多個(gè)<option>標(biāo)簽，<option>標(biāo)簽有兩個(gè)常用的屬性：value和selectedvalue用來(lái)指定控制操作的初始值，缺省時(shí)初值為option的內(nèi)容selected設(shè)定時(shí)表明該項(xiàng)內(nèi)容被預(yù)置6/12/202327<select>標(biāo)簽舉例例3.18一段簡(jiǎn)單的包含下拉菜單的頁(yè)面代碼，注意<option>標(biāo)簽的屬性<body>請(qǐng)選擇你最喜歡的顏色：<select><optionvalue="">----放棄選擇----</option><optionvalue=1selected>紅色</option><optionvalue=2>黃色</option><optionvalue=3>藍(lán)色</option><optionvalue=4>綠色</option><optionvalue=5>紫色</option><optionvalue=6>黑色</option><optionvalue=7>白色</option></select></body>6/12/202328<textarea>標(biāo)簽<textarea></textarea>在<form>表單中創(chuàng)建一個(gè)能夠輸入多行文本的文本框?qū)傩裕篶ols(列數(shù))，rows(行數(shù))，單位是字符數(shù)標(biāo)簽語(yǔ)法如下： 此處顯示在文本框外的提示信息 <textareaname=namecols=xrows=y> 此處顯示在文本框里的預(yù)留信息 </textarea>6/12/202329例3.19一段簡(jiǎn)單的包含多行文本框的頁(yè)面代碼<body><tablewidth="50%"border="0"cellspacing="0"cellpadding="0"><tr><tdalign="center">您的意見(jiàn)對(duì)我很重要：</td></tr><tr><tdalign="center"><textareaname="yijian"cols="60"rows="10">請(qǐng)將您的建議輸入到此區(qū)域</textarea></td></tr><tr><tdalign="center"><inputtype="submit"name="ok"value="提交"><inputtype="reset"name="reset"value="重置"></td></tr></body>6/12/202330幀標(biāo)簽框架(Frame)又常被稱(chēng)為幀，利用框架可以將瀏覽器顯示窗口分割成多個(gè)相互獨(dú)立的區(qū)域，每個(gè)區(qū)域可以顯示獨(dú)立的HTML頁(yè)面。以下是使用框架的一個(gè)簡(jiǎn)例查看代碼6/12/202331幀標(biāo)簽框架的定義較為特殊，首先確定如何劃分窗口，然后建立描述窗口分割的主文件，再為每個(gè)框架建立相應(yīng)的HTML文件。主文件的定義方法：<html><head>[頭部標(biāo)記](méi)</head><frameset>{<frameset>...</frameset>}<frame><frame>…</frameset>[<noframes>字符串</noframes>]</html>6/12/202332<frameset>

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 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ì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論