客戶端網頁編程_初稿
1.html網頁
1.什麽是 HTML？
Hyper Text Markup Language
HTML是用來描述網頁的一種語言,指的是超文本標記語言,它不是一種編程語言，而是一種標記語言。
標記語言是一套標記標簽 (不區分大小寫),HTML使用標記標簽來描述網頁
<開始標簽 屬性="屬性值"> 標簽體 <結束標簽/>
HTML標簽中不區分大小寫,可以嵌套使用。
編碼集-->utf-8:中英文; gbk: gb2312: iso-8859-1:英文
<head> <a name="top"></a> <title>第一網頁,我的百度</title> <meta name="keywords" content="java編程,iPhone手機"> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta http-equiv="refresh" content="5;url=http:\\www.baidu.com"> <link rel="shortcut icon" href="image/logo.ico"> </head> <body> <a name="top"></a> <h1>網頁標題h1</h1> <h2>網頁標題h2</h2> <h3>網頁標題h3</h3> <h4>網頁標題h4</h4> <h5>網頁標題h5</h5> <h6>網頁標題h6</h6> <p>這是段落標簽P<p/> <pre> 這是格式化段落標簽 for(int i = 0;i<10;i++){ system.out,println(i); } </pre> <a href="#yinyue">音樂頻道</a> <img src="image/1.jpg"title="圖片1" alt="友情提示"> <ul type="circle"> <li>無序列表1</li> <li>無序列表2</li> <li>無序列表3</li> </ul> <ol type="a" start="2"> <Li>有序列表1</Li> <Li>有序列表2</Li> <Li>有序列表3</Li> </ol> <b>這是字體加粗的b標簽</b> <em>這是字體傾斜的em標簽</em> <a href="second.html#yundong" target="_blank">跳轉test頁面</a> <span>這是span範圍標簽,是行級標簽</span> <a href="#top">返回頂部</a> </body>
在P標簽中不能嵌套塊級元素
(2)表格與表單元素
表格由< table> 標簽來定義。每個表格由行< tr> ,和列< td> 組成。字母td指表格數據(table data),數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等。
表單是一個包含表單元素的區域,該區域允許用戶輸入各種信息的元素(文本域、下拉列表、單選框、復選框等)。
表單使用表單標簽< form>進行定義,多數情況下被用到的表單標簽是輸入標簽< input>。輸入類型是由類型屬性（type）定義的。主要類型有:
文本域-->Text Fields, 密碼框-->password, 單選按鈕-->Radio Buttons, 復選框-->Checkboxes,
1.提交按鈕
get方法會在URL地址中顯示表單的內容,post則不會,所以post提交更安全
<form action="../day01/first.html" method="get"> <table align="center" text-aligin="center"> <tr> <td>用戶名:</td> <td> <input name="user" type="text" maxlength="10" /> </td> </tr> <tr> <td>密 碼:</td> <td> <input name="pwd" type="password" maxlength="16"/> </td> </tr> <tr> <td>性 別:</td> <td> <input type="radio" name="gen" checked="checked" value="boy"/>男 <input type="radio" name="gen" value="girl"/>女 </td> </tr> <tr> <td>婚 否:</td> <td> <input type="radio" name="hunyin" value="yihun"/>已婚 <input type="radio" name="hunyin" value="weihun"/>未婚 <input type="radio" name="hunyin" value="liyi"/>離異 </td> </tr> <tr> <td>愛 好:</td> <td> <input type="checkbox" name="like" value="sleep"/>睡覺 <input type="checkbox" name="like" value="game"/>遊戲 <input type="checkbox" name="like" value="music"/>音樂 </td> </tr> <tr> <td>上傳頭像</td> <td><input type="file"></td> </tr> <tr> <td>地址</td> <td> <select name="addres"> <option value="sc">四川</option> <option value="yn">雲南</option> <option value="gz">貴州</option> </select> <select name="addres"> <option value="cd">成都</option> <option value="my">綿陽</option> <option value="nc">南充</option> </select> </td> </tr> <tr> <td>自我介紹</td> <td><textarea rows="10" cols="30"></textarea></td> </tr> <tr> <td> </td> <td> <input type="image" src="image/login.jpg" > <input type="reset" value="重置"> </td> </tr> </table> </form>
2.CSS布局
(1)CSS 概述
CSS指層疊樣式表(Cascading Style Sheets),其中存儲的樣式定義了如何顯示HTML元素。
把樣式添加到HTML中,是為了解決內容與表現分離的問題,多個樣式定義可層疊為一。
1.行內樣式
在網頁中個標簽內部,以style屬性的形式編寫的樣式,就稱為元素的行內樣式。
style="屬性1：屬性值;屬性2;屬性值" 僅對所屬的標簽及其子標簽生效
2.內部樣式表
在網頁的head部位以style標簽聲明,該標簽體中的所有樣式就組成了網頁的內部樣式表。
3.選擇器
選擇器的作用是選擇所要操作的元素
不同樣式表中的樣式作用在同一元素上時,若是多個不同樣式則同時生效(樣式的層疊),若是樣式相同則選擇優先級最高的生效。
css樣式的優先級: !important > 行內樣式 > id選擇器樣式 > 偽類樣式 > 類選擇器樣式 > 標簽選擇器樣式 > *
a.標簽選擇器
P標簽樣式事例:
<style type="text/css">
/* 這是css的內部樣式表標簽選擇器*/
p{
color: blue;
font-size: 28px;
}
p{
border: solid;
width: 100px;
}
</style>
b.類選擇器
<style type="text/css">
/* 這是css的內部樣式表類選擇器*/
.orange{
color: orange;
}
.font{
font-size: 30px;
}
</style>
c.id選擇器
<style type="text/css">
/* 這是css的內部樣式表id選擇器*/
#user{
color: orange;
}
#pwd{
font-size: 30px;
}
</style>
在整個html頁面中,id必須唯一
d.派生選擇器、後代選擇器、相鄰兄弟選擇器、屬性選擇器
派生選擇器:通過依據元素在其位置的上下文關系來定義樣式 後代選擇器可以選擇作為某元素後代的元素
e.顏色的取值:
1.英文單詞;2.十六進制值;3.rgb值。
4.外部樣式表
在網頁的外部編寫一個css文件,然後通過< link>標簽引入該外部文件。
< link rel="stylesheet" href="myStyle.css">
css文件中通過選擇器來選中網頁中的元素。當樣式需要應用於很多頁面時,外部樣式表可以極大的提高工作效率。
(2)CSS樣式
1.背景樣式
背景樣式用於設置選中區域的背景,常見的背景樣式主要有:
background-color 用於為元素設置背景顏色;
background-image 用於設置背景圖片:其中的 url 屬性用來設置背景圖像的路徑;
background-repeat 用於在頁面上對背景圖像進行平鋪:
repeat-x和repeat-y分別表示圖像只在水平或垂直方向上重復,no-repeat則不允許圖像在任何方向上平鋪;
background-position 可以改變圖像在背景中的位置:top、bottom、left、right和center分別表示向上對齊、向下對齊、靠左、靠右和居中,
圖像 0% 0% 表示左上角的位置,圖像100% 100%則表示位於右下角。默認值是默認值是 0% 0%或者是 top left;
background-attachment 用於設置背景圖像是否隨著頻幕而滾動,fixed表示固定不滾動,默認值是scroll 背景會隨文檔滾動。
2.文本樣式
inherit:隨父級
position: static--默認的,top為正則右移,left為正則下移;
relative：相對定位,相對於自己原本所在位置的左上角;
fixed:固定定位,脫離文本流,相對於瀏覽器的左上角原點進行定位偏移;
absolute:絕對定位,脫離文本流,相對於有定位的父級左上角進行定位偏移,若父級無定位則繼續向上直到body;
z-index:在定位產生空間疊加的時候,設置顯示層級,數值越大顯示層級越高; opacity:1-->不透明度,0-1之間的數值,值越大越不透明。
overflow:溢出之後的處理效果,hidden--隱藏,scrool--滾動條,
cursor: 光標效果,pointer將光標變成手掌,
visibility:hidden--->設置元素隱藏,占用文本結構;
display:none--->設置元素隱藏,不占用文本結構,
block--->將行級元素變成塊級元素,inline--->以行級元素的方式進行顯示
(3)盒模型
將網頁各部分劃分成不同區域,每個區域包含外邊距、邊框、內邊距以及內部元素的布局方式,就稱為盒模型布局。
盒模型中外邊距用margin表示,邊框用border表示,內邊距用padding表示,可以設置為長度值(如 px)或百分比值。
外邊距合並指的是,當兩個垂直外邊距相遇時,它們將形成一個外邊距,合並後的外邊距的高度等於兩個發生合並的外邊距的高度中的較大者。
3.JavaScript
(1)js的創建
創建js的3種方法:
1.在標簽的內部直接進行編寫,將js語句塊作為標簽屬性的一部分;
2.在網頁的任意位置添加script標簽,在script的標簽體內部編寫js語句;
3.在外部創建js文件,將js語句在文件中寫好,然後在網頁中引入該js文件。
<input type="button" value="彈框" onclick="test()"/>
<script type="text/javascript">
var a = 1;
alert(a)
</script>
<script type="text/javascript" src="js01.js"></script>
(2)js的數據類型
5類原始數據類型:undefined,null,boolean,Number,String
Number:數字類型,相當於Java中的byte+short+int+long+double+float; String:字符類型,相當於java中的String類+char;
boolean:布爾類型;undefined:未定義類型,表示變量聲明了但沒有賦予初始值;
null:文檔中找不到某個元素的時候,該變量就是null類型,它屬於object。
在JS中:==表示值,===比較值和數據類型,沒有equals方法。變量不加var就表示全局變量,多個方法之間可以共享該變量和它的值。
通過new關鍵字創建的變量,其數據類型都是object。
var num1 = 1;
var num2 = new Number("2");
var num3 = new Number("3a");
var num4 = new Number(false);
var str1 = new String(123);
var boo1 = new Boolean("");
/*
num1是Number類型1,num2是object類型2,num3是NaN(Not a Number),
num4是object類型0,str1是object類型123,boo1是object類型false。
*/
var nums = [1,2,3,"zhangsan",null,true,undefined];
var nums2 = new Array(99,null,undefined,"張三",false);
var nums3 = new Array(5);//定義一個長度為5的空數組
//定義一個新對象
var person ={
name:"張三",
age:20,
tel:"13523459876",
}
person.addres = "四川成都";
var obj1 = new Object({name:"李四",age:21});
//訪問對象的屬性,可以通過對象名.屬性,也可以通過[屬性]
var name1 = person.name;
數字非0為真,字符串非空為真。
var arr = ["李四",true,233,45,12,"998",90,543,567,1,879,2,-0.01,1/2,false,345,null,2311,0,-87,"張三"];
document.write("<br>"+"冒泡排序arr數組: ");
for(i=0;i<arr.length-1;i++){
for(j=0;j<arr.length-i-1;j++){
if(arr[j]>arr[j+1]){
var k = arr[j];
arr[j] = arr[j+1];
arr[j+1] = k;
}
}
}
for(var a in arr){
document.write(arr[a]+" ");
}
//程序運行的結果結果:
冒泡排序arr數組: 李四 -87 -0.01 false null 0 0.5 true 1 2 12 45 90 233 345 543 567 879 998 2311 張三
(3)js的函數和屬性
1.js函數的基本定義和使用
函數是由事件驅動的或者當它被調用時執行的可重復使用的代碼塊,在js中就是指包裹在function關鍵詞之後的花括號中的代碼。
函數可以在某事件發生時直接調用(比如當用戶點擊按鈕時),並且可由 JavaScript 在任何位置進行調用。
JavaScript 對大小寫敏感。關鍵詞 function 必須是小寫的，並且必須以與函數名稱相同的大小寫來調用函數。
js函數實例：
<script>
function shuiXianHuaCheck(num){
var hBit = (num - num % 100)/100;
var tBit = (num % 100-num % 100 %10) / 10;
var gBit = num - (num - num % 100) - (num % 100-num % 100 %10);
if (num==hBit * hBit * hBit + tBit * tBit * tBit + gBit * gBit
* gBit){
alert(num+"是水仙花數");
}else{
alert(num+"不是水仙花數");
}
}
function runNianCheck(year){
if(year%4==0){
alert(year+"年是閏年");
}else{
alert(year+"年不是閏年");
}
}
function chengFaBiao(){
document.write("九九乘法表"+"<br>");
for(var i=1;i<10;i++){
for(var j = 1;j<=i;j++){
document.write(i+"X"+j+"="+i*j+" ");
}
document.write("<br>");
}
}
</script>
2.全局函數和全局屬性:
isNaN():判斷一個變量是否數字,若傳入的是數字則為false,若傳入的不是數字則為true;
parseInt():方法可以將傳入參數轉換成十進制整數, parseFloat():將參數解析並返回一個浮點數;
eval():計算JavaScript字符串，並把它作為腳本代碼來執行;
Infinity:指正無窮大的數值; NaN:指示某個值是不是數字類型的值; undefined:指未定義初始值的變量。
客戶端網頁編程_初稿