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

下載本文檔

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

文檔簡介

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

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

SGML:標(biāo)準(zhǔn)通用標(biāo)記語言，元語言

HTML:超文本標(biāo)記語言，Web顯示語言

XML:擴(kuò)展標(biāo)記語言，定義數(shù)據(jù)結(jié)構(gòu)，適合數(shù)據(jù)傳輸?shù)谒捻?，共一百二十八頁?022年，8月28日GML(1969)SGML(1985)XML(1998)XHTMLMathMLWMLSVGcXMLebXMLHTML(1993)6.1靜態(tài)網(wǎng)頁設(shè)計(jì)與HTML語言6.1.3標(biāo)記語言家族第五頁，共一百二十八頁，2022年，8月28日6.1靜態(tài)網(wǎng)頁設(shè)計(jì)與HTML語言6.1.4超文本置標(biāo)語言HTML特點(diǎn)平臺(tái)兼容

文本文件Web服務(wù)器不處理標(biāo)記，由客戶端瀏覽器解釋

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

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

居中第十四頁，共一百二十八頁，2022年，8月28日HTML元素及元素屬性HEAD之元素——1

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

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

很好

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

BR標(biāo)記的應(yīng)用<BRclear=left>

你好嗎？<BR>

很好<br>

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

07.htm第三十六頁，共一百二十八頁，2022年，8月28日HTML文字與段落格式控制<body>……<i>傾斜文本</i><b>粗體文本</b><u>下劃線文本</u>

<s>刪除線文本</s>……</body>例：08.htm、09.htm、10.htm、11.htm(綜合練習(xí))<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>第三十七頁，共一百二十八頁，2022年，8月28日基本組成部分—HTML注釋HTML文檔可以插入注釋。注釋內(nèi)容不會(huì)在瀏覽器窗口顯示HTML注釋的格式為：

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

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

align=#>...</div>(#=left,center,right)P標(biāo)記自動(dòng)空行，div不空行

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

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

align=center>蓋米·摩爾</div>是在用他的心在劃弦，而絕不是用手指.</p>例：14.htm第四十頁，共一百二十八頁，2022年，8月28日3.HTML段落與分行控制居中

<center>元素<center>元素是一個(gè)獨(dú)立的使所標(biāo)記的字符居中的元素。它的作用與使用<p>元素里的align=“center”類似

例如：<center>居中段落</center>15.htm第四十一頁，共一百二十八頁，2022年，8月28日3.HTML段落與分行控制水平線 <hrsize=#>：設(shè)定線寬

<hrwidth=#>：設(shè)定線長

<hralign=#>：設(shè)定對齊方式#=left,right

<hrcolor=#>：設(shè)定線的顏色<hrsize=10width=80%color=#ff0000>例：16.htm第四十二頁，共一百二十八頁，2022年，8月28日3.HTML的段落與分行控制無序列表元素—1

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

<ul> <li>列表項(xiàng)1</li> <li>列表項(xiàng)2</li> </ul><hr> 有序列表

<ol> <li>列表項(xiàng)1</li> <li>列表項(xiàng)2</li> </ol><hr>例：17.htm第四十四頁，共一百二十八頁，2022年，8月28日3.HTML的段落與分行控制無序列表元素—3無序列表的默認(rèn)符號是圓點(diǎn)。

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

disc(圓)、circle（圓圈）、square（方塊）<ul> <litype=disc>disc <litype=circle>circle <litype=square>square </ul>例：18.htm第四十五頁，共一百二十八頁，2022年，8月28日3.HTML的段落與分行控制有序列表元素—1有序列表由<ol>和<li>定義:<ol>

<li>sports</li>

<li>drink</li>

<li>friends</li></ol>例：17.htm第四十六頁，共一百二十八頁，2022年，8月28日3.HTML的段落與分行控制有序列表元素—2

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

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

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

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

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

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

middle：居中對齊；

bottom：底端對齊。

Baseline：相對于基線對齊。第七十八頁，共一百二十八頁，2022年，8月28日表格(TABLE)標(biāo)記--7行屬性2、align屬性：指定表格或某一個(gè)單元格里的內(nèi)容（文本、圖片等）的對齊方式3、height屬性：指定表格或某一個(gè)表格單元格的高度。單位可以是%或者象素第七十九頁，共一百二十八頁，2022年，8月28日表格進(jìn)階表格的嵌套在<td></td>之間插入表格，實(shí)現(xiàn)表格嵌套例：17.htm表格的作用一般只是控制文本和圖像的顯示，而不顯示表格的邊框例：18.htm第八十頁，共一百二十八頁，2022年，8月28日綜合案例表格的綜合使用例：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>第八十一頁，共一百二十八頁，2022年，8月28日表單(FORM)標(biāo)記HTML表單是HTML頁面與瀏覽器端實(shí)現(xiàn)交互的重要手段。利用表單可以收集客戶端提交的有關(guān)信息。在HTML里，我們可以定義表單，并且使表單與CGI或ASP等服務(wù)器端的表單處理程序配合。第八十二頁，共一百二十八頁，2022年，8月28日表單(FORM)標(biāo)記表單是網(wǎng)頁上的一個(gè)特定區(qū)域。這個(gè)區(qū)域是由一對<form>元素定義的。<form>元素action屬性：用來定義表單處理程序（一個(gè)ASP、CGI等程序）的位置(相對地址或絕對地址)。Method定義表單結(jié)果從瀏覽器傳送到服務(wù)器的方法，一般有兩種方法：get、post。第八十三頁，共一百二十八頁，2022年，8月28日表單(FORM)標(biāo)記表單的基本語法:<formaction="url"method=*type=text/plain>

...<inputtype=submit><inputtype=reset></form>=GET有數(shù)據(jù)量限制，POST無以上限制,以文件形式傳輸<formACTION="#"METHOD="POST">例：22.htm第八十四頁，共一百二十八頁，2022年，8月28日表單(FORM)標(biāo)記文本框<inputname=?type=*value=**size=***maxlength=??>?文本框的名字*text,password**默認(rèn)值***長度??最大輸入字符數(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>第八十五頁，共一百二十八頁，2022年，8月28日表單(FORM)標(biāo)記3.文本域<textareaname=*rows=**cols=**>...</textarea>例：20.htm第八十六頁，共一百二十八頁，2022年，8月28日表單(FORM)標(biāo)記按鈕包括普通按鈕、重置按鈕和提交按鈕<inputtype="submit"value="提交"name=“B1"><inputtype="reset"value="全部重寫"name=“B2">例：21.htm第八十七頁，共一百二十八頁，2022年，8月28日表單(FORM)標(biāo)記5.復(fù)選框(Checkbox)在一個(gè)表單里的所有多選框可以有一個(gè)或多個(gè)被選中。<inputtype=checkbox><inputtype=checkboxchecked><inputtype=checkboxvalue=**>例25.htm第八十八頁，共一百二十八頁，2022年，8月28日表單(FORM)標(biāo)記6.單選框(RadioButton)一個(gè)表單里的所有變量名相同的單選框只能夠有一個(gè)被選中。<inputtype=radioname=sexvalue=**><inputtype=radioname=sexvalue=**checked>各個(gè)選項(xiàng)的name必須一樣才能達(dá)到預(yù)期效果例：26.htm注意262.htm的寫法是錯(cuò)誤的<inputtype=radioname=音樂1>搖滾<p><inputtype=radioname=音樂2checked>爵士<p>第八十九頁，共一百二十八頁，2022年，8月28日表單(FORM)標(biāo)記7.下拉列表基本語法<selectname=*>

<optionselected>說明</option> <optionvalue=**>說明2</option></select>例：28.htm第九十頁，共一百二十八頁，2022年，8月28日表單(FORM)標(biāo)記7.下拉列表（2）列表框的長度<selectsize=**>（3）允許多選<selectsize=**

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

注意：框架頁面是不含<body>標(biāo)簽的第九十五頁，共一百二十八頁，2022年，8月28日網(wǎng)頁中的框架基本語法<frameset><framesrc="url"><noframes><body>您的瀏覽器不支持框架，請考慮升級您的瀏覽器！</body></noframes></frameset>第九十六頁，共一百二十八頁，2022年，8月28日網(wǎng)頁中的框架定義框架的基本語法框架由一對<frameset>定義<frameset>有兩個(gè)屬性：rows和colsRows定義上下分割的框架的大?。籧ols定義左右分割的框架的大?。辉诙x大小時(shí)，rows和cols可以使用相對大小或以百分比為單位。第九十七頁，共一百二十八頁，2022年，8月28日網(wǎng)頁中的框架各窗口的尺寸設(shè)置<frameset

rows=#>橫排多個(gè)窗口<framesetrows=30%,20%,*><framesrc="A.html"><framesrc="B.html"><framesrc="C.html"></frameset>排列方式：A B C例：02.htm第九十八頁，共一百二十八頁，2022年，8月28日網(wǎng)頁中的框架各窗口的尺寸設(shè)置

<framesetcols=#>縱向排列多個(gè)窗口

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

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

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

溫馨提示

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

評論

0/150

提交評論