HTML文檔的基本結(jié)構(gòu)課件

1、HTML文檔的基本結(jié)構(gòu)HTML文檔的基本結(jié)構(gòu)文字和段落超級鏈接標(biāo)志圖像、背景與顏色標(biāo)志表格標(biāo)志動態(tài)HTMLHTML文檔的基本結(jié)構(gòu)超文本標(biāo)記語言HTML是生成WWW網(wǎng)頁文件的語言，用以生成超文本文檔。在文檔中，可以加入任何元素（文本、圖像、動畫和聲音等）的鏈接使用瀏覽器瀏覽的網(wǎng)頁就是HTML文檔通常是使用記事本作為HTML文檔的編輯器，利用瀏覽器瀏覽文檔效果HTML文檔的基本結(jié)構(gòu)HTML只是標(biāo)記語言，基本上只要明白了各種標(biāo)記的用法，就學(xué)懂了HTML標(biāo)記的寫法：標(biāo)記由： 括號包圍的元素組成，如標(biāo)記的表示：起始標(biāo)記，結(jié)束標(biāo)記標(biāo)記中加屬性和參數(shù)參數(shù)只能加在起始標(biāo)記中Hello標(biāo)記字母大小寫無關(guān)HTML

2、文檔的基本結(jié)構(gòu)大多數(shù)標(biāo)志都是成對出現(xiàn)的，起始標(biāo)志（如）和結(jié)束標(biāo)記（如）在起始標(biāo)記和結(jié)束標(biāo)記之間，放入網(wǎng)頁元素 如：文本、圖片、超級鏈接等 welcome to you 所有的HTML文檔內(nèi)容都是由起始標(biāo)記和結(jié)束標(biāo)記包圍起來的 HTML文檔的基本結(jié)構(gòu)文檔標(biāo)題 文檔的正文內(nèi)容網(wǎng)頁文件格式：網(wǎng)頁文件格式： 表示是表示是HTML文檔文檔文檔頭，可加入：文檔頭，可加入：網(wǎng)頁標(biāo)題網(wǎng)頁標(biāo)題、作作者信息、版本信息者信息、版本信息正文區(qū)，放置網(wǎng)頁中所顯示信正文區(qū)，放置網(wǎng)頁中所顯示信息的標(biāo)志和屬性息的標(biāo)志和屬性網(wǎng)頁標(biāo)題：網(wǎng)頁標(biāo)題：加在加在中中注釋：注釋： 加在加在中中兩個減號，注釋中加入作兩個減號，注釋中加入作者

3、信息或版本信息，瀏覽者信息或版本信息，瀏覽時不顯示出來時不顯示出來HTML文檔的基本結(jié)構(gòu)李小龍的主頁 歡迎訪問我的主頁! HTML文檔的基本結(jié)構(gòu)打開“記事本”編輯器，輸入要編輯的HTML語言代碼輸入完畢后，保存HTML文檔菜單文件保存/另存為“保存類型”選擇“所有文件”在“文件名”框中輸入：myhtml.htm，注意：擴(kuò)展名(.htm)一定不能省略用IE打開網(wǎng)頁文件：myhtml.htm打開HTML文檔記事本中選擇“所有文件”類型，打開文件瀏覽器中選擇菜單查看源文件HTML文檔的基本結(jié)構(gòu)標(biāo)記中放置要在瀏覽器中所顯示信息的所有標(biāo)記和屬性 標(biāo)記中間可以放置：文字、段落、圖像、表格、超級鏈接、框架等

4、在標(biāo)記中設(shè)置屬性，主要是對標(biāo)記進(jìn)行補(bǔ)充說明HTML文檔的基本結(jié)構(gòu)標(biāo)題能分隔大段文字，使得網(wǎng)頁顯示的內(nèi)容結(jié)構(gòu)清晰。共有六級標(biāo)題：H1H6，從大到小。 , , 對齊方式：設(shè)置標(biāo)題的對齊屬性。三個屬性：ALIGN=Left、ALIGN=Center、ALIGN=right 實例：實例：歡迎訪問我的主頁歡迎訪問我的主頁 Welcome to everybody!HTML文檔的基本結(jié)構(gòu)文字段落標(biāo)記： 換行標(biāo)記： 不成對出現(xiàn)，不用結(jié)束標(biāo)記在指定位置分行，但不另起段落實例：實例：Despite the fact:在指定位置分行，但在指定位置分行，但不另起段落不另起段落這是一個小小的段落這是一個小小的段落這是

5、另一個小段落這是另一個小段落HTML文檔的基本結(jié)構(gòu)水平分隔線標(biāo)記屬性：size、color、width、align不用結(jié)束標(biāo)記實例：實例： HTML文檔的基本結(jié)構(gòu)顏色：由紅R、綠G、藍(lán)B三原色組成，每一色由兩位十六進(jìn)制數(shù)表示(簡稱RGB數(shù))。如下表 REDGREENBLUE000000333333666666999999CCCCCCFFFFFF強(qiáng)強(qiáng)弱弱書寫方法：書寫方法：#RRGGBB 如黑：如黑：#000000 如白：如白：#FFFFFFHTML文檔的基本結(jié)構(gòu)RGB數(shù)的設(shè)置：三種顏色組合起來RGB數(shù)設(shè)置為000000，顏色為黑色RGB數(shù)設(shè)置為CCCCCC，顏色為灰色RGB數(shù)設(shè)置為FFFFFF

6、，顏色為白色英文單詞表示顏色Black,，Olive，Teal，Red，Blue，Navy, Maroon，Gray， Lime，F(xiàn)uchsia，White, Green， Purple，Silver， Yellow，Aqua 設(shè)置顏色組合時，前面加“#”符號。使用英文單詞表示顏色時，不加#號HTML文檔的基本結(jié)構(gòu)在標(biāo)記中指定頁面的背景顏色屬性：BGCOLOR=#在標(biāo)記中指定整個文檔中文本的顏色屬性：TEXT=#實例：實例： 或或 實例：實例： 屬性屬性參數(shù)參數(shù)HTML文檔的基本結(jié)構(gòu)用標(biāo)記指定字體、字號和文本顏色字體屬性： 指定字體字號屬性： 字號1到7號，默認(rèn)是3實例：實例：你明白了吧？你明

7、白了吧？HTML文檔的基本結(jié)構(gòu)文本顏色屬性： 指定字體粗體、斜體粗體標(biāo)志斜體標(biāo)志實例：實例： 你喜歡這個你喜歡這個網(wǎng)頁網(wǎng)頁嗎嗎?GRBHTML文檔的基本結(jié)構(gòu)超級鏈接標(biāo)記HREF屬性：指向鏈接的網(wǎng)址和文件（URL）實例：實例：表格布局表格布局實例：實例：友情連接友情連接用于超級鏈用于超級鏈接的文字接的文字超級鏈接的目標(biāo)超級鏈接的目標(biāo)HTML文檔的基本結(jié)構(gòu)NAME屬性：設(shè)置書簽位置點，超級鏈接指向書簽p,154TARGET屬性:在新的窗口中顯示鏈接的內(nèi)容實例：實例： 廣寧游廣寧游HTML文檔的基本結(jié)構(gòu)TITLE屬性：在超級鏈接中加上鏈接的說明，當(dāng)將鼠標(biāo)移到鏈接上時，說明會自動彈出到光標(biāo)的尾巴上插入

8、E-mail鏈接：實例：實例： 一個一個HTML教程網(wǎng)教程網(wǎng)實例：實例：請跟我們聯(lián)系請跟我們聯(lián)系 交作業(yè)給我交作業(yè)給我HTML文檔的基本結(jié)構(gòu)圖形圖像標(biāo)記圖片格式常見有GIF和JPG主要屬性SRC,稱為引用圖形的“源(source)”圖片文件和HTML文檔在同一文件夾中，直接用文件名圖片文件和HTML文檔不在同一文件夾中，指定路徑時用相對路徑其它屬性：ALT、BORDER、ALIGN、WIDTH實例：實例： 實例：實例： 實例：實例： HTML文檔的基本結(jié)構(gòu)直接用鏈接加入當(dāng)用戶點擊時才下載播放。如：嵌入影像嵌入方式使用標(biāo)記 方法如下：加 入 影 像 還 可 用 標(biāo) 記 ， 使 用DYNSRC=屬

9、性實例：實例： 實例：實例： 實例：實例： 欣賞電影欣賞電影HTML文檔的基本結(jié)構(gòu)表格標(biāo)記基本表格標(biāo)記：、 、的結(jié)束標(biāo)記最好加上 標(biāo)標(biāo) 志志用用 法法在在HTML文檔中標(biāo)識表格文檔中標(biāo)識表格標(biāo)識表格中的一行，結(jié)束標(biāo)志是可選的標(biāo)識表格中的一行，結(jié)束標(biāo)志是可選的標(biāo)識一行中的單元，結(jié)束標(biāo)志是可選的標(biāo)識一行中的單元，結(jié)束標(biāo)志是可選的標(biāo)識一行標(biāo)題單元，結(jié)束標(biāo)志是可選的標(biāo)識一行標(biāo)題單元，結(jié)束標(biāo)志是可選的HTML文檔的基本結(jié)構(gòu)標(biāo)記中的常用屬性,有些屬性同樣適用于、和標(biāo)記 屬屬 性性說說 明明ALIGN=”將表格放在窗口的左邊將表格放在窗口的左邊(left)、右邊、右邊(right)或中間或中間(center

10、)BACKGROUND=”URL”指定作為整個表格的背景圖形文件的地址指定作為整個表格的背景圖形文件的地址BGCOLOR=”指定表格中所有單元的背景顏色，可用顏色名或指定表格中所有單元的背景顏色，可用顏色名或RGB值值BORDER=”n”指定每個單元的邊框厚度（象素數(shù)），指定每個單元的邊框厚度（象素數(shù)），0表示不顯示表示不顯示邊框邊框WIDTH=”n”指定表格寬度，可以用象素數(shù)，如指定表格寬度，可以用象素數(shù)，如600；也可用瀏覽；也可用瀏覽器窗口總寬度的百分比，如器窗口總寬度的百分比，如90%。HTML文檔的基本結(jié)構(gòu)屬性實例，整個表格的屬性說明：表格的寬度占據(jù)整個瀏覽器窗口的50%，表格邊框線

11、5，背景顏色為灰色，并且居中顯示實例：實例： HTML文檔的基本結(jié)構(gòu) 編號品牌M1001長城M1002方正M1003聯(lián)想M1004TCLTR為行、為行、TH標(biāo)題單元格、標(biāo)題單元格、TD單元格單元格HTML文檔的基本結(jié)構(gòu)無序列表標(biāo)記基本列表標(biāo)記 表頭標(biāo)題 表項標(biāo)識實例：實例： 或或 A List Header This is item 1 This is item 2 HTML文檔的基本結(jié)構(gòu)有序列表標(biāo)記基本列表標(biāo)記 表項標(biāo)識實例：實例： A List Header Question one Question two HTML文檔的基本結(jié)構(gòu)框架集表單HTML文檔的基本結(jié)構(gòu)滾動字幕標(biāo)記Directi

12、on屬性設(shè)置文字滾動的方向：Left, right, up, downBihavior屬性設(shè)置文字滾動方式：scroll, slide, alternate實例：實例： 網(wǎng)頁制作的技巧網(wǎng)頁制作的技巧很多很多實例：實例： 使用滾動字使用滾動字幕幕HTML文檔的基本結(jié)構(gòu) Scrollamount屬性設(shè)置文字滾動的速度（像素）scrolldelay屬性設(shè)置文字滾動延遲時間（秒）實例：實例： 網(wǎng)頁制作的技網(wǎng)頁制作的技巧很多巧很多實例：實例： 使用滾動字幕使用滾動字幕HTML文檔的基本結(jié)構(gòu) Align屬性設(shè)置滾動字幕的對齊方式：top, middle, bottom Bgcolor屬性 設(shè)置滾動字幕的背景色預(yù)定義色彩：Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua 實例