網(wǎng)頁前端設(shè)計-21超鏈接樣式

一、超鏈接不同時期的樣式

1、默認情況下：字體為藍色，帶有下劃線。

2、鼠標點擊時：字體為紅色，帶有下劃線。

3、鼠標點擊后：字體為紫色，帶有下劃線。

二、超鏈接偽類

用偽類定義鼠標點擊的不同時期樣式。

語法(必須按照順序定義）;

a:link{…}                          //	定義a元素未訪問時的樣式
a:visited{…}                     //	定義a元素訪問后的樣式
a:hover{…}                     //	定義鼠標經(jīng)過a元素時的樣式
a:active{…}                    //定義鼠標點擊激活時的樣式

舉例：

.結(jié)構(gòu)性定義

文件類型 <HTML></HTML> （放在檔案的開頭與結(jié)尾）

文件主題 <TITLE></TITLE> （必須放在「文頭」區(qū)塊內(nèi)）

文頭 <HEAD></HEAD> （描述性資料，像是「主題」）

文體 <BODY></BODY> （文件本體）

（由瀏覽器控制的顯示風格）

標題 <H?></H?> （從1到6，有六層選擇）

標題的對齊 <H? ALIGN=LEFT|CENTER|RIGHT></H?>

區(qū)分 <DIV></DIV>

區(qū)分的對齊 <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>

引文區(qū)塊 <BLOCKQUOTE></BLOCKQUOTE> （通常會內(nèi)縮）

強調(diào) <EM></EM> （通常會以斜體顯示）

特別強調(diào) <STRONG></STRONG> （通常會以加粗顯示）

引文 <CITE></CITE> （通常會以斜體顯示）

碼 <CODE></CODE> （顯示原始碼之用）

樣本 <SAMP></SAMP>

鍵盤輸入 <KBD></KBD>

變數(shù) <VAR></VAR>

定義 <DFN></DFN> （有些瀏覽器不提供）

地址 <ADDRESS></ADDRESS>

大字 <BIG></BIG>

小字 <SMALL></SMALL>

與外觀相關(guān)的標簽（作者自訂的表現(xiàn)方式）

加粗 <B></B>

斜體 <I></I>

底線 <U></U> （尚有些瀏覽器不提供）

刪除線 <S></S> （尚有些瀏覽器不提供）

下標 <SUB></SUB>

上標 <SUP></SUP>

打字機體 <TT></TT> （用單空格字型顯示）

預定格式 <PRE></PRE> （保留文件中空格的大小）

預定格式的寬度 <PRE WIDTH=?></PRE>（以字元計算）

向中看齊 <CENTER></CENTER> （文字與圖片都可以）

閃耀 <BLINK></BLINK> （有史以來最被嘲弄的標簽）

字體大小 <FONT SIZE=?></FONT>（從1到7）

改變字體大小 <FONT SIZE=+|-?></FONT>

基本字體大小 <BASEFONT SIZE=?> （從1到7; 內(nèi)定為3）

字體顏色 <FONT COLOR="#$$$$$$"></FONT>

說明  （瀏覽器不會顯示）

body {

scrollbar-face-color: #330033;

scrollbar-shadow-color: #FFFFFF;

scrollbar-highlight-color: #FFFFFF;

scrollbar-3dlight-color: #FFFFFF;

scrollbar-darkshadow-color: #FFFFFF;

scrollbar-track-color: #330033;

scrollbar-arrow-color: #FFFFFF;

}

</style>

將上面的代碼放在葉子代碼的<head></head>之間,顏色可根據(jù)自己的需要修改。

滾動條的代碼意思如下：

Scrollbar-Face-Color為滾動條表面顏色設(shè)定；

Scrollbar-Track-Color為滾動條底板顏色設(shè)定；

Scrollbar-Darkshadow為滾動條下邊和右邊邊沿顏色設(shè)定；

Scrollbar-Highlight-Color為滾動條上斜面和左斜面顏色設(shè)定；

Scrollbar-Shadow-Color為滾動條下斜面和右斜面顏色設(shè)定；

Scrollbar-3Dlight-Color為滾動條上邊和左邊的邊沿顏色設(shè)定；

Scrollbar-Arrow-Color為滾動條兩端箭頭顏色設(shè)定。

<!> 跑馬燈

<marquee>...</marquee>普通捲動

<marquee behavior=slide>...</marquee>滑動

<marquee behavior=scroll>...</marquee>預設(shè)捲動

<marquee behavior=alternate>...</marquee>來回捲動

<marquee direction=down>...</marquee>向下捲動

<marquee direction=up>...</marquee>向上捲動

<marquee direction=right></marquee>向右捲動

<marquee direction=’left’></marquee>向左捲動

<marquee loop=2>...</marquee>捲動次數(shù)

<marquee width=180>...</marquee>設(shè)定寬度

<marquee height=30>...</marquee>設(shè)定高度

<marquee bgcolor=FF0000>...</marquee>設(shè)定背景顏色

<marquee scrollamount=30>...</marquee>設(shè)定捲動距離

<marquee scrolldelay=300>...</marquee>設(shè)定捲動時間

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

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

3)在新窗口打開連接：<a href="相關(guān)地址" 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位進制)之間

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

13)貼音樂：<embed src="音樂地址" width="寬度" height="高度" 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>

1、店鋪音樂代碼:音樂網(wǎng)址" loop="-1">

2、圖片制作代碼：＜img src="這里放圖片地址"＞

3、公告圖片代碼：＜img border="0" src="這里放圖片地址" /＞或＜img src="這里放圖片地址"/＞

4、懸浮掛飾代碼：＜img src="這里放圖片地址" style="left:20px; position: relative; top:0px" /＞

5、商品分類代碼:＜img src="這里放圖片地址"/＞

6、字體大小代碼:＜font size="2"＞這里放要處理的文字，可用3、4、5等設(shè)置大小＜/font＞

7、字體顏色代碼:＜font color="red"＞這里放要處理的文字，可以換成blue,yellow等＜/font＞

8、文字鏈接代碼:＜a href="網(wǎng)頁地址"＞鏈接的文字，在分類欄里用時鏈接的網(wǎng)頁地址必須縮短＜/a＞

9、移動文字代碼:＜marquee＞從右到左移動的文字＜/marquee＞

10、背景音樂代碼：＜bgsound loop="-1" src="這里放音樂地址"＞＜/bgsound＞

11、圖片附加音樂代碼：＜img border=0 src="這里放圖片地址" dynsrc="這里放音樂地址"＞

12、浮動圖片代碼:＜img alt="1" height="150" src="這里放圖片地址"/＞

公告圖片的代碼：公告掛飾：店鋪分類代碼:背景音樂代碼：換行代碼

計數(shù)器代碼顏色代碼：

1白色 #FFFFFF

2紅色#FF0000

3綠色#00FF00

4藍色#0000FF

5牡丹紅#FF00FF

6青色 #00FFFF

7黃色#FFFF00

8黑色#000000

9海藍#70DB93

10巧克力色#5C3317

11藍紫色 #9F5F9F

12黃銅色#B5A642

13亮金色#D9D919

14棕色#A67D3D

15青銅色 #8C7853

162號青銅色 #A67D3D

17士官服藍色 #5F9F9F

18冷銅色 #D98719

19銅色 #B87333

20珊瑚紅 #FF7F00

21紫藍色 #42426F

22深棕 #5C4033

23深綠 #2F4F2F

24深銅綠色 #4A766E

25深橄欖綠 #4F4F2F

26深蘭花色 #9932CD

27深紫色 #871F78

28深石板藍 #6B238E

29深鉛灰色 #2F4F4F

30深棕褐色 #97694F

32深綠松石色 #7093DB

33暗木色 #855E42

34淡灰色 #545454

35土灰玫瑰紅色 #856363

36長石色 #D19275

37火磚色#8E2323

38森林綠 #238E23

39金色 #CD7F32

40鮮黃色 #DBDB70

41灰色 #C0C0C0

42銅綠色 #527F76

43青黃色 #93DB70

44獵人綠 #215E21

45印度紅 #4E2F2F

46土黃色 #9F9F5F

47淺藍色 #C0D9D9

48淺灰色 #A8A8A8

49淺鋼藍色 #8F8FBD

59淺木色 #E9C2A6

60石灰綠色 #32CD32

61桔黃色 #E47833

62褐紅色 #8E236B

63中海藍色 #32CD99

64中藍色 #3232CD

65中森林綠 #6B8E23

66中鮮黃色 #EAEAAE

67中蘭花色 #9370DB

68中海綠色 #426F42

69中石板藍色 #7F00FF

70中春綠色 #7FFF00

71中綠松石色 #70DBDB

72中紫紅色 #DB7093

73中木色 #A68064

74深藏青色 #2F2F4F

75海軍藍 #23238E

76霓虹籃 #4D4DFF

77霓虹粉紅 #FF6EC7

78新深藏青色 #00009C

79新棕褐色 #EBC79E

80暗金黃色 #CFB53B

81橙色 #FF7F00

82橙紅色 #FF2400

83淡紫色 #DB70DB

84淺綠色 #8FBC8F

85粉紅色 #BC8F8F

86李子色 #EAADEA

87石英色 #D9D9F3

88艷藍色 #5959AB

89鮭魚色 #6F4242

90猩紅色 #BC1717

91海綠色 #238E68

92半甜巧克力色 #6B4226

93赭色 #8E6B23

94銀色 #E6E8FA

95天藍 #3299CC

96石板藍 #007FFF

97艷粉紅色 #FF1CAE

98春綠色 #00FF7F

99鋼藍色 #236B8E

100亮天藍色 #38B0DE

101棕褐色 #DB9370

102紫紅色 #D8BFD8

103石板藍色 #ADEAEA

104濃深棕色 #5C4033

105淡淺灰色 #CDCDCD

106紫羅蘭色 #4F2F4F

107紫羅蘭紅色 #CC3299

108麥黃色#D8D8BF

109黃綠色 #99CC32

簡單常用HTML代碼大全（修改網(wǎng)頁必備）

網(wǎng)頁常用HTML代碼大全

超鏈接，用的最多：

點擊在當前頁打開網(wǎng)站

<a >這是我的網(wǎng)站</a>

效果：這是我的網(wǎng)站

點擊彈出網(wǎng)站

<a target="_blank">這是我的網(wǎng)站</a>

<br>這個是向下一行，比如

歡迎光臨我的網(wǎng)站<br>希望開心

演示效果就是：

歡迎光臨我的網(wǎng)站

希望開心

<p>向下一大行，比如

歡迎光臨我的網(wǎng)站<p>希望開心

演示效果就是：

歡迎光臨我的網(wǎng)站

希望開心

<b>這是粗體字

比如 <b >我的網(wǎng)站</ b>

演示效果：我的網(wǎng)站

我的網(wǎng)站這是字體的顏色BLUE是藍，RED是紅

演示

忽視右鍵

<body >

或

如何幾秒后轉(zhuǎn)到別的頁面？

<META. HTTP-EQUIV="Refresh" C>

點擊關(guān)閉窗口

<a href="javascript.:top.window.close();">點擊關(guān)閉窗口</a>！

請問如何去掉主頁右面的滾動條？

如何做到讓一個網(wǎng)頁自動關(guān)閉.

<html>

<head>

</object>

</head>

<body >

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

如何在不刷新頁面的情況下刷新css?

<style>

button{ color:#000000;}

</style>

<button nclick=document.styleSheets[0].rules[0].style.color=‘‘‘‘red‘‘‘‘>點擊按鈕直接修改style標簽里button選擇符使按鈕改為紅色</button>

請問如何讓網(wǎng)頁自動刷新？

在head部記入<META. HTTP-EQUIV="Refresh" c>其中20為20秒后自動刷新，你可以更改為任意值。

如何讓頁面自動刷新？

方法一，用refresh

HTML 代碼片段如下:

<head>

</head>

5表示刷新時間

[Ctrl+A 全部選擇提示:你可先修改部分代碼，再按運行]

方法二，使用setTimeout控制

function rl(){

document.location.reload()

}

setTimeout(rl,2000)

</script>

如何讓超鏈接沒有下劃線

在源代碼中的<HEAD>…</HEAD>之間輸入如下代碼：

a { text-decoration: none}

--> </style>

請問如何去掉IE的上下滾動條？

</body>

怎樣才能把RealPlayer文件在網(wǎng)頁做一個試聽連接？

如何用html實現(xiàn)瀏覽器上后退按鈕的功能？

或者

請問怎么在網(wǎng)頁中改變鼠標的箭頭形狀？

HTML 代碼片段如下:

<body>

<a href="#" style="cursor: crosshair ">crosshair </a><br>

<a href="#" style="cursor: default ">default </a><br>

<a href="#" style="cursor: e-resize ">e-resize </a><br>

<a href="#" style="cursor: ne-resize ">ne-resize </a><br>

<a href="#" style="cursor: nw-resize">nw-resize</a><br>

<a href="#" style="cursor: n-resize">n-resize</a><br>

<a href="#" style="cursor: se-resize">se-resize</a><br>

<a href="#" style="cursor: sw-resize">sw-resize</a><br>

<a href="#" style="cursor: s-resize">s-resize</a><br>

<a href="#" style="cursor: w-resize">w-resize</a><br>

</body>

怎樣不使用頁面的緩存？即每一次打開頁面時不是調(diào)用緩存中的東西

<META. HTTP-EQUIV="

ragma" C>

頁面打開時自動彈出一個窗口的代碼怎么寫？

HTML 代碼片段如下:

<html>

<head>

<title>Untitled Document</title>

<!--

function MM_openBrWindow(theURL,winName,features) { //v2.0

　window.open(theURL,winName,features);

}

//-->

</script>

</head>

</body>

</html>

如何讓我的頁面出現(xiàn)一個會講話的小人？Merlin

HTML 代碼片段如下:

<HTML>

<HEAD>

<META. http-equiv=Content-Type c>

</HEAD>

<BODY>

<p><OBJECT id=sims classid=CLSID

45FD31B-5C6E-11D1-9EC1-00C04FD7081F>

　</OBJECT>

var MerlinID;

var MerlinACS;

sims.Connected=true;

MerlinLoaded=LoadLocalAgent(MerlinID, MerlinACS);

Merlin=sims.Characters.Character(MerlinID);

Merlin.Show();

Merlin.Play("Surprised");

Merlin.Speak("大家好");

Merlin.Play("GestureLeft");

Merlin.Think("我是默林！");

Merlin.Play("

leased");

Merlin.Think("可愛嗎？");

Merlin.Play("GestureDown");

Merlin.Speak("哈哈！");

Merlin.Hide();

function LoadLocalAgent(CharID, CharACS){

LoadReq=sims.Characters.Load(CharID, CharACS);

return(true);

}

</SCRIPT>

</p>

<p>看此效果必須裝有office2000！！！</p>

</BODY>

</HTML>

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

HTML 代碼片段如下:

<STYLE>

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

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

</STYLE>

</head>

</body>

</html>

[Ctrl+A 全部選擇提示:你可先修改部分代碼，再按運行]

background-repeat:no-repeat; 是讓背景圖不占滿整個頁面

body bgproperties="fixed" 是拉動scroll時背景圖不動

文本輸入框什么屬性能實現(xiàn)不可輸入？

HTML 代碼片段如下:

或者

如何禁止自己的頁面在別人的框架里打開？

把以下代碼加至你的<head>區(qū)

if (window.top!=self){

window.top.location=self.location

}

</script>

如何實現(xiàn)首頁全屏幕顯示？

HTML 代碼片段如下:

<html>

<body><script. language="<B style="color:black;background-color:#A0FFFF">javascript</B>">

var coolw=642

var coolh=400

var coolhuang=window.open("http://www.51js.com","coolhuang","width="+coolw+",height="+coolh+",

fullscreen=1,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0")

window.close()

</script></body></html>

如何監(jiān)聽一個窗口被關(guān)閉了？

HTML 代碼片段如下:

<body >

如何禁止Ctrl+N？

HTML 代碼片段如下:

如何把頁面加入用戶的收藏夾？

HTML 代碼片段如下:

<a href="<B style="color:black;background-color:#A0FFFF">javascript</B>:window.external.AddFavorite(‘‘‘‘http://www.51js.com‘‘‘‘,‘‘‘‘無憂腳本‘‘‘‘)">收藏無憂腳本</a>

如何在我的頁面中加入背景音樂？

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

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

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

關(guān)于頁面轉(zhuǎn)換效果

或

說明：Transition=23是隨機效果，另可以選0-22任一數(shù)字固定某個效果

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

HTML 代碼片段如下:

怎樣雙擊滾屏，單擊停止？

HTML 代碼片段如下:

<html>

<head>

</head>

<body>

var currentpos,timer;

function initialize()

{

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

}

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>

</body>

</html>

如何讓body中的文字不被選中？

HTML 代碼片段如下:

如何讓彈出的窗口不能關(guān)閉？

在新開的窗口中加入如下代碼

</body>

如何讓瀏覽器在保存頁面時保存失敗？

HTML 代碼片段如下:

<<B style="color:black;background-color:#ffff66">IFRAME</B> SRC="*.html">

</<B style="color:black;background-color:#ffff66">IFRAME</B>>

</NOSCRIPT>

表單中如何用圖片按鈕實現(xiàn) reset?

<html>

<head>

function aaa(){

document.forms[0].reset()

}

</script>

</head>

<body>

<form>

</form>

</body></html>

進入網(wǎng)頁時彈出的信息對話框

<body >

關(guān)閉窗口后彈出對話框

<body >

告別提示

只要你肯干,沒有什么不能成功的.

1。忽視右鍵

或

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="#"

　 nclick="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。讓瀏覽器在保存頁面時保存失敗

7。隨機替換圖片

　 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>標內(nèi)加入如：<body nload="closeit()">

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

　 <html>

　 <head>

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

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

　 </object>

　 </head>

這個窗口會在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)閉窗口

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

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

　 allowTransparency="true"

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

16. ncontextmenu="window.event.returnValue=false" 將徹底屏蔽鼠標右鍵

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

17. <body nselectstart="return false"> 取消選取、防止復制

18.onpaste="return false" 不準粘貼

19.oncopy="return false;" ncut="return false;" 防止復制

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

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

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

23. 永遠都會帶著框架

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)頁將不能被另存為

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

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

onclick="window.location="view-source:"+ "http://www.pconline.com.cn"">

27.刪除時確認

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

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-left:none; border-right:none; border -top:none; border-bottom: 1 solid #000000"></textarea>

31.不要滾動條?

讓豎條沒有:

</body>

讓橫條沒有:

</body>

兩個都去掉？更簡單了

</body>

32.怎樣去掉圖片鏈接點擊后，圖片周圍的虛線？

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

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

</form>

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

window.opener.location.reload()

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

打開頁面的位置<body nload="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ù)字組成

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>

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

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

function checkme()

for each ob in radio1

if ob.checked then window.alert ob.value

end function

</script><BODY>

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

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

</BODY></HTML>

43.腳本永不出錯

<SCRIPT. LANGUAGE="JavaScript">

</SCRIPT>

44.ENTER鍵可以讓光標移到下一個輸入框

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

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

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. 各種樣式的光標

auto ：標準光標

default ：標準箭頭

hand ：手形光標

wait ：等待光標

text ：I形光標

vertical-text ：水平I形光標

no-drop ：不可拖動光標

not-allowed ：無效光標

help ：?幫助光標

all-scroll ：三角方向標

move ：移動標

crosshair ：十字標

e-resize

n-resize

nw-resize

w-resize

s-resize

se-resize

sw-resize

47、禁止鼠標右鍵，把Demo的圖片全都設(shè)為表格的背景，表格的大小與圖片的大小一樣。這樣做看起來是一樣的，主要是防止鼠標經(jīng)過圖片時會出現(xiàn)另存的按鈕。禁止鼠標右鍵的代碼很簡單：<script. LANGUAGE="JavaScript"> function click() { if (event.button==2) {alert('呵呵，不好意思，你甭想使用右鍵下載圖片：）'); } } document.onmousedown=click</script>

1. 怎樣定義網(wǎng) 頁語言( 字符集)?

----在制作網(wǎng) 頁過程中, 你首先要定義網(wǎng) 頁語言, 以便訪問者瀏覽器自動設(shè) 置語言, 而我們用所見即所得的HTML 工具時, 都沒有注意到這個問題, 因為它是默認設(shè) 置。要設(shè) 置的語言可以在HTML 代碼狀態(tài) 下找到:

$#@60; meta http －equiv="Content Type" content="text/html; charset=gb2312" $#@62;

----把charset=gb2312 改換成其它語言代碼即可, 比如英文:charset=en.

2. 怎樣防止別人把你的網(wǎng) 頁放到框架里?

----因為框架（frame）的緣故, 有許多人把別人的網(wǎng) 頁放置到自己的框架里, 使之成為自己的一頁。如果你要防止別人這樣做, 可以加入下列JavaScript 代碼即可, 它會自動監(jiān) 測, 然后跳出別人的框架。

$#@60; script language="javascript" $#@62;

？?if (self !=top) { top.location=self.location; }

$#@60; /script $#@62;

3. 怎樣設(shè) 置字體?

----在制作網(wǎng) 頁過程中, 大家都喜歡使用漂亮的字體。但是, 如果訪客瀏覽器沒有安裝同樣的字體，看到你的網(wǎng) 頁會是很普通的字體。如何防止這種情況出現(xiàn) 呢? 大家知道字體設(shè) 置的標簽是Font, 而它有個屬性是Face, 該屬性是定義字體的, 你可以這樣設(shè) 置:, 訪客的瀏覽器就會按照Face 定義的字體順序設(shè) 置已安裝的字體。目前動態(tài) 主頁有種技術(shù), 可以把字體信息用向量格式存儲, 然后利用訪客本身機器含有的公共信息庫把字體快速的組裝起來, 這樣, 就不用擔心訪客是否安裝有某種字體了。

4. 怎樣在網(wǎng) 頁中加入注釋?

----在共同開發(fā) 網(wǎng) 頁中, 加入注釋是防止分工被搞混淆或者注釋某段代碼特殊的含加入注釋的格式是:

$#@60; ! －－ Microsoft FrontPage 3.0 －－ $#@62;。

5. 怎樣測試瀏覽器并自動裝入所需要的網(wǎng) 頁?

----目前微軟和網(wǎng) 景的瀏覽器并不能完全兼容所有網(wǎng) 頁, 有的在某種瀏覽器里非常漂亮, 而用其它瀏覽器查看時卻一團糟。如果你需要測試瀏覽器, 可以加入以下JavaScript 代碼并保存單獨一個網(wǎng) 頁:

$#@60; script LANGUAGE="JavaScript" $#@62;

function TestBrowser(){

ie=((navigator.appName==

"Microsoft Internet Explorer") ＆＆

(parseInt(navigator.appVersion) $#@62;=3 ))

ns=((navigator.appName=="Netscape") ＆＆

(parseInt(navigator.appVersion) $#@62;=3 ))

if (ns) {

setTimeout(location.href="nn4.htm",10);

} else {

setTimeout(location.href="ie4.htm",10);

}

$#@60; /script $#@62;

實例請參考:

http://www.netease.com/～tiantao/test.htm

6. 怎樣讓鏈接沒有下劃線?

----只要在加入以下代碼, 所有鏈接就都沒有下劃線了:

$#@60; style type="text/css" $#@62;

$#@60; ! －－

A{text －transform: none;

text －decoration: none ;}

a:hover { text －decoration:underline }

－－ $#@62;

$#@60; /style $#@62;

7. 怎樣在網(wǎng) 頁中加入E-mail 鏈接并顯示預定的主題?

A HREF=mailto:lovett@163.net?subject=test

8. 怎樣讓背景圖像不滾動?

----Internet Explorer 瀏覽器支持一個Body 屬性Bgproperties, 它可以讓背景不滾動。

$#@60; Body Background="c98.gif" Bgproperties="fixed" $#@62;

9. 怎樣評定網(wǎng) 頁的級別?

----在IE4.0 瀏覽器中, 有一項功能是過濾網(wǎng) 站的, 一些受限制的網(wǎng) 站被過濾掉, 而該網(wǎng) 站必須被RSAC( 美國娛樂委員會) 評定了級別IE4.0 才能過濾, 如果你要評級可以在網(wǎng) 頁中加入以下代碼:

$#@60; meta http －equiv="PICS －Label"????

content=(PICS －1.1 "http://www.rsac.org/ratingsv01.html"

？?l gen true comment "RSACi North America Server"

？?for "http://youHostname"

？?on "1998.11.26GMT08:15 ?0500"

？?r (n 0 s 0 v 0 l 0))$#@62;

10. 怎樣定義本網(wǎng) 頁的關(guān) 鍵字?

----在網(wǎng) 頁中加入關(guān) 鍵字, 可以供某些搜索站臺機器人的使用, 它們會利用該關(guān) 鍵字為你的網(wǎng) 站做索引, 這樣, 當別人用關(guān) 鍵字搜索網(wǎng) 站時, 如果你的網(wǎng) 頁包含該關(guān) 鍵字, 那么就可以被列出了, 定義本網(wǎng) 頁關(guān) 鍵字, 可以加入以下代碼:

----$#@60; meta name="Keywords" content="china,enterprise,business,net" $#@62;

----Content 所包含的就是關(guān) 鍵字, 你可以自行設(shè) 置。

----這里有個技巧, 你可以重復某一個單詞, 這樣可以提高自己網(wǎng) 站的排行位置, 如:

----$#@60; meta name="Keywords" CONTENT="china,china,china,china" $#@62;

11. 怎樣鏈接本網(wǎng) 頁的對象?

----有時鏈接發(fā) 生在一個網(wǎng) 頁里, 比如頁面上半部分列出了目錄, 下部分就列出了內(nèi) 容, 而單擊目錄任何一個項目都可以跳到指定部分, 可以在要被鏈接的內(nèi) 容部分設(shè) 置如下方式:

$#@60; A NAME=" ＃t1" $#@62;$#@60; /A $#@62;

而要鏈接到以上設(shè) 置的部分, 可以如下編制:

$#@60; A HREF="index.htm ＃t1" $#@62;t1$#@60; /A $#@62;

12. 怎樣為不支持框架結(jié) 構(gòu) 的瀏覽器指定內(nèi) 容?

----為了防止不支持框架結(jié) 構(gòu) 的瀏覽器訪問你的網(wǎng) 頁, 可以在你的網(wǎng) 頁中加入以下內(nèi) 容:

$#@60; body $#@62;

$#@60; noframes $#@62;

本網(wǎng) 頁是框架結(jié) 構(gòu), 請下載新的瀏覽器瀏覽

$#@60; /noframes $#@62;

$#@60; /body $#@62;

13. 怎樣刪除表格邊框?

----有時需要刪除表格的邊框, 你可以把Border 設(shè) 置為如下代碼:

$#@60; body $#@62;

$#@60; table border="0" width="100 ％" $#@62;

$#@60; tr $#@62;

$#@60; td width="100 ％" $#@62;$#@60; /td $#@62;

$#@60; /tr $#@62;

$#@60; /table $#@62;

$#@60; /body $#@62;

14. 怎樣隱藏在狀態(tài) 欄里出現(xiàn) 的LINK 信息?

----大家知道, 當你指向一個鏈接時, 該鏈接的信息會出現(xiàn) 在瀏覽器狀態(tài) 欄里, 如果需要隱藏信息, 可以如下設(shè) 置:

$#@60; a onMouseOver="window.status=none ;

return true" $#@62;test$#@60; /a $#@62;

15. 怎樣在網(wǎng) 頁中加入多媒體文件?

----有些多媒體文件無需其他程序就可以播放, 而有許多多媒體文件需要外部程序的幫助, 當瀏覽器下載不支持的格式時會調(diào) 用外部程序。如果瀏覽器沒有安裝這種外部程序, 那么瀏覽器會自動去下載；如果你需要加入多媒體格式, 可設(shè) 置如下代碼:

$#@60; EMBED SRC="tt.ram" AUTOSTART="TRUE" LOOP="2" WIDTH="80" HEIGHT="30" $#@62;

----對于不支持EMBED 標簽的瀏覽器, 可以改用標簽。

16. 怎樣在網(wǎng) 頁中加入電子郵件表單提交?

----表單提交需要CGI 程序的支持, 但你也可以利用E ？mail 提交, 當你設(shè) 計好表單后, 把Action 內(nèi) 容加入郵件地址即可, 如下:

form method="POST" action="mailto:lovett@163.net" ENCTYPE="text/plain"$#@62;

17. 怎樣隱藏熱訊分析的圖標?

----熱訊分析是許多網(wǎng) 友使用的服務(wù), 它能幫助你分析網(wǎng) 站的流量, 如果你想隱藏該服務(wù) 圖標, 可以把服務(wù)代碼中的 width=88 height=31 都改為1 即可。

18. 怎樣在網(wǎng) 頁中加入最后修改日期?

----在中加入以下代碼即可:

$#@60; Script Language="Java Script" $#@62;

document.write

(" 最后修改日期" ＋document.lastModified);

$#@60; /Script $#@62;

、Html概述

Html是Hyper Text Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超鏈接，標記指的是標簽，是一種用來制作網(wǎng)頁的語言，這種語言由一個個的標簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm，一個html文件就是一個網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內(nèi)容文件渲染成網(wǎng)頁，顯示的網(wǎng)頁可以從一個網(wǎng)頁鏈接跳轉(zhuǎn)到另一個網(wǎng)頁。

二、Html標簽語法

Html中標簽分為：成對標簽和自閉合標簽【空標簽】

1、成對標簽

成對出現(xiàn)，有開始標簽必須有結(jié)束標簽，內(nèi)容包裹在兩個標簽中，而且開始標簽名和結(jié)束標簽名一致,并且結(jié)束標簽必須以斜杠/開頭

語法：

<font>內(nèi)容</font>

2、自閉合標簽

只有一個標簽，用斜杠結(jié)束，斜杠也可以省略

語法：

<br/>

注意事項：

成對標簽中，結(jié)束標簽必須以斜杠開頭
成對標簽與成對標簽可以嵌套不能交叉
標簽名不區(qū)分大小寫，但是我們都必須小寫

三、Html基本架構(gòu)

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    
</body>
</html>

1、！DOCTYPE

!DOCTYPE html是文檔聲明，定義文檔類型為html，并且告訴不同的瀏覽器用標準方式進行解析html語言，如果不寫的話，會產(chǎn)生怪異模式，所謂怪異模式，就是瀏覽器會用自己的方式進行解析，不同的瀏覽器有各自的解析方式，從而會出現(xiàn)無效果、不兼容等問題。
注意，html中有兩種聲明類型，一種叫做xhtml，即html，另一種叫做html5，html5是xhtml的升級版，所以我們建議使用html5的聲明方式
xhtml聲明方式：
<htmlxmlns="http://www.w3.org/1999/xhtml">
html5聲明方式：
<!DOCTYPE html>

2、html

html是html文檔的整體，也就是表示一個網(wǎng)頁。
html中的lang="en"是定義該文件語言是英文

3、head

head是html的第一層子元素【子標簽】，負責對網(wǎng)頁進行一些設(shè)置以及定義標題，設(shè)置包括定義網(wǎng)頁的編碼格式，外鏈css樣式文件和JavaScript文件等。設(shè)置的內(nèi)容不會顯示在網(wǎng)頁上，標題的內(nèi)容會顯示在標題欄中。即title標簽。

4、meta

meta是html語言head標簽中的一個輔助性標簽，該標簽不包含任何內(nèi)容，但是該標簽的屬性定義了與文檔相關(guān)聯(lián)的名稱，比如：編碼

<meta charset="utf-8"></meta>

5、body

body也是html的第一層子元素，我們頁面中顯示的所有內(nèi)容全部都是編寫在該標簽體中。

四、Html文檔規(guī)范

html制定了文檔的編寫規(guī)范，必須遵守。
所有的標簽必須小寫
所有的屬性必須用雙引號括起來

五、Html注釋

html文檔代碼中可以插入注釋，注釋是對代碼的說明和解釋，注釋的內(nèi)容不會顯示在頁面上。
注釋的語法：


六、html基本屬性

注：屬性是標簽的輔助作用。

屬性描述 bgcolor 設(shè)置網(wǎng)頁的背景顏色 background 設(shè)置網(wǎng)頁的背景圖片

1.bgcolor

設(shè)置網(wǎng)頁的背景顏色

<!DOCTYPE html>
<html lang="en">
<head>
    <title>html的屬性</title>
</head>
<body bacolor="pink">
    
</body>
</html>

2.路徑

我們在開發(fā)網(wǎng)頁時，需要經(jīng)常的插入圖片、視頻、文件等一些操作，但是我們需要指定文件所在的位置，這個位置就是所謂的路徑

路徑分為：

相對路徑指目標相對于當前文件的路徑，網(wǎng)頁結(jié)構(gòu)設(shè)計中多采用這種方式來表示目標的路徑。相對路徑有多種表示方法，其表示的意義不盡相同。表示方法如下： ./ ：代表文件所在的目錄（可以省略不寫）../ ：代表文件所在的父級目錄../../ ：代表文件所在的父級目錄的父級目錄/ ：代表文件所在的根目錄【/ ：可以理解為目標文件的絕對路徑】
絕對路徑指目標文件的完整路徑，從盤符開始。

3.background

設(shè)置網(wǎng)頁的背景圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <title>html的屬性</title>
</head>
<body background="../images/10.jpg">
    
</body>
</html>

注意事項：
bgcolor和background不能同時使用
background不能指定絕對路徑

七、Html標簽

1.網(wǎng)頁的組成

網(wǎng)頁的組成：文字、圖片、視頻、超鏈接、列表、表格、表單等組成。

2、文本段落標簽

標簽描述 hn 設(shè)置文字標題【n：取值范圍 1~6】 center 居中對齊 hr 水平線屬性（width：寬度 color：顏色 size：粗細） br 換行 p 段落

3、文本控制標簽

標簽描述 font 設(shè)置字體，需要借助屬性設(shè)置

屬性描述 color 設(shè)置字體顏色 size 設(shè)置字體大小，不需要帶單位，取值范圍：1~7【瀏覽器默認值：3】 face 設(shè)置字體風格

<font size="2" color="red" face="黑體"></font>

4、文本格式化標簽

標簽描述 b 定義粗體文本 em 定義著重文字 i 定義斜體文字 small 定義小號字 strong 定義加重語氣 sub 定義下標字 sup 定義上標字 ins 定義插入字 del 定義刪除字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html文本格式化標簽</title>
</head>
<body>

    <b>粗體文本</b>
    <i>傾斜文本</i>
    <em>著重文本</em>
    <small>小號字</small>
    <strong>加重語氣</strong>
    <sub>上標</sub>
    <sup>下標</sup>
    <ins>插入字</ins>
    <del>刪除字</del>
    
</body>
</html>

5、圖片標簽

在Html中，圖像由
標簽定義。
是空標簽，意思是說，它只包含屬性。
要在頁面上顯示圖像，你需要使用源屬性（src）。src指"source"。源屬性的值是圖像的URL地址。

標簽描述 img 圖片標簽

屬性描述 src 指定圖片的地址 width 設(shè)置圖片的寬度 height 設(shè)置圖片的高度 alt 設(shè)置圖片的預備文本

注意事項：不建議設(shè)置圖片大小，容易失真

6、audio

在Html中，聲音由標簽定義。

標簽描述 audio 聲音標簽

屬性描述 src 指定聲音地址

<audio src="nice.mp3">對不起，您的瀏覽器不支持</audio>

7、video

在Html中，視頻由video標簽定義

標簽描述 video 視頻標簽

屬性描述 src 指定視頻地址

<video src="美女.mp4">對不起，您的瀏覽器不支持</video>

8、超鏈接

a標簽定義超鏈接，用于從一個頁面鏈接到另一個頁面。
a標簽最重要的屬性是href，它指定鏈接的目標。
在所有瀏覽器中，鏈接的默認外觀如下：
未被訪問的鏈接帶有下劃線而且是藍色的
已被訪問的鏈接帶有下劃線而且是紫色的
活動鏈接帶有下劃線而且是紅色的

語法：

<a href="鏈接目標">點擊內(nèi)容</a>

屬性描述 href 指定鏈接目標 name 指定錨的名稱 download 指定下載鏈接 target 指定跳轉(zhuǎn)方式屬性值描述 _blank 新窗口打開【常用】 _parent 在父窗口中打開鏈接【了解】 _self 默認，在當前窗口打開【了解】 _top 在當前窗體打開鏈接，并替換當前的整個窗體【了解】 framename 到 iframe 在講【常用】

超鏈接分類：

內(nèi)部鏈接鏈接目標：本地頁面 <a href="demo.html">點擊內(nèi)容</a>
外部鏈接鏈接目標：外部頁面 <a href="http://www.baidu.com">點擊內(nèi)容</a>
多媒體鏈接鏈接目標：圖片、視頻等 <a href="images/美女.jpg">點擊內(nèi)容</a>
電子郵件鏈接鏈接目標：電子郵件【系統(tǒng)自帶的電子郵件】 <a href="mailto:12345@qq.com">點擊內(nèi)容</a>
錨鏈接鏈接目標：錨點 1.建立錨點
<a name="錨點名"></a>

2.跳轉(zhuǎn)
<a href="#錨點名">點擊內(nèi)容</a>

9、列表

列表的使用與word等軟件的列表概念相似，只不過是應(yīng)用在網(wǎng)頁展示中。

1.有序列表

有序列表是指有數(shù)字編號或字母的列表項，可以使用css定義更多樣式。

<!-- 有序列表 -->
    <ol type="a">
        <li>新聞一</li>
        <li>新聞二</li>
        <li>新聞三</li>
    </ol>

屬性描述 type 設(shè)置符號類型值：1 a A I i 默認數(shù)字 start 從第幾個開始【用于ol標簽中】 value 從第幾個開始【用于li標簽中】

<!-- 有序列表 -->
    <ol type="a" start="4">
        <li>新聞一</li>
        <li type="1" value="1">新聞二</li>
        <li>新聞三</li>
    </ol>

2、無序列表

無序列表是指沒有數(shù)字編號或字母的列表項，可以使用css定義更多樣式。

<!-- 無序列表 -->
<ul>
    <li>童裝</li>
    <li>男裝</li>
    <li>女裝</li>
</ul>

屬性描述 type 用于設(shè)置符號類型，默認：實心圓值：空心圓、正方形【用于ul、li】

<!-- 無序列表 -->
<ul type="square">
        <li>童裝</li>
        <li type="circle">男裝</li>
        <li>女裝</li>
    </ul>

3、描述列表

描述列表指每個列表項有單獨的標題。

<!-- 描述列表 -->
    <dl>
        <dt>開源產(chǎn)品</dt>
        <dd>Java封裝庫</dd>
        <dd>Web組件庫</dd>
        
        <dt>網(wǎng)站導航</dt>
        <dd>mrliujava.com</dd>
        <dd>mrliuweb.com</dd>
    </dl>

10、表格

表格在網(wǎng)頁開發(fā)中使用頻率非常高，尤其是數(shù)據(jù)展示的時候。

10.1 基本使用

標簽描述 table 代表表格標簽 caption 表格標題 thead 表頭部分 tbody 表格主體部分 tfoot 表格尾部

屬性描述 border 表格邊框 cellspacing 單元格與單元格間距 width 寬度 height 高度 bgcolor 設(shè)置背景顏色 background 設(shè)置背景圖片 align 對齊方式

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>員工薪資統(tǒng)計表</caption>
        <thead>
            <tr>
                <th>序號</th>
                <th>姓名</th>
                <th>性別</th>
                <th>職位</th>
                <th>薪資</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td>JavaEe工程師</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>Web前端工程師</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td>傻蛋</td>
                <td>妖</td>
                <td>測試工程師</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>當前頁：1 頁</td>
                <td>上一頁</td>
                <td>下一頁</td>
                <td>尾頁</td>
                <td>共 3 頁</td>
            </tr>
        </tfoot>
    </table>

10.2 單元格合并

屬性說明 rowspan 行合并 colspan 列合并

下面是行合并：

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>員工薪資統(tǒng)計表</caption>
        <thead>
            <tr>
                <th>序號</th>
                <th>姓名</th>
                <th>性別</th>
                <th>職位</th>
                <th>薪資</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td rowspan="2">JavaEe工程師</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td>傻蛋</td>
                <td>妖</td>
                <td>測試工程師</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>當前頁：1 頁</td>
                <td>上一頁</td>
                <td>下一頁</td>
                <td>尾頁</td>
                <td>共 3 頁</td>
            </tr>
        </tfoot>
    </table>

下面是列合并：

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>員工薪資統(tǒng)計表</caption>
        <thead>
            <tr>
                <th>序號</th>
                <th>姓名</th>
                <th>性別</th>
                <th>職位</th>
                <th>薪資</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td>JavaEe工程師</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>Web前端工程師</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td colspan="2">傻蛋</td>
                <td>測試工程師</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>當前頁：1 頁</td>
                <td>上一頁</td>
                <td>下一頁</td>
                <td>尾頁</td>
                <td>共 3 頁</td>
            </tr>
        </tfoot>
    </table>

11、表單

表單是一個包含表單元素的區(qū)域。
表單元素是允許用戶在表單中輸入內(nèi)容，比如：文本域(textarea)、下拉列表(select)、單選框(radio)、復選框(checkbox)等等。

11.1 基本使用

表單需要使用表單標簽來設(shè)置：

<form>
input元素
</form>

11.2 GET&POST

屬性說明 action 后臺地址 method 提交方式GET或POST

GET和POST區(qū)別：

1.GET

數(shù)據(jù)會顯示在地址欄中，數(shù)據(jù)不安全
數(shù)據(jù)大小有限制
數(shù)據(jù)通過請求頭傳遞

2.POST

數(shù)據(jù)不會顯示在地址欄中，數(shù)據(jù)安全
數(shù)據(jù)對大小無限制
數(shù)據(jù)通過實體內(nèi)容傳遞

<form action="后端接口" method="POST">
        <input type="text">
        <input type="password">
</form>

11.3 LABEL

使用label用于描述表單標題，當點擊標題后文本框會獲得焦點，需要保證使用的ID在頁面中是唯一的。

<form action="后端接口" method="POST">
        <label for="username">用戶名</label>
        <input type="text" id="username">

        <label for="password">密碼</label>
        <input type="password" id="password">
</form>

也可以將文本框放在label標簽內(nèi)部，這樣就不需要設(shè)置id與for屬性了。

11.4 INPUT

文本框用于輸入單行文本使用，下面是常用屬性與示例。

屬性說明 type 表單類型,默認為text name 后端接收字段名 required 必須輸入 placeholder 提示文本內(nèi)容 value 默認指 maxlength 允許最大輸入字符數(shù) size 表單長度,一般用css來控制 disabled 禁用,不可提交后端 readonly 只讀,可提交后端 accept 設(shè)置選中類型比如:.jpg capture 使用麥克風\視頻或攝像頭哪種方式獲取手機上傳文件,支持的值有microphone , video , camera

11.4.1 基本示例

<form action="后端接口" method="POST">
        <label for="username">用戶名</label>
        <input type="text" name="username" id="username" placeholder="請輸入用戶名" maxlength="5" size="50" required>
</form>

11.4.2 調(diào)用攝像頭

當input類型為file時手機會讓用戶選擇圖片或者拍照,如果想直接調(diào)取攝像頭使用以下代碼.

<form action="后端接口" method="POST">
        <label for="file">上傳文件</label>
        <input type="file" name="file" id="file" accept="*.jpg" capture="camera">
</form>

11.4.3 其他類型

通過設(shè)置表單的type字段可以指定不同的輸入內(nèi)容.

類型說明 email 輸入內(nèi)容為郵箱 url 輸入內(nèi)容為URL地址 password 輸入內(nèi)容為密碼項 tel 電話號,移動端會調(diào)出數(shù)字鍵盤 search 搜索框 hidden 隱藏表單 submit 提交表單 reset 重置表單 button 自定義按鈕

11.4.4 HIDDEN

隱藏表單用于提交后臺數(shù)據(jù),但在前臺內(nèi)容不顯示所以在其上做用樣式定義也沒有意義.

<input type="hidden" name="id" value="1">

11.4.5 SUBMIT

創(chuàng)建提交按鈕可以將表單數(shù)據(jù)提交到后臺,有多種方式可以提交數(shù)據(jù),比如:AJAX,或者Html的表單按鈕.

a.使用input構(gòu)建提交按鈕,如果設(shè)置了name值,那么按鈕數(shù)據(jù)也會提交到后臺,如果有多個表單項可以通過這些進行判斷是哪個表單提交的.

<input type="submit" name="submit" value="提交表單">

b.使用button也可以提交,設(shè)置type屬性為submit或不設(shè)置都可以提交表單.

<button type="submit">提交表單</button>

11.4.6 禁用表單

通過為表單設(shè)置disabled或readonly都可以禁止表單,單readonly表單的數(shù)據(jù)可以提交到后端

<input type="text" value="數(shù)據(jù)" readonly>

11.4.7 PATTERN

表單可以通過設(shè)置pattern屬性指定正則驗證.

屬性說明 pattern 正則表達式驗證規(guī)則 oninvalid 輸入錯誤時觸發(fā)的事件

<form action="">
        <label for="username">用戶名</label>
        <input type="text" name="username" id="username" pattern="[a-z]{5,20}" oninvalid="validate('請輸入5~20位字母的用戶名')">
        <button>提交表單</button>
    </form>

    <script>
        function validate(message){
            alert(message);
        }
    </script>

11.4.8 TEXTAREA

文本域指可以輸入多行文本的表單,當然更復雜的情況可以使用編輯器如ueditor , ckeditor等.

屬性說明 cols 列字符數(shù)(一般使用css控制更好) rows 行數(shù)(一般使用css控制更好)

<textarea cols="30" rows="3">請踩踩我......</textarea>

11.4.9 SELECT

下拉列表項可用于多個值中的選擇.

屬性說明 multiple 支持多選 size 列表框高度 optgroup 選項組 selected 選中狀態(tài) option 選項值

<form action="">
        <select multiple size="10">
            <option value="">選擇課程</option>
            <optgroup label="后端">
                <option value="">JAVA</option>
                <option value="">PHP</option>
                <option value="">LINUX</option>
            </optgroup>

            <optgroup label="前端">
                <option value="">HTML</option>
                <option value="">CSS</option>
                <option value="">JAVASCRIPT</option>
            </optgroup>
        </select>
    </form>

11.4.10 RADIO

單選框指只能選擇一個選項的表單,如性別的選擇:男 , 女 , 保密只能選擇一個.

屬性說明 checked 選中狀態(tài)

<form action="">
        <input type="radio" name="" id="boy" checked>
        <label for="boy">男</label>

        <input type="radio" name="" id="girl">
        <label for="girl">女</label>
    </form>

11.4.11 CHECKBOX

復選框指允許選擇多個值的表單

屬性說明 checked 選中狀態(tài)

<form action="">
        <input type="checkbox" name="JAVA" id="java">
        <label for="java">JAVA</label>

        <input type="checkbox" name="WEB" id="web">
        <label for="web">WEB</label>
    </form>

11.4.12 FILE

文件上傳有很多方式,可以使用插件或者JS拖放上傳處理.Html本身也提供了默認的上傳功能,只是上傳效果并不是很美觀.

屬性說明 multiple 支持多選 accept 允許上傳類型.png , .psd 或者 image/png , image/gif

<form action="" enctype="multipart/form-data">
        <input type="file">
        <input type="submit" value="上傳">
    </form>

11.4.13 日期時間

屬性說明 min 最小時間 max 最大時間 step 間隔: date缺省是1天 week缺省是1周 month缺省是1月

a.日期選擇

<h1>日期選擇</h1>
    <form action="">
        <input type="date" step="5" min="2020-09-22" max="2025-01-15" name="datetime">
    </form>

b.周選擇

<h1>周選擇</h1>
    <input type="week" name="" id="">

c.月份選擇

<h1>月選擇</h1>
    <input type="month" name="" id="">

d.日期與時間

<h1>日期與時間</h1>
    <input type="datetime-local" name="" id="">

11.4.14 DATALIST

input表單的輸入值選項列表

<form action="">
        <label for="username">用戶名</label>
        <input type="text" name="" id="usernmae" list="less">
        <datalist id="less">
            <option value="JAVA">后臺管理語言</option>
            <option value="CSS">美化網(wǎng)站頁面</option>
            <option value="MYSQL">掌握數(shù)據(jù)庫使用</option>
        </datalist>
    </form>

12、框架集

frameset元素可定義一個框架集。它被用來組織多個窗口（框架），每個框架存有獨立的文檔，在其最簡單的應(yīng)用中，frameset元素僅僅會規(guī)定在框架集中存在多少列或多少行，您必須使用cols或rows屬性。

注意事項：由于是分割原網(wǎng)頁，所以我們不能在body中進行編寫，在head中進行分割。

標簽說明 frameset 框架集 frame 框架

屬性說明 cols 定義框架集中列的數(shù)目和尺寸 rows 定義框架集中行的數(shù)目和尺寸 frame border 去除框架邊框 scrolling 去除滾動條

12.1 垂直框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html垂直框架</title>

    <frameset cols="50%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frame src="http://www.taobao.com" frameborder="0"  scrolling="no"></frame>
    </frameset>
</head>
<body>
    
</body>
</html>

12.2 水平框架

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Html水平框架</title>
		<frameset rows="50%,*" >
				<frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
		</frameset>
	</head>
<body>
</body>
</html>

12.3 混合框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html混合框架</title>

    <frameset rows="20%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frameset cols="20%,*">
            <frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
            <frame src="https://www.huya.com/" frameborder="0" scrolling="no"></frame>
        </frameset>
        
    </frameset>
</head>
<body>
    
</body>
</html>

12.4 導航框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html美女</title>
</head>
<body>
    
    <img src="../images/10.jpg" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html野獸</title>
</head>
<body>
    

    <img src="../images/timg.gif" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html動物</title>
</head>
<body>
    
    <img src="../images/4.jpg" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html鏈接</title>
</head>
<body>

    <a href="Html美女.html" target="view">美女圖片</a>
    <a href="Html野獸.html" target="view">野獸圖片</a>
    <a href="Html動物.html" target="view">動物圖片</a>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html垂直框架</title>

    <frameset rows="20%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frameset cols="20%,*">
            <frame src="Html鏈接.html" frameborder="0" scrolling="no"></frame>
            <frame src="https://www.huya.com/" frameborder="0" scrolling="no" name="view"></frame>
        </frameset>
        
    </frameset>
</head>
<body>
    
</body>
</html>

13、內(nèi)聯(lián)框架

iframe元素會創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架。

屬性說明 align 對齊方式，后期采用css的方式進行設(shè)置 width 設(shè)置寬度 height 設(shè)置高度 src 設(shè)置iframe中顯示的文檔的URL name iframe的名稱 scrolling 是否顯示滾動條 frameborder 設(shè)置iframe的邊框

在線咨詢

上一篇：HTML 之簡介
下一篇：一個支持將Html頁面轉(zhuǎn)為PDF的.Net開源項目

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

網(wǎng)頁前端設(shè)計-21超鏈接樣式

、Html概述

二、Html標簽語法

1、成對標簽

2、自閉合標簽

三、Html基本架構(gòu)

1、！DOCTYPE

2、html

3、head

4、meta

5、body

四、Html文檔規(guī)范

五、Html注釋

六、html基本屬性

1.bgcolor

2.路徑

3.background

七、Html標簽

1.網(wǎng)頁的組成

2、文本段落標簽

3、文本控制標簽

4、文本格式化標簽

5、圖片標簽

6、audio

7、video

8、超鏈接

9、列表

1.有序列表

2、無序列表

3、描述列表

10、表格

10.1 基本使用

10.2 單元格合并

11、表單

11.1 基本使用

11.2 GET&POST

11.3 LABEL

11.4 INPUT

11.4.1 基本示例

11.4.2 調(diào)用攝像頭

11.4.3 其他類型

11.4.4 HIDDEN

11.4.5 SUBMIT

11.4.6 禁用表單

11.4.7 PATTERN

11.4.8 TEXTAREA

11.4.9 SELECT

11.4.10 RADIO

11.4.11 CHECKBOX

11.4.12 FILE

11.4.13 日期時間

11.4.14 DATALIST

12、框架集

12.1 垂直框架

12.3 混合框架

12.4 導航框架

13、內(nèi)聯(lián)框架

您的項目需求