HTML基礎(chǔ)知識

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

2、各地主機的文件連接。l 過html可以表現(xiàn)出豐富多彩的設(shè)計風(fēng)格圖片調(diào)用：文字格式：文字l 通過html可以實現(xiàn)頁面之間的跳轉(zhuǎn)頁面跳轉(zhuǎn)：超級鏈接l 通過html可以展現(xiàn)多媒體的效果音頻、視頻、動畫上面我們在示例超文本特征的同時，采用了一些我們在制作超文本文件時需要用到的一些標(biāo)簽。所謂標(biāo)簽，就是它采用了一系列的指令符號來控制輸出的效果，這些指令符號用“”來表示。二、 html的基本結(jié)構(gòu)超文本文檔分文檔頭和文檔體兩部分，在文檔頭里，對這個文檔進行了一些必要的定義，文檔體中才是要顯示的各種文檔信息。頭 部 信 息文 檔 主 體， 正 文 部 分其中在最外層，表示這對標(biāo)記間的內(nèi)容是html文檔。我們還會

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

4、單標(biāo)簽?zāi)承?biāo)記稱為“單標(biāo)簽”，因為它只需單獨使用就能完整地表達意思，這類標(biāo)記的語法是：最常用的單標(biāo)簽是, 它表示換行。2. 雙標(biāo)簽另一類標(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)記的語法是： 內(nèi) 容其中“內(nèi)容” 部分就是要被這對標(biāo)記施加作用的部分。例如你想突出對某段文字的顯示，就將此段文字放在一 標(biāo)記中：第一：3. 標(biāo)簽屬性許多單標(biāo)記和雙標(biāo)記的始標(biāo)記內(nèi)可以包含一些屬性， 其語法是：各屬性之間無先后次序，屬性也可省略（即取

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

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

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

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

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

10、來顯示這是第二條線段，size=5這是第三條線段，size=105. 文字的大小設(shè)置提供設(shè)置字號大小的是font，font有一個屬性size，通過指定size屬性就能設(shè)置字號大小，而size屬性的有效值范圍為17，其中缺省值為3。我們可以size屬性值之前加上“”、“”字符，來指定相對于字號初始值的增量或減量。請看示例：字號大小這是size=7的字體這是size=6的字體這是size=5的字體這是size=4的字體這是size=-1的字體6. 文字的字體與樣式html4.0提供了定義字體的功能，用face屬性來完成這個工作。face的屬性值可以是本機上的任一字體類型，但有一點麻煩的是，只有對方

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

12、lver = #c0c0c0 lime = #00ff00 gray = #808080olive = #808000 white = #ffffffyellow = #ffff00 maroon = #800000navy = #000080red = #ff0000blue = #0000ffpurple = #800080teal = #008080fuchsia = #ff00ffaqua = #00ffff五、 列表list1. 無序號列表無序號列表使用的一對標(biāo)簽是，每一個列表項使用。其結(jié)構(gòu)如下所示：第一項第二項第三項無序列表這是一個無序列表：國際互聯(lián)網(wǎng)提供的服務(wù)有：www服務(wù)文件傳

13、輸服務(wù)電子郵件服務(wù)遠程登錄服務(wù)其它服務(wù)例：.2. 序號列表序號列表和無序號列表的使用方法基本相同，它使用標(biāo)簽，每一個列表項使用。每個項目都有前后順序之分，多數(shù)用數(shù)字表示。其結(jié)構(gòu)如下所示：第一項第二項第三項3. 定義性列表定義性列表可以用來給每一個列表項再加上一段說明性文字，說明獨立于列表項另起一行顯示。在應(yīng)用中，列表項使用標(biāo)簽標(biāo)明，說明性文字使用表示。在定義性列表中，還有一個屬性是compact,使用這個屬性后，說明文字和列表項將顯示在同一行。其結(jié)構(gòu)如下所示：第一項 敘述第一項的定義第二項 敘述第二項的定義第三項 敘述第三項的定義六、 表格1. 表格的基本結(jié)構(gòu). 定義表格.定義標(biāo)題 定義表行

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

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

16、、居右(right)和居中 (center)；而上下排列基本上比較常用的有四種：上齊(top)、居中(middle)、下齊(bottom)。 #=left, center, right #=top，middle，bottom示例：表格標(biāo)題水平居中水平居右水平居左垂直頂端垂直居中垂直底端8. 跨多行、多列的表元要創(chuàng)建跨多行、多列的表元，只需在或中加入rowspan或colspan屬性，這兩個屬性的值，表明了表元中要跨越的行或列的個數(shù)?？缍嗔械谋碓?colspan表示跨越的列數(shù)，例如colspan=2表示這一格的寬度為兩個列的寬度。跨多行的表元 rowspan所要表示的意義是指跨越的行數(shù)，例如ro

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

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