第8章 html制作基礎(new)

1、2022-5-181HTML制作制作2022-5-1821 1 HTMLHTML語言概述語言概述 2 2 文檔的格式與風格文檔的格式與風格 3 3 加入多媒體與超級鏈接加入多媒體與超級鏈接 4 4 制作表格制作表格 5 5 制作表單制作表單 6 6 框架結(jié)構(gòu)框架結(jié)構(gòu) 2022-5-183WWWWWW（World Wide WebWorld Wide Web，萬維網(wǎng)）拉進了人，萬維網(wǎng)）拉進了人們彼此間的距離，使得人與人之間的信息交們彼此間的距離，使得人與人之間的信息交流變得更加簡便和快捷。流變得更加簡便和快捷。WWWWWW上的信息，大部上的信息，大部分是通過分是通過HTMLHTML語言發(fā)布的。語

2、言發(fā)布的。HTMLHTML的普遍應用的普遍應用使得用戶獲取信息時直接可以從一個主題轉(zhuǎn)使得用戶獲取信息時直接可以從一個主題轉(zhuǎn)入另一個主題，而不是線性地尋找和閱讀。入另一個主題，而不是線性地尋找和閱讀。本章首頁本章首頁2022-5-1841.1 HTML1.1 HTML概述概述 HTMLHTML是（是（Hyper Text Markup LanguageHyper Text Markup Language，超文本，超文本標記語言）的縮寫，最早源于標記語言）的縮寫，最早源于SGMLSGML語言語言。HTMLHTML用來表示網(wǎng)上信息的符號標記語言。在用來表示網(wǎng)上信息的符號標記語言。在WWWWWW上，上

3、，發(fā)布信息通常使用發(fā)布信息通常使用HTMLHTML，它是，它是WebWeb頁面的基礎，任何頁面的基礎，任何一個一個WebWeb頁面都離不開頁面都離不開HTMLHTML，而且，而且HTMLHTML也是也是WebWeb應用應用開發(fā)的基礎。開發(fā)的基礎。 HTMLHTML語言是大多數(shù)瀏覽器都能識別的語言，使用語言是大多數(shù)瀏覽器都能識別的語言，使用HTMLHTML語法規(guī)則建立的文本可以運行在不同的操作系語法規(guī)則建立的文本可以運行在不同的操作系統(tǒng)平臺上，而且能被大多數(shù)用戶所接受。統(tǒng)平臺上，而且能被大多數(shù)用戶所接受。 2022-5-185為什么要學習為什么要學習HTML?P148HTML?P148微軟公司推

4、出的微軟公司推出的 Microsoft FrontPage， Adobe公公司推出的司推出的 Adobe Pagemill， Micromedia公司推出的公司推出的Dreamweaver等編輯工具，都被稱為等編輯工具，都被稱為“所見即所得所見即所得”的網(wǎng)頁制作工具。的網(wǎng)頁制作工具。這些圖形化的開發(fā)工具可以直接處理網(wǎng)頁，而不這些圖形化的開發(fā)工具可以直接處理網(wǎng)頁，而不用書寫費勁的標記。這使得用戶在沒有用書寫費勁的標記。這使得用戶在沒有HTML語言語言基礎的情況下，照樣可以編寫網(wǎng)頁。這時，編寫基礎的情況下，照樣可以編寫網(wǎng)頁。這時，編寫HTML文檔的任務由開發(fā)工具替你完成了。這是網(wǎng)文檔的任務由開發(fā)工

5、具替你完成了。這是網(wǎng)頁圖形編輯工具的最大成功之處，但也是它們的最頁圖形編輯工具的最大成功之處，但也是它們的最大不足之處。受到圖形編輯工具自身的約束，將產(chǎn)大不足之處。受到圖形編輯工具自身的約束，將產(chǎn)生大量的垃圾代碼。生大量的垃圾代碼。2022-5-186為什么要學習為什么要學習HTML?HTML?一個明智的網(wǎng)頁編寫者應該在掌握圖形編一個明智的網(wǎng)頁編寫者應該在掌握圖形編輯工具的基礎上進一步學會輯工具的基礎上進一步學會HTML語言，從語言，從而知道那些是垃圾代碼，這樣，我們就可以而知道那些是垃圾代碼，這樣，我們就可以利用圖形化利用圖形化HTML開發(fā)工具快速成地做出網(wǎng)開發(fā)工具快速成地做出網(wǎng)頁，又會消除

6、無用的代碼，從而達到快速制頁，又會消除無用的代碼，從而達到快速制作高質(zhì)量網(wǎng)頁的目的。作高質(zhì)量網(wǎng)頁的目的。使用使用IE瀏覽器的菜單命令瀏覽器的菜單命令“查看查看”-“”源源文件，就可以看到一個由文件，就可以看到一個由“記事本記事本”打開打開的普通文本文件（的普通文本文件（HTML文檔），其中文檔），其中沒有圖形和聲音等多媒體的內(nèi)容，但包沒有圖形和聲音等多媒體的內(nèi)容，但包含指向這些類型文件的指針或鏈接。含指向這些類型文件的指針或鏈接。要創(chuàng)建一個要創(chuàng)建一個HTML文檔，只要有兩個基文檔，只要有兩個基本工具：本工具：HTML編輯器和編輯器和WBE瀏覽器。瀏覽器。2022-5-1872022-5-188

7、1.2 1.2 文檔的結(jié)構(gòu)文檔的結(jié)構(gòu) 頭部信息頭部信息 正文部分正文部分 文件開頭和結(jié)尾由文件開頭和結(jié)尾由和和來來標記標記。和和標記頭部，用來包含標記頭部，用來包含文件的基本信息，如文件的基本信息，如標題；標題；和和標記正文部標記正文部分，是整個文件的主分，是整個文件的主體部分。體部分。 2022-5-189 這是標題部分。這是標題部分。 你好，這是正文部分！你好，這是正文部分！ HTMLHTML的基本概念的基本概念標記：用來控制文字、圖形等顯示方式標記：用來控制文字、圖形等顯示方式的符號。的符號。（1）單標記：只需單獨使用就能完整地）單標記：只需單獨使用就能完整地表達意思的標記。語法：表達意

8、思的標記。語法：（2）雙標記：是指由）雙標記：是指由“始標記始標記”和和“尾尾標記標記”兩部分構(gòu)成，必須成對使用的標兩部分構(gòu)成，必須成對使用的標記。語法：記。語法： 內(nèi)容內(nèi)容；內(nèi)容；內(nèi)容是指要被這對標記施加作用的部分。是指要被這對標記施加作用的部分。HTMLHTML的基本概念的基本概念標記屬性：始標記內(nèi)可以包含的一些屬標記屬性：始標記內(nèi)可以包含的一些屬性，語法：性，語法： 。各屬性之間無先后次序，屬性也。各屬性之間無先后次序，屬性也可省略。水平標記可省略。水平標記HTMLHTML的基本概念的基本概念注釋語句：格式為注釋語句：格式為。文件中。文件中的注釋用的注釋用“!”標記，標記，“”表示注釋結(jié)

9、束，中間的所有內(nèi)容表示注釋結(jié)束，中間的所有內(nèi)容表示注釋。注釋語句可以放在任何地方表示注釋。注釋語句可以放在任何地方，注釋內(nèi)容不在瀏覽器中顯示出來，僅，注釋內(nèi)容不在瀏覽器中顯示出來，僅供設計人員閱讀方便。供設計人員閱讀方便。2022-5-18131.3 HTML1.3 HTML標記標記 1HTML文檔標記格式：格式：功能：標志文檔開始和結(jié)尾的標記。功能：標志文檔開始和結(jié)尾的標記。 2 2HTMLHTML文件頭標記文件頭標記格式：格式：功能：用于包含文件的基本信息。功能：用于包含文件的基本信息。 是提示網(wǎng)頁內(nèi)容和功能的文字，它將出是提示網(wǎng)頁內(nèi)容和功能的文字，它將出現(xiàn)在瀏覽器的標題欄中，一個網(wǎng)頁只能

10、有一個標題，并且只現(xiàn)在瀏覽器的標題欄中，一個網(wǎng)頁只能有一個標題，并且只能出現(xiàn)在文件的頭部。能出現(xiàn)在文件的頭部。3 3HTMLHTML文件主體標記文件主體標記格式：格式：功能：文件主體標記。功能：文件主體標記。 2022-5-18141.3 HTML1.3 HTML標記標記 任何任何HTML文檔都是由一個文檔都是由一個和標記包含的分為和兩大部分HTML文件不區(qū)分大小寫文件不區(qū)分大小寫HTML文件擴展名可以是文件擴展名可以是.html或或.htm，現(xiàn)在沒有，現(xiàn)在沒有區(qū)別區(qū)別HTML語言在書寫時并不要求縮進，但是為了程語言在書寫時并不要求縮進，但是為了程序的易讀性，建議網(wǎng)頁設計者使標記的首位對齊，序

11、的易讀性，建議網(wǎng)頁設計者使標記的首位對齊，內(nèi)部的內(nèi)容向右縮進幾格。內(nèi)部的內(nèi)容向右縮進幾格。啟動啟動“記事本記事本”程序，輸入內(nèi)容后，保程序，輸入內(nèi)容后，保存文件時，先在存文件時，先在“保存類型保存類型”框中選擇框中選擇“所有文件所有文件”，在，在“文件名文件名”框中輸入框中輸入hello.htm(不能省略擴展名不能省略擴展名)，之后保存，之后保存，然后啟動然后啟動IE瀏覽器，打開保存的瀏覽器，打開保存的hello.htm，就可以看到一個簡單的網(wǎng)頁，就可以看到一個簡單的網(wǎng)頁。HTML是由標志與屬性構(gòu)成，一起用于是由標志與屬性構(gòu)成，一起用于標識各個文檔部件，告訴瀏覽器如何顯標識各個文檔部件，告訴瀏

12、覽器如何顯示文檔。示文檔。標記：通過指定某塊信息顯示為段落或標記：通過指定某塊信息顯示為段落或圖形等來標識文檔部件。圖形等來標識文檔部件。屬性：是標志的選項，在標志中修飾或?qū)傩裕菏菢酥镜倪x項，在標志中修飾或進一步指定信息。如顏色、對齊方式、進一步指定信息。如顏色、對齊方式、高度和寬度等。高度和寬度等。2022-5-1817剛剛接觸超文本，遇到的最大的障礙就剛剛接觸超文本，遇到的最大的障礙就是一些用是一些用“”括起來的句子，我們括起來的句子，我們稱它為標記，是用來分割和標記文本的元稱它為標記，是用來分割和標記文本的元素，以形成文本的布局、文字的格式及五素，以形成文本的布局、文字的格式及五彩繽紛的

13、畫面。標記都是由尖括號彩繽紛的畫面。標記都是由尖括號包圍包圍的元素構(gòu)成，尖括號告訴瀏覽器其中的文的元素構(gòu)成，尖括號告訴瀏覽器其中的文本是本是HTML命令。命令。這些標記名稱大都為相應的英文單詞首這些標記名稱大都為相應的英文單詞首字母或縮寫，如字母或縮寫，如Table表示表格（表示表格（Table）、）、IMG表示圖像（表示圖像（Image）等，很好記憶。）等，很好記憶。2022-5-1818標記的效果差別很大，但總的表示形式標記的效果差別很大，但總的表示形式大同小異，大多數(shù)成對出現(xiàn)，格式為：大同小異，大多數(shù)成對出現(xiàn)，格式為： 受標記影響的內(nèi)容受標記影響的內(nèi)容總結(jié)：總結(jié)：1 每個標記用每個標記用

14、“”圍住，如：圍住，如：、等，以表示這是等，以表示這是HTML代碼而非普通文代碼而非普通文本注意：本注意： “”與標記名之間不能留有空與標記名之間不能留有空格或其他字符。格或其他字符。2022-5-18192 在標記名之前加上符號在標記名之前加上符號“/”便是其結(jié)束標記，便是其結(jié)束標記，表示這種標記內(nèi)容的結(jié)束，如表示這種標記內(nèi)容的結(jié)束，如。標記也有。標記也有不用不用結(jié)尾的，稱之為單標記。結(jié)尾的，稱之為單標記。3 標記字母大小寫皆可，沒有限制標記字母大小寫皆可，沒有限制4 對同一段要標記的內(nèi)容，可以用多個標記來共對同一段要標記的內(nèi)容，可以用多個標記來共同作用，產(chǎn)生一定的效果。此時，各個標記之間的

15、同作用，產(chǎn)生一定的效果。此時，各個標記之間的順序也是任意的。順序也是任意的。font color= 超文本中的標記超文本中的標記2022-5-1820只需單獨使用就能完整地表達意思，這只需單獨使用就能完整地表達意思，這類標記的語法是：類標記的語法是： 最常用的單標記是最常用的單標記是，它表示換行。，它表示換行。2022-5-1821由由“始標記始標記”和和“尾標記尾標記”兩部分構(gòu)成，必須成兩部分構(gòu)成，必須成對使用，其中始標記告訴對使用，其中始標記告訴Web瀏覽器從此處開始執(zhí)瀏覽器從此處開始執(zhí)行該標記所表示的功能，而尾標記告訴行該標記所表示的功能，而尾標記告訴Web瀏覽器瀏覽器在這里結(jié)束該功能。

16、始標記前加一個斜杠（在這里結(jié)束該功能。始標記前加一個斜杠（/）即成）即成為尾標記。這類標記的語法是：為尾標記。這類標記的語法是： 內(nèi)內(nèi) 容容其中其中“內(nèi)容內(nèi)容” 部分就是要被這對標記施加作用的部分就是要被這對標記施加作用的部分。例如你想突出對某段文字的顯示，就將此段部分。例如你想突出對某段文字的顯示，就將此段文字放在一文字放在一 標記中：標記中： 第一：第一：2022-5-1822標記只是規(guī)定這是什么信息，或是文本，或是標記只是規(guī)定這是什么信息，或是文本，或是圖片，但怎樣顯示或控制這些信息，就需要在標圖片，但怎樣顯示或控制這些信息，就需要在標記后面加上相關(guān)的屬性來表示，標記就是通過屬記后面加上

17、相關(guān)的屬性來表示，標記就是通過屬性來制作出各種效果的。性來制作出各種效果的。語法結(jié)構(gòu)是：語法結(jié)構(gòu)是： 受影響的內(nèi)容受影響的內(nèi)容 2022-5-1823并不是所有的標記都有屬性，如換行標并不是所有的標記都有屬性，如換行標記記就沒有屬性。就沒有屬性。根據(jù)需要可以選用該標記的所有屬性，根據(jù)需要可以選用該標記的所有屬性，也可只用需要的幾個屬性，各屬性之間無也可只用需要的幾個屬性，各屬性之間無先后次序。先后次序。2022-5-1824例如單標記例如單標記表示在文檔當前位置畫一條水平線，表示在文檔當前位置畫一條水平線，一般是從窗口中當前行的最左端一直畫到最右端。一般是從窗口中當前行的最左端一直畫到最右端。

18、如果帶一些屬性：如果帶一些屬性： 其中：其中：SIZE屬性定義線的粗細，屬性值取整數(shù)，缺為屬性定義線的粗細，屬性值取整數(shù)，缺為1；ALIGN屬性表示對齊方式，可取屬性表示對齊方式，可取LEFT（左對齊，缺（左對齊，缺省值），省值），CENTER（居中），（居中），RIGHT（右對齊）；（右對齊）；WIDTH 屬性定義線的長度，可取相對值，（由一對屬性定義線的長度，可取相對值，（由一對 號括起來的百分數(shù)，表示相對于充滿整個窗口的百分號括起來的百分數(shù)，表示相對于充滿整個窗口的百分比），也可取絕對值（用整數(shù)表示的屏幕像素點的個數(shù)，比），也可取絕對值（用整數(shù)表示的屏幕像素點的個數(shù)，如如WIDTH=30

19、0），缺省值是），缺省值是100%。HTML的語法規(guī)則的語法規(guī)則（1）HTML文件以純文本形式存放，擴展名文件以純文本形式存放，擴展名為為.htm或或.html（2）HTML標記不區(qū)分大小寫標記不區(qū)分大小寫（3）多數(shù)）多數(shù)HTML標記可以嵌套，但不可以交標記可以嵌套，但不可以交叉。叉。（4）HTML文件以一行可以寫多個標記，一文件以一行可以寫多個標記，一個標記可以分多行書寫，不用任何續(xù)行符號。個標記可以分多行書寫，不用任何續(xù)行符號。（5）HTML源文件中的換行，回車符和多個源文件中的換行，回車符和多個連續(xù)空格連續(xù)空格(只顯示一個空格只顯示一個空格)在顯示效果中是無在顯示效果中是無效的。顯示內(nèi)容

20、要換行用效的。顯示內(nèi)容要換行用標記，換段用標記，換段用標記，若需要多個空格，可以使用多個標記，若需要多個空格，可以使用多個&nbsp轉(zhuǎn)義符號。轉(zhuǎn)義符號。2022-5-18261.4 1.4 常用常用HTMLHTML編輯工具編輯工具任何一個文檔編輯器都是任何一個文檔編輯器都是HTMLHTML編輯器編輯器。為了減少網(wǎng)頁設計師的工作，使設計網(wǎng)頁更加的方為了減少網(wǎng)頁設計師的工作，使設計網(wǎng)頁更加的方便，很多公司設計了專用的網(wǎng)頁編輯器，像便，很多公司設計了專用的網(wǎng)頁編輯器，像DreamweaverDreamweaver，F(xiàn)rontPageFrontPage，CutePageCutePage，Qui

21、ckSiteQuickSite等，等，是專門用來制作網(wǎng)頁的，利用它們可以很容易的編寫是專門用來制作網(wǎng)頁的，利用它們可以很容易的編寫出精美的網(wǎng)頁，具有所見即所得的功能。出精美的網(wǎng)頁，具有所見即所得的功能。所謂所見即所得，就是在編輯網(wǎng)頁時看到的效果，所謂所見即所得，就是在編輯網(wǎng)頁時看到的效果，與使用瀏覽器時顯示的效果基本一致。與使用瀏覽器時顯示的效果基本一致。 2022-5-1827在大多數(shù)網(wǎng)頁中，文檔是核心的內(nèi)容，只在大多數(shù)網(wǎng)頁中，文檔是核心的內(nèi)容，只有設置適當?shù)奈臋n格式，才能得到絢麗多彩有設置適當?shù)奈臋n格式，才能得到絢麗多彩的網(wǎng)頁。設置文檔的格式包括：設置標題和的網(wǎng)頁。設置文檔的格式包括：設置

22、標題和文字的字體、字號、字型、顏色，段落格式、文字的字體、字號、字型、顏色，段落格式、文本布局等。文本布局等。 本章首頁本章首頁2022-5-18282.1 2.1 設置設置的屬性的屬性標記屬性標記屬性功能功能background=URL設置網(wǎng)頁的背景圖片設置網(wǎng)頁的背景圖片bgcolor=colorvalue設置網(wǎng)頁的背景顏色，默認為白色設置網(wǎng)頁的背景顏色，默認為白色text=colorvalue設置文本的顏色，默認為黑色設置文本的顏色，默認為黑色link=colorvalue設置尚未被訪問過的超文本鏈接的顏色，默認為藍色設置尚未被訪問過的超文本鏈接的顏色，默認為藍色vlink=colorva

23、lue設置已被訪問過的超文本鏈接的顏色，默認為紫色設置已被訪問過的超文本鏈接的顏色，默認為紫色alink=colorvalue設置超文本鏈接在被單擊的瞬間的顏色，默認為藍色設置超文本鏈接在被單擊的瞬間的顏色，默認為藍色bgproperties =fixed設置背景是否隨滾動條滾動設置背景是否隨滾動條滾動,只有這一個值，表明不滾動，只與只有這一個值，表明不滾動，只與background屬性一起使用屬性一起使用leftmargin=value設置網(wǎng)頁左邊的空白，數(shù)值或是百分比設置網(wǎng)頁左邊的空白，數(shù)值或是百分比topmargin=value設置網(wǎng)頁上方的空白，數(shù)值或是百分比設置網(wǎng)頁上方的空白，數(shù)值或

24、是百分比margingwidth=size設置網(wǎng)頁空白的寬度設置網(wǎng)頁空白的寬度marginheight =size設置網(wǎng)頁空白的高度設置網(wǎng)頁空白的高度2022-5-18292.1 2.1 設置設置的屬性的屬性 網(wǎng)頁的內(nèi)容 2022-5-1830Black = #000000 Silver = #C0C0C0Gray = #808080 White = #FFFFFF Maroon = #800000 Red = #FF0000 Purple = #800080 Fuchsia = #FF00FF Green = #008000 Lime = #00FF00 Olive = #808000 Ye

25、llow = #FFFF00 Navy = #000080 Blue = #0000FF Teal = #008080 Aqua = #00FFFF 2022-5-18312.2 2.2 段落格式化段落格式化1標題標記格式：格式：第一級標題第一級標題第二級標題第二級標題第三級標題第三級標題第四級標題第四級標題第五級標題第五級標題第六級標題第六級標題功能：設置各種大小不同標題的標記。數(shù)字越小，功能：設置各種大小不同標題的標記。數(shù)字越小，字號越大。字號越大。2022-5-1832的屬性的屬性align用來設置標題在頁面中的對用來設置標題在頁面中的對齊方式：齊方式： left：左對齊：左對齊 cen

26、ter：居中對齊：居中對齊 right：右對齊：右對齊格式為：格式為： 標題文字標題文字說明：用該標記實現(xiàn)文章標題的效果有限，通說明：用該標記實現(xiàn)文章標題的效果有限，通常用常用font標記實現(xiàn)文章標題豐富多彩的效果。標記實現(xiàn)文章標題豐富多彩的效果。2022-5-1833標題示例標題示例這是一行普通文字這是一行普通文字 一級標題一級標題 二級標題二級標題 三級標題三級標題 四級標題（居左）四級標題（居左） 五級標題（居中）五級標題（居中） 六級標題（居右）六級標題（居右）2022-5-18342.3 2.3 字符的格式化字符的格式化1 1字體設置標記字體設置標記格式：格式：功能：設置字體格式標記

27、。功能：設置字體格式標記。 標記屬性功能size=size設置文字的大小，是1-7之間的整數(shù)face=fontstyle設置字體color=colorvalue設置文字的顏色2022-5-1835在網(wǎng)頁中為了增強頁面的層次，其中的文字可在網(wǎng)頁中為了增強頁面的層次，其中的文字可以用不同的大小、字體、字型、顏色。用以用不同的大小、字體、字型、顏色。用標記設置字號。標記設置字號。格式為：格式為： 被設置的文字被設置的文字 2022-5-1836標記可以設定文字的字體、字號、顏標記可以設定文字的字體、字號、顏色。其中屬性：色。其中屬性：size用來設置文字的大小。數(shù)字的取值范圍為用來設置文字的大小。數(shù)

28、字的取值范圍為17，取，取1時最小，取時最小，取7時最大。其中缺省值為時最大。其中缺省值為3。我們可以。我們可以SIZE屬屬性值之前加上性值之前加上“”、“”字符，來指定相對于字號字符，來指定相對于字號初始值的增量或減量。初始值的增量或減量。 若基準字號是若基準字號是3，+3表示表示6號字。號字。face用來設置字體。如黑體、宋體、楷體等。用來設置字體。如黑體、宋體、楷體等。color用來設置文字顏色。用來設置文字顏色。2022-5-1837 這是這是size=7的字體的字體 這是這是size=6的字體的字體 這是這是size=5的字體的字體 這是這是size=4的字體的字體 這是這是size

29、=3的字體的字體 這是這是size=2的字體的字體 這是這是size=1的字體的字體 這是這是size=-1的字體的字體 2022-5-1838HTML4.0提供了定義字體的功能，用提供了定義字體的功能，用face屬性來完成這個工作。屬性來完成這個工作。face的屬性值可的屬性值可以是本機上的任一字體類型，但有一點麻以是本機上的任一字體類型，但有一點麻煩的是，只有對方的電腦中裝有相同的字煩的是，只有對方的電腦中裝有相同的字體才可以在他的瀏覽器中出現(xiàn)你預先設計體才可以在他的瀏覽器中出現(xiàn)你預先設計的風格。的風格。 2022-5-1839歡迎光臨歡迎光臨歡迎光臨歡迎光臨歡迎光臨歡迎光臨歡迎光臨歡迎光

30、臨WelcomeWelcome 2022-5-1840設置文字顏色有兩種方法設置文字顏色有兩種方法1、標記中的標記中的text屬性：可以設屬性：可以設定整個網(wǎng)頁文字的顏色。格式：定整個網(wǎng)頁文字的顏色。格式： 文字文字 這里的顏色值可以是一個十六進制數(shù)這里的顏色值可以是一個十六進制數(shù)(用用“#”作作為前綴為前綴)，也可以是以下，也可以是以下16種顏色名稱。種顏色名稱。2022-5-18412、標記中的標記中的color屬性：可以設屬性：可以設定網(wǎng)頁、段落、短語、詞或字的顏色。格定網(wǎng)頁、段落、短語、詞或字的顏色。格式：式： 文字文字這里的顏色值可以是一個十六進制數(shù)這里的顏色值可以是一個十六進制數(shù)(

31、用用“#”作為前綴作為前綴)，也可以是以下，也可以是以下16種顏色名種顏色名稱。稱。2022-5-1842色彩斑斕的世界色彩斑斕的世界色彩斑斕的世界色彩斑斕的世界 色彩斑斕的世界色彩斑斕的世界色彩斑斕的世界色彩斑斕的世界色彩斑斕的世界色彩斑斕的世界 色彩斑斕的世界色彩斑斕的世界色彩斑斕的世界色彩斑斕的世界2022-5-1843當當與與標記同時對文字標記同時對文字顏色進行定義時，顏色進行定義時，標記優(yōu)先。標記優(yōu)先。2022-5-18442段落標記格式：格式：功能：設置段落標記。功能：設置段落標記。 為了排列的整齊、清晰，文字段落之間，我們常為了排列的整齊、清晰，文字段落之間，我們常用用來做標記。

32、文件段落的開始由來做標記。文件段落的開始由來標記，來標記，段落的結(jié)束由段落的結(jié)束由來標記。來標記。段落標記段落標記 ，與，與不同，不僅使后面的文字不同，不僅使后面的文字換到下一行，而且能使兩段之間多一空行。換到下一行，而且能使兩段之間多一空行。是可以省略的，因為下一個是可以省略的，因為下一個的開始就意的開始就意味著上一個味著上一個的結(jié)束。的結(jié)束。標記還有一個屬性標記還有一個屬性ALIGN，它用來指名字符，它用來指名字符顯示時的對齊方式，一般值有顯示時的對齊方式，一般值有CENTER、LEFT、RIGHT三種。三種。2022-5-1845段落標簽段落標簽浣溪沙浣溪沙一曲新詞酒一杯，一曲新詞酒一杯

33、，去年天氣舊亭臺，夕陽西下幾時回。去年天氣舊亭臺，夕陽西下幾時回。無可奈何花落去，似曾相識無可奈何花落去，似曾相識燕歸來。小園香徑幾徘徊。燕歸來。小園香徑幾徘徊。2022-5-1846段落標簽段落標簽登鸛雀樓登鸛雀樓白日依山盡，白日依山盡，黃河入海流。黃河入海流。欲窮千里目，欲窮千里目，更上一層樓。更上一層樓。2022-5-18473預定義格式標記格式：格式： 功能：在瀏覽器中瀏覽時，按照文檔中預先排好的形式顯功能：在瀏覽器中瀏覽時，按照文檔中預先排好的形式顯示內(nèi)容。如果在文本開頭加上示內(nèi)容。如果在文本開頭加上，在末尾加上，在末尾加上，那，那么中間就不用加其他標記了，這時中間的回車換行符等就起

34、么中間就不用加其他標記了，這時中間的回車換行符等就起作用了，可以原樣顯示。作用了，可以原樣顯示。 預定格式標簽使用預定格式標簽使用 床前明月光床前明月光 疑是地上霜疑是地上霜 舉頭望明月舉頭望明月 低頭思故鄉(xiāng)低頭思故鄉(xiāng) 蘭陵美酒郁金香蘭陵美酒郁金香 玉碗盛來琥珀光玉碗盛來琥珀光 但使主人能醉客但使主人能醉客 不知何處是不知何處是他鄉(xiāng)他鄉(xiāng) 2022-5-18484分區(qū)顯示標記/文本堆砌方式標記格式：格式：功能：分區(qū)顯示標記?？梢杂脕砼虐娲髩K功能：分區(qū)顯示標記?？梢杂脕砼虐娲髩KHTMLHTML段落，也用于格式化表，設置多個段落的文本居中、段落，也用于格式化表，設置多個段落的文本居中、居左、居右。居

35、左、居右。通過通過ALIGN屬性可以選擇文字或圖片的對齊方屬性可以選擇文字或圖片的對齊方式，式，LEFT表示向左對齊，表示向左對齊，RIGHT表示向右對齊，表示向右對齊，CENTER表示居中?；菊Z法如下：表示居中?；菊Z法如下： #leftrightcenter2022-5-1849你好你好!你好你好! 你好你好! 2022-5-18505換行標記格式：格式：功能：強制換行。功能：強制換行。放在一行的末尾，可使后面的文字、圖片等放在一行的末尾，可使后面的文字、圖片等顯示于下一行，又不會在行與行之間留下空行。顯示于下一行，又不會在行與行之間留下空行。 2022-5-1851換行示例換行示例 登

36、鸛雀樓登鸛雀樓白日依山盡，白日依山盡，黃河入海黃河入海流。流。欲窮千里目，欲窮千里目，更上一層樓。更上一層樓。2022-5-18526 6水平線標記水平線標記格式：格式：功能：插入水平線標記。功能：插入水平線標記。在頁面中插入一條水平標尺線，可以使不同功能的在頁面中插入一條水平標尺線，可以使不同功能的文字分隔開，看起來整齊、明了。文字分隔開，看起來整齊、明了。當瀏覽器解釋到當瀏覽器解釋到HTML文件中的文件中的標記時，會標記時，會在此處換行，并加入一條水平線段。線段的樣式由在此處換行，并加入一條水平線段。線段的樣式由標記得參數(shù)決定，格式如下：標記得參數(shù)決定，格式如下： 2022-5-1853屬

37、性屬性align設定橫線放置的位置，可選擇設定橫線放置的位置，可選擇left、right、center。size設定線條粗細，以像素為設定線條粗細，以像素為單位，默認為，默認為2。width設定線段長度，可以是設定線段長度，可以是絕對值（以像素為單位），也可以是也可以是相對值（相對于當前窗口的百分比）。color設定線條顏色，默認為黑色。可以采用顏色的設定線條顏色，默認為黑色?？梢圆捎妙伾拿Q。顏色可以用相應的名稱。顏色可以用相應的英文單詞或以或以“#”引導的一個十六進制數(shù)代碼來表示。來表示。noshade設定線條為平面顯示，默認有立體效果。屬設定線條為平面顯示，默認有立體效果。屬性不用賦值

38、，而是直接加入標記即可使用，它表示加入性不用賦值，而是直接加入標記即可使用，它表示加入一條沒有陰影的水平線（不加入此屬性水平線有陰影）一條沒有陰影的水平線（不加入此屬性水平線有陰影）2022-5-18547 7注釋標記注釋標記格式：格式：!-功能：注釋標記。功能：注釋標記。 為了給文中不同部分加上說明，方便日后閱讀和為了給文中不同部分加上說明，方便日后閱讀和修改。修改。注釋標記的格式為：注釋標記的格式為： -例：例：這是一行普通文字這是一行普通文字 2022-5-1855標記的使用標記的使用三種標記的使用！三種標記的使用！我在中間！我在中間！中間中間我在左邊！我在左邊！左邊左邊我在右邊！我在右

39、邊！右邊右邊 2022-5-18562.42.4 建立列表建立列表有序列表有序列表無序列表無序列表自定義列表自定義列表2022-5-18572.42.4 建立列表建立列表1 1有序列表有序列表格式：格式： typetype屬性：數(shù)字（屬性：數(shù)字（1 1，2 2，）、大寫英文字母（）、大寫英文字母（A A，B B，）、小寫英文字母（）、小寫英文字母（a a，b b，）、大寫羅馬字）、大寫羅馬字母（母（I I，IIII，）和小寫羅馬字母（）和小寫羅馬字母（i i，iiii，），），默認的序號是數(shù)字。默認的序號是數(shù)字。 這里這里可以省略?？梢允÷?。2022-5-1858type屬性指定每個表項左端的

40、符號類型，可為屬性指定每個表項左端的符號類型，可為 1 序號為數(shù)字序號為數(shù)字 A 序號為大寫英文字母序號為大寫英文字母 a 序號為小寫英文字母序號為小寫英文字母 序號為大寫羅馬字母序號為大寫羅馬字母 序號為小寫羅馬字母序號為小寫羅馬字母 設置的方法有兩種：設置的方法有兩種：1.在在后指定符號的樣式后指定符號的樣式2.在在后指定符號的樣式后指定符號的樣式若若同時指定符號樣式，先執(zhí)行同時指定符號樣式，先執(zhí)行指定的符號指定的符號樣式。樣式。2022-5-1859 電子商務項目管理電子商務項目管理 電子商務顧問電子商務顧問 ERP銷售人員銷售人員 WAP開發(fā)人員開發(fā)人員 WEB開發(fā)人員開發(fā)人員 WEB

41、設計人員設計人員 返回返回2022-5-18602.32.3 建立列表建立列表2 2無序列表無序列表格式：格式： typetype屬性：可以為屬性：可以為discdisc（實心圓點）、（實心圓點）、circlecircle（空心圓點）、（空心圓點）、squaresquare（方塊）和自定義圖片，默（方塊）和自定義圖片，默認為實心圓點。這里認為實心圓點。這里可以省略?？梢允÷?。 2022-5-1861type屬性指定每個表項左端的符號類型，可為屬性指定每個表項左端的符號類型，可為 disc circle square 設置的方法有兩種：設置的方法有兩種：1.在在后指定符號的樣式后指定符號的樣式2

42、.在在后指定符號的樣式后指定符號的樣式2022-5-1862 電子商務項目管理電子商務項目管理 電子商務顧問電子商務顧問 ERP銷售人員銷售人員 WAP開發(fā)人員開發(fā)人員 WEB開發(fā)人員開發(fā)人員 WEB設計人員設計人員 返回返回2022-5-18632.32.3 建立列表建立列表3 3自定義列表自定義列表格式：格式： 定義列表；定義列表；定義列表項也就是列表條目，項目會定義列表項也就是列表條目，項目會自動換行并左對齊，但項目間沒有空行；自動換行并左對齊，但項目間沒有空行；用來定義語句，用來定義語句，用來說明文字自動向右縮進。用來說明文字自動向右縮進。及及都可以省略。都可以省略。 2022-5-1

43、864 這是一個定義性列表：這是一個定義性列表： WWW WWW是全球信息網(wǎng)是全球信息網(wǎng)(World wide web)的縮的縮寫，也有人稱之為寫，也有人稱之為3W、W3、Web。 Hyper Text Hyper Text是超文本。文件通過超文本，可是超文本。文件通過超文本，可鏈結(jié)到其它地方的數(shù)據(jù)文件，取得分散在各地的數(shù)據(jù)。鏈結(jié)到其它地方的數(shù)據(jù)文件，取得分散在各地的數(shù)據(jù)。2022-5-18652.4 2.4 字符的格式化字符的格式化2 2其他標記其他標記其他標記格式功能給字符加下劃線給字符加下劃線給字符上加橫線，表示刪除給字符上加橫線，表示刪除給字符加粗給字符加粗將字符設置成斜體將字符設置成

44、斜體 文字移動文字移動 direction=left right down updirection=left right down up #=scroll, slide, alternate #=scroll, slide, alternate 繞圈繞圈走、走一次、來回走走、走一次、來回走.給字符加下劃線給字符加下劃線給字符上加橫線，表示刪除給字符上加橫線，表示刪除給字符加粗給字符加粗將字符設置成斜體將字符設置成斜體:斜體斜體:加粗加粗斜體加粗斜體加粗加粗加粗 啦啦啦，我從右向左移啦啦啦，我從右向左移 啦啦啦，我從左向右移！啦啦啦，我從左向右移！ 啦啦啦，我從上向下移！啦啦啦，我從上向下移！

45、啦啦啦，我從下向上移！啦啦啦，我從下向上移！ 只走一次就歇了！只走一次就歇了！ 來回走來回走一圈一圈繞著走！一圈一圈繞著走！ 2022-5-1870 圖像的出現(xiàn)為本來單調(diào)乏味的網(wǎng)絡世界增圖像的出現(xiàn)為本來單調(diào)乏味的網(wǎng)絡世界增添了一道亮麗的風景線。圖像在網(wǎng)頁設計中是添了一道亮麗的風景線。圖像在網(wǎng)頁設計中是必不可少的，所以用戶應該掌握在網(wǎng)頁中操作必不可少的，所以用戶應該掌握在網(wǎng)頁中操作圖像的方法。圖像的方法。本章首頁本章首頁2022-5-1871插入多媒體的一般形式：插入多媒體的一般形式：格式：格式：功能：在網(wǎng)頁中加入圖像、視頻、動畫等。功能：在網(wǎng)頁中加入圖像、視頻、動畫等。 2022-5-1872

46、1 1插入圖像插入圖像標記屬性標記屬性功能功能srcsrc=URL=URL通過通過URLURL給出圖像來源的位置，相對路徑或是網(wǎng)址給出圖像來源的位置，相對路徑或是網(wǎng)址width=size設置圖像寬度設置圖像寬度height =size設置圖像高度設置圖像高度alt=txt設置在圖像未載入前圖片位置顯示的文字設置在圖像未載入前圖片位置顯示的文字border=size設置圖像邊框，缺省為設置圖像邊框，缺省為0 0align=alignstyle設置對齊方式。取值為：設置對齊方式。取值為：toptop，middlemiddle，bottombottom，leftleft，rightrighthspa

47、ce=size設置圖片左右邊沿空白設置圖片左右邊沿空白vspace=size設置圖片上下邊沿空白設置圖片上下邊沿空白2022-5-1873使用圖片標記，可以把一幅圖片加入到網(wǎng)頁中。使用圖片標記，可以把一幅圖片加入到網(wǎng)頁中。格式為：格式為： SRC:稱為引用圖形的源。在指定稱為引用圖形的源。在指定“源源”時，如果圖片時，如果圖片文件和文件和HTML文檔在同一文件夾中，可以直接用文件名；文檔在同一文件夾中，可以直接用文件名；否則要寫清楚指向圖形文件的地址。否則要寫清楚指向圖形文件的地址。路徑可以是相對路徑，也可以是網(wǎng)址。相對路路徑可以是相對路徑，也可以是網(wǎng)址。相對路徑是指所要鏈接或是嵌入到當前徑是

48、指所要鏈接或是嵌入到當前HTML文檔的文檔的文件與當前文件的相對位置所形成的路徑。文件與當前文件的相對位置所形成的路徑。1、HTML文件與圖像文件在同一目錄下，直文件與圖像文件在同一目錄下，直接寫文件名即可。接寫文件名即可。2、圖像文件放在當前的、圖像文件放在當前的HTML文檔所在目錄文檔所在目錄的一個子目錄下，則代碼為子目錄下的文件。的一個子目錄下，則代碼為子目錄下的文件。3、圖像文件放在當前的、圖像文件放在當前的HTML文檔所在目錄文檔所在目錄的上層目錄下，則相對路徑必須是準網(wǎng)址了，的上層目錄下，則相對路徑必須是準網(wǎng)址了，即用即用“./”表示網(wǎng)站。表示網(wǎng)站。2022-5-1875 瀑瀑布布

49、 風景風景 2022-5-1876 標簽的標簽的 align 屬性來控制帶有文字包圍的圖像的對齊方式屬性來控制帶有文字包圍的圖像的對齊方式 。性值：。性值：left、right、top 、middle 和和 bottom 。注意：。注意：HTML 4.01 不推薦使用不推薦使用 align 屬性，屬性，XHTML 1.0 Strict DTD 不支持該屬性，同時不支持該屬性，同時 HTML 5 也也不再支持該屬性。不再支持該屬性。 風景風景 瀑瀑布布2022-5-18772 2插入視頻：在網(wǎng)頁中加入視頻信息插入視頻：在網(wǎng)頁中加入視頻信息標記屬性標記屬性功能功能dynsrcdynsrc=URL=

50、URL設置多媒體來源位置設置多媒體來源位置loop=size設置視頻播放的次數(shù)設置視頻播放的次數(shù) size=nloopdelay=time設置兩次播放的間隔時間，單位是毫秒設置兩次播放的間隔時間，單位是毫秒注：注：src表示設置一幅靜態(tài)圖象的表示設置一幅靜態(tài)圖象的URL地地址，在未載入址，在未載入.AVI文件時，先在文件時，先在.AVI的的播放區(qū)域顯示該圖象。播放區(qū)域顯示該圖象。Height width align屬性也可以使用。屬性也可以使用。3、插入背景音樂：在網(wǎng)頁中加入聲音、插入背景音樂：在網(wǎng)頁中加入聲音格式：格式：屬性：屬性：src指明聲音文件的指明聲音文件的URL地址；地址；loop

51、控控制播放次數(shù)，取制播放次數(shù)，取-1或或INFINITE時，聲音將一時，聲音將一直播放到瀏覽者離開該網(wǎng)頁為止。直播放到瀏覽者離開該網(wǎng)頁為止。2022-5-18804 4、 加入超級鏈接加入超級鏈接格式：格式：功能：在當前頁和其他頁間建立超鏈接。功能：在當前頁和其他頁間建立超鏈接。標記屬性標記屬性功能功能hrefhref=URL=URL給定鏈接目標的位置給定鏈接目標的位置target=frametarget設置顯示鏈接目標的框架設置顯示鏈接目標的框架name給當前的文檔中的一個位置取名，便于長文檔的快速給當前的文檔中的一個位置取名，便于長文檔的快速定位定位title在瀏覽器中鼠標指向鏈接時顯示的

52、提示文本在瀏覽器中鼠標指向鏈接時顯示的提示文本2022-5-1881超鏈接可以看作是一個超鏈接可以看作是一個“熱點熱點”，它可，它可以從當前以從當前Web頁跳轉(zhuǎn)到其他位置，包括當頁跳轉(zhuǎn)到其他位置，包括當前頁的某個位置、前頁的某個位置、Internet上的某個文件等，上的某個文件等，還可以跳轉(zhuǎn)到聲音、圖片等多媒體文件。還可以跳轉(zhuǎn)到聲音、圖片等多媒體文件。超鏈接使用錨點標記超鏈接使用錨點標記來定義。來定義。2022-5-1882通過單擊一個詞、句或圖片可以轉(zhuǎn)到另一通過單擊一個詞、句或圖片可以轉(zhuǎn)到另一個地方，這樣的詞、句或圖片稱為熱點。個地方，這樣的詞、句或圖片稱為熱點。標記的格式為：標記的格式為：

53、 熱點熱點 2022-5-1883target設定鏈接被按后結(jié)果要顯示的窗口?？蛇x值為：設定鏈接被按后結(jié)果要顯示的窗口?？蛇x值為：_blank，_parent，_self，_top，框架名稱。，框架名稱。target=“_blank”或或target=“new”：將連接的內(nèi)容開在新的：將連接的內(nèi)容開在新的瀏覽器窗口中。瀏覽器窗口中。target=“_ parent”：將連接的內(nèi)容顯示在直接父框架窗口：將連接的內(nèi)容顯示在直接父框架窗口中。中。target=“_ self”：將連接的內(nèi)容顯示在當前窗口中（默認：將連接的內(nèi)容顯示在當前窗口中（默認值）。值）。target=“_ top”：將連接的內(nèi)容

54、顯示在沒有框架的窗口中：將連接的內(nèi)容顯示在沒有框架的窗口中（即除去了框架），在整個窗口中打開被鏈接文檔。（即除去了框架），在整個窗口中打開被鏈接文檔。target=“框架名稱框架名稱”：只運用于框架中，將連接的內(nèi)容顯：只運用于框架中，將連接的內(nèi)容顯示在該框架名稱設定的框架窗口中（框架名稱要事先定義示在該框架名稱設定的框架窗口中（框架名稱要事先定義好）。好）。2022-5-1884 案例案例 圖片圖片 清華大學清華大學 2022-5-1885圖片也可以作為熱點圖片也可以作為熱點格式為：格式為： 如：如： 2022-5-1886 表格可以把文字和圖片等內(nèi)容按照行和表格可以把文字和圖片等內(nèi)容按照行和

55、列排列起來，可以用來建立主頁的框架，使列排列起來，可以用來建立主頁的框架，使得整個網(wǎng)頁更加清晰和條理化，有利于信息得整個網(wǎng)頁更加清晰和條理化，有利于信息的表達。的表達。生成一個基本表格的步驟：生成一個基本表格的步驟：第 一 ， 設 計 、 生 成 表 格 結(jié) 構(gòu) 。 輸 入第 一 ， 設 計 、 生 成 表 格 結(jié) 構(gòu) 。 輸 入標志，指定行數(shù)，列數(shù)和標題。標志，指定行數(shù)，列數(shù)和標題。第二，在表格單元中輸入數(shù)據(jù)。第二，在表格單元中輸入數(shù)據(jù)。本章首頁本章首頁2022-5-1887表格的基本結(jié)構(gòu)表格的基本結(jié)構(gòu) 定義表格定義表格 定義表行定義表行 定義表頭定義表頭 定義表元（表格的具體數(shù)據(jù)）定義表元

56、（表格的具體數(shù)據(jù)）2022-5-18884.1 4.1 建立表格建立表格格式：格式： 標記屬性標記屬性功能功能border=sizeborder=size設置表格邊框大小設置表格邊框大小width= size設置表格的寬度設置表格的寬度height=size設置表格的高度設置表格的高度cellspacing=size設置單元格間距設置單元格間距cellpadding =size設置單元格的填充距設置單元格的填充距background =URL設置表格背景圖片設置表格背景圖片bgcolor =colorvalue設置表格背景色設置表格背景色align=alignstyle設置對齊方式設置對齊方式

57、cols =size設置表格的列數(shù)設置表格的列數(shù)2022-5-18894.2 4.2 定制表格定制表格格式：格式：。功能：定義表格的一行。功能：定義表格的一行。格式：格式：。功能：定義單元格。功能：定義單元格。 標記屬性標記屬性功能功能bgcolorbgcolor= =colorvalucolorvalue e/background=/background=urlurl設置單元格背景顏色設置單元格背景顏色設置單元格背景圖片設置單元格背景圖片rowspan=num設置單元格所占的行數(shù)設置單元格所占的行數(shù)colspan =num設置單元格所占的列數(shù)設置單元格所占的列數(shù)align =alignsty

58、le設置對齊方式設置對齊方式valign =valignstyle設置單元格垂直對齊方式設置單元格垂直對齊方式width =size設置單元格寬度設置單元格寬度height=size設置單元格高度設置單元格高度2022-5-18904.2 4.2 定制表格定制表格格式：格式：功能：定義表格標題，可以通過功能：定義表格標題，可以通過alignalign屬性設置屬性設置標題的對齊方式標題的對齊方式. align=left center right top . align=left center right top bottombottom。 2022-5-1891最簡單的表格僅包括行和列。格式為：

59、最簡單的表格僅包括行和列。格式為： 表頭表頭1 表頭表頭n 表項表項1 表項表項n 表項表項1 表項表項n 2022-5-1892表格是一行一行建立的，在每一行中填入該行每一列的表格是一行一行建立的，在每一行中填入該行每一列的表格數(shù)據(jù)項。把表頭看作一行，用表格數(shù)據(jù)項。把表頭看作一行，用標記，文字以標記，文字以粗體顯示。粗體顯示。表格的整體外觀由表格的整體外觀由標記的屬性決定。標記的屬性決定。 border定義表格的邊框，單位像素，如省略，則不帶邊定義表格的邊框，單位像素，如省略，則不帶邊框框 width定義表格的寬度定義表格的寬度 height 定義表格的高度定義表格的高度 cellspaci

60、ng定義表項間隙，單位是像素定義表項間隙，單位是像素 cellpadding=j定義表項內(nèi)部空白，單位是像素定義表項內(nèi)部空白，單位是像素 background設置表格的背景圖片，取值為圖像的設置表格的背景圖片，取值為圖像的URL地址地址 align對齊方式對齊方式left right center說明：說明：1、定義行，該標記中間的內(nèi)容顯示在一行，此標記對定義行，該標記中間的內(nèi)容顯示在一行，此標記對只能放在只能放在標記對之間使用，而在此標記對之間加標記對之間使用，而在此標記對之間加入文本將是無用的，因為在入文本將是無用的，因為在之間只能緊跟之間只能緊跟標標記對才是有效的語法；記對才是有效的語法； 標記