HTML和CSS之間的關(guān)系_第1頁
HTML和CSS之間的關(guān)系_第2頁
HTML和CSS之間的關(guān)系_第3頁
HTML和CSS之間的關(guān)系_第4頁
HTML和CSS之間的關(guān)系_第5頁
已閱讀5頁,還剩57頁未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

重慶郵電大學(xué)數(shù)理學(xué)院HTML1-修德博學(xué)求實(shí)創(chuàng)新 李華榮Time\@"yyyy-M-d"2023-4-22HTML的基本標(biāo)簽HTML簡(jiǎn)介

HTML是HypertextMarkupLanguage(超文本標(biāo)志語言)的縮寫,它是構(gòu)成Web頁面(Page)的主要工具,是用來表示網(wǎng)上信息的符號(hào)標(biāo)志語言。

在網(wǎng)上,如果要向全球范圍內(nèi)出版和發(fā)布信息,需要有一種能夠被廣泛理解的語言,即所有的計(jì)算機(jī)都能夠理解的一種用于出版的"母語"。WWW(WorldWideWeb)所使用的出版語言就是HTML語言。通過HTML,將所需要表達(dá)的信息按某種規(guī)則寫成HTML文件,通過專用的瀏覽器來識(shí)別,并將這些HTML"翻譯"成可以識(shí)別的信息,就是現(xiàn)在所見到的《wangye》。定義和發(fā)布HTML標(biāo)準(zhǔn)的組織是“W3C”(WorldWideWebConsortium)中文意思為W3C理事會(huì)或萬維網(wǎng)聯(lián)盟。XML :(ExtensibleMarkupLanguage,可擴(kuò)展的標(biāo)記語言)

HTML的功能

1)出版在線的文檔,其中包含了標(biāo)題、文本、表格、列表以及照片等內(nèi)容。

2)通過超鏈接檢索在線的信息。

3)為獲取遠(yuǎn)程服務(wù)而設(shè)計(jì)表單,可用于檢索信息、定購產(chǎn)品等。

4)在文檔中直接包含表格數(shù)據(jù)、視頻剪輯、聲音剪輯以及其他的一些應(yīng)用。

學(xué)習(xí)HTML的意義

便于優(yōu)化專用工具生成的代碼;為編寫ASP等網(wǎng)絡(luò)程序奠定基礎(chǔ)。

HTML的編寫工具

用HTML編寫的文件(文檔)的擴(kuò)展名是.HTML或.HTM。它們是供瀏覽器解釋瀏覽文件的格式。可以使用記事本、寫字板等編輯工具來編寫HTML文件。HTML語言使用標(biāo)志對(duì)(標(biāo)簽)的方法來編寫文件,既簡(jiǎn)單又方便。它通常使用<標(biāo)志名></標(biāo)志名>來表示標(biāo)志的開始和結(jié)束(例如<HTML></HTML>標(biāo)志對(duì)),因此在HTML文檔中這樣的標(biāo)志對(duì)都必須是成對(duì)使用的。

在今天,做《wangye》的工具到處都是,只要?jiǎng)訋紫率髽?biāo),一個(gè)精彩的《wangye》就出來了,HTML是否要學(xué)呢?答案是肯定的,因?yàn)楣ぞ呔褪枪ぞ?,它們生成的代碼是機(jī)械的,不夠簡(jiǎn)潔,使《wangye》打開的速度減慢。還有很多新的功能,工具是生成不了的。必需對(duì)代碼進(jìn)行編輯。

HTML文件的本質(zhì)

HTML文件的實(shí)質(zhì)是以.htm或.html為擴(kuò)展名的純文本文件。標(biāo)志(tag)的結(jié)構(gòu)特點(diǎn)

1、用<>包圍。

HTML文檔基本結(jié)構(gòu)—<body>頁面背景色或背景圖像bgcolor屬性可以改變網(wǎng)頁的背景色。background屬性可以把網(wǎng)頁的背景設(shè)為圖片。語法<bodybgcolor=”#ffccff”background=”image/back_image.gif”> hello!!</body> 經(jīng)驗(yàn):為了使頁面美觀大方,網(wǎng)頁背景要盡量的淺 HTML標(biāo)記寫在“<”和“>”符號(hào)之間HTML標(biāo)簽可以嵌套<H2><center>Hello</center></H2>源代碼不區(qū)分大小寫注釋<!--注釋說明-->HTML重要標(biāo)簽(標(biāo)志)標(biāo)題格式標(biāo)志(標(biāo)題標(biāo)簽)

HTML語言提供了一系列對(duì)文本中的標(biāo)題進(jìn)行操作的標(biāo)志對(duì):<h1></h1>…<h6></h6>,即一共有6對(duì)標(biāo)題的標(biāo)志對(duì)。<h1></h1>是最大的標(biāo)題,而<h6></h6>則是最小的標(biāo)題,也即是標(biāo)志中h后面的數(shù)字越大標(biāo)題文本就越小。如果HTML文檔中需要輸出標(biāo)題文本,就可以使用這6對(duì)標(biāo)題標(biāo)志對(duì)中的任何一對(duì)。HTML提供了六級(jí)標(biāo)簽,<H1>為最大,<H6>為最小。例:<H1>一級(jí)標(biāo)題</H1><H2>二級(jí)標(biāo)題</H2><H3>三級(jí)標(biāo)題</H3><H4>四級(jí)標(biāo)題</H4>塊級(jí)別元素能夠獨(dú)立成為一個(gè)段落的標(biāo)簽統(tǒng)一稱之為塊級(jí)別元素。檢驗(yàn)的方法:可以在標(biāo)簽的后面書寫任意文本,如果自動(dòng)換段,這個(gè)標(biāo)簽就是塊級(jí)別元素。<h1>~<h6>標(biāo)簽是塊級(jí)別元素用來設(shè)置網(wǎng)頁的標(biāo)題文本必須有開始和結(jié)束標(biāo)簽,即雙標(biāo)簽定義標(biāo)題文字的對(duì)齊方式<h1align="center"></h1>align的值可以是:left(左對(duì)齊)right(右對(duì)齊)center(居中對(duì)齊)圖標(biāo)(link)地址欄圖標(biāo)<linkrel="ShortcutIcon"href="favicon.ico">favicon.ico名字最好不變16*16的16色,放虛擬目錄根目錄下收藏欄圖標(biāo)<linkrel="Bookmark"href="favicon.ico">文本標(biāo)志

<b></b>用來使文本以黑體字的形式輸出。

<i></i>用來使文本以斜體字的形式輸出。

<u></u>用來使文本以下加一劃線的形式輸出。

<sub></sub>下標(biāo)

<sup></sup>上標(biāo)

<tt></tt>用來輸出打字機(jī)風(fēng)格字體的文本。

<cite></cite>用來輸出引用方式的字體,通常是斜體。

<em></em>用來輸出需要強(qiáng)調(diào)的文本(通常是斜體加黑體)。

<strong></strong>則用來輸出加重文本(通常也是斜體加黑體)。

<s>帶刪除線文字strikethrough</s><Font>標(biāo)簽<Font>標(biāo)簽用于控制網(wǎng)頁上文本的顯示外觀。文本大小、字體類型和顏色等屬性都可以使用<Font>標(biāo)簽指定。例:<Fontsize=”+2”color=”red”face=”隸書”>size屬性用來設(shè)置字體的大小,可以為字體指定的大小范圍為1~7。最大為7最小為1。默認(rèn)字體大小為3,如果size=+4將使大小增加到7,size=-1將使大小減到2。color屬性用于指定字體的顏色,可以指定顏色名稱或十六進(jìn)制值。<fontsize="7"color="red"face="幼圓,黑體,宋體"style="font-size:200">同志們好~</font><br>特殊符號(hào)用于顯示特殊字符的字符實(shí)體特殊字符轉(zhuǎn)義碼示例空格 <P>移動(dòng) | 100| 聯(lián)通</p>大于(>)>IfA>BThen<BR>A=A+1小于(<)<IfA<BThen<BR>A=A+1引號(hào)(””)"<P>"淘寶網(wǎng)"</P>版權(quán)號(hào)(@)©<P>Copyright©2007</P>轉(zhuǎn)義碼各字符間不能有空格;轉(zhuǎn)義碼必須以“;”結(jié)束;單獨(dú)的&不能被認(rèn)為是轉(zhuǎn)義開始。特殊字符?&copy;?®;?&#153;±&plusmn;

空格&nbsp;¥&yen;輸入空格在XHTML語言中有兩種方法可以控制空格添加英文空格代碼:“ ”這不是標(biāo)簽。切換到任意一種中文輸入法的全角狀態(tài)(shift+space)就可以直接空格了。行的控制相關(guān)標(biāo)簽段落標(biāo)簽<P>段落標(biāo)簽<P>用于標(biāo)記段落的開始。一般省略段落結(jié)束標(biāo)記</P>還可以設(shè)置段落的align屬性,設(shè)置段落的對(duì)齊方式,如左對(duì)齊、居中、右對(duì)齊行內(nèi)對(duì)象不是塊級(jí)別元素的對(duì)象稱之為行內(nèi)對(duì)象行內(nèi)對(duì)象基于文檔流的順序排列。<p>標(biāo)簽是塊級(jí)別元素用來定義段落雙標(biāo)簽定義段落的對(duì)齊方式<palign="center"></p>align的值可以是:left(左對(duì)齊)right(右對(duì)齊)center(居中對(duì)齊)換行標(biāo)簽<BR/>只要在文本中放入<BR/>標(biāo)簽,就會(huì)強(qiáng)制換行。<br/>標(biāo)簽是塊級(jí)別元素用來插入換行符<br/>是單標(biāo)簽最好寫上正斜杠水平線<hr><hr>標(biāo)簽是塊級(jí)別元素用來插入一個(gè)水平線<hr/>是單標(biāo)簽定義<hrwidth="500"size="1"color="#FF0000"align="center"/>width設(shè)定水平線的寬度,單位可以是像素或者%size設(shè)定水平線的高度,單位可以是像素或者%color設(shè)定水平線的顏色align設(shè)定水平線的橫向?qū)R方式<HR>(水平線)標(biāo)簽用于在頁面上繪制水平線。只有開始標(biāo)簽,沒有結(jié)束標(biāo)簽。語法:<HRsize=”5”color=”red”width=”300”>size用來指定水平線的高度,以像素為單位;color可用來設(shè)置水平線的顏色。width用于改變水平線的寬度,可以以像素為單位,也可以是窗口的百分比使用預(yù)格式文本<PRE>標(biāo)簽<PRE>標(biāo)簽用于顯示預(yù)先在HTML代碼中已定義好格式的文本。當(dāng)文本顯示在瀏覽器中時(shí),會(huì)遵循已在HTML源文檔中定義的格式。行距<p> <spanstyle="line-height:1.5">   愉快的國(guó)慶節(jié) 十月一日是一年一度的國(guó)慶節(jié),是祖國(guó)母親的生日。祖國(guó)母親今年54周歲了,因此全國(guó)都洋溢著喜慶的氣氛。 乘著這氣氛,我們一家人來到了山清水秀的外婆家。 </span></p>分區(qū)標(biāo)識(shí)<div>--設(shè)置對(duì)齊方式雙標(biāo)簽可用于實(shí)現(xiàn)浮動(dòng)廣告,盒模型實(shí)現(xiàn)頁面布局<div></div>,分區(qū)標(biāo)識(shí)的開始和結(jié)束

屬性:

align=|center|left|right|水平對(duì)齊方式<divalign="center">國(guó)慶節(jié)作文精選 </div>圖像標(biāo)簽圖像的基本語法<IMG>標(biāo)簽用于在HTML文檔中插入圖像,該標(biāo)簽可以放在要顯示圖像的位置。<IMG>標(biāo)簽不含任何內(nèi)容,它使用src屬性指定圖像源文件所在的路徑。語法:<imgsrc="圖片路徑"width="900"height="550"border="10"align="left"/>其中,src參數(shù)用來設(shè)置圖像文件所在的位置,width和height屬性用來指定圖像的寬度和高度,alt屬性有兩個(gè)作用:在網(wǎng)頁中,如果圖像沒有被下載,在圖像位置上出現(xiàn)提示文字;如果圖像下載完,將鼠標(biāo)放在該圖像上,在鼠標(biāo)旁邊出現(xiàn)的提示文字。src的屬性值為所引用的圖片的url地址,此屬性是必須的。src的url可以是絕對(duì)路徑,也可以是相對(duì)路徑。width定義圖像的寬度height定義圖像的高度border定義圖像的邊框粗細(xì)align定義了圖像相對(duì)于周圍元素的水平和垂直對(duì)齊方式值有:left、right、top、middle和bottom。style=filter:Alpha(opacity=100,style=2);

filter:樣式表濾鏡;

Alpha:透明濾鏡,

opacity:不透明度100(0~100);

style:樣式2(0~3),

rules="none"不顯示內(nèi)框"<imgsrc="photo.gif"hspace="5"vspace="5"/>hspace定義定義圖片與文本間的水平間距;vspace定義定義圖片與文本間的垂直間距。圖像與文本的對(duì)齊align屬性用于調(diào)整圖像對(duì)于周圍文本的對(duì)齊方式align可取的值:top、bottom、middle、left或right。定義給圖像添加鏈接圖象的超級(jí)鏈接是指整個(gè)圖象的超級(jí)鏈接,當(dāng)點(diǎn)擊圖象的任何部分時(shí),都會(huì)打開這個(gè)超級(jí)鏈接。定義<ahref=""><imgsrc="sample.jpg"></a>使用列表不同類型的列表:無序列表無序列表就是“項(xiàng)目列表”,列表項(xiàng)前面帶有項(xiàng)目符號(hào),包含無序列表標(biāo)簽<UL></UL>內(nèi)。列表中每項(xiàng)都用列表標(biāo)簽<LI>,其中LI表示列表項(xiàng),結(jié)束標(biāo)簽</LI>為可選項(xiàng)。無序列表是塊級(jí)別元素。無序列表的默認(rèn)符號(hào)是圓點(diǎn)。語法:<ULtype=”circle”> <LI>如何激活會(huì)員號(hào)?</LI> <LI>如何注冊(cè)淘寶會(huì)員?</LI> ………..</UL>type屬性決定了列表開始的符號(hào),它可以去disc(默認(rèn)值,表示實(shí)心圓點(diǎn))、circle(空心圓環(huán))、square(空心正方形)這3個(gè)值。有序列表有序列表包含<OL>…..</OL>標(biāo)簽內(nèi)。也顯示列表項(xiàng)。區(qū)別在于有序列表的列表項(xiàng)以自動(dòng)生成的順序顯示。語法<OLtype=”1”> <LI>填寫信息</LI> <LI>收電子郵件</LI> ……..</OL>type屬性決定有序列表的序號(hào)類型,它可以取如下5個(gè)值:1、a、A、i、I。分別表示數(shù)字序列、小寫英文字母序列、大寫英文字母序列、小寫羅馬數(shù)字序列、大寫羅馬數(shù)字序列。<ol>元素還可以定義列表的起始編號(hào),如我們希望列表的第一個(gè)編號(hào)為5,而不是1,則需要定義<ol>元素的start屬性。無符號(hào)列表列表由列表類型和列表項(xiàng)兩部分構(gòu)成,也就是說由兩對(duì)標(biāo)簽來組成無符號(hào)列表是塊級(jí)別元素<dl>標(biāo)簽定義列表。 <dt>標(biāo)簽定義了定義列表中的項(xiàng)目(即術(shù)語部分)。 <dd>可在定義列表中定義條目的定義部分。<dl>、<dt>、<dd>雙標(biāo)簽定義<dl><dt>Coffee</dt><dd>Blackhotdrink</dd><dt>Milk</dt><dd>Whitecolddrink</dd></dl>頁面鏈接<A>標(biāo)簽<A>標(biāo)簽用于超鏈接。超級(jí)鏈接是整個(gè)WWW應(yīng)用的核心和基礎(chǔ)。。<a>標(biāo)簽是雙標(biāo)簽<a>標(biāo)簽以可定義錨,一個(gè)錨有兩種用法:通用使用href屬性,創(chuàng)建一個(gè)文檔到另外一個(gè)文檔的鏈接,包括絕對(duì)鏈接和相對(duì)鏈接。通用使用name屬性,創(chuàng)建一個(gè)文檔內(nèi)部的書簽。語法:<Ahref=”register/register.html”>[免費(fèi)注冊(cè)]</A>href屬性用來指定要鏈接的地址?!癧免費(fèi)注冊(cè)]”是熱點(diǎn)文本。定義絕對(duì)鏈接<ahref="">指向Sohu的鏈接</a><ahref="mailto:froglt@163.com">指向E-mail地址的超級(jí)鏈接</a>定義相對(duì)鏈接<ahref=“img/bg.gif">打開相對(duì)鏈接</a>可以連接計(jì)算機(jī)中的任何文件,瀏覽器支持的文件格式可以直接打開,瀏覽器所不支持的文件格式將直接下載。 絕對(duì)路徑名:指定從根目錄到文件的完整路徑。 相對(duì)路徑名:指定相對(duì)于當(dāng)前文件的文件位置。鏈接屬性控制<ahref=""target="_blank">在新的窗口中打開超級(jí)鏈接</a>target屬性值:_blank:在新窗口中打開鏈接_self:在當(dāng)前窗口中打開鏈接,為默認(rèn)值_parent:在父窗體中打開鏈接_top:在當(dāng)前窗體打開連接,并替換當(dāng)前的整個(gè)窗體(框架頁)框架頁的名稱:在對(duì)應(yīng)的框架頁中打開鏈接到本頁面作用是未來了方便用戶閱讀過長(zhǎng)的頁面內(nèi)容,可以使用錨點(diǎn)鏈接。<Aname=”marker”>主題名稱</A><A>標(biāo)簽的name屬性用于創(chuàng)建錨記。<Ahref=”#marker”>主題名稱</A>超鏈接名稱前面的符號(hào)“#”告訴瀏覽器當(dāng)前鏈接是文檔中的一個(gè)錨記點(diǎn)。電子郵件鏈接用戶可以從網(wǎng)頁發(fā)送電子郵件。要做到這一點(diǎn),可在鏈接標(biāo)簽中插入“mailto:郵箱地址”例:<Ahref=”mailto:taobaoWebMater@”>站長(zhǎng)信箱</A>定義錨記鏈接,定義的過程分為兩步第一步命名錨記<aname="link1">要到達(dá)的目的地</a>第二步制作鏈接<ahref="#link1">鏈接文本</a>跳轉(zhuǎn)到不同頁面的錨記:制作鏈接<ahref=“demo.html#link1">鏈接文本</a>iframe實(shí)現(xiàn)網(wǎng)頁的內(nèi)嵌iframe元素的功能是在一個(gè)文檔里內(nèi)嵌一個(gè)文檔,創(chuàng)建一個(gè)浮動(dòng)的幀。其部分屬性簡(jiǎn)介如下:name:內(nèi)嵌幀名稱width:內(nèi)嵌幀寬度(可用像素值或百分比)height:內(nèi)嵌幀高度(可用像素值或百分比)frameborder:內(nèi)嵌幀邊框marginwidth:幀內(nèi)文本的左右頁邊距marginheight:幀內(nèi)文本的上下頁邊距scrolling:是否出現(xiàn)滾動(dòng)條(“auto”為自動(dòng),“yes”為顯示,“no”為不顯示)src:內(nèi)嵌入文件的地址style:內(nèi)嵌文檔的樣式(如設(shè)置文檔背景等)allowtransparency:是否允許透明可選的屬性DTD指示此屬性允許在哪種DTD中使用。S=Strict,T=Transitional,F=Frameset.屬性值描述DTDalignleftrighttopmiddlebottom不贊成使用。請(qǐng)使用樣式代替。規(guī)定如何根據(jù)周圍的元素來對(duì)齊此框架。TFframeborder10規(guī)定是否顯示框架周圍的邊框。TFheightpixels%規(guī)定iframe的高度。TFlongdescURL規(guī)定一個(gè)頁面,該頁面包含了有關(guān)iframe的較長(zhǎng)描述。TFmarginheightpixels定義iframe的頂部和底部的邊距。TFmarginwidthpixels定義iframe的左側(cè)和右側(cè)的邊距。TFnameframe_name規(guī)定iframe的名稱。TFscrollingyesnoauto規(guī)定是否在iframe中顯示滾動(dòng)條。TFsrcURL規(guī)定在iframe中顯示的文檔的URL。TFwidthpixels%定義iframe的寬度。TF標(biāo)準(zhǔn)屬性id,class,title,style在父窗體中訪問并控制子窗體中的對(duì)象在父窗體中,Iframe即子窗體是document對(duì)象的一個(gè)子對(duì)象,可以直接在腳本中訪問子窗體中的對(duì)象 <bodyonclick="alert(tt.myH1.innerHTML)"><Iframename="tt"src="frame1.htm"width="250"height="200"scrolling="no"frameborder="0"></iframe><h1id="myH2">hello,buddy</h1> </body>在子窗體中我們可以通過其parent即父(雙親)對(duì)象來訪問父窗口中的對(duì)象parent.控件name.value="hello“字段集fieldset(邊框)fieldset

在字段集包含的文本和其它元素外面畫一個(gè)方框legend

fieldSet

對(duì)象繪制的方框內(nèi)插入一個(gè)標(biāo)題<fieldset><legend>fieldset名稱</legend><!--

加入你的內(nèi)容--></fieldset><body> <fieldsetstyle="width:40%"> <legendalign="center">登陸界面</legend> 用戶名:<inputtype="text"size="20"/><br> 密  碼:<inputtype="text"size="20"/><inputtype="submit"value="登陸"> <inputtype="reset"value="清空"></fieldset></body>滾動(dòng)<Marquee>標(biāo)簽(跑馬燈)此標(biāo)簽不僅可以移動(dòng)文字,還可以移動(dòng)圖片。語法<Marqueescrolldelay=”100”direction=”up”onmouseover=”this.stop()”onmouseout=”this.start()”> 滾動(dòng)文字或圖像 <ahref=”#”> <imgsrc=”images/scroll/1.gif”border=”0”align=”middle” ></a></Marquee>scrolldelay:表示滾動(dòng)延遲時(shí)間,默認(rèn)值為90ms。direction:表示滾動(dòng)的方向。默認(rèn)為從右向左??梢匀。簎p、down、left、right。當(dāng)圖片含有超鏈接時(shí):圖片外面會(huì)有邊框,設(shè)置圖片的border屬性為0,可以使邊框消失。設(shè)置align屬性為middle可以使圖片居中。<marquee>用來設(shè)置網(wǎng)頁的移動(dòng)對(duì)象。<marquee>雙標(biāo)簽定義<marqueedirection="up"behavior="slide"loop="2"scrollamount="3"bgcolor="red"width="200"height="200"></marquee>direction定義對(duì)象移動(dòng)方向,值為left,right,up,downbehavior定義移動(dòng)對(duì)象的效果,值為scroll(循環(huán)),slide(只走一次),alternate(來回走)loop定義移動(dòng)對(duì)象的方循環(huán)次數(shù)scrollamount定義對(duì)象的移動(dòng)速度,值越小速度越慢bgcolor定義移動(dòng)對(duì)象的背景色width定義移動(dòng)對(duì)象的寬度height定義移動(dòng)對(duì)象的高度控制對(duì)象的移動(dòng)<marqueeonmouseover="this.stop()"onmouseout="this.start()"></marquee>如果想讓鼠標(biāo)所指的位置出現(xiàn)類似超鏈接的小手,則設(shè)置style屬性。設(shè)置cursor為hand。例:style="cursor:hand;”多媒體網(wǎng)頁的制作<embed><embed>在網(wǎng)頁中插入多媒體文件瀏覽器必須安裝了相關(guān)的多媒體插件才能夠觀看這些多媒體文件雙標(biāo)簽定義<embedsrc="movie.swf"width="300"height="200"></embed><div><objectclassid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"codebase="/pub/shockwave/cabs/flash/swflash.cab#version=9,0,2,8"width="475"height="447"><paramname="allowFullScreen"value="true"></param><paramname="movie"value="/swf/player.swf?vid=2004592&uid=1287557785"></param><embedsrc="/swf/player.swf?vid=2004592&uid=1287557785"type="application/x-shockwave-flash"allowFullScreen="true"width="475"height="447"></embed></object></div><embed,src="…">多媒體文件標(biāo)識(shí)

屬性:

SRC="../../FILENAME",

設(shè)定音樂文件的路徑,文件類型除了可以播放.rm;.mp3;.wav等音頻,還可播放.swf 和.mov等視頻.

AUTOSTART=TRUE/FALSE,

是否要音樂文件傳送完就自動(dòng)播放,TRUE是要,FALSE是不要,默認(rèn)為FALSE

LOOP=,設(shè)定播放重復(fù)次數(shù),LOOP=6表示重復(fù)6次,true或-1為無限循環(huán),false為播放一次即停止.

STARTIME="分:秒",

設(shè)定樂曲的開始播放時(shí)間,如20秒后播放寫為STARTIME=00:20

VOLUME=0-100,

設(shè)定音量的大小.如果沒設(shè)定的話,就用系統(tǒng)的音量.

WIDTH,HEIGHT,

設(shè)定控制面板的大小,都設(shè)為0可隱藏播放器

HIDDEN=TRUE,

隱藏控制面板

CONTROLS=CONSOLE/SMALLCONSOLE,

設(shè)定控制面板的樣子,背景音樂<bgsoundsrc=#>#=WAV文件的URL<bgsoundloop=#>#=循環(huán)數(shù)<bgsoundsrc="sound.wav"loop=3><bgsound,src="…">,背景音樂標(biāo)識(shí),只能用于.wav,mp3,au格式.

屬性:

LOOP=,設(shè)定播放重復(fù)次數(shù),LOOP=6表示重復(fù)6次,-1為無限循環(huán),true或false為播放一次即停止.視頻剪輯<imgsrc="url.gif"dynsrc="url.avi">在瀏覽器尚未完全讀入AVI文件時(shí),先在AVI播放區(qū)域顯示該圖象何時(shí)開始播放AVI<imgstart=#>#=fileopen,mouseover<imgsrc="SAMPLE.GIF"dynsrc="SAMPLE-S.AVI"start=mouseover>控制條<imgcontrols>用來在視頻窗口下附加MS-WINDOWS的AVI播放控制條。<imgsrc="SAMPLE-S.GIF"dynsrc="SAMPLE-S.AVI"controls>循環(huán)播放<imgloop=#><loop=infinite>將循環(huán)播放不止。<imgsrc="SAMPLE-S.GIF"dynsrc="SAMPLE-S.AVI"loop=3>屬性

屬性是用來修飾標(biāo)志的,屬性放在開始標(biāo)志內(nèi).通用的屬性有:

對(duì)齊屬性,范圍屬性:

ALIGN=LEFT,左對(duì)齊(缺省值),WIDTH=象素值或百分比,對(duì)象寬度.

ALIGN=CENTER,居中,HEIGHT=象素值或百分比,對(duì)象高度.

ALIGN=RIGHT,右對(duì)齊.

色彩屬性:

COLOR=#RRGGBB,前景色,參考色彩對(duì)照表.

BGCOLOR=#RRGGBB,背景色.<center>表示絕對(duì)居中.

表格基礎(chǔ)在HTML語言中,表格至少由<Table>、<Tr>、<Td>這3個(gè)標(biāo)簽組成。<Table>用于創(chuàng)建表格,雙標(biāo)簽<Tr>用于創(chuàng)建表格行。雙標(biāo)簽,<Td>用于創(chuàng)建每一行又有若干個(gè)表格單元格。雙標(biāo)簽,<caption>標(biāo)題<th>列標(biāo)題border屬性用于指定邊框的厚度,如果其值設(shè)置為零(0),則不顯示邊框。width屬性:指定表格或某一個(gè)表格單元格的寬度。單位可以是%或者像素。height屬性:指定表格或某一個(gè)表格單元格的高度。單位可以是%或者像素。align屬性:指定表格或某一個(gè)單元格里的內(nèi)容(文本、圖片等)的對(duì)齊方式。bordercolor屬性:指定表格或某一個(gè)單元格的邊框顏色。bgcolor屬性:表格或單元格的背景顏色。background屬性:指定表格或某一個(gè)單元格的背景圖片。其屬性值為一個(gè)URL地址。cellpadding屬性:?jiǎn)卧裰袃?nèi)容距離邊框的距離。cellspacing屬性:表格中單元格與單元格之間的距離。valign指定某一個(gè)單元格里的內(nèi)容的垂直對(duì)齊方式。值包括:top、middle、bottomcolspan表示當(dāng)前單元格跨越幾列,實(shí)現(xiàn)單元格合并rowspan表示當(dāng)前單元格跨越幾行如何創(chuàng)建表格語法:<Table> <Tr> <Td>單元格內(nèi)容</Td></Tr></Table>跨多行多列的表格colspan屬性用于創(chuàng)建跨多列的單元格。rowspan屬性用于創(chuàng)建跨多行的單元格。跨多列的表格語法:<Table> <Tr> <Tdcolspan=”所跨的列數(shù)”>單元格內(nèi)容</Td> </Tr></Table>跨多行的表格語法:

<Table> <Tr> <Tdrowspan=”所跨的行數(shù)”>單元格內(nèi)容</Td> </Tr></Table>跨多行多列的表格將上面兩個(gè)結(jié)合運(yùn)用。經(jīng)驗(yàn):一般情況下在設(shè)置表格行和列的時(shí)候,為了保證在表格里不出現(xiàn)空白區(qū)域,可以將跨多列或跨多行的單元格看成多個(gè)單元格,而單元格的個(gè)數(shù)就是所跨的列數(shù)或行數(shù),只要保證各行的單元格列數(shù)相同,就不會(huì)出現(xiàn)空白區(qū)域。表格的美化表格的高度、寬度和邊框。表格、行、列的背景。表格、行、列的對(duì)齊方式。表格的填充、間距屬性。設(shè)置表格的尺寸和邊框如果不指定表格的寬度和高度,瀏覽器就會(huì)根據(jù)表格內(nèi)容的多少自動(dòng)調(diào)整高度和寬度。。。如果不指定表格的邊框?qū)挾龋╞order屬性),則瀏覽器將不顯示表格的邊框。語法<Tablewidth=”表格寬度”height=”表格高度”border=”表格邊框?qū)挾取?gt; ……….</Table>表格的寬度和高度可以用像素來表示。也可以用百分比來表示。設(shè)置表格的背景表格背景語法:<Tablebgcolor=”整個(gè)表格背景顏色”background=”表格背景圖像地址”>…………….</Table>行背景色語法<Trbgcolor=”行的背景顏色”>…………</Tr>單元格背景色語法:<Tdbgcolor=”單元格的背景顏色”>單元格內(nèi)容</Td>設(shè)置對(duì)齊方式屬性align屬性為right(右對(duì)齊)、center(居中)或left(左對(duì)齊),默認(rèn)為“左對(duì)齊”例:<Tdalign=”center”bgcolor=”yellow”>單元格內(nèi)容</Td>設(shè)置填充、間距屬性文字與邊框距離設(shè)置屬性cellpadding表格與表格(表格內(nèi)框)距離設(shè)置屬性cellspacing例:<Tableborder=”29”bordercolor=”red”cellpadding=”30”cellspacing=”39”>………………..</Table>

表單和框架表單HTML表單是HTML頁面與瀏覽器端實(shí)現(xiàn)交互的重要手段。利用表單可以收集客戶端提交的有關(guān)信息<form>表單域,是塊級(jí)別元素定義表單元素作用范圍,向指定的URL傳遞信息雙標(biāo)簽表單包含的控件通常放在<Form></Form>標(biāo)簽對(duì)之間一起使用。<Form></Form>標(biāo)簽屬于一個(gè)容器標(biāo)簽,表示其他標(biāo)簽需要在它的包圍中才有些效。<Form>元素的屬性屬性說明action此屬性指示服務(wù)器上處理表單輸出的程序。一般來說,當(dāng)用戶單擊表單上的“提交”按鈕后,信息發(fā)送到web服務(wù)器上,有由action屬性所指定的程序處理。語法為:action=”URL”method此屬性告訴瀏覽器如何將數(shù)據(jù)發(fā)送給服務(wù)器,它指定向服務(wù)器發(fā)送數(shù)據(jù)的方法(用post方法還是get方法)。如果值為get,瀏覽器創(chuàng)建一個(gè)請(qǐng)求,該請(qǐng)求包含頁面URL、一個(gè)問號(hào)和表單的值。瀏覽器會(huì)將該請(qǐng)求返回給URL中指定的腳本,以進(jìn)行處理。如果將值指定為post,表單上的數(shù)據(jù)會(huì)作為一個(gè)數(shù)據(jù)塊發(fā)送到腳本,而不使用請(qǐng)求字符串。語法為:method=(get|post)一般情況下把method的屬性設(shè)置為post比較安全。使用get提交表單信息不安全。表單元素的統(tǒng)一格式表單元素的統(tǒng)一格式:<Form><Inputtype=”checkbox”name=”gen”value=”男”size=”21”maxlength=4checked=”checked”></Form><Input>元素的屬性屬性說明type此屬性指定表單元素的類型??捎玫倪x項(xiàng)有:text、password、checkbox、radio、submit、reset、file、hidden(隱藏)、image和button。默認(rèn)選項(xiàng)為textname此屬性指定表單元素的名稱。例如,如果表單上有幾個(gè)文本框,可以按名稱來標(biāo)識(shí)它們,如text1、text2等。名稱屬性的作用域?yàn)镕orm元素內(nèi)value此屬性是可選屬性,它指定表單元素的初始值。但如果type為radio,則必須指定一個(gè)值size此屬性指定表單元素的初始寬度。如果type為text或password,則表單元素的大小以字符為單位。對(duì)于其他輸入類型,寬度以像素為單位maxlength此屬性用于指定可在text或password元素中輸入的最大字符數(shù)。默認(rèn)值為無限大。checked此屬性是boolean屬性,指定按鈕是否是被選中的。當(dāng)輸入類型為radio或checkbox時(shí),使用此屬性列表框是通過<Select>和<Option>標(biāo)簽來實(shí)現(xiàn)的。<Select>標(biāo)簽用于顯示可供用戶選擇的下拉列表。每個(gè)選項(xiàng)由一個(gè)<Option>標(biāo)簽標(biāo)識(shí)。<Select>標(biāo)簽必須包含至少一個(gè)<Option>標(biāo)簽。語法:<Selectname=”指定列表名稱”size=”行數(shù)”><Optionvalue=”可選項(xiàng)的值”selected>……</Option><Optionvalue=”可選項(xiàng)的值”>……</Option><Optionvalue=”可選項(xiàng)的值”>……</Option>……..</Select>size確定列表中可同時(shí)看到的行數(shù);selected表示該選項(xiàng)在默認(rèn)情況下是被選中的。屬性值描述DTDdisableddisabled規(guī)定禁用該下拉列表。STFmultiplemultiple規(guī)定可選擇多個(gè)選項(xiàng)。STFnamename規(guī)定下拉列表的名稱。STFsizenumber規(guī)定下拉列表中可見選項(xiàng)的數(shù)目。STF文本組件文本框<inputtype="text"size="10"maxlength="4"value="默認(rèn)值"/>type值text為文本框。size定義文本框的字符寬度。maxlength定義最大字符數(shù)。value定義文本框中的默認(rèn)值。密碼框<inputtype="password"size="10"maxlength="4"value="默認(rèn)值"/>type屬性值password密碼框。多行文本框(文本域)<Textareaname=”textarea”cols=”40”rows=”6”>文本內(nèi)容</Textarea>cols用來指定多行文本框的列數(shù),rows用來指定多行文本框的行數(shù)。此標(biāo)簽不能使用value屬性來賦值。<textarea>雙標(biāo)簽,定義多行文本域。

<textarearows="10"cols="50"></textarea>rows定義文本區(qū)域的高度。cols定義文本區(qū)域的寬度。沒有value屬性,默值內(nèi)容寫在開始和結(jié)束標(biāo)簽之間選擇組件下拉按鈕<select>行內(nèi)對(duì)象,定義下拉列表,雙標(biāo)簽<option>塊級(jí)別元素,定義列表項(xiàng),雙標(biāo)簽定義 <select><optionvalue="1">搖滾 <optionvalue="2"selected="selected">爵士<optionvalue="3">流行 </select>value定義下拉列表的值。selected定義默認(rèn)選中的狀態(tài)。單選框<inputtype="radio"name="sex"checked="checked"/>type值radio為單選按鈕。name定義單選按鈕的名稱,多個(gè)單選按鈕的名稱必須一致。checked定義單選按鈕默認(rèn)的選中狀態(tài)。<inputtype="radio"name="sex"checked="checked"/>是<inputtype="radio"name="sex"/>否復(fù)選按鈕(復(fù)選框)<inputtype="checkbox"checked="checked"/>type值checkbox為復(fù)選按鈕。按鈕在HTML中按鈕分為3種:分別是普通按鈕(button)、提交按鈕(submit)、重置按鈕(reset)。普通按鈕主要用來響應(yīng)onClick事件,提交按鈕用來提交表單信息。重置按鈕用來清除表單中已填信息。語法:<Inputtype=”reset”name=”Reset”value=”重填”>若type=”buttom”表示是普通按鈕;若type=”submit”表示是提交按鈕;若type=”reset”表示是重置按鈕。name是用來給按鈕起名字。value用來設(shè)置顯示在按鈕上的文字。buttonSubmit<inputtype="submit"value="確定提交"/>Reset<inputtype="reset"value="重新填寫"/>圖像域<inputtype="image"height="20"height="80"src="denglu.gif"/>type值image為圖像域。src定義圖像域中圖片源文件的路徑位置。文件域(文件上傳)<inputtype="file"size="10"/>type值file為文件域??蚣?frameset)框架就是將一個(gè)窗口分成幾個(gè)部分,并且在每個(gè)部分都可以調(diào)用一個(gè)HTML文檔。一個(gè)框架結(jié)構(gòu)是由兩部分組成的:框架(Frame):是瀏覽器窗口中的一個(gè)區(qū)域,它可以顯示與瀏覽器窗口其余部分中所顯示內(nèi)容無關(guān)的網(wǎng)頁文件。框架集(Frameset):是一個(gè)網(wǎng)頁文件,它將一個(gè)窗口通過橫向或縱向的方式分割成多個(gè)框架,每個(gè)框架中要顯示的都是不同的網(wǎng)頁文件。不同的網(wǎng)頁文件可以通過超鏈接聯(lián)系起來。框架可以將屏幕分割成不同的區(qū)域,每個(gè)區(qū)域有自己的URL,通過Frames[]數(shù)組對(duì)象來實(shí)現(xiàn)不同框架的訪問框架的基本結(jié)構(gòu)框架集(Frameset)頁面的結(jié)構(gòu)是通過屬性rows和cols來設(shè)置的。語法:<FrameSetcols=”25%,50%,*”rows=”50%,*”border=”5”> <Framesrc=”the_first.html”> ……..</FrameSet>FrameSet是一個(gè)框架的集合。Frame標(biāo)簽可以提供對(duì)單獨(dú)HTML文檔URL引用,每個(gè)html文檔占據(jù)一個(gè)框架。cols將頁面沿垂直方向分割為幾個(gè)窗口。rows將頁面沿水平方向分割為幾個(gè)窗口。src指定框架窗口的源文件。對(duì)其中一個(gè)頁面再次分割時(shí)需要使用<FrameSet>標(biāo)簽代替<Frame>標(biāo)簽。例:<FrameSetrows=”20%,*”> <Framesrc=”top.html”name=”topframe”scrolling=”no”> <FrameSetcols=”20%,*”> <Framesrc=”left.html”name=”left.html”scrolling=”no”> <Framesrc=”right.html”name=”right.html”> </FrameSet></FrameSet>如果一個(gè)頁面有<FrameSet>標(biāo)簽存在,就不能有<Body>標(biāo)簽存在。設(shè)置窗口連接的顯示位置使用<Frame>標(biāo)簽中的name屬性和<A>標(biāo)簽的target屬性target目標(biāo)窗口分為兩類:一類是框架頁面之間的鏈接;另一類是4個(gè)特殊窗口的超鏈接??蚣茼撁嬷g的鏈接需要兩步:設(shè)計(jì)好框架集頁面,并為每個(gè)框架窗口定義名稱。如<Framesrc=”right.html”name=”rightframe”>設(shè)置導(dǎo)航欄中的超鏈接的target目標(biāo)窗口屬性,使其值為框架窗口的名字。如:<ahref=”right.html”target=”rightframe”>target屬性主要用于超鏈接<A>標(biāo)簽中使用4個(gè)特殊的窗口語法:<ahref=”url”target=”_blank”>target目標(biāo)窗口的打開方式 屬性值說明_blank新啟一個(gè)窗口打開鏈接_self在同一個(gè)窗口中打開,默認(rèn)取值(指沒有設(shè)置target屬性值時(shí)的情況)_paremt在上一級(jí)窗口中打開(框架頁面中使用較多)_top在整個(gè)瀏覽器窗口中打開訪問框架parent.frames[Index1].docuement.forms[index2]通過parent.frames.length確定窗口中窗體的數(shù)目。

CSS樣式表CSS概述CSS全稱CascadingStyleSheets,就是“層疊樣式表”。它可以使頁面上應(yīng)用了相同層疊樣式表的元素在瀏覽器中顯示出來相同的結(jié)果,或是定義頁面元素的屬性。CSS層疊樣式表是一組樣式的集合,我們可以定義許多的類來控制頁面上不同元素的樣式。主要是基于以下幾點(diǎn)原因:HTML標(biāo)簽的外觀樣式比較單一。樣式表的作用相當(dāng)于華麗的衣服。CSS優(yōu)點(diǎn)改變?yōu)g覽器的默認(rèn)顯示風(fēng)格頁面內(nèi)容和顯示樣式分離可以重用樣式表(CSS樣式表,專注顯示格式)方便網(wǎng)站維護(hù)樣式表的基本結(jié)構(gòu)為:<Styletype=”text/css”>P{color:red;font-size:30px;font-family:隸書;}……..</Style>文檔樣式表的位置有三種:文檔樣式表一般位于HTML文件的頭部,即<Head>和</Head>標(biāo)簽之間,定義的樣式規(guī)則就可應(yīng)用到當(dāng)前頁面中。單獨(dú)的css文件寫在當(dāng)前的標(biāo)簽里面<html><head><title>認(rèn)識(shí)CSS</title><styletype="text/css">body{ background-color:#FFCCFF;}p{font-family:"宋體";font-size:14px;color:#FF0000;}</style></head><body><p>淘寶網(wǎng)的使命是“沒有淘不到的寶貝,沒有賣不出的寶貝”。</p></body></html><html><head><title>a.html</title> <metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"><metahttp-equiv="description"content="thisismypage"><metahttp-equiv="content-type"content="text/html;charset=UTF-8"><linkrel="stylesheet"type="text/css"href="styles.css"> <styletype="text/css"> p{ font-size:40; font-family:華文行楷 } </style> </head><body><spanstyle="font-family:華文琥珀;font-size:50;color:blue">third</span><p>這是我的第一個(gè)CSS</p><div>這是我的第二個(gè)CSS</div></body></html>以下為css文件:@CHARSET"UTF-8";div{ font-family:華文彩云; font-size:40px; color:red; }樣式規(guī)則樣式表按類型可以分為:標(biāo)簽樣式、類樣式、ID樣式。定義標(biāo)簽樣式時(shí)必須寫標(biāo)簽名放在<style>中,在文本中直接調(diào)用。定義類樣式時(shí)必須在類名前加“.”名字可以隨便命名。在文本中需要在標(biāo)簽中加“class=類名”。語法<Pclass=”類名”>內(nèi)容</P>bodybody{background-color:#FF0000;}選擇器屬性值用冒號(hào)隔開CSS為了實(shí)現(xiàn)更精確地控制網(wǎng)頁格式,定義了比HTML更多的屬性。選擇器(selector)的功能:就是從網(wǎng)頁的所有元素中選擇目標(biāo)元素,將聲明的樣式作用于目標(biāo)元素。樣式規(guī)則中的屬性各個(gè)屬性之間要用分號(hào)隔開建議每行只描述一個(gè)屬性CSS一般不區(qū)分大小寫,建議小寫選擇器的不同用法選擇器從網(wǎng)頁的所有元素中選擇目標(biāo)元素,將聲明的樣式作用于目標(biāo)元素經(jīng)常使用的選擇器有以下幾種:標(biāo)簽選擇器類別選擇器ID選擇器群組選擇器派生選擇器偽類選擇器標(biāo)簽選擇器標(biāo)簽選擇器是直接將HTML標(biāo)簽作為選擇器。標(biāo)簽選擇器一旦聲明,那么網(wǎng)頁上所有使用該標(biāo)簽的元素樣式都是一樣的。<styletype="text/css">p{font-size:14px;font-family:"宋體";color:#0000ff;text-align:left;text-indent:2em;}</style>類別選擇器類別選擇器解決個(gè)別元素的不同樣式,任何類選擇器都適應(yīng)于所有的HTML標(biāo)簽。類別選擇器實(shí)現(xiàn)了樣式的靈活共享p{font-size:12px;font-family:"宋體";color:#0000ff;}h2{text-align:center;}.red{color:#ff0000;}……<h2class="red">如何加入“消費(fèi)者保障服務(wù)”?</h2>ID選擇器ID選擇器的使用方法與類別選擇器基本相同。不同之處在于ID選擇器只能在HTML頁面中使用一次。在HTML文檔中需要利用id屬性,使用CSS中的ID選擇器。<styletype="text/css">#red{color:red;}#green{color:green;}</style>……<pid="red">這個(gè)段落是紅色。</p><pid="green">這個(gè)段落是綠色。</p>群組選擇器當(dāng)幾個(gè)元素樣式屬性一樣時(shí),可以共同調(diào)用一個(gè)聲明,元素之間用逗號(hào)分隔。<styletype="text/css">p,h2{color:#0000ff;}p{font-size:12px;font-family:"宋體";text-align:left;text-indent:2em;}h2{text-align:center;}</style>派生選擇器派生選擇器可以實(shí)現(xiàn)給一個(gè)元素里的子元素定義樣式。<styletype="text/css">pb{color:#ff0000;}</style>……<b>我是粗體字</b><p><b>我也是粗體字</b></p>偽類(CSS控制超鏈接)網(wǎng)頁中的鏈接文字的默認(rèn)效果是由IE瀏覽器定義的。使用偽類可以對(duì)鏈接在不同狀態(tài)下定義不同的樣式效果。CSS控制超鏈接樣式超鏈接樣式說明A:link{color:red}未被訪問的鏈接樣式,紅色A:visited{color:green}已被訪問過的鏈接樣式,綠色A:hover{color:yellow}鼠標(biāo)懸浮在鏈接上時(shí)的樣式,黃色A:active{color:blue}鼠標(biāo)正在按下時(shí)鏈接文字的樣式,藍(lán)色<styletype="text/css">a:link{ text-decoration:underline; color:#900b09;}/*未訪問的鏈接樣式*/a:visited{text-decoration:none; color:#900b09; }/*被訪問過的鏈接樣式*/a:hover{text-decoration:underline; color:#ff0000; }/*鼠標(biāo)懸浮時(shí)的鏈接樣式*/a:active{text-decoration:underline; color:#ff0000; }/*鼠標(biāo)點(diǎn)擊時(shí)的鏈接樣式*/</style>樣式規(guī)則順序:LoVeHAte常用的樣式屬性具體的屬性在此不再詳細(xì)例舉可以用Dreamweaver網(wǎng)頁制作工具進(jìn)行查看。 在設(shè)置背景圖片是文件地址要寫在url后面的“()”中 設(shè)置樣式background-image:url(images/type_back.jpg);字體、文本屬性背景屬性列表項(xiàng)目屬性list-stylelist-style-imagelist-style-positionlist-style-typemarker-offset制作圖片按鈕例:<styletype=”text/css”> .picButton{ background-image:url(images/back.jpg); margin:0px; border:0px; padding:0px; height:23px; width:82px; font-size:14px;}</style>樣式表的3個(gè)應(yīng)用方式內(nèi)部樣式表在<head>區(qū)聲明的樣式表,稱為“內(nèi)部樣式表”。內(nèi)部樣式表的特點(diǎn):僅對(duì)本頁面有效。內(nèi)部樣式表的缺點(diǎn):各個(gè)頁面CSS重復(fù)率較高,以后維護(hù)起來不方便。內(nèi)嵌樣式表只對(duì)某張網(wǎng)頁起作用;如果希望某張網(wǎng)頁中部分內(nèi)容“與眾不同”,那么就得采用行內(nèi)樣式;如果讓網(wǎng)站中所有的網(wǎng)頁都擁有一致性的風(fēng)格,那就必須使用外部樣式表文件。外部樣式表文件外部樣式表文件是一個(gè)以.CSS為后綴的CSS文件,這個(gè)樣式文件可以被多個(gè)網(wǎng)頁引用,從而保證多個(gè)網(wǎng)頁具有統(tǒng)一風(fēng)格。把樣式表寫在一個(gè)以.css為后綴的CSS文件里。HTML文檔中使用<link>引用這個(gè)文件.css文件推薦使用外部樣式表根據(jù)樣式文件與網(wǎng)頁的關(guān)聯(lián)方式,又分為兩種:鏈接外部樣式表和導(dǎo)入樣式表鏈接外部樣式表鏈接外部樣式表是指通過HTML的LINK(鏈接)標(biāo)簽,把樣式文件和網(wǎng)頁建立關(guān)聯(lián),這是早期瀏覽器的用法,格式如下:<HEAD> <Linkrel=”stylesheet”type=”text/css”href=”newstyle.css”></HEAD>其中,rel=”stylesheet”表示在網(wǎng)頁中使用這個(gè)外部樣式表,type=”text/css”表示文本類型的樣式,href=’’newstyle.css”指定樣式文件。<html><head><title>淘寶網(wǎng)</title><linkrel="stylesheet"href="mystyle.css"type="text/css"></head><body><h2>如何加入“消費(fèi)者保障服務(wù)”?</h2>導(dǎo)入樣式表使用@import方法導(dǎo)入樣式表。<Head> <Styletype=”text/css”> @import樣式表文件.css; </Style></Head>經(jīng)驗(yàn):如果有多個(gè)樣式規(guī)則作用域同一個(gè)頁面時(shí),樣式規(guī)則起作用的優(yōu)先級(jí)是:行內(nèi)樣式表(寫在標(biāo)簽內(nèi)的)>內(nèi)嵌樣式表(寫在文檔頭部的)>外部樣式表(在外部文件中)。行內(nèi)樣式表如果某個(gè)樣式規(guī)則使用頻率不高,只是極個(gè)別元素使用,可以把樣式定義在元素的標(biāo)簽里。<body><h2>如何加入“消費(fèi)者保障服務(wù)”?</h2><pstyle=“color:red;font-size:16px;”>您可以通過“我的淘寶”->“我是賣家”->“消費(fèi)者保障服務(wù)”申請(qǐng)加入。在申請(qǐng)加入之前請(qǐng)先確認(rèn)自己是否符合加入消費(fèi)者保障服務(wù)的條件,如果符合申請(qǐng)要求,您可以點(diǎn)擊“申請(qǐng)加入”按鈕提交申請(qǐng)。</P>三種樣式表的特點(diǎn)樣式表的“最近原則”如果一個(gè)網(wǎng)頁應(yīng)用了三種樣式表,樣式表的控制權(quán)遵循“最近原則”。即HTML元素離哪個(gè)樣式表近,就受那個(gè)樣式表的控制。如果離得最的樣式表定義的規(guī)則少,那么較遠(yuǎn)的樣式表定義規(guī)則會(huì)補(bǔ)充。盒子模型基本結(jié)構(gòu)盒子模型用來實(shí)現(xiàn)靈活的排版和一些特效。border-topborder-top(邊框)border-bottomborder-leftborder-rightElement(元素)padding-leftpadding-rightpadding-top(內(nèi)邊距,填充)padding-bottom盒子Margin-leftMargin-rightMargin-top(邊界,外邊距)Margin-bottom盒子所占空間盒子模型的屬性合子模型屬性簡(jiǎn)寫上、右、下、左邊界都為30pxmargin:30px;上、下邊界為30px;左、右邊界為50px;margin:30px50px;上邊界為30px;左右邊界為50px;下邊界為60px;margin:30px50px60px;四個(gè)數(shù)值依次表示上、右、下、左邊界值margin:30px50px20px50px;在HTML中,一切元素皆為盒子。display屬性可以改變HTML元素的默認(rèn)顯示類型,常用值:block、inline、none<styletype="text/css">table{width:200px;display:inline;margin:0px50px0px0;}</style><tableborder="1"><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table><tableborder="1"><tr><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td></tr></table>div和span都屬于容器元素。它們的區(qū)別:div屬于塊元素,span屬于內(nèi)聯(lián)元素。

使用DreamWeaver制作網(wǎng)頁創(chuàng)建錨記在“文檔”窗口的“設(shè)計(jì)”視圖中,將插入點(diǎn)放在需要命名錨記的地方。執(zhí)行下列操作之一:選擇菜單“插入”→“命名錨記”命令。按下Ctrl+Alt+A組合鍵。在插入欄的“常用”類別中,單擊“命名錨記”按鈕。為錨記命名。鏈接到命名錨記,在“文檔”窗口的“設(shè)計(jì)”視圖中,選擇要從其創(chuàng)建鏈接的文本或圖像。在“屬性”檢查器的“鏈接”文本框中,輸入一個(gè)數(shù)字符號(hào)(#)和錨記名稱。注:在“鏈接”文本框中輸入的名稱必須與錨記的名稱完全一致。換行,換段將插入點(diǎn)放置在文本塊的任一位置。然后“屬性”檢查器中的“格式”下拉列表框中選擇“段落”選項(xiàng)。或者選擇“文本”→“段落格式”→“段落”命令。將插入點(diǎn)放置在該文本塊的需要換行的位置然后按下Shift+Enter組合鍵。如果要設(shè)置文本之類的屬性,則設(shè)置在菜單欄中找文本在那里面找所要設(shè)置的屬性。

網(wǎng)站設(shè)計(jì)和頁面布局技術(shù)(一)網(wǎng)站開發(fā)的流程:需求分析網(wǎng)站制作測(cè)試網(wǎng)站發(fā)布網(wǎng)站創(chuàng)建站點(diǎn)先在硬盤上創(chuàng)建一個(gè)文件夾,用于存放站點(diǎn)。選擇“站點(diǎn)”→“管理站點(diǎn)”命令,然后在彈出的“站點(diǎn)管理”對(duì)話框中選擇“新建”→“站點(diǎn)”命令,此時(shí)將彈出“站點(diǎn)定義”對(duì)話框。在“站點(diǎn)定義”對(duì)話框中,輸入站點(diǎn)名稱,然后單擊“下一步”。在出現(xiàn)的站點(diǎn)定義為對(duì)話框中,選擇“否,我不想使用服務(wù)器技術(shù)”單選按鈕,然后單擊“下一步”按鈕。選擇“編輯我的計(jì)算機(jī)上的副本,完成后在再上傳到服務(wù)器”單選按鈕。存放站點(diǎn)位置。單擊“選擇”按鈕之后,然后單擊“下一步”按鈕。在“您如何連接到遠(yuǎn)程服務(wù)器?”選項(xiàng)中,從下拉列表框中選擇“無”選項(xiàng),然后單擊“下一步”按鈕。接著將顯示一份總結(jié)。描述選定的選項(xiàng)。如果滿意繼續(xù)單擊“下一步”否則單擊“上一步”按鈕進(jìn)行修改。頁面布局目前比較流行的布局有3種,即框架布局、表格布局和DIV布局。ID選擇器ID選擇器使用HTML元素的ID屬性,其用法與類選擇器很類似。ID選擇器的定義格式為:#ID名{ 樣式規(guī)則;}ID名前面不需有“#”,ID名可以隨意命名。語法格式為:<DIVid=”ID名”>內(nèi)容</DIV>網(wǎng)站設(shè)計(jì)和頁面布局技術(shù)(二)制作模板創(chuàng)建模板的兩種方法將現(xiàn)有的HTML文檔保存為模板,選擇“文件”→“打開”命令,在“打開”對(duì)話框中,選擇要?jiǎng)?chuàng)建為模板的現(xiàn)有文檔。選擇“文件”→“另存為模板”命令,將出現(xiàn)“另存為模板”對(duì)話框。在對(duì)話框中,從“站點(diǎn)”下拉框中選擇要保存模板的站點(diǎn)。在“另存為”文本框中,輸入模板的名稱。單擊“保存”按鈕。此文檔以.dwt為擴(kuò)展名保存在“Templates”文件夾下。在空白HTML文檔中從頭開始創(chuàng)建。選擇“窗口”→“資源”命令或按F11鍵,將會(huì)出現(xiàn)“資源”面板。單擊“資源”面板上的“模板”圖標(biāo),將顯示“模板”面板。單擊“模板”面板右下角的“新建模板”圖標(biāo)。在“名稱”字段中輸入新建模板名稱。單擊“模板面板右下角的“編輯”圖標(biāo)。在“文檔”窗口中,將打開該空白模板。在此模板中,可以添加DIV塊區(qū)域、表格、文本、圖像和其他頁面元素。經(jīng)驗(yàn):在使用模板時(shí)需謹(jǐn)記,不能將模板從“Templates”文件夾中移出,也不能將非模板文件放在“Templates”文件夾下。而且,不能將“Templates”文件夾從站點(diǎn)的本地根文件夾中移出,否則將導(dǎo)致“Templates”文件夾的路徑出錯(cuò)。定義可編輯區(qū)域在“模板”文檔中選擇要設(shè)置為可編輯的區(qū)域。在插入欄的“常用”選項(xiàng)卡中,單擊“模板”圖標(biāo),在彈出的下拉菜單中選擇“可編輯區(qū)域”命令。或者選擇“插入”→“模板對(duì)象”→“可編輯區(qū)域”命令。或者右擊選中的區(qū)域,然后選擇“模板”→“新建可編輯區(qū)域”命令?;蛘甙碈trl+Alt+V組合鍵。在出現(xiàn)的“新建可編輯區(qū)域”對(duì)話框的“名稱”文本框中,為該區(qū)域輸入一個(gè)唯一的名稱。刪除可編輯區(qū)域選擇要編輯的區(qū)域。選擇“修改”→“模板”→“刪除模板標(biāo)記”命令。應(yīng)用模板新建要應(yīng)用模板的空白文檔在“資源”面板中單擊“模板”圖標(biāo),找到要應(yīng)用的模板。將模板從面板拖到空白“文檔”窗口中。在可編輯區(qū)域添加或編輯數(shù)據(jù)。經(jīng)驗(yàn):在應(yīng)用模板時(shí)需注意,未應(yīng)用模板的HTML文檔一定是空白文檔,即不要添加任何內(nèi)容,這樣在應(yīng)用模板時(shí)不會(huì)出現(xiàn)問題,否則,會(huì)出現(xiàn)應(yīng)用不成功。

JAVAWEB開發(fā)詳解安裝Tomcat之前要先安裝JDK,然后配置JAVA_HOME的路徑,可從上下載最新版本的JDK。Tomcat可從ApacheJakartaProject站點(diǎn)(/site/binindex.cgi)上下載,對(duì)于Windows操作系統(tǒng),Tomcat5.5.7提供了兩種安裝文件,一種是jakarta-tomcat-5.5.7.exe,一種是jakarta-tomcat-5.5.7.zip(如果讀者使用的是Linux系統(tǒng),請(qǐng)下載jakarta-tomcat-5.5.7.tar.gz)。jakarta-tomcat-5.5.7.exe是可執(zhí)行的安裝程序,讀者只需要雙擊這個(gè)文件,就可以開始安裝Tomcat了。在安裝過程中,安裝程序會(huì)自動(dòng)搜尋JDK和JRE的位置。安裝完成后,在Windows系統(tǒng)的“開始”->“程序”菜單下會(huì)添加ApacheTomcat5.5菜單組。jakarta-tomcat-5.5.7.zip是一個(gè)壓縮包,只需要將它解壓到硬盤上就可以了。在這里,我建議讀者下載jakarta-tomcat-5.5.7.zip壓縮包,通過解壓縮的方式安裝Tomcat,因?yàn)榻鈮嚎s的方式也適用于其他的操作系統(tǒng),例如Linux系統(tǒng)。下面我們主要介紹jakarta-tomcat-5.5.7.zip的安裝與Tomcat運(yùn)行環(huán)境的設(shè)置。圖5-7新建JAVA_HOME環(huán)境變量打開后,添加如下代碼安裝Tomcat使用WinZip或WinRAR等解壓縮工具將jakarta-tomcat-5.5.7.zip解壓到指定的驅(qū)動(dòng)器和目錄中。筆者是在D盤上直接解壓,產(chǎn)生了目錄jakarta-tomcat-5.5.7,解壓后的文件存放于D:\jakarta-tomcat-5.5.7下。Tomcat安裝后的目錄層次結(jié)構(gòu)如圖5-2所示。圖5-2Tomcat5.5.7目錄層次結(jié)構(gòu)各目錄的用途如表5-1所示。表5-1Tomcat的目錄結(jié)構(gòu)及其用途目錄用途/bin存放啟動(dòng)和關(guān)閉Tomcat的腳本文件/common/lib存放Tomcat服務(wù)器及所有Web應(yīng)用程序都可以訪問的JAR文件/conf存放Tomcat服務(wù)器的各種配置文件,其中包括server.xml(Tomcat的主要配置文件)、tomcat-users.xml和web.xml等配置文件/logs存放Tomcat的日志文件/server/lib存放Tomcat服務(wù)器運(yùn)行所需的各種JAR文件/server/webapps存放Tomcat的兩個(gè)Web應(yīng)用程序:admin應(yīng)用程序和manager應(yīng)用程序/shared/lib存放所有Web應(yīng)用程序都可以訪問的JAR文件/temp存放Tomcat運(yùn)行時(shí)產(chǎn)生的臨時(shí)文件/webapps當(dāng)發(fā)布Web應(yīng)用程序時(shí),通常把Web應(yīng)用程序的目錄及文件放到這個(gè)目錄下/workTomcat將JSP生成的Servlet源文件和字節(jié)碼文件放到這個(gè)目錄下從表5-1中可以看到,/common/lib目錄、/server/lib和/shared/lib目錄下都可以存放JAR文件,它們的區(qū)別在于:—在/server/lib目錄下的JAR文件只能被Tomcat服務(wù)器訪問;—在/shared/lib目錄下的JAR文件可以被所有的Web應(yīng)用程序訪問,但不能被Tomcat服務(wù)器訪問;—在/common/lib目錄下的JAR文件可以被Tomcat服務(wù)器和所有的Web應(yīng)用程序訪問。此外,對(duì)于后面將要介紹的JavaWeb應(yīng)用程序,在它的WEB-INF目錄下,也可以建立lib子目錄,在lib子目錄下可以存放各種JAR文件,這些JAR文件只能被當(dāng)前Web應(yīng)用程序所訪問。HYPERLINK5.5.2運(yùn)行Tomcat在Tomcat安裝目錄下的bin子目錄中,有一些批處理文件(以.bat作為后綴名的文件),其中的startup.bat就是啟動(dòng)Tomcat的腳本文件,用鼠標(biāo)雙擊這個(gè)文件,將會(huì)看到如圖5-3所示的畫面。圖5-3運(yùn)行Tomcat提示出錯(cuò)信息筆者以前碰到過很多學(xué)員,在初次運(yùn)行Tomcat時(shí),看到如圖5-3所示的信息就不知所措了。有的學(xué)員以前還配置過Tomcat,但是再次使用的時(shí)候,由于忘記了上次是如何配置的,同樣感覺無從下手。我們?cè)趯W(xué)習(xí)軟件開發(fā)時(shí),一定要養(yǎng)成查看錯(cuò)誤提示信息,進(jìn)而根據(jù)錯(cuò)誤提示解決問題的良好習(xí)慣。筆者第一次配置Tomcat時(shí),就是根據(jù)錯(cuò)誤提示信息一步一步配置成功的。很多人一看見錯(cuò)誤信息,立即單擊“確定”按鈕,這樣就錯(cuò)過了提示信息。當(dāng)看到錯(cuò)誤信息時(shí),首先不要慌張和無所適從,仔細(xì)看清楚錯(cuò)誤提示,不要著急單擊按鈕。查看圖5-3中的錯(cuò)誤提示信息,可以看到這樣一句話“TheJAVA_HOMEenvironmentvariableisnotdefined”,從畫面中可以看到,在執(zhí)行到“UsingJAVA_HOME”這句時(shí)出現(xiàn)了錯(cuò)誤,由此,我們可以想到,出錯(cuò)的原因可能是因?yàn)闆]有設(shè)置JAVA_HOME環(huán)境變量。那么JAVA_HOME環(huán)境變量的值應(yīng)該是什么呢?很容易就能想到應(yīng)該是JDK所在的目錄,在筆者的機(jī)器上,JDK所在的目錄是D:\Java\jdk1.5.0_01。在Windows2000操作系統(tǒng)下設(shè)置環(huán)境變量的步驟如下。①在桌面“我的電腦”上單擊右鍵,選擇“屬性”,出現(xiàn)如圖5-4所示的畫面。圖5-4“我的電腦”屬性②單擊“高級(jí)”選項(xiàng)卡,選擇“環(huán)境變量(E)…”,如圖5-5和圖5-6所示。圖5-5“高級(jí)”選項(xiàng)卡圖5-6“環(huán)境變量”對(duì)話框③在“系統(tǒng)變量”下方單擊“新建”按鈕。在“變量名”中輸入“JAVA_HOME”,在變量值中輸入JDK所在的目錄“D:\Java\jdk1.5.0_01”,然后單

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(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ǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論