成都理工大學(xué)校團委信息中心美工部html培訓(xùn)ppt課件

1、HTML概念HTML（Hyper Text Markup Language 超文本標識語言）是一種用來制作超文本文檔的簡單標記語言。用HTML編寫的超文本文檔稱為HTML文檔。HTML文檔的編寫方法手工直接編寫記事本等，存成.htm .html格式使用可視化HTML編 輯 器Frontpage、Dreamweaver等由Web 服務(wù)器（ 或稱HTTP 服務(wù)器） 一 方實時動態(tài)地生成。網(wǎng)頁文件命名*.htm或*.html無空格無特殊符號（例如&符號），只可以有下劃線“_”，只可以為英文、數(shù)字區(qū)分大小寫首頁文件名默認為：index.htm 或 index.htmlHTML 文件結(jié)構(gòu). 元素：是HT

2、ML語言的基本部分。元素總是成對出現(xiàn)，每一對元素一般都有一個開始的標記（如），也有一個結(jié)束的標記（如）。元素的標記要用一對尖括號括起來，并且結(jié)束的標記總是在開始的標記前加一個斜杠。HTML 文件結(jié)構(gòu)(Document Structures) HTML 文件的正文 第一張網(wǎng)頁（01.htm） my first page This is my first homepage! 基本組成部分HTML元素屬性HTML元素可以有自己的相關(guān)屬性，每一個屬性還可以由我們網(wǎng)頁編制者賦一定的值。元素屬性出現(xiàn)在元素的內(nèi)，并且和元素名之間有一個空格分隔；屬性值用“”引起來。第二張網(wǎng)頁（02.htm） my first

3、 page This is my first homepage! HTML基本結(jié)構(gòu)的有關(guān)元素和元素屬性HEAD元素1 元素出現(xiàn)在文檔的開頭部分。與之間的內(nèi)容不會在瀏覽器的文檔窗口顯示，但是其間的元素有特殊重要的意義。 元素定義HTML文檔的標題。與之間的內(nèi)容將顯示在瀏覽器窗口的標題欄。HTML基本結(jié)構(gòu)的有關(guān)元素和元素屬性HEAD元素2元素 元素下面可以插入很多很有用的元素屬性。下面介紹四種： 用來標記搜索引擎在搜索你的頁面時所取出的關(guān)鍵詞。HTML基本結(jié)構(gòu)的有關(guān)元素和元素屬性HEAD元素3元素 用來標記文檔的作者。HTML基本結(jié)構(gòu)的有關(guān)元素和元素屬性HEAD元素4元素 用來標記你的頁面的解碼方

4、式。 HTML基本結(jié)構(gòu)的有關(guān)元素和元素屬性HEAD元素5元素 用來自動刷新網(wǎng)頁練習(xí)（03.htm）編寫一個網(wǎng)頁，要求3秒鐘后自動跳轉(zhuǎn)到知了網(wǎng)首頁（）。 my first page 三秒鐘后本網(wǎng)頁自動跳轉(zhuǎn)到知了網(wǎng)首頁 元素及元素屬性1元素表明是HTML文檔的主體部分。在與之間，通常都會有很多其它元素；這些元素和元素屬性構(gòu)成HTML文檔的主體部分。元素及元素屬性2元素中有下列元素屬性： (1)bgcolorbgcolor屬性標志HTML文檔的背景顏色。如：bgcolor=#CCFFCC。例：04.htmHTML對顏色的控制HTML對顏色的控制也有自己的語法。HTML使用16進制的RGB顏色值對顏色

5、進行控制。16 進制的數(shù)碼有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.顏色顏色名和RGB值黑色Black=”#000000”銀色Silver=”#c0c0c0”紅色Red=”#ff0000”藍色Blue=”#0000ff”白色White=”#ffffff”黃色Yellow=”ffff00”綠色Green=”#00ff00”海藍色Aqua=”#00ffff”常見顏色的代碼元素及元素屬性3元素中有下列元素屬性： (2)backgroundbackground屬性標志HTML文檔的背景圖片。如：background=“images/bg.gif?？梢允褂玫膱D片格式為GIF，

6、JPG例：05.htm元素及元素屬性4元素中有下列元素屬性： (3)bgproperties=fixedbgproperties=fixed使背景圖片成水印效果，即圖片不隨著滾動條的滾動而滾動。元素及元素屬性5元素中有下列元素屬性： (4)texttext屬性標志HTML文檔的正文文字顏色。如：text=“#FF6666”。Text元素定義的顏色將應(yīng)用于整篇文檔。例：06.htm元素及元素屬性6元素中有下列元素屬性： (5)超級鏈接顏色link、vlink、alink分別控制普通超級鏈接、訪問過的超級鏈接、當(dāng)前活動超級鏈接顏色。例：07.htm元素及元素屬性7元素中有下列元素屬性： (6) l

7、eftmargin和topmargin設(shè)置網(wǎng)頁主體內(nèi)容距離網(wǎng)頁頂端和左端的距離如：leftmargin=20 topmargin=30“例：08.htm文字標簽屬性1文字屬性標記1.文字顏色 指定顏色 . #=RRGGBB 16 進制數(shù)碼例：09.htm文字標簽屬性2文字屬性標記2.文字字體 . #=客戶端可獲得的字體10.htm文字標簽屬性3文字屬性標記3.文字大小 . #=1, 2, 3, 4, 5, 6, 7 or +#, -#例：11.htm文字標簽屬性4文字屬性標記4.文字標題 . #=1, 2, 3, 4, 5, 6例：12.htm文字布局行的控制 段(Paragraph) (可以

8、看作是空行) 空白占位符例：13.htm文字布局行的控制 HTML的段落與段落之間有一定的空隔。如果不希望出現(xiàn)空隔而只想換行的話，就要用到另一個元素，即元素。元素可以使所在的位置出現(xiàn)換行。這種換行和瀏覽器的自動換行的效果類似。元素不是成對出現(xiàn)的。例：14.htm不換行 15.htmHTML文字與段落格式控制 傾斜文本 粗體文本 下劃線文本 刪除線文本 例：16.htm基本組成部分HTML注釋HTML文檔可以插入注釋。注釋內(nèi)容不會在瀏覽器窗口顯示HTML注釋的格式為：例：17.htm文字的對齊. (n=1,2,3,4,5,6) . (#=left, center, right)例：18.htm文

9、字的分區(qū)顯示 . (#=left, center, right) 3.HTML段落與分行控制居中 元素元素是一個獨立的使所標記的字符居中的元素。它的作用與使用元素里的align=“center”類似例如：居中段落3.HTML段落與分行控制標尺線：設(shè)定線寬 ：設(shè)定線長 ：設(shè)定對齊方式 #=left, right ：設(shè)定線的顏色例：19.htm3. HTML的段落與分行控制無序列表元素1列表在HTML的文檔里有重要的地位,HTML規(guī)定了多種列表元素。列表所起的主要作用是使特定的文本有序化。3. HTML的段落與分行控制無序列表元素2無序列表是由和元素定義的:sports food drink fr

10、iends 例：20.htm3. HTML的段落與分行控制無序列表元素3無序列表的默認符號是圓點。 元素有type屬性，通過定義不同的type屬性可以改變列表的項目符號。目前，type屬性的屬性值有：disc(圓)、circle（圓圈）、square（方塊）例：20.htm3. HTML的段落與分行控制有序列表元素1有序列表由和定義: sports drink friends例：20.htm3. HTML的段落與分行控制有序列表元素2元素也有自己的type屬性，type屬性的屬性值有1、A、a、I、i等。例如，我們以A、B、C作為列表的編號例： 20.htm元素還可以定義列表的起始編號，如我們

11、希望列表的第一個編號為5，而不是1，則需要定義元素的start屬性例：20.htm4.超級鏈接普通超級鏈接1超級鏈接是整個WWW應(yīng)用的核心和基礎(chǔ)。如果沒有超級鏈接的概念，那么，我們現(xiàn)在所有的WWW的應(yīng)用將不復(fù)存在。所以，對超級鏈接的掌握具有特殊重要的意義。4.超級鏈接普通超級鏈接2超級鏈接是用錨元素定義的 在元素下，有元素屬性href,href的屬性值為一個URL地址如：指向知了網(wǎng)的超級鏈接 如：普通超級鏈接例：21.htm4.超級鏈接E-mail超級鏈接 超級鏈接可以指向E-mail地址如：指向E-mail地址的超級鏈接例：21.htm4.超級鏈接新開鏈接窗口開一個新的(瀏覽器)窗口 (Ta

12、rget Window) . 例：21.htm4.超級鏈接去除下劃線去掉超級連接的下劃線：style=“text-decoration: none”例：21.htm4.超級鏈接其他超級鏈接 WWW應(yīng)用僅僅是Internet應(yīng)用的一種,Internet還有其他很多應(yīng)用，如：Ftp等。實際上mailto也屬于非WWW應(yīng)用。我們可以類似的創(chuàng)建指向Ftp等的超級鏈接;指向其他Internet應(yīng)用的超級鏈接不是我們掌握的重點。 4.超級鏈接錨點(書簽) 1 指向本頁面錨點aa的超級鏈接例：21.htm指向23頁面的錨點top的超級鏈接例：21.htm練習(xí)：標注出學(xué)校首頁的html靜態(tài)代碼HTML對圖片的

13、控制-1基本語法:引用圖片必須用元素標志。元素下的基本元素屬性是src屬性，src的屬性值為所引用的圖片的URL地址。src屬性是必須的。Src的URL可以是絕對地址，也可以是相對地址例：22.htmHTML對圖片的控制-2所謂圖片的替代文本，指圖片不能顯示時在圖片所在位置顯示的一段文本或當(dāng)鼠標移到圖片上時也會顯示替代文本。定義圖片替代文本的方法是：例：23.htmHTML對圖片的控制-3圖片的顯示大小我們可以指定一幅圖片在瀏覽器窗口里的顯示大小。定義圖片的顯示大小的方法是：width指定圖片的寬度，height指定高度。它們的屬性值可以是象素，也可以是%。 例：24.htmHTML對圖片的控

14、制-4圖片的邊框我們可以為一幅圖片加一個邊框以突出顯示： border的屬性值為象素數(shù)例：25.htmHTML對圖片的控制-5圖片的對齊方式圖片可以相對于頁面或單元格有一個對齊方式。定義水平對齊方式的方法是：例：26.htmHTML對圖片的控制-6圖片的對齊方式定義圖片的垂直對齊方式：對于圖片的對齊方式不僅是以上幾種，但是以上的幾種是最常用的。例：26.htmHTML對圖片的控制-7定義圖片與左、右的文本之間的間距圖片在顯示時，與左右的文本之間可以有一定的間距 Hspace(horizontal)定義水平間距； Vspace(vertical)定義垂直間距。單位都是象素數(shù).例：27.htmHT

15、ML對圖片的控制-8圖象的超級鏈接 圖象的超級鏈接是指整個圖象的超級鏈接，當(dāng)點擊圖象的任何部分時，都會打開這個超級鏈接。定義默認超級鏈接的方法是：所以，所謂超級鏈接實際上就是用元素標志一個圖象的引用;例：28.htm一月二月三月120010001500單元格（用來表示，每個單元格可以有背景顏色和背景圖片）表格（用來表示，表格可以有背景顏色、背景圖片）表格邊框每一行可以用來表示，單元格放在行中，每行可以有很多的單元格。表頭（用來表示，表頭是特殊的單元格，其中的文字加進去之后默認是居中并且加粗）表格(TABLE)標記-1 元素：定義一個表格。每一個表格只有一對和，一張頁面中可以有多個表格。元素：定

16、義表格的行，一個表格可以有多行，所以對于一個表格來說不是唯一的。元素：定義表格的一個單元格。每行可以有不同數(shù)量的單元格，在和之間是單元格的具體內(nèi)容。需要注意的是：上述的三個元素必須、而且只能夠配對使用。缺少任何一個元素，都無法定義出一個表格。表格(TABLE)標記-2表格的基本結(jié)構(gòu)定義表格定義表頭定義表行定義單元格表格(TABLE)標記-2練習(xí)嘗試寫出這個表格的代碼例:1.htmmondaytuesdaywednesdaythursdayfridaysaturdaysunday1ClassClassClassClass.2ClassClassClassClass.3ClassClassClas

17、sClass.4ClassClassClassClass.5ClassClassClassClass.6ClassClassClassClass.7ClassClassClassClass.8ClassClassclassClass.表格(TABLE)標記-3表格的屬性 1width屬性：指定表格或某一個表格單元格的寬度。單位可以是%或者象素。height屬性：指定表格或某一個表格單元格的高度。單位可以是%或者象素。border屬性：表格邊線粗細例02.html表格(TABLE)標記-2表格的屬性 14、bgcolor屬性：指定表格或某一個單元格的背景顏色。5、background屬性：指定表

18、格或某一個單元格的背景圖片。其屬性值為一個URL地址。例：03.htm表格(TABLE)標記-3表格的屬性 26、bordercolor屬性：指定表格或某一個單元格的邊框顏色。例：04.htm7、Bordercolorlight屬性：亮邊框的顏色8、Bordercolordark屬性：暗邊框的顏色例：05.htm表格(TABLE)標記-3表格的屬性 29、align屬性：指定表格或某一個單元格里的內(nèi)容（文本、圖片等）的對齊方式。例：06.htm表格(TABLE)標記-3表格的屬性 210、cellspacing屬性：單元格間距。例：06.htm11、cellpadding屬性：單元格邊距。例：

19、06.htm表格(TABLE)標記-4單元格屬性1、valign屬性：指定某一個單元格里的內(nèi)容（文本、圖片等）的垂直對齊方式。垂直對齊方式的屬性值包括：top：頂端對齊；middle：居中對齊；bottom：底端對齊;Baseline：相對于基線對齊;例：07.htm表格(TABLE)標記-5單元格屬性2、Colspan：屬性值表示當(dāng)前單元格跨越幾列例：8.htm3、Rowspan：屬性值表示當(dāng)前單元格跨越幾行例：8.htm表格進階表格的嵌套在 之間插入表格，實現(xiàn)表格嵌套例：9.htm表格的作用一般只是控制文本和圖像的顯示，而不顯示表格的邊框綜合案例表格的綜合使用 利用表格做一張你的課程表 做

20、一張最近來訪的表格表單(FORM)標記HTML表單是HTML頁面與瀏覽器端實現(xiàn)交互的重要手段。利用表單可以收集客戶端提交的有關(guān)信息。在HTML里，我們可以定義表單，并且使表單與CGI或ASP等服務(wù)器端的表單處理程序配合。我們在網(wǎng)頁設(shè)計課程中不會涉及程序編制。表單(FORM)標記表單是網(wǎng)頁上的一個特定區(qū)域。這個區(qū)域是由一對元素定義的。 元素action屬性：用來定義表單處理程序（一個ASP、CGI等程序）的位置(相對地址或絕對地址)。Method定義表單結(jié)果從瀏覽器傳送到服務(wù)器的方法，一般有兩種方法：get、post。表單(FORM)標記表單是網(wǎng)頁上的一個特定區(qū)域。這個區(qū)域是由一對元素定義的。

21、元素enctype屬性：規(guī)定了用表單傳遞信息時的編碼格式，有application/x-www-form-urlencoded和multiport/form-data兩種選擇，前者是默認值，后者一般在表單需要提交文件信息的情況下使用表單(FORM)標記表單的基本語法:. * =GET有數(shù)據(jù)量限制，POST無以上限制,以文件形式傳輸表單(FORM)標記例：輸入以下代碼，定義一個基本菜單，并以E-mail方式實現(xiàn)提交表單(FORM)標記Input元素 input元素是與輸入相關(guān)的元素，它是一個空元素，因此在其末尾必須添加斜杠“/”。Input元素有一個重要的屬性type,該屬性決定了input的元

22、素類型表單(FORM)標記（1）文本框，type=“text”,用于控制用戶僅輸入一行文本 size：控制輸入文本框所顯示的長度，單位為字符 maxlength：控制允許最大輸入的字符長度，單位為字符 name：通過表單傳遞出去的變量的名稱 value：即變量的值，是在表單提交的瞬間，在該輸入框內(nèi)的字符串（如果在input元素中定義該屬性，則表示設(shè)定了輸入框的初始值） 11.htm表單(FORM)標記（2）密碼框，type=“password”，用戶輸入時所顯示的密碼是屏蔽號 11.htm（3）隱藏條目，type=“hidden”，用于輸入框不見，但仍然有name和value屬性，一般用于不需

23、要用戶填寫或選擇，變量值已知，又需要將變量發(fā)送出去的情況 11.htm表單(FORM)標記（4）復(fù)選框，type=“checkbox”，一般由若干個復(fù)選項組成，改組input元素擁有相同的name屬性值，而value值不同。當(dāng)表單提交后，變量將成為一個數(shù)組，且數(shù)組中包含選中復(fù)選框的value值。Checked=“checked”表示默認將該復(fù)選框選中 11.htm（5）單選按鈕，type=“radio”，與復(fù)選框類似只能選一個 11.htm表單(FORM)標記（6）提交按鈕，type=“submit” 按下該按鈕時，表單向form中action屬性所定義的地址發(fā)送表單變量 11.htm（7）重

24、置按鈕，type=“reset”按下該按鈕時，表單中所有的內(nèi)容將被清空 11.htm表單(FORM)標記（8）自定義按鈕，type=“button”該按鈕沒有預(yù)定義的功能，但可以用onclick事件調(diào)用自己編寫的js函數(shù)，name和value屬性可參照提交按鈕 （9）圖像按鈕，type=“image”，該按鈕與自定義按鈕基本相同，但用圖片方式來顯示。eg.表單(FORM)標記（10）文件域，type=“file”。使用該屬性必須將form的enctype屬性設(shè)置為multipart/form-data. 該按鈕幫助用戶選擇一個存儲在本地計算機上的文件，在提交表單時會將所選中文件發(fā)送給服務(wù)器，其

25、屬性與文本框基本一致 11.html表單(FORM)標記select元素 用于 創(chuàng)建一個下拉菜單或選項表。它是一個非空元素，內(nèi)容必須包含在和之間。具有一個name屬性，其屬性值定義了要提交變量的名稱.（1）無size屬性時；下拉菜單（2）size=“1”且沒有multiple屬性（表示允許多選）；下拉菜單（3）size“1”或有multiple屬性；滾動菜單 12.html表單(FORM)標記Textarea元素創(chuàng)建多行的，可滾動的文本輸入框。非空元素，內(nèi)容必須包含在和之間Cols、rows屬性：制定文本框的列數(shù)、行數(shù)，單位為字符Name屬性：定義變量的名稱Wrap屬性:確定所提交的信息是否包

26、含換行，按其默認值（文本不換行）提交表單(FORM)標記綜合練習(xí)（*）13.html插入外部資源1.插入音樂embed src=“音樂地址” 插入音樂autostart=true（false） 是否在音樂傳送完自動播放 loop=true(無限次)，false（1次），3（3次） 音樂重復(fù)次數(shù)Width=寬度；height=高度 設(shè)定播放器面板大小，均為0則可把播放器隱藏volume=0100 設(shè)定音量大小Hidden=true 隱藏控制面板Starttime=“分：秒” 設(shè)定歌曲開始播放的時間插入外部資源Align=“center”(top,bottom,center,baseline,left,right,texttop,middle,absmid