整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          網(wǎng)頁在線視頻播放代碼大全

          用說明:把代碼中的視頻路徑換成與自己的相對路徑或絕對路徑,播放器的窗口大小,根據(jù)需要修改高和寬的參數(shù)。

          1.avi格式

          復(fù)制代碼

          代碼如下:

          <object id="video" width="400" height="200" border="0" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">

          <param name="ShowDisplay" value="0">

          <param name="ShowControls" value="1">

          <param name="AutoStart" value="1">

          <param name="AutoRewind" value="0">

          <param name="PlayCount" value="0">

          <param name="Appearance value="0 value=""">

          <param name="BorderStyle value="0 value=""">

          <param name="MovieWindowHeight" value="240">

          <param name="MovieWindowWidth" value="320">

          <param name="FileName" value="http://www.jb51.net/sample.avi">

          <embed width="400" height="200" border="0" showdisplay="0" showcontrols="1" autostart="1" autorewind="0" playcount="0" moviewindowheight="240" moviewindowwidth="320" filename="http://www.jb51.net/sample.avi" src="sample.avi">

          </embed>

          </object>

          2.mpg格式

          復(fù)制代碼

          代碼如下:

          <object classid="clsid:05589FA1-C356-11CE-BF01-00AA0055595A" id="ActiveMovie1" width="239" height="250">

          <param name="Appearance" value="0">

          <param name="AutoStart" value="-1">

          <param name="AllowChangeDisplayMode" value="-1">

          <param name="AllowHideDisplay" value="0">

          <param name="AllowHideControls" value="-1">

          <param name="AutoRewind" value="-1">

          <param name="Balance" value="0">

          <param name="CurrentPosition" value="0">

          <param name="DisplayBackColor" value="0">

          <param name="DisplayForeColor" value="16777215">

          <param name="DisplayMode" value="0">

          <param name="Enabled" value="-1">

          <param name="EnableContextMenu" value="-1">

          <param name="EnablePositionControls" value="-1">

          <param name="EnableSelectionControls" value="0">

          <param name="EnableTracker" value="-1">

          <param name="Filename" value="http://www.jb51.net/sample.mpg" valuetype="ref">

          <param name="FullScreenMode" value="0">

          <param name="MovieWindowSize" value="0">

          <param name="PlayCount" value="1">

          <param name="Rate" value="1">

          <param name="SelectionStart" value="-1">

          <param name="SelectionEnd" value="-1">

          <param name="ShowControls" value="-1">

          <param name="ShowDisplay" value="-1">

          <param name="ShowPositionControls" value="0">

          <param name="ShowTracker" value="-1">

          <param name="Volume" value="-480">

          </object>

          3.rm格式

          復(fù)制代碼

          代碼如下:

          <OBJECT ID=video1 CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" HEIGHT=288 WIDTH=352> <param name="_ExtentX" value="9313">

          <param name="_ExtentY" value="7620">

          <param name="AUTOSTART" value="0">

          <param name="SHUFFLE" value="0">

          <param name="PREFETCH" value="0">

          <param name="NOLABELS" value="0">

          <param name="SRC" value="rtsp://203.207.131.35/vod/dawan-a.rm";>

          <param name="CONTROLS" value="ImageWindow">

          <param name="CONSOLE" value="Clip1">

          <param name="LOOP" value="0">

          <param name="NUMLOOP" value="0">

          <param name="CENTER" value="0">

          <param name="MAINTAINASPECT" value="0">

          <param name="BACKGROUNDCOLOR" value="#000000"><embed SRC type="audio/x-pn-realaudio-plugin" CONSOLE="Clip1" CONTROLS="ImageWindow" HEIGHT="288" WIDTH="352" AUTOSTART="false"> </OBJECT>

          4.wmv格式

          復(fù)制代碼

          代碼如下:

          <object id="NSPlay" width=200 height=180 classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715" standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject" align="right" hspace="5">

          <!-- ASX File Name -->

          <param name="AutoRewind" value=1>

          <param name="FileName" value="xxxxxx.wmv">

          <!-- Display Controls -->

          <param name="ShowControls" value="1">

          <!-- Display Position Controls -->

          <param name="ShowPositionControls" value="0">

          <!-- Display Audio Controls -->

          <param name="ShowAudioControls" value="1">

          <!-- Display Tracker Controls -->

          <param name="ShowTracker" value="0">

          <!-- Show Display -->

          <param name="ShowDisplay" value="0">

          <!-- Display Status Bar -->

          <param name="ShowStatusBar" value="0">

          <!-- Diplay Go To Bar -->

          <param name="ShowGotoBar" value="0">

          <!-- Display Controls -->

          <param name="ShowCaptioning" value="0">

          <!-- Player Autostart -->

          <param name="AutoStart" value=1>

          <!-- Animation at Start -->

          <param name="Volume" value="-2500">

          <param name="AnimationAtStart" value="0">

          <!-- Transparent at Start -->

          <param name="TransparentAtStart" value="0">

          <!-- Do not allow a change in display size -->

          <param name="AllowChangeDisplaySize" value="0">

          <!-- Do not allow scanning -->

          <param name="AllowScan" value="0">

          <!-- Do not show contect menu on right mouse click -->

          <param name="EnableContextMenu" value="0">

          <!-- Do not allow playback toggling on mouse click -->

          <param name="ClickToPlay" value="0">

          </object>

          5:最簡單的播放代碼

          復(fù)制代碼

          代碼如下:

          <embed src="http://www.jb51.net/sample.wmv" autostart="true" loop="true" width="200" height="150" >

          6:有圖像的rm格式

          復(fù)制代碼

          代碼如下:

          <OBJECT classid=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA height=288 id=video1 width=305 VIEWASTEXT>

          <param name=_ExtentX value=5503>

          <param name=_ExtentY value=1588>

          <param name=AUTOSTART value=-1>

          <param name=SHUFFLE value=0>

          <param name=PREFETCH value=0>

          <param name=NOLABELS value=0>

          <param name=SRC value=//www.jb51.net/sample.ram>

          <param name=CONTROLS value=Imagewindow,StatusBar,ControlPanel>

          <param name=CONSOLE value=RAPLAYER>

          <param name=LOOP value=0>

          <param name=NUMLOOP value=0>

          <param name=CENTER value=0>

          <param name=MAINTAINASPECT value=0>

          <param name=BACKGROUNDCOLOR value=#000000>

          </OBJECT>

          7:無圖像的rm格式:(如相聲,歌曲...)

          復(fù)制代碼

          代碼如下:

          <object ID=video2 WIDTH=300 HEIGHT=62 CLASSID=CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA>

          <param name=_ExtentX value=9657>

          <param name=_ExtentY value=847>

          <param name=AUTOSTART value=-1>

          <param name=SHUFFLE value=0>

          <param name=PREFETCH value=0>

          <param name=NOLABELS value=0>

          <param name=SRC value=//www.jb51.net/sample.rm>

          <param name=CONTROLS value=StatusBar,controlpanel>

          <param name=CONSOLE value=Clip1>

          <param name=LOOP value=0>

          <param name=NUMLOOP value=0>

          <param name=CENTER value=0>

          <param name=MAINTAINASPECT value=0>

          <param name=BACKGROUNDCOLOR value=#000000>

          </object>

          8:最簡單的media格式的播放器

          復(fù)制代碼

          代碼如下:

          <embed src=mms://www.jb51.net/sample.wmv width=200 height=200 autostart=true loop=true></embed>

          9:有圖像的media播放器,自動調(diào)用網(wǎng)上的插件

          復(fù)制代碼

          代碼如下:

          <object id=nstv classid=CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6 width=280 height=265 codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701standby=Loading Microsoft? Windows Media? Player components... type=application/x-oleobject>

          <param name=URL value=//www.jb51.net/sample.wma>

          <PARAM NAME=UIMode value=full><PARAM NAME=AutoStart value=true>

          <PARAM NAME=Enabled value=true>

          <PARAM NAME=enableContextMenu value=false>

          <param name=WindowlessVideo value=true></object>

          10:無圖像的media播放器

          復(fù)制代碼

          代碼如下:

          <object id=nstv classid=CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6 width=280 height=60 codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701standby=Loading Microsoft? Windows Media? Player components... type=application/x-oleobject>

          <param name=URL value=//www.jb51.net/sample.wma>

          <PARAM NAME=UIMode value=full><PARAM NAME=AutoStart value=true>

          <PARAM NAME=Enabled value=true>

          <PARAM NAME=enableContextMenu value=false>

          </object>

          11:在線播放rm格式視頻代碼

          復(fù)制代碼

          代碼如下:

          <object id="player" name="player" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="400" height="272">

          <param name="_ExtentX" value="18415">

          <param name="_ExtentY" value="9102">

          <param name="AUTOSTART" value="-1">

          <param name="SHUFFLE" value="0">

          <param name="PREFETCH" value="0">

          <param name="NOLABELS" value="-1">

          <param name="SRC" value="http://www.jb51.net/sample.rm">

          <param name="CONTROLS" value="Imagewindow">

          <param name="CONSOLE" value="clip1">

          <param name="LOOP" value="0">

          <param name="NUMLOOP" value="0">

          <param name="CENTER" value="0">

          <param name="MAINTAINASPECT" value="0">

          <param name="BACKGROUNDCOLOR" value="#000000">

          </object><br>

          <object ID="RP2" CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" WIDTH="400" HEIGHT="57">

          <param name="_ExtentX" value="18415">

          <param name="_ExtentY" value="1005">

          <param name="AUTOSTART" value="-1">

          <param name="SHUFFLE" value="0">

          <param name="PREFETCH" value="0">

          <param name="NOLABELS" value="-1">

          <param name="SRC" value="http://www.jb51.net/sample.rm">

          <PARAM NAME="CONTROLS" VALUE="ControlPanel,StatusBar">

          <param name="CONSOLE" value="clip1">

          <param name="LOOP" value="0">

          <param name="NUMLOOP" value="0">

          <param name="CENTER" value="0">

          <param name="MAINTAINASPECT" value="0">

          <param name="BACKGROUNDCOLOR" value="#000000">

          </object>

          媒體播放器的外觀界面

          在網(wǎng)頁中,你可以通過相關(guān)屬性來控制媒體播放器的哪些部分出現(xiàn),哪些部分不出現(xiàn)。

          媒體播放器包括如下元素:

          VideoDisplayPanel:視頻顯示面板;

          VideoBorder:視頻邊框;

          ClosedCaptioningDisplayPanel;字幕顯示面板;

          TrackBar;搜索欄;

          ControlBarwithAudioandPositionControls:帶有聲音和位置控制的控制欄;

          GoToBar:轉(zhuǎn)到欄;

          DisplayPanel:顯示面板;

          StatusBar:狀態(tài)欄;

          下面的屬性用來決定顯示哪一個元素:

          ShowControls屬性:是否顯示控制欄(包括播放控件及可選的聲音和位置控件);

          ShowAudioControls屬性:是否在控制欄顯示聲音控件(靜音按鈕和音量滑塊);

          ShowPositionControls屬性:是否在控制欄顯示位置控件(包括向后跳進(jìn)、快退、快進(jìn)、向前跳進(jìn)、預(yù)覽播放列表中的每個剪輯);

          ShowTracker屬性:是否顯示搜索欄;

          ShowDisplay屬性:是否顯示顯示面板(用來提供節(jié)目與剪輯的信息);

          ShowCaptioning屬性:是否顯示字幕顯示面板;

          ShowGotoBar屬性:是否顯示轉(zhuǎn)到欄;

          ShowStatusBar屬性:是否顯示狀態(tài)欄;

          播放列表

          媒體播放器提供下面的方法來訪問播放列表中的剪輯:

          Next方法,跳到節(jié)目(播放列表)中的下一個剪輯;

          Previous方法,跳回到節(jié)目中的上一個剪輯;

          媒體播放器的一個特性是能夠預(yù)覽節(jié)目中的每一個剪輯,使用如下屬性:

          PreviewMode屬性,決定媒體播放器當(dāng)前是否處于預(yù)覽模式;

          CanPreview屬性,決定媒體播放器能否處于預(yù)覽模式;

          在windows媒體元文件中,可以為每一個剪輯指定預(yù)覽時間——PREVIEWDURATION,如果沒有指定,那么默認(rèn)的預(yù)覽時間是10秒鐘。

          你也可以用Windows媒體元文件來添加watermarks與banners,元文件也支持插入廣告時的無間隙流切換。

          節(jié)目信息

          使用GetMediaInfoString方法可以返回相關(guān)剪輯或節(jié)目的如下信息:

          文件名:Filename

          標(biāo)題:Title

          描述:Description

          作者:Author

          版權(quán):Copyright

          級別:Rating

          URLs:logoicon、watermark、banner的地址

          剪輯信息可以放在媒體文件中,也可以放在Windows媒體元文件中,或者兩者都放。如果在元文件中指定了剪輯信息,那么用GetMediaInfoString方法返回的就是元文件中的信息,而不會返回剪輯中包含的信息。

          在元文件中,附加信息可以放置在每一個剪輯或節(jié)目的PARAM標(biāo)簽中。你可以為每個剪輯添加任意多個PARAM標(biāo)簽,用來存儲自定義的信息或鏈接到相關(guān)站點(diǎn)。在PARAM標(biāo)簽中的信息可以通過GetMediaParameter方法來訪問。

          下面的屬性返回有關(guān)大小和時間的信息:

          ImageSourceHeight、ImageSourceWidth:返回圖像窗口的顯示尺寸;

          Duration屬性,返回剪輯的長度(秒),要檢測這個屬性是否包含有效的數(shù)值,請檢查IsDurationValid屬性。(對于廣播的視頻,其長度是不可預(yù)知的)。

          字幕

          你可以用.smi文件來為你的節(jié)目添加字幕。媒體播放器支持下面的屬性來處理字幕:

          SAMIFileName屬性,指定.smi文件的名字;

          SAMILang屬性,指定字幕的語言(如果沒有指定則使用第一種語言);

          SAMIStyle屬性,指定字幕的文字大小和樣式;

          ShowCaptioning屬性,決定是否顯示字幕顯示面板;

          腳本命令

          伴隨音頻、視頻流,你可以在流媒體文件中加入腳本命令。腳本命令是多媒體流中與特定時間同步的多對Unicode串。第一個串標(biāo)識待發(fā)命令的類型,第二個串指定要執(zhí)行的命令。

          當(dāng)流播放到與腳本相關(guān)的時間時,控件會向網(wǎng)頁發(fā)送一個ScriptCommand事件,然后由事件處理進(jìn)程來響應(yīng)這個事件。腳本命令字符串會作為腳本命令事件的參數(shù)傳遞給事件處理器。

          媒體播放器會自動處理下面類型的內(nèi)嵌腳本命令:

          1)URL型命令:當(dāng)媒體播放器控件收到一個URL型的命令時,指定的URL會被裝載到用戶的默認(rèn)瀏覽器。如果媒體播放器嵌在一個分幀的HTML文件中,URL頁可以裝載到由腳本命令指定的幀內(nèi)。如果腳本命令沒有指定一個幀,將由DefaultFrame屬性決定將URL頁裝入哪一幀。

          你可以通過設(shè)置InvokeURLs屬性來決定是否自動處理URL型的腳本命令。如果這個屬性的值為false,媒體播放器控件將忽視URL型命令。但是腳本命令事件仍會觸發(fā),這就允許你有選擇地處理URL型命令。

          URL型命令指定的是URL的相對地址。基地址是由BaseURL屬性指定的。媒體播放器控件傳送的腳本命令事件的命令參數(shù)是鏈接好的地址。

          2)FILENAME型命令:當(dāng)媒體播放器控件收到一個FILENAME型的命令時,它將FileName屬性設(shè)置為腳本命令提供的文件,之后媒體播放器會打開這個文件開始播放。媒體播放器控件總是自動處理FILENAME型命令,不象URL型命令,它們不能被禁止。

          3)TEXT型命令:當(dāng)媒體播放器控件收到一個TEXT型的命令時,它會將命令的內(nèi)容顯示在控件的字幕窗口。內(nèi)容可以是純文本的,也可以是HTML。

          4)EVENT型命令:當(dāng)媒體播放器控件收到一個EVENT型的命令時,它會在媒體元文件中搜索EVENT元素的NAME屬性。如果NAME屬性與腳本命令中的第二個字符串匹配,媒體播放器控件就執(zhí)行包含在EVENT元素中的條目。

          5)OPENEVENT型命令:當(dāng)媒體播放器控件收到一個OPENEVENT型的命令時,它會在媒體元文件中檢查EVENT元素,并打開匹配的標(biāo)題,但不播放,直到收到來自EVENT型命令的同名真實(shí)事件。

          捕捉鍵盤和鼠標(biāo)事件

          EnableContextMenu與ClickToPlay屬性為用戶提供了在圖像窗口進(jìn)行操作的方法。

          如果EnableContextMenu屬性為true,在圖像窗口右擊鼠標(biāo)可以打開關(guān)聯(lián)菜單,如果將ClickToPlay屬性設(shè)為true,用戶可以單擊圖像窗口進(jìn)行播放與暫停的切換。

          要接收鼠標(biāo)移動和單擊事件,請將SendMouseMoveEvents和SendMouseClickEvents屬性設(shè)為true。鼠標(biāo)事件有:

          MouseDown,當(dāng)用戶按下鼠標(biāo)時產(chǎn)生;

          MouseUp,當(dāng)用戶釋放鼠標(biāo)時產(chǎn)生;

          MouseMove,當(dāng)用戶移動鼠標(biāo)時產(chǎn)生;

          Click,當(dāng)用戶在媒體播放器上單擊鼠標(biāo)按鈕時產(chǎn)生;

          DbClick,當(dāng)用戶在媒體播放器上雙擊鼠標(biāo)按鈕時產(chǎn)生;

          要接收鍵盤事件,請將SendKeyboardEvents屬性設(shè)為true。鍵盤事件有:

          KeyDown,當(dāng)用戶按下一個鍵時產(chǎn)生;

          KeyUp,當(dāng)用戶釋放一個鍵時產(chǎn)生;

          KeyPress,當(dāng)用戶按下并釋放一個鍵時產(chǎn)生;

          監(jiān)測流狀態(tài)與網(wǎng)絡(luò)鏈接

          流狀態(tài)屬性包括:

          PlayState:播放狀態(tài);

          OpenState:打開狀態(tài);

          Bandwidth:帶寬;

          支持的事件有:

          OpenStateChange:打開狀態(tài)改變(僅當(dāng)SendOpenStateChangeEvents屬性為true時觸發(fā))

          PlayStateChange:播放狀態(tài)改變(僅當(dāng)SendPlayStateChangeEvents屬性為true時觸發(fā))

          EndOfStream:流結(jié)束時觸發(fā);

          NewStream:打開新流時觸發(fā);

          網(wǎng)絡(luò)接收屬性包括:

          ReceptionQuality:接收質(zhì)量;

          ReceivedPackets:已經(jīng)收到的包;

          LostPackets:丟失的包;

          監(jiān)測緩沖的屬性有:

          BufferingTime:緩沖時間;

          BufferingCount:緩沖次數(shù);

          BufferingProgress:緩沖進(jìn)程;

          Buffering:緩沖事件;

          錯誤處理

          媒體播放器提供了內(nèi)建的錯誤處理功能——在對話框或狀態(tài)欄顯示錯誤信息。另外,你可以自己添加錯誤處理程序。如果SendErrorEvents屬性設(shè)置為true,將不會顯示錯誤框,而是發(fā)送錯誤事件;如果SendErrorEvents屬性設(shè)置為false,將顯示錯誤框,而是發(fā)送錯誤事件。

          媒體播放器支持下面的錯誤處理事件:

          Error事件,指有危險性錯誤發(fā)生;

          Warning事件,指發(fā)生了非危險性的錯誤;

          當(dāng)你的應(yīng)用程序接收到一個錯誤事件,你可以檢測下面的屬性來確定具體的錯誤信息:

          HasError:檢測目前的媒體播放器是否有錯誤;

          ErrorCode:提供與該類型錯誤相關(guān)的代碼值;

          ErrorDescription:提供錯誤的描述信息;

          ErrorCorrection:指定媒體播放器對該類型的錯誤進(jìn)行校正;

          播放CD

          媒體播放器將CD看作(在每個音軌的開頭具有標(biāo)記的)單一音頻流。要在網(wǎng)頁中使用CD,你需要將FileName屬性設(shè)為CDAUDI,必須帶有冒號,如下所示:

          復(fù)制代碼

          代碼如下:

          <HTML>

          <HEAD><TITLE>CDAudioPlaybackExample</TITLE></HEAD>

          <BODY>

          <OBJECTID="MediaPlayer"

          CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"

          WIDTH="320"

          HEIGHT="508"

          STYLE="position:absolute;left:0px;top:70px;">

          <PARAMNAME="FileName"VALUE="cdaudi">

          <PARAMNAME="AutoStart"VALUE="0">

          <PARAMNAME="ShowControls"VALUE="1">

          <PARAMNAME="ShowStatusBar"VALUE="1">

          <PARAMNAME="ShowDisplay"VALUE="1">

          </OBJECT>

          </BODY>

          </HTML>

          之后你可以用Play方法播放CD了。

          你可以在windows媒體元文件中指定播放順序以及每個音軌的信息。示例如下:

          <ASXVERSION="3.0">

          <TITLE>CDAudiowiththeMediaPlayer</TITLE>

          <AUTHOR>WindowsMediaTechnologies</AUTHOR>

          <COPYRIGHT>(c)1999,Microsoft,Inc.</COPYRIGHT>

          <ENTRY>

          <TITLE>Track1:Title1</TITLE>

          <REFhref="/blog/cdaudi"/>

          <STARTMARKERNUMBER="1"/>

          <ENDMARKERNUMBER="2"/>

          </ENTRY>

          <ENTRY>

          <TITLE>Track2:Title2</TITLE>

          <REFhref="/blog/cdaudi"/>

          <STARTMARKERNUMBER="2"/>

          <ENDMARKERNUMBER="3"/>

          </ENTRY>

          <ENTRY>

          <TITLE>Track3:Title3</TITLE>

          <REFhref="/blog/cdaudi"/>

          <STARTMARKERNUMBER="3"/>

          <ENDMARKERNUMBER="4"/>

          </ENTRY>

          <ENTRY>

          <TITLE>Track4:Title4</TITLE>

          <REFhref="/blog/cdaudi"/>

          <STARTMARKERNUMBER="4"/>

          </ENTRY>

          </ASX>

          網(wǎng)頁中添加視頻、聲音、動畫等,可以增強(qiáng)用戶體驗(yàn)。在HTML5之前,為網(wǎng)頁添加多媒體的唯一辦法,就是使用第三方的插件(如,Adobe Flash等)。

          HTML5中,提供了對多媒體的原生支持,只需通過 video 元素,就可以向網(wǎng)頁嵌入視頻、電影或音頻資源,通過 audio 元素向網(wǎng)頁嵌入音頻資源,省時省力。

          HTML中嵌入視頻和音頻代碼

          一、視頻

          在HTML5時代,在網(wǎng)頁中嵌入視頻非常簡單,只需要一個 video 元素,并設(shè)置它的 src 屬性,使其鏈接一個視頻地址就可以完全搞定了,這個太esay了

          <video src="media/vedio.mp4"></video>

          把這個網(wǎng)站在IE8中打開一看,網(wǎng)站上除了一片空白外,什么也沒有,這是為什么呢?

          原來 video 是HTML5最新引入的元素,并不是所有瀏覽器都支持它,IE8及以下版本都無法識別 video 標(biāo)簽。如果瀏覽器不識別 video標(biāo)簽,則會忽略它,當(dāng)做什么都沒有。這就是網(wǎng)站上一片空白的原因。

          這個問題好解決,只需在 video 標(biāo)簽之間放置文本信息,不支持 video 標(biāo)簽的老瀏覽器,會顯示 video 標(biāo)簽之間的文本信息,以提示用戶瀏覽器不支持 video,就這么簡單!

          <video src="media/vedio.mp4">

          你的瀏覽器已經(jīng)老掉牙了,不支持video,還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~!

          </video>

          在IE8上打開一看,確實(shí)顯示了提示文本,這下好多了,至少用戶知道自己的瀏覽器不能播放視頻,該換瀏覽器了。

          下載了Opera瀏覽器的最新版本25.0,打開一看,怎么還是一片空白外!Opera瀏覽器明明是支持video標(biāo)簽的,那又是為什么呢?

          這個就得從視頻的編碼格式說起了。video 元素支持三種視頻格式:Ogg、MP4、WebM。

          Ogg是帶有Theora視頻編碼和Vorbis音頻編碼的文件,后綴名為 .ogg;MP4是帶有H.264視頻編碼和AAC音頻編碼的MP4文件,后綴名為 .mp4;WebM是VP8視頻編碼和Vorbis音頻編碼的文件,后綴名為 .webm。

          這個Opera瀏覽器呢,它可以支持ogg,但不支持mp4。由于Opera支持video標(biāo)簽,故video標(biāo)簽之間的文本信息沒有顯示出來,但它不支持ogg,所以就不進(jìn)行播放,最終導(dǎo)致頁面出現(xiàn)一片空白。這下可怎么辦呢?

          其實(shí)辦法有的是,我們可以從網(wǎng)上下載一副圖像,放到視頻播放窗口,如果視頻無法播放,就顯示這張圖片,是不是更好呢?從網(wǎng)上下載一張美女圖片,干脆叫beauty.jpg吧。那這個圖像怎么添加到視頻窗口呢?

          video標(biāo)簽有個poster 屬性,就是專門在視頻窗口放置圖片的。poster是一個video的占位符,無論什么情況下,只要視頻還沒有播放(視頻下載過程中、視頻不存在、不支持該視頻類型、用戶點(diǎn)擊播放按鈕前),就會顯示該圖像,可以看做是視頻播放之前插入的宣傳畫或海報。

          <video src="media/vedio.mp4" poster = "img/beauty.jpg">

          你的瀏覽器已經(jīng)老掉牙了,不支持video,還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~!

          </video>

          在Opera瀏覽器上刷新一下,真的有一個美女沖著自己微笑呢。雖然視頻沒有播放出來,這回心情卻是好多了。

          那我可不能一天到晚只看美女呀,視頻還是還是要想辦法播放出來的。既然Opera瀏覽器不支持mp4,我們就換成需要ogg吧,這樣就肯定沒問題了。

          我想了想,這個辦法不好,萬一某個瀏覽器只支持支持ogg,不支持mp4呢。這年頭,什么都缺,就是不缺點(diǎn)子,隨便在網(wǎng)上一搜,辦法就有了。

          在 video 元素中添加 source 元素,就可以解決這個問題。在source 元素中,通過 src 屬性指定視頻的地址,通過 type 屬性指定視頻的類型,以幫助瀏覽器決定是否能播放該視頻。并且,在 video 元素中可以添加任意多個source 元素,讓不同的 source 元素鏈接到不同的視頻文件。

          這樣的話,當(dāng)瀏覽器發(fā)現(xiàn) video 元素時,首先會查看它本身是否定義了 src 屬性。如果沒有,就會檢查 source 元素。瀏覽器會逐個查看這些視頻源,直到找到一個可以播放的視頻。一旦找到,就會播放它并忽略其他的視頻源。我們干脆添加兩個source,一個是mp4,一個是ogg,這下視頻是一定能播放出來了。

          <video poster = "img/beauty.jpg">

          <source src="media/vedio.mp4" type="video/mp4">

          <source src="media/vedio.ogg" type="video/ogg">

          你的瀏覽器已經(jīng)老掉牙了,不支持video,還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~!

          </video>

          在Opera瀏覽器上又刷新一下,只有美女沖著我微笑,視頻還是沒播放出來。唉,太粗心了,忘記添加播放視頻的控件了。

          在video標(biāo)簽中,通過添加controls 屬性來為視頻添加播放控件,方便用戶執(zhí)行播放、暫停操作和音量控制。

          <video poster = "img/beauty.jpg" controls>

          (此處略去500字…)

          </video>

          在Opera瀏覽器上又刷新一下,效果真的不一樣,這次不僅看到美女,還看到了視頻控件。用鼠標(biāo)猛戳一下那個播放按鈕,哈哈,不錯,真的聽到美妙的旋律。我們的ogg文件,終于播放出來了,讓我們好好享受一下吧O(∩_∩)O。

          聽了一會,忽然一想,不對呀,我剛才點(diǎn)了播放按鈕后,等了半天才聽到聲音。能不能我一點(diǎn)播放按鈕,就立即播放呢?

          原來視頻也是需要下載緩存的,點(diǎn)擊播放按鈕后,首先緩存,然后才播放的。那能不能在頁面加載的同時就緩存呢。這樣,用戶點(diǎn)擊播放后,就不必等待了。

          這當(dāng)然可以,在video標(biāo)簽中,通過添加preload屬性來為視頻添加預(yù)加載功能,在頁面加載的同時加載視頻。

          <video poster = "img/beauty.jpg" controls preload>

          (此處略去500字…)

          </video>

          關(guān)于 preload 屬性,稍微再啰嗦一點(diǎn),就是可以把它設(shè)置為 metadata,讓瀏覽器僅僅預(yù)加載視頻的基本信息,如尺寸、時長、以及一些關(guān)鍵的幀。這樣的話,在開始播放之前,瀏覽器可以提前計算視頻的顯示尺寸。

          既然一切都OK了!讓我們看看mp4是不是能正常播放。下載最新版的Google Chrome 38.0瀏覽器,打開網(wǎng)頁,猛戳一下播放按鈕。

          等等~,等等~,不對,怎么只有聲音沒有畫面,明明是mp4格式的文件呀?使用暴風(fēng)影音試了一下,是有畫面的呀!

          辛辛苦苦又在網(wǎng)上搜了一番,花了整整586秒,終于找到了答案。mp4視頻需要h.264編碼格式才會有圖像的。

          找了一個 h.264 編碼格式的 mp4 試了一下,不錯,確實(shí)有圖像了!看了半天,原來是一部老外的電影,嘰里咕嚕一陣,一句話也沒聽懂。那O(∩_∩)O~,能否提供中文字幕呢,這樣就不必費(fèi)老大勁去聽了!

          HTML5中,通過在video元素添加track元素為視頻添加字幕。字幕文件有兩種格式:WebVTT和TTML。WebVTT是Web視頻文本軌跡(Web Video Text Track),是UTF-8編碼格式的文本文件;TTML是時序文本標(biāo)記語言(Timed Text Markup Language),是XML格式的文件。兩種文件的具體格式,已經(jīng)超出我們的討論范圍。

          video元素支持添加多個track元素,不同的track元素鏈接到不同的字幕文件。用戶可以在各個字幕間進(jìn)行切換。

          <video poster = "img/beauty.jpg" controls preload>

          <track src="en_track.vtt" kind="subtitles" srclang="en" label="English" default>

          <track src="cn_track.vtt" kind="captions" srclang="zh" label="簡體中文">

          </video>

          track元素中,src屬性指定字幕文件的URL;srclang屬性字幕文件的語言類型,若kind 屬性值是 "subtitles" 時,該屬性必需的;label 屬性指定字幕標(biāo)簽,每個字幕元素必需設(shè)置一個唯一不重復(fù)的標(biāo)簽,切換字幕時,會顯示標(biāo)簽的名稱;kind指定字幕內(nèi)容類型,只能是subtitles、captions、descriptions、chapters、metadata 之一;default屬性指定是否是默認(rèn)字幕,如果一個都沒指定,將不會自動顯示字幕。

          除了字幕外,我還希望對視頻進(jìn)行過多的控制,比如讓視頻自動播放、循環(huán)播放、默認(rèn)靜音,以及視頻窗口的尺寸等等,這些都能做到嗎?

          這已經(jīng)不是什么事了,video 元素已經(jīng)提供了相關(guān)屬性,根據(jù)需要設(shè)置相應(yīng)的屬性就可以了。這些屬性及含義見表 23:

          HTML中嵌入視頻和音頻代碼

          哦,原來這么簡單呀!那就到此為止吧,網(wǎng)頁中嵌入視頻的全部代碼都在這里,就打包給你吧!

          <video width="300" poster="img/beauty.jpg" controls preload autoplay loop muted>

          <source src="media/vedio.mp4">

          <source src="media/vedio.ogg">

          <track src="en_track.vtt" kind="subtitles" srclang="en" label="English" default>

          <track src="cn_track.vtt" kind="captions" srclang="zh" label="簡體中文">

          你的瀏覽器已經(jīng)老掉牙了,不支持video,還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~!

          </video>

          睜大眼睛一看,卻只有7行代碼。然而,就這區(qū)區(qū)7行代碼,可把他折磨得夠嗆。

          看著這一切都全部搞定,他仰望著天空,長長呼了一口氣,顯得是那么的放松,那么的愜意。此時,他閉上眼睛,在自己的夢幻世界里遨游!


          二、音頻

          有了在網(wǎng)頁中嵌入視頻的經(jīng)歷,要在網(wǎng)頁中嵌入音頻,那簡直就是小菜一碟了。只要把vedio元素?fù)Q成 audio 元素,就全部搞定。

          但需要了解的是,audio 所支持的音頻格式只有Ogg Vorbis、mp3 和 wav。還要知道,由于音頻沒有畫面,也就沒有 width、height、poster 屬性,而其他屬性都支持,并且跟視頻的含義相同。

          網(wǎng)頁中嵌入音頻的代碼如下:

          <audio controls preload autoplay loop muted>

          <source src="media/audio.mp3">

          <source src="media/audio.wav">

          <source src="media/audio.ogg">

          你的瀏覽器已經(jīng)老掉牙了,不支持audio,還不趕快使用現(xiàn)代瀏覽器O(∩_∩)O~!

          </audio>

          )貼圖:<img src="圖片地址">

          2)加入連接:<a href="所要連接的相關(guān)地址">寫上你想寫的字</a>

          1)貼圖:<img src="圖片地址">

          2)加入連接:<a href="所要連接的相關(guān)地址">寫上你想寫的字</a>

          3)在新窗口打開連接:<a href="相關(guān)地址" target="_blank">寫上要寫的字</a>

          消除連接的下劃線在新窗口打開連接:

          <a href="相關(guān)地址" style="text-decoration:none" target="_blank">寫上你想寫的字</a>

          4)移動字體(走馬燈):<marquee>寫上你想寫的字</marquee>

          5)字體加粗:<b>寫上你想寫的字</b>

          6)字體斜體:<i>寫上你想寫的字</i>

          7)字體下劃線: <u>寫上你想寫的字</u>

          8)字體刪除線: <s>寫上你想寫的字</s>

          9)字體加大: <big>寫上你想寫的字</big>

          10)字體控制大小:<h1>寫上你想寫的字</h1> (其中字體大小可從h1-h5,h1最大,h5最小)

          11)更改字體顏色:<font color="#value">寫上你想寫的字</font>(其中value值在000000與ffffff(16位進(jìn)制)之間

          12)消除連接的下劃線:<a href="相關(guān)地址" style="text-decoration:none">寫上你想寫的字</a>

          13)貼音樂:<embed src=音樂地址 width=300 height=45 type=audio/mpeg autostart="false">

          14)貼flash: <embed src="flash地址" width="寬度" height="高度">

          15)貼影視文件:<img dynsrc="文件地址" width="寬度" height="高度" start=mouseover>

          16)換行:<br>

          17)段落:<p>段落</p>

          18)原始文字樣式:<pre>正文</pre>

          19)換帖子背景:<body background="背景圖片地址">

          20)固定帖子背景不隨滾動條滾動:<body background="背景圖片地址" body

          bgproperties=fixed>

          21)定制帖子背景顏色:<body bgcolor="#value">(value值見10)

          22)帖子背景音樂:<bgsound="背景音樂地址" loop=infinite>

          23)貼網(wǎng)頁:<iframe src="相關(guān)地址" width="寬度" height="高度"></iframe>

          /----------------------------------------HTML特效代碼--------------------------------/

          1。忽視右鍵

            <body oncontextmenu="return false">

            或

            <body style="overflow-y:hidden">

          2。加入背景音樂

            IE:<bgsound src="*.mid" loop=infinite>

            NS:<embed src="*.mid" autostart=true hidden=true loop=true>

            </embed>

            *.mid你的背景音樂的midi格式文件

          3。簡單的window.open方法

            <a href="#"

            onclick="javascript :window.open(文件路徑/文件名,newwindow,

            toolbar=no,scrollbars=yes,resizable=no,top=0,left=0,

            width=400,height=300);">文字或圖片</a>

            參數(shù)解釋:

            <SCRIPT LANGUAGE="javascript"> js腳本開始;

            window.open 彈出新窗口的命令;

            文件路徑/文件名 彈出窗口的文件名;

            newwindow 彈出窗口的名字(不是文件名),非必須,可用空代替;

            width=400 窗口寬度;

            height=300 窗口高度;

            top=0 窗口距離屏幕上方的象素值;

            left=0 窗口距離屏幕左側(cè)的象素值;

            toolbar=no 是否顯示工具欄,yes為顯示;

            menubar,scrollbars 表示菜單欄和滾動欄。

            resizable=no 是否允許改變窗口大小,yes為允許;

            location=no 是否顯示地址欄,yes為允許;

            status=no 是否顯示狀態(tài)欄內(nèi)的信息(通常是文件已經(jīng)打開),yes為允許;

            </SCRIPT> js腳本結(jié)束

          4。簡單的頁面加密

            <script LANGUAGE="javascript">

            <!--

            function loopy(){

          var sWord ="";

          while(sWord!="login"){sWord=prompt("請輸入你的登陸密碼");}

          alert("登陸成功!");

            }

            loopy()

            //-->

            </script>

          5。拉動頁面時背景圖不動

            <style>

            body{background-image:url(logo.gif);

            background-repeat:no-repeat;background-position:center}

            </style>

          6。讓瀏覽器在保存頁面時保存失敗

            <NOSCRIPT><iframe src="*.html"></iframe></NOSCRIPT>

          7。隨機(jī)替換圖片

            <script>

            document.write(<img src="img/+parseInt(Math.random()*(5))

            +.gif"height="40" width="50">

            </script>

            圖片文件名為0.gif 1.gif 2.gif 3.gif 4.gif

          8。窗口定時關(guān)閉

            先將如下代碼網(wǎng)頁文件的區(qū):

            <script language="javascript">

            function closeit() { setTimeout("self.close()",10000) //毫秒 }

            </script>

            然后再在<body>標(biāo)內(nèi)加入如:<body onload="closeit()">

          9。網(wǎng)頁自動關(guān)閉

            <html>

            <head>

            <object id=closes type="application/x-oleobject"

            classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">

            <param name="Command" value="Close">

            </object>

            </head>

            <body onload="window.setTimeout(closes.Click(),10000)">

            這個窗口會在10秒過后自動關(guān)閉,而且不會出現(xiàn)提示.

            </body>

            </html>

          10。網(wǎng)頁自動刷新

            在head部記入

            <META HTTP-EQUIV="Refresh" content="20">

            其中20為20秒后自動刷新,你可以更改為任意值。

          11。網(wǎng)頁自動轉(zhuǎn)頁

            <META HTTP-EQUIV="Refresh" CONTENT="時間(秒);URL=地址">

          12。保持layer在最前面,而不被Iframe、Object所覆蓋

            在Layer中再插Iframe 或 Object 設(shè)z-Index值

            <div z-Index:2><object xxx></object> # 前面

            <div z-Index:1><object xxx></object> # 后面

            <div id="Layer2" style="position:absolute; top:40;width:400px;

            height:95px;z-index:2"> height=100% width=100%>

            <iframe width=0 height=0></iframe>

            </div>

            <div id="Layer1" style="position:absolute; top:50;width:200px;

            height:115px;z-index:1">

            <iframe height=100% width=100%></iframe>

            </div>

          13。返回上一頁

            <a href=javascript :history.back(1)>『返回上一頁』</a>

          14。關(guān)閉窗口

            <a href=javascript :self.close()>『關(guān)閉窗口』</a>

          15。關(guān)于iframe的透明背景

            <IFRAME ID="iFrame1" SRC="iframe.htm"

            allowTransparency="true"

            style="background-color: green"></IFRAME>

          16. oncontextmenu="window.event.returnValue=false" 將徹底屏蔽鼠標(biāo)右鍵

          <table border oncontextmenu=return(false)><td>no</table> 可用于Table

          17. <body onselectstart="return false"> 取消選取、防止復(fù)制

          18.onpaste="return false" 不準(zhǔn)粘貼

          19.oncopy="return false;" oncut="return false;" 防止復(fù)制

          20. <link rel="Shortcut Icon" href="favicon.ico"> IE地址欄前換成自己的圖標(biāo)

          21. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夾中顯示出你的圖標(biāo)

          22. <input style="ime-mode:disabled"> 關(guān)閉輸入法

          23. 永遠(yuǎn)都會帶著框架

          <script language="JavaScript"><!--

          if (window == top)top.location.href = "frames.htm"; //frames.htm為框架網(wǎng)頁

          // --></script>

          24. 防止被人frame

          <SCRIPT LANGUAGE=JAVASCRIPT><!--

          if (top.location != self.location)top.location=self.location;

          // --></SCRIPT>

          25. 網(wǎng)頁將不能被另存為

          <noscript><iframe src=*.html></iframe></noscript>

          26. 查看網(wǎng)頁源代碼

          <input type=button value=查看網(wǎng)頁源代碼 onclick="window.location = "view-source:"+ "http://www.pconline.com.cn"">

          27.刪除時確認(rèn)

          <a href="javascript :if(confirm("確實(shí)要刪除嗎?"))location="boos.asp? &areyou=刪除&page=1"">刪除</a>

          28.屏蔽功能鍵Shift,Alt,Ctrl

          <script>

          function look(){

          if(event.shiftKey)

          alert("禁止按Shift鍵!"); //可以換成ALT CTRL

          }

          document.onkeydown=look;

          </script>

          29. 網(wǎng)頁不會被緩存

          <META HTTP-EQUIV="pragma" CONTENT="no-cache">

          <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">

          <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">

          或者<META HTTP-EQUIV="expires" CONTENT="0">

          30.怎樣讓表單沒有凹凸感?

          <input type=text style="border:1 solid #000000">

          或 <input type=text style="border-left:none; border-right:none; border -top:none; border-bottom: 1 solid #000000"></textarea>

          31.不要滾動條?

          讓豎條沒有:

          <body style="overflow:scroll;overflow-y:hidden">

          </body>

          讓橫條沒有:

          <body style="overflow:scroll;overflow-x:hidden">

          </body>

          兩個都去掉?更簡單了

          <body scroll="no">

          </body>

          32.怎樣去掉圖片鏈接點(diǎn)擊后,圖片周圍的虛線?

          <a href="#" onFocus="this.blur()"><img src="logo.jpg" border=0></a>

          33.電子郵件處理提交表單

          <form name="form1" method="post" action="mailt****@***.com" enctype="text/plain">

          <input type=submit>

          </form>

          34.在打開的子窗口刷新父窗口的代碼里如何寫?

          window.opener.location.reload()

          35.如何設(shè)定打開頁面的大小

          <body onload="top.resizeTo(300,200);">

          打開頁面的位置<body onload="top.moveBy(300,200);">

          36.在頁面中如何加入不是滿鋪的背景圖片,拉動頁面時背景圖不動

          <STYLE>

          body

          {background-image:url(logo.gif); background-repeat:no-repeat;

          background-position:center;background-attachment: fixed}

          </STYLE>

          37. 檢查一段字符串是否全由數(shù)字組成

          <script language="Javascript"><!--

          function checkNum(str){return str.match(//D/)==null}

          alert(checkNum("1232142141"))

          alert(checkNum("123214214a1"))

          // --></script>

          38. 獲得一個窗口的大小

          document.body.clientWidth; document.body.clientHeight

          39. 怎么判斷是否是字符

          if (/[^/x00-/xff]/g.test(s)) alert("含有漢字");

          else alert("全是字符");

          40.TEXTAREA自適應(yīng)文字行數(shù)的多少

          <textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight">

          </textarea>

          41. 日期減去天數(shù)等于第二個日期

          <script language=Javascript>

          function cc(dd,dadd)

          {

          //可以加上錯誤處理

          var a = new Date(dd)

          a = a.valueOf()

          a = a - dadd * 24 * 60 * 60 * 1000

          a = new Date(a)

          alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")

          } cc("12/23/2002",2)

          </script>

          42. 選擇了哪一個Radio

          <HTML><script language="vbscript">

          function checkme()

          for each ob in radio1

          if ob.checked then window.alert ob.value

          next

          end function

          </script><BODY>

          <INPUT name="radio1" type="radio" value="style" checked>Style

          <INPUT name="radio1" type="radio" value="barcode">Barcode

          <INPUT type="button" value="check" onclick="checkme()">

          </BODY></HTML>

          43.腳本永不出錯

          <SCRIPT LANGUAGE="JavaScript">

          <!-- Hide function killErrors(){return true;} window.onerror = killErrors; // -->

          </SCRIPT>

          44.ENTER鍵可以讓光標(biāo)移到下一個輸入框

          <input onkeydown="if(event.keyCode==13)event.keyCode=9">

          45. 檢測某個網(wǎng)站的鏈接速度:

          把如下代碼加入<body>區(qū)域中:

          <script language=Javascript>

          tim=1

          setInterval("tim++",100)

          b=1

          var autourl=new Array()

          autourl[1]="www.njcatv.net"

          autourl[2]="javacool.3322.net"

          autourl[3]="www.sina.com.cn"

          autourl[4]="www.nuaa.edu.cn"

          autourl[5]="www.cctv.com"

          function butt(){

          document.write("<form name=autof>")

          for(var i=1;i<autourl.length;i++)

          document.write("<input type=text name=txt"+i+" size=10 value=測試中

          ……> =》<input type=text

          name=url"+i+" size=40> =》<input type=button value=GO

          onclick=window.open(this.form.url"+i+".value)><br>")

          document.write("<input type=submit value=刷新></form>")

          }

          butt()

          function auto(url){

          document.forms[0]["url"+b].value=url

          if(tim>200)

          {document.forms[0]["txt"+b].value="鏈接超時"}

          else

          {document.forms[0]["txt"+b].value="時間"+tim/10+"秒"} b++ }

          function run(){for(var i=1;i<autourl.length;i++)document.write("<img src=http://"+autourl+"/"+Math.random()+" width=1 height=1 nerror=auto("http://"+autourl+"")>")}

          run()</script>

          46. 各種樣式的光標(biāo)

          auto :標(biāo)準(zhǔn)光標(biāo)

          default :標(biāo)準(zhǔn)箭頭

          hand :手形光標(biāo)

          wait :等待光標(biāo)

          text :I形光標(biāo)

          vertical-text :水平I形光標(biāo)

          no-drop :不可拖動光標(biāo)

          not-allowed :無效光標(biāo)

          help :?幫助光標(biāo)

          all-scroll :三角方向標(biāo)

          move :移動標(biāo)

          crosshair :十字標(biāo)

          e-resize

          n-resize

          nw-resize

          w-resize

          s-resize

          se-resize

          sw-resize

          47、禁止鼠標(biāo)右鍵,把Demo的圖片全都設(shè)為表格的背景,表格的大小與圖片的大小一樣。這樣做看起來是一樣的,主要是防止鼠標(biāo)經(jīng)過圖片時會出現(xiàn)另存的按鈕。禁止鼠標(biāo)右鍵的代碼很簡單:

          <script LANGUAGE="JavaScript">

          function click() { if (event.button==2)

          {alert(呵呵,不好意思,你甭想使用右鍵下載圖片:)); } } document.onmousedown=click

          </script>

          48、在網(wǎng)頁的Head部分加入如下代碼,這段代碼的主要功能是屏蔽PrintScreen鍵,不斷清空剪貼版,防止圖片被用文件——另存為菜單另存。

          <script language="javascript">

          <!--

          function testclip(){

          try {

          if(clipboardData.getData("Text")||clipboardData.getData("HTML")||clipboardData.getData("URL"))

          {

          null;

          }

          }

          catch(e){

          clipboardData.setData("Text","")

          }

          setTimeout("testclip()",500)

          }

          testclip();

          //-->

          </script>

          /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

          1. 將徹底屏蔽鼠標(biāo)右鍵

          <table border oncontextmenu=return(false)><td>no</table> 可用于Table

          2. <body> 取消選取、防止復(fù)制

          3. 不準(zhǔn)粘貼

          4. 防止復(fù)制

          5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址欄前換成自己的圖標(biāo)

          6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夾中顯示出你的圖標(biāo)

          7. <input style="ime-mode:-Disabled"> 關(guān)閉輸入法

          8. 永遠(yuǎn)都會帶著框架

          <script language="javascript"><!--

          if (window == top)top.location.href = "frames.htm"; //frames.htm為框架網(wǎng)頁

          // --></script>

          9. 防止被人frame

          <SCRIPT LANGUAGE=javascript><!--

          if (top.location != self.location)top.location=self.location;

          // --></SCRIPT>

          10. 網(wǎng)頁將不能被另存為

          <noscript><iframe src=*.html></iframe></noscript>

          11. <input type=button value=查看網(wǎng)頁源代碼

          onclick="window.location = `view-source:`+ http://www.51js.com/`";>

          12.刪除時確認(rèn)

          <a href=`javascript:if(confirm("確實(shí)要刪除嗎?"location="boos.asp?&areyou=刪除&page=1"`>刪

          除</a>

          13. 取得控件的絕對位置

          //javascript

          <script language="javascript">

          function getIE(E){

          var t=e.offsetTop;

          var l=e.offsetLeft;

          while(e=e.offsetParent){

          t+=e.offsetTop;

          l+=e.offsetLeft;

          }

          alert("top="+t+"/nleft="+l);

          }

          </script>

          //VBScript

          <script language="VBScript"><!--

          function getIE()

          dim t,l,a,b

          set a=document.all.img1

          t=document.all.img1.offsetTop

          l=document.all.img1.offsetLeft

          while a.tagName<>"BODY"

          set a = a.offsetParent

          t=t+a.offsetTop

          l=l+a.offsetLeft

          wend

          msgbox "top="&t&chr(13)&"left="&l,64,"得到控件的位置"

          end function

          --></script>

          14. 光標(biāo)是停在文本框文字的最后

          <script language="javascript">

          function cc()

          {

          var e = event.srcElement;

          var r =e.createTextRange();

          r.moveStart(`character`,e.value.length);

          r.collapse(true);

          r.select();

          }

          </script>

          <input type=text name=text1 value="123">

          15. 判斷上一頁的來源

          javascript:

          document.referrer

          16. 最小化、最大化、關(guān)閉窗口

          <object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">

          <param name="Command" value="Minimize"></object>

          <object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">

          <param name="Command" value="Maximize"></object>

          <OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">

          <PARAM NAME="Command" value="Close"></OBJECT>

          <input type=button value=最小化 onclick=hh1.Click()>

          <input type=button value=最大化 onclick=hh2.Click()>

          <input type=button value=關(guān)閉 onclick=hh3.Click()>

          本例適用于IE

          17.屏蔽功能鍵Shift,Alt,Ctrl

          <script>

          function look(){

          if(event.shiftKey)

          alert("禁止按Shift鍵!"; //可以換成ALT CTRL

          }

          document.onkeydown=look;

          </script>

          18. 網(wǎng)頁不會被緩存

          <META HTTP-EQUIV="pragma" CONTENT="no-cache">

          <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">

          <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">

          或者<META HTTP-EQUIV="expires" CONTENT="0">

          19.怎樣讓表單沒有凹凸感?

          <input type=text style="border:1 solid #000000">

          <input type=text style="border-left:none; border-right:none; border-top:none; border-bottom:

          1 solid #000000"></textarea>

          20.<div><span>&<layer>的區(qū)別?

          <div>(division)用來定義大段的頁面元素,會產(chǎn)生轉(zhuǎn)行

          <span>用來定義同一行內(nèi)的元素,跟<div>的唯一區(qū)別是不產(chǎn)生轉(zhuǎn)行

          <layer>是ns的標(biāo)記,ie不支持,相當(dāng)于<div>

          21.讓彈出窗口總是在最上面:

          <body>

          22.不要滾動條?

          讓豎條沒有:

          <body style=`overflow:-Scroll;overflow-y:hidden`>

          </body>

          讓橫條沒有:

          <body style=`overflow:-Scroll;overflow-x:hidden`>

          </body>

          兩個都去掉?更簡單了

          <body scroll="no">

          </body>

          23.怎樣去掉圖片鏈接點(diǎn)擊后,圖片周圍的虛線?

          <a href="#"><img src="logo.jpg" border=0></a>

          24.電子郵件處理提交表單

          <form name="form1" method="post" action="mailto:****@***.com" enctype="text/plain">

          <input type=submit>

          </form>

          25.在打開的子窗口刷新父窗口的代碼里如何寫?

          window.opener.location.reload()

          26.如何設(shè)定打開頁面的大小

          <body>

          打開頁面的位置<body>

          27.在頁面中如何加入不是滿鋪的背景圖片,拉動頁面時背景圖不動

          <style>

          body

          {background-image:url(logo.gif); background-repeat:no-repeat;

          background-position:center;background-attachment: fixed}

          </style>

          28. 檢查一段字符串是否全由數(shù)字組成

          <script language="javascript"><!--

          function checkNum(str){return str.match(//D/)==null}

          alert(checkNum("1232142141"

          alert(checkNum("123214214a1"

          // --></script>

          29. 獲得一個窗口的大小

          document.body.clientWidth; document.body.clientHeight

          30. 怎么判斷是否是字符

          if (/[^/x00-/xff]/g.test(s)) alert("含有漢字";

          else alert("全是字符";

          31.TEXTAREA自適應(yīng)文字行數(shù)的多少

          <textarea rows=1 name=s1 cols=27>

          </textarea>

          32. 日期減去天數(shù)等于第二個日期

          <script language=javascript>

          function cc(dd,dadd)

          {

          //可以加上錯誤處理

          var a = new Date(dd)

          a = a.valueOf()

          a = a - dadd * 24 * 60 * 60 * 1000

          a = new Date(A)

          alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日"

          }

          cc("12/23/2002",2)

          </script>

          33. 選擇了哪一個Radio

          <HTML><script language="vbscript">

          function checkme()

          for each ob in radio1

          if ob.checked then window.alert ob.value

          next

          end function

          </script><BODY>

          <INPUT name="radio1" type="radio" value="style" checked>style

          <INPUT name="radio1" type="radio" value="barcode">Barcode

          <INPUT type="button" value="check">

          </BODY></HTML>

          34.腳本永不出錯

          <SCRIPT LANGUAGE="javascript">

          <!-- Hide

          function killErrors() {

          return true;

          }

          window.onerror = killErrors;

          // -->

          </SCRIPT>

          35.ENTER鍵可以讓光標(biāo)移到下一個輸入框

          <input>

          36. 檢測某個網(wǎng)站的鏈接速度:

          把如下代碼加入<body>區(qū)域中:

          <script language=javascript>

          tim=1

          setInterval("tim++",100)

          b=1

          var autourl=new Array()

          autourl[1]="http://www.njcatv.net/";

          autourl[2]="javacool.3322.net"

          autourl[3]="http://www.sina.com.cn/";

          autourl[4]="http://www.nuaa.edu.cn/";

          autourl[5]="http://www.cctv.com/";

          function butt(){

          document.write("<form name=autof>"

          for(var i=1;i<autourl.length;i++)

          document.write("<input type=text name=txt"+i+" size=10 value=測試中……> =》<input type=text

          name=url"+i+" size=40> =》<input type=button value=GO

          onclick=window.open(this.form.url"+i+".value)><br>"

          document.write("<input type=submit value=刷新></form>"

          }

          butt()

          function auto(url){

          document.forms[0]["url"+b].value=url

          if(tim>200)

          {document.forms[0]["txt"+b].value="鏈接超時"}

          else

          {document.forms[0]["txt"+b].value="時間"+tim/10+"秒"}

          b++

          }

          function run(){for(var i=1;i<autourl.length;i++)document.write("<img

          src=http://"+autourl+"/"+Math.random()+" width=1 height=1

          onerror=auto(http://";+autourl+"`)>"}

          run()</script>

          37. 各種樣式的光標(biāo)

          auto :標(biāo)準(zhǔn)光標(biāo)

          default :標(biāo)準(zhǔn)箭頭

          hand :手形光標(biāo)

          wait :等待光標(biāo)

          text :I形光標(biāo)

          vertical-text :水平I形光標(biāo)

          no-drop :不可拖動光標(biāo)

          not-allowed :無效光標(biāo)

          help :?幫助光標(biāo)

          all-scroll :三角方向標(biāo)

          move :移動標(biāo)

          crosshair :十字標(biāo)

          e-resize

          n-resize

          nw-resize

          w-resize

          s-resize

          se-resize

          sw-resize

          38.頁面進(jìn)入和退出的特效

          進(jìn)入頁面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">

          推出頁面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">

          這個是頁面被載入和調(diào)出時的一些特效。Duration表示特效的持續(xù)時間,以秒為單位。Transition表示使

          用哪種特效,取值為1-23:

          0 矩形縮小

          1 矩形擴(kuò)大

          2 圓形縮小

          3 圓形擴(kuò)大

          4 下到上刷新

          5 上到下刷新

          6 左到右刷新

          7 右到左刷新

          8 豎百葉窗

          9 橫百葉窗

          10 錯位橫百葉窗

          11 錯位豎百葉窗

          12 點(diǎn)擴(kuò)散

          13 左右到中間刷新

          14 中間到左右刷新

          15 中間到上下

          16 上下到中間

          17 右下到左上

          18 右上到左下

          19 左上到右下

          20 左下到右上

          21 橫條

          22 豎條

          23 以上22種隨機(jī)選擇一種

          39.在規(guī)定時間內(nèi)跳轉(zhuǎn)

          <META http-equiv=V="REFRESH" content="5;URL=http://www.51js.com">

          40.網(wǎng)頁是否被檢索

          <meta name="ROBOTS" content="屬性值">

          其中屬性值有以下一些:

          屬性值為"all": 文件將被檢索,且頁上鏈接可被查詢;

          屬性值為"none": 文件不被檢索,而且不查詢頁上的鏈接;

          屬性值為"index": 文件將被檢索;

          屬性值為"follow": 查詢頁上的鏈接;

          屬性值為"noindex": 文件不檢索,但可被查詢鏈接;

          屬性值為"nofollow": 文件不被檢索,但可查詢頁上的鏈接。

          41.變換網(wǎng)頁的鼠標(biāo)光標(biāo)

          <BODY style="CURSOR: url(http://203.73.125.205/~liangmi2/farmfrog01.cur`)">

          42.怎樣實(shí)現(xiàn)在任務(wù)欄顯示小圖標(biāo)的效果? (要使用絕對地址)

          有些站點(diǎn),訪問時會在地址欄地址前顯出小圖標(biāo),添加到收藏夾后也在收藏欄中顯示圖標(biāo),

          這樣很好的與其它站點(diǎn)有了區(qū)別。

          要達(dá)到這個效果,先需做出這個圖標(biāo)文件,圖像為16*16像素,不要超過16色。文件格式為ico,然后上傳至你的網(wǎng)站。

          然后,在需要的頁面中,加上以下html語句到文件的<head>和</head>之間(假設(shè)以上ico文件的地址http://happyisland.126.com/icon.ico)。

          <link REL="SHORTCUT ICON"href="http:///happyisland.126.com/icon.ico";>

          如果訪問者的瀏覽器是IE5.0,就不需加任何代碼,只要將圖標(biāo)文件上傳到網(wǎng)站的根目錄下即可。

          1,META標(biāo)簽里的代碼是什么意思?

          <META>是放于<HEAD>與</HEAD>之間的標(biāo)記.以下是我總結(jié)它在網(wǎng)頁中最常見的幾種。

          <meta name="Keywords" content="圖片, 新聞, 音樂, 軟件">

          該網(wǎng)頁的關(guān)鍵字,作用于搜索引擎的登錄,事實(shí)上它在現(xiàn)在的網(wǎng)站中并沒什么用。

          <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

          設(shè)定這是 HTML 文件及其編碼語系,簡體中文網(wǎng)頁使用charset=gb2312,繁體中文使用charset=big5,或者不設(shè)編碼也可,純英文網(wǎng)頁建議使用 iso-8859-1。

          <meta name="GENERATOR" content="Microsoft FrontPage 5.0">

          這只表示該網(wǎng)頁由什么編輯器寫的。

          <meta http-equiv="refresh" content="10; url=http://www.hkiwc.com">

          這行較為實(shí)用,能于預(yù)定秒數(shù)內(nèi)自動轉(zhuǎn)到指定網(wǎng)址。原代碼中 10 表示 10秒。

          2,怎么改變滾動條的顏色,只有ie5.5版本以上才能支持。

          這是使用CSS語言,在次說明一下,它和我的瀏覽器版本有一定的關(guān)系。

          scrollbar-arrow-color:上下按鈕上三角箭頭的顏色。

          scrollbar-base-color:滾動條的基本顏色。

          scrollbar-dark-shadow-color:立體滾動條強(qiáng)陰影的顏色

          scrollbar-face-color:立體滾動條凸出部分的顏色

          scrollbar-highlight-color:滾動條空白部分的顏色

          scrollbar-shadow-color立體滾動條陰影的顏色。

          scrollbar-track-color:#99CC33;

          scrollbar-3dlight-color:#A8CBF1;

          代碼如下:

          <style>

          <!--

          BODY {

          scrollbar-face-color:#99CC33;//(立體滾動條凸出部分的顏色)

          scrollbar-highlight-color:#A8CBF1;//(滾動條空白部分的顏色)

          scrollbar-shadow-color:#A8CBF1;//(立體滾動條陰影的顏色)

          scrollbar-arrow-color:#FF9966;//(上下按鈕上三角箭頭的顏色)

          scrollbar-base-color:#A8CBF1; //(滾動條的基本顏色)

          scrollbar-darkshadow-color:#A8CBF1; //(立體滾動條強(qiáng)陰影的顏色)

          scrollbar-track-color:#99CC33;

          scrollbar-3dlight-color:#A8CBF1;

          }

          -->

          </style>

          //以下是其它的網(wǎng)頁的代碼

          在這我補(bǔ)充幾點(diǎn):

          1.讓瀏覽器窗口永遠(yuǎn)都不出現(xiàn)滾動條。

          <body style="overflow-x:hidden;overflow-y:hidden">或<body style="overflow:hidden"> 或<body scroll=no>

          2,沒有水平滾動條

          <body style="overflow-x:hidden">

          3,沒有垂直滾動條

          <body style="overflow-y:hidden">

          3,如何給圖片抖動怎做的.

          <SCRIPT language=javascript1.2>

          <!--

          var rector=2

          var stopit=0

          var a=1

          var count=0

          function init(which){

          stopit=0

          shake=which

          shake.style.left=0

          shake.style.top=0

          }

          function rattleimage(){

          if ((!document.all&&!document.getElementById)||stopit==1||count==100)

          return

          count++

          if (a==1){

          shake.style.top=parseInt(shake.style.top)+rector

          }

          else if (a==2){

          shake.style.left=parseInt(shake.style.left)+rector

          }

          else if (a==3){

          shake.style.top=parseInt(shake.style.top)-rector

          }

          else{

          shake.style.left=parseInt(shake.style.left)-rector

          }

          if (a<4)

          a++

          else

          a=1

          setTimeout("rattleimage()",50)

          }

          function stoprattle(which){

          stopit=1

          count=0

          which.style.left=0

          which.style.top=0

          }

          //-->

          </SCRIPT>

          <style>.shakeimage {POSITION: relative}

          </style>

          <img src="圖片的路徑" onmouseout=stoprattle(this) onmouseover=init(this);rattleimage() class=shakeimage>

          4,在DW如何給水平線加顏色。

          在DW中沒有此項(xiàng)設(shè)置,你只能在HTML中加入代碼:<hr color=red noshade>按F12的預(yù)覽在能看到。由于在NC中不支持<hr>的COLOR屬性,所以在DW中沒有此項(xiàng)設(shè)置。

          5,如何在網(wǎng)頁中實(shí)現(xiàn)flash的全屏播放?

          只要在調(diào)用swf文件的HTML中將WIDTH和HEIGHT的參數(shù)設(shè)為100%即可,當(dāng)然也可以在Flash導(dǎo)出HTML文件的設(shè)置中進(jìn)行設(shè)置,方法是:打開File菜單;選Publish Settings彈出導(dǎo)出設(shè)置對話框;在HTML標(biāo)簽下的Dimensions選項(xiàng),下拉后選中Percent(百分比),并在WIDTH 和HEIGHT框中填100.就行了。

          6,為什么我在DW中插入的Flash動畫缺看不找!

          如果你沒有正確地安裝Dreamweaver和Flash,那么在你預(yù)覽的時候,Dreamweaver會提示你缺少播放的插件,請你按裝InstallAXFlash.exe 并從新啟動計算機(jī)。現(xiàn)在IE6已經(jīng)捆綁這個程序。

          7,在Flash中,如果屏蔽鼠標(biāo)右鍵?FS命令都是什么意思?

          fscommand ("fullscreen", "true/false";(全屏設(shè)置,TRUE開,F(xiàn)ALSE關(guān))

          fscommand ("showmenu", "true/false";(右鍵菜單設(shè)置,TRUE顯示,F(xiàn)ALSE不顯示)

          fscommand ("allowscale", "true/false";(縮放設(shè)置,TRUE自由縮放,F(xiàn)ALSE調(diào)整畫面不影響影片本身的尺寸)

          fscommand ("trapallkeys", "true/false";(快捷鍵設(shè)置,TRUE快捷鍵開,F(xiàn)ALSE快捷鍵關(guān))

          fscommand ("exec";(EXE程序調(diào)用)

          fscommand ("quit";(退出關(guān)閉窗口)

          8,F(xiàn)lash中什么是隱形按鈕。

          利用button中的hit幀來制作只有感應(yīng)區(qū)域而完全透明的按鈕。

          9,如何給Flash動畫做鏈接。

          Dreamweaver是不能給Flash制作鏈接的,只能在Flash中用geturl()加鏈接,然后再插入Dreamweaver中。

          10,DW中的層的技巧。

          層是可以嵌套的,我個人給大家一個技巧,在層面板中按住CTRL再拖放層到你想去成為其子層的地方就行了,我認(rèn)為這是最簡單直觀的方法了。

          11,如何改變鼠標(biāo)的形狀?

          在Dreamweaver4中CSS樣式面板:

          按CTR+SHIFT+E--出現(xiàn)樣式表對話框,點(diǎn)擊NEW,出現(xiàn)編輯對話框,在左邊最后一項(xiàng)extensions-cursor 選擇你要改的指針形式就可以了,然后把你要想改變的地方運(yùn)用樣式表,如果整頁都有在<body bgcolor="#003063" text="#ffffff" id=all>中加入就行了。

          <span style="cursor:X`>樣例</span>

          這里選擇(文本)作為對象,還可以自己改為其他的,如link等。

          x可以等于=hand(手形)、crosshair(十字)、text(文本光標(biāo))、wait(顧名思義啦)、default(默認(rèn)效果)、help(問號)、e-size(向右箭頭)、ne-resize(向右上的箭頭)、nw-resize(向左上的箭頭)、w-resize(向左的箭頭)、sw-resize(左下箭頭)、s-resize(向下箭頭)、se-resize(向右下箭頭)、auto(系統(tǒng)自動給出效果)。

          12,用CSS做郵票,看看吧!

          <input type=button value=我象不象郵票? style="height:80px;border:2px dashed #cccccc">

          13,經(jīng)常上網(wǎng)的朋友可能會到過這樣一些網(wǎng)站,一進(jìn)入首頁立刻會彈出一個窗口,怎么做呢!

          這javascript代碼即可實(shí)現(xiàn),摘錄藍(lán)色論壇。

          【1、最基本的彈出窗口代碼】

          其實(shí)代碼非常簡單:

          <SCRIPT LANGUAGE="javascript">

          <!--

          window.open (`page.html`)

          -->

          </SCRIPT>

          因?yàn)橹且欢蝚avascripts代碼,所以它們應(yīng)該放在<SCRIPT LANGUAGE="javascript">標(biāo)簽和</script>之間。<!-- 和 -->是對一些版本低的瀏覽器起作用,在這些老瀏覽器中不會將標(biāo)簽中的代碼作為文本顯示出來。要養(yǎng)成這個好習(xí)慣啊。

          window.open (`page.html`) 用于控制彈出新的窗口page.html,如果page.html不與主窗口在同一路徑下,前面應(yīng)寫明路徑,絕對路徑(http://)和相對路徑(../)均可。用單引號和雙引號都可以,只是不要混用。

          這一段代碼可以加入HTML的任意位置,<head>和</head>之間可以,<body bgcolor="#003063" text="#ffffff" id=all>間</body>也可以,越前越早執(zhí)行,尤其是頁面代碼長,又想使頁面早點(diǎn)彈出就盡量往前放。

          【2、經(jīng)過設(shè)置后的彈出窗口】

          下面再說一說彈出窗口的設(shè)置。只要再往上面的代碼中加一點(diǎn)東西就可以了。

          我們來定制這個彈出的窗口的外觀,尺寸大小,彈出的位置以適應(yīng)該頁面的具體情況。

          <SCRIPT LANGUAGE="javascript">

          <!--

          window.open (`page.html`, `newwindow`, `height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no`)

          //寫成一行

          -->

          </SCRIPT>

          參數(shù)解釋:

          <SCRIPT LANGUAGE="javascript"> js腳本開始;

          window.open 彈出新窗口的命令;

          `page.html` 彈出窗口的文件名;

          `newwindow` 彈出窗口的名字(不是文件名),非必須,可用空``代替;

          height=100 窗口高度;

          width=400 窗口寬度;

          top=0 窗口距離屏幕上方的象素值;

          left=0 窗口距離屏幕左側(cè)的象素值;

          toolbar=no 是否顯示工具欄,yes為顯示;

          menubar,scrollbars 表示菜單欄和滾動欄。

          resizable=no 是否允許改變窗口大小,yes為允許;

          location=no 是否顯示地址欄,yes為允許;

          status=no 是否顯示狀態(tài)欄內(nèi)的信息(通常是文件已經(jīng)打開),yes為允許;

          </SCRIPT> js腳本結(jié)束

          【3、用函數(shù)控制彈出窗口】

          下面是一個完整的代碼。

          <html>

          <head>

          <script LANGUAGE="javascript">

          <!--

          function openwin() { window.open ("page.html", "newwindow", "height=100, width=400, toolbar=

          no, menubar=no, scrollbars=no, resizable=no, location=no, status=no"

          //寫成一行

          }

          //-->

          </script>

          </head>

          <body>

          …任意的頁面內(nèi)容…

          </body>

          </html>

          這里定義了一個函數(shù)openwin(),函數(shù)內(nèi)容就是打開一個窗口。在調(diào)用它之前沒有任何用途。

          怎么調(diào)用呢?

          方法一:<body> 瀏覽器讀頁面時彈出窗口;

          方法二:<body> 瀏覽器離開頁面時彈出窗口;

          方法三:用一個連接調(diào)用:

          <a href="#">打開一個窗口</a>

          注意:使用的“#”是虛連接。

          方法四:用一個按鈕調(diào)用:

          <input type="button" value="打開窗口">

          14,沒有用表格寫的,讓大家隨便看看,沒什么。

          <html>

          <head>

          <title>江南荷花扇面</title>

          <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

          <style type="text/css">

          <!--

          .font1 { font-size: 12px; color: #999999; text-decoration: none}

          a { font-size: 12px; color: #999999; text-decoration: none}

          a:hover { font-size: 12px; color: #000000; text-decoration: none}

          -->

          </style>

          </head>

          <body bgcolor="#FFFFFF" text="#000000">

          <div class="font1" style="writing-mode=tb-rl;height:200px" width=300>

          <p>盛夏 尚 濤 

          <p><a href="index.htm">一夜露痕黃粉香 袁運(yùn)甫 </a>

          <p>瑤池昨夜新涼 王金嶺

          <p>一朵白蓮隨意開 吳冠南

          <p>新雨迎秋欲滿塘 齊辛民

          <p>十里荷香 齊辛民

          <p>濯清蓮而不妖 盧世曙

          </div>

          </body>

          </html>

          15,IE6已支持自定義cursor!

          語法格式 cursor:url(圖標(biāo)) //cur或是ani文件.

          cur就是WINDOWS中的光標(biāo)(cursor)文件,光標(biāo)文件與圖標(biāo)(ICON)文件除了文件頭有一個位置的值不同外,實(shí)際是一樣的。

          ani是WINDOWS中的動畫光標(biāo)(圖標(biāo))文件。

          <style type="text/css">

          <!--

          .unnamed1 { cursor:url(arrow2c.cur)}

          -->

          </style>

          16,用marquee做的滾動字幕.這也我剛看到論壇的朋友在問。

          語法:

          align=# | top | middle| bottom //對齊方式)

          BEHAVIOR=ALTERNATE | SCROLL | SLIDE //移動的方式

          BGCOLOR=color//底色區(qū)域顏色

          DIRECTION=DOWN | LEFT | RIGHT | UP //移動的方向

          Loop=n //循環(huán)次數(shù)(默認(rèn)是循環(huán)不止)

          Scrolldelay=milliseconds//延時

          height=# width=# //區(qū)域面積

          hspace=# vspace=# //空白區(qū)域

          scrollamount=# //移動的速度

          <marquee align=top behavior=ALTERNATE BGCOLOR=#000000 height=60 width=433 scrollamount=5></marquee>

          17,在FLASH5中也存在一些字體,打散后變成一團(tuán)的事是為什么?有解決的辦法嗎。

          這是大家很常見的問題!可能是對字庫支持的不好!我個是做成透明的gif圖片格式,然后倒入。

          18,flash的網(wǎng)頁里“加入收藏夾”功能怎么實(shí)現(xiàn)?

          在as中加getUrl("java script:window.external.addFavorite(http://skydesigner.51.net`,`我的工作室`)"

          19,在Flash中,文本的動態(tài)屬性和輸入屬性的區(qū)別。

          input text在運(yùn)行時可被用戶或程序改變其值。

          ynamic text僅允許被程序修改。

          20,怎樣在IE中調(diào)用Dreamweaver進(jìn)行編輯.

          相信很多在使用WinME或Window2000的朋友,會遇見是個問題。很簡單,把我們筆記本程序打開,保存為一個 *.reg 文件。雙擊它將信息添加到注冊表即可。

          REGEDIT4

          [HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver]

          [HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell]

          [HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell\edit]

          [HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell\edit\command]

          @="\"c:\Program Files\Macromedia\Dreamweaver 4\dreamweaver.exe\" \"%1\""

          21,設(shè)置表格虛線。

          方法一:作一個1X2的圖。半黑半白,再利用表格作成線。

          方法二:在css里面設(shè),要IE5。5才支持這種效果。

          style="BORDER-LEFT: #000000 1PX DASHED; BORDER-RIGHT: #000000 1PX DASHED; BORDER-TOP: #000000 1PX DASHED; BORDER-BOTTOM: #000000 1PX DASHED"

          22,看看在網(wǎng)頁中調(diào)用HHCtrl控件效果。

          代碼如下:

          <object id="HHC" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"></object><script>HHC.TextPopup("哈哈,大家好,我是閃夢!","",50,5,128255,346751);</script>

          22,如何讓一張圖片有淺到深的漸變。

          <SCRIPT language=javascript1.2>

          <!--

          function high(which2){

          theobject=which2

          highlighting=setInterval("highlightit(theobject)",50)

          }

          function low(which2){

          clearInterval(highlighting)

          which2.filters.alpha.opacity=40

          }

          function highlightit(cur2){

          if (cur2.filters.alpha.opacity<100)

          cur2.filters.alpha.opacity+=10

          else if (window.highlighting)

          clearInterval(highlighting)

          }

          </script>

          <img onmouseout=low(this) onmouseover=high(this) style="FILTER: alpha(opacity=40)"src="logo.gif" >

          23,雙擊鼠標(biāo)左鍵來滾動背景,單擊停止。

          <SCRIPT language=javascript>

          var currentpos,timer;

          function initialize()

          {

          timer=setInterval("scrollwindow()",16);

          }

          function sc(){

          clearInterval(timer);

          }

          function scrollwindow()

          {

          currentpos=document.body.scrollTop;

          window.scroll(0,++currentpos);

          if (currentpos != document.body.scrollTop)

          sc();

          }

          document.onmousedown=sc

          document.ondblclick=initialize

          </SCRIPT>

          24,如何在同一頁面設(shè)置不同文字鏈接效果的樣式.

          代碼如下:

          <HTML><HEAD><TITLE>如何在同一頁面設(shè)置不同文字鏈接效果的樣式</TITLE>

          <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

          <style type="text/css">

          <!--

          a:hover { font-size: 9pt; color: #FF0000; text-decoration: underline}

          a:link { font-size: 9pt; color: #006699; text-decoration: underline}

          a:visited { font-size: 9pt; color: #006699; text-decoration: underline}

          a:active { font-size: 9pt; color: #FF0000; text-decoration: none}

          a.r1:hover { font-size: 9pt; color: #FF0000; text-decoration: underline overline}

          a.r1:link { font-size: 9pt; color: #000000; text-decoration: underline overline}

          a.r1:visited { font-size: 9pt; color: #99CC00; text-decoration: underline overline}

          a.r1:active { font-size: 9pt; color: #000000; text-decoration: underline overline}

          -->

          </style>

          </head>

          <body bgcolor="#FFFFFF" text="#000000">

          <a href="#">下劃線鏈接 </a>

          <p></p>

          <a href="#" class="r1">雙下劃線鏈接</a>

          </BODY>

          </HTML>

          補(bǔ)充說明:

          a:hover 表示鼠標(biāo)劃過時的樣式.

          a:link 表示鏈接的樣式.

          a:active 表示當(dāng)前活動連接的樣式.

          a:visited 表示已經(jīng)訪問過的連接的樣式.

          25, 用CSS給文字加入陰影效果和文字描邊效果。

          .glow{FONT-SIZE: 9pt; FILTER: Glow(Color=#000000, Strength=1)}

          //文字描邊效果

          .shadow {FONT-SIZE: 9pt; FILTER: DropShadow(OffX=1, OffY=1, DropShadow(OffX=1, OffY=1, color:#111111); COLOR: #ffffff; FONT-FAMILY: "宋體"}

          //加入陰影效果

          補(bǔ)充說明:

          這兩種濾鏡要想實(shí)現(xiàn)效果,必須加在如:<td class=glow或shadow ><div>xxxxxxxxx</div></td>上

          ,并且要留有足夠的空間能夠顯示陰影或描邊,否則會出現(xiàn)半截的陰影或描邊現(xiàn)象。

          26,如何給做帶顏色的下拉菜單。

          <select style="FONT-SIZE: 10px; COLOR: #ffffff; FONT-FAMILY: Verdana;BACKGROUND-COLOR: #ff6600;" size=1 >

          <option selected>:: Dreamweaver4 ::</option>

          <option>::Flash5::</option>

          <option>::Firewoks4::</option>

          </select>

          27,關(guān)于DW4的表格中的亮邊框和暗邊框問題。

          在DW4的表格面板中并沒有亮邊框和暗邊框的屬性設(shè)置,因?yàn)镹C不支持,只有你在代碼中添加了。

          bordercolorlight="#999999" bordercolordark="#000000"

          你也可以用Css定義一個class。例如:

          <style>

          .bordercolor { bordercolorlight: #999999; bordercolordark: #000000 }

          </style>

          然后在要加效果的表格里加上<table class="bordercolor">

          28,自動顯示主頁最后更新日期.

          <script>

          document.write("最后更新日期:"+document.lastModified+""

          </script>愛電臺有我

          29,如何讓滾動條出現(xiàn)在左邊?

          我想居然在論壇中有人發(fā)表了這段代碼,很有意思,它的確照顧一些左撇子,呵呵!

          <html dir="rtl">

          <body bgcolor="#000000" text="#FFFFFF">

          <table height=18 width=212 align=center bgcolor=#FFFFFF dir="ltr" cellspacing="1"  cellpadding="0">

          <tr>

          <td bgcolor="#FF0000" >是不是你的滾動條在左邊啊</td>

          </tr>

          </table>

          </body>

          </html>

          30,如何加入網(wǎng)址前面的小圖標(biāo)?

          首先,您必須了解所謂的圖標(biāo)(Icon)是一種特殊的圖形文件格式,它是以 .ico 作為擴(kuò)展名。你可用在網(wǎng)上找一個制作圖標(biāo)軟件,它具有特有的規(guī)格:圖標(biāo)的大小為 16 * 16(以像素為單位);顏色不得超過 16 色。 在該網(wǎng)頁文件的 HEAD 部分加入下面的內(nèi)容:<LINK REL="SHORTCUT ICON" HREF=" http://skydesigner.51.net/圖標(biāo)文件名">,并放在該網(wǎng)頁的根目錄下。

          31,在800*600顯示器中,如何不讓網(wǎng)頁水平出現(xiàn)滾動條!

          設(shè)至<body leftmargin="0" topmargin="0">,網(wǎng)頁中的表格寬度為778。

          32,關(guān)于<!DOTYPE>的說明解釋。

          在網(wǎng)頁中,經(jīng)常會看到〈!DOCTYPE HTML PUBLIC`-//W3C//DTD HTML 4.01//EN`>,是聲明HTML文件的版本信息。

          33, 用圖片來關(guān)閉窗體.

          <A href="java script:window.close()"><IMG height=20 width=20 alt="關(guān)閉窗口" src="close.gif" border=0></A>

          補(bǔ)充說明:如何使用了ACTIVEX!,不再警告窗口?

          <html>

          <head>

          <object id=closes type="application/x-oleobject"

          classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">

          <param name="Command" value="Close"></object>

          </head>

          <body bgcolor="#003063" text="#ffffff" id=all> <a href="#">關(guān)閉窗口無提示</a>

          </body>

          </html>

          34,禁止鼠標(biāo)右鍵查看網(wǎng)頁源代碼。

          <SCRIPT language=javascript>

          function click()

          {if (event.button==2) {alert(`你好,歡迎光臨!`) }}

          document.onmousedown=click

          </SCRIPT>

          補(bǔ)充說明:

          鼠標(biāo)完全被封鎖,可以屏蔽鼠標(biāo)右鍵和網(wǎng)頁文字。

          < body>

          35,通過按鈕來查看網(wǎng)頁源代碼。

          <input type="BUTTON" value="查看源代碼" onClick= `window.location = "view-source:" + window.location.href` name="BUTTON">

          36,怎么用文字聯(lián)結(jié)實(shí)現(xiàn)按鈕的SUBMIT功能?

          <a href="#">OK</a>

          這段文字要放在form里。formname是這里要寫在form中的name,<form name=form111>那么就應(yīng)該是form111.submit()

          37,如何做一個空鏈接?

          加#

          38,利用<IFRAME>來給網(wǎng)頁中插入網(wǎng)頁。

          經(jīng)常我看到很多網(wǎng)頁中又有一個網(wǎng)頁,還以為是用了框架,其實(shí)不然,是用了<IFRAME>,它只適用于IE,NS可是不支持<IFRAME>的,但圍著的字句只有在瀏覽器不支援 iframe 標(biāo)記時才會顯示,如<noframes>一樣,可以放些提醒字句之類的話。

          你注意啊!下面請和我學(xué)習(xí)它的用法。

          分析代碼:<iframe src="iframe.html" name="test" align="MIDDLE" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes"> </iframe>

          src="iframe.html"

          用來顯示<IFRAME>中的網(wǎng)頁來源,必要加上相對或絕對路徑。

          name="test"

          這是連結(jié)標(biāo)記的 target 參數(shù)所需要的。

          align="MIDDLE"

          可選值為 left, right, top, middle, bottom,作用不大 。

          width="300" height="100"

          框窗的寬及長,以 pixels 為單位。

          marginwidth="1" marginheight="1"

          該插入的文件與框邊所保留的空間。

          frameborder="1"

          使用 1 表示顯示邊框, 0 則不顯示。(可以是 yes 或 no)

          scrolling="Yes"

          使用 Yes 表示容許卷動(內(nèi)定), No 則不容許卷動。

          39,請問<tbody>的用法?

          tbody用法據(jù)說是加強(qiáng)對表格的控制能力的.例如:

           <table><tbody>……..</tbody></table>

          tbody代碼如果不是你用手寫的話,只有在你用IE5打開一個網(wǎng)頁的時候, 把它另存為

          一下,你的另存為的文件在表格中就會生成tbody代碼。(即便你的表格根本就沒有

          tbody代碼,IE5另存為的時候也會給你生成)。

          40,Alt和Title都是提示性語言標(biāo)簽,請注意它們之間的區(qū)別。

          在我們?yōu)g覽網(wǎng)頁時,當(dāng)鼠標(biāo)停留在圖片對象或文字鏈接上時,在鼠標(biāo)的右下角有時會出現(xiàn)一個提示信息框。對目標(biāo)進(jìn)行一定的注釋說明。在一些場合,它的作用是很重要的。

          alt 用來給圖片來提示的。Title用來給鏈接文字或普通文字提示的。

          用法如下:

          <p Title="給鏈接文字提示">文字</p>

          <a href="#" Title="給鏈接文字提示">文字</a>

          <img src="圖片.gif" alt="給圖片提示">

          補(bǔ)充知識:<TITLE><ALT>里面如何多行換行?在源代碼里Enter回車。

          <a href="#" Title="個人簡歷

          姓名:張培

          網(wǎng)名:我是閃夢

          性別:男的,不是女的。

          愛好:網(wǎng)頁制作,軟件開發(fā)">個人簡歷</a>

          例如:個人簡歷

          41, 用javascript代碼來實(shí)現(xiàn)閃爍按鈕。

          <body>

          <form method="POST" action="--WEBBOT-SELF--">

          <input type="button" name=SUB value="閃爍" id=flashit style="BORDER: 1px solid ;BACKGROUND-COLOR: #FFFFFF">

          </form>

          <script>

          if (document.all&&document.all.flashit)

          {

          var flashelement=document.all.flashit

          if (flashelement.length==null)

          flashelement[0]=document.all.flashit

          function changecolor(which)

          {

          if (flashelement[which].style.color==`#800000`)

          flashelement[which].style.color="#0063A4"

          else

          flashelement[which].style.color="#800000"

          }

          if (flashelement.length==null)

          setInterval("changecolor(0)",1000)

          else

          for (i=0;i<flashelement.length;i++)

          {

          var tempvariable=`setInterval("changecolor(`+i+`)",`+`1000)`

          eval(tempvariable)

          }

          }

          </script>

          </body>

          42,CSS給圖片定義顏色邊框。

          img { border: 1px solid red}

          43,在DW中如何使插入的FLASH透明。

          方法一:選中swf,打開原代碼窗口,在</object>前輸入:<param name="wmode" value="transparent">

          方法二:在Flash中的Flie→Publist Settings→HTML→Window Mode選擇transparent

          44,在DW編輯文本中,如何輸入一個空格呢?

          輸入空格的問題,在DW似乎已成了一個老生常談的問題。通過將輸入法調(diào)整到全角模式就可以避免了。本以人工智能ABC為例.按Shift+Space切換到全角狀態(tài)。

          45,為何我的DW中圖形顯示不正常。

          第一種:可能是因?yàn)槟愣x并正在使用一個site,而你的HTML文件或者圖片不在這個site包含的區(qū)域之內(nèi),因此dreamweaver使用file協(xié)議來

          描述圖象的絕對路徑,可惜IE不支持src中使用file協(xié)議,所以圖象就顯示不出來了。

          第二種:可能是放圖片的文件夾或圖片名為中文,也顯示不到網(wǎng)頁中去。

          46,如何在本地機(jī)器上測試flash影片的loading?

          我想這可能是很多人在問的題了,其實(shí)很簡單,在Test時,選選View->Show Streaming就可以看到了。

          47,在網(wǎng)頁中做出一根豎的線有幾種辦法.

          第一種方法:用一個像素圖的辦法!

          如果你用Dreamwever的Edit→Preferences…→Layout View中的Spacer Image給你創(chuàng)建了一個缺省名為:spacer.gif的一個像素圖文件 。

          代碼中:

          <table border="0" cellspacing="0" cellpadding="0">

          <tr>

          <td bgcolor="#FF0000" height="200" ><img src="spacer.gif" width="1" height="1"></td>

          </tr>

          </table>

          第二種方法:用表格填顏色的辦法!把<td> </td>中的 刪掉 .

          <table border="0" cellspacing="0" cellpadding="0">

          <tr>

          <td bgcolor="#FF0000" height="200" width="1"></td>

          </tr>

          </table>

          第三種方法:用水平條。

          <hr color="red" width="1" size="100%">

          48, 關(guān)于鼠標(biāo)拖動,改變層大小。──看看微軟的做法.

          <script>

          document.execCommand("2D-position",false,true);

          </script>

          <DIV>

          <DIV style="WIDTH: 300px; POSITION: absolute; HEIGHT: 100px; BACKGROUND-COLOR: red">移動層</DIV>

          </DIV>


          主站蜘蛛池模板: 午夜一区二区在线观看| 国产在线一区二区综合免费视频| 精品无码AV一区二区三区不卡| 精品国产亚洲一区二区在线观看| 亚洲一区二区精品视频| 亚洲无人区一区二区三区| 国产品无码一区二区三区在线蜜桃 | 无遮挡免费一区二区三区| 欧洲精品一区二区三区| 日韩精品一区二区午夜成人版| 国产精品99无码一区二区| 国产成人一区二区三区视频免费 | 亚洲国产国产综合一区首页| 中文字幕一区二区人妻性色| 中文字幕亚洲综合精品一区| 99国产精品欧美一区二区三区| 亚洲AV无码一区二三区| 久久精品一区二区国产| 成人h动漫精品一区二区无码| 国产精品一区二区香蕉| 国产一区二区三区不卡观| 精品无码一区二区三区在线| 一区二区视频免费观看| 精品一区高潮喷吹在线播放| 高清在线一区二区| 中文字幕亚洲综合精品一区| 福利视频一区二区牛牛| 日韩精品视频一区二区三区| 日韩精品一区二区午夜成人版 | 无码精品人妻一区二区三区免费| 国产精品视频一区二区三区四| 亚洲av成人一区二区三区观看在线 | 国产在线一区二区三区在线| 国产色综合一区二区三区| 国产情侣一区二区| 精品深夜AV无码一区二区| 精品视频一区二区三区| 日韩一区二区a片免费观看| 国精品无码一区二区三区在线| 国产成人综合亚洲一区| 中文字幕日韩一区|