【正文】 應(yīng)用開發(fā)二部深圳市茁壯網(wǎng)絡(luò)技術(shù)有限公司培訓(xùn)教材HTML及JS基礎(chǔ)知識培訓(xùn)Htmlamp。amp。Js knowledge based trainingAPPS2類別編號版權(quán)所有，限公司內(nèi)部使用 講師：華道偉地址：深圳市沿河北路1002號京廣中心寫字樓113樓 郵編：518002目錄 5二．HTML的基本結(jié)構(gòu) 5 83．1 標(biāo)題 83．2 換行 93．3段落標(biāo)簽P 103．4 字體大小的設(shè)置 113．5 文字的字體與樣式 123．5 文字的顏色 143．6 位置控制 143．7 html的Character的實(shí)體 15四．TABLE表格 15 表格的基本結(jié)構(gòu) 15 表格的標(biāo)題 16 表格的尺寸設(shè)置 17 表格內(nèi)文字的對齊/布局 20 跨多行、多列的表元 21跨多列的表元 22跨多行的表元 22 表格的顏色 23五．HTML的 FORMS和 INPUT 24HTML form 標(biāo)簽 24HTML input 標(biāo)簽 24定義和用法 241) 文本區(qū)域 242) 單選按鈕 243) 多選按鈕 244) 提交按鈕 25六．文件之間的鏈接 25本地鏈接： 25URL鏈接 26七．插入圖象 27基本格式 27圖形按鈕： 28八．多窗口頁面（FRAMES） 28iframe 28九． MARQUEE屬性說明 28基本語法 28方向 29方式 29循環(huán) 29速度 29延時 30外觀(Layout)設(shè)置 30對齊方式(Align) 30底色 30面積 30一．什么是JAVASCRIPT 33JavaScript簡述 33Javascript可以做什么？ 33二．怎么把JAVASCRIPT嵌入到HTML中 34怎樣放一個Javascript到一個HTML頁面？ 34把javascript嵌入到html的哪個位置 35三．JAVASCRIPT的變量及語法 37javascript的變量 37javascript的if…else表達(dá)式 37javascript的switch表達(dá)式 38javascript的運(yùn)算符 39運(yùn)算符 39分派符 39比較操作符 40邏輯操作符 40javascript的彈出窗口 41提示框 41確認(rèn)框 41輸入框 42javascript的Functions（函數(shù)） 43怎樣定義一個函數(shù)： 44javascript的for和while循環(huán) 44for循環(huán)： 45While循環(huán)： 45do...while循環(huán)： 45javascript循環(huán)中的的break和continue 46Break： 46continue： 47javascript的for…in表達(dá)式 48javascript的Events 50onload 和 onUnload 50onFocus, onBlur 和 onChange 50onSubmit 51onMouseOver and onMouseOut 51四．JAVASCRIPT對象 51Javascript幾大內(nèi)置對象 51自定義Javascript對象 52一．什么是DHTML 54二．CSS在DHTML中的定位 541) Position 54position:relative 54position:absolute 552) Visibility 55visibility:visible 55visibility:hidden 563) Zindex 564) Filters 57三．DHTML中DOCUMENT對象的樣式 57怎樣訪問一個元素? 57dhtml的Event Handlers 59HTML Event Handlers 60 HTML英語意思是：Hypertext Marked Language，即超文本標(biāo)記語言,是一種用來制作超文本文檔的簡單標(biāo)記語言。用HTML編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺（如UNIX，WINDOWS等）。自1990年以來HTML就一直被用作World Wide Web 的信息表示語言，用于描述Homepage的格式設(shè)計(jì)和它與WWW上其它Homepage 的連結(jié)信息。使用HTML語言描述的文件，需要通過WWW瀏覽器顯示出效果。 接下來，我們就結(jié)合幾個實(shí)例來觀看一下HTML的全貌，以便于我們首先對它有一個整體上的認(rèn)識，并且體會一下超文本與標(biāo)記究竟是什么意思。 通過HTML可以表現(xiàn)出豐富多彩的設(shè)計(jì)風(fēng)格 圖片調(diào)用：IMG SRC=文件名 文字格式：FONT SIZE=+5 COLOR=00FFFF文字/FONT 通過HTML可以實(shí)現(xiàn)頁面之間的跳轉(zhuǎn) 頁面跳轉(zhuǎn)：〈A HREF=文件路徑/文件名/A從以上的例子，我們就可以理解超文本與標(biāo)記的含義了。所謂超文本，因?yàn)樗梢约尤雸D片、聲音、動畫、影視等內(nèi)容，因?yàn)樗梢詮囊粋€文件跳轉(zhuǎn)到另一個文件，與世界各地主機(jī)的文件連接。所謂標(biāo)記，就是它采用了一系列的指令符號來控制輸出的效果，這些指令符號用“標(biāo)簽名字 屬性”來表示。二．HTML的基本結(jié)構(gòu) 超文本文檔分文檔頭和文檔體兩部分，在文檔頭里，對這個文檔進(jìn)行了一些必要的定義，文檔體中才是要顯示的各種文檔信息。HTML HEAD 頭 部 信 息 /HEAD BODY 文 檔 主 體， 正 文 部 分 /BODY/HTML 其中HTML在最外層， 表示這對標(biāo)記間的內(nèi)容是HTML文 檔。我們還會看到一些Hompage省略HTML標(biāo)記， 文件被Web瀏覽器默認(rèn)為是HTML文檔。HEAD 之間包括文檔的頭部信息，如文檔總標(biāo)題等，若不需頭部信息則可省略此標(biāo)記。BODY 標(biāo)記一般不省略， 表示正文內(nèi)容的開始。下面是一個最基本的超文本文檔的源代碼：HTMLHEADTITLE一個簡單的HTML示例/TITLE/HEADBODYCENTERH3歡迎光臨我的主頁/H3BRHRFONT SIZE=2 這是我第一次做主頁，無論怎么樣，我都會努力做好！/FONT/CENTER/BODY/HTML━┓ ┃文件頭━┛ ━┓ ┃ ┃ ┃ ┃文件體 ┃ ┃ ┃ ┃━┛窗體頂端窗體底端超文本中的標(biāo)簽 剛剛接觸超文本，遇到的最大的障礙就是一些用“”和“”括起來的句子，我們稱它為標(biāo)簽，是用來分割和標(biāo)記文本的元素，以形成文本的布局、文字的格式及五彩繽紛的畫面。1. 單標(biāo)簽 某些標(biāo)記稱為“單標(biāo)簽”，因?yàn)樗恍鑶为?dú)使用就能完整地表達(dá)意思，這類標(biāo)記的語法是： 標(biāo)簽名稱 最常用的單標(biāo)簽是BR, 它表示換行。 另一類標(biāo)記稱為“雙標(biāo)簽”，它由“始標(biāo)簽”和“尾標(biāo)簽”兩部分構(gòu)成，必須成對使用，其中始標(biāo)簽告訴Web瀏覽器從此處開始執(zhí)行該標(biāo)記所表示的功能，而尾標(biāo)簽告訴Web瀏覽器在這里結(jié)束該功能。始標(biāo)簽前加一個斜杠（/）即成為尾標(biāo)記。這類標(biāo)記的語法是： 標(biāo)簽 內(nèi) 容/ 標(biāo)簽 其中“內(nèi)容” 部分就是要被這對標(biāo)記施加作用的部分。例如你想突出對某段文字的顯示，就將此段文字放在一EM /EM標(biāo)記中： EM第一：/EM 許多單標(biāo)記和雙標(biāo)記的始標(biāo)記內(nèi)可以包含一些屬性， 其語法是： 標(biāo)簽名字 屬性1 屬性2 屬性3 … 各屬性之間無先后次序，屬性也可省略（即取默認(rèn)值），例如單標(biāo)記HR表示在文檔當(dāng)前位置畫一條水平線（horizontal line），一般是從窗口中當(dāng)前行的最左端一直畫到最右端。帶一些屬性： HR SIZE=3 ALIGN=LEFT WIDTH=75% 其中SIZE屬性定義線的粗細(xì)，屬性值取整數(shù)，缺為1；ALIGN屬性表示對齊方式，可取LEFT（左對齊，缺省值），CENTER（居中），RIGHT（右對齊）；WIDTH 屬性定義線的長度，可取相對值，（由一對 號括起來的百分?jǐn)?shù)，表示相對于充滿整個窗口的百分比），也可取絕對值（用整數(shù)表示的屏幕像素點(diǎn)的個數(shù)，如WIDTH=300），缺省值是100%。在HTML中用!—內(nèi)容來做注釋，注釋里面的內(nèi)容，瀏覽器不進(jìn)行解析。如：! This is a ment 3．1 標(biāo)題一般文章都有標(biāo)題、副標(biāo)題、章和節(jié)等結(jié)構(gòu)，HTML中也提供了相應(yīng)的標(biāo)題標(biāo)簽Hn,其中n為標(biāo)題的等HTML總共提供六個等級的標(biāo)題，n越小，標(biāo)題字號就越大，以下列出所有等級的標(biāo)題：〈H1…/H1 第一級標(biāo)題〈H2…/H2 第二級標(biāo)題〈H3…/H3 第三級標(biāo)題〈H4…/H4 第四級標(biāo)題〈H5…/H5 第五級標(biāo)題〈H6…/H6 第六級標(biāo)題請看下面的例子：htmlheadtitle標(biāo)題示例/title/headbody這是一行普通文字PH1一級標(biāo)題/H1H2二級標(biāo)題/H2H3三級標(biāo)題/H3H4四級標(biāo)題/H4H5五級標(biāo)題/H5H6六級標(biāo)題/H6/body/html3．2 換行在編寫HTML文件時，我們不必考慮太細(xì)的設(shè)置，也不必理會段落過長的部分會被瀏覽器切掉。因?yàn)椋贖TML語言規(guī)范里，每當(dāng)瀏覽器窗口被縮小時，瀏覽器會自動將右邊的文字轉(zhuǎn)折至下一行。所以，編寫者對于自己需要斷行的地方，應(yīng)加上br標(biāo)簽。 請看下面的例子：htmlheadtitle無換行示例/title/headbody登鸛雀樓 白日依山盡，黃河入海流。欲窮千里目，更上一層樓。/body/htmlhtmlheadtitle換行示例/title/head body登鸛雀樓br白日依山盡，br黃河入海流。br欲窮千里目，br更上一層樓。/body/html3．3段落標(biāo)簽P為了排列的整齊、清晰，文字段落之間，我們常用P/P來做標(biāo)記。文件段落的開始由P來標(biāo)記，段落的結(jié)束由/P來標(biāo)記，/P是可以省略的，因?yàn)橄乱粋€P的開始就意味著上一個P的結(jié)束。P標(biāo)簽還有一個屬性ALING，它用來指名字符顯示時的對齊方式，一般值有CENTER、LEFT、RIGHT三種。下面，我們用兩個例子來說明這個標(biāo)簽的用法。htmlheadtitle段落標(biāo)簽/title/headbodyP ALIGN=CENTER浣溪沙P一曲新詞酒一杯，去年天氣舊亭臺，夕陽西下幾時回。P無可奈何花落去，似曾相識燕歸來。小園香徑幾徘徊。/P/body/htmlhtmlheadtitle段落標(biāo)簽/title/headbody登鸛雀樓P白日依山盡，br黃河入海流。br欲窮千里目，br更上一層樓。/P/body/html3．4 字體大小的設(shè)置提供設(shè)置字號大小的是FONT，F(xiàn)ONT有一個屬性SIZE，通過指定SIZE屬性就能設(shè)置字號大小，而SIZE屬性的有效值范圍為1－7，其中缺省值為3。我們可以SIZE屬性值之前加上“＋”、“－”字符，來指定相對于字號初始值的增量或減量。請看示例：htmlheadtitle字號大小/ti