html標(biāo)簽以及詞匯全方面綜述

1、HTML語(yǔ)言基礎(chǔ)知識(shí)及使用廣州市白云行知職業(yè)技術(shù)學(xué)校 簡(jiǎn)金花本次課內(nèi)容：一、引入新課網(wǎng)頁(yè)源文件及考證試題二、HTML語(yǔ)言（一）什么是HTML語(yǔ)言（二）HTML文檔的結(jié)構(gòu)（三）HTML文檔的特點(diǎn)（四）查看HTML文檔的方法三、HTML標(biāo)簽（一）什么是HTML標(biāo)簽（二） HTML標(biāo)簽的格式（三）HTML標(biāo)簽的特點(diǎn)（四）（四）HTML的顏色四、HTML標(biāo)簽的使用（一）文檔標(biāo)簽（一）文檔標(biāo)簽（二）排版標(biāo)簽（二）排版標(biāo)簽（三）鏈接標(biāo)簽（三）鏈接標(biāo)簽New Page 1圖片對(duì)應(yīng)的HTML語(yǔ)言如下:一、引入新課一、引入新課New Page 1鄭智十歲在電影的臺(tái)詞是 “我要做球星！” “我要做馬拉多納！” “

2、我是偉大的左后衛(wèi)！” “點(diǎn)球！點(diǎn)球！”（一）什么是HTML語(yǔ)言全寫： HyperText Mark-up Language 譯名： 超文件注標(biāo)識(shí)語(yǔ)言（譯名之一） 簡(jiǎn)釋：一種為普通文件中某些字句加上標(biāo)識(shí)的語(yǔ)言，其目的在于運(yùn)用標(biāo)簽（tag）使文件達(dá)到預(yù)期的顯示效果。HTML 的格式非常簡(jiǎn)單，只是由文字及標(biāo)簽組合而成，于編輯方面，任何文字編輯器都可以，只要能將文件另存成 ASCII 純文字格式即可 （二）HTML文檔的結(jié)構(gòu)HTML文檔一般由兩部分組成：1 文檔所要表達(dá)的內(nèi)容信息；2 一系列HTML標(biāo)簽。HTML的標(biāo)簽分的標(biāo)簽分單標(biāo)簽單標(biāo)簽和和成對(duì)標(biāo)簽成對(duì)標(biāo)簽兩種。兩種。 成對(duì)標(biāo)簽成對(duì)標(biāo)簽是由首標(biāo)簽是

3、由首標(biāo)簽 和尾標(biāo)簽和尾標(biāo)簽組成的，成對(duì)標(biāo)簽的作用域組成的，成對(duì)標(biāo)簽的作用域只作用于這對(duì)標(biāo)簽中的文檔。單獨(dú)標(biāo)簽的格式只作用于這對(duì)標(biāo)簽中的文檔。單獨(dú)標(biāo)簽的格式，單獨(dú)標(biāo)簽在相應(yīng)的位置插入元，單獨(dú)標(biāo)簽在相應(yīng)的位置插入元素就可以了，大多數(shù)標(biāo)簽都有自己的一些屬性素就可以了，大多數(shù)標(biāo)簽都有自己的一些屬性, 屬性要寫在始標(biāo)簽內(nèi)，屬性用于進(jìn)一步屬性要寫在始標(biāo)簽內(nèi)，屬性用于進(jìn)一步改變顯示的效果改變顯示的效果, 各屬性之間無(wú)先后次序，屬性是可選的，屬性也可以省略而采用默認(rèn)各屬性之間無(wú)先后次序，屬性是可選的，屬性也可以省略而采用默認(rèn)值值;其格式如下：其格式如下： 內(nèi)容內(nèi)容二、HTML語(yǔ)言作為一般的原則，大多數(shù)屬性值不

4、用加雙引號(hào)。但是包括空格、號(hào)，號(hào)等特殊字符的屬性作為一般的原則，大多數(shù)屬性值不用加雙引號(hào)。但是包括空格、號(hào)，號(hào)等特殊字符的屬性值必須加入雙引號(hào)。為了好的習(xí)慣，提倡全部對(duì)屬性值加雙引號(hào)。值必須加入雙引號(hào)。為了好的習(xí)慣，提倡全部對(duì)屬性值加雙引號(hào)。如：如： 字體設(shè)置字體設(shè)置單獨(dú)標(biāo)簽單獨(dú)標(biāo)簽 是指標(biāo)簽單獨(dú)出現(xiàn)，只有起始標(biāo)簽沒(méi)有終結(jié)標(biāo)簽。 例如 HTML Source： I love Creation of Webpage.Its a wonderful place. 顯示成： I love Creation of Webpage. Its a wonderful place. 其中換行標(biāo)簽便屬單獨(dú)標(biāo)簽

5、。 它的作用便是將標(biāo)簽后所有東西顯示于下一行，可見(jiàn)終結(jié)標(biāo)簽于它是沒(méi)意義的， 但有些人會(huì)為空標(biāo)簽加上終結(jié)標(biāo)簽，這是為方便記認(rèn)而己，對(duì) HTML 沒(méi)有影響。 一個(gè)標(biāo)準(zhǔn)html文件應(yīng)具有下面的結(jié)構(gòu)： html文件開始 文件頭開始 文檔標(biāo)題 文件頭結(jié)束 文件體開始 文檔的主要內(nèi)容 文件體結(jié)束 html文件結(jié)束 返回注意： 網(wǎng)頁(yè)文件格式。 標(biāo)頭區(qū) : 記錄文件基本資料，如作者、編寫時(shí)間。 標(biāo)題區(qū) : 文件標(biāo)題須使用在標(biāo)頭區(qū)內(nèi)，可以在瀏覽器最上面看到標(biāo)題。 本文區(qū) : 文件資料，即在瀏覽器上看到的網(wǎng)站內(nèi)容。1 通用性2 簡(jiǎn)單性、3 可擴(kuò)展性、4 平臺(tái)無(wú)關(guān)性、5 編輯器無(wú)關(guān)性 （四）查看HTML文檔的方法查

6、看一個(gè)網(wǎng)頁(yè)HTML源代碼的方法是:打開一個(gè)網(wǎng)頁(yè)之后，點(diǎn)擊瀏覽器上的菜單“查看”，選擇下面的“源文件”選項(xiàng)，即可打開一個(gè)記事本文件，其中就是這個(gè)網(wǎng)頁(yè)所所有代碼。可以將鼠標(biāo)放置到網(wǎng)頁(yè)上的任何位置（只要位于沒(méi)有鏈接、圖片處，最好是網(wǎng)頁(yè)中的空白區(qū)域），點(diǎn)擊鼠標(biāo)右鍵，選擇其中的“查看源文件”即可。 （三）HTML文檔的特點(diǎn)三、HTML標(biāo)簽（一）什么是HTML標(biāo)簽HTML標(biāo)簽是由 所括住的指令，主要分為 : 單標(biāo)簽指令（ ）、雙標(biāo)簽指令 ( 由 ，所構(gòu)成 ) 。（二） HTML標(biāo)簽的格式HTML標(biāo)簽的格式是： 相應(yīng)內(nèi)容 如： 網(wǎng)頁(yè)的標(biāo)題 任何標(biāo)簽皆由所圍住，如 標(biāo)簽往往成對(duì)出現(xiàn)標(biāo)簽名與小于號(hào)之間不能留有空

7、白字符。 某些標(biāo)簽要加上屬性，某些則不必。如 Hello 如 屬性只可加于起始標(biāo)簽中。 在起始標(biāo)簽之標(biāo)簽名前加上符號(hào)/便是其終結(jié)標(biāo)簽，如 標(biāo)簽字母大小寫皆可。不同標(biāo)簽之間可以嵌套，但不能交叉 。（三）HTML標(biāo)簽的特點(diǎn)最后一個(gè)特點(diǎn)如何理解？請(qǐng)舉例說(shuō)明。（四）（四）HTML的顏色的顏色HTML 的顏色表示可分兩種： 以命名方式定義常用的顏色，如 RED。 以 RGB 值表示，如 #FF0000 表示 red。 命名方式涵括的色種不多亦不甚方便，較少采用，以下介紹 RGB 值的原理： 於應(yīng)用時(shí)常在每個(gè) RGB 值之前加上符號(hào) # 以示分別，但不加亦可。具體的顏色的表示參見(jiàn)另一個(gè)網(wǎng)頁(yè)文件思考題：HT

8、ML中“#9ACD32”表示什么顏色？“#800080”呢？“#90EE90”呢？ 四、HTML標(biāo)簽的使用（一）文檔標(biāo)簽（一）文檔標(biāo)簽 上述標(biāo)記中只有具屬性設(shè)定。 之屬性設(shè)定：例子： text=“#000000” 用以設(shè)定文字顏色。 #000000 代表黑色，亦可以采用顏色的名稱，即 text=“black” 。各種顏色的值及名稱可參考【HTML的顏色】。 link=#0000FF 設(shè)定一般文字屬性顏色。 alink=#FF0000 設(shè)定剛按下時(shí)文字屬性顏色。 vlink=#0000FF 設(shè)定屬性后的顏色。（被按過(guò)）。 background=bg1.gif 設(shè)定背景墻紙。GIF 或 JPEG

9、皆可，可以是絕對(duì)途徑或相對(duì)途徑。 bgcolor=#FFFFFF 設(shè)定背景顏色。當(dāng)己設(shè)定背景墻紙時(shí)會(huì)失去作用，除非墻紙有透明部分。 leftmargin=2 設(shè)定整份文件顯示畫面的左方邊沿空間，單位為像素。 只適用于IE topmargin=2 設(shè)定整份文件顯示畫面的上方邊沿空間。 只適用于IE bgproperties=fixed 固定背景墻紙，當(dāng)卷動(dòng)文字時(shí)墻紙不會(huì)跟著卷動(dòng)。 只適用于IE 標(biāo)記及屬性之字母大小都可以。 ； ； ； ； ；（二）排版標(biāo)簽（二）排版標(biāo)簽：像很多電腦語(yǔ)言一樣，HTML 文件亦提供注解功能。瀏覽器會(huì)忽略此標(biāo)記中的文字（可以 是很多行）而不作顯示，一般使用目的： 為文

10、中不同部份加上說(shuō)明，方便日后修改。 這對(duì)較復(fù)雜或非私人網(wǎng)頁(yè)尤其重要，它不單是提醒自已，亦提醒你的同事這部分 做什么、那部分做什么。 例子： 用作版權(quán)聲明。 假如你不希望別人使用或復(fù)制你的網(wǎng)頁(yè)，可加上警告字眼。 例子： ：稱為段落標(biāo)記。作用：為字、畫、表格等之間留一空白行。 本來(lái)是一圍堵標(biāo)記，標(biāo)于一段落的頭尾，但從 HTML 2.0 開始己不需要作結(jié)尾。 的常用屬性align 表示段落文字的對(duì)齊方式： 如： align=center 可選值：right, left, center。 內(nèi)定值： align=left 原始碼Here is the text for my paragraph. It

11、doest matter how long it is, how many space are between the words or when I decide to hit the return key. It will create a new paragraph only when I begin the tag with another one. Heres the next paragraph. 顯示結(jié)果Here is the text for my paragraph. It doest matter how long it is, how many space are bet

12、ween the words or when I decide to hit the return key. It will create a new paragraph only when I begin the tag with another one. Heres the next paragraph.例子： ：稱為換行標(biāo)簽。作用：令字、畫、表格等顯示于下一行。 由于瀏覽器會(huì)自動(dòng)忽略原始碼中空白和換行的部分，這令到成為最常用的標(biāo)記之 一。因?yàn)闊o(wú)論你在原始碼中編好了多漂亮的文章，若不適當(dāng)?shù)丶由蠐Q行標(biāo)簽或段落標(biāo)簽， 瀏覽器只會(huì)將它顯示成一大段。 原始碼566 E Boston Post RD

13、 Mamaroneck NY 10543-9982 United States of America 顯示結(jié)果566 E Boston Post RD Mamaroneck NY 10543-9982 United States of America 錯(cuò)誤示范：（郵局可不會(huì)接受一行過(guò)的地址） 正確例子：原始碼566 E Boston Post RD Mamaroneck NY 10543-9982 United States of America 顯示結(jié)果566 E Boston Post RD Mamaroneck NY 10543-9982 United States of America

14、 ：稱為水平線。作用：插入一條水平線。 之屬性修改： 以： 為例。 noshade 表示實(shí)線（無(wú)陰影）align=LEFT 設(shè)定線條置放位置，可選擇：left；right；center 三種設(shè)定值。 size=2 設(shè)定線條厚度，以像素作單位，內(nèi)定為 2。 width=70% 設(shè)定線條長(zhǎng)度，可以是絕對(duì)值（以像素作單位）或相對(duì)值，內(nèi)定為 100%。 color=#0000FF 只適用于IE 設(shè)定線條顏色，內(nèi)定為黑色。 #0000FF 代表藍(lán)色，亦可以采用顏色的名稱，即 text=blue 。 noshade 設(shè)定線條為平面顯示，若刪去則具陰影或立體，這是內(nèi)定值。 例子：原始碼 顯示結(jié)果 ：稱為居中

15、標(biāo)記。作用：令字、畫、表格等顯示于中間。 例子：原始碼Chriss First Homepage Whats new My profile 顯示結(jié)果Chriss First Homepage Whats new My profile 其他的排版標(biāo)簽：其他的排版標(biāo)簽： ； ； ； ； （三）鏈接標(biāo)簽（三）鏈接標(biāo)簽1 鏈接的概念鏈接又叫超鏈接，超鏈接是從一個(gè)網(wǎng)頁(yè)指向另一個(gè)目的端的鏈接。這個(gè)目的端通常是另一個(gè)網(wǎng)頁(yè)，也可以是一幅圖片、一個(gè)電子郵件地址、一個(gè)文件或一個(gè)程序。鏈接是HTML中最重要的功能！因?yàn)镠TML擁有鏈接的功能，使你能接上INTERNET、WWW 享受多姿多彩的網(wǎng)絡(luò)世界。 ： 稱鏈接標(biāo)

16、簽，由 與 所圍的文字、圖片等等可以成為一個(gè)鏈接。 的一般屬性設(shè)定： 例如 相關(guān)屬性 : href 鏈接的URL位址或文件 name名稱 target 指定鏈接到的URL位址或文件顯示于那一個(gè)視窗 ( 可和 視窗標(biāo)記配合使用或開新的視窗 ) href=index.html 這屬性不能與另一屬性 name 同時(shí)使用，使用這屬性才能造成可按的鏈接。 當(dāng)作為一當(dāng)作為一外外部屬性時(shí)：部屬性時(shí)： href 所設(shè)定的是該鏈接所要連到的文件名稱，若 該文件與此 html 檔不是同在一目錄請(qǐng)加上適當(dāng)?shù)穆窂?，相?duì)絕對(duì)皆可。 當(dāng)作為一當(dāng)作為一內(nèi)內(nèi)部屬性時(shí)：部屬性時(shí)： href 所設(shè)定的是該鏈接所要連到的同文件內(nèi)參

17、考 點(diǎn)或指定文件之參考點(diǎn)，且不要包圍任何字畫只加上結(jié)束標(biāo)示 便 可以， 例如 、 及 其中 there 便是參考點(diǎn)，并于其前加上符號(hào) # 以作識(shí)別，參考點(diǎn)由下一個(gè)屬性 name 事先于文件中埋下。例子一: 外部鏈接基本上鏈接分成 : 外部鏈接鏈接至網(wǎng)絡(luò)的某個(gè)URL網(wǎng)址或文件，可參考考網(wǎng)絡(luò)鏈接方式。內(nèi)部鏈接鏈接同HTML文件的某個(gè)區(qū)段。和之間不要包圍任何文字和圖像。 原始碼網(wǎng)絡(luò)教室首頁(yè) 顯示結(jié)果網(wǎng)絡(luò)教室首頁(yè)退出例子二（內(nèi)部連結(jié)）：請(qǐng)到 PenPal Garden 的 FAQ Page 刻體驗(yàn)一下何為內(nèi)部連結(jié)。 原始碼原始碼 本頁(yè)的內(nèi)部連結(jié) 跳到 PenPal Garden 的 FAQ 部分顯示結(jié)果本頁(yè)的內(nèi)部連結(jié) 跳到 PenPal Garden 的 FAQ 部分 name=hello 這屬性是為文件埋下參考點(diǎn)，作為被屬性，不會(huì)被顯示。所以說(shuō)造成一個(gè)內(nèi)部連 結(jié)要使用兩次 屬性標(biāo)記。一個(gè)使用屬性 name 事先於文件中埋下一參考 點(diǎn)，另一個(gè)使用屬性 href 連到這個(gè)參考點(diǎn)。target=“_top” 這個(gè)屬性設(shè)定鏈接被點(diǎn)擊后，結(jié)果所要顯示的視窗。 可選值為： _blank, _pa