html網(wǎng)頁(yè)標(biāo)簽基礎(chǔ)知識(shí)課件

1、本次課題：(HTML)教學(xué)目標(biāo)第一章 認(rèn)識(shí) HTML第三章 學(xué)習(xí) HTML 標(biāo)簽第四章 有序和無(wú)序列表第二章 HTML 的頁(yè)面結(jié)構(gòu)本次課題：(HTML)教學(xué)目標(biāo)第一章 認(rèn)識(shí) HTML第三章第一章 認(rèn)識(shí)HTML 什么是HTML HTML是“超文本標(biāo)記語(yǔ)言”（Hypertext Markup Language）的縮寫。是一種專門用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的計(jì)算機(jī)語(yǔ)言，用它可以制作萬(wàn)維網(wǎng)頁(yè)面。 用HTML編寫的超文本文件稱為HTML文件，也稱Web文件。第一章 認(rèn)識(shí)HTML 什么是HTML HTML是HTML 簡(jiǎn)介HTML 是一種標(biāo)記語(yǔ)言使用HTML標(biāo)記和元素可以：控制頁(yè)面和內(nèi)容的外觀發(fā)布聯(lián)機(jī)文檔使用 HTML

2、文檔中插入的鏈接檢索聯(lián)機(jī)信息創(chuàng)建聯(lián)機(jī)表單，收集用戶的信息、執(zhí)行事務(wù)等等插入動(dòng)畫(huà)開(kāi)發(fā)幫助文件HTML 簡(jiǎn)介HTML 是一種標(biāo)記語(yǔ)言使用HTML標(biāo)記和元素 HTML的格式 用HTML生成的文檔HTML文檔，是ASCII碼格式文件，你可以使用任何普通的文字編輯器來(lái)編輯它，普通的文字編輯器只能用來(lái)編輯HTML文檔，但要看到網(wǎng)頁(yè)的實(shí)際效果還要在瀏覽器中打開(kāi)HTML文檔。 HTML網(wǎng)頁(yè)文件都以.html為擴(kuò)展名。 HTML的格式 用HTML生成的文檔第二章 HTML頁(yè)面基本結(jié)構(gòu) 標(biāo)題設(shè)定區(qū)（第二層）HTML網(wǎng)頁(yè)文本區(qū)（第三層）最外層第二章 HTML頁(yè)面基本結(jié)構(gòu) 標(biāo)記 一個(gè)完整的HTML文件是以標(biāo)記開(kāi)始的，

3、用來(lái)告知瀏覽器這個(gè)文件是使用HTML格式編寫的；最后使用標(biāo)記告知瀏覽器此處是HTML文件的結(jié)束點(diǎn)。 標(biāo)記 一個(gè)完整的 標(biāo)記 在此標(biāo)簽包圍中的文字是網(wǎng)頁(yè)的開(kāi)場(chǎng)白，即頁(yè)面標(biāo)題。一般來(lái)說(shuō)只有很少幾個(gè)標(biāo)記可以放在里（如）。你千萬(wàn)不要把文章的正文放在里面，否則，將無(wú)法看到你的正文了。用法如下：歡迎光臨快樂(lè)天地 標(biāo)記 在此標(biāo)簽包圍中的文 標(biāo)記 用于包含那些作為頁(yè)面標(biāo)題顯示的文字。這些標(biāo)簽始終是包含在標(biāo)簽之內(nèi)，標(biāo)記的長(zhǎng)度最好不要太長(zhǎng)，以不超過(guò)20個(gè)字符為原則。其中內(nèi)容將出現(xiàn)在瀏覽器的標(biāo)題欄中。 標(biāo)記 用于包含那些 標(biāo)記 標(biāo)記能提供文檔的字符編碼、描述、關(guān)鍵字、作者、自動(dòng)刷新等多種信息。 指定文檔的描 述，闡

4、明整個(gè)網(wǎng)站的宗旨及吸引人的地方 標(biāo)記搜索引擎在 搜索頁(yè)面時(shí)取出的關(guān)鍵詞 標(biāo)記文檔的作者定義頁(yè)面n秒后自動(dòng)刷新頁(yè)面 定義頁(yè)面打開(kāi)3秒鐘后自動(dòng)跳轉(zhuǎn)到http:/ 練習(xí)網(wǎng)頁(yè)自動(dòng)刷新與跳轉(zhuǎn)。 標(biāo)記 標(biāo)記能提供文檔的字符 標(biāo)記 你所制作的網(wǎng)頁(yè)的正文內(nèi)容連同鏈接和圖片等等都要放在此標(biāo)記里面。把它同和標(biāo)記結(jié)合起來(lái)就構(gòu)成了網(wǎng)頁(yè)結(jié)構(gòu)的主框架?？梢栽O(shè)定一些屬性，如背景色，背景圖形等。語(yǔ)法如下： BGCOLOR：指定HTML的背景色。 TEXT：指定HTML文件中文字色彩屬性。 BACKGROUND：指定HTML背景圖形。 標(biāo)記 你所制作的網(wǎng)頁(yè)的正文內(nèi)在記事本下撰寫HTML的語(yǔ)法就可以了。如圖： 如何編寫HTML文

5、件 在記事本窗口下單擊“文件保存”，在另存為對(duì)話框中的文件名欄中輸入：文件名.html。在記事本下撰寫HTML的語(yǔ)法就可以了。如圖： 如何編寫HTM一個(gè)簡(jiǎn)單的HTML例子和和一個(gè)簡(jiǎn)單的HTML例子和bo一個(gè)用HTML編寫的網(wǎng)頁(yè)一個(gè)用HTML編寫的網(wǎng)頁(yè)添加背景顏色以后的網(wǎng)頁(yè)效果添加背景顏色以后的網(wǎng)頁(yè)效果Html小練習(xí)練習(xí)1：創(chuàng)建你的第一個(gè)網(wǎng)頁(yè)，內(nèi)容自定。Html小練習(xí)練習(xí)1：創(chuàng)建你的第一個(gè)網(wǎng)頁(yè)，內(nèi)容自定。第三章 學(xué)習(xí) HTML 標(biāo)簽語(yǔ)法：功能：設(shè)定段落說(shuō)明：1. 每一個(gè)段落都括在標(biāo)簽之內(nèi)。結(jié)尾標(biāo)記可以省略。2Align屬性用來(lái)設(shè)定文字的對(duì)齊方式，其value屬性值可設(shè)為： left： 設(shè)定文字左

6、對(duì)齊 right： 設(shè)定文字右對(duì)齊 center：設(shè)定文字置中對(duì)齊 段落標(biāo)記符第三章 學(xué)習(xí) HTML 標(biāo)簽語(yǔ)法：P align=“val段落標(biāo)記段落標(biāo)記運(yùn)行結(jié)果學(xué)習(xí)HTML這會(huì)是一種很有趣的體驗(yàn)另一個(gè)段落元素 段落標(biāo)記段落標(biāo)記運(yùn)行結(jié)果使用對(duì)齊屬性學(xué)習(xí)HTML這會(huì)是一種很有趣的體驗(yàn) 運(yùn)行結(jié)果右對(duì)齊Left：左對(duì)齊Center：居中Right：右對(duì)齊3_3.html使用對(duì)齊屬性運(yùn)行結(jié)果右對(duì)齊Left：左對(duì)齊3_3 換行標(biāo)記 用于在文檔中強(qiáng)制換行，是屬于非成對(duì)標(biāo)記，也就是它只有一個(gè)單獨(dú)的標(biāo)記符，沒(méi)有結(jié)束符。 換行標(biāo)記 用于在文檔中強(qiáng)制換行，是屬于非換行標(biāo)記歡迎使用 HTML這會(huì)是一種很有趣的體驗(yàn) 另

7、一個(gè)段落元素 運(yùn)行結(jié)果3_2.html換行標(biāo)記運(yùn)行結(jié)果3_2.html特殊符號(hào)句柄 在網(wǎng)頁(yè)中要顯示特殊符號(hào)，需要使用句柄并且在句柄的前面必須加上&作開(kāi)頭，其寫法如下表： 特殊符號(hào)句柄 在網(wǎng)頁(yè)中要顯示特殊符號(hào)，需要使用句柄并且顏色顏色名和RGB值黑色Black=”#000000”銀色Silver=”#c0c0c0”紅色Red=”#ff0000”藍(lán)色Blue=”#0000ff”白色White=”#ffffff”黃色Yellow=”ffff00”綠色Green=”#00ff00”海藍(lán)色Aqua=”#00ffff”常見(jiàn)顏色的代碼見(jiàn)附錄顏色顏色名和RGB值黑色Black=”#000000”銀色S插入水平

8、線 格式：其中： align 用來(lái)控制分隔線的對(duì)齊方式，其屬性值有： center、left、 right。 SIZE 用于指定分隔線的厚度。 Color 用來(lái)指定分隔線的顏色。 Width 用來(lái)指定分隔線的寬度。 NOSHADE 指定分隔線是不透明的；插入水平線 格式：HR align =value1水平線歡迎使用HTML我的第一個(gè)HTML文檔這將會(huì)是一種很有趣的體驗(yàn) 水平標(biāo)尺標(biāo)記用于在頁(yè)面上繪制一條水平線?？山柚谙铝袑傩钥刂扑骄€。它只有開(kāi)始標(biāo)記，沒(méi)有結(jié)束標(biāo)記，且不包含任何內(nèi)容。 水平線水平標(biāo)尺標(biāo)記用于在頁(yè)面上繪 標(biāo)記 標(biāo)記 它能讓文字的編排，比如：空格、換行都能按照自己的設(shè)定顯示，也就

9、是說(shuō)屏幕上顯示的文字排列和在編輯HTML文件的版面一模一樣。書(shū)寫時(shí)要記得是成對(duì)出現(xiàn)的。 標(biāo)記 標(biāo)記 它能讓文字的上面“露天電影”網(wǎng)頁(yè)修改代碼以后的頁(yè)面效果修改后的代碼見(jiàn)下頁(yè)上面“露天電影”網(wǎng)頁(yè)修改代碼以后的頁(yè)面效果修改后的代碼見(jiàn)下頁(yè)html網(wǎng)頁(yè)標(biāo)簽基礎(chǔ)知識(shí)標(biāo)題標(biāo)簽 HTML可以使用設(shè)置章節(jié)標(biāo)題的標(biāo)注：，n=1，26，n表示主體區(qū)顯示的正文章節(jié)標(biāo)題的級(jí)別。它就像我們平時(shí)閱讀的小說(shuō)章節(jié)一樣，將不同級(jí)別的標(biāo)題設(shè)置為不同的字體。HTML提供六級(jí)標(biāo)題：一級(jí)：二級(jí)：三級(jí)：四級(jí)：五級(jí)：六級(jí)：說(shuō)明：最大、最小此標(biāo)記后面可加入align屬性來(lái)控制文字的對(duì)齊方式標(biāo)題標(biāo)簽 HTML可以使用設(shè)置章節(jié)標(biāo)舉例：使用H標(biāo)簽

10、編寫下列網(wǎng)頁(yè)字號(hào)設(shè)置技巧第二章 用HTML制作文本頁(yè)面2.1 控制字的字號(hào)顏色2.1.1 字號(hào)設(shè)置技巧1. 設(shè)置頁(yè)面正文章節(jié)的標(biāo)題HTML中設(shè)置字號(hào)的標(biāo)注有多種，我們可以使用設(shè)置章節(jié)標(biāo)題的標(biāo)注： 舉例：使用H標(biāo)簽編寫下列網(wǎng)頁(yè)1. 設(shè)置頁(yè)面正文的字體與字號(hào) 格式：，字號(hào)n=1，27 SIZE用“+n”，“-n”設(shè)置成一個(gè)相對(duì)值。所有的字體大小都是相對(duì)于一個(gè)缺省大小值。如：SIZE=+2，表示比缺省字體大2個(gè)單位，而SIZE=-2表示比缺省字體小2個(gè)單位。其中：SIZE的缺省值是3。 設(shè)置文本的字體、字體尺寸、字體顏色。1. 設(shè)置頁(yè)面正文的字體與字號(hào) 格式：FONT FAC2. 字符顏色的設(shè)置格式

11、：其中： RR、GG、BB為兩位16進(jìn)制數(shù)，設(shè)置顏色值的范圍是 1，2，255； 指定顏色的另一種方法是使用HTML中定義的顏色常量，即使用下表預(yù)設(shè)的常用顏色名稱（color=”green”）如下頁(yè)表所示。2. 字符顏色的設(shè)置格式：FONT COLOR=”#常用顏色名稱常用顏色名稱3. 設(shè)置字體風(fēng)格3. 設(shè)置字體風(fēng)格HTML段落與分行控制居中- 元素元素是一個(gè)獨(dú)立的使所標(biāo)記的字符居中的元素。它的作用與使用元素里的align=“center”類似例如：居中段落HTML段落與分行控制插入圖片 標(biāo)記語(yǔ)法：功能：在當(dāng)前網(wǎng)頁(yè)的位置顯示一張圖片下面對(duì)其中的幾個(gè)屬性說(shuō)明如下： SRC 指定要嵌入的圖片的文件

12、名； ALT 在圖形下載顯示前或使用無(wú)法顯示圖形的瀏覽器，在該圖形位置上就會(huì)出現(xiàn) ALT 后面的文字； ALIGN 指定圖形的位置，圖形可以出現(xiàn)在文字的左（LEFT）、右（RIGHT）、 上端（TOP）、下端（BOTTOM）、和中間（MIDDLE）； HEIGHT和WIDTH 指定圖形的高和寬。 VSPACE 設(shè)定文字、圖片與圖片上下之間的間隔。 HSPACE 設(shè)定文字、圖片與圖片往右之間的間隔。Border 設(shè)定圖片的邊框大小，突出圖片顯示。IMG屬于非成對(duì)標(biāo)記插入圖片 標(biāo)記語(yǔ)法：IMG SRC=“文件名”插入圖片以后的網(wǎng)頁(yè)效果插入圖片以后的網(wǎng)頁(yè)效果要使文本圍繞圖像環(huán)繞，應(yīng)將語(yǔ)句改為：例：插

13、圖要使文本圍繞圖像環(huán)繞，應(yīng)將語(yǔ)句改為：IMG SRC=“.創(chuàng)建超鏈接標(biāo)記用于作超鏈接的文本或圖像等文字或圖片設(shè)置電子郵件。備注：name是用來(lái)創(chuàng)建錨文本的。例如：同一個(gè)網(wǎng)頁(yè)開(kāi)始內(nèi)容返回開(kāi)始內(nèi)容不同的網(wǎng)頁(yè)A 目標(biāo)處 創(chuàng)建超鏈接標(biāo)記用于作超鏈接的文本或圖像等書(shū)信格式格式：說(shuō)明：以書(shū)信內(nèi)容的方式顯示文字。在距頁(yè)面的左右兩邊分別留出一段頁(yè)邊距。書(shū)信格式格式：BLOCKQUOTEhtml網(wǎng)頁(yè)標(biāo)簽基礎(chǔ)知識(shí)表格(TABLE)標(biāo)記 元素：定義一個(gè)表格。每一個(gè)表格只有一對(duì)和，一張頁(yè)面中可以有多個(gè)表格。元素：定義表格的行，一個(gè)表格可以有多行，所以對(duì)于一個(gè)表格來(lái)說(shuō)不是唯一的。元素：定義表格的一個(gè)單元格。每行可以有不

14、同數(shù)量的單元格，在和之間是單元格的具體內(nèi)容。需要注意的是：上述的三個(gè)元素必須、而且只能夠配對(duì)使用。缺少任何一個(gè)元素，都無(wú)法定義出一個(gè)表格。表格(TABLE)標(biāo)記 元素：定義一個(gè)表格。每表格(TABLE)標(biāo)記表格的基本結(jié)構(gòu) 定義表頭 定義表頭定義單元格定義單元格表格(TABLE)標(biāo)記表格的基本結(jié)構(gòu)表格(TABLE)標(biāo)記-1表格的屬性 1width屬性：指定表格或某一個(gè)表格單元格的寬度。單位可以是%或者象素。height屬性：指定表格或某一個(gè)表格單元格的高度。單位可以是%或者象素。border屬性：表格邊線粗細(xì)表格(TABLE)標(biāo)記-1表格的屬性 1表格(TABLE)標(biāo)記-2表格的屬性 2bgco

15、lor屬性：指定表格或某一個(gè)單元格的背景顏色。background屬性：指定表格或某一個(gè)單元格的背景圖片。其屬性值為一個(gè)URL地址。align屬性：指定表格或某一個(gè)單元格里的內(nèi)容（文本、圖片等）的對(duì)齊方式。Top middle bottom 屬性：讓表格中的內(nèi)容都水平垂直居中。屬性：合并表格行里面的單元格屬性：合并表格列里面的單元格注：數(shù)值等于多少就相當(dāng)于合并多少個(gè)單元格表格(TABLE)標(biāo)記-2表格的屬性 2練習(xí)用表格做一個(gè)職工信息表：要求如圖練習(xí)用表格做一個(gè)職工信息表：要求如圖1無(wú)順序列表（UnorderList）格式：第一項(xiàng)第二項(xiàng)第三項(xiàng)第四章 無(wú)序列表和順序列表例1：在記事本中輸入下列代

16、碼：目前世界上最主要的三大宗教是：基督教伊斯蘭教佛教在瀏覽器中的顯示結(jié)果為：1無(wú)順序列表（UnorderList）第四章 無(wú)序列表2順序列表（OrderList）格式：第一項(xiàng)第二項(xiàng)第三項(xiàng)在瀏覽器中的顯示結(jié)果為：例2：輸入如下代碼：吃罐裝橘子：去超級(jí)市場(chǎng)買一些橘子罐頭打開(kāi)罐頭吃罐頭里的橘子2順序列表（OrderList）在瀏覽器中的顯示結(jié)果為：例可加上TYPE= # 來(lái)定義每一項(xiàng)前面的符號(hào)或序號(hào)。 對(duì)于無(wú)序列表，定制符號(hào)的標(biāo)記為： 其中“#” 代表： DISC（實(shí)心圓） CIRCLE（空心圓） SQUARE（方塊） 缺省時(shí)為實(shí)心圓。 對(duì)于順序列表，定制符號(hào)的標(biāo)記為： TYPE屬性用來(lái)選擇以英文字母或是羅馬數(shù)字作為項(xiàng)目的編號(hào)； START=n 指定從哪一個(gè)字母或數(shù)字開(kāi)始；其中：A表示按A、B、C、D、編號(hào)；a表示按a、b、c、d、編號(hào)；I表示按I、編號(hào)；1表示按數(shù)字編號(hào)，這是缺省屬性設(shè)置。3. 定制列表元素可加上TYPE= # 來(lái)定義每一項(xiàng)前面的符號(hào)或序號(hào)。3. 定舉例：制作如下頁(yè)面。文件名為test.htm。對(duì)應(yīng)的HTML文檔見(jiàn)下頁(yè)舉例：制作如下頁(yè)面。文件名為test.htm。對(duì)應(yīng)的HTMLhtml網(wǎng)頁(yè)標(biāo)簽基礎(chǔ)知識(shí)若將上例頁(yè)面修改為如下頁(yè)面