網(wǎng)頁(yè)制作基本語(yǔ)言HTML_第1頁(yè)
網(wǎng)頁(yè)制作基本語(yǔ)言HTML_第2頁(yè)
網(wǎng)頁(yè)制作基本語(yǔ)言HTML_第3頁(yè)
網(wǎng)頁(yè)制作基本語(yǔ)言HTML_第4頁(yè)
網(wǎng)頁(yè)制作基本語(yǔ)言HTML_第5頁(yè)
已閱讀5頁(yè)，還剩21頁(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)介

第四章網(wǎng)頁(yè)制作根本語(yǔ)言HTML目錄4.1HTML簡(jiǎn)介4.2HTML文檔的根本結(jié)構(gòu)4.3HTML標(biāo)簽4.4創(chuàng)立超鏈接4.5插入網(wǎng)頁(yè)元素4.6表單4.7框架4.1HTML簡(jiǎn)介HTML是一種頁(yè)面描述語(yǔ)言，用HTML編寫的文檔稱為HTML文檔。通過(guò)Web瀏覽器閱讀HTML文檔時(shí)，瀏覽器負(fù)責(zé)解釋HTML文檔并將其以頁(yè)面的形式呈現(xiàn)在用戶面前，這樣的頁(yè)面就是Web頁(yè)面。HTML也稱作超文本標(biāo)簽語(yǔ)言，用HTML給文本文件添加標(biāo)簽，使其可以在WWW上發(fā)布何在瀏覽器中顯示。HTML作為網(wǎng)頁(yè)制作的排版語(yǔ)言，是網(wǎng)頁(yè)設(shè)計(jì)的根底，其主要功能如下：格式化文本。如設(shè)置標(biāo)題、字體、字號(hào)、顏色、段落、對(duì)齊方式等。建立超鏈接。單機(jī)超鏈接可以實(shí)現(xiàn)頁(yè)面間的跳轉(zhuǎn)。安排頁(yè)面布局。借助表格、框架更設(shè)置整個(gè)頁(yè)面的布局。引入多媒體。在頁(yè)面中添加圖像、音頻、視頻、動(dòng)畫等，豐富頁(yè)面效果。設(shè)置交互式表單。通過(guò)文本域、選框、下拉菜單等與用戶進(jìn)行交互。4.1HTML簡(jiǎn)介從本質(zhì)上來(lái)說(shuō)，HTML文件是一種純文本文件，因而可在任何文本編輯器中制作，如記事本、寫字板、Word等。用HTML編寫的超文本文檔稱為HTML文檔，它獨(dú)立于各種操作系統(tǒng)平臺(tái)，可以通過(guò)瀏覽器讀取，并由瀏覽器內(nèi)容的語(yǔ)法分析器自動(dòng)解釋其中包含的各種標(biāo)簽并按一定的格式顯示，最終呈現(xiàn)精彩的Web頁(yè)面效果。4.2HTML文檔的根本結(jié)構(gòu)HTML文檔由標(biāo)簽和文本組成，兩者相互配合產(chǎn)生所需的Web頁(yè)面效果。<html><head><title>網(wǎng)頁(yè)標(biāo)題</title></head><body>網(wǎng)頁(yè)正文</body></html>在記事本中輸入以上代碼，以.htm或.html格式保存文件后即可完成一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)制作。4.3HTML標(biāo)簽標(biāo)簽是HTML的根本元素。在HTML文檔中的社黨位置添加標(biāo)簽，可以實(shí)現(xiàn)各種頁(yè)面效果。標(biāo)簽的根本語(yǔ)法格式如下：<標(biāo)簽>受標(biāo)簽影響的文本</標(biāo)簽>標(biāo)簽內(nèi)還可以包含一系列屬性，通過(guò)設(shè)置屬性可以實(shí)現(xiàn)各種效果。設(shè)置標(biāo)簽屬性的語(yǔ)法結(jié)構(gòu)如下：<標(biāo)簽[屬性1=屬性值][屬性2=屬性值]…[屬性N=屬性值]>…</標(biāo)簽>HTML標(biāo)簽封裝在由“<〞和“>〞構(gòu)成的一對(duì)尖括號(hào)中，屬性可缺省。瀏覽器在解釋HTML文檔時(shí)，根據(jù)“<〞和“>〞識(shí)別標(biāo)簽，然后確定其中的內(nèi)容。多數(shù)標(biāo)簽包含開始標(biāo)簽“<標(biāo)簽>〞和結(jié)束標(biāo)簽“</標(biāo)簽>〞兩局部，稱為成對(duì)標(biāo)簽。不需要“</標(biāo)簽>〞結(jié)束的標(biāo)簽為單標(biāo)簽。4.3.1頁(yè)面標(biāo)簽在4.2節(jié)介紹的HTML文檔根本結(jié)構(gòu)中，除了文本以外，還涉及以下4個(gè)HTML標(biāo)簽。1.HTML文檔標(biāo)簽HTML文檔標(biāo)簽<html>…</html>出現(xiàn)在最外層，表示這對(duì)標(biāo)簽間的內(nèi)容是HTML文檔。每個(gè)HTML文檔均以<html>開始，以</html>結(jié)束。2.HTML文檔頭標(biāo)簽HTML文檔頭標(biāo)簽<head>…</head>用于說(shuō)明標(biāo)題名、文本文件地址、創(chuàng)作信息等頭部信息，假設(shè)不需要頭部信息那么可以忽略此標(biāo)簽。3.HTML文檔標(biāo)題標(biāo)簽HTML文檔標(biāo)題標(biāo)簽<title>…</title>用于定義標(biāo)題內(nèi)容并將其顯示于瀏覽器標(biāo)題欄，其作用是概括網(wǎng)頁(yè)內(nèi)容，便于瀏覽者將網(wǎng)頁(yè)參加書簽或保存至磁盤。4.3.1頁(yè)面標(biāo)簽4.HTML文檔主體標(biāo)簽HTML文檔主體標(biāo)簽<body>…</body>用于定義網(wǎng)頁(yè)上顯示的主要內(nèi)容與格式，是整個(gè)網(wǎng)頁(yè)的核心，瀏覽器窗口中顯示的網(wǎng)頁(yè)內(nèi)容都包含在該標(biāo)簽中。<body>有很多屬性，用于設(shè)置頁(yè)面的背景顏色、背景圖像、文字顏色、超文本鏈接的顏色，可以控制網(wǎng)頁(yè)的總風(fēng)格。4.3.2文字與段落標(biāo)簽HTML中的標(biāo)簽有許多用于控制頁(yè)面文字及段落格式，每種標(biāo)簽都從某一方面對(duì)頁(yè)面文本產(chǎn)生影響，甚至可以利用不同的標(biāo)簽實(shí)現(xiàn)相同的控制效果。1.標(biāo)題的設(shè)置頁(yè)面文字中，標(biāo)題是一段文字的核心，可用加強(qiáng)的效果來(lái)表示，通過(guò)設(shè)置不同大小的標(biāo)題為文字段落增加條理性。設(shè)置標(biāo)題的語(yǔ)法格式如下：<hnalign=對(duì)齊方式>標(biāo)題</hn>標(biāo)題文字以宋體顯示并且自動(dòng)換行。n用來(lái)定義標(biāo)題的大小，取值范圍為1~6，取1時(shí)最大，取6時(shí)最小。屬性align用來(lái)設(shè)置標(biāo)題在頁(yè)面中的對(duì)其方式，取值可為left〔左對(duì)齊〕、center〔居中〕或right〔右對(duì)齊〕。4.3.2文字與段落標(biāo)簽2.強(qiáng)制換行在HTML文檔中無(wú)法通過(guò)enter鍵進(jìn)行換行，因此需要進(jìn)行強(qiáng)制換行。強(qiáng)制換行標(biāo)簽<br>出現(xiàn)時(shí)，表示從該處開始新的一行。強(qiáng)制換行的語(yǔ)法格式如下：文字<br>3.文字格式的控制通過(guò)<font>標(biāo)簽設(shè)置網(wǎng)頁(yè)文字的字體、大小和顏色，可以增強(qiáng)文字顯示的多樣性和層次感。使用<font>標(biāo)簽控制文本格式的語(yǔ)法格式如下：<fontface=字體名size=數(shù)字color=顏色>受影響的文字</font>4.3.2文字與段落標(biāo)簽常用顏色的英文單詞及十六進(jìn)制代碼4.3.2文字與段落標(biāo)簽常用的字形控制標(biāo)簽4.3.2文字與段落標(biāo)簽4.段落格式的控制1〕強(qiáng)制換段網(wǎng)頁(yè)中的正文常常需要分成多段文字。與強(qiáng)制換行相似，在HTML文檔中無(wú)法用Enter、Space、Tab等控制鍵來(lái)調(diào)整段落，因而需要借助<p>標(biāo)簽強(qiáng)制分段。使用該標(biāo)簽后，每塊正文段落間會(huì)空出一行。使用<p>標(biāo)簽換段的語(yǔ)法格式如下：<palign=對(duì)齊方式>受影響的文字</p>2〕預(yù)編排格式在其他編輯工具中編排好的文本中可能包含一些HTML文檔不支持的控制符號(hào)，如回車符、換行符等，如果希望網(wǎng)頁(yè)最終的顯示效果與編輯時(shí)的格式一致，可借助預(yù)編排格式標(biāo)簽<pre>。語(yǔ)法格式如下：<pre>預(yù)先編排好的格式</pre>4.4創(chuàng)立超鏈接超鏈接是指Web頁(yè)面從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面或從一個(gè)位置跳轉(zhuǎn)到另一個(gè)位置的鏈接關(guān)系。連接的目標(biāo)通常是一個(gè)web頁(yè)面，也可以是圖片、多媒體、電子郵件甚至程序。1.錨點(diǎn)標(biāo)簽利用錨點(diǎn)標(biāo)簽<a>可以對(duì)網(wǎng)頁(yè)中的文本或圖片等建立超鏈接，單擊鏈接后即可跳轉(zhuǎn)到指定的目標(biāo)資源，該資源具有唯一的URL地址。上述的文本或圖片稱為熱點(diǎn)。錨點(diǎn)標(biāo)簽的語(yǔ)法格式如下：<ahref=目標(biāo)文件地址name=字符串>熱點(diǎn)文本</a>href屬性為超文本引用，其值為一個(gè)確定的URL地址，用于指明目標(biāo)資源的位置；name屬性用來(lái)指定當(dāng)前文檔內(nèi)的一個(gè)字符串。4.4創(chuàng)立超鏈接2.相對(duì)路徑和絕對(duì)路徑在設(shè)置href屬性的URL地址時(shí)，如果當(dāng)前頁(yè)面與目標(biāo)頁(yè)面不在統(tǒng)一效勞器上，那么設(shè)置為絕對(duì)路徑；如果當(dāng)前頁(yè)面與目標(biāo)頁(yè)面在同一效勞器上，只需設(shè)置相對(duì)路徑。根據(jù)當(dāng)前網(wǎng)頁(yè)與目標(biāo)網(wǎng)頁(yè)的不同位置關(guān)系，相對(duì)路徑有4種情況〔1〕當(dāng)前網(wǎng)頁(yè)與目標(biāo)網(wǎng)頁(yè)在同一目錄中：<ahref=目標(biāo)文件名.htm>熱點(diǎn)文本</a>〔2〕當(dāng)前頁(yè)面與目標(biāo)頁(yè)面在同級(jí)目錄中：<ahref=../子目錄名/目標(biāo)文件.htm>熱點(diǎn)文本</a>〔3〕目標(biāo)頁(yè)面位于上一級(jí)目錄中：<ahref=../目標(biāo)文件.htm>熱點(diǎn)文本</a>〔4〕目標(biāo)頁(yè)面位于下一級(jí)目錄中：<ahref=子目錄名/目標(biāo)文件.htm>熱點(diǎn)文本</a>4.4創(chuàng)立超鏈接3.指向當(dāng)前頁(yè)面內(nèi)部的鏈接頁(yè)面內(nèi)部的超鏈接可以使得單擊熱點(diǎn)文本后從頁(yè)面中的一個(gè)位置跳轉(zhuǎn)到指定的另一個(gè)位置，為此需要分別設(shè)置錨點(diǎn)標(biāo)簽的href屬性和name屬性。創(chuàng)立指向當(dāng)前頁(yè)面內(nèi)部鏈接的語(yǔ)法格式如下：<ahref=#標(biāo)簽名>熱點(diǎn)文本</a>單擊熱點(diǎn)文本會(huì)跳轉(zhuǎn)到設(shè)置了標(biāo)簽的位置。設(shè)置標(biāo)簽的語(yǔ)法如下：<aname=#標(biāo)簽名>目標(biāo)文本附近的字符串</a>4.指向電子郵件的鏈接設(shè)置鏈接目標(biāo)為電子郵件時(shí)，單擊熱點(diǎn)文本，將翻開默認(rèn)的電子郵件程序，并自動(dòng)填寫地址。創(chuàng)立電子郵件的語(yǔ)法格式如下：<ahref=〞mailto:e-mail地址〞>熱點(diǎn)文本</a>4.5.1插入圖像使用圖像標(biāo)簽<img>可以將一幅圖像插入網(wǎng)頁(yè)中，相應(yīng)的屬性設(shè)置可以控制圖像的大小、布局、注釋等。插入圖像的語(yǔ)法格式如下：<imgsrc=圖像文件地址alt=圖像說(shuō)明width=圖像寬度height=圖像高度border=邊框?qū)挾?gt;<img>標(biāo)簽各個(gè)屬性的作用：4.5.1插入圖像此外，還可以對(duì)圖像進(jìn)行如下設(shè)置：〔1〕設(shè)置圖像超鏈接：<ahref=地址><imgsrc=圖像文件名></a>〔2〕將圖像設(shè)置為頁(yè)面背景：<bodybackground=圖像文件名>...</body>〔3〕設(shè)置圖像和文字的混排版面，如圖文間的空白、圖文對(duì)齊與環(huán)繞等：<imgsrc=圖像地址hspace=水平方向空白vspace=垂直方向空白align=對(duì)齊方式>4.5.2插入音樂、視頻使用<bgsound>標(biāo)簽可以在網(wǎng)頁(yè)中插入背景音樂，其語(yǔ)法格式如下：<bgsoundsrc=音頻文件地址loop=播放次數(shù)>使用<img>標(biāo)簽的dynsrc屬性可以在網(wǎng)頁(yè)中參加.avi格式的視頻剪輯文件，其語(yǔ)法格式如下：<imgsrc=圖像文件地址dynsrc=視頻文件地址loop=播放次數(shù)loopdelay=時(shí)間start=時(shí)間>4.6.1制作表單表單標(biāo)簽<form>用于處理和傳達(dá)表單結(jié)果，其語(yǔ)法格式如下：<formaction=〞URL〞method=〞method〞>......<inputtype=表單類型>......</form>其中，action屬性用于指定處理表單數(shù)據(jù)的Web應(yīng)用程序的URL；method屬性指定數(shù)據(jù)的提交方式，取值為get時(shí)表示獲得表單，取值為post時(shí)表示送出表單；<input>標(biāo)簽用于創(chuàng)立表單中提供給用戶的輸入域。4.6.2表單元素1.<input>標(biāo)簽用<input>標(biāo)簽在表單中創(chuàng)立文本框、密碼框、復(fù)選框、單項(xiàng)選擇按鈕、提交或重置按鈕等。4.6.2表單元素2.<select>標(biāo)簽用<select>標(biāo)簽在表單中創(chuàng)立下拉列表框，創(chuàng)立下拉列表框的語(yǔ)法格式如下：<selectname=列表框的名稱><option>...<option>...<option>...</select>其中，<option>標(biāo)簽表示待選工程。4.6.2表單元素3.<textarea>標(biāo)簽<textarea>標(biāo)簽用于創(chuàng)立文本域。文本域用于發(fā)表文章、評(píng)論、留言等需要輸入較多文字的場(chǎng)合。創(chuàng)立文本域的語(yǔ)法格式如下：<textareaname=文本域的名稱rows=文本域行數(shù)cols=文本域列數(shù)>...</textarea>4.7.1建立框架框架頁(yè)面也稱為多窗口頁(yè)面，建立框架的語(yǔ)法格式如下：<frameset><framsrc=頁(yè)面地址></frameset>在制作框架頁(yè)面時(shí)，<frameset>標(biāo)簽取代了<body>標(biāo)簽，用來(lái)聲明框架組及其外觀。<frameset>標(biāo)簽的屬性如下表：4.7.1建立框架<frame>標(biāo)簽用于指定框架頁(yè)面的內(nèi)容，其屬性如下表：<frame>標(biāo)簽的個(gè)數(shù)應(yīng)該等于<frameset>標(biāo)簽中所

溫馨提示

  • 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ù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 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)論