網(wǎng)頁的基本結(jié)構(gòu)_第1頁
網(wǎng)頁的基本結(jié)構(gòu)_第2頁
網(wǎng)頁的基本結(jié)構(gòu)_第3頁
已閱讀5頁，還剩2頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

1、文本標(biāo)簽標(biāo)題標(biāo)簽 <h1></h1> .<h6></h6>段落標(biāo)簽 <p align= ' center,left,right' ><font color,face,size> 字體標(biāo)簽</font></p>換行標(biāo)簽 <br/>水平線標(biāo)簽<hr size= '20px'color= 'red 'width= '100%' /> （&lt;）<（&gt;）>圖片標(biāo)簽 <img sr

2、c=”圖片路徑” alt= '圖片提示信息' height,width,align= '文本與圖片的對齊方式' /> 滾動標(biāo)簽 <marquee direction= ' up'></marquee>超鏈接 <a href= '連接到頁面的地址' target= ' blank '（ 在新的選項(xiàng)卡打 開）></a>錨點(diǎn)連接：進(jìn)行頁面定位 <a href= ' #名稱' ></a>定義錨點(diǎn) <a name= '

3、' ></a>排列網(wǎng)頁內(nèi)容無序列表 <ul type= '項(xiàng)目符號' ><li></li></ul> 有序列表 <ol type= ' a' ><li></li></ol>定義 列表： 用于產(chǎn) 品的 解釋 用于 圖文 混合的 布局 <dl><dt> 標(biāo) 題</dt><dd></dd></dl>表 格 標(biāo) 簽 <table border= ' 1' w

4、idth= '500px',height= ' 300' ,bgcolor= ' red' background= ”背景顏色” cellspacing= ”單元格間距” cellpadding= '單 元 格 與 內(nèi) 容 的 間 距 （ 填 充 ） '><tr align= ' center,left,rigth'><tdcolspan= ' 3' >跨列 </td><td rowspan= ' 1' >跨行 </td&g

5、t;</tr></table>DIV 標(biāo)簽（層標(biāo)簽） <div></div><span> 行內(nèi)標(biāo)簽 </span> 作為文本容器傳遞網(wǎng)頁數(shù)據(jù)表單的使用 <form name method action><inupt type= ”text ” name/></form> Get 與 post 的區(qū)別： post 不會顯示用戶的密碼并且提交數(shù)據(jù)的長度沒有限制 常見的表單元素：文本框 <input type= ” text ” name=” username ” /> 密碼框 &

6、lt;input type= ” password ”>單選按鈕 <input type= ” radio ” value= ”男” name=” sex” > 復(fù)選框<input type= ” checkbox ” value= ”籃球” checked= ” checked ” /> 文件域 <input type= ” file ” name/>下拉列表 <select name= ” size （顯示的行數(shù)） =”3”> <option value= ” 湖北省” selected= ” selected ”>湖北省

7、</option> </select>多 行 文 本 域 ： 自 我 介 紹 <textarea name cols= ' 列 ' rows= ” 行” ></textarea>提交按鈕 <input type= ” submit ” value= 按鈕顯示的值” name/>重置按鈕 <input type= ” reset ”value= ”重置” name/>框架組合網(wǎng)頁框架結(jié)構(gòu)介紹 框架集使用：沒有 body 部分<frameset cols/rows（ 頁 面 按 行 割）= ” 25%,5

8、0%,* ”bordercolor= ” red ” border= ” 5” ><frame src/></frameset> 行列混合的頁面<frameset rows=” 25, * ” ><frame src= ” /><frameset cols= ” 25%,* ” ><frame/></frameset></frameset>內(nèi)嵌框架<iframesrc= ” name=” frameborder= ” 1”scrolling= ”auto ” width= ” 700px

9、 ”height= ”300 px” ></iframe>CSS 樣式表的使用<ul> <li class= ” red ” >fdjkjifd</li><liid= ” news”>fdjkjifd</li><li>fdjkjifd</li> <li>fdjkjifd</li> </ul><style type="text/css">Li（ 標(biāo)簽選擇器 ） color:#DF0E11;font-size:9px;font-f

10、amily: 黑體 ;.red（ 類選擇器 ）Color:red;#news（ id 選擇器）Background-color:red;</style>選擇器的優(yōu)先級 ID 選擇器類選擇器標(biāo)簽選擇器文本和字體屬性<!doctype html><html><head><meta charset="utf-8"><title> 無標(biāo)題文檔 </title><style typ="text/css">pcolor:red;font-size:20px;font-fa

11、mily: 微軟雅黑 ; letter-spacing:10px; /* 字符間距 */ text-align:right;/*文本的對齊方式 */text-decoration:underline;/* 文本修飾 */ line-height:30px;/*文本行高 */font:bold 20px 微軟雅黑 ;</style></head><body><p>css 是一種頁面修飾梅花技術(shù) </p></body></html>CSS盒子模型<style type="text/css"

12、>#box1border-width:5px;border-color:red; border-style:dashed;/* 邊框的風(fēng)格 */ border:5px solid red;padding-top:20px;/* 填充 */ width:300px; 只有塊級元素才能修飾 height:600px;background-repeat:no-repeat;/* 背景的平鋪方式 */ background-color:red;background-image:url();bodymargin:0px;#box2margin-top:30px;/* 盒子之間的間距 */ bord

13、er:5px solid red;</style></head> <body><div id="box1"><img src="images/" height="500" width="300"></div><div id="box2"> 盒子 2</div></body>網(wǎng)頁布局設(shè)計(jì) 標(biāo)準(zhǔn)文檔流 行內(nèi)元素從左到右解析文檔 塊級元素從上到下解析元素Display 屬性可以改變元素的性質(zhì)盒子

14、的定位title> 盒子的定位 </title><style type="text/css">#wrapperborder:3px solid black;#box1,#box2,#box3border:3px solid black; margin:5px;height:40px;width:300px;#box1 background-color:red; color:yellow;position:absolute;/* 絕對定位 脫離標(biāo)準(zhǔn)文檔流 */ top:30px;left:100px;#box2background-color:g

15、reen; color:white;position:relative;/* 相對原來的位置進(jìn)行偏移 */ left:50px;top:-20px;#box3 background-color:yellow; color:black;position:fixed;/* 固定定位 */ top:30px;left:100px;</style></head> <body>第一個層 </div> 第二個層 </div> 第三個層 </div><div id="wrapper"><div id

16、="box1"><div id="box2"><div id="box3"> </div></body>盒子的浮動Float:left;Clear:both; overflow ： hidden 解決浮動塌陷常用流行布局的實(shí)現(xiàn)80%自適應(yīng) width ：80% 當(dāng)改變窗口的大小時，頁面內(nèi)容始終是窗口的JavaScript 基礎(chǔ)知識定義函數(shù)<script type="text/javascript"> function getArea (width,h

17、eight) var re=width*height;r eturn re;/*(" 面積： "+re);*/var area=getArea(3,4);(area);</script> 系統(tǒng)函數(shù) <script type="text/javascript"> var r=parseInt("123")+parseFloat("456");(r); </script> var x="ABC"var y=123;(isNaN(y);輸入 x 返回 true 表示

18、 x 不是數(shù)字Var r= ” 1+2+3+4; r=eval(r);(r);eval 返回運(yùn)算數(shù)的計(jì)算結(jié)果 匿名函數(shù)(function (width,height)(" 面積： "+width*height);) (3,4)函數(shù)也是一種數(shù)據(jù)類型 function 類型 匿名函數(shù)作為函數(shù)的參數(shù)來傳遞 Var area=function(width,height)( “面積：” +width*height);Area(3,4); 常用事件、 <script type="text/javascript"> function fun(obj)&qu

19、ot; 30px"</script><p onClick="fun(this)"> 事件綁定 </p> This 表示事件源 p；=function()alert(" 歡迎來到美淘網(wǎng) ");<body onUnload="alert(' 觸發(fā) onload 事件 ')"><marquee direction="right" onMouseOver="stop()" onMouseOut="start()&q

20、uot;><img src="images/psb (1).jpg" width="300" height="300" alt="1"/> </marquee>瀏覽器默認(rèn)處理程序<script type="text/javascript">function Check()=false;</script><body><form action="" onSubmit="return false;"><input type="submit" value="確定 "/></form>function Check()var username=("name").value;if(username="")alert(" 請輸入用戶名 ");r eturn false;r

溫馨提示

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

評論

0/150

提交評論