附加2HTML網(wǎng)頁制作技術(shù).ppt

前言介紹,授課安排： 1、HTML基本常識介紹 2、簡單例程編寫實(shí)踐操作 3、深入探討和研究 在本教程中，你將學(xué)習(xí)如何使用 HTML 來創(chuàng)建站點(diǎn)。 HTML 很容易學(xué)習(xí)！你會(huì)喜歡它的！,第二章 HTML網(wǎng)頁制作,本章目標(biāo),了解HTML基本概念 了解HTTP協(xié)議 了解Web站點(diǎn)發(fā)布原理 掌握HTML基本詞法結(jié)構(gòu) 熟練HTML常用詞法,本章內(nèi)容,2.5 HTML標(biāo)記,2.4 HTML文檔的基本結(jié)構(gòu),2.3 HTML詞法類型,2.2 HTML發(fā)布過程,2.1 HTML基本概述及其特點(diǎn),2.1 HTML基本概述及其特點(diǎn),超文本標(biāo)記語言HTML（Hyper Text Markup Language） 一個(gè)HTML文檔包含兩部分內(nèi)容：文檔本身要描述的內(nèi)容和描述內(nèi)容的HTML標(biāo)記。 HTML文檔具有以下特點(diǎn) 結(jié)構(gòu)化 超文本 與平臺無關(guān) 簡單，易維護(hù),2.2 HTML發(fā)布過程,Web服務(wù)器發(fā)布網(wǎng)頁時(shí)使用的主要協(xié)議是HTTP協(xié)議 一個(gè)完整的HTTP事務(wù)由四步組成 客戶與服務(wù)器建立TCP連接 客戶向服務(wù)器發(fā)送請求 如果請求被接受，服務(wù)器就向客戶發(fā)送響應(yīng)信息，其中包括狀態(tài)碼和所要的文件 客戶與服務(wù)器關(guān)閉連接,2.3 HTML詞法類型,HTML標(biāo)記的語法是 標(biāo)記在表示HTML文檔內(nèi)容結(jié)構(gòu)和含義的時(shí)候，通常有兩種方式，我們分別稱單標(biāo)記和雙標(biāo)記。,2.4 HTML文檔的基本結(jié)構(gòu),HTML結(jié)構(gòu)如下所示,2.5 HTML標(biāo)記,本節(jié)將要介紹HTML中常用的標(biāo)識，雖然比較簡單，但是還是需要反復(fù)練習(xí)，達(dá)到熟練的程度，為后面的學(xué)習(xí)打好基礎(chǔ),2.5.1 標(biāo)題字體,2.5.2 文章字體,常用的顏色名稱有：black（黑）,white（白）,red（紅）,green（綠）,blue（藍(lán)）,yellow（黃）,aqua（淺綠）,fuchsia（紫紅）,gray（灰）,Lime（黃綠）,maroon（栗色）,purple（紫）,olive（橄欖）,silver（銀色）,2.5.3 物理字體,2.5.3 物理字體（續(xù)）,2.5.5 字符實(shí)體,在往HTML文檔中寫入特殊字符，如“”、“”、“&”、“ ”等要使用特殊的代碼，瀏覽器會(huì)用HTML命令對這些特殊代碼進(jìn)行翻譯。往網(wǎng)頁中輸入特殊字符，需在HTML代碼中加入以&開頭的字母組合或以&#開頭的數(shù)字。常見的如：,2.5.6 文字對齊,2.5.7 文字移動(dòng),文字移動(dòng)方向的設(shè)置 文字移動(dòng)方式的設(shè)置 文字移動(dòng)循環(huán)的設(shè)置 文字移動(dòng)速度與延時(shí)的設(shè)置 文字移動(dòng)底色的設(shè)置 文字移動(dòng)面積的設(shè)置,2.5.7 文字移動(dòng)（續(xù)）,direction屬性決定了文字的移動(dòng)方向：,2.5.7 文字移動(dòng)（續(xù)）,behavior屬性決定了文字的移動(dòng)方式：,2.5.7 文字移動(dòng)（續(xù)）,loop屬性決定了文字的移動(dòng)次數(shù)：,2.5.7 文字移動(dòng)（續(xù)）,scrollamount屬性決定了文字的移動(dòng)速度：,2.5.7 文字移動(dòng)（續(xù)）,scrolldelay屬性決定了將中間的字體循環(huán)移動(dòng)的延時(shí),2.5.7 文字移動(dòng)（續(xù)）,height 、 width和bgcolor屬性分別控制了文字移動(dòng)面積的高度、寬度和背景顏色。,2.5.8 文字中行的控制,2.5.9 列表,HTML通常常用的有三種類型的列表（list），分別是無序列表，有序列表，定義列表。各種列表單元的HTML代碼具有相同的結(jié)構(gòu)：首先是起始標(biāo)記，定義了整個(gè)列表的開始，同時(shí)定義這個(gè)列表的屬性；然后在其中定義每一個(gè)選項(xiàng)；最后是列表的結(jié)束標(biāo)記 列表項(xiàng)中不僅可以含有文本，而且可以含有除標(biāo)題以外的其他字塊，包括其他列表和列表單元，因此，列表單元允許嵌套,2.5.9 列表標(biāo)簽,列表標(biāo)簽,2.5.9 列表（續(xù)）,無序列表：,2.5.9 列表（續(xù)）,2.5.9 列表（續(xù)）,有序列表：,2.5.9 列表（續(xù)）,定義列表：,2.5.10 預(yù)格式化,2.5.11 鏈接,超鏈接是WWW的基礎(chǔ)，也是其核心。單擊這些鏈接，讀者就能從當(dāng)前Web頁的當(dāng)前位置跳轉(zhuǎn)到當(dāng)前Web頁的另一處地方，或者進(jìn)入另外一個(gè)Web網(wǎng)頁。事實(shí)上，這些鏈接能把用戶帶到Internet的任何一個(gè)部分,2.5.11 鏈接（續(xù)）, 標(biāo)簽定義和用法 標(biāo)簽可定義錨。錨 (anchor) 有兩種用法： 通過使用 href 屬性，創(chuàng)建指向另外一個(gè)文檔的鏈接（或超鏈接） 通過使用 name 或 id 屬性，創(chuàng)建一個(gè)文檔內(nèi)部的書簽（也就是說，可以創(chuàng)建指向文檔片段的鏈接） 元素最重要的屬性是 href 屬性，它指定鏈接的目標(biāo)。,2.5.11 鏈接（續(xù)）,相對地址：描述了從一個(gè)頁面到另一個(gè)頁面的路徑，而不是Internet的完整地址 絕對地址：描述的不是兩個(gè)文件相對的路徑關(guān)系，它描述的是兩個(gè)文件相對于根的關(guān)系 物理地址：是使用文件存放在硬盤上的位置的路徑來描述文件的方式,2.5.12 加入圖片,大多數(shù)的瀏覽器都支持兩種圖形格式：GIF（圖形互換格式Graphics Interchange Format）和JPEG（聯(lián)合圖像專家組Joint Photographic Experts Group）,2.5.12 加入圖片,2.5.13 水平線,2.5.14 表格,表格是指按一定順序?qū)⑽谋炯皥D形按照一定方式進(jìn)行排列。是組織數(shù)據(jù)的一種十分有效的方式。將信息以表格的形式組織起來，可使大量的信息更容易瀏覽，故表格是表達(dá)信息的重要手段 表格中由行和列分隔成的格子稱為表元（cell）,是矩形區(qū)域，它可以包含文本，圖像和HTML標(biāo)記。用以分隔表元的行列線則稱為表格的邊框線（border）,表元的內(nèi)容分成兩類，一類是表頭，一類是表數(shù)據(jù),2.5.14 表格,2.5.14 表格（續(xù)）,表格的定義,2.5.14 表格（續(xù)）,標(biāo)題的定義,2.5.14 表格（續(xù)）,表行定義,2.5.14 表格（續(xù)）,表頭定義,2.5.14 表格（續(xù)）,表單元定義,2.5.15 表單,表單定義,2.5.15 表單（續(xù)）,表單域定義：輸入項(xiàng),type可以是文本text、口令password、復(fù)選框checkbox、單選框radio、隱藏表單hidden、提交表單submit和復(fù)位鍵reset。,2.5.15 表單（續(xù)）,表單域定義：選擇列表,2.5.15 表單（續(xù)）,表單域定義：選擇列表項(xiàng),2.5.15 表單（續(xù)）,表單域定義：文本域,2.5.16 幀集和幀,有時(shí)我們需要在瀏覽窗口中同時(shí)顯示多個(gè)頁面，即將整個(gè)瀏覽的頁面劃分為多個(gè)獨(dú)立的窗口，每個(gè)窗口就稱為一幀，這些窗口的集合就成為幀集,2.5.16 幀集和幀,重要提示： 不能將 標(biāo)簽與 標(biāo)簽同時(shí)使用！不過，假如你添加包含一段文本的 標(biāo)簽，就必須將這段文字嵌套于 標(biāo)簽內(nèi)