HTML 基礎(chǔ)知識(shí)

1、.html 基礎(chǔ)知識(shí)培訓(xùn)一、 html入門html英語(yǔ)意思是：hypertext marked language，即超文本標(biāo)記語(yǔ)言,是一種用來(lái)制作超文本文檔的簡(jiǎn)單標(biāo)記語(yǔ)言。用html編寫的超文本文檔稱為html文檔，它能獨(dú)立于各種操作系統(tǒng)平臺(tái)（如unix，windows等）。自1990年以來(lái)html就一直被用作world wide web 的信息表示語(yǔ)言，用于描述homepage的格式設(shè)計(jì)和它與www上其它homepage 的連結(jié)信息。使用html語(yǔ)言描述的文件，需要通過www瀏覽器顯示出效果。所謂超文本，因?yàn)樗梢约尤雸D片、聲音、動(dòng)畫、影視等內(nèi)容，因?yàn)樗梢詮囊粋€(gè)文件跳轉(zhuǎn)到另一個(gè)文件，與世界

2、各地主機(jī)的文件連接。l 過html可以表現(xiàn)出豐富多彩的設(shè)計(jì)風(fēng)格圖片調(diào)用：文字格式：文字l 通過html可以實(shí)現(xiàn)頁(yè)面之間的跳轉(zhuǎn)頁(yè)面跳轉(zhuǎn)：超級(jí)鏈接l 通過html可以展現(xiàn)多媒體的效果音頻、視頻、動(dòng)畫上面我們?cè)谑纠谋咎卣鞯耐瑫r(shí)，采用了一些我們?cè)谥谱鞒谋疚募r(shí)需要用到的一些標(biāo)簽。所謂標(biāo)簽，就是它采用了一系列的指令符號(hào)來(lái)控制輸出的效果，這些指令符號(hào)用“”來(lái)表示。二、 html的基本結(jié)構(gòu)超文本文檔分文檔頭和文檔體兩部分，在文檔頭里，對(duì)這個(gè)文檔進(jìn)行了一些必要的定義，文檔體中才是要顯示的各種文檔信息。頭 部 信 息文 檔 主 體， 正 文 部 分精品.其中在最外層，表示這對(duì)標(biāo)記間的內(nèi)容是html文檔。我

3、們還會(huì)看到一些頁(yè)面省略標(biāo)記，因?yàn)?html 或.htm 文件被web瀏覽器默認(rèn)為是html文檔,但是這種做法是錯(cuò)誤的，后面會(huì)提到一些錯(cuò)誤的做法。 之間包括文檔的頭部信息，如文檔總標(biāo)題等，若不需頭部信息則可省略此標(biāo)記。表示正文內(nèi)容的開始。下面是一個(gè)最基本的超文本文檔的源代碼：一個(gè)簡(jiǎn)單的html示例歡迎光臨我的主頁(yè)這是我第一次做主頁(yè)，無(wú)論怎么樣，我都會(huì)努力做好！head區(qū)的其他設(shè)置 設(shè)置站點(diǎn)作者信息 設(shè)置站點(diǎn)版權(quán)信息 站點(diǎn)的簡(jiǎn)要介紹(推薦)精品. 站點(diǎn)的關(guān)鍵詞(推薦)三、 超文本中的標(biāo)簽在開始正式內(nèi)容制作之前，我們必須先了解一下web標(biāo)準(zhǔn)有關(guān)代碼的規(guī)范。了解這些規(guī)范可以幫助你少走彎路,盡快通過代碼

4、校驗(yàn)。1. 單標(biāo)簽?zāi)承?biāo)記稱為“單標(biāo)簽”，因?yàn)樗恍鑶为?dú)使用就能完整地表達(dá)意思，這類標(biāo)記的語(yǔ)法是：最常用的單標(biāo)簽是, 它表示換行。2. 雙標(biāo)簽另一類標(biāo)記稱為“雙標(biāo)簽”，它由“始標(biāo)簽”和“尾標(biāo)簽”兩部分構(gòu)成，必須成對(duì)使用，其中始標(biāo)簽告訴web瀏覽器從此處開始執(zhí)行該標(biāo)記所表示的功能，而尾標(biāo)簽告訴web瀏覽器在這里結(jié)束該功能。始標(biāo)簽前加一個(gè)斜杠（/）即成為尾標(biāo)記。這類標(biāo)記的語(yǔ)法是： 內(nèi) 容其中“內(nèi)容” 部分就是要被這對(duì)標(biāo)記施加作用的部分。例如你想突出對(duì)某段文字的顯示，就將此段文字放在一 標(biāo)記中：第一：3. 標(biāo)簽屬性許多單標(biāo)記和雙標(biāo)記的始標(biāo)記內(nèi)可以包含一些屬性， 其語(yǔ)法是：各屬性之間無(wú)先后次序，屬性也

5、可省略（即取默認(rèn)值），例如單標(biāo)記表示在文檔當(dāng)前位置畫一條水平線（horizontal line），一般是從窗口中當(dāng)前行的最左端一直畫到最右端。帶一些屬性： 其中size屬性定義線的粗細(xì)，屬性值取整數(shù)，缺為1；align屬性表示對(duì)齊方式，可取left（左對(duì)齊，缺省值），center（居中），right（右對(duì)齊）；width 屬性定義線的長(zhǎng)度，可取相對(duì)值，（由一對(duì) 精品. 號(hào)括起來(lái)的百分?jǐn)?shù)，表示相對(duì)于充滿整個(gè)窗口的百分比），也可取絕對(duì)值（用整數(shù)表示的屏幕像素點(diǎn)的個(gè)數(shù)，如width=”300”），缺省值是100%。其中值得注意的：1所有的標(biāo)記都必須要有一個(gè)相應(yīng)的結(jié)束標(biāo)記以前在html中，你可以打開許

6、多標(biāo)簽，例如和而不一定寫對(duì)應(yīng)的和來(lái)關(guān)閉它們。但在xhtml中這是不合法的。xhtml要求有嚴(yán)謹(jǐn)?shù)慕Y(jié)構(gòu)，所有標(biāo)簽必須關(guān)閉。如果是單獨(dú)不成對(duì)的標(biāo)簽，在標(biāo)簽最后加一個(gè) /來(lái)關(guān)閉它。例如:2所有標(biāo)簽的元素和屬性的名字都必須使用小寫與html不一樣，xhtml對(duì)大小寫是敏感的，和是不同的標(biāo)簽。xhtml要求所有的標(biāo)簽和屬性 的名字都必須使用小寫。例如：必須寫成 。大小寫夾雜也是不被認(rèn)可的，通常dreamweaver自動(dòng)生成的屬性名字onmouseover也必須修改成onmouseover。3 所有的xml標(biāo)記都必須合理嵌套同樣因?yàn)閤html要求有嚴(yán)謹(jǐn)?shù)慕Y(jié)構(gòu)，因此所有的嵌套都必須按順序，以前我們這樣寫的代

7、碼： 必須修改為： 就是說(shuō)，一層一層的嵌套必須是嚴(yán)格對(duì)稱。4 所有的屬性必須用引號(hào)括起來(lái)在html中，你可以不需要給屬性值加引號(hào)，但是在xhtml中，它們必須被加引號(hào)。例如: 必須修改為： 特殊情況，你需要在屬性值里使用雙引號(hào)，你可以用，單引號(hào)可以使用，例如：精品.四、 頁(yè)面布局與文字設(shè)計(jì)1. 標(biāo)題一般文章都有標(biāo)題、副標(biāo)題、章和節(jié)等結(jié)構(gòu)，html中也提供了相應(yīng)的標(biāo)題標(biāo)簽,其中n為標(biāo)題的等html總共提供六個(gè)等級(jí)的標(biāo)題，n越小，標(biāo)題字號(hào)就越大，以下列出所有等級(jí)的標(biāo)題：h1第一級(jí)標(biāo)題h2第二級(jí)標(biāo)題h3第三級(jí)標(biāo)題h4第四級(jí)標(biāo)題h5第五級(jí)標(biāo)題h6第六級(jí)標(biāo)題請(qǐng)看下面的例子：標(biāo)題示例這是一行普通文字h1一

8、級(jí)標(biāo)題h2二級(jí)標(biāo)題h3三級(jí)標(biāo)題h4四級(jí)標(biāo)題h5五級(jí)標(biāo)題h6六級(jí)標(biāo)題精品.2. 換行在編寫html文件時(shí)，我們不必考慮太細(xì)的設(shè)置，也不必理會(huì)段落過長(zhǎng)的部分會(huì)被瀏覽器切掉。因?yàn)?，在html語(yǔ)言規(guī)范里，每當(dāng)瀏覽器窗口被縮小時(shí)，瀏覽器會(huì)自動(dòng)將右邊的文字轉(zhuǎn)折至下一行。所以，編寫者對(duì)于自己需要斷行的地方，應(yīng)加上標(biāo)簽。請(qǐng)看下面的例子：無(wú)換行示例登鸛雀樓白日依山盡，黃河入海流。欲窮千里目，更上一層樓。換行示例登鸛雀樓白日依山盡，黃河入海流。欲窮千里目，更上一層樓。3. 段落標(biāo)簽為了排列的整齊、清晰，文字段落之間，我們常用來(lái)做標(biāo)記。文件段落的開始由來(lái)標(biāo)記，段落的結(jié)束由來(lái)標(biāo)記。標(biāo)簽還有一個(gè)屬性aling，它用來(lái)指

9、名字符顯示時(shí)的對(duì)齊方式，一般值有center、left、right三種。下面，我們用兩個(gè)例子來(lái)說(shuō)明這個(gè)標(biāo)簽的用法。段落標(biāo)簽浣溪沙一曲新詞酒一杯，去年天氣舊亭臺(tái)，夕陽(yáng)西下幾時(shí)回。無(wú)可奈何花落去，似曾相識(shí)燕歸來(lái)。小園香徑幾徘徊。段落標(biāo)簽登鸛雀樓白日依山盡，黃河入海流。欲窮千里目，更上一層樓。精品.4. 水平線段這個(gè)標(biāo)簽可以在屏幕上顯示一條水平線，用以分割頁(yè)面中的不同部分。有三個(gè)屬性：size水平線的寬度width 水平線的長(zhǎng)，用占屏幕寬度的百分比或象素值來(lái)表示align 水平線的對(duì)齊方式，有l(wèi)eft right center三種noshade 線段無(wú)陰影屬性，為實(shí)心線段線段粗細(xì)的設(shè)定這是第一條線段

10、，無(wú)size設(shè)定，取內(nèi)定值size=1來(lái)顯示這是第二條線段，size=5這是第三條線段，size=105. 文字的大小設(shè)置提供設(shè)置字號(hào)大小的是font，font有一個(gè)屬性size，通過指定size屬性就能設(shè)置字號(hào)大小，而size屬性的有效值范圍為17，其中缺省值為3。我們可以size屬性值之前加上“”、“”字符，來(lái)指定相對(duì)于字號(hào)初始值的增量或減量。請(qǐng)看示例：字號(hào)大小這是size=7的字體這是size=6的字體這是size=5的字體這是size=4的字體這是size=-1的字體精品.6. 文字的字體與樣式html4.0提供了定義字體的功能，用face屬性來(lái)完成這個(gè)工作。face的屬性值可以是本機(jī)

11、上的任一字體類型，但有一點(diǎn)麻煩的是，只有對(duì)方的電腦中裝有相同的字體才可以在他的瀏覽器中出現(xiàn)你預(yù)先設(shè)計(jì)的風(fēng)格。請(qǐng)看例子：字體歡迎光臨歡迎光臨歡迎光臨歡迎光臨welcom my homepage.welcom my homepage.為了讓文字富有變化，或者為了著意強(qiáng)調(diào)某一部分，html提供了一些標(biāo)簽產(chǎn)生這些效果，現(xiàn)將常用的標(biāo)簽列舉如下：粗體斜體加下劃線打字機(jī)字體大型字體小型字體閃爍效果表示強(qiáng)調(diào)，一般為斜體表示特別強(qiáng)調(diào)，一般為粗體用于引證、舉例，一般為斜體7. 文字的顏色文字顏色設(shè)置格式如下：這里的顏色值可以是一個(gè)十六進(jìn)制數(shù)(用“#”作為前綴)，也可以是以下16種顏色名稱。精品.black = #

12、000000 green = #008000 silver = #c0c0c0 lime = #00ff00 gray = #808080olive = #808000 white = #ffffffyellow = #ffff00 maroon = #800000navy = #000080red = #ff0000blue = #0000ffpurple = #800080teal = #008080fuchsia = #ff00ffaqua = #00ffff五、 列表list1. 無(wú)序號(hào)列表無(wú)序號(hào)列表使用的一對(duì)標(biāo)簽是，每一個(gè)列表項(xiàng)使用。其結(jié)構(gòu)如下所示：第一項(xiàng)第二項(xiàng)第三項(xiàng)無(wú)序列表這是一個(gè)

13、無(wú)序列表：國(guó)際互聯(lián)網(wǎng)提供的服務(wù)有：www服務(wù)文件傳輸服務(wù)電子郵件服務(wù)遠(yuǎn)程登錄服務(wù)其它服務(wù)例：精品.2. 序號(hào)列表序號(hào)列表和無(wú)序號(hào)列表的使用方法基本相同，它使用標(biāo)簽，每一個(gè)列表項(xiàng)使用。每個(gè)項(xiàng)目都有前后順序之分，多數(shù)用數(shù)字表示。其結(jié)構(gòu)如下所示：第一項(xiàng)第二項(xiàng)第三項(xiàng)3. 定義性列表精品.定義性列表可以用來(lái)給每一個(gè)列表項(xiàng)再加上一段說(shuō)明性文字，說(shuō)明獨(dú)立于列表項(xiàng)另起一行顯示。在應(yīng)用中，列表項(xiàng)使用標(biāo)簽標(biāo)明，說(shuō)明性文字使用表示。在定義性列表中，還有一個(gè)屬性是compact,使用這個(gè)屬性后，說(shuō)明文字和列表項(xiàng)將顯示在同一行。其結(jié)構(gòu)如下所示：第一項(xiàng) 敘述第一項(xiàng)的定義第二項(xiàng) 敘述第二項(xiàng)的定義第三項(xiàng) 敘述第三項(xiàng)的定義六、

14、 表格1. 表格的基本結(jié)構(gòu). 定義表格.定義標(biāo)題 定義表行 定義表頭 定義表元(表格的具體數(shù)據(jù))基本表格的例子：表格標(biāo)題    2. 表格的標(biāo)題表格標(biāo)題的位置，可由align屬性來(lái)設(shè)置，其位置分別由表格上方和表格下方。下面為表格標(biāo)題位置的設(shè)置格式。設(shè)置標(biāo)題位于表格上方： . 設(shè)置標(biāo)題位于表格下方： . 精品.3. 表格的大小一般情況下，表格的總長(zhǎng)度和總寬度是根據(jù)各行和各列的總和自動(dòng)調(diào)整的，如果我們要直接固定表格的大小，可以使用下列方式： width和height屬性分別指定表格一個(gè)固定的寬度和長(zhǎng)度，n1和n2可以用像素來(lái)表示，也可以用百分比（與整個(gè)屏幕相

15、比的大小比例）來(lái)表示。4. 邊框尺寸設(shè)置邊框是用border屬性來(lái)體現(xiàn)的，它表示表格的邊框邊厚度和框線。將border設(shè)成不同的值，有不同的效果。5. 格間寬度格與格之間的線為格間線，它的寬度可以使用中的cellspacing屬性加以調(diào)節(jié)。格式是：#表示要取用的像素值格間寬度如下圖中的綠色區(qū)域：6. 內(nèi)容與格線之間的寬度我們還可以在中設(shè)置cellpadding屬性，用來(lái)規(guī)定內(nèi)容與格線之間的寬度。格式為：#表示要取用的像素值內(nèi)容與格線之間的寬度如下圖中的紅色區(qū)域：7. 表格內(nèi)文字的對(duì)齊/布局表格中數(shù)據(jù)的排列方式有兩種，分別是左右排列和上下排列。左右排列是以align屬性來(lái)設(shè)置，而上下排列則由va

16、lign屬性來(lái)設(shè)置。其中左右排列的位置可分為三種：居左（left)、居右(right)和居中 (center)；而上下排列基本上比較常用的有四種：上齊(top)、居中(middle)、下齊(bottom)。 #=left, center, right精品. #=top，middle，bottom示例：表格標(biāo)題水平居中水平居右水平居左垂直頂端垂直居中垂直底端8. 跨多行、多列的表元要?jiǎng)?chuàng)建跨多行、多列的表元，只需在或中加入rowspan或colspan屬性，這兩個(gè)屬性的值，表明了表元中要跨越的行或列的個(gè)數(shù)?？缍嗔械谋碓?colspan表示跨越的列數(shù)，例如colspan=2表示這一格的寬度為兩個(gè)列的

17、寬度。跨多行的表元 rowspan所要表示的意義是指跨越的行數(shù)，例如rowspan=”2” 就表示這一格跨越表格兩個(gè)行的高度。l 跨多列的表元值班人員 星期一 星期二 星期三李強(qiáng)張明王平精品.l 跨多行的表元值班人員星期一星期二 星期三李強(qiáng)張明王平l 表格的顏色在表格中，既可以對(duì)整個(gè)表格填入底色，也可以對(duì)任何一行、一個(gè)表元使用背景色。表格的背景色彩行的背景色彩表元的背景色彩或 顏色疊加層次如下圖：七、 文件之間的鏈接超文本中的鏈接是其最重要的特性之一，使用者可以從一個(gè)頁(yè)面直接跳轉(zhuǎn)到其他的頁(yè)面、圖象或者服務(wù)器。一個(gè)鏈接的基本格式如下： w3c 標(biāo)簽表示一個(gè)鏈接的開始，表示鏈接的結(jié)束；屬性“hre

18、f”定義了這個(gè)鏈接所指的地方，即url地址；target 鏈接打開的地址的目標(biāo)窗口，可能的取值：_blank 在新窗口打開此鏈接。精品._self 在本窗口打開此鏈接（本頁(yè)刷新）。_parent 在父框架窗口打開此鏈接。_top 在最外層框架窗口打開此鏈接。八、 多媒體效果超文本之所以在很短的時(shí)間內(nèi)如此廣泛的受到人們的青睞，很重要的一個(gè)原因時(shí)它能支持多媒體的特性，如圖象、聲音、動(dòng)畫等。這一部分，我們先來(lái)學(xué)習(xí)在一個(gè)頁(yè)面中如何插入圖象。1. 插入圖形超文本支持的圖象格式一般有x bitmap(xbm)、gif、jpeg三種，所以我們對(duì)圖片處理后要保存為這三種格式中的任何一種，這樣才可以在瀏覽器中看到。插入圖象的標(biāo)簽是，其格式為：src屬性指明了所要鏈接的圖象文件地址，這個(gè)圖形文件可以是本地機(jī)器上的圖形，也可以是位于遠(yuǎn)端主機(jī)上的圖形。地址的表示方法可以沿用上一篇內(nèi)容“文件的鏈接”中url地址表示方法。例