紅軟PPT下載網(wǎng)

html教學(xué)ppt下載

素材大�。�: 221.5 KB

素材授權(quán)：: 免費(fèi)下載

素材格式：: .ppt

素材上傳：: lipeier

上傳時(shí)間：: 2019-05-14

素材編號(hào)：: 230913

素材類(lèi)別：: 課件PPT

素材預(yù)覽

這是html教學(xué)ppt，包括了知識(shí)要點(diǎn)，什么是 HTML？HTML文檔的結(jié)構(gòu)，設(shè)置文本格式，使用圖像，使用字幕和背景音樂(lè)，使用超鏈接，使用表單，課堂作業(yè)等內(nèi)容，歡迎點(diǎn)擊下載。

html教學(xué)ppt是由紅軟PPT免費(fèi)下載網(wǎng)推薦的一款課件PPT類(lèi)型的PowerPoint.

知識(shí)要點(diǎn)：基本的HTML語(yǔ)法結(jié)構(gòu) 常用的HTML 標(biāo)記的使用 HTML 文檔 = 網(wǎng)頁(yè) HTML 文檔描述網(wǎng)頁(yè) HTML 文檔包含 HTML 標(biāo)簽和純文本 HTML 文檔也被稱(chēng)為網(wǎng)頁(yè) Web 瀏覽器的作用是讀取 HTML 文檔，并以網(wǎng)頁(yè)的形式顯示出它們。瀏覽器不會(huì)顯示 HTML 標(biāo)簽，而是使用標(biāo)簽來(lái)解釋頁(yè)面的內(nèi)容 1.什么是 HTML？ HTML 是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。 HTML 指的是超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language) HTML 不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言 (markup language) 標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽 (markup tag) HTML 使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè) HTML 標(biāo)簽 HTML 標(biāo)記標(biāo)簽通常被稱(chēng)為 HTML 標(biāo)簽 (HTML tag)。 HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，比如 HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的，比如和標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開(kāi)始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽開(kāi)始和結(jié)束標(biāo)簽也被稱(chēng)為開(kāi)放標(biāo)簽和閉合標(biāo)簽 2. HTML文檔的結(jié)構(gòu) 2.1.1 標(biāo)記基礎(chǔ) 1. 基本的HTML語(yǔ)法 (1) 在HTML語(yǔ)言中，所有的標(biāo)記都必須用尖括號(hào)（即小于號(hào)“<”和大于號(hào)“>”）括起來(lái)。例如，、、等。 (2) 大部分標(biāo)記都是成對(duì)出現(xiàn)的，包括開(kāi)始標(biāo)記和結(jié)束標(biāo)記，開(kāi)始標(biāo)記和相應(yīng)的結(jié)束標(biāo)記定義了標(biāo)記所影響的范圍；結(jié)束標(biāo)記與開(kāi)始標(biāo)記名稱(chēng)相同，但結(jié)束標(biāo)記總是以一個(gè)斜線符號(hào)開(kāi)頭的。例如，和、和等。 (3) HTML標(biāo)記不區(qū)分大小寫(xiě)，但通常約定使用大寫(xiě)字母來(lái)表示，以利于HTML文檔的維護(hù)。 2. 標(biāo)記符的屬性大多數(shù)標(biāo)記都擁有一個(gè)屬性集，通過(guò)這些屬性可以對(duì)作用的內(nèi)容進(jìn)行更多的控制。在HTML語(yǔ)言中，所有屬性都放置在開(kāi)始標(biāo)記的尖括號(hào)內(nèi)。心想事成。 2.1.2 HTML文檔的基本結(jié)構(gòu) 一個(gè)基本的HTML文檔通常包含3對(duì)頂級(jí)標(biāo)記 HTML標(biāo)記 …是全部文檔內(nèi)容的標(biāo)記，分別在網(wǎng)頁(yè)的第一個(gè)標(biāo)記和最后一個(gè)標(biāo)記，其他所有的代碼都位于這兩個(gè)標(biāo)記之間�？蛇x的。首部標(biāo)記 … 用語(yǔ)提供與WEB頁(yè)相關(guān)的各種信息。標(biāo)記指定網(wǎng)頁(yè)的標(biāo)題正文標(biāo)記 .. 標(biāo)記包含了文檔的內(nèi)容，網(wǎng)頁(yè)中的文字、圖像、動(dòng)畫(huà)、超鏈接以及其他的HTML元素均位于該標(biāo)記中。文本、圖像、動(dòng)畫(huà)、HTML其它元素等實(shí)例2.1利用HTML標(biāo)記、首部標(biāo)記和正文標(biāo)記，在記事本（或在DeamweaverMX2004的代碼編寫(xiě)窗口）中編寫(xiě)一個(gè)簡(jiǎn)單的HTML文檔，將文件名指定為2-01.htm，并保存在CH1目錄下。圖2-2 第一個(gè)網(wǎng)頁(yè)的效果 ------2-01.htm------ 萬(wàn)丈高樓平地起，制作網(wǎng)頁(yè)剛開(kāi)始。 2.2 設(shè)置文本格式 2.2.1 分段與換行分段標(biāo)記X2l紅軟基地

換行標(biāo)記X2l紅軟基地
實(shí)例2.2 顯示分段標(biāo)記和換行標(biāo)記的用法以及它們的區(qū)別，源代碼如下：圖2-3 分段標(biāo)記的效果 ------ 2-02.htm ------ X2l紅軟基地

高樓萬(wàn)丈平地起，X2l紅軟基地

蟠龍臥虎高山頂，X2l紅軟基地

邊區(qū)的太陽(yáng)紅又紅，X2l紅軟基地
邊區(qū)的太陽(yáng)紅又紅。 3. 標(biāo)題標(biāo)記其中n的取值是1－6 實(shí)例2.3 演示各種標(biāo)題標(biāo)記的使用方法，源代碼如下：圖2-4 各種標(biāo)題標(biāo)記效果 ------ 2-03.htm ------

這是一級(jí)標(biāo)題（最大）

這是二級(jí)標(biāo)題

這是三級(jí)標(biāo)題

這是四級(jí)標(biāo)題

這是五級(jí)標(biāo)題

這是六級(jí)標(biāo)題（最�。�

這是普通文字。X2l紅軟基地

4. 水平線標(biāo)記

標(biāo)記用于在文檔中添加一條水平線，以分開(kāi)文檔的兩個(gè)部分。該標(biāo)記有以下屬性： (1) ALIGN：指定線的對(duì)齊方式，取值為left（左對(duì)齊）、center（居中對(duì)齊）或right（右對(duì)齊），默認(rèn)值為center。 (2) COLOR：指定線的顏色。 (3) NOSHADE：若指定該項(xiàng)，則顯示一條無(wú)陰影的實(shí)線。 (4) SIZE：指定線的寬度，以像素為單位。 (5) WIDTH：指定線的長(zhǎng)度，單位可以是像素或百分比（占頁(yè)面寬度的百分比）。圖2-5 插入水平線效果實(shí)例2.4 在網(wǎng)頁(yè)中通過(guò)

標(biāo)記的各種屬性來(lái)控制水平線的顯示效果，源代碼如下所示： ------ 2-04.htm ------ 以下是默認(rèn)的水平線：

以下是SIZE為6、WIDTH為300像素的水平線：

以下是SIZE為1、WIDTH為頁(yè)面寬度80%的實(shí)線水平線：

以下是WIDTH = 90%的紅色水平線：

2.2.2 設(shè)置段落對(duì)齊方式在網(wǎng)頁(yè)中有四種段落對(duì)齊方式：左對(duì)齊、右對(duì)齊、居中對(duì)齊和兩端對(duì)齊。在HTML語(yǔ)言中，可以使用ALIGN屬性來(lái)設(shè)置段落的對(duì)齊方式。 ALIGN屬性可以應(yīng)用于多種標(biāo)記，例如：分段標(biāo)記

…X2l紅軟基地

、標(biāo)題標(biāo)記…以及水平線標(biāo)記

等。 ALIGN屬性的取值可以是：left（左對(duì)齊）、center（居中對(duì)齊）、right（右對(duì)齊）以及justify（兩邊對(duì)齊）。兩邊對(duì)齊是指將一行中的文本在排滿(mǎn)的情況下向左右兩頁(yè)邊對(duì)齊，以避免在左、右兩邊處出現(xiàn)鋸齒狀。實(shí)例2.5 使用ALIGN屬性來(lái)控制段落的對(duì)齊方式，源代碼如下所示： ------ 2-05.htm ------

這是左對(duì)齊的效果。X2l紅軟基地

這是居中對(duì)齊的效果。X2l紅軟基地

這是右對(duì)齊的效果。X2l紅軟基地

春夜喜雨

圖2-6 段落對(duì)齊效果

春眠不覺(jué)曉，處處聞啼鳥(niǎo)。X2l紅軟基地

夜來(lái)風(fēng)雨聲，花落知多少。X2l紅軟基地

2.2.3 設(shè)置字體、字號(hào)和顏色在HTML語(yǔ)言中，可以使用字體標(biāo)記…來(lái)設(shè)置文本的字符格式，為此可以將文本置于和標(biāo)記之間，并通過(guò)FACE、SIZE和COLOR屬性來(lái)設(shè)置文本的字體、字號(hào)和顏色。FACE屬性指定一種字體，例如：超文本標(biāo)記語(yǔ)言 ASP動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì) COLOR屬性指定文本的顏色，可以用顏色名稱(chēng)表示，也可以用十六進(jìn)制RGB格式表示。例如：超文本標(biāo)記語(yǔ)言電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì) 2.2.4 設(shè)置字符樣式通過(guò)設(shè)置字符樣式可以為某些字符設(shè)置特殊格式，例如粗體、斜體、下劃線、刪除線、上標(biāo)、下標(biāo)等。常用的設(shè)置字符樣式的標(biāo)記如下： … 粗體 … 大字體 … 斜體 … 刪除線 … 小字體 … 刪除線 ^… 上標(biāo) _… 下標(biāo) … 固定寬度字體 … 下劃線實(shí)例2.7 使用各種標(biāo)記來(lái)設(shè)置字符的樣式，源代碼如下所示： -- 2-07.htm ------

粗體字：電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)X2l紅軟基地

大字體：電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)X2l紅軟基地

斜體字：電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)X2l紅軟基地

上標(biāo)示例： a²+b²=c²X2l紅軟基地

下標(biāo)示例：H₂SO₄X2l紅軟基地

2.3 使用圖像 2.3.1插入圖像標(biāo)記 1. 標(biāo)記格式:

其中: 圖片可以是*.gif；*.jpg格式的圖片，地址可以是相對(duì)地址或絕對(duì)的地址。主要屬性有： Alt：用于設(shè)置鼠標(biāo)移上去顯示的文本信息。 Hight和Width：用于設(shè)置圖片的高度或?qū)挾�。如width=200。 Borter：用于設(shè)置圖象邊框的寬度。如Borter=4。 Hspace和Vspace：用于設(shè)置圖片與文本之間的距離。 Align：用于設(shè)置圖文混排時(shí)的對(duì)齊方式。如align=“right”。 2. 實(shí)例2.8 使用IMG標(biāo)記在網(wǎng)頁(yè)中插入一個(gè)圖像，源代碼如下所示：圖 2-9 插入圖像效果 ------ 2-8.htm ------ 美麗的海濱城市---青島

2.3.2 播放多媒體文件標(biāo)記不僅用于在網(wǎng)頁(yè)中插入圖像，也可以用于播放Video for Windows的多媒體文件（*.avi）。若要在網(wǎng)頁(yè)中播放多媒體文件，應(yīng)在標(biāo)記中設(shè)置以下屬性： (1) CONTROLS：顯示一套視頻控件。 (2) DYNSRC：指定要播放的多媒體文件的URL。 (3) START：指定何時(shí)開(kāi)始播放多媒體文件，其取值可以是fileopen或mouseover。 (4) LOOP：整數(shù)，指定多媒體文件的播放次數(shù)。如果不限播放次數(shù)，則應(yīng)將該屬性設(shè)置為關(guān)鍵字infinite。 (6) LOOPDELAY：整數(shù)，指定兩次播放之間的延遲，以毫秒為單位。實(shí)例2.10 在網(wǎng)頁(yè)中播放多媒體文件，源代碼如下所示： ------ 2-10.htm ------

播放多媒體文件

2.4 使用字幕和背景音樂(lè) 2.4.1滾動(dòng)字幕標(biāo)記標(biāo)記格式：要滾動(dòng)顯示的文本信息 MARQUEE標(biāo)記的主要屬性有： (1) ALIGN：指定字幕與周?chē)谋镜膶?duì)齊方式，其取值可以是top、middle或bottom。 (2) BEHAVIOR：指定文本動(dòng)畫(huà)的類(lèi)型，其取值可以是scroll、slide或alternate。 (3) BGCOLOR：指定字幕的背景顏色。 (4) DIRECTION：指定文本的移動(dòng)方向，其取值可以是down、left、right或up。 (5) HEIGHT：指定字幕的高度，以像素或百分比為單位。 (6) HSPACE：整數(shù)，指定字幕的外部邊緣與瀏覽器窗口之間的左右邊距（像素）。 (7) LOOP：指定字幕的滾動(dòng)次數(shù)。 (8) SCROLLAMOUNT：整數(shù)，指定字幕文本每次移動(dòng)的距離，以像素為單位。 (9) SCROLLDEALY：整數(shù)，指定與前段字幕文本延遲多少ms后重新開(kāi)始移動(dòng)文本。 2. 實(shí)例2.11 在網(wǎng)頁(yè)中插入一個(gè)字幕，源代碼如下所示：圖2-11 滾動(dòng)字幕效果

在網(wǎng)頁(yè)中插入一個(gè)自下而上移動(dòng)的字幕

月落烏啼霜滿(mǎn)天，X2l紅軟基地
江楓漁火對(duì)愁眠。X2l紅軟基地
姑蘇城外寒山寺，X2l紅軟基地
夜半鐘聲到客船。 2.4.2背景音樂(lè)標(biāo)記 1. 標(biāo)記格式： …… 實(shí)例2.12 在網(wǎng)頁(yè)中插入背景音樂(lè)。源代碼如下所示： ------ 2-12.htm ------

當(dāng)頁(yè)面被打開(kāi)時(shí)，你將會(huì)聽(tīng)到美妙的背景音樂(lè)。X2l紅軟基地

2.5 使用表格 1. 格式： ……… …… …

表格標(biāo)題文字
標(biāo)題1	標(biāo)題2	標(biāo)題n
數(shù)據(jù)11	數(shù)據(jù)12	數(shù)據(jù)1n
數(shù)據(jù)21	數(shù)據(jù)22	數(shù)據(jù)2n
數(shù)據(jù)n1	數(shù)據(jù)n2	數(shù)據(jù)nn

實(shí)例2.13 使用HTML語(yǔ)言創(chuàng)建一個(gè)基本表格，源代碼如下所示：

創(chuàng)建基本表格
第1列標(biāo)題	第2列標(biāo)題	第3列標(biāo)題	第4列標(biāo)題
春游芳草地	夏賞綠河池	秋飲黃花酒	冬聽(tīng)白雪詩(shī)/TD>
春游芳草地	夏賞綠河池	秋飲黃花酒	冬聽(tīng)白雪詩(shī)
春游芳草地	夏賞綠河池	秋飲黃花酒	冬聽(tīng)白雪詩(shī)

2.6 使用超鏈接 2.6.1 什么是超鏈接超鏈接是由源端點(diǎn)到目標(biāo)端點(diǎn)的一種跳轉(zhuǎn)。源端點(diǎn)可以是網(wǎng)頁(yè)中的一段文本或一幅圖像或一個(gè)按鈕等。目標(biāo)端點(diǎn)可以是任意類(lèi)型的網(wǎng)絡(luò)資源，例如可以是一個(gè)網(wǎng)頁(yè)、一幅圖像、一首歌曲、一段動(dòng)畫(huà)或一個(gè)程序等。 2.6.2 超鏈接標(biāo)記在HTML語(yǔ)言中，可以使用標(biāo)記來(lái)創(chuàng)建超鏈接，標(biāo)記格式如下：文本標(biāo)記的屬性有： (1) HREF：該屬性是必選項(xiàng)，用于指定目標(biāo)端點(diǎn)的URL地址，可以包含一個(gè)或多個(gè)參數(shù)。 (2) TITLE：該屬性也是可選項(xiàng)，用于指定指向超鏈接時(shí)所顯示的標(biāo)題文字。 (3) TARGET：該屬性是可選項(xiàng)，用于指定一個(gè)窗口或框架的名稱(chēng)，目標(biāo)文檔將在該窗口或框架中打開(kāi)。TARGET屬性的取值： “_blank” 指定將鏈接的目標(biāo)文件加載到未命名的新瀏覽器窗口中； “_parent” 指定將鏈接的目標(biāo)文件加載到包含鏈接的父框架頁(yè)或窗口中，如果包含鏈接的框架不是嵌套的，則鏈接的目標(biāo)文件加載到整個(gè)瀏覽器窗口中； “_self” 指定將鏈接的目標(biāo)文件加載到鏈接所在的同一框架或窗口中； “_top” 指定將鏈接的目標(biāo)文件加載到整個(gè)瀏覽器窗口中，并由此刪除所有框架。實(shí)例2.15 使用標(biāo)記創(chuàng)建超鏈接，源代碼如下所示： ------ 2-15.htm ------ 創(chuàng)建超鏈接示例
圖2-14 創(chuàng)建超鏈接效果

查看圖文繞排效果X2l紅軟基地

美麗的海邊風(fēng)光X2l紅軟基地

X2l紅軟基地

2.7 使用表單什么是表單？表單是用來(lái)收集訪問(wèn)者信息的域集。表單用于用戶(hù)收集信息，然后將這些信息提交給服務(wù)器進(jìn)行處理。表單可以包含允許用戶(hù)進(jìn)行交互的各種控件，例如文本框、列表框、復(fù)選框和單選按鈕等。 FORM標(biāo)記的常用屬性有： (1) NAME：指定表單的名稱(chēng)，以標(biāo)識(shí)表單。如：NAME = “biao1" 。命名表單后，可以使用腳本語(yǔ)言（如VBScript或JScript）來(lái)引用或控制該表單。 (2) METHOD：指定將表單數(shù)據(jù)傳輸?shù)椒⻊?wù)器的方法，其取值可以是： post：在HTTP請(qǐng)求中嵌入表單數(shù)據(jù)。 get：將表單數(shù)據(jù)附加到請(qǐng)求該頁(yè)的URL中。如：METHOD = "post“ （或者 methot=“get”） (3) ACTION：指定將要接收表單數(shù)據(jù)的服務(wù)器端程序或動(dòng)態(tài)網(wǎng)頁(yè)的網(wǎng)址。如：ACTION = "字符串" (4) onSubmit：指定提交表單時(shí)調(diào)用的事件處理程序。 (5) onReset：指定重置表單時(shí)調(diào)用的事件處理程序。 (6) TARGET：指定一個(gè)目標(biāo)窗口 2.7.2 使用輸入型表單控件為了讓用戶(hù)通過(guò)表單輸入數(shù)據(jù)，可以使用標(biāo)記創(chuàng)建各種輸入型表單控件。通過(guò)將標(biāo)記的TYPE屬性設(shè)置為不同的值，可以創(chuàng)建不同類(lèi)型的輸入型表單控件，包括單行文本框、密碼框、復(fù)選框、單選按鈕、文件域以及按鈕等。 1. 在表單中添加單行文本框在之間添加一個(gè)標(biāo)記，并將其TYPE屬性指定為“text”。其標(biāo)記格式為： 2. 在表單中添加密碼域在之間添加一個(gè)標(biāo)記，并將其TYPE屬性指定為“password”。 3. 在表單中添加按鈕使用標(biāo)記可以在表單中添加三種類(lèi)型的按鈕：即提交按鈕、重置按鈕和自定義按鈕。其標(biāo)記格式為：對(duì)該標(biāo)記的屬性說(shuō)明如下： (1) TYPE：指定按鈕的類(lèi)型，取值可以是： submit：創(chuàng)建一個(gè)提交按鈕。 reset：創(chuàng)建一個(gè)重置按鈕。 button：創(chuàng)建一個(gè)自定義按鈕。 (2) NAME：指定按鈕的名稱(chēng)。 (3) VALUE：指定顯示在按鈕上的標(biāo)題文本。實(shí)例2.16 創(chuàng)建一個(gè)登錄表單，其中包含有文本框、密碼框、提交按鈕和重置按鈕，源代碼如下所示：圖2-15 登錄表單效果

登錄表單
用戶(hù)名：
密碼：

課堂作業(yè) 編寫(xiě)一個(gè)網(wǎng)頁(yè)，在網(wǎng)頁(yè)中設(shè)置如下的標(biāo)記并實(shí)現(xiàn)相應(yīng)的效果。使用標(biāo)記包含了文檔的內(nèi)容，網(wǎng)頁(yè)中的文字、圖像、動(dòng)畫(huà)、超鏈接以及其他的HTML元素均位于該標(biāo)記中。文本、圖像、動(dòng)畫(huà)、HTML其它元素等實(shí)例2.1利用HTML標(biāo)記、首部標(biāo)記和正文標(biāo)記，在記事本（或在DeamweaverMX2004的代碼編寫(xiě)窗口）中編寫(xiě)一個(gè)簡(jiǎn)單的HTML文檔，將文件名指定為2-01.htm，并保存在CH1目錄下。圖2-2 第一個(gè)網(wǎng)頁(yè)的效果 ------2-01.htm------ 萬(wàn)丈高樓平地起，制作網(wǎng)頁(yè)剛開(kāi)始。 2.2 設(shè)置文本格式 2.2.1 分段與換行分段標(biāo)記

換行標(biāo)記X2l紅軟基地
實(shí)例2.2 顯示分段標(biāo)記和換行標(biāo)記的用法以及它們的區(qū)別，源代碼如下：圖2-3 分段標(biāo)記的效果 ------ 2-02.htm ------ X2l紅軟基地

高樓萬(wàn)丈平地起，X2l紅軟基地

蟠龍臥虎高山頂，X2l紅軟基地

邊區(qū)的太陽(yáng)紅又紅，
邊區(qū)的太陽(yáng)紅又紅。 3. 標(biāo)題標(biāo)記其中n的取值是1－6 實(shí)例2.3 演示各種標(biāo)題標(biāo)記的使用方法，源代碼如下：圖2-4 各種標(biāo)題標(biāo)記效果 ------ 2-03.htm ------

這是一級(jí)標(biāo)題（最大）