《電子商務(wù)網(wǎng)站建設(shè)與管理》圖文課件第三章_第1頁(yè)
《電子商務(wù)網(wǎng)站建設(shè)與管理》圖文課件第三章_第2頁(yè)
《電子商務(wù)網(wǎng)站建設(shè)與管理》圖文課件第三章_第3頁(yè)
《電子商務(wù)網(wǎng)站建設(shè)與管理》圖文課件第三章_第4頁(yè)
《電子商務(wù)網(wǎng)站建設(shè)與管理》圖文課件第三章_第5頁(yè)
已閱讀5頁(yè)，還剩72頁(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網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)第一節(jié)HTML簡(jiǎn)介一、電子商務(wù)的概念HTML是一種結(jié)構(gòu)化的網(wǎng)頁(yè)內(nèi)容標(biāo)記語(yǔ)言，使用各種不同的標(biāo)簽符號(hào)來(lái)分別標(biāo)識(shí)和設(shè)定不同的網(wǎng)頁(yè)元素。每一個(gè)網(wǎng)頁(yè)元素通常都由開(kāi)始標(biāo)簽、結(jié)束標(biāo)簽以及夾在這兩個(gè)標(biāo)簽中的內(nèi)容組成。每個(gè)HTML元素的開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽的名稱相同，并且都用一對(duì)尖括號(hào)“<>”括起來(lái)，只是在結(jié)束標(biāo)簽的前面多了一個(gè)斜杠符號(hào)“/”。例如：<center>這部分內(nèi)容居中顯示</center>第一節(jié)HTML簡(jiǎn)介一、電子商務(wù)的概念表示將網(wǎng)頁(yè)中的文字居中顯示。其中，<center>為開(kāi)始標(biāo)簽，</center>為結(jié)束標(biāo)簽，“這部分內(nèi)容居中顯示”為該元素的內(nèi)容。當(dāng)瀏覽器在顯示該網(wǎng)頁(yè)的過(guò)程中，如果遇到center元素，就將該元素的內(nèi)容居中顯示在瀏覽器的窗口中。并不是所有的網(wǎng)頁(yè)標(biāo)簽都是如上例中那樣成對(duì)出現(xiàn)的。有開(kāi)始標(biāo)簽且一定有結(jié)束標(biāo)簽的標(biāo)簽叫雙邊標(biāo)簽，而有開(kāi)始標(biāo)簽不需要結(jié)束標(biāo)簽的標(biāo)簽稱為單邊標(biāo)簽。例如，<br>就是一個(gè)單邊標(biāo)簽。另外，還有一些網(wǎng)頁(yè)元素的結(jié)束標(biāo)簽可以自由取舍，如段落標(biāo)簽<p>、選項(xiàng)標(biāo)簽<option>等。第一節(jié)HTML簡(jiǎn)介一、電子商務(wù)的概念許多元素的開(kāi)始標(biāo)簽中還允許加入若干屬性，用于進(jìn)一步對(duì)該元素的特征進(jìn)行說(shuō)明或限定。通常用“屬性名稱=屬性值”的方式來(lái)設(shè)定元素的屬性，屬性值可以用雙引號(hào)引起來(lái)，也可以省略。例如，“<palign="left">”和“<palign=left>”效果相同，但如果屬性值內(nèi)有空格或特殊字符，則其兩端雙引號(hào)就不可以省略。此外，在一個(gè)元素的開(kāi)始標(biāo)簽中各個(gè)屬性設(shè)置的先后順序是任意的。綜上所述，一個(gè)HTML元素可表示為：<標(biāo)簽名稱屬性名稱1=屬性值1屬性名稱2=屬性值2…>內(nèi)容</標(biāo)簽名稱>第二節(jié)HTML的結(jié)構(gòu)一、網(wǎng)頁(yè)基本結(jié)構(gòu)任意打開(kāi)一個(gè)網(wǎng)頁(yè)，查看它的源代碼，就可以看到這個(gè)網(wǎng)頁(yè)的HTML代碼。無(wú)論該網(wǎng)頁(yè)如何復(fù)雜，都是由最基本的HTML結(jié)構(gòu)組成的。以下是HTML的基本結(jié)構(gòu)?！纠?-1】HTML文檔的基本結(jié)構(gòu)，效果如圖31所示。<html><head>第二節(jié)HTML的結(jié)構(gòu)一、網(wǎng)頁(yè)基本結(jié)構(gòu)<title>網(wǎng)頁(yè)標(biāo)題</title></head><body>這是顯示在瀏覽器中的主要內(nèi)容！</body>第二節(jié)HTML的結(jié)構(gòu)一、網(wǎng)頁(yè)基本結(jié)構(gòu)</html><html>…</html>用于指出HTML文檔的開(kāi)始與結(jié)束，標(biāo)簽中的內(nèi)容是HTML文檔的主體元素。<html>…</html>中的內(nèi)容只能有<head>、<body>、<frameset>3種下屬的一級(jí)元素，但其中的<body>與<frameset>元素是不能共存的。第二節(jié)HTML的結(jié)構(gòu)一、網(wǎng)頁(yè)基本結(jié)構(gòu)這就是說(shuō)，在<html>…</html>中最多只能有兩個(gè)下屬一級(jí)元素，其他的元素都包含在這兩個(gè)元素之中。<head>標(biāo)簽通常用于提供一些識(shí)別或補(bǔ)充的信息給瀏覽器，而瀏覽器不會(huì)把這些信息顯示在網(wǎng)頁(yè)中。理論上，在<head>…</head>中至少必須包括<title>標(biāo)簽元素，但在現(xiàn)實(shí)中并沒(méi)有嚴(yán)格限定。第二節(jié)HTML的結(jié)構(gòu)一、網(wǎng)頁(yè)基本結(jié)構(gòu)<title>標(biāo)簽用于指定瀏覽器所要顯示的標(biāo)題文字，原則上不能省略，因?yàn)樗€有其他用途，如作為網(wǎng)頁(yè)的標(biāo)簽或搜索引擎搜索時(shí)的索引等。<body>…</body>用于顯示網(wǎng)頁(yè)的主要內(nèi)容，其中可以包含多種不同的元素。與之相關(guān)的各種元素將在下一節(jié)中詳細(xì)說(shuō)明。第二節(jié)HTML的結(jié)構(gòu)一、網(wǎng)頁(yè)基本結(jié)構(gòu)下面是關(guān)于書(shū)寫(xiě)HTML文檔的幾點(diǎn)說(shuō)明。（1）HTML文檔的內(nèi)容不區(qū)分字母大小寫(xiě)，包括屬性和標(biāo)簽名稱等。（2）對(duì)于連續(xù)的空格、Tab鍵和Enter鍵，瀏覽器只會(huì)將其當(dāng)成一個(gè)空格，除非置于預(yù)排版標(biāo)簽<pre>中。第二節(jié)HTML的結(jié)構(gòu)一、網(wǎng)頁(yè)基本結(jié)構(gòu)（3）在一個(gè)元素的開(kāi)始標(biāo)簽中，元素名稱及各個(gè)屬性名稱之間應(yīng)該以空格、Tab鍵或Enter鍵隔開(kāi)，因此某個(gè)元素的開(kāi)始標(biāo)簽可能會(huì)跨越數(shù)行，而瀏覽器只認(rèn)定“<”和“>”記號(hào)。（4）含有空格或特殊符號(hào)的屬性值需要用半角雙引號(hào)引起來(lái)。第二節(jié)HTML的結(jié)構(gòu)一、網(wǎng)頁(yè)基本結(jié)構(gòu)（5）在HTML中采用“<!--”和“-->”進(jìn)行注釋，在該注釋標(biāo)簽中的內(nèi)容將不被處理和顯示。（6）對(duì)于HTML文檔中的錯(cuò)誤元素及其屬性，瀏覽器將會(huì)跳過(guò)而不予理會(huì)。第二節(jié)HTML的結(jié)構(gòu)一、網(wǎng)頁(yè)基本結(jié)構(gòu)（7）各元素之間可以嵌套，但不能交錯(cuò)。例如：<center><table>…</table></center>是正確的。<center><table>…</center></table>是錯(cuò)誤的。（8）HTML文檔是一個(gè)純文本文件，可用任何文本編輯工具（如Windows中的記事本）來(lái)創(chuàng)建和編輯，其擴(kuò)展名為.htm或.html。第二節(jié)HTML的結(jié)構(gòu)二、<head>標(biāo)簽<head>標(biāo)簽主要用于包括該頁(yè)面的一些基本描述語(yǔ)句。其語(yǔ)法格式如下：<head><metaname=名稱content=內(nèi)容><metahttpequiv=動(dòng)態(tài)控制類型content=動(dòng)態(tài)控制內(nèi)容><title>網(wǎng)頁(yè)標(biāo)題</title></head>第二節(jié)HTML的結(jié)構(gòu)二、<head>標(biāo)簽其中各項(xiàng)的含義如下：（1）<meta>標(biāo)簽又稱為元標(biāo)簽，主要功能是對(duì)網(wǎng)頁(yè)進(jìn)行定義和說(shuō)明。（2）描述型標(biāo)簽<meta>主要負(fù)責(zé)對(duì)網(wǎng)頁(yè)的重要內(nèi)容進(jìn)行定義說(shuō)明，從而方便搜索引擎的檢索，通常不會(huì)在網(wǎng)頁(yè)中顯示。其語(yǔ)法格式為<metaname=名稱content=內(nèi)容>其中，name屬性用于對(duì)網(wǎng)頁(yè)中的重要內(nèi)容進(jìn)行說(shuō)明，其屬性值主要有description（對(duì)當(dāng)前網(wǎng)頁(yè)的描述）、keyword（網(wǎng)頁(yè)關(guān)鍵詞）、author（網(wǎng)頁(yè)作者）等。content屬性用于設(shè)置與name屬性值對(duì)應(yīng)的內(nèi)容。第二節(jié)HTML的結(jié)構(gòu)二、<head>標(biāo)簽（3）動(dòng)態(tài)控制型標(biāo)簽<meta>主要對(duì)網(wǎng)頁(yè)的動(dòng)態(tài)排列和動(dòng)態(tài)鏈接進(jìn)行控制。其語(yǔ)法格式為<metahttpequiv=動(dòng)態(tài)控制類型content=動(dòng)態(tài)控制內(nèi)容>其中，httpequiv屬性用于設(shè)置動(dòng)態(tài)控制的類型，其屬性值主要有兩個(gè)：contenttype（動(dòng)態(tài)排列）、refresh（動(dòng)態(tài)鏈接）。content屬性用于對(duì)httpequiv屬性值進(jìn)行詳細(xì)描述。第二節(jié)HTML的結(jié)構(gòu)二、<head>標(biāo)簽【例3-2】<head>標(biāo)簽的基本結(jié)構(gòu)實(shí)例。<html><head><metaname="description"content="HTML文檔中的head頭元素"><metaname="keywords"content="head,meta"><metaname="author"content="無(wú)名"><metahttpequiv="contenttype"content="text/html;charset=gb2312">第二節(jié)HTML的結(jié)構(gòu)二、<head>標(biāo)簽<metahttpequiv="refresh"content="3;url="><title><head>標(biāo)簽實(shí)例</title></head><body>請(qǐng)注意元標(biāo)簽的使用</body></html>第二節(jié)HTML的結(jié)構(gòu)二、<head>標(biāo)簽【例3-2】代碼運(yùn)行效果<metahttpequiv="contenttype"content="text/html;charset=gb2312">表示當(dāng)瀏覽器窗口大小改變時(shí)，文字的排版也會(huì)隨著窗口大小的改變而改變，以便讓文字都顯示在窗口中。其中，“text/html”表示當(dāng)前文件為MIME類型中的text主類型下的html子類型，“charset＝gb2312”表示當(dāng)前文檔的字符編碼為國(guó)標(biāo)2312，即支持簡(jiǎn)體中文。第二節(jié)HTML的結(jié)構(gòu)二、<head>標(biāo)簽說(shuō)明：MIME即多功能Internet郵件擴(kuò)充服務(wù)，它是一種多用途網(wǎng)際郵件擴(kuò)充協(xié)議，在1992年最早應(yīng)用于電子郵件系統(tǒng)，但后來(lái)也應(yīng)用到瀏覽器。服務(wù)器將MIME類型放入傳送的數(shù)據(jù)中來(lái)告訴瀏覽器使用哪種插件讀取相關(guān)文件，如設(shè)置為application/msword，則瀏覽器將調(diào)用Word來(lái)打開(kāi)相關(guān)的數(shù)據(jù)文件。<metahttpequiv="refresh"content="3;url=">表示網(wǎng)頁(yè)將動(dòng)態(tài)刷新，其刷新時(shí)間設(shè)置為3s，刷新后的鏈接URL為，即3s后，該網(wǎng)頁(yè)將自動(dòng)跳轉(zhuǎn)到新浪的首頁(yè)。第二節(jié)HTML的結(jié)構(gòu)三、<body>標(biāo)簽<body>標(biāo)簽用于設(shè)置網(wǎng)頁(yè)的基本樣式。其語(yǔ)法格式如下：<bodybgcolor=背景顏色background=背景圖像URLtext=字體顏色link=鏈接顏色vlink=已訪問(wèn)鏈接顏色alink=激活鏈接顏色>其中，各屬性的含義如下：（1）bgcolor屬性設(shè)置網(wǎng)頁(yè)背景顏色。（2）background屬性設(shè)置網(wǎng)頁(yè)的背景圖像。第二節(jié)HTML的結(jié)構(gòu)三、<body>標(biāo)簽（3）text屬性設(shè)置網(wǎng)頁(yè)文字顏色。（4）link屬性設(shè)置未訪問(wèn)的超鏈接文字顏色。（5）vlink屬性設(shè)置已訪問(wèn)過(guò)的超鏈接文字顏色。（6）alink屬性設(shè)置超鏈接被激活時(shí)的顏色，即單擊鏈接的瞬間鏈接文字的顏色。第二節(jié)HTML的結(jié)構(gòu)三、<body>標(biāo)簽【例3-3】<body>標(biāo)簽的使用實(shí)例。<html><head><title><body>標(biāo)簽實(shí)例</title></head><bodybgcolor="silver"text="blue"link="red"vlink="lime"alink="navy">第二節(jié)HTML的結(jié)構(gòu)三、<body>標(biāo)簽背景顏色:silver<br>文字顏色:blue<br>鏈接顏色:red<br>已訪問(wèn)鏈接顏色:lime<br>激活鏈接顏色:navy<br><ahref="">新浪</a></body></html>第三節(jié)HTML的主要標(biāo)簽一、段落標(biāo)簽（一）標(biāo)題標(biāo)簽標(biāo)題標(biāo)簽的語(yǔ)法格式如下：<hxalign=對(duì)齊方式>標(biāo)題內(nèi)容</hx>hx中的x表示標(biāo)題級(jí)別，分為h1、h2、h3、h4、h5和h6，其中h1表示一級(jí)標(biāo)題，以此類推。x的數(shù)值越小，字體越大。第三節(jié)HTML的主要標(biāo)簽一、段落標(biāo)簽（一）標(biāo)題標(biāo)簽align屬性用于設(shè)置標(biāo)題對(duì)齊方式，可供選擇的屬性值有3個(gè)：left（左對(duì)齊）、center（居中對(duì)齊）、right（右對(duì)齊）。默認(rèn)為left。<hx>標(biāo)簽所表示的標(biāo)題在網(wǎng)頁(yè)中均獨(dú)占一行。第三節(jié)HTML的主要標(biāo)簽一、段落標(biāo)簽（二）分段標(biāo)簽分段標(biāo)簽的語(yǔ)法格式如下：<palign=對(duì)齊方式>段落文字</p><p>…</p>中的文字將另起一行輸出，而且將在兩個(gè)段落之間產(chǎn)生一個(gè)空行。align屬性用于設(shè)置段落的對(duì)齊方式，可供選擇的屬性值有3個(gè)：left（左對(duì)齊）、center（居中對(duì)齊）、right（右對(duì)齊）。默認(rèn)為left。分段結(jié)束標(biāo)簽</p>可以省略。第三節(jié)HTML的主要標(biāo)簽一、段落標(biāo)簽（三）換行標(biāo)簽換行標(biāo)簽<br>用于強(qiáng)制中斷當(dāng)前文字行而從下一行開(kāi)始顯示，且在斷行之間不產(chǎn)生空行（這與<p>標(biāo)簽不同）。<br>標(biāo)簽通常放在一行的末尾，其語(yǔ)法格式如下：文字<br>第三節(jié)HTML的主要標(biāo)簽一、段落標(biāo)簽（四）水平線標(biāo)簽水平線標(biāo)簽<hr>用于顯示一條水平線。其語(yǔ)法格式如下：<hrsize=線條粗細(xì)align=對(duì)齊方式width=線條長(zhǎng)度color=線條顏色>其中各屬性的含義如下：（1）size屬性用于設(shè)置水平線的粗細(xì)，以像素為單位，默認(rèn)值為2。第三節(jié)HTML的主要標(biāo)簽一、段落標(biāo)簽（四）水平線標(biāo)簽（2）align屬性用于設(shè)置水平線的對(duì)齊方式，屬性值有l(wèi)eft、center、right，默認(rèn)為left。（3）width屬性用于設(shè)置水平線的長(zhǎng)度。其表示方式有兩種：第一種為絕對(duì)數(shù)值，單位為像素，即水平線的長(zhǎng)度是一個(gè)固定值；第二種為百分比，表示水平線相對(duì)于瀏覽器窗口的寬度的比例，當(dāng)窗口的寬度改變時(shí)，此水平線的寬度會(huì)自動(dòng)改變。第三節(jié)HTML的主要標(biāo)簽一、段落標(biāo)簽（四）水平線標(biāo)簽若沒(méi)有設(shè)置寬度，則該水平線將橫穿整個(gè)瀏覽器窗口（即默認(rèn)為width="100%"）。（4）color屬性用于設(shè)置水平線的顏色，默認(rèn)為黑色。第三節(jié)HTML的主要標(biāo)簽一、段落標(biāo)簽（五）文本塊標(biāo)簽文本塊標(biāo)簽<blockquote>…</blockquote>用于使其包括的文本自成一段，且以縮排方式顯示。其語(yǔ)法格式如下：<blockquote>文字</blockquote>【例3-4】段落標(biāo)簽綜合實(shí)例，效果如圖34所示。<html><head>第三節(jié)HTML的主要標(biāo)簽一、段落標(biāo)簽（五）文本塊標(biāo)簽<title>段落標(biāo)簽綜合實(shí)例</title></head><body><h1align=center>HTML段落標(biāo)簽介紹</h1><hr><center>第三節(jié)HTML的主要標(biāo)簽一、段落標(biāo)簽（五）文本塊標(biāo)簽HTML文檔中采用不同的標(biāo)簽來(lái)標(biāo)識(shí)相應(yīng)的HTML元素<br>這些標(biāo)簽包括段落、字體、列表、表格、表單等幾大類。</center><hr><h3>段落標(biāo)簽</h3>第三節(jié)HTML的主要標(biāo)簽一、段落標(biāo)簽（五）文本塊標(biāo)簽<blockquote>段落標(biāo)簽主要包括標(biāo)題標(biāo)簽、分段標(biāo)簽、換行標(biāo)簽、水平線標(biāo)簽和文本塊標(biāo)簽等幾類。</blockquote></body></html>第三節(jié)HTML的主要標(biāo)簽二、文字格式標(biāo)簽字體標(biāo)簽字體標(biāo)簽<font>可用于設(shè)置文本的字體、字形、字號(hào)和字符顏色等，是HTML文檔中常用的標(biāo)簽。其語(yǔ)法格式如下：<fontsize=字體大小face=字體名稱color=字體顏色>文字</font>其中各屬性的含義如下：（1）size屬性用于設(shè)置字號(hào)，即文字的大小，取值范圍為1~7，共7級(jí)字體，字級(jí)越大，文字越大。（一）第三節(jié)HTML的主要標(biāo)簽二、文字格式標(biāo)簽（2）face屬性用于設(shè)置字體名稱。雙擊“控制面板”中的“字體”選項(xiàng)，能看到可以引用字體的名稱，這些字體的名稱都可以給face屬性賦值。字體標(biāo)簽（一）第三節(jié)HTML的主要標(biāo)簽二、文字格式標(biāo)簽（3）color屬性用于設(shè)置文字顏色。color屬性的顏色值可以用英文的顏色名稱來(lái)表示，如red、green、blue等，也可以使用“#RRGGBB”的方式來(lái)表示，其中R代表紅色、G代表綠色、B代表藍(lán)色，RR、GG、BB的取值范圍為十六進(jìn)制數(shù)的00~FF（相當(dāng)于十進(jìn)制的0~255）。字體標(biāo)簽（一）第三節(jié)HTML的主要標(biāo)簽二、文字格式標(biāo)簽文字效果標(biāo)簽1.粗體標(biāo)簽2.斜體標(biāo)簽3.下劃線標(biāo)簽4.刪除線標(biāo)簽5.上標(biāo)標(biāo)簽6.下標(biāo)標(biāo)簽7.文字閃爍標(biāo)簽（二）第三節(jié)HTML的主要標(biāo)簽二、文字格式標(biāo)簽特殊字符標(biāo)簽在HTML文檔中，因?yàn)椤?lt;”、“>”、“"”、“&”等字符具有特殊意義，所以如果要在瀏覽器中顯示這些字符本身就需要使用特殊的字符串。另外，由于HTML文檔中多個(gè)空格、Tab鍵和Enter鍵均只能解釋為一個(gè)空格，因此要表示多個(gè)空格也要用到特殊的字符串。（三）第三節(jié)HTML的主要標(biāo)簽三、列表標(biāo)簽無(wú)序列表標(biāo)簽無(wú)序列表標(biāo)簽<ul>…</ul>用于創(chuàng)建一個(gè)無(wú)序列表，其語(yǔ)法格式如下：<ultype=項(xiàng)目符號(hào)類型><litype=項(xiàng)目符號(hào)類型>列表項(xiàng)1<litype=項(xiàng)目符號(hào)類型>列表項(xiàng)2（一）第三節(jié)HTML的主要標(biāo)簽三、列表標(biāo)簽……<litype=項(xiàng)目符號(hào)類型>列表項(xiàng)n</ul>其中各屬性的含義如下：無(wú)序列表標(biāo)簽（一）第三節(jié)HTML的主要標(biāo)簽三、列表標(biāo)簽（1）type屬性用于指定該列表中的每一個(gè)列表項(xiàng)的項(xiàng)目符號(hào)，type屬性的值可以是square（■）、circle（○）和disk（●）等。（2）<li>標(biāo)簽表示列表中的列表項(xiàng)，type屬性用于指定該列表項(xiàng)的項(xiàng)目符號(hào)。無(wú)序列表標(biāo)簽（一）第三節(jié)HTML的主要標(biāo)簽三、列表標(biāo)簽有序列表標(biāo)簽有序列表標(biāo)簽<ol>…</ol>用于創(chuàng)建有序列表，其語(yǔ)法格式如下：<oltype=序號(hào)類型start=起始序號(hào)><litype=序號(hào)類型>列表項(xiàng)1<litype=序號(hào)類型>列表項(xiàng)2……（二）第三節(jié)HTML的主要標(biāo)簽三、列表標(biāo)簽<litype=序號(hào)類型>列表項(xiàng)n</ol>其中各屬性的含義如下：（1）<ol>標(biāo)簽表示有序列表，其中，type屬性用于指定列表中每一個(gè)列表項(xiàng)的序號(hào)類型，允許的屬性值有“1”、“A”、“a”、“Ⅰ”、“ⅰ”5種。有序列表標(biāo)簽（二）第三節(jié)HTML的主要標(biāo)簽三、列表標(biāo)簽其中，“1”表示用數(shù)字做序號(hào)，“A”表示用大寫(xiě)英文字母做序號(hào)，“a”表示用小寫(xiě)英文字母做序號(hào)，“Ⅰ”表示用大寫(xiě)羅馬數(shù)字做序號(hào)，“ⅰ”表示用小寫(xiě)羅馬數(shù)字做序號(hào)。（2）<li>標(biāo)簽表示列表中的列表項(xiàng)，其中，type屬性用于指定該列表項(xiàng)的序號(hào)類型。（3）start屬性用于設(shè)置序號(hào)的開(kāi)始值，不管采用哪種列表序號(hào)，start屬性的值統(tǒng)一用數(shù)字形式來(lái)設(shè)置起始序號(hào)。有序列表標(biāo)簽（二）第三節(jié)HTML的主要標(biāo)簽四、圖像標(biāo)簽使用圖像標(biāo)簽<img>可將指定的圖像添加到網(wǎng)頁(yè)中。圖像標(biāo)簽的語(yǔ)法格式如下：<imgsrc=圖像文件URLborder=圖像邊框粗細(xì)align=對(duì)齊方式alt=圖像說(shuō)明文字height=圖像高度width=圖像寬度hspace=水平空白vspace=垂直空白>其中各屬性的含義如下：第三節(jié)HTML的主要標(biāo)簽四、圖像標(biāo)簽（1）src屬性的值為圖像文件的URL，可以是本地文件，也可以是互聯(lián)網(wǎng)上的文件。（2）border屬性用于設(shè)置圖像邊框的寬度，單位為像素。（3）align屬性用于設(shè)置圖像的對(duì)齊方式，可選值為left、center、right，默認(rèn)為left。（4）alt屬性用于設(shè)置圖像的說(shuō)明性文字（也可以使用title屬性來(lái)實(shí)現(xiàn)同樣功能）。第三節(jié)HTML的主要標(biāo)簽四、圖像標(biāo)簽（5）height、width分別用于設(shè)置圖像的高度和寬度，可以用絕對(duì)數(shù)值表示，單位為像素，也可以使用百分比來(lái)設(shè)置，以瀏覽器窗口作為參照對(duì)象。通常使用前者，因?yàn)槭褂冒俜直蕊@示圖像會(huì)造成圖像失真。（6）hspace、vspace分別用于設(shè)置圖像與瀏覽器內(nèi)容窗口的左邊距和上邊距，采用絕對(duì)數(shù)值表示，單位為像素。第三節(jié)HTML的主要標(biāo)簽五、超鏈接標(biāo)簽HTML與文本最大的區(qū)別在于鏈接。由此可見(jiàn)超鏈接標(biāo)簽<a>…</a>是HTML文檔中一個(gè)十分重要的標(biāo)簽，使用它可鏈接到文檔內(nèi)的某個(gè)指定段落或圖像，也可以鏈接到本地或遠(yuǎn)程計(jì)算機(jī)上的另一個(gè)文檔或Web頁(yè)?！纠?-7】代碼運(yùn)行效果超鏈接標(biāo)簽的語(yǔ)法格式如下：第三節(jié)HTML的主要標(biāo)簽五、超鏈接標(biāo)簽<ahref=URL>用做鏈接的文字或圖像</a>用做鏈接的文字在瀏覽器中通常以一種特殊顏色并帶下劃線的方式顯示，當(dāng)鼠標(biāo)指針指向超鏈接對(duì)象時(shí)會(huì)變成手形，表示此為一個(gè)鏈接。href屬性用于指定此超鏈接被觸發(fā)之后所轉(zhuǎn)向的URL。第三節(jié)HTML的主要標(biāo)簽六、表格標(biāo)簽表格在網(wǎng)頁(yè)中是很重要的，它除了組織和顯示數(shù)據(jù)之外，還具有布局頁(yè)面的作用。表格可以將文本和圖像等元素按行、列排列，實(shí)現(xiàn)網(wǎng)頁(yè)的布局要求。表格標(biāo)簽<table>…</table>的語(yǔ)法格式如下：<tablealign=對(duì)齊方式border=邊框粗細(xì)bordercolor=邊框顏色bgcolor=背景顏色width=表格寬度height=表格高度cellspacing=單元格間距第三節(jié)HTML的主要標(biāo)簽六、表格標(biāo)簽cellpadding=單元格內(nèi)數(shù)據(jù)與邊框間距><tr><th>標(biāo)題1</th><th>標(biāo)題2</th>…</tr><tr><td>單元格1</td><td>單元格2</td>…</tr>……</table>第三節(jié)HTML的主要標(biāo)簽六、表格標(biāo)簽<table>和</table>標(biāo)簽分別用于定義一個(gè)表格的開(kāi)始和結(jié)束，<table>標(biāo)簽可以包含多個(gè)屬性，其中，align屬性用于定義表格在瀏覽器中的對(duì)齊方式，可選值為left、center、right，默認(rèn)為left;border屬性用于定義表格邊框的粗細(xì)，單位為像素；bordercolor屬性用于定義邊框的顏色；bgcolor屬性用于定義單元格的背景顏色；第三節(jié)HTML的主要標(biāo)簽六、表格標(biāo)簽width屬性用于定義表格的寬度，可以為像素值也可以為屏幕寬度的百分比值；height屬性用于定義表格的高度；cellspacing屬性用于定義各個(gè)單元格的間距，單位為像素（默認(rèn)為2）；cellpadding屬性用于定義單元格內(nèi)數(shù)據(jù)內(nèi)容與邊框的間距，單位為像素（默認(rèn)為1）。第三節(jié)HTML的主要標(biāo)簽六、表格標(biāo)簽<tr>…</tr>標(biāo)簽用于定義一個(gè)表格行的開(kāi)始和結(jié)束，在一個(gè)表格中有幾個(gè)<tr>標(biāo)簽就有幾個(gè)表格行。<th>…</th>標(biāo)簽用于定義表格標(biāo)題行的各個(gè)單元格。其中的文字內(nèi)容以加粗且居中的方式顯示，也可以使用align屬性來(lái)設(shè)置對(duì)齊方式。此外，還可以通過(guò)width屬性來(lái)指定單元格的寬度。第三節(jié)HTML的主要標(biāo)簽六、表格標(biāo)簽<td>…</td>標(biāo)簽用于定義表格內(nèi)數(shù)據(jù)行的各個(gè)單元格。其內(nèi)容默認(rèn)左對(duì)齊，不使用粗體。可以使用align屬性來(lái)設(shè)置橫向?qū)R方式，其可選值為left、center、right。此外，還可以通過(guò)valign屬性來(lái)設(shè)置縱向?qū)R方式，其可選值為top（頂端對(duì)齊）、middle（縱向居中）、bottom（底端對(duì)齊）。第三節(jié)HTML的主要標(biāo)簽六、表格標(biāo)簽如果涉及單元格合并，可在<td>或<th>標(biāo)簽中使用colspan屬性來(lái)設(shè)置縱向單元格合并，使用rowspan屬性來(lái)設(shè)置水平單元格合并，其屬性值均為數(shù)值，表示要合并多少個(gè)單元格。第三節(jié)HTML的主要標(biāo)簽七、表單元素標(biāo)簽（一）表單標(biāo)簽使用表單標(biāo)簽<form>…</form>創(chuàng)建表單的語(yǔ)法格式如下：<formmethod=信息傳送方式action=被激活程序>表單元素標(biāo)簽</form>第三節(jié)HTML的主要標(biāo)簽七、表單元素標(biāo)簽（一）表單標(biāo)簽method屬性用于設(shè)置信息的傳送方式，屬性值可為post或get。post方式是一種郵寄的方式，在瀏覽器的地址欄中不顯示提交的信息，這種方式對(duì)傳送的數(shù)據(jù)量的大小沒(méi)有限制；get方式將信息傳遞到瀏覽器的地址欄上（對(duì)于安全性要求較高的內(nèi)容，如密碼，不應(yīng)該采用這種方式），最大傳輸?shù)男畔⒘渴?KB。當(dāng)不指明是哪種方式時(shí)，默認(rèn)為get方式。第三節(jié)HTML的主要標(biāo)簽七、表單元素標(biāo)簽（二）輸入標(biāo)簽輸入標(biāo)簽<input>是表單中最常用的標(biāo)簽之一，用于創(chuàng)建提交與重置按鈕、文本框和密碼框、單選按鈕和復(fù)選框等表單控件。<input>是單邊標(biāo)簽，沒(méi)有對(duì)應(yīng)的結(jié)束標(biāo)簽。<input>標(biāo)簽的type屬性用于設(shè)置表單元素的類型，value屬性用于設(shè)置表單元素上顯示的文字。第三節(jié)HTML的主要標(biāo)簽七、表單元素標(biāo)簽（二）輸入標(biāo)簽1.提交與重置按鈕2.文本框和密碼框3.單選按鈕和復(fù)選框4.隱藏框標(biāo)簽第三節(jié)HTML的主要標(biāo)簽七、表單元素標(biāo)簽（三）下拉列表框標(biāo)簽下拉列表框用于通過(guò)下拉列表的形式將一組選項(xiàng)提供給用戶，以實(shí)現(xiàn)單選或多選的效果。下拉列表框標(biāo)簽<select>…</select>的語(yǔ)法格式如下：<selectname=控件名稱size=同時(shí)顯示的選項(xiàng)個(gè)數(shù)><optionvalue=選項(xiàng)值1>選項(xiàng)標(biāo)簽1<optionvalue=選項(xiàng)值2>選項(xiàng)標(biāo)簽2第三節(jié)HTML的主要標(biāo)簽七、表單元素標(biāo)簽（三）下拉列表框標(biāo)簽……</select>（1）name屬性用于設(shè)置控件名稱。（2）size屬性用于設(shè)置下拉列表框中同時(shí)顯示的選項(xiàng)個(gè)數(shù)，默認(rèn)屬性值為1。如果允許用戶在此列表框中選取多個(gè)選項(xiàng)，則可以通過(guò)增加multiple屬性來(lái)實(shí)現(xiàn)。第三節(jié)HTML的主要標(biāo)簽七、表單元素標(biāo)簽（三）下拉列表框標(biāo)簽（3）<option>標(biāo)簽用于定義下拉列表框中的一個(gè)具體選項(xiàng)，value屬性用于設(shè)置該選項(xiàng)所對(duì)應(yīng)的值。<option>標(biāo)簽之后的選項(xiàng)標(biāo)簽僅僅是對(duì)該選項(xiàng)進(jìn)行的說(shuō)明，沒(méi)有其他意義。此外，在<option>標(biāo)簽中允許有selected參數(shù)，用于表明該選項(xiàng)已被預(yù)先選中。第三節(jié)HTML的主要標(biāo)簽七、表單元素標(biāo)簽（四）文本域標(biāo)簽文本域用于輸入較長(zhǎng)的文本信息。文本域類似于文本框，二者的區(qū)別在于文本域允許輸入多行數(shù)據(jù)。創(chuàng)建文本域的語(yǔ)法格式如下：<textareaname=文本域名稱rows=行數(shù)cols=列數(shù)>文本域內(nèi)容</textarea>第三節(jié)HTML的主要標(biāo)簽七、表單元素標(biāo)簽（四）文本域標(biāo)簽rows屬性用于設(shè)置可以同時(shí)顯示在表單域中的文字行數(shù)，cols屬性用于設(shè)置可以同時(shí)顯示在表單域中的文字列數(shù)。第三節(jié)HTML的主要

溫馨提示

  • 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ì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論