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

下載本文檔

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

文檔簡(jiǎn)介

1、 網(wǎng)頁(yè)的基本結(jié)構(gòu) <html> <head><title><title></head><body></body></html> 文本標(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=20pxcolo

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

3、t; 排列網(wǎng)頁(yè)內(nèi)容 無(wú)序列表<ul type=項(xiàng)目符號(hào)><li></li></ul> 有序列表<ol type=a><li></li></ol> 定義列表：用于產(chǎn)品的解釋 用于圖文混合的布局 <dl><dt>標(biāo)題</dt><dd></dd></dl> 表格標(biāo)簽<table border=1width=500px,height=300,bgcolor=red background=”背景顏色” cellspacing=”單元

4、格間距”cellpadding=單元格與內(nèi)容的間距（填充）><tr align=center,left,rigth><td colspan=3>跨列</td><td rowspan=1>跨行</td></tr></table> DIV標(biāo)簽（層標(biāo)簽）<div></div> <span>行內(nèi)標(biāo)簽</span>作為文本容器 傳遞網(wǎng)頁(yè)數(shù)據(jù) 表單的使用<form name method action><inupt type=”text” name/&

5、gt;</form> Get與post的區(qū)別：post不會(huì)顯示用戶的密碼并且提交數(shù)據(jù)的長(zhǎng)度沒有限制 常見的表單元素：文本框<input type=”text”name=”username” /> 密碼框<input type=”password”> 單選按鈕 <input type=”radio” value=”男” name=”sex”> 復(fù)選框<input type=”checkbox” value=”籃球” checked=”checked”/> 文件域 <input type=”file” name/> 下拉列表&

6、lt;select name=” size（顯示的行數(shù)）=”3”> <option value=”湖北省”selected=”selected”>湖北省</option> </select> 多行文本域： 自我介紹<textarea name cols=列rows=”行”></textarea> 提交按鈕 <input type=”submit” value=按鈕顯示的值” name/> 重置按鈕 <input type=”reset”value=”重置” name/>框架組合網(wǎng)頁(yè)框架結(jié)構(gòu)介紹框架集使用：

7、沒有body部分 <frameset cols/rows(頁(yè)面按行割)=”25%,50%,*” bordercolor=”red”border=”5”><frame src/></frameset> 行列混合的頁(yè)面 <frameset rows=”25,*”><frame src=”top.html”/><frameset cols=”25%,*”><frame/></frameset></frameset>內(nèi)嵌框架<iframe src=”name=”frameborder=”1

8、”scrolling=”auto”width=”700px”height=”300px”></iframe> CSS樣式表的使用<ul> <li class=”red”>fdjkjifd</li> <li id=”news”>fdjkjifd</li> <li>fdjkjifd</li> <li>fdjkjifd</li> </ul><style type="text/css">Li(標(biāo)簽選擇器) color:#DF0E11;

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

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

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

12、lid red; </style></head><body><div id="box1"><img src="images/2015.03.14.jpg" height="500" width="300"></div><div id="box2">盒子2</div></body>網(wǎng)頁(yè)布局設(shè)計(jì)標(biāo)準(zhǔn)文檔流行內(nèi)元素從左到右解析文檔塊級(jí)元素從上到下解析元素Display屬性可以改變?cè)氐男再|(zhì)盒子的

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

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

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

16、n re;/*document.write("面積："+re);*/ var area=getArea(3,4); document.write(area);</script>系統(tǒng)函數(shù)<script type="text/javascript">var r=parseInt("123")+parseFloat("456");document.write(r);</script>var x="ABC"var y=123;document.write(isNaN(

17、y);輸入x返回true表示x不是數(shù)字Var r=”1+2+3+4;r=eval(r);document.write(r);eval返回運(yùn)算數(shù)的計(jì)算結(jié)果匿名函數(shù)(function (width,height)document.write("面積："+width*height);)(3,4)函數(shù)也是一種數(shù)據(jù)類型 function類型匿名函數(shù)作為函數(shù)的參數(shù)來傳遞Var area=function(width,height)Document.write(“面積：”+width*height);Area(3,4);常用事件、<script type="text/ja

18、vascript">function fun(obj)obj.style.fontSize="30px"</script><p onClick="fun(this)">事件綁定</p>This表示事件源p；window.onload=function()alert("歡迎來到美淘網(wǎng)");<body onUnload="alert('觸發(fā)onload事件')"><marquee direction="right"

19、 onMouseOver="stop()" onMouseOut="start()"><img src="images/psb (1).jpg" width="300" height="300" alt="1"/></marquee>瀏覽器默認(rèn)處理程序<script type="text/javascript">function Check()event.returnValue=false;</script&

20、gt;<body><form action="index.html" onSubmit="return false;"><input type="submit" value="確定"/></form>function Check() var username=document.getElementById("name").value; if(username="")alert("請(qǐng)輸入用戶名");return false;return true;</script><body><form action="index.html" onSubmit="return Check();"><

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論