HTML文檔的基本結構課件

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

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

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

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

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

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

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

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

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

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

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

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