網頁的基本結構_第1頁
網頁的基本結構_第2頁
網頁的基本結構_第3頁
網頁的基本結構_第4頁
網頁的基本結構_第5頁
已閱讀5頁，還剩3頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、 網頁的基本結構 <html> <head><title><title></head><body></body></html> 文本標簽 標題標簽 <h1></h1>.<h6></h6> 段落標簽<p align=center,left,right><font color,face,size>字體標簽</font></p> 換行標簽<br/> 水平線標簽<hr size=20pxcolo

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

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

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

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

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

7、沒有body部分 <frameset cols/rows(頁面按行割)=”25%,50%,*” bordercolor=”red”border=”5”><frame src/></frameset> 行列混合的頁面 <frameset rows=”25,*”><frame src=”top.html”/><frameset cols=”25%,*”><frame/></frameset></frameset>內嵌框架<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(標簽選擇器) color:#DF0E11;

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

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

11、gt;#box1border-width:5px;border-color:red;border-style:dashed;/*邊框的風格*/ 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;/*盒子之間的間距*/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>網頁布局設計標準文檔流行內元素從左到右解析文檔塊級元素從上到下解析元素Display屬性可以改變元素的性質盒子的

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;/*絕對定位 脫離標準文檔流*/top:30px;left:100px;#box2background-color:green;colo

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

15、</div><div id="box3">第三個層</div></div></body>盒子的浮動Float:left;Clear:both; overflow：hidden解決浮動塌陷常用流行布局的實現自適應 width：80% 當改變窗口的大小時，頁面內容始終是窗口的80%JavaScript基礎知識定義函數<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)函數<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不是數字Var r=”1+2+3+4;r=eval(r);document.write(r);eval返回運算數的計算結果匿名函數(function (width,height)document.write("面積："+width*height);)(3,4)函數也是一種數據類型 function類型匿名函數作為函數的參數來傳遞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("歡迎來到美淘網");<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>瀏覽器默認處理程序<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("請輸入用戶名");return false;return true;</script><body><form action="index.html" onSubmit="return Check();"><

溫馨提示

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

評論

0/150

提交評論