2023學(xué)年完整公開(kāi)課版HTML基礎(chǔ)教程

上傳人：?jiǎn)?** IP屬地：安徽上傳時(shí)間：2023-05-09 格式：PPT 頁(yè)數(shù)：116 大?。?.89MB 積分：50 舉報(bào) 版權(quán)申訴

2023學(xué)年完整公開(kāi)課版HTML基礎(chǔ)教程_第2頁(yè)

2023學(xué)年完整公開(kāi)課版HTML基礎(chǔ)教程_第3頁(yè)

2023學(xué)年完整公開(kāi)課版HTML基礎(chǔ)教程_第4頁(yè)

2023學(xué)年完整公開(kāi)課版HTML基礎(chǔ)教程_第5頁(yè)

已閱讀5頁(yè)，還剩111頁(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)介

HTML語(yǔ)法§1HTML基礎(chǔ)HTML建立與測(cè)試網(wǎng)頁(yè)標(biāo)記符Web頁(yè)的結(jié)構(gòu)設(shè)置頁(yè)面屬性添加注釋顯示特殊字符一、HTML（HyperTextMarkupLanguage）

——超文本標(biāo)記（標(biāo)簽）語(yǔ)言，是表示網(wǎng)頁(yè)的一種規(guī)范

——一組影響網(wǎng)頁(yè)內(nèi)容顯示的標(biāo)記符的集合

使用HTML語(yǔ)言描述的文件，能獨(dú)立于各種操作系統(tǒng)平臺(tái)（如UNIX，WINDOWS等），訪問(wèn)它只需要一個(gè)WWW瀏覽器，我們所看到的網(wǎng)頁(yè)，是瀏覽器對(duì)HTML文件進(jìn)行解釋的結(jié)果。二、測(cè)試和創(chuàng)建Web頁(yè)1.網(wǎng)頁(yè)編輯工具純文檔編輯工具——記事本所見(jiàn)即所得工具——FrontPage、Dreamweave2.網(wǎng)頁(yè)創(chuàng)建步驟(使用“記事本”創(chuàng)建網(wǎng)頁(yè))打開(kāi)“程序/附件/記事本”在“記事本”的窗口中輸入HTML代碼選擇“文件”菜單的“另存為”命令在“文件名”框中輸入網(wǎng)頁(yè)的名稱，文件名必須以.html或.htm為后綴名單擊保存3.網(wǎng)頁(yè)測(cè)試IE工具即現(xiàn)三、標(biāo)記符1.標(biāo)記符的定義：

——HTML語(yǔ)言通知瀏覽器如何顯示網(wǎng)頁(yè)內(nèi)容的方式2.標(biāo)記符的形式：所有標(biāo)記符都用尖括號(hào)括起來(lái)絕大多數(shù)標(biāo)記符是成對(duì)出現(xiàn)的，即包括開(kāi)始標(biāo)記符和結(jié)束標(biāo)記符，個(gè)別是單一標(biāo)記符。例如：<TITLE></TITLE><P>、<BR>、<HR>開(kāi)始標(biāo)記符和結(jié)束標(biāo)記符定義了標(biāo)記符所影響的范圍，它們的區(qū)別是結(jié)束標(biāo)記符多了一個(gè)斜線/，例如：<FONTcolor=“red”>好好學(xué)習(xí)</FONT>天天向上

不區(qū)分大小寫(xiě)，但為了可讀性和維護(hù)性，使用大寫(xiě)<HTML><H1>這是H1格式的字體</H1><BR>這是默認(rèn)格式的字體</HTML>3.標(biāo)記符的屬性作用——位置——形式——<FONTsize="1"color="red">紅色一號(hào)的文字</FONT>

學(xué)習(xí)和掌握HTML的關(guān)鍵：HTML標(biāo)記符及其屬性對(duì)標(biāo)記符作用的內(nèi)容進(jìn)行更詳細(xì)的控制開(kāi)始標(biāo)記符的尖括號(hào)里，與標(biāo)記符之間用空格隔開(kāi)，屬性值跟在相應(yīng)的屬性之后，用等號(hào)連接，不用屬性之間用空格隔開(kāi)小寫(xiě)四、Web頁(yè)的結(jié)構(gòu)HTML必須包含的基本結(jié)構(gòu)標(biāo)記符：HTML標(biāo)記：<HTML></HTML>頭標(biāo)記：<HEAD></HEAD>標(biāo)題標(biāo)記：<TITLE></TITLE>正文標(biāo)記：<BODY></BODY>三大結(jié)構(gòu)：

<HTML>

<HEAD>

<TITLE>

</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>HTML標(biāo)記<HTML></HTML>Web頁(yè)的第一個(gè)和最后一個(gè)標(biāo)記符Web頁(yè)的其他所有內(nèi)容都位于這對(duì)標(biāo)記符之間HTML標(biāo)記符告訴瀏覽器或其他閱讀該頁(yè)的程序，此文件為一個(gè)Web頁(yè)不包含其它屬性首部標(biāo)記<HEAD></HEAD>位于Web頁(yè)的開(kāi)頭，不包括Web頁(yè)的任何實(shí)際內(nèi)容，提供一些與Web頁(yè)有關(guān)的特定信息通常包含一下標(biāo)記符：標(biāo)題標(biāo)記符——<TITLE></TITLE>META標(biāo)記符——<META>BGSOUND標(biāo)記符——<BGSOUND>正文標(biāo)記符<BODY></BODY>包含Web頁(yè)的具體內(nèi)容，包括文字、圖形、超鏈接及其他各種HTML對(duì)象。正文標(biāo)記符中的文字——如果沒(méi)有其他標(biāo)記符修飾，正文標(biāo)記符中的文字將以無(wú)格式的形式顯示如果瀏覽器窗口顯示不下，則自動(dòng)換行空格、回車這些格式控制在顯示時(shí)都不起作用標(biāo)題標(biāo)記符——<TITLE></TITLE>用于定義網(wǎng)頁(yè)的標(biāo)題,并在瀏覽器窗口的標(biāo)題欄中顯示網(wǎng)頁(yè)標(biāo)題可被瀏覽器用作書(shū)簽和收藏清單<HTML><HEAD>

</HEAD>

<BODY>請(qǐng)看瀏覽器的標(biāo)題欄。</BODY></HTML>

例子：<HTML><HEAD><TITLE>網(wǎng)頁(yè)標(biāo)題</TITLE></HEAD><BODY>正文，正文，正文，正文，正文，正文，正文，正文，正文</BODY></HTML>META標(biāo)記符——<META>用于描述不包含在標(biāo)準(zhǔn)HTML里的一些文檔信息，例如開(kāi)發(fā)工具，作者，網(wǎng)頁(yè)關(guān)鍵字，網(wǎng)頁(yè)描述等。這些定義的內(nèi)容并不在網(wǎng)頁(yè)頁(yè)面中顯示，但是一些搜索引擎可以檢索這些信息，瀏覽者可以根據(jù)這些關(guān)鍵字或描述查找到該網(wǎng)頁(yè)。常用功能是設(shè)置自動(dòng)轉(zhuǎn)址功能——使瀏覽器自動(dòng)從一個(gè)地址跳轉(zhuǎn)到另一個(gè)地址位置META標(biāo)記符的常用屬性包括：name、content和http-equivname屬性給出特性名

content屬性給出特性值http-equiv屬性指定HTTP響應(yīng)名稱，通常用于替換name屬性，HTTP服務(wù)器使用該屬性值為HTTP響應(yīng)消息頭收集信息例1<METAhttp-equiv="Content-Script-Type"content="text/javascript">設(shè)置客戶端行內(nèi)程序的語(yǔ)言是JavaScript例2<METAhttp-equiv="Content-Style-Type"content="text/css">設(shè)置行內(nèi)樣式的樣式語(yǔ)言為CSS例3<HTML><HEAD><TITLE>META示例</TITLE><METAhttp-equiv="Refresh"content=“10;URL="></HEAD><BODY>再過(guò)10秒鐘，我就上學(xué)校的網(wǎng)站了！</BODY></HTML><html><head><title>我的第一個(gè)網(wǎng)頁(yè)</title><METANAME="Generator"CONTENT="editplus"><METANAME="Author"CONTENT="zhaoming"><METANAME="Keywords"CONTENT="title"><METANAME="Description"CONTENT="sampleweb"></head><body></body></html>例4五、設(shè)置頁(yè)面屬性正文標(biāo)記符包括一些常用屬性，可以用于設(shè)置網(wǎng)頁(yè)背景顏色和圖案，以及設(shè)置文檔中文字和超鏈接的顏色設(shè)置頁(yè)面背景顏色——bgcolor<BODYbgcolor=“顏色名稱">設(shè)置頁(yè)面背景圖像——background<BODYbackground="背景圖案的地址">使用背景圖案時(shí)，如果圖案小于瀏覽器窗口的大小，則瀏覽器會(huì)自動(dòng)象鋪地板磚一樣平鋪背景圖案?？梢酝瑫r(shí)設(shè)置背景圖案和背景色，以便在不能顯示圖像的瀏覽器上顯示背景色頁(yè)面基本屬性——定義在<body>中background=""背景圖片文件名bgcolor=""背景顏色text=""文本默認(rèn)顏色link=""未被訪問(wèn)鏈接源文字的顏色alink=""被激活鏈接源文字的顏色vlink=""訪問(wèn)過(guò)鏈接源文字的顏色topmargin=""信息內(nèi)容的頂邊距離leftmargin=“”信息內(nèi)容的左邊距離背景音樂(lè)標(biāo)記符——<BGSOUND>用于指定網(wǎng)頁(yè)的背景音樂(lè)屬性src，用于指定背景音樂(lè)的源文件。loop，用于指定背景音樂(lè)重復(fù)的次數(shù)，如果不指定該屬性，則背景音樂(lè)無(wú)限循環(huán)例子

<BGSOUNDsrc="canyon.mid"loop="1">表1-116種標(biāo)準(zhǔn)顏色

色彩名十六進(jìn)制值色彩名十六進(jìn)制值A(chǔ)qua（水藍(lán)色）#00FFFFNavy（藏青色）#000080Black（黑色）#000000Olive（茶青色）#808000Blue（藍(lán)色）#0000FFPurple（紫色）#800080Fuchsia（櫻桃色）#FF00FFRed（紅色）#FF0000Gray（灰色）#808080Silver（銀色）#C0C0C0Green（綠色）#008000Teal（茶色）#008080Lime（石灰色）#00FF00White（白色）#FFFFFFMaroon（褐紅色）#800000Yellow（黃色）#FFFF00瀏覽器將采用默認(rèn)的設(shè)置bgcolor——白色或灰色text——黑色Link——藍(lán)色vlink——紫色alink——紅色例子：<BODY

bgcolor="#000000"text="#FFFFFF"link="#999999"vlink="#CCCCCC"alink="#666666">

<HTML><HEAD><TITLE>背景圖案示例</TITLE></HEAD><BODYbackground="background.jpg">

背景圖案示例</BODY></HTML>六、添加注釋注釋的作用HTML注釋的格式由開(kāi)始標(biāo)記符構(gòu)成標(biāo)記符之間的任何內(nèi)容都將被瀏覽器解釋為注釋，而不在瀏覽器中顯示例子：<HTML> <HEAD><TITLE>網(wǎng)頁(yè)標(biāo)題</TITLE> </HEAD> <BODY>正文，正文，正文</BODY> </HTML>注釋可插入在Web頁(yè)的任何位置七、顯示特殊字符

特殊字符——參考字符（附錄2）參考字符以“

&”號(hào)開(kāi)始，以“

;”結(jié)束參考字符既可用數(shù)字代碼表示，也可用代碼名稱表示與HTML標(biāo)記符同，字符代碼名稱區(qū)分大小寫(xiě)例子：

<BODY><Tom&Jerry>isapopularVCDprogram.</BODY><Tom&Jerry>isapopularVCDprogram

特殊字符數(shù)字代碼代碼名稱&&&<<<>>>空格

小結(jié)WWW由無(wú)數(shù)的Web服務(wù)器構(gòu)成，通過(guò)瀏覽器訪問(wèn)這些服務(wù)器上的網(wǎng)頁(yè)，不同的網(wǎng)頁(yè)通過(guò)超鏈接聯(lián)系在一起，構(gòu)成了WWW的網(wǎng)狀結(jié)構(gòu)。HTML是表示網(wǎng)頁(yè)的一種規(guī)范，它通過(guò)標(biāo)記符定義了網(wǎng)頁(yè)內(nèi)容的顯示。最基本的HTML標(biāo)記符包括：HTML標(biāo)記符<HTML>和</HTML>首部標(biāo)記<HEAD>和</HEAD>正文標(biāo)記<BODY>和</BODY>。BODY標(biāo)記符包括一些常用屬性，用于控制網(wǎng)頁(yè)的基本顯示效果。發(fā)布網(wǎng)頁(yè)的基本過(guò)程為：制作本地站點(diǎn)、申請(qǐng)網(wǎng)頁(yè)空間、上傳網(wǎng)頁(yè)?！?文本控制字體控制標(biāo)記符物理字符樣式滾動(dòng)文字效果文本分段文本對(duì)齊列表格式一、字體控制標(biāo)記符——<FONT></FONT>size屬性——控制字符的大小size=""

字號(hào)從1~7,字號(hào)越大，默認(rèn)值為3color屬性——控制字符的顏色color=""使用顏色名稱或十六進(jìn)制值指定顏色face屬性——指定字體樣式face=""常用的英文字體有“TimesNewRoman”、“Arial”等常用的中文字體有“宋體”、“楷體”等例子：<FONTsize="2"face="宋體"color="#0000ff">例子一</FONT><FONTcolor="green">例子二</FONT><FONTface="ArialBlack，楷體"size=+1>例子三</FONT><FONTface=“隸書(shū)”

color=“yellow”size=“7”>例子四</FONT>二、物理字符樣式指標(biāo)記符本身就說(shuō)明了所修飾文字的效果的字符樣式使用方法：將設(shè)置格式的字符括在標(biāo)記符之間由于帶有超鏈接的文本下通常包含下劃線，因此下劃線格式易讓人產(chǎn)生誤解，建議使用時(shí)慎重常見(jiàn)的物理字符樣式標(biāo)記功能標(biāo)記功能<B></B>粗體<STRIKE></STRIKE>刪除線<BIG></BIG>大字體<SUB></SUB>下標(biāo)<I></I>斜體<SUP></SUP>上標(biāo)<S></S>刪除線<TT></TT>固定寬度字體<SMALL></SMALL>小字體<U></U>下劃線<HTML><HEAD><TITLE>物理字符樣式效果示例</TITLE></HEAD><BODY><P><B>此處為粗體顯示文本</B><P><BIG>此處為大字體文本</BIG><P><SMALL>此處為小字體文本</SMALL><P><I>此處為斜體文本</I><P><TT>此處為等寬字體文本</TT><P><U>此處為下劃線文本</U><P><S>此處為使用<S>標(biāo)記設(shè)置的刪除線文本</S><P><STRIKE>此處為使用<STRIKE>標(biāo)記設(shè)置的刪除線文本</STRIKE><P>此處為上標(biāo)示例：x<SUP>2</SUP>+y<SUP>2</SUP>=R<SUP>2</SUP><P>此處為下標(biāo)示例：H<SUB>2</SUB>SO<SUB>4</SUB></BODY></HTML>三、滾動(dòng)文字效果——<MARQUEE></MARQUEE>作用：標(biāo)記符之間的內(nèi)容以滾動(dòng)的方式顯示屬性：width和height——滾動(dòng)字幕滾動(dòng)區(qū)域的寬度和高度align——滾動(dòng)字幕與周圍對(duì)象對(duì)齊的方式behavior——滾動(dòng)字幕移動(dòng)的方式bgcolor——滾動(dòng)字幕區(qū)域的背景色direction——文本滾動(dòng)的方向hspace和vspace——滾動(dòng)字幕四周水平和垂直方向上的間隙loop——滾動(dòng)重復(fù)的次數(shù)scrollamout——文本滾動(dòng)的步進(jìn)象素間距scrolldelay——兩次文本重畫(huà)之間的毫秒延時(shí)數(shù)<HTML><HEAD><TITLE>滾動(dòng)字幕示例</TITLE></HEAD><BODY> <DIValign="center"> <MARQUEEbgcolor="#00FFFF"width="500">

<FONTface="楷體_gb2312">哈哈哈，我在滾動(dòng)！</FONT> </DIV><BR> <IMGsrc="barbarian.jpg"align="absmiddle">圖像也可以滾動(dòng)哦！

<P>

我滾動(dòng)的很快！

</MARQUEE></BODY></HTML>四、文本分段1.段落標(biāo)記符——<P></P>將文檔劃分為段落可以省略</P>2.換行標(biāo)記符——<BR>在文檔中強(qiáng)制斷行區(qū)別：<P>不能產(chǎn)生多個(gè)空行，而<BR>則可在內(nèi)容之間設(shè)置多個(gè)空行，即形成空白<P>是斷段，而<BR>是斷行<HTML><HEAD><TITLE><P>與<BR>的用法</TITLE></HEAD><BODY> <P>第一段

<P>第二段，用<BR>標(biāo)記符控制斷行<BR>

仍然為第二段，但此行已經(jīng)斷開(kāi)

<P>第三段

<P>第四段，多個(gè)<P>標(biāo)記符并沒(méi)有起到產(chǎn)生多個(gè)空行的效果<P><P><P><P>

但多個(gè)<BR>標(biāo)記符可以產(chǎn)生多個(gè)空行效果<BR><BR><BR><BR><P>此為最后一段

</BODY></HTML>3.水平線標(biāo)記符——<HR>在網(wǎng)頁(yè)內(nèi)容中添加水平線，分隔文檔內(nèi)容屬性：size：水平線的粗細(xì)程度，用整數(shù)表示，默認(rèn)值為2<HRsize="4">width：水平線的長(zhǎng)度，用像素長(zhǎng)度或?qū)挾鹊陌俜直缺硎?lt;HRwidth="60%"> <HRwidth="110">noshade：去除水平線的3D樣式color：水平線的顏色align：水平線的對(duì)齊方式例子：<HRsize="5"withd="50%"color="red"align="center"noshade><HTML><HEAD><TITLE>水平線效果</TITLE></HEAD><BODY>

以下是默認(rèn)水平線：<HR>

以下是粗為5像素的水平線：<HRsize="5">

以下是長(zhǎng)度為100像素的水平線：<HRwidth="100">

以下是長(zhǎng)度為屏幕寬度50%的水平線：<HRwidth="50%">

以下是粗為5像素的實(shí)心水平線：<HRsize="5"noshade>

以下是紅色的水平線：<HRcolor="red"></BODY></HTML>4.標(biāo)題標(biāo)記符——<Hn></Hn>標(biāo)識(shí)文檔中的標(biāo)題和副標(biāo)題瀏覽器在解釋標(biāo)題標(biāo)記符時(shí)，會(huì)自動(dòng)改變文字的大小，并且將字體改為黑體，同時(shí)將內(nèi)容設(shè)為一個(gè)段落n是1至6的數(shù)字，<H1>表示最大的標(biāo)題，<H6>表示最小的標(biāo)題例子：<HTML><HEAD><TITLE>標(biāo)題效果</TITLE></HEAD><BODY><H1>此為一級(jí)標(biāo)題</H1><H2>此為二級(jí)標(biāo)題</H2><H3>此為三級(jí)標(biāo)題</H3><H4>此為四級(jí)標(biāo)題</H4><H5>此為五級(jí)標(biāo)題</H5><H6>此為六級(jí)標(biāo)題</H6><P>此為正常文本</P></BODY></HTML>五、文本對(duì)齊1.align屬性設(shè)置段落的對(duì)齊格式取值：right（右）、left（左）、center（居中）justify（兩端）應(yīng)用范圍：多種標(biāo)記符，最典型的是應(yīng)用于P、Hn、HR、DIV不同的標(biāo)記符，其align屬性的默認(rèn)值并不相同標(biāo)記符P、Hn的align屬性默認(rèn)值為left標(biāo)記符HR的align屬性默認(rèn)值為center2.DIV標(biāo)記符——<DIV></DIV>為文檔分節(jié)，以便為文檔的不同部分應(yīng)用不同的段落格式必須與align等屬性聯(lián)合使用位于DIV標(biāo)記符中的多段文本將被認(rèn)為是一個(gè)節(jié)，可為它們?cè)O(shè)置一致的對(duì)齊格式。3.CENTER標(biāo)記符——<CENTER></CENTER>將<CENTER>和</CENTER>包括起來(lái)的內(nèi)容定義為居中對(duì)齊<HTML><HEAD><TITLE>使用align屬性</TITLE></HEAD><BODY><P>本行為默認(rèn)對(duì)齊的段落，相當(dāng)于align="left"<Palign="center">本行為居中對(duì)齊的段落

<Palign="right">本行為右對(duì)齊的段落

<H1align="center">本行為居中對(duì)齊的一級(jí)標(biāo)題</H1>

以下為左對(duì)齊的水平線：

<HRalign="left"width="50%"></BODY></HTML><HTML><HEAD><TITLE>使用DIV標(biāo)記符</TITLE></HEAD><BODY><DIValign="center"><H1>浣溪沙</H1><H4>晏殊</H4><HRwidth="400"><P>一曲新詞酒一杯，</P><P>去年天氣舊池臺(tái)，</P><P>夕陽(yáng)西下幾時(shí)回？</P><P>無(wú)可奈何花落去，</P><P>似曾相識(shí)燕歸來(lái)，</P><P>小園香徑獨(dú)徘徊。</P></DIV></BODY></HTML>六、列表格式1.有序列表（Orderedlist）定義：一種在表的各項(xiàng)前顯示有數(shù)字或字母的縮排列表

<OL> <LI>列表項(xiàng)1 <LI>列表項(xiàng)2 <LI>列表項(xiàng)3 </OL>OL標(biāo)記符的屬性：type——設(shè)置數(shù)字序列樣式start——設(shè)置數(shù)字序列的起始值,值可以是任意整數(shù)當(dāng)位于OL標(biāo)記符內(nèi)時(shí)，LI標(biāo)記符的屬性：type——設(shè)置數(shù)字樣式，取值與OL的type屬性相同value——設(shè)置一個(gè)新的數(shù)字序列起始值，以獲得非連續(xù)性的數(shù)字序列值type屬性的值含義1阿拉伯?dāng)?shù)字：1、2、3等，此項(xiàng)為默認(rèn)值A(chǔ)大寫(xiě)字母：A、B、C等a小寫(xiě)字母：a、b、c等I大寫(xiě)羅馬數(shù)字：I、II、III、IV等i小寫(xiě)羅馬數(shù)字：i、ii、iii、iv等<HTML><HEAD><TITLE>有序列表示例</TITLE></HEAD><BODY>用大寫(xiě)羅馬字母表示的有序列表：<OLtype="I">

<LI>列表項(xiàng)1<LI>列表項(xiàng)2<LI>列表項(xiàng)3</OL>起始數(shù)字為3的有序列表：<OLstart="3"><LI>列表項(xiàng)1<LI>列表項(xiàng)2<LI>列表項(xiàng)3</OL>編號(hào)不連續(xù)的有序列表<OL><LI>列表項(xiàng)1<LI>列表項(xiàng)2<LIvalue="5">列表項(xiàng)3</OL>變換了數(shù)字樣式的有序列表<OL>

<LI>列表項(xiàng)1<LI>列表項(xiàng)2<LItype="A">列表項(xiàng)3</OL></BODY></HTML>有序列表的嵌套使用有序列表嵌套可以獲得不同層次的編號(hào)列表。嵌套時(shí)，只需將內(nèi)層列表作為外層列表的一個(gè)列表項(xiàng)即可。列表的嵌套層數(shù)沒(méi)有限制。<HTML><HEAD><TITLE>嵌套的有序列表</TITLE></HEAD><BODY><H2>嵌套的有序列表</H2><OLtype="A"> <LI>列表項(xiàng)1 <OL> <LI>子列表項(xiàng)1 <LI>子列表項(xiàng)2 <LI>子列表項(xiàng)3 </OL> <LI>列表項(xiàng)2 <LI>列表項(xiàng)3</OL></BODY></HTML>2.無(wú)序列表（Unorderedlist）定義：一種在表的各項(xiàng)前顯示有特殊項(xiàng)目符號(hào)的縮排列表。無(wú)序列表標(biāo)記符<UL></UL>UL標(biāo)記符的type屬性——控制列表項(xiàng)前特殊符號(hào)的顯示列表項(xiàng)標(biāo)記符<LI></LI>LI標(biāo)記符的type屬性的值如下表所示：值type屬性的含義disc實(shí)心圓，通常是非嵌套列表的默認(rèn)值circle空心圓，通常是嵌套列表的默認(rèn)值square實(shí)心或空心的方塊，取決于瀏覽器在InternetExplorer中，type的值是區(qū)分大小寫(xiě)的

<HTML><HEAD><TITLE>無(wú)序列表示例</TITLE></HEAD><BODY>默認(rèn)無(wú)序列表：<UL>

<LI>列表項(xiàng)1

<LI>列表項(xiàng)2

<LI>列表項(xiàng)3</UL>使用方塊作為列表項(xiàng)標(biāo)記的無(wú)序列表：<ULtype="square">

<LI>列表項(xiàng)1

<LI>列表項(xiàng)2

<LI>列表項(xiàng)3</UL></BODY></HTML>3.混合嵌套列表有序列表和無(wú)序列表也可互相嵌套，如以下HTML代碼所示：<HTML><BODY><OL><LI>列表項(xiàng)1<LI>列表項(xiàng)2<UL><LI>子列表項(xiàng)1<LI>子列表項(xiàng)2</UL><LI>列表項(xiàng)3</OL></BODY></HTML>小結(jié)HTML中用于進(jìn)行文本分段的標(biāo)記符包括：段落標(biāo)記符P、換行標(biāo)記符BR、水平線標(biāo)記符HR、標(biāo)題標(biāo)記符Hn等在標(biāo)記符中使用align屬性，可控制內(nèi)容的對(duì)齊方式FONT標(biāo)記符是最常用的控制字體格式的標(biāo)記符，它可控制文字的字號(hào)、顏色以及字體物理字符樣式和邏輯字符樣式可控制文字的不同顯示效果，例如設(shè)置粗體、斜體等MARQUEE標(biāo)記符可以用于創(chuàng)建滾動(dòng)文字效果OL和LI標(biāo)記符結(jié)合，可以創(chuàng)建有序列表UL和LI標(biāo)記符結(jié)合，可以創(chuàng)建無(wú)序列表§3圖像與超鏈接Web頁(yè)圖像基礎(chǔ)圖像標(biāo)記符統(tǒng)一資源定位器(URL)超鏈接標(biāo)記符錨點(diǎn)鏈接圖像映射一、Web頁(yè)圖像基礎(chǔ)1.位圖與矢量圖位圖矢量圖描述方式用圖片上每一點(diǎn)的信息來(lái)描述圖像用線條和填充色等數(shù)學(xué)信息來(lái)描述圖像編輯工具Photoshop、Fireworks、PhotoImpactFreeHand、Illustrator、CorelDraw、Flash存儲(chǔ)量較大小顯示效果與分辨率相關(guān)與分辨率無(wú)關(guān)位圖，用點(diǎn)描述圖像矢量圖，用線條等數(shù)學(xué)信息描述圖像2.Web頁(yè)圖像格式GIF格式GraphicsInterchangeFormat(圖形交換格式)適用于顏色較少（小于256色）的圖像壓縮，并允許透明，也可以是動(dòng)畫(huà)JPEG格式JointPhotographicExpertsGroup(聯(lián)合靜態(tài)圖形專家組)可控制圖像的壓縮比率,適用于顏色較為豐富的圖像,不支持透明和動(dòng)畫(huà)PNG格式PortableNetworkGraphics(可移植網(wǎng)絡(luò)圖形)適用于矢量圖像，并允許半透明3.使用網(wǎng)頁(yè)圖像的要點(diǎn)確保文件較小使圖像具有所需的像素大小采用正確的格式進(jìn)行優(yōu)化處理控制圖像的數(shù)量和質(zhì)量合理使用動(dòng)畫(huà)圖像的處理工具

Photoshop Fireworks Flash CorelDraw二、圖像標(biāo)記符——<IMG>在網(wǎng)頁(yè)中插入圖像或動(dòng)畫(huà)元素具體屬性：src指定要顯示的圖像的文件名(URL)alt指定當(dāng)圖像無(wú)法顯示或加載時(shí)顯示的文字dynsrc動(dòng)態(tài)源,指定到視頻剪輯或VRMl文件的URLborder整數(shù)，圖像邊框的寬度align對(duì)齊方式：left、righttop、middle、bottomheight整數(shù)，圖像的高度設(shè)置圖像的高度和寬度width整數(shù)，圖像的寬度hspace像素,水平方向的空白設(shè)置圖像周圍的空白vspace像素,垂直方向的空白插入圖片<HTML><HEAD><TITLE>插入圖像示例</TITLE></HEAD><BODY><P>我插入的第一幅圖像：</P><IMGsrc=“1.jpg”alt=“人工湖"></BODY></HTML>插入視頻<HTML><HEAD><TITLE>插入視頻示例</TITLE></HEAD><BODY><H1>插入動(dòng)態(tài)視頻</H1><Palign="center"><IMGDynsrc="bike.avi"alt="騎單車"></P></BODY></HTML>圖像與周圍內(nèi)容垂直對(duì)齊

align——top、middle、bottom<HTML><HEAD><TITLE>文本與圖像的垂直對(duì)齊示例</TITLE></HEAD><BODY><DIValign="center"><P>此圖像與文本頂部<IMGsrc="1.jpg"border="4"align="top">對(duì)齊</P><P>此圖像與文本

<IMGsrc="2.jpg"border="1"align="middle">中央對(duì)齊</P><P>此圖像與文本

<IMGsrc="3.jpg"border="1"align="bottom">底部對(duì)齊</P></DIV></BODY></HTML>圖文混排時(shí)的圖像對(duì)齊

align——left、right實(shí)現(xiàn)圖文混排:left表示圖像居左，文本在圖像右側(cè)；right表示圖像居右，文本在圖像左側(cè)。解除在圖像的左、右環(huán)繞文本:<BRclear=“l(fā)eft|right|all”>在插入標(biāo)記<BRclear="left|right|all">的下一行文本將轉(zhuǎn)入正常顯示。三、統(tǒng)一資源定位器1.URL(UniversalResourceLocator，統(tǒng)一資源定位器)

——表示W(wǎng)eb上資源的一種方法，通?？梢岳斫鉃橘Y源的地址組成協(xié)議代碼裝有所需文件的計(jì)算機(jī)地址具體的文件路徑和文件名。例如：/forum/index.htm協(xié)議協(xié)議表明應(yīng)使用何種方法獲得所需的信息超文本傳輸協(xié)議：HTTP(HyperTextTransferProtocol)。

使用形式：http://webhostname.somedomain/path/filename.htm文件傳輸協(xié)議：FTP(FileTransferProtocol)。

使用形式：ftp://ftphostname.somedomain/path/filename.htm電子郵件協(xié)議：mailto。

使用形式：mailto:username@somedomain新聞組協(xié)議：news(Usenet)。

使用形式：news://newshostname.somedomain2.絕對(duì)URLInternet上資源的完整地址，包括完整的協(xié)議種類、計(jì)算機(jī)域名和包含路徑的文檔名其形式為：協(xié)議://計(jì)算機(jī)域名/文檔名例如：/public/HTML/example.htmhttp表示用來(lái)訪問(wèn)文檔的協(xié)議的名稱表示文檔所在計(jì)算機(jī)的域名public/HTML/example.htm表示文檔名如果在網(wǎng)頁(yè)中需要指定外部Intemet資源，應(yīng)使用絕對(duì)URL說(shuō)明省略了最后部分文件名的URL通常也認(rèn)為是絕對(duì)URL，因?yàn)樗軌蛲耆ㄎ毁Y源的位置例如，就是一個(gè)絕對(duì)URL3.相對(duì)URL

Internet上資源相對(duì)于當(dāng)前頁(yè)面的地址，它包含從當(dāng)前頁(yè)面指向目的頁(yè)面位置的路徑例如：public/example.htm使用相對(duì)URL的好處在于當(dāng)用戶需要移植站點(diǎn)時(shí)，只要保持站點(diǎn)中各資源的相對(duì)位置不變，就可以確保移植后各頁(yè)面之間的超鏈接仍能正常工作。用戶在編寫(xiě)網(wǎng)頁(yè)時(shí)，通常使用的都是相對(duì)URL(除非需要引用外部網(wǎng)頁(yè))如果在網(wǎng)頁(yè)中需要指定內(nèi)部資源，應(yīng)使用相對(duì)URL相對(duì)URL本身并不能唯一地定位資源，但瀏覽器會(huì)根據(jù)當(dāng)前頁(yè)面的絕對(duì)URL正確地理解相對(duì)URL。說(shuō)明在URL中，總是使用正斜杠(/)作為路徑分隔符，而不是使用Windows或DOS中的反斜杠(\)。在客戶端，點(diǎn)擊不同類型的鏈接時(shí)，會(huì)自動(dòng)啟動(dòng)相應(yīng)的客戶端軟件來(lái)訪問(wèn)相應(yīng)的資源。句點(diǎn)(.)——當(dāng)前目錄雙重句點(diǎn)(..)——上一級(jí)目錄(父目錄)例如./image.gif表示當(dāng)前目錄中的image．gif文件，相當(dāng)于image.gif；../public/index.htm表示與當(dāng)前目錄同級(jí)的public目錄下的index.htm文件，也就是當(dāng)前目錄上一級(jí)目錄下的public目錄中的index.htm文件四、超鏈接標(biāo)記符——<A></A>格式:<Ahref="鏈接目標(biāo)">鏈接點(diǎn)</A>href屬性：用于指定超鏈接的目標(biāo)鏈接目標(biāo)：要訪問(wèn)的目標(biāo)頁(yè)面或其他資源，使用URL來(lái)表示鏈接點(diǎn)：在<A>和<／A>之間任何可單擊的網(wǎng)頁(yè)元素，如文字或圖像<P>我的<Ahref=“”>大學(xué)</A></P>？下載功能？？電子郵件鏈接功能？target屬性？下載功能？如果href屬性指定的文件格式是瀏覽器能直接顯示或播放，那么單擊超鏈接時(shí)就會(huì)直接顯示相應(yīng)的文件如果如果href屬性指定的文件格式是瀏覽器不能直接顯示或播放，那么單擊超鏈接就可以獲得下載功能？電子郵件鏈接功能？<Ahref="mailto:電子郵箱">鏈接點(diǎn)</A>請(qǐng)按時(shí)<Ahref=“mailto:zhaofengnian@263.net”>交作業(yè)</A>！單擊電子郵件鏈接后會(huì)啟動(dòng)郵件程序五、錨點(diǎn)鏈接對(duì)同一網(wǎng)頁(yè)的不同部分或不同網(wǎng)頁(yè)的不同部分進(jìn)行鏈接錨點(diǎn)鏈接必須先定義錨點(diǎn)，然后才能定義鏈接。錨點(diǎn)的定義：<Aname=“錨點(diǎn)名稱”>[此處內(nèi)容可省略]</A>定義鏈接<Ahref="#錨點(diǎn)名稱">鏈接點(diǎn)</A>定義指向不同頁(yè)面內(nèi)錨點(diǎn)的鏈接，形式如下<Ahref="頁(yè)面URL#錨點(diǎn)名稱">鏈接點(diǎn)</A>相對(duì)URL絕對(duì)URL錨點(diǎn)鏈接六、圖像映射在一幅圖中定義若干個(gè)區(qū)域，每個(gè)區(qū)域中指定一個(gè)不同的超鏈接，當(dāng)單擊不同區(qū)域時(shí)便可以跳轉(zhuǎn)到相應(yīng)的目標(biāo)頁(yè)面。應(yīng)用：電子地圖、頁(yè)面導(dǎo)航圖、頁(yè)面導(dǎo)航條熱點(diǎn)hotspot電子地圖頁(yè)面頁(yè)面導(dǎo)航圖實(shí)例步驟：找出要定義區(qū)域的坐標(biāo)例如，在圖3-31中就要定義兩個(gè)矩形區(qū)域，它們的坐標(biāo)分別是“30,152,366,218”和“171,256,228,288”定義出映射區(qū)域——<MAP>編寫(xiě)HTML文件，在其中定義出映射區(qū)域<MAP

name="mymap"><AREA

href="file1.htm"shape="rect"coords="30,152,366,218"><AREA

href="file2.htm"shape="rect"coords="171,256,228,288"></MAP>使用映射區(qū)域在IMG標(biāo)記符中引用映射區(qū)域<IMG

src="diablo_h.jpg"usemap="#mymap">rect、circle、poly、default標(biāo)識(shí)圖像映射中的區(qū)域邊界圖像映射效果<HTML><HEAD><TITLE>圖像映射示例</TITLE></HEAD><BODY><MAPname="mymap"><AREAhref="file1.htm"shape="rect"coords="30,152,366,218"><AREAhref="file2.htm"shape="rect"coords="171,256,228,288"></MAP><P>請(qǐng)單擊以下圖像中的不同區(qū)域，以便跳轉(zhuǎn)到不同的文件</P><P><IMGsrc="diablo_h.jpg"usemap="#mymap"></P></BODY></HTML>實(shí)訓(xùn)作業(yè)1.制作一個(gè)圖文并貌的網(wǎng)頁(yè)（??301

）至少3張圖片、一個(gè)視頻文件文字不少于三段，字?jǐn)?shù)不少于100字至少用到<p><font><hr><hn>等標(biāo)記符及align屬性圖片應(yīng)分別滿足以下排版要求：實(shí)現(xiàn)文本與圖像的環(huán)繞文本居于圖片左側(cè)文字與圖片在垂直方向上居中對(duì)齊2.制作一個(gè)具有錨點(diǎn)鏈接的網(wǎng)頁(yè)（??302

）內(nèi)容具有文字與圖片錨點(diǎn)不少于四個(gè)既有頁(yè)內(nèi)錨點(diǎn)鏈接，又有頁(yè)外錨點(diǎn)鏈接3.制作一個(gè)具有超鏈接功能的網(wǎng)頁(yè)（??303

）具有絕對(duì)鏈接、相對(duì)鏈接、文件下載功能、電子郵件發(fā)送功能要求利用bgcolor、text、Link、vlink、alink等屬性修改網(wǎng)頁(yè)默認(rèn)的文字、超鏈接信息的顏色4.制作一個(gè)簡(jiǎn)單的圖像映射網(wǎng)頁(yè)（??304

）§4Photoshop&FlashPhotoshopFireworkGIF動(dòng)畫(huà)Flash動(dòng)畫(huà)§5表格表格的定義表格的作用表格的構(gòu)建步驟表格標(biāo)記符網(wǎng)頁(yè)布局一、表格的定義：

將按特定的行、列規(guī)則對(duì)內(nèi)容進(jìn)行排列<Caption></Caption>表格標(biāo)題<Tr></Tr>表格的行<Th></Th>行列標(biāo)題數(shù)據(jù)<Td></Td>普通數(shù)據(jù)<Table></Table>表格二、表格的作用：HTML表格模型使用戶可以將各種數(shù)據(jù)（包括文本、預(yù)格式化文本、圖像、鏈接、表單、表單域以及其他表格等）排成行和列，從而獲得特定的表格效果用于設(shè)計(jì)網(wǎng)頁(yè)的布局三、表格的構(gòu)造步驟：使用TABLE標(biāo)記符包括所有表格內(nèi)容使用CAPTION標(biāo)記符定義表格的標(biāo)題從第一行開(kāi)始，使用TR標(biāo)記符分隔每一行表格有多少行，就應(yīng)該有多少個(gè)TR標(biāo)記符表格的行數(shù)應(yīng)該是垂直方向上單元格的最大數(shù)在每一行(即TR標(biāo)記符后)內(nèi)，依次用TH或TD標(biāo)記符標(biāo)記每個(gè)單元格的內(nèi)容按照步驟2的做法，順次一行一行處理，直到表格結(jié)束如果遇到空單元格，只需使用空的TH或TD標(biāo)記符即可<HTML><HEAD><TITLE>表格示例</TITLE></HEAD><BODY><TABLE><CAPTION><H2>課程表<H2></CAPTION><TR><TH><IMGsrc="fire.gif"><TH>星期一<TH>星期二<TH>星期三<TH>星期四<TH>星期五<TR><TH>第1大節(jié)<TD>數(shù)學(xué)<TD>英語(yǔ)<TD>數(shù)學(xué)<TD>英語(yǔ)<TD>哲學(xué)<TR><TH>第2大節(jié)<TD>物理<TD>計(jì)算機(jī)<TD>計(jì)算機(jī)<TD><TD>計(jì)算機(jī)<TR><TH>第3大節(jié)<TD>計(jì)算機(jī)<TD><TD>英語(yǔ)<TD>計(jì)算機(jī)<TD></TABLE></BODY></HTML>二、表格標(biāo)簽符：<Table></Table>標(biāo)簽符Width屬性——表格寬度可以為像素點(diǎn)值或百分比Border屬性——邊線寬度具體數(shù)值，0表示不顯示邊線Frame屬性——控制表格邊框表示表格最外層的四條框線，該屬性的取值可以是：Void——無(wú)邊框。void是默認(rèn)值，即默認(rèn)時(shí)不顯示邊框Above——僅有頂框Below——僅有底框Hsides——僅有頂框和底框（水平方向）vsides——僅有左、右側(cè)框（垂直方向）lhs——僅有左側(cè)框rhs——僅有右側(cè)框box——包含全部四個(gè)邊框border——包含全部四個(gè)邊框其它值——2、3、4rules屬性——控制是否顯示以及如何顯示單元格之間的分隔線，取值可以是：none——無(wú)分隔線。none是默認(rèn)值，即默認(rèn)時(shí)不顯示單元格間的分隔線rows——僅有行分隔線cols——僅有列分隔線all——包括所有分隔線Align屬性——控制表格與頁(yè)面其它內(nèi)容的對(duì)齊方式，取值可以是：Left、center、rightBgcolor屬性——設(shè)置表格的背景顏色background屬性——設(shè)置表格的背景圖案Cellspacing屬性——單元格之間的距離cellpadding屬性——分割線與數(shù)據(jù)之間的距離<HTML><HEAD><TITLE>表格的邊框和分隔線示例</TITLE></HEAD><BODY><TABLEborder="4"frame="hsides"rules="rows"><CAPTION><H3>我的日程表<H3></CAPTION><TR><TH>星期一<TH>星期二<TH>星期三<TH>星期四<TH>星期五<TR><TD>MUD<TD>NBA2001<TD>聯(lián)眾軍棋<TD>聯(lián)眾軍棋<TD>笑傲江湖<TR><TD>DiabloII<TD>DiabloII<TD>聯(lián)眾軍棋<TD>升級(jí)<TD>MUD<TR><TD>MUD<TD>睡覺(jué)<TD>學(xué)習(xí)<TD>打籃球<TD>打籃球</TABLE></BODY></HTML>cellspacing屬性單元格之間的空白cellpadding屬性表格分隔線和數(shù)據(jù)之間的距離<HTML><HEAD><TITLE>表格單元格空白示例</TITLE></HEAD><BODY>表格1<HRalign="left"width="50%"><TABLEbordercellspacing=10><TR><TD>大話西游<TD>大內(nèi)密探008<TD>少林足球<TR><TD>鹿鼎記<TD>喜劇之王<TD>九品芝麻官<TR><TD>逃學(xué)威龍<TD>食神<TD>百變金剛</TABLE><P>表格2<HRalign="left"width="50%"><TABLEbordercellpadding="10"><TR><TD>大話西游<TD>大內(nèi)密探008<TD>少林足球<TR><TD>鹿鼎記<TD>喜劇之王<TD>九品芝麻官<TR><TD>逃學(xué)威龍<TD>食神<TD>百變金剛</TABLE></BODY></HTML><Caption></Caption>標(biāo)簽符定義表格的標(biāo)題align屬性——表格標(biāo)題在網(wǎng)頁(yè)中的對(duì)齊方式取值為：left、center、right<Captionalign=“center”>成績(jī)單<Caption><TR></TR>標(biāo)簽符定義表格的一行align屬性——行中數(shù)據(jù)的水平對(duì)齊方式取值為：left、center、rightvalign屬性——行中數(shù)據(jù)的垂直對(duì)齊方式取值為：top、middle、bottomBgcolor屬性——整行單元格的背景顏色<HTML><HEAD><TITLE>表格數(shù)據(jù)的水平對(duì)齊</TITLE></HEAD><BODY><TABLEborder><CAPTION><H3>表格數(shù)據(jù)的水平對(duì)齊</H3></CAPTION><TRalign="right"><TD>本行數(shù)據(jù)右對(duì)齊<TD>右<TD>右<TR><TD>左<TD>本行數(shù)據(jù)為默認(rèn)左對(duì)齊<TD>左<TRalign="center"><TD>中<TD>中<TD>本行數(shù)據(jù)居中對(duì)齊</TABLE></BODY></HTML><HTML><HEAD><TITLE>表格數(shù)據(jù)的垂直對(duì)齊</TITLE></HEAD><BODY><TABLEborderalign="center"><CAPTION><H3>表格數(shù)據(jù)的垂直對(duì)齊</H3></CAPTION><TRvalign="top"><TD><IMGsrc="barbarian.jpg"><TD>野蠻人<TD>barbarian<TR><TD><IMGsrc="sorceress.jpg"><TD>女巫<TD>sorceress<TRvalign="bottom"><TD><IMGsrc="necromancer.jpg"><TD>巫師<TD>necromancer</TABLE></BODY></HTML><TD></TD>標(biāo)簽符定義行中的具體單元格align屬性——單元格內(nèi)數(shù)據(jù)的水平對(duì)齊方式取值為：left、center、rightvalign屬性——單元格內(nèi)數(shù)據(jù)的垂直對(duì)齊方式取值為：top、middle、bottombgcolor屬性——單元格的背景顏色width屬性、height屬性——單元格寬度、高度具體數(shù)據(jù)值或百分比rowspan屬性——單元格所占的行數(shù)<TDrowspan=“3”>表示該單元格高度為三行colspan屬性——單元格所占的列數(shù)<HTML><HEAD>

<TITLE>合并單元格示例</TITLE></HEAD><BODY><TABLEborder=1><CAPTION><H2>學(xué)生情況表</H2></CAPTION><TR><!-第一行--><THrowspan=“2”>學(xué)號(hào)</TH><THcolspan=“3”>個(gè)人信息</TH><THcolspan=“2”>入學(xué)信息</TH><TR><!-第二行-->

<TD>008<TD>任我行<TD>男<TD>20<TD>888888<TD>2001年9月</TABLE></BODY></HTML>在網(wǎng)頁(yè)中顯示班級(jí)的功課表（??401

）在網(wǎng)頁(yè)中插入如下形式的表格（??402

）實(shí)訓(xùn)作業(yè)五、使用表格設(shè)計(jì)網(wǎng)頁(yè)布局善于運(yùn)用嵌套表格善于運(yùn)用背景色設(shè)置細(xì)線圖4-12表格布局綜合實(shí)例1圖4-13表格布局綜合實(shí)例2圖4-14表格布局綜合實(shí)例3圖4-15表格布局綜合實(shí)例4圖4-16表格布局綜合實(shí)例5§6框架框架的概念框架的作用框架標(biāo)簽符框架中的超鏈接頁(yè)內(nèi)（浮動(dòng)）框架框架結(jié)構(gòu)的網(wǎng)頁(yè)框架結(jié)構(gòu)的聯(lián)機(jī)幫助系統(tǒng)一、定義：能在同一個(gè)瀏覽器窗口中顯示多個(gè)網(wǎng)頁(yè)的頁(yè)面布局控制容器二、作用：網(wǎng)站導(dǎo)航功能將瀏覽器窗口劃分為不同的部分，每部分中裝載不同的網(wǎng)頁(yè)，通過(guò)為超鏈接指定目標(biāo)框架，可以為框架之間建立起內(nèi)容之間的聯(lián)系，因而實(shí)現(xiàn)頁(yè)面的導(dǎo)航和頁(yè)面間的交互操作聯(lián)機(jī)幫助三、框架標(biāo)記符及格式<FRAMESET>

<FRAME>

</NOFRAMES></FRAMESET>

框架集標(biāo)記符，是框架容器，框架必須定義在框架集之內(nèi)定義瀏覽器不支持框架技術(shù)時(shí)所要顯示的替代內(nèi)容，必須包含在<FRAMESET>標(biāo)記符之中，可選框架標(biāo)記符，定義一個(gè)框架，必須包含在<FRAMESET>標(biāo)記符之中,也可以嵌套<FRAMESET><html><head><title>框架</title></head><FRAMESETcols=“100,*,100”><FRAMEsrc=“1.html”><FRAMEsrc=“2.html”><FRAMEsrc=“3.html”><NOFRAMES>

<BODY>不支持框架技術(shù)，很抱歉！</BODY></NOFRAMES></FRAMESET></html><HTML><HEAD><TITLE>嵌套框架</TITLE></HEAD><FRAMESETrows="100,*"><FRAMEsrc=“1.html”><FRAMESETcols="150,*"><FRAMEsrc=“2-1.html”><FRAMEsrc=“2-2.html”></FRAMESET><NOFRAMES><BODY><P>太遺憾了，您的瀏覽器不支持框架！/P></BODY></NOFRAMES></FRAMESET></HTML>1.框架集標(biāo)記符——<FRAMESET></FRAMESET>rows屬性：設(shè)置橫向框架cols屬性：設(shè)置縱向框架例子：<HTML><HEAD>

<FRAME>

<FRAME></FRAMESET></HTML>2.框架標(biāo)記符——<FRAME></FRAME>name屬性：框架的名稱src屬性：框架的初始頁(yè)面frameborder屬性：是否顯示邊框（[1|0]）marginwidth屬性：邊距寬度marginleft屬性：邊距高度noresize屬性：禁止修改框架尺寸scrolling屬性：是否有滾動(dòng)條（[yes|no|auto]）例子：<HTML><HEAD><TITLE>初始化框架</TITLE></HEAD><FRAMESETrows="100,*"><FRAMEsrc="tu23_1.htm"><FRAMESETcols="200,*"><FRAMEsrc="tu23_2.htm"><FRAMEsrc="tu23_3.htm"></FRAMESET></FRAMESET></HTML>四、框架中的超鏈接鏈接：<Ahref="目標(biāo)文件"target="目標(biāo)框架名">超鏈接點(diǎn)</A>特殊框架名_top

_self_blank_parent第六周實(shí)訓(xùn)作業(yè)1：利用框架結(jié)構(gòu)將多個(gè)網(wǎng)頁(yè)組織在一個(gè)瀏覽器窗口中（上/左右結(jié)構(gòu)）<meta>標(biāo)記符<marquee>標(biāo)記符右框架中的網(wǎng)頁(yè)必須有圖文排版的方式多少個(gè)html文件？四、頁(yè)內(nèi)框架——浮動(dòng)框架<IFRAME>插入到網(wǎng)頁(yè)中作為一個(gè)對(duì)象來(lái)使用的。屬性，可以控制頁(yè)內(nèi)框架的顯示：src指定要在頁(yè)內(nèi)框架中顯示的網(wǎng)頁(yè)的URL，即初始頁(yè)面；width＝x指定頁(yè)內(nèi)框架的寬height＝y(tǒng)指定頁(yè)內(nèi)框架的高align＝top｜middle｜bottom｜left｜right指定頁(yè)內(nèi)框架對(duì)齊方式frameborder＝1｜0指定頁(yè)內(nèi)框架是否采用邊框；name＝“...”指定頁(yè)內(nèi)框架的名字scrolling＝y(tǒng)es｜no｜auto指定頁(yè)內(nèi)框架是否加滾動(dòng)條；marginwidth＝x指定頁(yè)內(nèi)框架水平方向上內(nèi)容與邊框的間隔arginheight＝y(tǒng)指定頁(yè)內(nèi)框架垂直方向上內(nèi)容與邊框的間隔<HTML><HEAD>

<TITLE>頁(yè)內(nèi)框架示例</TITLE></HEAD><BODY><TABLE><TR><TDcolspan="2"height="100"bgcolor="#cccccc"><H1align="center">李白</H1><TR><TDwidth="200"bgcolor="#eeeeee"><H3align="center"><Ahref="file4.htm"target="poem">靜思</H3><H3align="center"><Ahref="file5.htm"target="poem">怨情</H3><TD><IFRAMEsrc="file3.htm"width="400"height="300"name="poem">真可惜，您的瀏覽器不支持框架！</IFRAME></TABLE></BODY></HTML>第七周頁(yè)內(nèi)框架PhotoshopFlash如何在網(wǎng)頁(yè)中插入flash動(dòng)畫(huà)？<object></object><embed></embed><objectcodebase=/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0height=113width=357classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000><paramname="movie"value="gdswf/gdxs.swf"><paramname="quality"value="high"><paramname="wmode"value="transparent">

<embed

src="gdswf/gdxs.swf"

width="357"height="113"quality="high"pluginspage="/go/getflashplayer"

type="application/x-shockwave-flash" wmode="transparent"></embed></object>六、表單1.定義：用于實(shí)現(xiàn)網(wǎng)頁(yè)瀏覽者與服務(wù)器（或者說(shuō)網(wǎng)頁(yè)所有者）之間信息交互的一種頁(yè)面元素，在WWW上它被廣泛用于各種信息的搜集和反饋。圖

5-1表單示例

1表單示例

1表單示例2表單的基本工作原理：瀏覽者在表單中填寫(xiě)或選擇信息；單擊“提交”按鈕，填寫(xiě)或選擇的信息按照指定的方式通過(guò)網(wǎng)絡(luò)傳遞到服務(wù)器端；由服務(wù)器端的特定程序進(jìn)行處理處理的結(jié)果：返回一個(gè)頁(yè)面例如：通知注冊(cè)成功的頁(yè)面在服務(wù)器端完成特定功能例如：在數(shù)據(jù)庫(kù)中記錄下新用戶的信息）表單不但需要在網(wǎng)頁(yè)中用HTML進(jìn)行顯示，而且還需要服務(wù)器端特定程序的支持

<HTML><HEAD><TITLE>單行文本框和口令框示例</TITLE></HEAD><BODY><DIValign="center"><H2>表單——單行文本框和口令框</H2><HR><FORM>

請(qǐng)輸入您的姓名：

<INPUTname="name"value="yournamepls"size="30"><BR>

請(qǐng)輸入您的密碼：

<INPUTtype="password"name="pwd"value="pwd" size="30"><P> <INPUTtype="submit"name="submit_button"value="提交"></FORM><HR></DIV></BODY></HTML>表單的結(jié)構(gòu)：<表單標(biāo)簽符> <控件標(biāo)簽符1></控件標(biāo)簽符1> <控件標(biāo)簽符2></控件標(biāo)簽符2></表單標(biāo)簽符>2、表單的標(biāo)簽符——FORM格式：<FORM

action=“服務(wù)器端程序的URL”method=“get｜post”

enctype=“type”>

</FORM>

用戶數(shù)據(jù)提交給服務(wù)器的方法處理已提交表單數(shù)據(jù)的程序，該程序必須能夠處理表單數(shù)據(jù)表單發(fā)送時(shí)所使用的內(nèi)容類型2、表單的標(biāo)簽符——FORM屬性提交——method屬性get方法：在URL的末尾附加要向服務(wù)器發(fā)送的信息。

如：/login.php?user=xxx&password=xxxxxxpost方法：將發(fā)送給服務(wù)器的表單數(shù)據(jù)作為一個(gè)數(shù)據(jù)體發(fā)送的。處理——action屬性提供處理表單的程序的地址，程序存放在Web服務(wù)器上程序常用的語(yǔ)言有ASP、PHP、JSP、Perl等內(nèi)容類型——enctype屬性application/x-www-form-urlencodedmultipart/form-datatext/plain使用電子郵件收集表單信息將action屬性設(shè)置為mailto:someone@將enctype屬性設(shè)置為：“text/plain”(以便以純文本格式提交表單數(shù)據(jù))例如：<FORMmethod=“post”

action=“mailto:someone@”

enctype="text/plain">

</FORM>3、控件的標(biāo)簽符控件的類型：文本框口令框——password復(fù)選框——checkbox單選框——radio文件選擇框——file按鈕——submitresetbutton多行文本框——<textarea>選項(xiàng)菜單——<select>3、控件的標(biāo)簽符——文本框與口令框<HTML><HEAD><TITLE>單行文本框和口令框示例</TITLE></HEAD><BODY><DIValign="center"><H2>表單——單行文本框和口令框</H2><HR><FORM>

請(qǐng)輸入您的姓名：

<INPUTname="name"value="yournamepls"size="30"><BR>

請(qǐng)輸入您的密碼：

<INPUTtype="password"name="pwd"v

人人文庫(kù)> 全部分類> 教育資料 > 輔導(dǎo)培訓(xù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ì)自己和他人造成任何形式的傷害或損失。

2023學(xué)年完整公開(kāi)課版HTML基礎(chǔ)教程

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

2023學(xué)年完整公開(kāi)課版HTML基礎(chǔ)教程

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

相關(guān)文檔