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

下載本文檔

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

文檔簡介

HTML語言與網(wǎng)頁設(shè)計(jì)HTML語言與網(wǎng)頁設(shè)計(jì)HTML語言與網(wǎng)頁設(shè)計(jì)2.HTML語言與網(wǎng)頁設(shè)計(jì)2.1HTML語言簡介HTML，即超文本標(biāo)記語言，是英文HyperTextMarkupLanguage的縮寫，是一種獨(dú)立于操作系統(tǒng)的網(wǎng)頁編寫語言。HTML的最大特點(diǎn)就是用標(biāo)記描述和表現(xiàn)信息的顯示格式和內(nèi)容。所謂標(biāo)記就是采用一系列的指令符號來控制輸出的效果，通用標(biāo)記結(jié)構(gòu)為：<元素名屬性=“屬性值”>內(nèi)容</元素名>元素名即預(yù)定義的標(biāo)記（簽）屬性：用來指定標(biāo)記的行為確定元素內(nèi)容的顯示方式，如果標(biāo)記有屬性，則將跟在元素名后，屬性之間用一個或多個制表符、空格、回車符分開，不區(qū)分出現(xiàn)的順序。<>：把標(biāo)記和標(biāo)記所描述的內(nèi)容區(qū)分開，一般成對出現(xiàn)，結(jié)束標(biāo)記沒有屬性HTML的元素名、屬性不區(qū)分大小寫（xHTML區(qū)分且只能用小寫），但最好用小寫（有的操作系統(tǒng)大小敏感，如unix）HTML的源文件是純文本文件，可以用任何一種文本編輯器來編寫，但后綴應(yīng)用.htm或.html。HTML語言與網(wǎng)頁設(shè)計(jì)HTML語言與網(wǎng)頁設(shè)計(jì)HTML語言與網(wǎng)12.HTML語言與網(wǎng)頁設(shè)計(jì)2.1HTML語言簡介HTML，即超文本標(biāo)記語言，是英文HyperTextMarkupLanguage的縮寫，是一種獨(dú)立于操作系統(tǒng)的網(wǎng)頁編寫語言。HTML的最大特點(diǎn)就是用標(biāo)記描述和表現(xiàn)信息的顯示格式和內(nèi)容。所謂標(biāo)記就是采用一系列的指令符號來控制輸出的效果，通用標(biāo)記結(jié)構(gòu)為：<元素名屬性=“屬性值”>內(nèi)容</元素名>元素名即預(yù)定義的標(biāo)記（簽）屬性：用來指定標(biāo)記的行為確定元素內(nèi)容的顯示方式，如果標(biāo)記有屬性，則將跟在元素名后，屬性之間用一個或多個制表符、空格、回車符分開，不區(qū)分出現(xiàn)的順序。<>：把標(biāo)記和標(biāo)記所描述的內(nèi)容區(qū)分開，一般成對出現(xiàn)，結(jié)束標(biāo)記沒有屬性HTML的元素名、屬性不區(qū)分大小寫（xHTML區(qū)分且只能用小寫），但最好用小寫（有的操作系統(tǒng)大小敏感，如unix）HTML的源文件是純文本文件，可以用任何一種文本編輯器來編寫，但后綴應(yīng)用.htm或.html。2.HTML語言與網(wǎng)頁設(shè)計(jì)2.1HTML語言簡介2.2

HTML文檔的基本結(jié)構(gòu)HTML文檔包含定義文檔內(nèi)容的文本和定義文檔結(jié)構(gòu)及外觀的標(biāo)記，基本結(jié)構(gòu)如下：<html>：容器標(biāo)記<head>頭標(biāo)記，用于定義文檔標(biāo)題及其它可能會用于控制文檔顯示或訪問的參數(shù)，如<title>、<base>、<link>、<isindex>、<meta>等</head><body>正文，包括要顯示的文本和文檔的控制標(biāo)記</body>

</html>：容器結(jié)束標(biāo)記2.2HTML文檔的基本結(jié)構(gòu)HTML文檔包含定義文檔內(nèi)容的2.3

HTML的常用元素和標(biāo)記2.3.1HTML結(jié)構(gòu)標(biāo)記（1）<html>標(biāo)記功能：界定一個完整的HTML文檔屬性：dir,lang,version結(jié)束標(biāo)記：</html>包含:head_tag,body_tag,framesdir屬性：內(nèi)容的顯示方式，用于本標(biāo)記用于決定整個文檔的顯示方向，默認(rèn)為”ltr”，用于其它標(biāo)記則用于決定該標(biāo)記內(nèi)的內(nèi)容的顯示方向lang屬性：文檔或文本的顯示語言version屬性：說明支持的html標(biāo)準(zhǔn)的版本，在HTML4中已棄用，并用<！doctype>標(biāo)記來代替.例：<!DOCTYPEHTMLPUBLIC“-//W3C//DTDHTML4.01//EN”“/TR/html4/strict.dtd”>,如yahoo2.3HTML的常用元素和標(biāo)記2.3.1HTML結(jié)構(gòu)標(biāo)記（2）<head>標(biāo)記功能：定義文檔頭區(qū)屬性：dir,lang,profile結(jié)束標(biāo)記：</head>包含:head_content，如base、object、link、style、script、meta使用范圍：html_tag（2）<head>標(biāo)記功能：定義文檔頭區(qū)（3）<title>標(biāo)記功能：定義文檔標(biāo)題屬性：dir,lang結(jié)束標(biāo)記：</title>包含:plain_text使用范圍：head_content說明：此標(biāo)記只能在head標(biāo)記內(nèi)出現(xiàn).title的內(nèi)容通常在瀏覽器的標(biāo)題欄中顯示.瀏覽器中收藏夾內(nèi)書簽的名稱是title的內(nèi)容.title的內(nèi)容可以方便搜索引擎索引頁面.從搜索引擎搜索到的內(nèi)容的標(biāo)題往往是網(wǎng)頁title的內(nèi)容.示例：當(dāng)當(dāng)（3）<title>標(biāo)記功能：定義文檔標(biāo)題<meta>標(biāo)記功能：提供用戶不可見信息，為其它應(yīng)用程序和搜索引擎訪問提供可用信息屬性：meta屬性主要分為兩組name屬性與content屬性name屬性用于是以名稱/值形式的名稱描述網(wǎng)頁,name屬性的值所描述的內(nèi)容(值)通過content屬性表示,便于搜索引擎機(jī)器人查找,分類.其中最重要的是description,keywords和robots.http-equiv屬性與content屬性http-equiv屬性用于提供HTTP協(xié)議的響應(yīng)頭報文(MIME文檔頭),它是以名稱/值形式的名稱,http-equiv屬性的值所描述的內(nèi)容(值)通過content屬性表示,通常為網(wǎng)頁加載前提供給瀏覽器等設(shè)備使用.其中最重要的是content-typecharset提供編碼信息,refresh刷新與跳轉(zhuǎn)頁面,no-cache頁面緩存,expires網(wǎng)頁緩存過期時間.結(jié)束標(biāo)記：無使用范圍：head_content<meta>標(biāo)記功能：提供用戶不可見信息，為其它應(yīng)用程序和搜<meta>標(biāo)記應(yīng)用：name屬性與content屬性組合定義網(wǎng)頁關(guān)鍵詞<metaname="keywords"content="阿里巴巴，行業(yè)門戶，網(wǎng)上貿(mào)易，b2b，電子商務(wù)，內(nèi)貿(mào)，外貿(mào)，批發(fā)，行業(yè)資訊，網(wǎng)上貿(mào)易，網(wǎng)上交易，交易市場，在線交易，買賣信息，貿(mào)易機(jī)會，商業(yè)信息，供求信息，采購，求購信息，供應(yīng)信息，加工合作，代理，商機(jī)，行業(yè)資訊，商務(wù)服務(wù)，商務(wù)網(wǎng)，商人社區(qū)，網(wǎng)商"/>阿里巴巴定義網(wǎng)頁簡短描述<metaname="description"content="阿里巴巴（）是全球企業(yè)間（B2B）電子商務(wù)的著名品牌，匯集海量供求信息，是全球領(lǐng)先的網(wǎng)上交易市場和商人社區(qū)。首家擁有超過1400萬網(wǎng)商的電子商務(wù)網(wǎng)站，遍布220個國家地區(qū)，成為全球商人銷售產(chǎn)品、拓展市場及網(wǎng)絡(luò)推廣的首選網(wǎng)站"/>定義搜索引擎索引要求<metaname="robots"content="robotterms">robotterms是一組使用逗號(,)分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。sciencedirect<meta>標(biāo)記應(yīng)用：name屬性與content屬性組合定<meta>標(biāo)記應(yīng)用：http-equiv屬性與content屬性組合定義文件內(nèi)容類型及編碼信息<metahttp-equiv="content-type"content=“type/subtype;parameter>type的常見取值為application,audio,image,message,multipart,text,video示例：<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>阿里巴巴<metacontent="text/html;charset=utf-8"http-equiv="Content-Type"/>Alibaba<meta>標(biāo)記應(yīng)用：http-equiv屬性與conten設(shè)置網(wǎng)頁緩存過期時間用法：<Metahttp-equiv=“Expires”Content=“0”>

<Metahttp-equiv=“Expires”Content=“Wed,26Feb199708:21:57GMT”>說明：指定網(wǎng)頁在緩存中的過期時間，一旦網(wǎng)頁過期，必須到服務(wù)器上重新加載。注意：必須使用GMT的時間格式，或直接設(shè)為0(數(shù)字表示多少時間后過期)。設(shè)置網(wǎng)頁緩存過期時間定義頁面緩存<metahttp-equiv="pragma"content="no-cache">說明:為了提高速度一些瀏覽器會緩存瀏覽者瀏覽過的頁面,通過上面的定義,瀏覽器一般不會緩存頁面,而且瀏覽器無法脫機(jī)瀏覽.重定向:刷新與跳轉(zhuǎn)頁面<metahttp-equiv="refresh"content="5"/><metahttp-equiv="refresh"content="5;url=/"/>

定義頁面緩存<base>標(biāo)記功能:定義基URL用于頁面的鏈接與引用屬性:href,target結(jié)束標(biāo)記:單獨(dú)出現(xiàn)使用范圍:head區(qū)href屬性:當(dāng)前文檔的完整URLtarget屬性:指定目標(biāo)窗口或框架

網(wǎng)易說明:當(dāng)使用相對路徑定義鏈接時，可以使用base標(biāo)記定義基URL解析所有文檔中定義的相對路徑的URL。<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""/TR/html4/strict.dtd"><HTML><HEAD><TITLE>OurProducts</TITLE><BASEhref="/“target="_blank"></HEAD><BODY><P>Haveyouseenour<Ahref="../cages/birds.gif">BirdCages</A>?</BODY></HTML><base>標(biāo)記功能:定義基URL用于頁面的鏈接與引用<!其它常用head區(qū)標(biāo)記<link>:在文檔中聲明使用外部資源

阿里巴巴<style>:聲明樣式,用來創(chuàng)建CSS屬性，以控制整個文檔主體內(nèi)容的顯示特性<script>:在文檔中使用腳本<object>:定義瀏覽器輸出非標(biāo)準(zhǔn)對象的方法,在網(wǎng)頁中嵌入除圖片外的多媒體其它常用head區(qū)標(biāo)記<link>:在文檔中聲明使用外部資源<body>標(biāo)記功能：定義文檔主體屬性：控制文檔外觀的屬性；將文檔自身與其它可編程功能相聯(lián)系的屬性；標(biāo)記和說明文檔主體以供將來參考的屬性結(jié)束標(biāo)記：</body>包含:

body_content使用范圍：html_tag<body>標(biāo)記功能：定義文檔主體注釋標(biāo)記:<!--注釋的內(nèi)容-->描述文檔的各個部分要做什么解釋為什么要這樣編寫某段代碼包含不想在文件中顯示的信息標(biāo)示文件的禁用部分注釋標(biāo)記:<!--注釋的內(nèi)容-->描述文檔的各個部分要做什2.3.2字符實(shí)體用于標(biāo)識特殊字符：不可見字符和特殊用途字符格式：&#：#代表字符實(shí)體名稱或者字符的ASCII碼值/TR/html4/sgml/entities.html

顯示方式數(shù)字標(biāo)識符實(shí)體名稱對象注釋 Tab鍵 回車鍵  空格!!驚嘆號“""引號在腳本中很有用//斜線（斜杠）<<<小于號>>>大于號\\反斜線（反斜杠）……省略號TM™商標(biāo) &位與運(yùn)算符(&)?©©版權(quán)?®®注冊商標(biāo)±±加號或減號2.3.2字符實(shí)體用于標(biāo)識特殊字符：不可見字符和特殊用途字2.3.3對象與多媒體標(biāo)記<object>標(biāo)記<img>標(biāo)記2.3.3對象與多媒體標(biāo)記<object>標(biāo)記object標(biāo)記object標(biāo)記是成對出現(xiàn)的,以<object>開始，</object>結(jié)束使用object標(biāo)記可以在網(wǎng)頁中嵌入各種多媒體或復(fù)雜外部應(yīng)用即對象，例如Flash,JavaApplets,MP3,QuickTimeMovies等object標(biāo)記通常配合param標(biāo)記一同使用,后者用于對象初始化在網(wǎng)頁中嵌入圖像，一般使用img標(biāo)記object可以完全代替標(biāo)準(zhǔn)不贊成使用的applet,embed,bgsound標(biāo)記object標(biāo)記object標(biāo)記是成對出現(xiàn)的,以<objecObject標(biāo)記的屬性一般屬性archive--包含多個使用逗號(,)分割的Java類或外部資源，用于增強(qiáng)applet的功能，定義applet代碼border--邊框classid--關(guān)聯(lián)一個應(yīng)用程序，執(zhí)行嵌入內(nèi)容的應(yīng)用程序在windows系統(tǒng)中的唯一id(不能改變此id，否則程序?qū)⒊霈F(xiàn)異常)，例如clsid:D27CDB6E-AE6D-11cf-96B8-444553540000--Flashcodebase--為相對路徑提供基URL，IE瀏覽器通常將此屬性中的內(nèi)容定義為運(yùn)行嵌入內(nèi)容所要加載的插件，例如/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0--Flashcodetype--嵌入內(nèi)容的MIME類型，例如application/java--Javaapplication/x-shockwave-flash--Flashdeclare--聲明沒有實(shí)例化的嵌入對象，此對象通常在加載后，或者當(dāng)嵌入對象的某些參數(shù)將使用其它嵌入對象時可以使用,即實(shí)例化以后使用.此時對象需指定iddata--嵌入內(nèi)容(實(shí)例對象)的URL，可以是基于codebase屬性的相對路徑height--嵌入內(nèi)容的高度，單位像素hspace--嵌入內(nèi)容水平方向的空白，應(yīng)使用CSSmargin代替standby--文檔加載時顯示的文本信息tabindex--使用"Tab"鍵的遍歷順序usemap--定義圖像點(diǎn)擊區(qū)域vspace--嵌入內(nèi)容垂直方向的空白，應(yīng)使用CSSmargin代替width--嵌入內(nèi)容的寬度，單位像素Object標(biāo)記的屬性param標(biāo)簽:初始化對象為object標(biāo)簽提供嵌入內(nèi)容的運(yùn)行時參數(shù)的name與value對param標(biāo)簽是單獨(dú)出現(xiàn)的param標(biāo)簽用于定義網(wǎng)頁中嵌入內(nèi)容的運(yùn)行時參數(shù)param標(biāo)簽應(yīng)使用在object或applet標(biāo)簽內(nèi)屬性id--唯一標(biāo)識符name--名稱，name與value屬性組成一對type--嵌入內(nèi)容的MIME類型value--name的對應(yīng)值valuetype--指定參數(shù)類型data--參數(shù)是一個簡單的字符串，默認(rèn)值ref--參數(shù)是URLobject--參數(shù)是另一個嵌入式對象聲明的idparam標(biāo)簽:初始化對象為object標(biāo)簽提供嵌入內(nèi)容示例:嵌入MediaPlayer播放器

<objectid="MediaPlayer"width="478"height="300"codebase="/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,1,5,217"type="application/x-oleobject"standby="LoadingMicrosoftWindowsMediaPlayercomponents..."classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"VIEWASTEXT>

<paramname="DisplayBackColor"value="0">

<paramname="DisplayForeColor"value="16777215">

<paramname="DisplayMode"value="0">

<paramname="DisplaySize"value="-1">

<paramname="Filename"value="mms:///視頻文件.wmv">

<!--此處設(shè)置播放的視頻連接-->

<paramname="ShowControls"value="0">

</object>

示例:嵌入MediaPlayer播放器

<objectid示例:嵌入flash<objectwidth="400"height="40"classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="/pub/shockwave/cabs/flash/swflash.cab#4,0,0,0"><paramname="SRC"value="bookmark.swf"><embedsrc="bookmark.swf"width="400"height="40"></embed></object>廣東商學(xué)院示例:嵌入flash<objectwidth="400"<img>標(biāo)記導(dǎo)入圖像img標(biāo)簽是單獨(dú)出現(xiàn)的.屬性:一般屬性alt--代表圖像的替代文字src–說明圖像源(就是圖像的保存地點(diǎn))height--圖像的高度width--圖像的寬度usemap:定義圖像點(diǎn)擊區(qū)域語法:<imgsrc="URI"alt="alttext"title="titletext"/><img>標(biāo)記導(dǎo)入圖像2.3.4超鏈接標(biāo)記<a屬性=屬性值>顯示的文本或圖像內(nèi)容</a>常用屬性name=cdata:指定錨點(diǎn)(目標(biāo)鏈接)的名稱id=name:指定錨點(diǎn)的元素標(biāo)識符class=classname:指定錨點(diǎn)的類名href=uri:指定超鏈接的目標(biāo)地址rel=link-types:指定前向鏈接類型rev=link-types:指定后向鏈接類型target=frame-target:指定目標(biāo)窗口或框架:_blank,_self,_parent,_toptabindex=number:遍歷鏈接焦點(diǎn)title=text:顯示提示信息2.3.4超鏈接標(biāo)記<a屬性=屬性值>顯示的文本或圖像內(nèi)(2)圖像地圖標(biāo)記功能:用于熱區(qū)超鏈接語法:<map屬性=屬性值><area屬性=屬性值><map>map基本屬性:name,idarea基本屬性:shape:指定熱區(qū)形狀coords:指定熱區(qū)坐標(biāo),其值個數(shù)取決于shape屬性href:指定熱區(qū)鏈接目標(biāo)地址target:指定熱區(qū)鏈接顯示窗口或框架(2)圖像地圖標(biāo)記功能:用于熱區(qū)超鏈接示例:指定位置鏈接<p><ahref="#bottom">鏈接到頁面下部</a></p><p><ahref="#top">鏈接到頁面上部</a></p><P><Ahref="#xxx">...</A>...moredocument...<P><Aname="XXX">...</A>示例:指定位置鏈接<p><ahref="#bottom"示例2:打開指定郵件鏈接<ahref="mailto:">…</a><a

href="/"

title="baidu">

<img

src="/img/logo.gif"

/>

</a>

<a

href="/"

title="google">

<img

src="/intl/en_ALL/images/logo.gif"

/>

</a>

示例3:打開圖像鏈接示例2:打開指定郵件鏈接<ahref="mailto:"示例4:熱區(qū)鏈接<P><OBJECTdata="navbar1.gif"type="image/gif"usemap="#map1"><P>Thisisanavigationbar.</OBJECT><MAPname="map1"><AREAhref="guide.html"alt="AccessGuide"shape="rect"coords="0,0,118,28"><AREAhref="search.html"alt="Search"shape="rect"coords="184,0,276,28"><AREAhref="shortcut.html"alt="Go"shape="circle"coords="184,200,60"><AREAhref="top10.html"alt="TopTen"shape="poly"coords="276,0,276,28,100,200,50,50,276,0"></MAP>示例4:熱區(qū)鏈接<P>2.3.5版式控制標(biāo)記：頁面布局設(shè)計(jì)列表表格框架2.3.5版式控制標(biāo)記：頁面布局設(shè)計(jì)列表列表1.無序列表:項(xiàng)目符號<ul>…..<li>列表項(xiàng)</li><li>列表項(xiàng)</li><li>列表項(xiàng)</li>…..</ul>例:當(dāng)當(dāng)

新浪2.有序列表:連續(xù)標(biāo)號<ol>…..<livalue=“屬性值”>列表項(xiàng)</li><li>列表項(xiàng)</li><li>列表項(xiàng)</li>…..</ol>如何設(shè)計(jì)列表樣式？CSSlist-style-type、list-style-image、list-style-position屬性列表1.無序列表:項(xiàng)目符號2.有序列表:連續(xù)標(biāo)號如何設(shè)計(jì)列表表格：數(shù)據(jù)表、控制網(wǎng)頁布局<table>…</table>屬性：align：頁面對齊方式，left,right,centerwidth:整個表格的寬度，可以是像素值或百分比height：整個表格的高度，可以是像素值或百分比，通常可省略，瀏覽器會自動調(diào)整border:邊框的寬度，以像素為單位，缺省值為0，用于排版時通常取0值。cellpadding:單元格與邊框之間的距離，以像素為單位，缺省值為0cellspacing:單元格之間的距離，以像素為單位，缺省值為2表格：數(shù)據(jù)表、控制網(wǎng)頁布局<table>…</table><tbody>、<tr>、<td>、<th><table><tbody>…</tbody>:嵌在<table>…</table>內(nèi)，表示表格體<tr>…</tr>:嵌在<tbody>…</tbody>內(nèi)，表示表格的一行屬性：對齊方式，left,right,centeralign:行內(nèi)單元格水平對齊方式，left,right,centervalign：行內(nèi)單元格垂直對齊方式，top,middle,bottom<td>…</td>:嵌在<tr>…</tr>內(nèi)，表示在當(dāng)前行內(nèi)增加一個單元格屬性：align:行內(nèi)單元格水平對齊方式，left,right,centervalign：行內(nèi)單元格垂直對齊方式，top,middle,bottomnowrap:表示單元格內(nèi)的文本段只有出現(xiàn)顯式換行標(biāo)記時才中斷rowspan:指定該單元格所跨的行數(shù)colspan:指定該單元格所跨的列數(shù)<th>…</th>:用法同<td>標(biāo)記，惟一區(qū)別在于這個元素是用來標(biāo)記“頭單元格”的，所謂頭單元格是指表格中位于第一行或第一列用來指示其余各行或各列內(nèi)容的單元格</table><tbody>、<tr>、<td>、<th><tab表格應(yīng)用例:佳能報價單<TABLEstyle="FONT-SIZE:12px"cellSpacing=1cellPadding=0width="98%"align=centerbgColor=#ccccccborder=0><TBODY><TRbgColor=#ffffff><TDcolSpan=3><B><ahref=/products/product_search.php?subcatid=15&manuid=232>佳能</a>Canon</B></TD></TR><TRbgColor=#ffffff><TD>型號</TD><TD>像素/變焦/屏幕/存儲介質(zhì)</TD><TD>本周報價</TD></TR><TRbgColor=#ffffff><TD>IXUS60</TD><TD>600萬\3X\2.5\SD</TD><TD>2150</TD></TR><TRbgColor=#ffffff><TD>IXUS65</TD><TD>600萬\3X\3\SD</TD><TD>2350</TD></TR><TRbgColor=#ffffff><TD>IXUSIZOOM</TD><TD>500萬\2.4X\2.5\SD</TD><TD>1570</TD></TR>……<TRbgColor=#ffffff><TD>EOS30D(套)</TD><TD>800萬\EFS17-85\2.5\CF</TD><TD>13400</TD></TR></TBODY></TABLE></P>表格應(yīng)用例:佳能報價單<TABLEstyle="FONT-HTML語言與網(wǎng)頁設(shè)計(jì)課件表作為版式工具示例<HTML><HEAD><TITLE>Listing3-6</TITLE></HEAD><BODYTOPMARGIN="0"LEFTMARGIN="0"><TABLEWIDTH="100%"HEIGHT="100%"CELLSPACING="0"CELLPADDING="5"BORDER="0"><TR><TDCOLSPAN="3"ALIGN="CENTER"BGCOLOR="black"HEIGHT="25"><FONTCOLOR="white"><B>PageUsingTables</B></FONT></TD></TR><TR><TDBGCOLOR="thistle"WIDTH="70"VALIGN="top"><IMGSRC="trans.gif"WIDTH="70"HEIGHT="0"BORDER="0"><BR><B>Listings</B><BR><AHREF="lst3-1.htm">Listing3-1</A><BR><AHREF="lst3-2.htm">Listing3-2</A><BR><AHREF="lst3-3.htm">Listing3-3</A><BR><AHREF="lst3-4.htm">Listing3-4</A><BR></TD><TDALIGN="center"><IMGSRC="trans.gif"WIDTH="150"HEIGHT="0"BORDER="0"><BR>Thispagedemonstratesusingatableforpagelayout.<BR>Itisorganizedwithlocallinksontheleft,externallinksontheright,contentinthecenter,andaheaderatthetop.</TD><TDVALIGN="top"WIDTH="25%"BGCOLOR="lightgrey"><IMGSRC="trans.gif"WIDTH="120"HEIGHT="1"BORDER="0"><BR><B>Organizations</B><BR><AHREF="">Microsoft</A><BR><AHREF="">MicrosoftPress</A><BR><AHREF="">W3C</A><BR><BR><B>UsefulSites</B><BR><AHREF="/Workshop">SBNWorkshop</A><BR><AHREF="/">MSDN</A><BR><AHREF="">WebR</A><BR><AHREF="">WebR</A><BR></TD></TR></TABLE></BODY></HTML>表作為版式工具示例<HTML>表作為版式工具示例表作為版式工具示例表作為版式工具示例卓越亞馬遜yahoo表作為版式工具示例卓越亞馬遜框架

它是一個標(biāo)準(zhǔn)的HTML文件，只包括如何分割網(wǎng)頁和文件在每個區(qū)域如何顯示的信息<HTML><HEAD><TITLE>Listing3-8</TITLE></HEAD><FRAMESETCOLS=“50%,70,*”>//定義框架頁面<FRAMESRC=“1.htm”>//定義一個框架<FRAMESRC="2.htm"><FRAMESRC="3.htm"><noframes>//對不支持框架的設(shè)備進(jìn)行提示,或相關(guān)操作<body>瀏覽器不支持框架!</body></noframes></FRAMESET></HTML>框架它是一個標(biāo)準(zhǔn)的HTML文件，只包括如何分割網(wǎng)頁和文件在框架示例框架示例嵌套框架：多級版式<HTML><HEAD><TITLE>Listing3-9</TITLE></HEAD><FRAMESETROWS="50,*"FRAMEBORDER="0"FRAMESPACING="0"><FRAMESRC="1.htm"NAME="frame1"SCROLLING="no">

<FRAMESETCOLS="20%,80%"FRAMEBORDER="1"FRAMESPACING="1"><FRAMESRC="2.htm"NAME="frame2"SCROLLING="yes"><FRAMESRC="3.htm"NAME="frame3"SCROLLING="auto">

</FRAMESET></FRAMESET></HTML>嵌套框架：多級版式<HTML>嵌套框架示例嵌套框架示例跨框架定位

增加導(dǎo)航框架（包括其它框架的鏈接，目標(biāo)框架的定位屬性）<HTML><HEAD><TITLE>Listing3-10</TITLE></HEAD><FRAMESETCOLS="25%,75%"FRAMEBORDER="1"FRAMESPACING="1"><FRAMESRC="nav.htm"NAME="NavFrame"SCROLLING="yes"><FRAMESRC="1.htm"NAME="ContentFrame"SCROLLING="auto"></FRAMESET></HTML>導(dǎo)航欄（框架）：<HTML><BODY><AHREF="1.htm"TARGET="ContentFrame">GotoFrame1</A><BR><AHREF="2.htm"TARGET="ContentFrame">GotoFrame2</A><BR><AHREF="3.htm"TARGET="ContentFrame">GotoFrame3</A><BR></BODY></HTML>跨框架定位增加導(dǎo)航框架（包括其它框架的鏈接，目標(biāo)框架的定位導(dǎo)航框架示例導(dǎo)航框架示例2.3.6表單：互動表單是網(wǎng)頁上的一個特定區(qū)域。這個區(qū)域是由一對<form>元素定義的。其間是各種接受用戶輸入的控件HTML表單是HTML頁面與瀏覽器端實(shí)現(xiàn)交互的重要手段。利用表單可以收集客戶端提交的有關(guān)信息。在HTML里，我們可以定義表單，并且使表單與CGI或ASP等服務(wù)器端的表單處理程序配合。什么時候用到表單？搜索、注冊、登陸、論壇、交易、調(diào)查……2.3.6表單：互動表單是網(wǎng)頁上的一個特定區(qū)域。這個區(qū)域是表單的基本語法結(jié)構(gòu)<formaction="url"method=*name=**>

...<inputtype=*name=**value=***><textareaname=*rows=**cols=**wrap=***>...</textarea><selectname=*size=**multiple>...</select></form>action屬性：用來定義表單處理程序（ASP、JSP或CGI程序）的位置(相對地址或絕對地址)。method屬性定義表單結(jié)果從瀏覽器傳送到服務(wù)器的方法，一般有兩種方法：get、post。示例1

，示例2，3表單的基本語法結(jié)構(gòu)<formacti簡單文本輸入標(biāo)記<input><inputtype=*name=**value=***>

type=*決定控件類型，分為輸入型,選擇型,點(diǎn)擊型。每個控件都應(yīng)該包含type和name屬性，并且大多數(shù)都包括value屬性。1)按鈕：激活某個操作普通按鈕<inputtype="button"value="要處理的對象的值"name=“fieldname">提交按鈕<inputtype="submit"value="提交"name=“B1">重置按鈕<inputtype="reset"value="全部重寫"name=“B2">簡單文本輸入標(biāo)記<input><input2)復(fù)選框(Checkbox)：選擇多個項(xiàng)目在一個表單里的所有多選框可以有一個或多個被選中。<inputtype=”checkbox”name=“fieldname"value=**checked><inputtype=”checkbox”name=“fieldname"value=**>……2)復(fù)選框(Checkbox)：選擇多個項(xiàng)目3)單選按鈕(RadioButton)：只能選擇一項(xiàng)一個表單里的所有變量名相同的單選框只能夠有一個被選中。<inputtype=“radio”name=*value=**><inputtype=“radio”name=*value=**checked>各個選項(xiàng)的name必須一樣3)單選按鈕(RadioButton)：只能選擇一項(xiàng)4)文本輸入框：輸入單行文本<inputname=?type=*value=**size=***maxlength=??>?文本框的名字*text或password**默認(rèn)值或?yàn)榭?**長度??最大輸入字符數(shù)4)文本輸入框：輸入單行文本5)圖象域：圖像按鈕<inputtype=”image”name=**src=”url”>6)文件域：上傳文件<inputtype=”file”name=**src=”url”>7)隱藏域<inputtype=”hidden”name=**value=***>示例5)圖象域：圖像按鈕文本域:多行多列的文本輸入框<textareaname=*rows=**cols=**wrap=***>...</textarea>*文本域的名字**行數(shù)或列數(shù)***off,soft,hard：不換行、自動換行、強(qiáng)制換行文本域:多行多列的文本輸入框<textare下拉列表：從列表中選擇一個或多個選項(xiàng)基本語法<selectname=*size=**multiple>

<optgrouplabel=“分組選項(xiàng)類別名">

<optionselectedvalue=**>說明</option><optionvalue=**>說明2</option></optgroup></select>multiple：有該項(xiàng)說明可以選擇多項(xiàng)示例

下拉列表：從列表中選擇一個或多個選項(xiàng)基本語法表單示例：代碼<HTML><HEAD><TITLE>Listing4-2</TITLE></HEAD><BODY><FORMNAME="F1"ACTION="/asp/prc.asp"METHOD="get">//由網(wǎng)站的jsp目錄下的prc.jsp程序處理。<INPUTNAME="t1"TYPE="text"VALUE="Thisisatextinput"><BR><INPUTNAME=“p1”TYPE=“password”VALUE=“Apasswordinput”><BR>//控件類型<INPUTNAME="c1"TYPE="checkbox"VALUE="Checkbox1">Thistextisnexttocheckbox1.<BR><INPUTNAME="c2"TYPE="checkbox"VALUE="Checkbox2">Thistextisnexttocheckbox2.<BR><INPUTNAME=“r1”TYPE=“radio”VALUE=“firstradio”>//name值必須一致Thistextisnexttothefirstradiobutton.<BR><INPUTNAME="r1"TYPE="radio"VALUE="secondradio">Thistextisnexttothesecondradiobutton.<BR><INPUTNAME="b1"TYPE="button"VALUE="Justabutton"><BR><INPUTNAME="f1"TYPE="file"VALUE="Thisisafileinput"><BR><INPUTNAME="h1"TYPE="hidden"VALUE="Ahiddeninput"><BR><INPUTNAME="rst"TYPE="reset"VALUE="Aresetbutton"><BR><INPUTNAME="sbt"TYPE="submit"VALUE="Asubmitbutton"><BR><INPUTNAME="i1"TYPE="image"VALUE="AnImage"SRC="a.gif"><BR><TEXTAREANAME=“TA1”COLS=“40”ROWS=“4”WRAP=“soft”>//自動換行的文本域ThistextisinsideTEXTAREA1.Notehowlinesofcodeareautomaticallywrappedandhowlinebreaksinthecodecausebreaks.</TEXTAREA></FORM></BODY></HTML>表單示例：代碼<HTML><HEAD>表單示例：圖示文本輸入框：普通文本文本輸入框：密碼復(fù)選框單選按鈕普通按鈕文件域重置按鈕提交按鈕圖像域表單示例：圖示文本輸入框：普通文本文本輸入框：密碼復(fù)選框單選文本域示例：代碼<HTML><HEAD><TITLE>Listing4-3</TITLE></HEAD><BODY><FORMNAME="F1"ACTION="/asp/prc.asp"METHOD="GET"><TEXTAREANAME="TA1"COLS="40"ROWS="4"WRAP="soft">ThistextisinsideTEXTAREA1.Notehowlinesofcodeareautomaticallywrappedandhowlinebreaksinthecodecausebreaks.</TEXTAREA><BR><TEXTAREANAME="TA2"COLS="40"ROWS="4"WRAP="off">ThistextisinsideTEXTAREA2.Notehowlinesofcodearenotautomaticallywrappedandhowlinebreaksinthecodecausebreaks.</TEXTAREA><BR><INPUTTYPE="submit"></FORM></BODY></HTML>文本域示例：代碼<HTML>文本域示例：圖示自動換行的文本域不自動換行的文本域文本域示例：圖示自動換行的文本域不自動換行的文本域下拉列表示例：代碼<HTML><HEAD><TITLE>Listing4-4</TITLE></HEAD><BODY><FORMNAME="F1"ACTION="/asp/prc.asp"METHOD="get">Selectoneitem:<SELECTNAME="sbt1"><OPTIONVALUE="option1">Textofoption1<OPTIONVALUE="option2"SELECTED>Textofoption2<OPTIONVALUE="option3">Textofoption3<OPTIONVALUE="option4">Textofoption4<OPTIONVALUE="option5">Textofoption5</SELECT><HR>Selectoneitem:<SELECTNAME="sbt2"SIZE="3"><OPTIONVALUE="option1">Textofoption1<OPTIONVALUE="option2"SELECTED>Textofoption2<OPTIONVALUE="option3">Textofoption3<OPTIONVALUE="option4">Textofoption4<OPTIONVALUE="option5">Textofoption5</SELECT><HR>Selectmultipleitems:<SELECTNAME="sbt3"MULTIPLEALIGN="top"><OPTIONVALUE="option1">Textofoption1<OPTIONVALUE="option2"SELECTED>Textofoption2<OPTIONVALUE="option3">Textofoption3<OPTIONVALUE="option4">Textofoption4<OPTIONVALUE="option5">Textofoption5</SELECT><BR><INPUTTYPE="submit"></FORM></BODY></HTML>下拉列表示例：代碼<HTML>下拉列表示例：圖示顯示選中選項(xiàng)，由用戶打開列表定位反顯選中選項(xiàng)且自動打開列表，用滾動條上下移動定位反顯選中選項(xiàng)且自動打開列表，用滾動條上下移動，且可選擇多個目標(biāo)選項(xiàng)：連續(xù)選擇：按shift鍵并連續(xù)選擇目標(biāo)選項(xiàng)不連續(xù)選擇：按Ctrl鍵單擊目標(biāo)選項(xiàng)下拉列表示例：圖示顯示選中選項(xiàng)，由用戶打開列表定位反顯選中選2.4CSS技術(shù)：數(shù)據(jù)與表現(xiàn)分離CSS（CascadingStyleSheet，層疊樣式表）是一種格式化網(wǎng)頁的標(biāo)準(zhǔn)方式，它擴(kuò)展了HTML的功能，使網(wǎng)頁設(shè)計(jì)者能夠以更有效的方式設(shè)置網(wǎng)頁格式。CSS是一種分離web文檔內(nèi)容與格式的技術(shù)，可以控制web文檔的外觀和版式，使用CSS可以改變：文本的大小、格式、顏色、字間距、邊框、元素周圍的補(bǔ)白，乃至網(wǎng)頁上對象的精確位置。共享樣式設(shè)定個性化的標(biāo)準(zhǔn)網(wǎng)頁：CSS+DIV=web標(biāo)準(zhǔn)？2.4CSS技術(shù)：數(shù)據(jù)與表現(xiàn)分離CSS（Cascading兩個簡單例子<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>使用HTML方式</title></head><body><H1align=center><FONTface="楷體_GB2312">一級標(biāo)題</FONT></H1><P>...其他正文...</P><H1align=center><FONTface="楷體_GB2312">一級標(biāo)題</FONT></H1></body></html><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><STYLE>H1{text-align:center;font-family:楷體_GB2312}</STYLE><title>使用CSS方式</title></head><body><H1>一級標(biāo)題</H1><P>...其他正文...</P><H1>一級標(biāo)題</H1></body></html>兩個簡單例子<!DOCTYPEhtmlPUBLIC"-2.4.1樣式表定義語法樣式表：也稱樣式定義，或樣式規(guī)則，可包含于文檔中，也可保存于.css文件中?；窘Y(jié)構(gòu)為：Selector{property1:value1;property2:value2;property3:value3;……}Selector定義樣式作用的對象，稱為選擇器，花括號中為樣式聲明塊，其中property為CSS屬性，value為屬性對應(yīng)的值，各樣式聲明之間用分號隔開。示例H1{text-align:center;font-family:黑體}選擇器樣式定義樣式屬性屬性取值2.4.1樣式表定義語法樣式表：也稱樣式定義，或樣式規(guī)則，常用Selector類型HTML標(biāo)記符用戶定義的類用戶定義的ID偽類常用Selector類型HTML標(biāo)記符HTMLSelector不帶尖括號的標(biāo)記名作選擇符HTML標(biāo)記符是最常用的selector，它重新定義了HTML標(biāo)記符的顯示效果。例如：H1{text-align:center;color:red}使所有用H1標(biāo)記符修飾的內(nèi)容都居中和用紅色顯示body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}ul,ol{list-style-type:none;}HTMLSelector不帶尖括號的標(biāo)記名作選擇符選擇符應(yīng)用示例基本清單<html><head><title>NewPortRichey</title><styletype="text/css">*{font-family:Verdana}</style></head><body><h2align="center">TheNewPortRicheyDogShow</h2><h4align="center">ShowDate:7/31/2001</h4><h4align="center">NewPortRichey,FL</h4><palign="center"><spanclass="category">BestInShow:</span><spanid="bestinshow">CHSarah'sRazzleDazzle(YorkshireTerrier)</span></p><p><ahref="complete">Completeresults</a></p><tablealign="center"><tr><tdclass="category"><ahref="herding.html">HerdingGroup:</a></td><td>GermanShepherdDog</td><td>CHSabreDawn</td></tr><tr><tdclass="category"><ahref="toy.html">ToyGroup:</a></td><td>YorkshireTerrier</td><td>CHSarah'sRazzleDazzle</td></tr><tr><tdclass="category"><ahref="sporting.html">SportingGroup:</a></td><td>GoldenRetriever</td><td>CHChase'sGoldenChance</td></tr><tr><tdclass="category"><ahref="nonsporting.html">Non-SportingGroup:</a></td><td>TibetanTerrier</td><td>CHWinstonofSunnyBrookLane</td></tr></table></body></html>選擇符應(yīng)用示例基本清單<html><tablealign選擇符應(yīng)用示例基本清單代碼運(yùn)行頁面選擇符應(yīng)用示例基本清單代碼運(yùn)行頁面標(biāo)記選擇符應(yīng)用示例清單...<styletype="text/css">*{font-family:Verdana}td{font-size:10pt}</style>...標(biāo)記選擇符應(yīng)用示例清單...標(biāo)記選擇符應(yīng)用示例運(yùn)行結(jié)果標(biāo)記選擇符應(yīng)用示例運(yùn)行結(jié)果Selector:用戶定義類.classname{property:value…}表示任何class屬性為classname的標(biāo)記符都采用所定義的樣式。類選擇符的語法是在類名前面加一個點(diǎn)號（.）類是一種增強(qiáng)頁面可管理性的出色方法，因?yàn)橹恍瓒x和修改樣式表，就可以對站點(diǎn)的外觀進(jìn)行全面定義和修改。Selector:用戶定義類.classname{prope類選擇符應(yīng)用示例清單...<styletype="text/css">{font-family:Verdana}td{font-size:10pt}.category{font-weight:bold;}td.category{font-style:italic}</style>...類選擇符應(yīng)用示例清單...類選擇符應(yīng)用示例運(yùn)行結(jié)果類選擇符應(yīng)用示例運(yùn)行結(jié)果Selector:用戶定義的ID#idname{property:value…}表示任何ID屬性為idname的標(biāo)記符都采用所定義的樣式。ID選擇符的語法是在類名前面加一個#號（#）用戶定義ID與class的作用完全相同，但I(xiàn)D在一個文檔中應(yīng)該是惟一的。Selector:用戶定義的ID#idname{properID選擇符應(yīng)用示例...<styletype="text/css">{font-family:Verdana}td{font-size:10pt}.category{font-weight:bold;}td.category{font-style:italic}#bestinshow{color:red}</style>...ID選擇符應(yīng)用示例...ID選擇符應(yīng)用示例運(yùn)行結(jié)果ID選擇符應(yīng)用示例運(yùn)行結(jié)果Selector:偽類偽類的語法是在原有的語法里加上一個偽類（pseudo-class）：selector:pseudo-class{property:value}（選擇符:偽類{屬性:值}）偽類和類不同，是CSS已經(jīng)定義好的，不能象類選擇符一樣隨意用別的名字，根據(jù)上面的語法可以解釋為對象（選擇符）在某個特殊狀態(tài)下（偽類）的樣式。常用的偽類:link未訪問過的超鏈接:visited訪問過的超鏈接:hover懸停狀態(tài)的超鏈接:active活動超鏈接Selector:偽類偽類的語法是在原有的語法里加上一個偽類偽類選擇符應(yīng)用示例清單...<styletype="text/css">*{font-family:Verdana}td{font-size:10pt}.category{font-weight:bold;}td.category{font-style:italic}#bestinshow{color:red}:hover{background-color:red}</style>...偽類選擇符應(yīng)用示例清單...偽類選擇符應(yīng)用示例運(yùn)行結(jié)果偽類選擇符應(yīng)用示例運(yùn)行結(jié)果Selector:后代、子、同胞CSS不但允許根據(jù)元素名應(yīng)用規(guī)則，還允許根據(jù)元素在整個文檔中的位置應(yīng)用規(guī)則。例如，一個規(guī)則可以只選擇段落標(biāo)記內(nèi)的鏈接。繼承：嵌套的子對象（嵌套元素）繼承外部元素或父元素的格式，除非子對象另有格式定義后代：空格連接子：大于號連接同胞：加號連接Selector:后代、子、同胞CSS不但允許根據(jù)元素名應(yīng)層次結(jié)構(gòu)關(guān)系選擇符應(yīng)用示例清單...<styletype="text/css">{font-family:Verdana}td{font-size:10pt}.category{font-weight:bold;}td.category{font-style:italic}#bestinshow{color:red}

pa{text-decoration:none}h4+h4{font-style:italic}:hover{background-color:red}</style>...層次結(jié)構(gòu)關(guān)系選擇符應(yīng)用示例清單...后代同胞后代同胞2.4.2樣式引用嵌入式樣式：內(nèi)聯(lián)引用樣式表

全局樣式表：內(nèi)部引用鏈接的格式頁：外部引用2.4.2樣式引用嵌入式樣式：內(nèi)聯(lián)引用嵌入式樣式使用style屬性將樣式應(yīng)用于單個元素上，實(shí)現(xiàn)對特定元素的精確控制，優(yōu)先于樣式表控制，可以應(yīng)用于任何標(biāo)記，并且只影響所應(yīng)用的標(biāo)記style=”單個或以分號分隔的若干樣式聲明（聲明塊）”樣式聲明:屬性：屬性值<HTML><HEAD><TITLE>Listing11-2</TITLE></HEAD><BODY><SPANSTYLE="font-weight:bold">ThistextisinaSPAN.</SPAN><BR>ThistextisnotinaSPAN.</BODY></HTML>嵌入式樣式使用style屬性將樣式應(yīng)用于單個元素上，實(shí)現(xiàn)對特全局樣式表通過將樣式表嵌入<head>標(biāo)記內(nèi)的<style>標(biāo)記對內(nèi)實(shí)現(xiàn)，控制文檔中相應(yīng)標(biāo)記的樣式標(biāo)記的格式<head>…<style>樣式表</style></head><HTML><HEAD>全局樣式表通過將樣式表嵌入<head>標(biāo)記內(nèi)的<style><TITLE>Listing11-7</TITLE><STYLE>H1{font-size:16pt;font-weight:bold;color:red}H2{font-style:italic;font-size:24pt;color:green}SPAN{font-weight:bold;font-style:italic}.adiv{height:52px;width:145px}:hover{background-color:red}//本文檔懸停狀態(tài)的超接鏈的背景色為紅色</STYLE></HEAD><BODY><SPAN>ThistextisinaSPAN.</SPAN><H1>ThistextisinanH1.</H1><H2>ThistextisinanH2.</H2><divclass=”adiv”>//本塊的高度為52px,寬度為145px<ahref="herding.html">HerdingGroup:</a><ahref="toy.html">ToyGroup:</a></div><H2STYLE=“font-size:36pt”>ThisismodifiedH2text.</H2>//本塊的高度為52px，寬度為145px</BODY></HTML><TITLE>Listing11-7</TITLE>全局樣式表示例全局樣式表示例鏈接的樣式表

以.css為擴(kuò)展名的包含格式定義的文本文件，可用來控制若干個網(wǎng)頁或整web站點(diǎn)的樣式。使用方法為在文檔的<head>區(qū)使用<link>標(biāo)記引用：H1{font-size:16pt;font-weight:bold;color:red}（styles.css）H2{font-style:italic;font-size:24pt;color:green}SPAN{font-weight:bold;font-style:italic}<HTML><HEAD><TITLE>Listing11-8</TITLE><LINKHREF="styles.css"REL="STYLESHEET"TYPE="text/css"></HEAD><BODY><SPAN>ThistextisinaSPAN.</SPAN><H1>ThistextisinanH1.</H1><H2>ThistextisinanH2.</H2><H2STYLE="font-size:36pt">ThisismodifiedH2text.</H2></BODY></HTML>@import命令:格式頁包含命令，即在格式頁中加載其它格式頁鏈接的樣式表以.css為擴(kuò)展名的包含格式定義的文本文件，可鏈接的樣式表示例鏈接的樣式表示例2.4.3樣式的優(yōu)先級樣式的優(yōu)先級遵循“就近優(yōu)先”的原則，也就是說，距離所修飾對象越近的樣式，其優(yōu)先級越高。樣式如果沖突，則采用高優(yōu)先級樣式；如果不沖突，則采用疊加的樣式效果。2.4.3樣式的優(yōu)先級樣式的優(yōu)先級遵循“就近優(yōu)先”的原則，2.4.4CSS+DIV：模塊化、結(jié)構(gòu)化設(shè)計(jì)模塊化設(shè)計(jì)要求相對封閉獨(dú)立性、可重復(fù)性、可修改性、統(tǒng)一性等結(jié)構(gòu)化設(shè)計(jì)的意思是你需要分析網(wǎng)站的內(nèi)容塊，以及每塊內(nèi)容服務(wù)的目的，然后再根據(jù)這些內(nèi)容目的建立起相應(yīng)的HTML結(jié)構(gòu)。

仔細(xì)分析和規(guī)劃你的頁面結(jié)構(gòu)，你可能得到類似這樣的幾塊：

標(biāo)志和站點(diǎn)名稱

主頁面內(nèi)容

站點(diǎn)導(dǎo)航(主菜單)

子菜單

搜索框功能區(qū)(例如購物車、收銀臺)

頁腳(版權(quán)和有關(guān)法律聲明)

……

2.4.4CSS+DIV：模塊化、結(jié)構(gòu)化設(shè)計(jì)模塊化設(shè)計(jì)要求我們通常采用DIV元素來將這些結(jié)構(gòu)定義出來，例如：

＜div

id=“header”＞＜/div＞

＜div

id=“content”＞＜/div＞

＜div

id=“globalnav”＞＜/div＞

＜div

id=“subnav”＞＜/div＞

＜div

id=“search”＞＜/div＞

＜div

id=“shop”＞＜/div＞

＜div

id=“footer”＞＜/div＞

起類似作用的還有span,通常與類選擇符、ID選擇符一起使用例：新浪

我們通常采用DIV元素來將這些結(jié)構(gòu)定義出來，例如：

＜新浪DIV示例<DIVid=page><!--XAD_STARTX--><!--_SINA_ADS_BEGIN_--><DIVclass=logonav><!--logobegin--><DIVclass=topads><!--輪播通欄begin--><DIVclass=Partid=PartA><!--leftbegin--><DIVclass=left><!--多層文字鏈begin--><DIVclass=rightbox><!--搜索begin--><DIVclass=Partid=PartB><!--leftbegin--><DIVclass=Partid=PartC><!--left

溫馨提示

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

評論

0/150

提交評論