html常用代碼大全

.結構性定義

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

文件主題 <TITLE></TITLE> （必須放在「文頭」區塊內）

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

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

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

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

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

區分 <DIV></DIV>

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

引文區塊 <BLOCKQUOTE></BLOCKQUOTE> （通常會內縮）

強調 <EM></EM> （通常會以斜體顯示）

特別強調 <STRONG></STRONG> （通常會以加粗顯示）

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

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

樣本 <SAMP></SAMP>

鍵盤輸入 <KBD></KBD>

變數 <VAR></VAR>

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

地址 <ADDRESS></ADDRESS>

大字 <BIG></BIG>

小字 <SMALL></SMALL>

與外觀相關的標簽（作者自訂的表現方式）

加粗 <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; 內定為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>之間,顏色可根據自己的需要修改。

滾動條的代碼意思如下：

Scrollbar-Face-Color為滾動條表面顏色設定；

Scrollbar-Track-Color為滾動條底板顏色設定；

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

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

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

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

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

<!> 跑馬燈

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

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

<marquee behavior=scroll>...</marquee>預設捲動

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

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

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

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

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

<marquee loop=2>...</marquee>捲動次數

<marquee width=180>...</marquee>設定寬度

<marquee height=30>...</marquee>設定高度

<marquee bgcolor=FF0000>...</marquee>設定背景顏色

<marquee scrollamount=30>...</marquee>設定捲動距離

<marquee scrolldelay=300>...</marquee>設定捲動時間

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

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

3)在新窗口打開連接：<a href="相關地址" 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="相關地址" 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)貼網頁：<iframe. src="相關地址" width="寬度" height="高度"></iframe>

1、店鋪音樂代碼:音樂網址" 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等設置大小＜/font＞

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

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

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

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

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

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

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

計數器代碼顏色代碼：

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代碼大全（修改網頁必備）

網頁常用HTML代碼大全

超鏈接，用的最多：

點擊在當前頁打開網站

<a >這是我的網站</a>

效果：這是我的網站

點擊彈出網站

<a target="_blank">這是我的網站</a>

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

歡迎光臨我的網站<br>希望開心

演示效果就是：

歡迎光臨我的網站

希望開心

<p>向下一大行，比如

歡迎光臨我的網站<p>希望開心

演示效果就是：

歡迎光臨我的網站

希望開心

<b>這是粗體字

比如 <b >我的網站</ b>

演示效果：我的網站

我的網站這是字體的顏色BLUE是藍，RED是紅

演示

忽視右鍵

<body >

或

如何幾秒后轉到別的頁面？

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

點擊關閉窗口

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

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

如何做到讓一個網頁自動關閉.

<html>

<head>

</object>

</head>

<body >

這個窗口會在10秒過后自動關閉,而且不會出現提示. </body>

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

<style>

button{ color:#000000;}

</style>

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

請問如何讓網頁自動刷新？

在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文件在網頁做一個試聽連接？

如何用html實現瀏覽器上后退按鈕的功能？

或者

請問怎么在網頁中改變鼠標的箭頭形狀？

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>

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

<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>

如何讓我的頁面出現一個會講話的小人？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時背景圖不動

文本輸入框什么屬性能實現不可輸入？

HTML 代碼片段如下:

或者

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

把以下代碼加至你的<head>區

if (window.top!=self){

window.top.location=self.location

}

</script>

如何實現首頁全屏幕顯示？

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>

如何監聽一個窗口被關閉了？

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格式文件

關于頁面轉換效果

或

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

如何設定打開頁面的大小

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 代碼片段如下:

如何讓彈出的窗口不能關閉？

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

</body>

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

HTML 代碼片段如下:

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

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

</NOSCRIPT>

表單中如何用圖片按鈕實現 reset?

<html>

<head>

function aaa(){

document.forms[0].reset()

}

</script>

</head>

<body>

<form>

</form>

</body></html>

進入網頁時彈出的信息對話框

<body >

關閉窗口后彈出對話框

<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>

參數解釋：

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

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

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

　 newwindow 彈出窗口的名字（不是文件名），非必須，可用空代替；

　 width=400 窗口寬度；

　 height=300 窗口高度；

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

　 left=0 窗口距離屏幕左側的象素值；

　 toolbar=no 是否顯示工具欄，yes為顯示；

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

　 resizable=no 是否允許改變窗口大小，yes為允許；

　 location=no 是否顯示地址欄，yes為允許；

　 status=no 是否顯示狀態欄內的信息（通常是文件已經打開），yes為允許；

　 </SCRIPT> js腳本結束

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。窗口定時關閉

先將如下代碼網頁文件的區：

　 <script. language="javascript">

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

　 </script>

然后再在<body>標內加入如：<body nload="closeit()">

9。網頁自動關閉

　 <html>

　 <head>

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

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

　 </object>

　 </head>

這個窗口會在10秒過后自動關閉,而且不會出現提示.

　 </body>

　 </html>

10。網頁自動刷新

在head部記入

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

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

11。網頁自動轉頁

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

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

在Layer中再插Iframe. 或 Object 設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。關閉窗口

15。關于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"> 關閉輸入法

23. 永遠都會帶著框架

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

// --></script>

24. 防止被人frame.

<SCRIPT. LANGUAGE=JAVASCRIPT><!--

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

// --></SCRIPT>

25. 網頁將不能被另存為

26. 查看網頁源代碼

<input type=button value=查看網頁源代碼

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. 網頁不會被緩存

<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.如何設定打開頁面的大小

打開頁面的位置<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. 檢查一段字符串是否全由數字組成

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自適應文字行數的多少

</textarea>

41. 日期減去天數等于第二個日期

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. 檢測某個網站的鏈接速度：

把如下代碼加入<body>區域中:

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

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

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

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

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

2. 怎樣防止別人把你的網頁放到框架里?

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

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

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

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

3. 怎樣設置字體?

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

4. 怎樣在網頁中加入注釋?

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

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

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

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

$#@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. 怎樣在網頁中加入E-mail 鏈接并顯示預定的主題?

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

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

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

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

9. 怎樣評定網頁的級別?

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

$#@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. 怎樣定義本網頁的關鍵字?

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

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

----Content 所包含的就是關鍵字, 你可以自行設置。

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

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

11. 怎樣鏈接本網頁的對象?

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

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

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

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

12. 怎樣為不支持框架結構的瀏覽器指定內容?

----為了防止不支持框架結構的瀏覽器訪問你的網頁, 可以在你的網頁中加入以下內容:

$#@60; body $#@62;

$#@60; noframes $#@62;

本網頁是框架結構, 請下載新的瀏覽器瀏覽

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

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

13. 怎樣刪除表格邊框?

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

$#@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. 怎樣隱藏在狀態欄里出現的LINK 信息?

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

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

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

15. 怎樣在網頁中加入多媒體文件?

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

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

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

16. 怎樣在網頁中加入電子郵件表單提交?

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

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

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

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

18. 怎樣在網頁中加入最后修改日期?

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

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

document.write

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

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

ello,大家好，我是AbnerMing，從這篇文章起，我們開始進入為期10天的網頁制作學習，具體怎么學習，及未來的就業前景，還請大家去看上一篇文章《零基礎10天學會網頁制作之前言》，這篇文章已經很詳細的介紹了，廢話不多說，進入正題吧。

第一天的課程，比較簡單，基本上沒有很難的知識點，目錄如下：

1、簡單介紹網頁制作及市場前景

2、接下來如何學習，定好目標

3、網頁是怎么制作的

4、什么是Html

5、什么是Css

6、如何進行開發（IDE的選擇）

7、認識網頁結構html，head，body

8、h1~h6標簽

9、p標簽

10、img標簽

11、今日總結及作業

1、簡單介紹網頁制作及市場前景

這個在昨天的前言中已經很詳細的介紹了，這里再重復一遍，什么是網頁制作，顧名思義，就是在互聯網上開發網頁，對于互聯網中網頁，我們肯定司空見慣，你所瀏覽的任何網站，比如，百度，頭條，淘寶，京東，大學網站，公司官網等等，都是網頁，也就是說，你在Pc端或移動端中的瀏覽器，或者APP嵌套的H5，所看到的，都是一個網頁，與我們的生活息息相關。

市場前景，像在一線城市，北上廣深，需求量很大，中等的前端工程師，起碼都在12K以上這個水平，當然了高級的更高，30多K,40多K的也大有人在，所以，只要學得扎實，實力雄厚，那么薪資這個也不在話下，大家可以去智聯，Boss，拉鉤等招聘渠道，自己搜一搜這個行業的薪資，是不是我說的這樣，可以去驗證一下。

2、接下來如何學習，定好目標

還是如昨天說的一樣，學習，特別是自學，這個是需要很大毅力的，堅持是很重要的，一定要知道，學習是為自己而學，不是為了別人，想要拿到一個高薪，必定要付出更多的努力；給自己定好一個目標，比如學成后，我要找多少的錢的工作，這個很有必要的，因為它可以時長地去鞭策你前進。

3、網頁是怎么制作的

我們在網上所看到的百度，淘寶，京東，等等，這些網頁是怎么制作呢？這里先給大家一個定義，不需要刻意地去記，因為接下來的課程，都會一一地講解，首先呢，肯定是由人進行開發的，這里的人一般都是指程序員，也就是以后對于我們的定義，說的高大尚些，就是前端工程師，通過使用IDE(開發工具)，編寫代碼，完成的一個個網頁，通過上傳到服務器，再由域名解析后，就是我們所看的各個網頁，當然，中間還有一些流程，這些呢我們后續再說，畢竟我們才剛入門，先了解再說。

編寫的是什么代碼，才能組成的一個網頁呢，不妨我們以百度為例子，打開百度的官網，點擊鼠標右鍵，點擊查看網頁源代碼。

查看網頁源代碼圖

我們看到了什么，是不是如下圖：

源代碼圖

當然了，不止百度，你打開任何的網站，查看源代碼后，基本上都是如上圖，這就是組成網頁的代碼，前端里俗稱標簽。

4、什么是Html

通過上述第三項，我們在網頁源代碼中不難發現，都是有一個一個的“<>”組成的，這里的左右尖括號，就是書寫網頁的代碼，俗稱標簽，這些就是Html，是描述網頁的一種語言，叫，超文本標記語言，英文是：HyperText Markup Language，簡稱：HTML。

這里簡單的概述一下，HTML呢，不是一種編程語言，而是一種標記語言，所謂的標記語言就是由一套標記標簽組成的，和上述我們看到的源代碼里類似，對于這些概念性的東西，大家不用死記硬背，只需要了解即可。

HTML發展至今，已經經歷了很多版本的更新迭代，每個版本的出現，都是一次革故鼎新。

HTML發展史

5、什么是Css

上述我們知道了什么是Html，知道了網頁都是用Html進行開發的，那么什么是css呢？簡單來說，就是樣式。我們可以看到，很多的網站做得都比較高端，大氣，上檔次，非常漂亮，其實這些絕大數都是用css來開發修飾的，也就是說，通過css，我們可以控制頁面的美觀，文字的大小，顏色，各個標簽的位置，動效等，使得html變得美觀，大方。用一個很簡單的例子，用人來比喻，HTML就好比是一個裸體，CSS呢就是各種不同的衣服，用房子來比喻，HTML是一個毛坯，CSS就是精裝修所用的材料。

6、如何進行開發（IDE的選擇）

俗話說的好，工欲善其事必先利其器，我們如何去書寫代碼呢，當然了，開始學的話，用記事本是最好的，因為記事本沒有任何的聯想提示，必須一個一個進行書寫，特別能鍛煉我們的標簽意識，加深我們的代碼能力，這個我是比較推薦的，后續如果對標簽熟練了，我們可以再轉到其他工具上。

熟練之后，我們選擇的工具就比較多了，比如Dreamweaver,WebStorm,IntelliJ,pycharm等等，任何一個開發編程語言的IDE（開發工具），幾乎都支持web開發，那么具體選擇哪一款，主要是看個人喜好，目前市面上用的最多的是WebStorm,接下來的課程，我們也主要是選擇這款開發工具進行開發，如何進行下載和安裝，到時，我們選擇它開發的時候會一點一點講到，前邊兩三天，我們還是用原始的記事本進行開發，主要目的只有一個，加深大家對標簽的熟練，多培養代碼感。

7、認識網頁結構html，head，body

前邊，通過查看各個網頁源代碼，我們是不是發現了一個共同的問題，可以看看下面幾個圖：

源代碼截圖：

百度源代碼部分截圖：

Android干貨鋪源代碼截圖：

源代碼太多了，截圖并沒有截全，希望大家可以實際去看下各個源代碼，通過查看源代碼，我們發現了一個什么現象，是不是都有這幾個標簽，這就一個網頁的組成結構，如下圖：

網絡上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網頁內容，聲明有助于瀏覽器中正確顯示網頁。

通用的聲明如下：

HTML5

HTML 4.01

"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

head標簽，顧名思義，就是頭部元素，在head里，我們可以聲明文檔的編碼，標題，作者，描述，引入外部的css,JavaScript等資源，這個是個很重要的元素。

中文編碼，我們就可以這樣在head里去寫

body標簽是我們的主體內容，我們日后所有的標簽代碼都要書寫在這里

雖然說標簽的書寫，不區分大小字母，但是html4.0后，一般規定使用小寫字母，我們可以去看那些主流的網站，也基本采用的是小寫字母，這個我們一定要注意。

還有一個需要注意的，HTML標簽中，絕大部分標簽，都是雙標簽，有開始有結尾，類似，也就說是成對出現的，當然了也有單標簽，這個日后會介紹。

不妨，我們花個幾分鐘，在記事本上，把網頁的主體結構給寫一寫吧，在視頻中，我也會帶著大家去寫一寫，在頭條(北漂程序員老李)，微信公眾號（一個北漂程序員），視頻，文字教程，我會同步更新，記得關注我哦~

8、h1~h6標簽

了解了網頁的主體結構后，我們已經知道了，body標簽里是書寫網頁內容的，我們在網上經常看到一些黑色的標題文字，那么這些內容，我們該如何顯示呢？h1到h6就可以滿足我們需求，來，我們一起來寫一寫吧，新建一個記事本文件，這里我起名“day_01.txt”，如下圖：

文件

打開文檔，在文檔里我寫上標簽內容，如下圖：

代碼

點擊保存后，更改后綴為“.html”:

更改

右鍵，選擇打開方式，在瀏覽器中打開，我們就看到了下圖：

效果

上邊就是h1到h6所展示的效果，簡單吧，以后比如在文章中定義標題，我們就可以選擇對應的來寫，在head里我們定義了一個title標簽，其實就是網頁的標題，我用紅色箭頭標了出來。

9、p標簽

我們經常看新聞，一個新聞，除了標題之外，還有什么，新聞內容，對吧，也就是每段的內容，我們就可以使用p標簽寫展示。

實例

我們還在，原來那個文件里寫，右鍵，打開方式，選擇記事本打開。

代碼

寫好后，點擊保存，右鍵，打開方式，使用瀏覽器打開。

效果

對于p標簽，也是一個很簡單的標簽，大家多練習一下，試著，多寫幾個段落吧。

10、img標簽

當我們已經掌握了h標簽和p標簽后，基本上一個無圖的新聞列表，我們就可以搞定了，有的朋友就要問了，我想加入圖片，該如何實現呢，哎，加入圖片就要說到這個img標簽了，img標簽是個單標簽，這個我們注意一下，語法如下：

src呢，是img的固有屬性，指向的是一個圖片路徑，這個圖片路徑呢，可以是網上的一個圖片鏈接，也可以是本地的一張圖片。

比如我們要實現下圖的效果，該怎么實現呢？

效果

這里我們分析一下，一共兩部分組成，上邊是標題，下面是圖片，標題，我們可以使用h系列標簽實現，圖片呢，我們就可以使用img來實現，這里使用本地的圖片吧，后續我們會講到，遠程和本地圖片，還有圖片相關路徑的選擇，圖片資源如下，大家可以右鍵選擇保存。

素材

這里我把圖片保存到了同級的目錄下，如下圖：

文件目錄

接著，我們更改day_01.html:

代碼

效果如下圖：

實現效果

11、今日總結及作業

畢竟第一天，內容還是比較簡單的，一是認識網頁結構，知道一個網頁都有哪些標簽組成，是干什么的，二是掌握，h,p,img標簽的使用。

今天作業，實現一個新聞列表：

新聞列表

圖片素材如下（可右鍵保存）：

素材

好了，第一天的課程就到這里吧，我是AbnerMing，一個北漂的程序員，期待您的關注！

文作為小白入門級，相對基礎，是寫給現在想了解一點前端知識的設計師同行們，力求通俗易懂幽默風趣。這一章不僅教大家網頁排版的基礎知識，還以百度藝術百科的網頁為例，帶大家簡單做一遍，學得會更快，來收！

閱讀須知：

工具不重要，工具不重要，工具不重要……OK？有人說DW早就淘汰了，我造啊，然后呢？我還打算用小紅本（editPlus）講呢，哈哈哈哈……
希望乃們接受我這種循序漸進的過程。做算術題你會知道“乘法”和“設未知數”來得更快，但是也得從簡單“加減法”過渡。如果有疑問請留言或私信，下篇會著重講。
所有內容基于自己的理解和編碼習慣，并非標準。

好了，進入正題。排版之前先來做點準備工作。

一、嵌入、內聯樣式

1. CSS 嵌入

其實程序員是一幫蠻會偷懶的家伙你信么？^_^ 在碼字過程中，如果遇到常用的一段代碼，就會想辦法打包起來，需要的時候一行代碼或幾行代碼就可以調出來用而不用重復寫，系不系很機智。讓我想起來我們常用的那些PS動作們，不就是同樣的原理嗎？

來吧，排幾個寬高各100px的div試試，如果你現在還不能默寫的話，建議多練習幾遍。

如上圖：代碼如下

（偶的dw過期啦，臨時換了一個。其實也沒多大區別啦，是吧？這是以前一個同事介紹的Webstorm，現在他又不知道換了啥。-_- …乃們繼續用DW敲吧，我會隨時用回DW的，頭部那些東西不要為了和我的一樣而亂改哈。）

像這種直接放在div標簽內style里的樣式稱為嵌入樣式。只服務于它嵌入的那個標簽，而對其他標簽的樣式不會產生影響。

但是，每個div都要寫辣么長，明明有些屬性大家都一樣的，還要重復寫好煩啊……所以接下來介紹一下簡便的寫法。

2. 內聯樣式

第一步：提“公因式”

下面這個你們還記得吧？我雖然讀書少，但我還記得，哈哈……提取公因式的原理即使把a、c共同擁有的公因式b提取出來……所得結果一樣。

同樣方法把前面代碼中style里共同擁有的一句提取出來得到：width:100px; height:100px; float:left; 不同的樣式保留。

則最后style中就只剩下了顏色值,是不是很短了？而且大部分時間是不用每個div都附上顏色的，我們今天只是拿帶顏色的矩形來模擬一下，所以真正應用時僅存的顏色那一句都會被刪掉。

但是提取出來的公共樣式又要放到哪里呢？

介紹一個新名詞：class（這個也是很重要的哦）

class直譯為級、階級、種類等，也就是相同的東西歸為一類放在一起；我們把提取出來的公共樣式放在class里，在頭部（即head標簽內）新建一個style盒子（標簽），裝入盒子，如下：

注：1）其寫法不變，依然是”屬性名:屬性值;”,但是外包裝從style:” ” 換成了 class{ }; 由于脫離出來的class沒有盒子可裝，所以html出現了這個專門裝樣式類的<style></style>標簽盒子。

2）請注意：class前面還有一個小點 “ . ”。這個點是class的唯一標識，瀏覽器讀取到“.className”，才知道這個東西是類名。否則你就是個單詞而已，再讀下去就是一些括號，單詞，瀏覽器就懵了，說好的點呢？怎么不按套路出牌。

初學時類名可以隨意一點，你寫成 .a、.b、.apple、xiaoming1……都沒事，小寫就行了，但不能是中文及以數字開頭，也盡量不要與標簽名一樣。后面會專門講到命名這一塊。

第二步：引用

公共樣式提出來了，也用盒子裝好了，但是他們之間還沒有搭上關系，這就需要在div內引用一下寫好的類：

所有你想用的div都可以引用那個類，引用的方式是在開始標簽后面加上：class=”className”（這里是不需要有“.”的，但注意不要寫錯哦）。保存刷新一下：

是不是和前面那種寫法得到的效果一樣？像這種頭部style標簽中能夠被其他標簽通過類名來引用的樣式，稱為：內聯樣式。

它的作用域就大些了，但是也僅限于當前html文件中，只要引用了便能對引用的標簽樣式產生影響，可復用的。常規做法有時候會加上一句“type=text/css”即為：<style type=text/css></style>，但是我一般會省略，發現也木有啥影響，加了應該是比較規范吧。

class 屬性不能在以下 HTML 元素中使用：base, head, html, meta, param, s cript, style 以及 title。

小練習：

寫兩個不同內容的類，分別引用于兩個或更多div。

寫到這里發現樣式真的好多要講的啊，下篇專門講吧，今天先講一點……

二、用矩形模擬網頁布局

請看大屏幕：（截圖于百度藝術百科的網頁）

這個是相對比較傳統的排版方式，雖然中規中矩，形式卻蠻多的。文字、圖片、標簽、視頻播放……比較適合排版練習。

web端網頁最大的優勢在于，設計稿什么樣，開發就能做成什么樣，因為不用像移動端考慮那么多適配問題（想想以前的寫手機端黑歷史，托腮仰天，老淚縱橫……T_T）。我給周圍轉web前端的朋友的建議都是，先把PC的布局搞定再去寫移動設備端的會輕松一點。

1. 審“題”

拿到設計需求就立馬打開PS做東西的事情，反正我是不干的，一般會事倍功半。同樣，拿到網頁設計稿也請不要立馬開始碼字，我們需要審題。

告訴我你看上面那張圖片看到了幾塊吧？以前畫素描的時候，老師是不是告訴過你要瞇著眼睛看光影關系，因為人容易被一些細節所影響，所以先鋪大面，再摳細節，一張合格的素描才能被很好的完成。同樣，一個網頁，無論內容再多，分布也是從大到小慢慢摳出來的。

好吧，說多了暈，來看看我的分法吧，這種思路可能跟你在設計時考慮怎么放東西有點相仿：

首先，頭部的tab和下方為一塊，分好之后下面的分成兩塊，再然后……

其實前端工程師差不多是這樣的思路，從上到下，從左到右寫。有的會把其中一個部分寫好再去寫下一個，有的會一次性寫幾個大塊，后面再補。要不是特殊原因，你的設計稿要是不對齊,你就等著他來質問你吧，或者他默認就給你寫對齊了。

類似C3那里的藝術家模塊，工程師最稀飯了，哈哈哈……寫一段，然后ctrl C ctrl V，ctrl V，ctrl V……

廢話不多說，跟著來吧……

我們按照有效區域1180px來寫，尺寸的話，自己去網站截來量 http://baike.baidu.com/art 。

現在去看的話是沒有內容的，從上到小先把A1排出來

好，現在的結構已經不是單獨的平行結構了。第一個div有了自己的孩子（注意換行縮格，這樣層級關系較明顯一些）即裝文字的五個div（也可用其他標簽裝，例如：a、p、span……）。為什么稱之為孩子，因為在html中有子標簽及父標簽一說。有時候子標簽會繼承父標簽的樣式，但大多是標簽所含的內容，而不是標簽本身，即如果給“title_tab”添加針對文本的樣式，那么子標簽內的文本也即將改變，除非子標簽擁有自己的針對文本的樣式，然而不是所有時候都能成功繼承（誒……越講越多）。

其代碼如下：

紅色部分解析：

（title的樣式那樣寫方便看，你們也可以這樣寫，只不過多了就顯得篇幅較長。）

1）樣式提供多種書寫方式，不僅僅只有.className,可以帶標簽名 p{}、div{}……帶標簽名則不用前面加點，不過是針對當前html文件中所有p標簽和div標簽，所以你知道我為什么說類名盡量不要使用跟標簽名一樣的了吧？要是忘記寫點了，那畫面，簡直不敢想象。像文中“ *{ } ”的*號則代表所有，margin是間距屬性，每個瀏覽器的默認里面，margin是有值的，所以需要進行一些設置。如下圖：

2）padding是內邊距，margin為外邊距；

當他們只有一個值時（例：padding:10px;margin：10px；），則默認為上下左右都為10px

當有兩個值時（例：padding:10px 20px;），其代表的是上下10px，左右20px;

當有四個值時（例：padding：1px 5px 3px 6px;）,則分別針對：上右下左，即順時針方向的值，注意，不是上下左右哦。

最后，也可單獨針對一邊設置，例：padding-left:10px; margin-top:20px;

color設置字體顏色;font-size——字體大小;font-weight——字體粗細（bold、100、200、300……最大也就八九百的樣子，不帶單位）；font-family:”微軟雅黑”; ……

至于float的屬性，請參照上一篇；

有很多屬性，可以自己去w3cschool慢慢找來試一試。

好了，今天就講到這里了，你們看我寫的代碼都有點不一樣，就說明不是一天寫的啦，時間真是不夠用呢。

請私信我回復“666”，為U妹打Call~，還有更多驚喜哦~

.............................................................

UI妹兒—越努力，越幸運