靜態(tài)網(wǎng)頁設計與語言_第1頁
靜態(tài)網(wǎng)頁設計與語言_第2頁
靜態(tài)網(wǎng)頁設計與語言_第3頁
靜態(tài)網(wǎng)頁設計與語言_第4頁
靜態(tài)網(wǎng)頁設計與語言_第5頁
已閱讀5頁，還剩123頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

靜態(tài)網(wǎng)頁設計與語言第1頁，共128頁，2023年，2月20日，星期二3月14號復習HTTP協(xié)議是基于什么范式的？HTTP響應狀態(tài)字4XX和5XX分別表示什么？網(wǎng)頁按照內(nèi)容來分通常分為哪三種？網(wǎng)頁上通常包含哪些元素？表單和表格的主要功能分別是什么？請求/響應客戶端/服務器端錯誤主頁、內(nèi)容頁和索引頁文本、聲音、圖像、動畫和數(shù)字視頻等用戶交互/網(wǎng)頁布局第2頁，共128頁，2023年，2月20日，星期二6.1靜態(tài)網(wǎng)頁設計與HTML語言6.1.1靜態(tài)頁面的體系結構靜態(tài)網(wǎng)頁的特征靜態(tài)網(wǎng)頁的內(nèi)容固定不變;靜態(tài)網(wǎng)頁的制作比較方便；靜態(tài)網(wǎng)頁的體系結構Client(瀏覽器)WebServer硬盤HTML頁面從硬盤獲取文件文件返回頁面請求第3頁，共128頁，2023年，2月20日，星期二6.1靜態(tài)網(wǎng)頁設計與HTML語言

6.1.2標記語言Web環(huán)境下，采用標記來管理文本內(nèi)容的現(xiàn)實和格式，常用的標記語言有：

SGML:標準通用標記語言，元語言

HTML:超文本標記語言，Web顯示語言

XML:擴展標記語言，定義數(shù)據(jù)結構，適合數(shù)據(jù)傳輸?shù)?頁，共128頁，2023年，2月20日，星期二GML(1969)SGML(1985)XML(1998)XHTMLMathMLWMLSVGcXMLebXMLHTML(1993)6.1靜態(tài)網(wǎng)頁設計與HTML語言6.1.3標記語言家族第5頁，共128頁，2023年，2月20日，星期二6.1靜態(tài)網(wǎng)頁設計與HTML語言6.1.4超文本置標語言HTML特點平臺兼容

文本文件Web服務器不處理標記，由客戶端瀏覽器解釋

豐富的多媒體顯示、各種布局處理不足HTML過多的考慮布局，缺乏對結構化數(shù)據(jù)的表示能力；鏈路丟失后不能自動糾正、下載的內(nèi)容太多、搜索不方便、時間長等缺點；HTML中有限的標記不能滿足眾多Web應用的需要，缺乏可擴展性第6頁，共128頁，2023年，2月20日，星期二HTML第一講：基礎第7頁，共128頁，2023年，2月20日，星期二6.1靜態(tài)網(wǎng)頁設計與HTML語言HTML文檔的編寫方法手工直接編寫記事本等，存成.htm.html格式使用可視化HTML編輯器Frontpage、Dreamweaver等由Web服務器（或稱HTTP服務器）一方實時動態(tài)地生成。第8頁，共128頁，2023年，2月20日，星期二6.1靜態(tài)網(wǎng)頁設計與HTML語言網(wǎng)頁文件命名*.htm或*.html無空格無特殊符號（例如&符號），只可以有下劃線“_”，只可以為英文、數(shù)字區(qū)分大小寫首頁文件名默認為：index.htm或index.html第9頁，共128頁，2023年，2月20日，星期二HTML文件結構<html>...</html><head>...</head><body>...</body>元素：是HTML語言的基本部分。元素總是成對出現(xiàn)，每一對元素一般都有一個開始的標記（如<body>），也有一個結束的標記（如</body>）。元素的標記要用一對尖括號括起來，并且結束的標記總是在開始的標記前加一個斜杠。6.1靜態(tài)網(wǎng)頁設計與HTML語言第10頁，共128頁，2023年，2月20日，星期二<HTML><HEAD><title></title><meta></HEAD><BODY>HTML文件的正文</BODY></HTML>頭部主體HTML文件結構6.1靜態(tài)網(wǎng)頁設計與HTML語言第11頁，共128頁，2023年，2月20日，星期二第一張網(wǎng)頁（01.htm）<html><head> <title>myfirstpage</title></head><body> Thisismyfirsthomepage!</body></html>

第12頁，共128頁，2023年，2月20日，星期二基本組成部分——HTML元素屬性HTML元素可以有自己的相關屬性，每一個屬性還可以由我們網(wǎng)頁編制者賦一定的值。元素屬性出現(xiàn)在元素的<>內(nèi)，并且和元素名之間有一個空格分隔；屬性值用“”引起來。第13頁，共128頁，2023年，2月20日，星期二第二張網(wǎng)頁（02.htm）<html><head><title>myfirstpage</title></head><body><palign="center">Thisismysecondhomepage!</p></body></html>

居中第14頁，共128頁，2023年，2月20日，星期二HTML元素及元素屬性HEAD之元素——1

<head>元素出現(xiàn)在文檔的開頭部分。<head>與</head>之間的內(nèi)容不會在瀏覽器的文檔窗口顯示，但是其間的元素有特殊重要的意義。<title><title>元素定義HTML文檔的標題。<title>與</title>之間的內(nèi)容將顯示在瀏覽器窗口的標題欄。第15頁，共128頁，2023年，2月20日，星期二HTML元素及元素屬性HEAD元素——2<meta>元素<meta>元素下面可以插入很多很有用的元素屬性。下面介紹四種：<metaname="keywords"content="study,computer">用來標記搜索引擎在搜索你的頁面時所取出的關鍵詞。第16頁，共128頁，2023年，2月20日，星期二HTML元素及元素屬性HEAD元素——3<meta>元素<metaname="author"content=“abc">用來標記文檔的作者。第17頁，共128頁，2023年，2月20日，星期二HTML元素及元素屬性HEAD元素——4<meta>元素<metahttp-equiv=“Content-Type”content=“text/html;charset=gb2312”>用來標記你的頁面的解碼方式。第18頁，共128頁，2023年，2月20日，星期二HTML元素及元素屬性HEAD元素——5<meta>元素<metahttp-equiv=“refresh”content=“5;URL=”>用來自動刷新網(wǎng)頁第19頁，共128頁，2023年，2月20日，星期二練習（03.htm）編寫一個網(wǎng)頁，要求3秒鐘后自動跳轉到南京郵電大學的網(wǎng)站。<html><head><title>mythirdpage</title><metahttp-equiv=“refresh”content=“3;URL=”></head><body><palign=“center”>三秒鐘后本網(wǎng)頁將自動跳轉到南京郵電大學首頁</p></body></html>第20頁，共128頁，2023年，2月20日，星期二<body>元素及元素屬性——1<body>元素表明是HTML文檔的主體部分。在<body>與</body>之間，通常都會有很多其它元素；這些元素和元素屬性構成HTML文檔的主體部分。第21頁，共128頁，2023年，2月20日，星期二<body>元素及元素屬性——2<body>元素中有下列元素屬性：(1)bgcolorbgcolor屬性標志HTML文檔的背景顏色。如：<BODYbgcolor=“#ccffcc”>改變HTML文件的背景顏色</BODY>例：04.htm第22頁，共128頁，2023年，2月20日，星期二HTML對顏色的控制HTML對顏色的控制也有自己的語法。HTML使用16進制的RGB顏色值對顏色進行控制。16進制的數(shù)碼有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.第23頁，共128頁，2023年，2月20日，星期二顏色顏色名和RGB值黑色Black=”#000000”銀色Silver=”#c0c0c0”紅色Red=”#ff0000”藍色Blue=”#0000ff”白色White=”#ffffff”黃色Yellow=”ffff00”綠色Green=”#00ff00”海藍色Aqua=”#00ffff”常見顏色的代碼第24頁，共128頁，2023年，2月20日，星期二<body>元素及元素屬性——3<body>元素中有下列元素屬性：(2)backgroundbackground屬性標志HTML文檔的背景圖片。如：<bodybackground=“images/bg.gif“>?？梢允褂玫膱D片格式為GIF，JPG例：05.htm、06.htm第25頁，共128頁，2023年，2月20日，星期二<body>元素及元素屬性——4<body>元素中有下列元素屬性：(3)bgproperties=fixedbgproperties=fixed使背景圖片成水印效果，即圖片不隨著滾動條的滾動而滾動。例：07.htm和08.htm對比第26頁，共128頁，2023年，2月20日，星期二<body>元素及元素屬性——5<body>元素中有下列元素屬性：(4)texttext屬性標志HTML文檔的正文文字顏色。如：text=“#FF6666”。Text元素定義的顏色將應用于整篇文檔。例：09.htm第27頁，共128頁，2023年，2月20日，星期二<body>元素及元素屬性——6<body>元素中有下列元素屬性：(5)超級鏈接顏色link、vlink、alink分別控制普通超級鏈接、訪問過的超級鏈接、當前活動超級鏈接顏色。<BODYlink="blue"vlink="red"alink="yellow"><ahref="">南京郵電大學</a><p>這是一個<ahref="">鏈接的例子</a>。點一下帶下劃線的文字!</p> <p>鏈接到<ahref="22.htm">22.htm</a></BODY>例：10.htm第28頁，共128頁，2023年，2月20日，星期二<body>元素及元素屬性——7<body>元素中有下列元素屬性：(6)leftmargin和topmargin設置網(wǎng)頁主體內(nèi)容距離網(wǎng)頁頂端和左端的距離如：<BODYleftmargin=100topmargin=100>例：11.htm第29頁，共128頁，2023年，2月20日，星期二HTML第二講：內(nèi)容設置第30頁，共128頁，2023年，2月20日，星期二文字標簽屬性——1文字屬性標記1.文字顏色指定顏色<fontcolor=#>...</font>#=RRGGBB16進制數(shù)碼 <fontcolor=#0000ffsize=2>蘭色字</font><br> <fontcolor=#ff0000size=2>紅色字</font><br> <fontcolor=#00ff00size=2>綠色字</font>例：01.htmHTML2——內(nèi)容設置第31頁，共128頁，2023年，2月20日，星期二文字標簽屬性——2文字屬性標記2.文字字體<fontface=“#,#,...,#”>...</font>

#=客戶端可獲得的字體<fontface="黑體">黑體<br></font><fontface="楷體_gb2312">楷書<br></font><fontface="宋體">宋體</font>02.htm第32頁，共128頁，2023年，2月20日，星期二文字標簽屬性——3文字屬性標記3.文字大小<fontsize=#>...</font>#=1,2,3,4,5,6,7or+#,-#<fontsize=7>專業(yè)鑄造品質(zhì)知識成就未來</font><p>例：03.htm第33頁，共128頁，2023年，2月20日，星期二文字標簽屬性——4文字屬性標記4.文字標題<h#>...</h#>#=1,2,3,4,5,6<h1>老崔的一無所有</h1>例：04.htm第34頁，共128頁，2023年，2月20日，星期二文字布局行的控制段(Paragraph)(可以看作是空行)<p>空白占位符

很好

很好例：05.htm第35頁，共128頁，2023年，2月20日，星期二文字布局行的控制HTML的段落與段落之間有一定的空隔。如果不希望出現(xiàn)空隔而只想換行的話，就要用到另一個元素，即<br>元素。<br>元素可以使所在的位置出現(xiàn)換行。這種換行和瀏覽器的自動換行的效果類似。<br>元素不是成對出現(xiàn)的。例：

BR標記的應用<BRclear=left>

你好嗎？<BR>

很好<br>

06.htm不換行<nobr><nobr>請改變您瀏覽器窗口的寬度，使之小于這一行的寬度，看看這個標記的作用！</nobr>

07.htm第36頁，共128頁，2023年，2月20日，星期二HTML文字與段落格式控制<body>……<i>傾斜文本</i><b>粗體文本</b><u>下劃線文本</u>

<s>刪除線文本</s>……</body>例：08.htm、09.htm、10.htm、11.htm(綜合練習)<BODY><fontsize=7face=隸書color="#0000FF">代數(shù)方程式</font><P><fontsize=5>9<fontcolor=#ff0000>X</font><sup>2</sup>+2<fontcolor=#ff0000>X</font>+3=17<br>3<fontcolor=#ff0000>X</font><sub>1</sub>+2<fontcolor=#ff0000>X</font><sub>2</sub>=10</font></BODY>第37頁，共128頁，2023年，2月20日，星期二基本組成部分—HTML注釋HTML文檔可以插入注釋。注釋內(nèi)容不會在瀏覽器窗口顯示HTML注釋的格式為：

<!--注釋內(nèi)容-->

<!--多行注釋內(nèi)容--><BODY><!--標題--><h1>代數(shù)方程式</h1>例：12.htm第38頁，共128頁，2023年，2月20日，星期二文字的對齊<hnalign=#>...</hn>(n=1,2,3,4,5,6)<palign=#>...</p>(#=left,center,right)<h3align=center>align標志的居中對齊</h3> <palign=right>p標志中利用align標志實現(xiàn)右對齊</p> <center>center標志的居中對齊</center>例：13.htm第39頁，共128頁，2023年，2月20日，星期二文字的分區(qū)顯示<div

align=#>...</div>(#=left,center,right)P標記自動空行，div不空行

<divalign=right>作為一名頂級吉他大師，蓋米·摩爾是在用他的心在劃弦，而絕不是用手指.</div>

<Palign=left>作為一名頂級吉他大師，<div

align=center>蓋米·摩爾</div>是在用他的心在劃弦，而絕不是用手指.</p>例：14.htm第40頁，共128頁，2023年，2月20日，星期二3.HTML段落與分行控制居中

<center>元素<center>元素是一個獨立的使所標記的字符居中的元素。它的作用與使用<p>元素里的align=“center”類似

例如：<center>居中段落</center>15.htm第41頁，共128頁，2023年，2月20日，星期二3.HTML段落與分行控制水平線 <hrsize=#>：設定線寬

<hrwidth=#>：設定線長

<hralign=#>：設定對齊方式#=left,right

<hrcolor=#>：設定線的顏色<hrsize=10width=80%color=#ff0000>例：16.htm第42頁，共128頁，2023年，2月20日，星期二3.HTML的段落與分行控制無序列表元素—1

列表在HTML的文檔里有重要的地位,HTML規(guī)定了多種列表元素。列表所起的主要作用是使特定的文本有序化。第43頁，共128頁，2023年，2月20日，星期二3.HTML的段落與分行控制無序列表元素—2無序列表是由<ul>和<li>元素定義的:無序列表

<ul> <li>列表項1</li> <li>列表項2</li> </ul><hr> 有序列表

<ol> <li>列表項1</li> <li>列表項2</li> </ol><hr>例：17.htm第44頁，共128頁，2023年，2月20日，星期二3.HTML的段落與分行控制無序列表元素—3無序列表的默認符號是圓點。

<ul>元素有type屬性，通過定義不同的type屬性可以改變列表的項目符號。目前，type屬性的屬性值有：

disc(圓)、circle（圓圈）、square（方塊）<ul> <litype=disc>disc <litype=circle>circle <litype=square>square </ul>例：18.htm第45頁，共128頁，2023年，2月20日，星期二3.HTML的段落與分行控制有序列表元素—1有序列表由<ol>和<li>定義:<ol>

<li>sports</li>

<li>drink</li>

<li>friends</li></ol>例：17.htm第46頁，共128頁，2023年，2月20日，星期二3.HTML的段落與分行控制有序列表元素—2

<ol>元素也有自己的type屬性，type屬性的屬性值有1、A、a、I、i等。例如，我們以A、B、C……作為列表的編號,<litype=I>ONE-ONE

例：19.htm<ol>元素還可以定義列表的起始編號，如我們希望列表的第一個編號為5，而不是1，則需要定義<ol>元素的start屬性 <olstart=5> <litype=A>ONE-ONE例：20.htm第47頁，共128頁，2023年，2月20日，星期二4.超級鏈接—普通超級鏈接1超級鏈接是整個WWW應用的核心和基礎。如果沒有超級鏈接的概念，那么，我們現(xiàn)在所有的WWW的應用將不復存在。所以，對超級鏈接的掌握具有特殊重要的意義。第48頁，共128頁，2023年，2月20日，星期二4.超級鏈接—普通超級鏈接2超級鏈接是用錨元素<a>定義的在<a>元素下，有元素屬性href,href的屬性值為一個URL地址如：<ahref=“”>指向?qū)W院的超級鏈接</a>如：<ahref=“08.htm">普通超級鏈接</a>例：21.htm第49頁，共128頁，2023年，2月20日，星期二4.超級鏈接—E-mail超級鏈接超級鏈接可以指向E-mail地址如：<ahref=“mailto:shenc@">指向E-mail地址的超級鏈接</a>例：22.htm第50頁，共128頁，2023年，2月20日，星期二4.超級鏈接—新開鏈接窗口開一個新的(瀏覽器)窗口(TargetWindow)<ahref="URL"target=“_blank">...</a>例：26.htm第51頁，共128頁，2023年，2月20日，星期二4.超級鏈接—去除下劃線去掉超級連接的下劃線：style=“text-decoration:none”

<ahref=""style="text-decoration:none">鏈接下面沒有下劃線</a>例：25.htm第52頁，共128頁，2023年，2月20日，星期二4.超級鏈接——其他超級鏈接WWW應用僅僅是Internet應用的一種,Internet還有其他很多應用，如：Ftp等。實際上mailto也屬于非WWW應用。我們可以類似的創(chuàng)建指向Ftp等的超級鏈接;指向其他Internet應用的超級鏈接不是我們掌握的重點。第53頁，共128頁，2023年，2月20日，星期二4.超級鏈接——錨點(書簽)1<aname="aa"><ahref="#aa">指向本頁面錨點aa的超級鏈接</a>例：23.htm<ahref=“23.htm#top”>指向23頁面的錨點top的超級鏈接</a>例：24.htm第54頁，共128頁，2023年，2月20日，星期二練習：手寫代碼實現(xiàn)鏈接（新開窗口與Email）、背景、文字顏色、字體、換行、頁面標題。練習：27.htm<P><Ahref="">南京郵電大學</A></P><P><Ahref=""target="_blank">新開窗口到南京郵電大學</A></P><P><Ahref="mailto:shenc@">給我來信</A></P><fontcolor="#ff00ff">改變文字顏色</font><br><FONTface="黑體">改變字體</FONT><hrcolor="red"width=500height=5noshadealign="left">第55頁，共128頁，2023年，2月20日，星期二HTML對圖片的控制--1基本語法:<imgsrc=“圖片名稱”>引用圖片必須用<img>元素標志。<img>元素下的基本元素屬性是src屬性，src的屬性值為所引用的圖片的URL地址。src屬性是必須的。Src的URL可以是絕對地址，也可以是相對地址<imgsrc=“aa.jpg"alt="情系何方"><imgsrc=“dd.jpg"alt="情系何方">例：28.htm第56頁，共128頁，2023年，2月20日，星期二HTML對圖片的控制--2所謂圖片的替代文本，指圖片不能顯示時在圖片所在位置顯示的一段文本或當鼠標移到圖片上時也會顯示替代文本。定義圖片替代文本的方法是：<imgsrc=“圖片名稱”

alt=“這是一張圖片”>例：28.htm第57頁，共128頁，2023年，2月20日，星期二HTML對圖片的控制--3圖片的顯示大小我們可以指定一幅圖片在瀏覽器窗口里的顯示大小。定義圖片的顯示大小的方法是：<imgsrc="sample.jpg"width=100height=100>width指定圖片的寬度，height指定高度。它們的屬性值可以是象素，也可以是%。<imgsrc="dd.jpg"width=120height=120>例：29.htm第58頁，共128頁，2023年，2月20日，星期二HTML對圖片的控制--4圖片的邊框我們可以為一幅圖片加一個邊框以突出顯示：

<imgsrc="sample.jpg"border="2">border的屬性值為象素數(shù)例：30.htm第59頁，共128頁，2023年，2月20日，星期二HTML對圖片的控制--5圖片的對齊方式圖片可以相對于頁面或單元格有一個對齊方式。定義水平對齊方式的方法是：<imgsrc=“sample.jpg”align=“l(fā)eft”><imgrc=“sample.jpg”align=“right”>例：31.htm第60頁，共128頁，2023年，2月20日，星期二HTML對圖片的控制--6圖片的對齊方式定義圖片的垂直對齊方式：<imgsrc="sample.jpg"align="top"><imgsrc="sample.jpg"align="middle"><imgsrc="sample.jpg"align="bottom">對于圖片的對齊方式不僅是以上幾種，但是以上的幾種是最常用的。例：32.htm第61頁，共128頁，2023年，2月20日，星期二HTML對圖片的控制--7定義圖片與左、右的文本之間的間距圖片在顯示時，與左右的文本之間可以有一定的間距

<imgsrc="sample.jpg"hspace=5vspace=5>Hspace(horizontal)定義水平間距；Vspace(vertical)定義垂直間距。單位都是象素數(shù).例：33.htm第62頁，共128頁，2023年，2月20日，星期二HTML對圖片的控制--8圖象的超級鏈接圖象的超級鏈接是指整個圖象的超級鏈接，當點擊圖象的任何部分時，都會打開這個超級鏈接。定義默認超級鏈接的方法是：<ahref=“”><imgsrc=“aa.jpg"></a>所以，所謂超級鏈接實際上就是用<a>元素標志一個圖象的引用;例：34.htm第63頁，共128頁，2023年，2月20日，星期二HTML對圖片的控制--9圖象映射 所謂圖象映射是指一個圖片上的不同位置被指定了不同的超級鏈接；點擊圖片的不同位置會打開不同的超級鏈接目標。這與前面的默認超級鏈把整個圖片作為超級鏈接的元素是很不一樣的。第64頁，共128頁，2023年，2月20日，星期二HTML對圖片的控制--10圖象映射（只要求理解標記含義）圖象映射由<map>定義。<map>有一個基本屬性是name。Name給圖象映射命名，這個命名將會被<img>元素用usemap屬性引用。所以，圖象上的圖象映射實際上是對<map>定義的映射的一個引用。<map>在定義圖象映射時，可以定義三種形狀的映射：circle(圓形)、rect(矩形rectangle)、poly(多邊形)第65頁，共128頁，2023年，2月20日，星期二HTML對圖片的控制--11圖象映射實例（35.htm）<imgsrc="bear.jpg"usemap="#Map"><mapname=“Map"><areashape="rect"coords="46,29,253,164"href="#"><areashape="circle"coords="76,510,59"href="#"><areashape="poly"coords="219,482,253,448,310,462,297,527,220,523"href="#"></map>第66頁，共128頁，2023年，2月20日，星期二HTML第三講：表格第67頁，共128頁，2023年，2月20日，星期二一月二月三月120010001500單元格（用<TD>來表示，每個單元格可以有背景顏色和背景圖片）表格（用<Table>來表示，表格可以有背景顏色、背景圖片）表格邊框每一行可以用<TR>來表示，單元格放在行中，每行可以有很多的單元格。表頭（用<TH>來表示，表頭是特殊的單元格，其中的文字加進去之后默認是居中并且加粗）HTML對表格的控制第68頁，共128頁，2023年，2月20日，星期二表格(TABLE)標記--1<table>元素：定義一個表格。每一個表格只有一對<table>和</table>，一張頁面中可以有多個表格。<tr>元素：定義表格的行，一個表格可以有多行，所以<tr>對于一個表格來說不是唯一的。<td>元素：定義表格的一個單元格。每行可以有不同數(shù)量的單元格，在<td>和</td>之間是單元格的具體內(nèi)容。需要注意的是：上述的三個元素必須、而且只能夠配對使用。缺少任何一個元素，都無法定義出一個表格。第69頁，共128頁，2023年，2月20日，星期二表格(TABLE)標記--2表格的基本結構<table>定義表格<tr> <th>定義表頭</th></tr><tr>定義表行<td>…</td>定義單元格</tr></table>例：02.htm第70頁，共128頁，2023年，2月20日，星期二表格(TABLE)標記--3表格的屬性–1width屬性：指定表格或某一個表格單元格的寬度。單位可以是%或者象素。height屬性：指定表格或某一個表格單元格的高度。單位可以是%或者象素。border屬性：表格邊線粗細<tableborder=2>例03.htm、04.htm、05.htm第71頁，共128頁，2023年，2月20日，星期二表格(TABLE)標記--2表格的屬性–14、bgcolor屬性：指定表格或某一個單元格的背景顏色。5、background屬性：指定表格或某一個單元格的背景圖片。其屬性值為一個URL地址。<thbgcolor="#ffaa00">Food</th><thbgcolor="Green">Drink</th><throwspan="2"background="dd.jpg">Sweet</th>例：07.htm第72頁，共128頁，2023年，2月20日，星期二表格(TABLE)標記--3表格的屬性–26、bordercolor屬性：指定表格或某一個單元格的邊框顏色。<tableborder="5"bordercolor="#FFCC00"bgcolor="#FFFFCC">例：08.htm7、Bordercolorlight屬性：亮邊框的顏色8、Bordercolordark屬性：暗邊框的顏色<tableborder="5"cellspacing="2“bordercolorlight="#ff0000"bordercolordark="#0000ff">例：09.htm第73頁，共128頁，2023年，2月20日，星期二表格(TABLE)標記--3表格的屬性–29、align屬性：指定表格或某一個單元格里的內(nèi)容（文本、圖片等）的對齊方式。<tdalign=left>A</td><tdalign=center>B</td><tdalign=right>C</td>例：10.htm第74頁，共128頁，2023年，2月20日，星期二表格(TABLE)標記--3表格的屬性–210、cellspacing屬性：單元格間距。<tableborder=1cellspacing=10cellpadding=50>例：11.htm11、cellpadding屬性：單元格邊距。例：12.htm第75頁，共128頁，2023年，2月20日，星期二表格(TABLE)標記--4單元格屬性1、valign屬性：指定某一個單元格里的內(nèi)容（文本、圖片等）的垂直對齊方式。垂直對齊方式的屬性值包括：top：頂端對齊；middle：居中對齊；bottom：底端對齊;Baseline：相對于基線對齊;<tdvalign=Baseline>D</td>例：13.htm第76頁，共128頁，2023年，2月20日，星期二表格(TABLE)標記--5單元格屬性2、Colspan：屬性值表示當前單元格跨越幾列<thcolspan="3">MorningMenu</th>例：14.htm3、Rowspan：屬性值表示當前單元格跨越幾行例：16.htm第77頁，共128頁，2023年，2月20日，星期二表格(TABLE)標記--6行屬性1、valign屬性：指定某一個單元格里的內(nèi)容（文本、圖片等）的垂直對齊方式。垂直對齊方式的屬性值包top：頂端對齊；

middle：居中對齊；

bottom：底端對齊。

Baseline：相對于基線對齊。第78頁，共128頁，2023年，2月20日，星期二表格(TABLE)標記--7行屬性2、align屬性：指定表格或某一個單元格里的內(nèi)容（文本、圖片等）的對齊方式3、height屬性：指定表格或某一個表格單元格的高度。單位可以是%或者象素第79頁，共128頁，2023年，2月20日，星期二表格進階表格的嵌套在<td></td>之間插入表格，實現(xiàn)表格嵌套例：17.htm表格的作用一般只是控制文本和圖像的顯示，而不顯示表格的邊框例：18.htm第80頁，共128頁，2023年，2月20日，星期二綜合案例表格的綜合使用例：19.htm<TABLEalign=centerbgColor=#ccccccborder=1borderColor=#666666cellPadding=1cellSpacing=1width="75%">

<TR><TD>1</TD><TDrowspan="2">2</TD><TD>3</TD><TD>4</TD><TD>5</TD></TR>第81頁，共128頁，2023年，2月20日，星期二表單(FORM)標記HTML表單是HTML頁面與瀏覽器端實現(xiàn)交互的重要手段。利用表單可以收集客戶端提交的有關信息。在HTML里，我們可以定義表單，并且使表單與CGI或ASP等服務器端的表單處理程序配合。第82頁，共128頁，2023年，2月20日，星期二表單(FORM)標記表單是網(wǎng)頁上的一個特定區(qū)域。這個區(qū)域是由一對<form>元素定義的。<form>元素action屬性：用來定義表單處理程序（一個ASP、CGI等程序）的位置(相對地址或絕對地址)。Method定義表單結果從瀏覽器傳送到服務器的方法，一般有兩種方法：get、post。第83頁，共128頁，2023年，2月20日，星期二表單(FORM)標記表單的基本語法:<formaction="url"method=*type=text/plain>

...<inputtype=submit><inputtype=reset></form>=GET有數(shù)據(jù)量限制，POST無以上限制,以文件形式傳輸<formACTION="#"METHOD="POST">例：22.htm第84頁，共128頁，2023年，2月20日，星期二表單(FORM)標記文本框<inputname=?type=*value=**size=***maxlength=??>?文本框的名字*text,password**默認值***長度??最大輸入字符數(shù)例20.htm您的姓名:<inputtype=textname=usernamevalue="username"size="15"maxlength="15"><br>密碼：<inputtype=passwordname=passwordsvalue="password"size="15"maxlength="15"><br>留言：<textareaNAME="comments"ROWS="5"COLS="35"></textarea>第85頁，共128頁，2023年，2月20日，星期二表單(FORM)標記3.文本域<textareaname=*rows=**cols=**>...</textarea>例：20.htm第86頁，共128頁，2023年，2月20日，星期二表單(FORM)標記按鈕包括普通按鈕、重置按鈕和提交按鈕<inputtype="submit"value="提交"name=“B1"><inputtype="reset"value="全部重寫"name=“B2">例：21.htm第87頁，共128頁，2023年，2月20日，星期二表單(FORM)標記5.復選框(Checkbox)在一個表單里的所有多選框可以有一個或多個被選中。<inputtype=checkbox><inputtype=checkboxchecked><inputtype=checkboxvalue=**>例25.htm第88頁，共128頁，2023年，2月20日，星期二表單(FORM)標記6.單選框(RadioButton)一個表單里的所有變量名相同的單選框只能夠有一個被選中。<inputtype=radioname=sexvalue=**><inputtype=radioname=sexvalue=**checked>各個選項的name必須一樣才能達到預期效果例：26.htm注意262.htm的寫法是錯誤的<inputtype=radioname=音樂1>搖滾<p><inputtype=radioname=音樂2checked>爵士<p>第89頁，共128頁，2023年，2月20日，星期二表單(FORM)標記7.下拉列表基本語法<selectname=*>

<optionselected>說明</option> <optionvalue=**>說明2</option></select>例：28.htm第90頁，共128頁，2023年，2月20日，星期二表單(FORM)標記7.下拉列表（2）列表框的長度<selectsize=**>（3）允許多選<selectsize=**

multiple>例：29.htm、30.htm第91頁，共128頁，2023年，2月20日，星期二表單(FORM)標記8.圖象域<inputtype=imagesrc=url>例：image.htm第92頁，共128頁，2023年，2月20日，星期二表單(FORM)標記綜合練習（*）實現(xiàn)留言簿要求：背景、文字顏色、字體、換行、頁面標題、表單文本框、文本域、單選框、復選框、下拉列表、圖象域、提交與取消按鈕，內(nèi)容以mail形式提交。第93頁，共128頁，2023年，2月20日，星期二HTML第四講：框架第94頁，共128頁，2023年，2月20日，星期二網(wǎng)頁中的框架制作框架頁面的步驟：1.編寫所有子框架頁面2.編寫主框架頁面3.在主框架頁面中設定子框架名稱4.如果框架頁面之間存在鏈接，在子框架中設定鏈接

注意：框架頁面是不含<body>標簽的第95頁，共128頁，2023年，2月20日，星期二網(wǎng)頁中的框架基本語法<frameset><framesrc="url"><noframes><body>您的瀏覽器不支持框架，請考慮升級您的瀏覽器！</body></noframes></frameset>第96頁，共128頁，2023年，2月20日，星期二網(wǎng)頁中的框架定義框架的基本語法框架由一對<frameset>定義<frameset>有兩個屬性：rows和colsRows定義上下分割的框架的大小；cols定義左右分割的框架的大?。辉诙x大小時，rows和cols可以使用相對大小或以百分比為單位。第97頁，共128頁，2023年，2月20日，星期二網(wǎng)頁中的框架各窗口的尺寸設置<frameset

rows=#>橫排多個窗口<framesetrows=30%,20%,*><framesrc="A.html"><framesrc="B.html"><framesrc="C.html"></frameset>排列方式：A B C例：02.htm第98頁，共128頁，2023年，2月20日，星期二網(wǎng)頁中的框架各窗口的尺寸設置

<framesetcols=#>縱向排列多個窗口

<framesetcols=30%，20%,*> <framesrc="A.html"> <framesrc="B.html"> <framesrc="C.html"></frameset>排列方式：ABC例：01.htm第99頁，共128頁，2023年，2月20日，星期二網(wǎng)頁中的框架COLS&ROWS：縱橫排列多個窗口<framesetcols=137，*><framesrc="A.htm"><framesetrows=82,*><framesrc="B.htm"><framesrc="C.htm"></frameset></frameset>排列方式： B A C例：14.htm第100頁，共128頁，2023年，2月20日，星期二網(wǎng)頁中的框架框架邊框的顏色bordercolor="ff0000“例：03.htm各窗口邊框的設置frameborder=##=yes,no/1,0例：04.htm框架邊框的寬度framespacing="10"例：05.htm第101頁，共128頁，2023年，2月20日，星期二網(wǎng)頁中的框架<frame>的屬性name：定義該框架的名字。這個名字可以被一些網(wǎng)頁元素引用，如被<a>元素引用。<ahref=urltarget=“framename”>例：06.htm、07.htmSrc：在本框架里顯示網(wǎng)頁的URL。Target：目標框架,引用的是目標框架的名字。第102頁，共128頁，2023年，2月20日，星期二網(wǎng)頁中的框架在當前框架中打開超鏈接頁面默認就是在當前框架頁中打開,也可以采用Target=“_self”在指定框架中打開超級鏈接頁面Target=“name”新開窗口打開鏈接頁面Target=“_blank”跳出整個框架集Target=“_parent”第103頁，共128頁，2023年，2月20日，星期二網(wǎng)頁中的框架<frame>的屬性Scrolling：是否顯示滾動條。yes,no,auto例：08.htmNoresize：框架在瀏覽器里不可以被調(diào)整大小。例：10.htm第104頁，共128頁，2023年，2月20日，星期二網(wǎng)頁中的框架內(nèi)含窗口<iframe

src=#name=##>...</iframe>#=初始頁面的URL##=框架名稱(FrameName)例：15.htm第105頁，共128頁，2023年，2月20日，星期二會移動的文字基本語法<marquee>...</marquee>例：16.htm文字移動屬性(1)方向：direction=##=left,right,up,down例：17.htm第106頁，共128頁，2023年，2月20日，星期二會移動的文字2、文字移動屬性(2)方式：behavior=##=scroll(循環(huán)),slide(只走一次),alternate(來回走)例：18.htm(3)循環(huán):loop=##=次數(shù)；若未指定則循環(huán)不止(infinite)例：19.htm第107頁，共128頁，2023年，2月20日，星期二會移動的文字2、文字移動屬性(4)速度:scrollamount=#例：20.htm(5)延時:

scrolldelay=#例：21.htm第108頁，共128頁，2023年，2月20日，星期二會移動的文字3、其他屬性(1)底色:bgcolor=##=RRGGBB16進制顏色代碼例：22.htm(2)面積:height=#width=#例：23.htm(3)空白:hspace=#vspace=#例：24.htm第109頁，共128頁，2023年，2月20日，星期二多媒體頁面用<EMBED>嵌入多媒體對象基本語法<embedsrc=#>#=URL注：使用<embed>標記之前，需要安裝插件才可以；對于不同的plugin，其embed屬性也不同。例：25.htm(Flash動畫)例：26.htm(rmi音樂文件)例：27.htm(avi動畫)例：28.htm(mpeg影像文件)第110頁，共128頁，2023年，2月20日，星期二多媒體頁面（*）嵌入背景音樂<bgsoundsrc=#>#=WAV文件的URL<bgsoundloop=#>#=循環(huán)數(shù)例29.htm(WAV背景音樂)<bgsoundsrc="football.wav"loop=3>可以使用bgsound標記來添加頁面背景音樂。第111頁，共128頁，2023年，2月20日，星期二多媒體頁面（*）特殊標記元素Object<OBJECT>元素用來包含圖像、動態(tài)圖像、Java小程序。<OBJECT>元素用以替換具體的<IMG>和<APPLET>元素，以及<EMBED>和<BGSOUND>元素。例30.htm<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase=""width="840"height="480"><paramname=movievalue="pig.swf"><paramname=qualityvalue=high></object>第112頁，共128頁，2023年，2月20日，星期二HTML分析實例——百度第113頁，共128頁，2023年，2月20日，星期二第114頁，共128頁，2023年，2月20日，星期二附：HTML標記一覽<HTML>文件宣告讓瀏覽器知道這是HTML文件<HEAD>開頭提供文件整體信息<TITLE>標題定義文件標題將顯示于瀏覽器頂端<BODY>主體設計文件格式及內(nèi)容所在排版標記<!--注解-->說明標記為文件加上說明但不被顯示<P>段落標記為字、圖、表格等之間留下一空白行<BR>換行標記令字、圖、表格顯示于下一行<HR>水平線插入一水平線<CENTER>居中令字、圖、表格等顯示于中間<PRE>預設格式令文件按原代碼的排列方式顯示<DIV>定位標記設定字、圖、表格等的擺放位置<NOBR>不換行令文字不因太長而換行<WBR>建議換行預設換行部位第115頁，共128頁，2023年，2月20日，星期二附：HTML標記一覽字體標記<STRONG>加重語氣產(chǎn)生字體加粗Bold的效果<B>粗體標記產(chǎn)生字體加粗的效果<EM>強調(diào)標記字體出現(xiàn)斜體效果<I>斜體標記字體出現(xiàn)斜體效果<TT>等寬字體Courier字體，字母寬度相同<U>加下劃線加下劃線<H1>一級標題標記將字體變大，級數(shù)越高越小<H2>二級標題標記將字體變大<H3>三級標題標記將字體變大<H4>四級標題標記將字體變大<H5>五級標題標記將字體變大<H6>六級標題標記將字體變大<FONT>字體標記設定字體、大小、顏色<BASEFONT>基準字體標記設定所有字體、大小、顏色<BIG>字體加大令字體稍微變大<SMALL>字體縮小令字體稍微縮小<STRIKE>加刪除線為文字加刪除線<CODE>程式碼字體稍微加寬<KBD>鍵盤字字體稍微加寬，單一空白<SAMP>范例字體稍為加寬<VAR>變量斜體效果<CITE>斜體標記斜體效果<BLOCKQUOTE>向右縮排文字向右縮排<DFN>述語定義斜體效果<ADDRESS>地址標記斜體效果<SUB>下標字文字下標<SUP>上標字文字上標第116頁，共128頁，2023年，2月20日，星期二附：HTML標記一覽清單標記<OL>順序清單清單項目將以數(shù)字、字母順序排列<UL>無序清單清單項目將以實心圓點作為符號排列<LI>清單項目清單中的項目，一個標記一行<MENU>選項清單可用type參數(shù)指定項目符號<DIR>目錄清單與<menu>相同<DL>定義清單清單分兩層出現(xiàn)<DT>定義條目清單項標題<DD>定義內(nèi)容清單項內(nèi)容表格標記<TABLE>表格標記設定該表格的各項參數(shù)<CAPTION>表格標頭位于表格之上或之下<TR>表格行設定該表格的行<TD>表格單元格設定該表格的單元格<TH>表格標題相等于<TD>，但其內(nèi)文字字體會變粗第117頁，共128頁，2023年，2月20日，星期二附：HTML標記一覽表單標記<FORM>表單標記決定該表單的運作模式<TEXTAREA>文字框提供文字輸入欄<INPUT>輸入標記決定輸入形式<SELECT>選擇標記建立彈出卷動清單<OPTION>選項每一個清單選項圖形標記<IMG>圖形標記用來插入圖形及設定圖形屬性鏈接標記<A>鏈接標記加入鏈接<BASE>基準標記可將相對URL轉絕對及指定鏈接框架標記<FRAMESET>框架設定設定框架<FRAME>窗口設定設定框架中的窗口<IFRAME>頁內(nèi)框架于網(wǎng)頁中插入框架<NOFRAMES>不支持框架設定瀏覽器不支持框架時的提示第118頁，共128頁，2023年，2月20日，星期二附：HTML標記一覽影像地圖<MAP>影像地圖名稱設定影像地圖名稱<AREA>鏈接區(qū)域設定各鏈接區(qū)域多媒體<BGSOUND>背景聲音令背景播放音樂或聲音<EMBED>多媒體加入聲音、音樂或影像其他標記<MARQUEE>走馬燈令文字走動<BLINK>閃爍文字令文字閃爍<ISINDEX>頁內(nèi)尋找器可輸入關鍵字尋找該頁<META>開頭說明提供關于此頁的信息給瀏覽器<LINK>關系定義定義該文件與其他URL的關系StyleSheet<STYLE>式樣表控制網(wǎng)頁版面<span>自訂標記獨立使用或與樣式表一起用第119頁，共128頁，2023年，2月20日，星期二HTML的缺陷HTML更多地關注WEB瀏覽器如何在頁面上安排文本、圖象和按紐等，過多的考慮外觀使其缺乏對結構化數(shù)據(jù)的表示能力。HTML中有限的標記不能滿足很多

溫馨提示

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

評論

0/150

提交評論