HTML語言與網(wǎng)頁設計課件_第1頁
HTML語言與網(wǎng)頁設計課件_第2頁
HTML語言與網(wǎng)頁設計課件_第3頁
HTML語言與網(wǎng)頁設計課件_第4頁
HTML語言與網(wǎng)頁設計課件_第5頁
已閱讀5頁，還剩196頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

HTML語言與網(wǎng)頁設計——HTML基礎(chǔ)什么是HTML萬維網(wǎng)Web頁面HTML萬維網(wǎng)萬維網(wǎng)是一個大規(guī)模的在線（on-line）信息集合，可以通過一種叫做瀏覽器（browser）的應用程序進行檢索與查看。WebWeb是一個支持交互式訪問的分布式超媒體系統(tǒng)。不論是在超文本系統(tǒng)還是在超媒體系統(tǒng)，信息都是以文檔集的形式存貯的。在文檔中除了包括基本信息以外，還可以包括指向文檔集中其他文檔的指針。例如，圖頁面Web上的一個超媒體文檔稱為一個頁面（Page）；作為一個組織或個人在WWW（或其他Web）上開始點的頁面稱為主頁（Homepage）；頁面在邏輯上可視為一個整體的一系列頁面的有機集合稱為網(wǎng)站（WebSite或Site）。HTMLHTML(HypertextMarkupLanguage)是一種規(guī)范，一種標準，它通過標記符（tag）來標記要顯示的網(wǎng)頁的各個部分。HTML通過在網(wǎng)頁中添加標記符，可以告訴瀏覽器如何顯示網(wǎng)頁，即確定內(nèi)容的格式。瀏覽器按順序閱讀網(wǎng)頁文件（HTML文件），然后根據(jù)內(nèi)容周圍的HTML標記符解釋和顯示各種內(nèi)容。演示——HTML的基本原理標記符基礎(chǔ)概述屬性概述在HTML中，所有的標記符都用尖括號括起來。HTML標記符是不區(qū)分大小寫的。概述某些標記符，例如換行標記符<BR>，只要求單一標記符號。但絕大多數(shù)標記符都是成對出現(xiàn)的，包括開始標記符和結(jié)束標記符。開始標記符和相應的結(jié)束標記符定義了標記符所影響的范圍。屬性屬性是用來描述對象特征的特性。例如，一個人的身高、體重就是人這個對象的屬性。在HTML中，所有的屬性都放置在開始標記符的尖括號里，通常也不區(qū)分大小寫。屬性例如，可以用字體標記符和字號屬性指定文字的大小。<FONTSIZE=1>本行字將以較小字體顯示。</FONT>演示——屬性的作用Web頁的基本結(jié)構(gòu)概述HTML標記符HEAD標記符BODY標記符小節(jié)概述一個Web頁實際上對應于一個HTML文件，HTML文件以.htm或.html為擴展名。最基本的HTML文檔包括：HTML標記<HTML></HTML>、首部標記<HEAD>和</HEAD>、以及正文<BODY></BODY>。HTML標記符<HTML>和</HTML>是Web頁的第一個和最后一個標記符，Web頁的其他所有內(nèi)容都位于這兩個標記符之間。這兩個標記告訴瀏覽器或其他閱讀該頁的程序，此文件為一個Web頁。HEAD標記符首部標記<HEAD>和</HEAD>位于Web頁的開頭，其中不包括Web頁的任何實際內(nèi)容，而是提供一些與Web頁有關(guān)的特定信息。HEAD標記符首部標記中的內(nèi)容也用相應的標記符括起來。例如，樣式表（CSS）定義位于<STYLE>和</STYLE>之間；腳本定義位于<SCRIPT></SCRIPT>之間。TITLE標記符在首部標記符中，最基本、最常用的標記符是標題標記<TITLE>和</TITLE>，用于定義網(wǎng)頁的標題。當網(wǎng)頁在瀏覽器中顯示時，網(wǎng)頁標題將在瀏覽器窗口的標題欄中顯示。演示——TITLE的作用BODY標記符正文標記符<BODY>和</BODY>包含Web頁的內(nèi)容。文字、圖形、鏈接以及其他HTML元素都位于該標記符內(nèi)。BODY標記符正文標記符中的文字，如果沒有其他標記符修飾，則將以無格式的形式顯示。注意：空格、回車這些格式控制在顯示時都不起作用，如要使它們起作用，應使用預格式化元素<PRE>和</PRE>演示——BODY標記符中的內(nèi)容無格式小節(jié)綜上所述，一個不包含任何內(nèi)容的基本W(wǎng)eb頁文件如下所示：<HTML><HEAD><TITLE></TITLE></HEAD><BODY></BODY></HTML>添加注釋不論是編寫程序還是制作網(wǎng)頁，為所做的工作添加注釋都是一種良好的工作習慣。實際上，添加注釋是任何開發(fā)工作必須遵循的規(guī)范之一。添加注釋HTML的注釋由開始標記符<!--和結(jié)束標記符-->構(gòu)成。這兩個標記符之間的任何內(nèi)容都將被瀏覽器解釋為注釋，而不在瀏覽器中顯示。演示——添加注釋顯示特殊字符如果用戶需要在網(wǎng)頁中顯示某些特殊字符，例如：<（小于號）、>（大于號）、”（引號）等，則需使用參考字符來表示，而不能直接輸入。參考字符以“&”號開始，以“；”結(jié)束，既可以使用數(shù)字代碼，也可以使用代碼名稱。顯示特殊字符例如，要在Web頁中顯示以下內(nèi)容，則需使用參考字符：“1+1>2”<BODY>1+1>2</BODY>演示——特殊字符的顯示頁面背景與顏色控制(1)頁面背景背景顏色背景圖案(2)字符和鏈接的顏色背景顏色在<BODY>標記符中使用BGCOLOR屬性可以為網(wǎng)頁設置背景顏色。在HTML中，除了使用顏色名稱以外，還可以用格式#RRGGBB來表示顏色。演示——設置網(wǎng)頁背景顏色背景圖案使用BODY標記符的BACKGROUND屬性可以設置背景圖案。HTML語句為：<BODYBACKGROUND=“image.gif”>演示——設置網(wǎng)頁背景圖案字符和鏈接的顏色設置正文和鏈接顏色時，可以使用BODY標記符的TEXT、LINK、VLINK和ALINK屬性。字符和鏈接的顏色其中，TEXT屬性用于設置正文的顏色；LINK屬性用于設置未被訪問的鏈接的顏色；VLINK用于設置已被訪問過的鏈接的顏色；ALINK用于設置活動鏈接（即當前選定的鏈接）的顏色。演示——設置網(wǎng)頁背景聲音在HEAD中添加：<BGSOUNDsrc=“soundfileURL”>總結(jié)Web是一個支持交互式訪問的分布式超媒體系統(tǒng)。

Web上的一個超媒體文檔稱為一個頁面（Page）。

總結(jié)HTML是用來表示W(wǎng)eb文檔的規(guī)范，它使用標記符確定Web頁內(nèi)容顯示的格式。最基本的HTML標記符是<HTML></HTML><HEAD></HEAD><BODY></BODY>?？偨Y(jié)HTML的注釋由標記符<!--和-->構(gòu)成。在Web頁中顯示特殊字符需用參考字符。

字符格式（1）物理字符樣式常用物理字符樣式FONT標記符字符格式（2）邏輯字符樣式標題樣式其他邏輯字符樣式常用物理字符樣式常用的設置物理字符樣式的標記符有：黑體標記<B></B>、斜體標記<I></I>、下劃線標記<U></U>等。演示——物理字符樣式效果FONT標記符<FONT>標記符具有3個常用的屬性：SIZE、COLOR和FACE。FONT標記符字號屬性的值可以從1到7，3是默認值。該屬性值也可以用+號或-號來作為相對值指定。FONT標記符例如，如果用戶想讓ShoppingBasket一詞的字母全部大寫，并希望每一個字母比其他字母大一號，可使用HTML代碼如下：<FONTSIZE=+1>S</FONT>HOPPING<FONTSIZE=+1>B</FONT>ASKETFONT標記符要想讓每個詞的首字母為默認字號，并且其他字母小兩號，則HTML：S<FONTSIZE=-2>HOPPING</FONT>B<FONTSIZE=-2>ASKET</FONT>BASEFONT標記符使用標記符<BASEFONT>可以更改默認的字號屬性，方法為：在需要更改默認字號屬性的位置之前添加語句<BASEFONTSIZE=n>，其中n是1到7的整數(shù)。演示——<FONTsize=“”>FONT標記符COLOR屬性字體標記符的COLOR屬性可用來控制文字的顏色，它的使用方法與正文標記符<BODY>中使用的BGCOLOR屬性相同。演示——<FONTcolor=“”>FONT標記符FACE屬性FACE屬性用來指定字體樣式。在編制網(wǎng)頁時，通過在<FONT>標記符中指定<FACE>屬性，用戶可以指定一個或幾個字體名稱（用逗號隔開）。演示——<FONTface=“”>標題樣式在HTML中，用戶可以通過<Hn>標記符來標識文檔中的標題和副標題，其中n是1至6的數(shù)字；<H1>表示最大的標題，<H6>表示最小的標題。使用標題樣式時，必須使用結(jié)束標記符。演示——標題效果其他邏輯字符樣式其他邏輯字符樣式如<ADDRESS></ADDRESS><CODE></CODE><CITE></CITE>等,表如書中所示。注意：在使用<CODE>等標記時，不要忘記將特殊字符轉(zhuǎn)換為參考字符。演示——邏輯字符樣式效果段落格式（1）分段與換行分段標記符換行標記符添加水平線段落格式（2）段落對齊DIV標記符ALIGN屬性CENTER標記符分段標記符分段標記符用于將文檔劃分為段落，標記為<P></P>，其中結(jié)束標記符通?？墒÷?。換行標記符換行標記符用于在文檔中強制斷行，標記為一個單獨的<BR>。該標記與分段標記符<P>是有區(qū)別的。演示——P與BR添加水平線添加水平線的標記符為<HR>，它包括SIZE、WIDTH、NOSHADE等屬性。SIZE屬性用來改變水平線的粗細程度。WIDTH屬性用來更改水平線的長度。NOSHADE屬性用來使水平線以實線顯示。添加水平線COLOL屬性在MicrosoftInternetExplorer3及更高版本中，通過在<HR>中設置COLOR屬性可以控制水平線的顏色。演示——水平線效果DIV標記符DIV標記符用于為文檔分節(jié)，以便為文檔的不同部分應用不同的段落格式，其標記為<DIV></DIV>。位于DIV標記符中的多段文本將被認為是一個節(jié)，可為它們設置一致的對齊格式。ALIGN屬性ALIGN屬性用于設置段落的對齊格式，其值包括：RIGHT（右對齊）、LEFT（左對齊）、CENTER（居中對齊）和JUSTIFY（兩端對齊）。ALIGN屬性可應用于多種標記符，最典型的是應用于DIV、P、Hn（標題標記符）、HR等標記符。CENTER標記符如果用戶要將文檔內(nèi)容居中，還可使用CENTER標記符，方法為：將需居中的內(nèi)容置于<CENTER>和</CENTER>之間。演示——段落對齊格式嵌套（1）如果所設置的格式是相容的，則取格式疊加的效果。（2）如果所設置的格式是沖突的，則取最近樣式符的修飾效果。演示——格式嵌套列表格式（1）有序列表OL和LI標記符有序列表的嵌套（2）無序列表（3）定義列表有序列表有序列表（Orderedlist）也稱數(shù)字式列表，它是一種在表的各項前顯示有數(shù)字或字母的縮排列表。有序列表定義有序列表需要使用有序列表標記符<OL></OL>和列表項（Listitem）標記符<LI></<LI>（結(jié)束標記符可省略），語法如下：<OL><LI>Listitem1<LI>Listitem2</OL>演示——有序列表有序列表OL標記符具有兩個常用的屬性：TYPE和START，分別用來設置數(shù)字序列樣式和數(shù)字序列起始值。START屬性的值可以是任意整數(shù)，TYPE屬性的值如書中表所示。演示——有序列表的數(shù)字樣式有序列表當位于OL標記符內(nèi)時，LI標記具有兩個常用的屬性：TYPE和VALUE。TYPE屬性用于設置數(shù)字樣式，取值與OL的TYPE屬性相同；VALUE屬性用于指定一個新的數(shù)字序列起始值，以獲得非連續(xù)性的數(shù)字序列。有序列表的嵌套演示——有序列表的嵌套無序列表無序列表（Unorderedlist）也稱強調(diào)式列表，它是一種在表的各項前顯示有特殊項目符號的縮排列表。無序列表定義無序列表需使用無序列表標記符<UL></UL>和列表項標記符<LI></LI>。與OL標記符類似，UL標記符也包含一個常用的TYPE屬性，用于控制列表項前特殊符號的顯示。同時，無序列表中的LI標記符也具有相同的TYPE屬性。無序列表注意：在InternetExplorer中，TYPE的值是區(qū)分大小寫的。與有序列表類似，無序列表也可以嵌套。另外，有序列表和無序列表也可互相嵌套。演示——無序列表定義列表定義列表（Definitionlist）用于定義術(shù)語，它是一種在表的各項前沒有任何數(shù)字和符號的縮排列表。定義列表創(chuàng)建定義列表應使用定義列表標記符DL、定義術(shù)語（Definitionterm）標記符DT和定義描述（DD）標記符。DL標記符必須有結(jié)束標記，但DT和DD標記符的結(jié)束標記可以省略。演示——定義列表總結(jié)使用物理字符樣式可通過標記符為某些文字設置特殊格式，例如黑體、斜體等。FONT標記符的SIZE、COLOR和FACE屬性分別用于設置文字的字號、顏色和字體?？偨Y(jié)邏輯字符樣式可為文檔中具有特殊含義的內(nèi)容指定格式，最常用的是標題樣式Hn。P標記符用于分段；BR標記符用于換行；HR標記符用于添加水平線?？偨Y(jié)DIV標記符可用于為文檔分節(jié)，ALIGN屬性用于設置段落對齊使用OL和LI標記符可創(chuàng)建有序列表。目錄常用圖像格式常用圖像處理軟件在網(wǎng)頁中插入圖像使用動畫gifFireworks演示常用圖像格式常用的網(wǎng)頁圖像格式包括：GIFJPEGPNG矢量格式GIFGIF（GraphicsInterchangeFormat，圖形交換格式）格式的特點：無損壓縮最多256色能夠使用透明色交錯式Gif（interlacedgif）動畫Gif演示——透明GIF效果JPEGJPEG（JointPhotographicExpertGroup，聯(lián)合圖形專家組）格式的特點：有損壓縮沒有顏色限制可以控制壓縮比漸進式JPEG演示——不同質(zhì)量的JPEGPNGPNG（PortableNetworkGraphics，可移植的網(wǎng)絡圖形）格式的特點：無損壓縮沒有顏色限制支持透明度矢量格式矢量格式的特點：文件較小矢量動畫演示——Flash動畫的效果常用圖像處理軟件Windows畫圖PhotoShopPaintShopProPhotoDrawFireworksFlashFreehand在網(wǎng)頁中插入圖像IMG標記符SRC和ALT屬性WIDTH和HEIGHT屬性BORDER屬性HSPACE和VSPACE屬性演示——插入圖像演示——width和height屬性演示——hspace和vspace屬性使用動畫gif什么是動畫gif在網(wǎng)頁中插入動畫gif演示——動畫gif目錄超鏈接基礎(chǔ)創(chuàng)建超鏈接客戶端圖象映射超鏈接基礎(chǔ)URL（UniversalResourcesLocator）用于定位Web上的文檔信息。一個URL包括3部分：協(xié)議、計算機地址、文件路徑。協(xié)議：//計算機/文件路徑域名與IP地址超鏈接基礎(chǔ)絕對URL是指資源的完整地址，包括URL的所有3個部分，即：協(xié)議：//計算機/文檔名超鏈接基礎(chǔ)相對URL是指Internet上資源相對于當前頁面的地址，它包含從當前頁面指向目標頁面位置的路徑。使用相對URL的好處：易于維護不同類型的超鏈接

內(nèi)部網(wǎng)頁超鏈接外部網(wǎng)頁超鏈接頁面內(nèi)的超鏈接文件下載超鏈接

Email超鏈接創(chuàng)建超鏈接A標記符用于創(chuàng)建超鏈接（結(jié)束標記符不能省略），href屬性用于指定超鏈接的目標。創(chuàng)建超鏈接內(nèi)部網(wǎng)頁超鏈接：<ahref=test.htm>link</a>

外部網(wǎng)頁超鏈接：<ahref=>link</a>演示——超鏈接效果創(chuàng)建超鏈接——錨點鏈接

使用頁面內(nèi)的超鏈接，首先需要定義錨點，然后在超鏈接中指向該錨點。定義錨點應使用<aname=xxx></a>

指向錨點的超鏈接為：<ahref=#錨點名稱>link</a>創(chuàng)建超鏈接——錨點鏈接指向其他頁面內(nèi)錨點的超鏈接：<ahref=文件#該文件中的錨點>link</a>演示——錨點超鏈接效果創(chuàng)建超鏈接——文件下載

當我們的超鏈接目標為瀏覽器不能識別的格式時，那么就自動生成了文件下載鏈接。<ahref=xxx.zip>下載</a>演示——文件下載效果創(chuàng)建超鏈接——Email鏈接<ahref=mailto:someone@>Email</a><ahref=mailto:someone@?subject=“網(wǎng)站建議”>Email</a>演示——Email鏈接效果演示——圖像鏈接效果客戶端圖象映射

什么是客戶端圖象映射客戶端圖象映射的使用（1）定義映射圖（2）使用映射圖客戶端圖象映射定義映射圖：<map>標記符和<area>標記符使用映射圖：<imgusemap=#映射圖名稱>AREA標記符Shape屬性（rect、circle、poly）Coords屬性Href屬性目錄

表格的組成表格的構(gòu)造表格的屬性設置表格的應用表格的組成

表格標記符table

表格標題caption

表格行tr（tablerow）表格數(shù)據(jù)td（tabledata）表格表頭td（tableheading）演示——表格示例表格的構(gòu)造rowspan進行行合并

colspan進行列合并演示——表格的行列合并

表格的屬性設置邊框與分隔線表格對齊控制單元格空白邊框與分隔線Frame屬性Rules屬性Border屬性表格對齊表格的頁面對齊<tablealign>表格內(nèi)容的對齊水平對齊(align)垂直對齊(valign)演示——表格的對齊控制單元格空白Cellspacing屬性Cellpadding屬性演示——控制單元格空白表格的應用

頁面布局劃分頁面區(qū)域背景色的設置嵌套表格特殊排版效果——表格細線的實現(xiàn)演示——劃分頁面區(qū)域演示——背景色的設置演示——使用嵌套表格表格的應用

<tableborder="0"cellspacing="1"bgcolor=black><trbgcolor=white><td>ddd<trbgcolor=white><td>ddd</table>目錄

什么是框架框架結(jié)構(gòu)框架的初始化設置目標框架使用頁內(nèi)框架什么是框架

在同一個瀏覽器窗口中同時顯示多個網(wǎng)頁的交互式結(jié)構(gòu)。演示——框架示例框架結(jié)構(gòu)

框架集定義框架的結(jié)構(gòu)<frameset></frameset>

框架具體定義每個頁面<frame>

框架結(jié)構(gòu)

框架集的定義Rows定義行結(jié)構(gòu)框架Cols定義列結(jié)構(gòu)框架

框架結(jié)構(gòu)

Rows和cols的取值：像素數(shù)%N*嵌套框架演示——定義框架結(jié)構(gòu)

框架的初始化

在frame標記符中使用src屬性可以指定框架中最初顯示的頁面。演示——指定框架頁面設置目標框架指定框架名稱特殊的框架名稱_blank_top

在超鏈接標記符A中指定target屬性，取值為具體的框架名稱。演示——指定目標框架使用頁內(nèi)框架

用iframe標記符可以設置頁內(nèi)框架<iframesrc=“”>不支持框架時顯示的內(nèi)容</iframe>

也可以指定頁內(nèi)框架為目標框架目錄什么是表單FORM標記符生成表單控件表單控件的標簽各種特殊對象什么是表單表單是用于實現(xiàn)網(wǎng)頁瀏覽者與服務器之間信息交互的一種頁面元素，它由表單控件和一般內(nèi)容組成。例如：注冊表單登錄表單FORM標記符FORM標記符用于包含所有表單內(nèi)容FORM標記符Action屬性服務器端腳本程序（ASP、JSP、PHP、Perl等）mailto:mailbox@FORM標記符Method屬性（get、post）Enctype屬性表單控件的類型文本框復選框單選框按鈕選項菜單……文本框

單行文本框<inputtype=“text”size=“”>口令框<inputtype=“password”size=“”>演示——文本框示例復選框和單選框

復選框<inputtype=“checkbox”checked>單選框<inputtype=“radio”name=“”checked>注意：單選框name屬性相同者為一組！演示——復選框與單選框按鈕提交按鈕<inputtype=“submit”><inputtype=“image”>重置按鈕<inputtype=“reset”>自定義按鈕<inputtype=“button”>演示——不同的按鈕效果選項菜單SELECT標記符Size屬性Multiple屬性OPTION標記符演示——選項菜單設置表單控件的標簽<LABELfor=“controlID”>標簽文本</LABEL><INPUTid=“controlID”>演示——設置表單控件的標簽其他特殊對象

多媒體對象Javaapplet（小應用程序）滾動字幕多媒體對象OBJECT標記符和PARAM標記符Flash對象Shock對象演示——多媒體對象JavaappletAPPLET標記符Java特效工具——Anfy演示——Javaapplet效果滾動字幕MARQUEE標記符Width和height屬性Behavior屬性Scrollamount屬性……目錄什么是CSS在網(wǎng)頁中使用CSSCSS樣式定義CSS屬性什么是CSSCSS（CascadingStyleSheet，層疊樣式表）是一種格式化網(wǎng)頁的標準方式，它擴展了HTML的功能，使網(wǎng)頁設計者能夠以更有效的方式設置網(wǎng)頁格式。演示——層疊樣式表示例在網(wǎng)頁中使用CSSHTML標記符的style屬性<Pstyle=“text-align:center”>在網(wǎng)頁中使用CSSSTYLE標記符<STYLE>樣式定義</STYLE>在網(wǎng)頁中使用CSSLINK標記符<LINKrel=“

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論