網頁HTML到8.20前

時間 2019-11-12

標籤網頁 html 8.20 欄目 HTML 简体版

原文原文鏈接

2015.6.4javascript

HTML：超文本標記語言 CSS：樣式表 JavaScript：腳本css

HTML標籤---成對兒出現的是雙標籤元素，單個兒出現的是單標籤元素html

1、通用標籤前端

1.格式控制標籤java

<font></font> 文字node

color-文字顏色 face-文字字體 size-文字大小web

<b></b>加粗數據庫

<i></i>傾斜編程

<u></u>下劃線c#

<br/>換行

 空格

<center></center> 居中

2.內容標籤(內容標籤都有style屬性)

<h1></h1>~<h6></h6> 標題(h1字號最大，h6字號最小)

<p></p> 段落

<div></div>層標籤，用於網頁佈局

<span></span> 層標籤，用於網頁佈局

<ol></ol>有序列表

<ol>

</ol>

頁面顯示爲：

1.第一項

2.第二項

3.第三項

有序列表通常默認阿拉伯數字排序，從1開始，也可用type屬性設置英文或羅馬數字標號

<ul></ul>無序列表

<ul>

</ul>

頁面顯示爲：

●第一項

●第二項

●第三項

2、常見標籤

<img/>圖片

src屬性-圖片源

alt屬性-設置圖片爲超連接時定義的圖片名

調整width、height數值，修改原尺寸過大的圖片，使之適應網頁佈局

<table></table> 表格

插入表格代碼：

<table>

<tr>

</tr>

<tr>

<tr/>

<tr>

<tr/>

</table>

body的幾個屬性：

background 背景圖片 bgcolor背景色 text 網頁文字

Dreamweaver三個界面：代碼界面、拆分界面、設計界面(能夠在設計界面直接添加表格)

表格的幾個屬性：

width 寬度 border 邊框 align 對齊方式 bgcolor 背景色 rowspan 合併行 colspan 合併列

<a></a> 超連接

href屬性-指向超連接跳轉頁面

<a href="網址或文件名"> 插入網頁或文件超連接

target屬性-超連接的打開方式

錨點：

1.設置錨點：經過設置a標籤裏的name屬性來命名錨點

2.設置跳轉超連接

<a href="#錨點名">超連接內容</a>

<form></form>form表單

<form="zhuce" method="get"/"post" action="Untitled-2.html">

method屬性-提交方式，分爲post、get兩種

action屬性-提交到哪一個頁面處理 action="../Untitled-2.html" 從上一級文件夾查找文件

1、文本輸入類

1.<input type="text" value=" " name=" "/> 單行文本輸入框

2.<input type="password" value=" " name=" "/> 密碼框

3.<textarea></textarea>文本域

4.<input type="hidden" value=" " name=" "/> 隱藏域

2、按鈕類

1.<input type="submit" value="註冊" name=" "/> 提交按鈕

2.<input type="reset" value="重置" name=" "/> 重置按鈕

3.<input type="button" value="檢查" name=" "/> 普通按鈕

4.<input type="image" src="圖片名" width="100" height="30" name=" "/> 圖片按鈕

3、選擇性輸入類

1.男<input type="radio" value=" " name="sex"/>

女<input type="radio" value=" " name="sex"/>

單選按鈕

男<input type="radio" value=" " name="sex"/ checked="checked">

女<input type="radio" value=" " name="sex"/>

「男」這個選項就成了默認選項

2.<input type="checkbox" value=" " name=" "/>

多選按鈕

3.<select></select> 下拉菜單

</select>

下拉列表，每個option是一個列表項，加上屬性multiple="mutiple"以後變爲多選的列表

即：

</select>

4.<input type="file" name=" "/> 選擇文件，上傳文件

做業：作一個百度首頁頁面

2015.6.6

CSS---層疊樣式表，做用是美化網頁

1、層疊樣式表概述

層疊樣式表的層疊含義：

①樣式表類別產生的層疊關係(考慮優先級覆蓋關係)

②選擇器產生的層疊關係(考慮優先級覆蓋關係)

③父子元素產生的層疊關係

【應用】佈局網頁、網頁模版、圖片素材

【格式】樣式名:樣式值;樣式名:樣式值

註釋某行代碼用/* */標記

分類：

1.內聯式：直接寫在標籤裏

</body>

2.內嵌式：寫在head裏面

<head>

{

font-size=36px;

}

</style>

</head>

3.外部樣式：新建一個樣式表文件，用附加樣式表引用到網頁內

【代碼界面】

<head>

</head>

【CSS界面】

@charset "utf-8"

/*CSS Document*/

body

{

font-size=36px;

}

2、選擇器

1.普通選擇器

①標籤選擇器：用標籤名來選擇元素控制樣式

div{

font-size=48px;

}

②class選擇器

.aa{

font-siae=48px;

}

③id選擇器

#aa

{

font-size=48px;

}

#bb

{

font-size=36px;

}

注：

(1)*表明網頁中全部的元素

(2)各選擇器優先級：id選擇器>class選擇器>標籤選擇器>*;內聯式>內嵌式>外部樣式

2、複合選擇器

1.用逗號隔開 #aa,#cc 並列關係

2.用空格隔開 #aa div 後代關係

3.用點隔開 div.bc 篩選關係---在div裏面篩選class爲bc的標籤

3、樣式

1.背景與前景

background-color 背景色

background-image 背景圖片

background-repeat

①repeat-x 橫向平鋪

②repeat-y 縱向平鋪

③inherit 平鋪

④no-repeat 不平鋪

⑤cover 整個覆蓋

background-size 背景大小

background-attachment 背景圖片的固定

①fixed 固定

②scroll 滾動

background-position 背景圖片的位置

①center 居中

②bottom 靠下

③right 靠右

④top 靠上

⑤left 靠左

⑥top left 左上角

⑦ top 10px left 50px 距離上邊10像素，距離左邊50像素(具體設置邊距數值)

font-family字體【例】font-family:微軟雅黑

font-size字體大小【例】font-size:24px

font-weight字體粗細 bold加粗

font-style字體風格 italic傾斜

color字體顏色

2.對齊方式

①text-align 水平對齊---center 居中 left 靠左 right 靠右

②vertical-align 垂直對齊---middle 居中 top 靠上 bottom 靠下

③line-height 行高

3.其它

text-decoration 文字裝飾效果---underline下劃線 overline上劃線 line-through中劃線

text-indent 首行縮進

display 是否顯示---block顯示 none隱藏

overflow 超出部分樣式---hidden超出隱藏 scroll超出部分出現滾動條

2015.6.7

邊界與邊框

邊框與文字之間的距離叫內邊距；邊框之外的部分叫作外邊距

border 邊框 margin 外邊距 padding 內邊距

Border-	color	width	style
left
right
top
bottom

border的20個屬性

margin的5個屬性---top bottom left right margin：上下左右像素值

padding的5個屬性---top bottom left right padding：上下左右像素值

列表與方塊

list-style---width，height，type，image，position

display---none，block(換行)，inline(寬高設置不起做用)，inline-block(可對寬高進行設置)

overflow---hidden，scroll，visable

列表(有序<ol></ol>無序<ul></ul>)

①list-style-type：none，low-alpha，nummeric，disc，circle，square

②list-style-position

③list-style-image

方塊

①width，height

②display，overflow

③span默認對width、height沒有效果，須要配合display：inline-block；div默認對width、height起做用，但若是設置display：inline，則div對width和height也不起做用

格式與佈局

1、流式佈局

float：left/right

clear：both

一旦float起來，它將脫離原來網頁的層面，後面的沒有float起來的層頂上去

1.並行排列

a.假設中間有一個float起來的層，不會影響前面的但會影響後面的(後面沒有設置float的層會頂上去)

b.在相應位置上加一個空的<div style="clear:both"></div>截斷佈局

2.嵌套排列

a.嵌套float的通常規則：

默認狀況下，裏層的會把外層的給撐開；當裏層float起來，外層沒有float，外層不會被撐開；若是裏層、外層都float起來，裏層就又能撐開外層了

b.如何設置佈局的居中？

第一步：設一個最外層的div，寬度是100%

第二步：在上個div的裏面，設一個居中的div，設置寬度960-980、margin：auto

第三步：在第二步的div中編輯網頁內容便可

2、定位佈局

經過設置樣式表的top/right/bottom/left四個樣式屬性來定位div的位置

position定位方式：fixed/absolute/ralative

fixed---絕對定位。以當前頁面可見區域爲座標，自動浮於頁面上方。

absolute---絕對定位。若是外層沒有position樣式，則以當前頁面可見區域爲座標；若是外層有position樣式，則以最近一層爲座標定位其top/right/bottom/left。

relative---相對定位。相對於本身自己應當在的那個位置進行座標定位。

2015.6.13

JavaScript：
幾個問題：
1.JavaScript是個什麼東西？——腳本語言。
JavaScript,Java,JScript
Sun/Oracle Java
網景NetScape
微軟 Win98 IE3

2.什麼是腳本語言？
不能獨立運行，必須嵌在宿主文件中才能運行的語言。
********************基本語法**********************

嵌入語法：
<script language="javascript">

</script>

1、類型與變量
數據類型：字符串、整型、浮點型、布爾型、日期時間、對象型
變量類型：只有一種變量類型---通用類型

弱類型的語言。
解釋運行的語言。

強制類型轉換：
1.其它類型轉成整數：
var a = "5";
a = parseInt(a);

2.其它類型轉成小數：
var a = "5.2";
a = parseFloat(a);

3.判斷是不是數字：
isNaN(a)---判斷是不是個合法的數字，返回bool型
true---不是個數字；false---是數字

2、運算符
（一）算術運算符 7
+ - * / % ++ --
（二）關係運算符 6
== != > < >= <=
（三）邏輯運算符 3
&& || !
（四）其它運算符
= ?: += -= *= /= %=

3、語句
（一）順序
（二）分支
1.if(表達式){}
2.if(表達式){} else {}
3.if(表達式){} else if(表達式){}....else{}
4.if(表達式){if(表達式){}}
例子：
1.判斷是不是閏年
2.相親
3.身高與體重
4.一元二次方法根的狀況

（三）循環
四要素：初始條件、循環條件、循環體、狀態改變
for(初始條件;循環條件;狀態改變)
{
循環體;
}
for(var i=0;i<10;i++)
{
alert("你好");
}
兩大類問題：窮舉和迭代
窮舉：求100之內全部與7相關的數字
迭代：求100之內全部數的和

例子：
1.畫星號
2.買東西
3.百馬百石
4.兌硬幣
5.配等式
6.偵察兵
7.猴子吃桃
8.算年齡
9.摺紙
10.棋盤分糧食

4、數組
定義：var a = new Array();
屬性：length---數組中length表明元素個數
賦值：
a[0] = 4;
a[4] = 6;
a[9] = 12;
取值：
alert(a[4]);

var a = new Array();
a[0] = 4;
a[4] = 6;
a[9] = 12;
a[5] = true;
a[7] = 3.14;
a[2] = "hello world";
alert(a[7]);

5、函數

(一)函數定義
函數名輸入參數返回類型函數體
function Add(a,b)
{
var c = a+b;
return c;
}
(二)函數調用
var c = add(3,4);

*******************DOM操做*********************
DOM---文檔對象模型 Document Object Model

window
history
location
document
    a div span img table
                                tr
                                   td
status

6、window對象
函數：
alert("字符串")---彈一個只有一個肯定按鈕的對話框出來。
confirm("字符串")---彈一個有肯定和取消兩個按鈕的對話框出來，返回bool型
prompt("字符串")---提供一個輸入的對話框。
open("打開的地址","打開的位置","打開窗口的特徵")---打開新窗口，返回被打開的這個新窗口。

案例：
var a = window.confirm("你能跑過豹子嗎？");
if(a == false)
{
alert("你禽獸不如");
}
else
{
alert("你比禽獸還禽獸");
}

2015.6.14

1、window.open() 打開一個窗口

四個參數含義：

1.要打開的網頁地址
2.打開方式
3.打開的網頁屬性設置

2、window.close() 關閉窗口

window.opener.close();關閉源窗口

3、間隔和延遲

var one = window.setInterval("openone()",1000); ---間隔1秒鐘執行openone()函數,一直執行

window.clserInterval(one); ---清除間隔執行

var aa = window.setTimeout("openone()",1000);---延遲1秒鐘執行openone()函數,執行一次

window.clearTimeout(aa); ---清除延遲執行

4、調整頁面

window.navigate() 跳轉頁面
window.moveTo(x,y) 移動頁面至座標x,y
window.resizeTo(寬,高) 調整頁面大小
window.scrollTo(x,y) 滾動頁面

5、模態對話框和非模態對話框

window.showModelDialog();打開模態對話框
window.showModelessDialog(); 打開非模態對話框

6、window.history

window.history.back();後退
window.history.forward();前進

window.history.go(n); 若是n是正數則前進n個頁面若是n是負數則後退n個頁面

7、window.location

window.location.href 獲取頁面地址
window.location.href=""; 跳轉頁面

8、window.status

window.status=""; 設置狀態欄顯示

2015.6.15

window對象：
alert()---顯示警告窗口
confirm() ---顯示確認窗口，返回bool型
open()---打開新頁面窗口---三個參數，返回被打開的窗口---url，neme(_self/_blank)，features
close()---關閉窗口
setTimeout(代碼,毫秒數)---多長時間以後執行指定的代碼
setInterval(代碼,毫秒數)---每隔多長時間執行指定的代碼
resizeTo(),moveTo(),scrollTo()....
history對象。location對象。document對象。status對象。---參考網頁模型
history對象：window.history
go(整數值)--括號內的整數值能夠是正數，也能夠是負數，正數表明前進幾個頁面，負數表明後退幾個頁面，即兼有forward和back功能
location對象：window.location
reload() ---從新加載頁面---小括號裏是函數
href---指定頁面的URL地址 URL---統一資源定位器(網址)
status對象：window.status

document對象：
1、找到指定的元素。
1.根據id找元素---找一個
2.根據name找元素---找一組
3.根據標籤名找元素---找一組
2、操做元素

（一）操做屬性
1.得到屬性值
2.添加/修改屬性
3.刪除屬性
（二）操做樣式
1.直接操做樣式屬性
a.得到樣式屬性的值
b.設置或修改樣式屬性的值

2.操做元素的class
a.得到class
b.設置class

（三）操做內容
1.表單元素
a.取值
b.賦值
2.非表單元素
a.取值
b.賦值

（四）元素總體操做
1.建立
2.添加
3.複製
4.替換
5.刪除
3、相關聯元素
同輩
子輩
父輩

-----------document操做-----------

1、找到元素

document.getElementById("a") 根據ID找，只能找出來一個
document.getElementsByName("cc") 根據NAME找，找出來的是個數組
document.getElementsByTagName("div") 根據標籤名找，找出來的是數組
document.getElementsByClassName("dd"）根據CLASS名來找，找出來的是數組

2、操做內容

1.非表單元素：

innerHTML：獲取標籤裏面的全部內容
innerText：獲取標籤裏面的文本

innerHTML="";---修改裏面的內容
innerText="";---修改裏面的文本

2.表單元素：

b.value---取value值
b.value="";---給表單元素賦值

3、操做屬性

getAttribute("p")--- 獲取屬性
setAttribute("p","abcd")---修改屬性第一個參數屬性名第二個參數屬性值
removeAttribute("p")---移除屬性

4、操做樣式

var a = document.getElementById("ys");---先找到元素

a.style.樣式名="樣式值";---修改（增長）樣式

例子：彈出菜單

2015.6.17

操做元素：
（一）定位關聯元素：
parentNode---直接父級元素
childNodes---全部的直接子級元素
nextSibling---下個兄弟元素【注意回車】
previousSibling---上個兄弟元素【注意回車】

案例：
1.操做父級元素：
var t = document.getElementById("tt");
t.parentNode.className="y"; //操做父元素

2.操做子級元素：
var t = document.getElementById("tt");
var cs = t.childNodes;
for(var i=0;i<cs.length;i++)
{
cs[i].className="y";
}
3.操做兄弟元素：
var t = document.getElementById("tt");
t.nextSibling.className="y";
（二）操做元素對象
建立
var a = document.createElement("標籤名");

添加
var d = document.getElementById("dd");
d.appendChild(a);

刪除
var t = document.getElementById("tt");
var d = document.getElementById("dd");
t.removeChild(d);

複製
var d = document.getElementById("dd");
var s = d.cloneNode();

替換
var t = document.getElementById("tt")
var d = document.getElementById("dd");
var n = document.createElement("div");
t.replaceChild(n,d);

做業：
1.上面的示例代碼。
2.點擊div換頁面的背景色。
3.向無序列表中添加項。

<head>

background-color=yellow;

}
</style>
</head>

<body>
<table width="100%" border="1" cellspacing="1" cellpadding="5">
<tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
<tr>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
</tr>
<tr id="tt">
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
<tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
<tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
</table>
</body>
</html>
<script language="javascript">
var t=document.getElementById("tt");
t.className="y";
</script>

↑表格第三行的全部單元格被黃色填充

<head>

background-color=yellow;

}
</style>
</head>

<body>
<table width="100%" border="1" cellspacing="1" cellpadding="5">
<tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
<tr>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
</tr>
<tr id="tt">
     <td>a</td>
     <td> </td>s
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
<tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
<tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
</table>
</body>
</html>
<script language="javascript">
var t=document.getElementById("tt");
t.parentNode.className="y";
</script>

↑表格上方左上標註s，表格第一列第三行單元格標註a，表格中全部單元格被黃色填充

<head>

background-color=yellow;

}
</style>
</head>

<body>
<table width="100%" border="1" cellspacing="1" cellpadding="5">
<tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
<tr>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
</tr>
<tr id="tt">
     <td>a</td>
     <td> </td>s
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
<tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
<tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
</table>
</body>
</html>
<script language="javascript">
var t=document.getElementById("tt");
var cs=t.childNodes;

for(var i=0;i<cs.length;i++)

{

cs[i].className="y";

}

</script>
↑表格第三行的全部單元格被黃色填充【等效於第一次操做】

<head>

background-color=yellow;

}
</style>
</head>

<tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
<tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
</table>
</body>
</html>
<script language="javascript">
var t=document.getElementById("tt");

t.nextSibling.nextSibling.className="y";
</script>

或

<head>

background-color=yellow;

}
</style>
</head>

<body>
<table width="100%" border="1" cellspacing="1" cellpadding="5">
<tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
<tr>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
</tr>
<tr id="tt">
     <td>a</td>
     <td> </td>s
     <td> </td>
     <td> </td>
     <td> </td>
</tr><tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr><tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
</table>
</body>
</html>
<script language="javascript">
var t=document.getElementById("tt");

t.nextSibling.className="y";
</script>

↑表格第四行的全部單元格被黃色填充

<head>

background-color=yellow;

}
</style>
</head>

<body>

</form>
</body>
</html>
<script language="javascript">

var d=document.getElementById("dd");

d.innerHTML="<input type=button value='代碼加上來的按鈕'/>";
</script>

↑建立元素(表格中第三行第三列的單元格中建立一個按鈕)，單元格底色爲白色

<head>

background-color=yellow;

}
</style>
</head>

<body>

</form>
</body>
</html>
<script language="javascript">

var d=document.getElementById("dd");

var btn=document.createElement("input");

btn.Attribute("type","button");

btn.Attribute("value","元素按鈕");

d.appendChild(btn);
</script>

↑添加元素

<head>

background-color=yellow;

}
</style>
</head>

<body>

</form>
</body>
</html>
<script language="javascript">

var d=document.getElementById("dd");

var btn=document.createElement("input");

btn.Attribute("type","button");

btn.Attribute("value","元素按鈕");

d.appendChild(btn);

alert("OK");

d.removeChild();

</script>

或

<head>

background-color=yellow;

}
</style>
</head>

<body>

</form>
</body>
</html>
<script language="javascript">

var t=document.getElementById("tt");

var d=document.getElementById("dd");

t.removeChild(d);

</script>

↑刪除元素

<head>

background-color=yellow;

}
</style>
</head>

<body>

</form>
</body>
</html>
<script language="javascript">

var t=document.getElementById("tt");

var d=document.getElementById("dd");

var s=d.cloneNode();

t.appendChild(s);

</script>

↑複製元素(表格右邊新建一個單元格，與第三排對齊)

<head>

background-color=yellow;

}
</style>
</head>

<body>

</form>
</body>
</html>
<script language="javascript">

var t=document.getElementById("tt");

var d=document.getElementById("dd");

var n=document.createElement("div");

t.replaceChild(n,d);

</script>

↑替換元素

<body>

</body>

↑打開的頁面中，在「點我」兩個字上單擊，彈出提醒對話框「葵花點穴手」

<head>

.oo

{

border:1px solid red;

background-color:#fcfcfc;

padding:5px;

}

</style>

function aaa()

{

var d=document.getElementById();

d.className="oo";

}

</script>

</head>

<body>

</body>

↑打開的頁面中「點我」兩個字外圍加上一個紅色邊框，寬1像素，距離上邊、左邊邊距5像素

<head>

.oo

{

border:1px solid red;

background-color:#fcfcfc;

padding:5px;

}

</style>

var c=new Array();

c[0]="red";

c[1]="green";

c[2]="blue";

c[3]="purple";

c[4]="yellow";

var nowcolor=0;

function aaa()

{

document.body.style.backgroundColor=c[nowcolor];

nowcolor++;

if(nowcolor>4)

{

nowcolor=0;

}

</script>

</head>

<body>

</body>

或

<head>

.oo

{

border:1px solid red;

background-color:#fcfcfc;

padding:5px;

}

</style>

var c=new Array();

c[0]="red";

c[1]="green";

c[2]="blue";

c[3]="purple";

c[4]="yellow";

var nowcolor=0;

function aaa()

{

document.getElementsByTagName("body")[0].style.backgroundColor=c[nowcolor];

nowcolor++;

if(nowcolor>4)

{

nowcolor=0;

}

</script>

</head>

<body>

</body>

↑打開的頁面中有「點我」兩個字，起始色爲白色，每單擊一次鼠標頁面變一次顏色，依次爲紅、綠、藍、紫、黃，且不會再返回白色

<head>

function addli(){

var u=document.getElementById("uu");//找元序列表

var v=document.getElementById("txt");//找文本框

var s="<li>"+v.value+"</li>";//把文本框的值和<li>拼成一個字符串

u.innerHTML= u.innerHTML+s;//把字符串加到ul裏面去

}

</script>

</head>

<body>

</ul>

</form>

</body>

或

<head>

function addli(){

var u=document.getElementById("uu");

var v=document.getElementById("txt");

var n=document.createElement("li");

n.innerHTML=v.value;

u.appendChild(n);

}

</script>

</head>

<body>

</ul>

</form>

</body>

↑在無序列表中添加項(水果單)

2015.6.18

網頁總結課+兩個案例

1.QQ菜單欄回收與展開

<head>

<body>
<div style="width:200px;">
<div class="h" onclick="showdiv('hy')">個人好友</div>
<div class="c" id="hy"></div>
<div class="h" onclick="showdiv('hmd')">黑名單</div>
<div class="c" id="hmd"></div>
<div class="h" onclick="showdiv('msr')">陌生人</div>
<div class="c" id="msr"></div>
</body>
</html>
若把onclick換成ondblclick，則原先單擊執行展開菜單不起做用，必須雙擊才能執行展開菜單，若換成onmouseover，則意爲鼠標移至指定位置即展開菜單

2.信息填寫提交頁面

<head>

2015.6.22-6.29

做業：網站網頁製做(分組)

2015.6.25

PS(PhotoShop)工具欄各類工具講解&效果展現

2015.6.29
namespace ConsoleApplication1
{
class Student
{

    private string name;
    public string Name//右鍵「重構→封裝字段」自動生成
   {
      get{return name;}
      set{name=value;}

   }
    private int code;
    public int Code
   {
      get{return code;}
      set{code=value;}
   }
   private string banji;
   public string Banji
{
     get{return banji;}
     set{banji=value;}
}
   private double c;
   public double C
{
     get{return c;}
     set{c=value;}
}
}
   class Program
{
     static void Main(string[]args)
    {
       List<Student>li=new List<Student>();
       Student s1=new Student("張三",1,"0426",80);
       li.Add(s1);
       Student s2=new Student("李四",2,"0426",90);
       li.Add(s2);
       Student s3=new Student("王二丫",3,"0426",70);
       li.Add(s3);
       Console.WriteLine("姓名\t學號\t班級\tC#成績");
       double sum=0;
       foreach(Student s in li)
      {
         Console.WriteLine(s.Name+"\t"+s.Code+"\t"+s.Banji+"\t"+s.C);
         sum=sum+s.C;
      }
         Console.WriteLine("總分爲:"+sum);
         foreach(Student s in li)
        {
           if(s.C==80)
          {
             li.Remove(s);
          }

}
}
}
}

2015.6.22-6.30

面向對象---與類(class)結合理解---對象是一種實例化的東西

類是由衆多對象抽象出來的東西，類裏面包含了全部對象共同擁有的東西，對象是由類實例化出來的

面向對象的三大特徵：

1.封裝

【含義】

①每個類裏面的成員屬於各自的類

②每個對象裏面的成員是屬於該對象的

③類裏面的變量要經過屬性或者是方法來進行賦值取值---安全性

【訪問修飾符】

①public---共有的，在類外能夠訪問

②protected---受保護的，只能在該類或者其子類中訪問

③private---只能在該類中訪問

【關鍵字】this關鍵字，is關鍵字，partical關鍵字

【例子】一包粉筆；明星組合

2.繼承

【語法】public 子類名:父類名

【特色】

①單繼承

②object類

③子類可繼承父類的成員變量、成員方法

【base關鍵字】

base.成員變量(屬性)

base()---調用父類構造

base.xxx()---調用父類成員方法

【繼承關係實例化】

①實例化子類的流程先執行父類構造再執行子類構造

②構造函數傳參

【sealed關鍵字】

修飾類：沒法被繼承

修飾方法：沒法被重寫

3.多態

【概念】父類引用指向不一樣子類實例的時候，父類引用所調用的函數都是子類的函數，因爲子類對象不一樣，父類引用調用的成員表現出來的不一樣狀態就是一種多態

【實現方式】多態須要經過繼承來實現

【分類】

編譯多態(重載overload)---也叫靜態多態，經過重載實現

運行多態(重寫override)---也叫動態多態，經過重寫實現

【函數重載】

①實現條件

(1)子類對父類方法的重寫(override)

(2)父類指向子類實例

②例子

Ren父類引用隨機指向中國人美國人子類實例實現吃飯方法

【virtual關鍵字】是一種虛方法，容許重寫

【原則】

里氏代換原則:若是某個方法接受的是父類引用，能夠向裏面傳父類或子類的元素，子類對象能夠替代父類對象---例子:怪獸吃人

抽象依賴原則:用父類的引用來指向子類的實例---例子:運行多態的例子

抽象方法

【概念】在面向對象編程語言中，抽象方法指一些只有方法聲明而沒有具體方法體的方法。抽象方法通常存在於抽象類或接口中。在一些父類中，某些行爲不是很是明確，所以沒法用代碼實現，可是類還必須具有此方法，所以，把這樣的方法定義爲抽象方法。

【聲明方法】

public abstract Eat();---方法聲明只是以一個分號結束，而且在簽名後沒有大括號，沒有函數體，具體的實現由各個子類中重寫函數實現

【特色】

①抽象方法是隱式的virtual方法。

②只容許在抽象類中使用抽象方法聲明。

③由於抽象方法只聲明不提供實現，因此沒有方法體。抽象方法只在派生類中真正實現，這代表抽象方法只存放函數原型(方法的返回類型、使用的名稱及參數)，而不涉及主體代碼

④加abstract關鍵詞。

⑤抽象方法的目的在於派生類必須實現與這一方法關聯的行爲。

抽象類

【概念】沒法被實例化的類，關鍵詞是abstract，凡是帶有abstract關鍵詞的類都沒法被new出來。抽象類是不完整的，它只能用做基類。在面向抽象方法中抽象類主要用來進行類型隱藏和充當全局變量的角色。

【聲明】抽象類聲明 public abstract class Ren();

【注意】

①凡是帶有抽象方法的類確定是抽象類，抽象類卻不必定包含抽象方法。

②構造方法:靜態成員方法不能爲抽象方法。

③一個非抽象類必須實現從父類繼承來的全部抽象方法，若是有一個抽象方法沒有實現則此類必需要加abstract關鍵字；若是父類被聲明爲抽象類，並存在未實現的抽象方法，那麼子類就必須實現父類中全部的abstract成員。

【特徵】

①抽象類不能實例化。

②一個抽象類能夠同時包含抽象方法和非抽象方法。

③不能用sealed修飾符修飾抽象類，由於這兩個修飾符(修飾類、修飾方法)含義是相反的，採用sealed修飾符的類沒法繼承，而abstract修飾符要求對類進行繼承。

④從抽象類派生的非抽象類必須包括繼承的全部抽象方法和抽象訪問器的實際實現。

【例子】抽象類Ren派生中國人美國人實現抽象方法Eat()

接口

【關鍵字】interface

【概念】極度抽象的類，無成員變量，無實例屬性和實例方法，只有抽象方法或抽象屬性。---生活中的例子:標準，規則

【寫法】接口不用class，用interface，名字通常以work爲首字母，不用寫abstract，裏面全部函數都是abstract，不用寫public，由於函數必須是public

interface IUSB//接口

{

void start();

void stop();

}

【特色】

①接口中的方法都是抽象的，所以無需加abstract修飾符。

②接口中的方法都是公用的，所以無需加public修飾符。

③接口就是一個規則標準。

④接口能夠繼承父接口。

⑤一個類能夠繼承多個接口，一個類只能有一個父類，但能夠實現多個接口。

【例子】USB接口，鏈接攝像頭或者U盤啓動關閉

2015.7.1

數據訪問---ADO.NET

如何用c#代碼來操縱數據庫？

1.讓程序鏈接到數據庫上

2.打開鏈接

3.操做數據庫

4.關閉鏈接

1、數據訪問須要用到的兩個空間

using System.Data

using System.Data.SqlClient

2、鏈接類---創建與數據庫的鏈接SqlConnection

鏈接字符串：連哪臺機器？連機器上的哪一個數據庫？用戶名是什麼？密碼是什麼？

string connectionString="server=.;database=mydb;uid=sa;pwd=123";

ctrl+F5---運行/啓動快捷鍵

(一)構造

SqlConnection conn=new SqlConnection();

(二)屬性

ConnectionString：string用來設置或獲取鏈接字符串

(三)方法

Open():void 打開數據庫鏈接

Closed():void 關閉數據庫鏈接

(四)案例

SqlConnection conn=new SqlConnection();//實例化

conn.ConnectionString="server=.;database=mydb;uid=sa;pwd=123";//初始化

以上兩步可合併爲一步：Sqlconnection conn=new SqlConnection("server=.;database=mydb;uid=sa;pwd=123");

Console.WriteLine(conn.State);---關閉狀態

conn.Open();

Console.WriteLine(conn.State);---打開狀態

conn.Close();

Console.WriteLine(conn.State);---關閉狀態

3、命令類---執行SQL語句，操做數據庫SqlCommand

(一)構造

SqlCommand cmd=new SqlCommand();

SqlCommand cmd=conn.CreateCommand();

(二)屬性

Connection:SqlConnection---經過哪一個鏈接對象進入數據庫

Conmand Text:string---要執行的SQL狀態(SQL語句，存儲過程)

(三)方法

ExecuteNonQuery():void---執行SQL文本，通常用來執行增、刪、改的語句

(四)案例

其餘班級做品展現：

①郵件羣發器

②自動生成論文+qq登陸頁面、註冊頁面、聊天頁面+郵件發送頁面

③批量修改文件名

④抓取手機號---查詢歸屬地

⑤抓取圖片

2015.7.2

SqlCommand

(一)構造

SqlCommand cmd=new SqlCommand();

SqlCommand =conn.CreateCommand();

(二)屬性

Connection：SqlCommand---經過哪一個鏈接訪問數據庫

ConmmandText:string---要執行的SQL語句

(三)方法

ExecuteNonQuery():void---執行CommandText，通常用來執行增、刪、改

ExecuteReader():SqlReader---執行CommandText，通常用來執行查詢

(四)舉例

SqlDataReader

(一)構造

不能new出來，它只有惟一的實例化途徑:使用SqlCommand的ExecuteReader()來生成

SqlDataReader dr=cmd.ExecuteReader();

(二)屬性

HasRows:bool---是否有數據可讀，便是否能查詢出數據

(三)方法

Read():bool---讀取一條數據進SqlDataReader中 true---讀取成功 false---讀取失敗

(四)舉例

while

{

dr[列號] object

dr["列名"] object

int age=(int)dr["nianling"]

}

【課堂案例】

①

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;
using System.Data.SqlClient;

namespace ConsoleApplication
{
    class Program
    {
        static void Main(string[] args)
        {
            SqlConnection conn = new SqlConnection("server=.;database=mydb;uid=sa;pwd=123;");
            conn.Open();
            SqlCommand cmd = conn.CreateCommand();
            cmd.CommandText = "select * from Info";
            SqlDataReader dr = cmd.ExecuteReader();
            while (dr.Read()
            {
                Console.WriteLine(dr[0].ToString() + dr[1].ToString() + dr[2].ToString());

---從0開始，有幾行數據就一直加到幾dr[0].ToString+dr[1].ToString+dr[2].ToString+...+dr[n].ToString
conn.Close();

}
}
}

↑查詢info表中全部數據

做業：

1.把info表全部數據查詢顯示出來

2.作個登陸

3.car表模糊查詢，顯示查詢結果

2015.7.4

課堂案例

①

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;
using System.Data.SqlClient;

namespace ConsoleApplication
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.Write("用戶名:");
            string uid = Console.ReadLine();
            Console.Write("密碼:");
            string pwd = Console.ReadLine();
            SqlConnection conn = new SqlConnection("server=.;database=mydb;uid=sa;pwd=123");
            conn.Open();
            SqlCommand cmd = conn.CreateCommand();
            cmd CommandText="select * from login where username='"+uid+"'and password='"+pwd+"';
            SqlDataReader dr=cmd.ExecuteReader();
            if(dr.HasRows)
            {
                Console.WriteLine("OK");
            }
            else
            {
                Console.WriteLine("Error");
            }

}
}
}

↑登陸界面輸入用戶名、密碼(輸入有誤也能登錄成功)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;
using System.Data.SqlClient;

namespace ConsoleApplication
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.Write("用戶名:");
            string uid = Console.ReadLine();
            Console.Write("密碼:");
            string pwd = Console.ReadLine();
            uid=uid.Replace("'\","\"");
            SqlConnection conn = new SqlConnection("server=.;database=mydb;uid=sa;pwd=123");
            conn.Open();
            SqlCommand cmd = conn.CreateCommand();
            cmd CommandText="select * from login where username='"+uid+"'and password='"+pwd+"';
            SqlDataReader dr=cmd.ExecuteReader();
            if(dr.HasRows)
            {
                Console.WriteLine("OK");
            }
            else
            {
                Console.WriteLine("Error");
            }

}
}
}

或

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;
using System.Data.SqlClient;

            conn.Open();
            SqlCommand cmd = conn.CreateCommand();
            cmd CommandText="select * from login where username = @u and password = @p;

cmd.Parameters.Clear();

cmd.Parameters.AddWithValue(@u,uid);

            cmd.Parameters.AddWithValue(@p,pwd);
            SqlDataReader dr=cmd.ExecuteReader();
            if(dr.HasRows)
            {
                Console.WriteLine("OK");
            }
            else
            {
                Console.WriteLine("Error");
            }

}
}
}

↑登陸界面輸入用戶名、密碼(完善版，用戶名、密碼輸入錯誤就不能登陸)

②

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;
using System.Data.SqlClient;

namespace ClassLibrary
{
public class Class
{

        string code=Console.ReadLine();
        string name=Console.ReadLine();
        SqlConnection conn = new SqlConnection("server=.;database=mydb;uid=sa;pwd=123");
        conn.Open();
        SqlCommand cmd=conn.CreateCommand();
        cmd.CommandText="insert into nation values('"+code+"','"+name+"')";
        cmd.ExecuteNonQuery();
        conn.Close();

}
}

在SqlServer界面查詢民族表select * from nation，單擊執行後在彈出的窗體中輸入新的code和name，單擊回車再單擊執行即添加到原民族表中

或

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;
using System.Data.SqlClient;

namespace ClassLibrary
{
public class Class
{

        string code=Console.ReadLine();
        string name=Console.ReadLine();
        SqlConnection conn = new SqlConnection("server=.;database=mydb;uid=sa;pwd=123");

       【可擴爲 Sqlconnection conn=null; conn=new Sqlconnection("server=.;database=mydb;uid=sa;pwd=123");】
        conn.Open();
        SqlCommand cmd=conn.CreateCommand();

cmd.Parameters.AddWithValue(@c,code);

        cmd.Parameters.AddWithValue(@n,name);
        cmd.CommandText="insert into nation values(@c,@n)";
        cmd.ExecuteNonQuery();
        conn.Close();

}
}

在SqlServer界面查詢民族表select * from nation，單擊執行後在彈出的窗體中輸入新的code和name，單擊回車再單擊執行即添加到原民族表中

上述操做等效於:

declare @code varchar(50)

declare @name varchar(50)

set @code =''

set @name=''

insert into Nation values(@code,@name)

select * from nation

↑在原民族表中添加新數據

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;
using System.Data.SqlClient;

namespace ClassLibrary
{
public class Class
{

        string code=Console.ReadLine();
        string name=Console.ReadLine();
        SqlConnection conn = new SqlConnection("server=.;database=mydb;uid=sa;pwd=123");

conn.Open();
SqlCommand cmd=conn.CreateCommand();

cmd.Parameters.AddWithValue(@c,code);

        cmd.Parameters.AddWithValue(@n,name);
        cmd.CommandText="insert into nation values(@c,@n)";
        cmd.ExecuteNonQuery();
        conn.Close();

try

{

}

catch(Exception ex)

{

}

finally

{

}

}
}

↑抓錯代碼

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;
using System.Data.SqlClient;

namespace ClassLibrary
{
public class Class
{

        string code=Console.ReadLine();
        string name=Console.ReadLine();
        SqlConnection conn = new SqlConnection("server=.;database=mydb;uid=sa;pwd=123");

conn.Open();

try

{
SqlCommand cmd=conn.CreateCommand();

cmd.Parameters.AddWithValue(@c,code);

        cmd.Parameters.AddWithValue(@n,name);
        cmd.CommandText="insert into nation values(@c,@n)";
        cmd.ExecuteNonQuery();

}

catch

{

Console.WriteLine("出錯了");

}

finally

{
conn.Close();

}

}
}

↑等效於上述抓錯系統(友好報錯界面)

2015.7.18

註冊表操做

(一)命名空間

using Microsoft.Win32;

(二)類

Registry,RegistryKey

RegistryKey node=Registry.CurrentUser;

(三)項的操做

1.打開：node.OpenSubKey("路徑/名","true/false")---返回RegistryKey

2.新建：node.CreateSubKey("路徑/名");---返回RegistryKey

3.刪除：node.DeleteSubKey("路徑/名");/DeleteSubKeyTree("路徑/名");---返回void

4.檢索：node.GetSubKeyNames();---返回數組

(四)值的操做

1.讀取：node.GetValue("名");

2.設置：node.SetValue("名","值");

3.刪除：node.DeleteValue("名");

4.檢索：node.GetValueNames("名")---返回數組

2015.7.19

人員信息表修改操做

1.作修改界面

①作用來接收主鍵值的構造函數

a.定義一個成員變量_Code

b.定義構造函數

②添加民族下拉列表

a.查出民族表的數據來

b.綁定到民族下拉列表中

③加載人員的原始信息

a.根據_Code查出人員信息

b.送到界面控件中顯示

④編寫更新代碼

a.更新到數據庫

b.返回DialogResult=OK;

2.作修改按鈕

①判斷是否選中

②顯示修改界面

a.傳主鍵值:form Edit = new form Edit(主鍵值);

b.顯示界面:DialogResult dr = ShowDialog();

2015.7.22

佈局

1、默認佈局

Location---座標位置

Anchor---固定方位

2、邊界佈局

Dock---上、下、左、右、中

3、流式佈局

控件:FlowLayoutPanel

屬性:FlowDirection

4、網格佈局

控件:TableLayoutPanel(Padding)---ColumnSpan跨行設置 RowSpan跨列設置

5、卡片佈局

控件:TabControl(TabPage)

屬性:TabPage[Add(),Remove(),RemoveAt(),Clear(),Count]

SelectedTab

SelectedIndex

(用代碼)添加卡片、刪除卡片、激活卡片

6、分隔佈局

控件:SplitContainer---放在SplitContainer中的控件都要Dock成Fill

2015.7.23

文件與文件夾操做

1、文件夾操做

Directory類,DirectoryInfo類

//建立文件夾
法一：DirectoryInfo di = Directory.CreateDirectory(@"D:\HQ");

法二：DirectoryInfo di = new DirectoryInfo(@"D:\HQ");
di.Create();

//刪除文件夾
法一：Directory.Delete();
法二：DirectoryInfo di = new DirectoryInfo(@"D:\HQ");
         di.Delete();
//判斷文件夾是否存在
法一：bool isExists = Directory.Exists(@"D:\HQ");
法二：DirectoryInfo di = new DirectoryInfo(@"D:\HQ");
         bool isExisted=di.Exists;
//獲取子文件夾
法一：string[]subDir=Directory.GetDirectories(@"D:\HQ");
         listBox1.Items.Clear();
         foreach(string name in subDir)
         {
                  listBox1.Items.Add(name);
         }
法二：DirectoryInfo di=new DirectoryInfo(@"D:\HQ");
         DirectoryInfo dirs=di.GetDirectories();
          listBox1.Items.Clear();
          foreach(DirectoryInfo dir in dirs)
          {
                  listBox1.Items.Add(dir.FullName);
          }

//獲取子文件
法一：string[]files=Directory.GetFiles(@"D:\HQ");
         listBox1.Items.Clear();
         foreach(string name in files)
         {
                  listBox1.Items.Add(name);
         }
法二：DirectoryInfo di=new DirectoryInfo(@"D:\HQ");
         FileInfo files=di.GetFiles();
          listBox1.Items.Clear();
          foreach(FileInfo f in files)
          {
                  listBox1.Items.Add(f.FullName);
          }

//獲取文件夾的相關屬性
法一：string path = @"D:\HQ";
         DateTime createTime=Directory.GetCreationTime(path);
         DateTime accessTime=Directory.GetLastAccessTime(path);
         DateTime whitetime=Directory.GetLastWriteTime(path);
         label1.Text=CreateTime.ToString()+"\n"+LastAccessTime.ToString()+"\n"+LastWriteTime.ToString();

法二：DirectoryInfo di=new DirectoryInfo(@"D:\HQ");
label1.Text=di.CreationTime.ToString()+"\n"+di.LastAccessTime.ToString()+"\n"+di.LastWriteTime();

//修改文件夾的相關屬性
法一：string path = @"D:\HQ";
         Directory.SetCreationTime(path,new DateTime);
         Directory.SetLastAccessTime(path,new DateTime);
         Directory.SetLastWriteTime(path,new DateTime);

法二：DirectoryInfo di= new DirectoryInfo(@"D:\HQ");
label1.Text = di.SetCreationTime.ToString()+"\n"+di.SetLastAccessTime.ToString()+"\n"+di.SetLastWriteTime.ToString();

//移動文件夾
法一：Directory.Move("源路徑","目標路徑");
法二：DirectoryInfo di=new DirectoryInfo("源路徑");
di.MoveTo("目標路徑");

2、文件操做

File類,FileInfo類

建立,刪除,複製,移動,更名,得到擴展名,得到文件名,得到全路徑,是否存在,打開,關閉,修改輔助屬性,得到輔助屬性

建立：file.Create();/file.CreateText();

刪除：file.Delete();

複製：file.Copy();

移動：file.Move();

更名：file.MoveTo();

file.CopyTo();

得到擴展名：this.Text=file.Extension;

得到文件名：this.Text=file.Name;

得到全路徑(得到文件全名)：this.Text=file.FullName;

是否存在：bool isExisted=file.Exists();

this.Text=isExisted;

打開：file.Open();---OpenOrCreate

關閉：stream.Close;

修改輔助屬性：file.GetAttributes();

得到輔助屬性：file.SetAttributes();

3、文件讀寫

FileStream類,StreamWriter類,StreamReader類

2015.7.25

Color color = Color.Red;
Pen p = new Pen(color, 5);
e.Graphics.DrawEllipse(p, 100, 100, 200, 200);//輪廓是紅色的圓形
Color color = Color.FromArgb(255, 255, 0);//輪廓色變爲黃色
p.Color = Color.FromArgb(255, 0, 0);
e.Graphics.DrawEllipse(p, 100, 100, 400, 200);//輪廓色是黃色的橢圓形
e.Graphics.DrawRectangle(p, 100, 100, 400, 200);//輪廓色是黃色的橢圓形外面套一層輪廓色是紅色的矩形
p.Color = Color.Blue;
e.Graphics.DrawLine(p, 100, 100, 500, 300);//給上述矩形畫出對角線
e.Graphics.DrawPie(p, 100, 100, 200, 200, 0, 90);//1/4圓的扇形
e.Graphics.DrawArc(p, 100, 100, 200, 200, 0, 90);//與上述扇形角度相同的弧
Point[] ps = new Point[5];
ps[0] = new System.Drawing.Point(100, 100);
ps[1] = new System.Drawing.Point(120, 120);
ps[2] = new System.Drawing.Point(140, 110);
ps[3] = new System.Drawing.Point(160, 130);
ps[4] = new System.Drawing.Point(180, 125);
e.Graphics.DrawLines(p, ps);//順時針座標構建折線

SolidBrush brush = new System.Drawing.SolidBrush(Color.Red);
e.Graphics.FillEllipse(brush, 100, 100, 200, 200);//紅色實心圓
e.Graphics.Rectangle(brush, 100, 100, 400, 200);//紅色實心矩形
e.Graphics.FillPie(brush, 100, 100, 200, 200, 0, 30);
brush.Color = Color.Orange;
e.Graphics.FillPie(brush, 100, 100, 200, 200, 30, 45);
brush.Color = Color.Blue;
e.Graphics.FillPie(brush, 100, 100, 200, 200, 75, 120);
brush.Color = Color.Green;
e.Graphics.FillPie(brush, 100, 100, 200, 200, 195, 145);
brush.Color = Color.Purple;
e.Graphics.FillPie(brush, 100, 100, 200, 200, 340, 20);//餅狀圖

SolidBrush brush = new System.Drawing.SolidBrush(Color.Blue);
Font font = new System.Drawing.Font("楷體", 18);
string s = "他是一個很棒的少年";
e.Graphics.DrawString(s, font, brush, 100, 100);//顯示單行文本,字體爲楷體,大小爲18磅,顏色爲藍色
Point Start = new System.Drawing.Point(0, 0);
Point End = new System.Drawing.Point(200, 100);
LinearGradientBrush brush = new LinearGradientBrush(start, end, Color.Blue, Color.Green);
string s = "他是一個很棒的少年";
e.Graphics.DrawString(s, font, brush, 100, 100);//漸變色效果,字體爲楷體,大小爲18磅,顏色爲藍綠漸變

Image img = Image.FromFile("文件名");---文件名是源文件複製到另外一文件夾並重命名後的文件名
e.Graphics.DrawingImage(img,100,100);//顯示圖片(畫圖)

2015.8.9-2015.8.11

【複習課】

1、新建網站

1.B/S結構

(1)瀏覽器

(2)Web服務器

①Web服務器軟件

<1>功能：a.接收請求 b.響應請求

<2>模型：相似於飯店的服務員

②軟件程序

③.NET框架

<1>功能：執行c#代碼

<2>模型：相似於飯店的廚師

(3)數據庫服務器

2.位置

(1)文件系統：IIS Express做爲Web服務器軟件

(2)HTTP系統：IIS做爲Web服務器軟件

2、Repeater

1.是什麼---重複器，把多條數據展示出來

2.編程結構

(1)後端

①DataSource屬性

②DataBind()方法

(2)前端

①結構

HeaderTemplate/FooterTemplate/ItemTemplate/AlternatingItemTemplate

②語法

<1><%# Eval("屬性名") %>

<2><%# Eval("屬性名","格式化字符串") %>

<3><%# 方法名() %>

③技巧

<1>後端方法的定義和調用

<2>擴展屬性的定義和調用

<3>分頁

★兩個最重要的變量：
PageSize---每頁顯示的記錄條數
PageNO---當前要顯示第幾頁

★兩個重要的函數：
1.獲取指定頁面記錄的函數。
2.獲取總頁數的函數。

▲最核心的："上一頁"和"下一頁"
1.使用超連接HyperLink控制。
2.使用代碼給HyperLink的NavigateURL賦值。
linkNext.NavigateUrl = "Default.aspx?pageno=" + (nowPage + 1).ToString();
linkPrev.NavigateUrl = "Default.aspx?pageno=" + (nowPage - 1).ToString();
nowPage是用Request["pageno"]獲取過來的當前頁號。

★完善1：控制"上一頁""下一頁"是否可用
1.是不是首頁。nowPage==1??
2.是不是尾頁。調用獲取總頁數的函數，看看nowPage是否與之相等

★完善2：加"首頁"和"尾頁"
1.首頁，是超連接，老是導到第一頁去。
linkFirst.NavigateUrl = "Default.aspx?pageno=1";
2.尾頁，是超連接，老是導到與總頁數相同的那相頁號上去。
linkLast.NavigateUrl = "Default.aspx?pageno=" + pageCount;

★完善3：隨機跳轉
1.文本框+按鈕
2.使用Response.Redirect("地址")跳轉
3.判斷邊界。小於第一頁，大於最後一頁。
        int goNO = Convert.ToInt32(txtPageNo.Text);
        if (goNO < 1)
        {
            Response.Redirect("Default.aspx");
        }
        else if (goNO > GetPageCount())
        {
            Response.Redirect("Default.aspx?pageno=" + GetPageCount());
        }
        else
        {
            Response.Redirect("Default.aspx?pageno="+goNO);
        }

3、ASP.NET內置對象

1.Response

Write("內容")/Redirect("地址")/End()

2.Request

Request Form("鍵")/Request QueryString("鍵")/Request["鍵"]

3.Session

(1)位置：存在服務器端

(2)做用：保存狀態

(3)特色：①每一個會話有獨立的Session②Session有自動過時時間

(4)語法：①賦值與取值---Session["鍵"],取值的時候必定要記得強制轉換

②清空Session---a.清空單個Session鍵的值：Session["鍵"]=null;

b.清空全部Session：Session.Abandon()

(5)其餘工具：Cookie,ViewState

(6)類比Cookie,Session,ViewState

Cookie---病人口頭描述，醫生給予診斷

Session---醫生有助手幫忙記錄病案

ViewState---醫生親自記錄病歷，病人複診時攜帶病歷供醫生翻閱參考

4.Application

(1)位置：服務器

(2)做用：存取全局化數據

(3)特色：①全部客戶端共享數據②無自動過時時間

5.Server

MapPath---路徑映射,把相對路徑轉成絕對路徑

4、基本控件(part1)---123記憶

(一)1個文本框---TextBox

1.擁有Label全部的屬性

2.TextMode---SingleLine,MultiLine,Password

3.ReadOnly

4.MaxLength

(二)2個標籤---Label,Literal

1.Label

①前景與背景

BackColor,ForeColor,Font(Name,Size,Bold,Italic,UnderLine)

②邊框

BorderWidth,BorderColor,BorderStyle

③其它

Text,Visible,Enable,CssClass

④佈局

Width,Height

2.Literal---Text,Visible

(三)3個按鈕---Button,LinkButton,ImageButton

1.Button

①擁有Label全部的屬性

②OnClientClick

2.LinkButton

①擁有Label全部的屬性

②OnClientClick

3.ImageButton

①擁有Label全部的屬性

②OnClientClick

③ImageUrl

(四)兩個最重要的---超連接,圖片

1.超連接HyperLink
①屬性

<1>擁有Label全部的屬性

<2>文字Text

<3>連接NavigateUrl

<4>目標Target

<5>圖片ImageUrl

②應用

文字超連接,圖片超連接

2.圖片Image

①屬性

<1>擁有Label全部的屬性

<2>ImageUrl

②類比

ImageButton,HyperLink,Image

(五)補充

1.Label控件(類)屬性
(1)佈局
Width: 既可用像素，也可用百分比類型：Unit
Height:既可用像素，也可用百分比類型：Unit---Unit.Pixel(像素數) Unit.Percentage(百分比數)

(2)背景與前景
BackColor：(Color)背景色
ForeColor：(Color)文字色
Font:
Name---字體名稱
Size---字體大小
Bold---粗細
Italic---傾斜
UnderLine---下劃線

(3)邊框
BorderColor,BorderStyle

(4)其它
Text---標籤文字
Visable---是否可見
Enabled---是否可用
CssClass---樣式表中的class

2.Literal標籤：
Text---標籤上的文字
Visible---是否可見

3.文本框TextBox
(1)擁有Label的全部屬性
(2)TextMode---文本框的類型
(3)SingleLine---單行
(4)Multiline---多行
(5)Password---密碼
(6)ReadOnly---是否只讀
(7)MaxLength---最大輸入的字符串

4.Button普通按鈕
(1)擁有Label的全部屬性
(2)OnClientClick---按鈕點擊時要執的JS腳本
5.LinkButton超連接按鈕
(1)擁有Label的全部屬性
(2)OnClientClick---按鈕點擊時要執的JS腳本
6.ImageButton圖片按鈕
(1)擁有Label的全部屬性
(2)OnClientClick---按鈕點擊時要執的JS腳本
(3)ImageUrl---圖片路徑

5、基本控件(part2)

(一)下拉列表DropDownList

1.把內容填進去

(1)可視化---Item屬性

(2)代碼

①循環逐項添加

<1>查詢出數據來

<2>填進下拉列表

a.循環查出來的數據

b.造ListItem對象

c.把ListItem對象加到下拉列表中---Items.Add();/Items.Insert();

②綁定

<1>查詢出數據來

<2>填進下拉列表

a.設置DataSource屬性

b.設置DataTextField,DataValueField屬性

c.調用DataBind()方法綁定

(3)屬性及方法

<1>Items---Clear(),Add(),Insert(),Remove(),RemoveAt()

<2>DataSource

<3>DataTextField

<4>DataValueField

<5>AppendDataboundItem

<6>DataBind()

2.把選中的值取出來

(1)前提:在Page_Load中，使用if(!IsPostBack){}把代碼包括起來

(2)使用屬性:SelectedValue,SelectedItem,SelectedIndex---適用範圍:單選狀況

(3)遍歷查找---適用範圍:多選狀況
①foreach遍歷DropDownList1.Items集合
②判斷每一項的li.Selected==true
③把li.Text或li.Value取出來

(4)屬性及方法
SelectedValue,SelectedIndex,SelectedItem,AutoPostBack

3.設定某項爲選中項
(1)使用屬性:SelectedValue,SelectedIndex---適用範圍:單選狀況
(2)遍歷---適用範圍:多選狀況
①foreach遍歷DropDownList1.Items
②判斷每一個li.Value==要選中值
③li.Selected=true

4.屬性及方法
SelectedValue,SelectedIndex,SelectedItem,AutoPostBack

(二)列表框ListBox

1.功能與DropDownList類似
(1)把內容填進去
(2)把選中的值取出來
(3)設定某項爲選中項
2.個性化屬性
SelectionMode
Single---單選模式
Multiple---多選模式

(三)單選列表RadioButtonList

1.功能與DropDownList類似
(1)把內容填進去
(2)把選中的值取出來
(3)設定某項爲選中項
2.個性化屬性
(1)RepeatDirection---佈局的方向
Vertical---豎直
Horizontal---水平
(2)RepeatLayout佈局方式
Table---表格佈局(tr,td)
Flow---流式佈局(span)

(四)複選列表CheckBoxList

1.功能與DropDownList類似
(1)把內容填進去
(2)把選中的值取出來
(3)設定某項爲選中項
2.個性化屬性
(1)RepeatDirection---佈局的方向
Vertical---豎直
Horizontal---水平
(2)RepeatLayout---佈局方式
Table---表格佈局(tr,td)
Flow---流式佈局(span)

6、四個控件---DropDownList,ListBox,RadioButtonList,CheckBoxList
(一)三大功能：
1.把數據填進去
(1)可視化
(2)代碼
①循環數據，逐項添加
<1>循環查出來的集合
<2>每次循環造一個ListItem對象
<3>把ListItem對象加到Items集合中去

②數據綁定
<1>把查出來的集合賦給DataSource屬性
<2>設置DataTextField,DataValueField
<3>調用DataBind()

(3)屬性和方法
Items
DataSource
DataTextField
DataValueField
DataBind()
AppendDataBoundItem

(4)技巧
添加「請選擇」項

2.把選中的值取出來
(1)前提：在Page_Load中加上if(!IsPostBack){}
(2)使用屬性取
SelectedValue,SelectedItem,SelectecIndex
(3)遍歷取
①遍歷列表中的每一項(Items集合)
②在循環中判斷每一項的Selected屬性(li.Selected==true)
③取出選中項的值(li.Value/li.Text)

(4)屬性及方法
SelectedValue
SelectedItem
SelectedIndex

(5)技巧
防止每次執行都會出現：老是取出第一項，列表中的數據每次會增長

3.設定某項爲選中項
(1)使用屬性設置
SelectedValue,SelectedIndex
(2)遍歷設置
①遍歷列表中的每一項(Items集合)
②判斷每一項的值是否是要設爲選中的項的值(li.Value == "")
③給每一項的Selected賦值(li.Selected=true)
(二)個性化的屬性：
1.ListBox
SelectionMode=Single/Multiple
2.RadioButtonList/CheckBoxList
RepeatDirection---佈局方向
RepeatLayout---使用Table佈局仍是Flow佈局
RepeatColumns---一行顯示幾列

(三)下拉列表聯動：
1.編寫三個方法，用來填充三個下拉列表
2.調用三個方法
(1)在Page_Load中調用
注意：①要加if(!IsPostBack){}②調用的前後次序
(2)在列表的事件中調用
注意：①調用哪幾個方法，第一級調後兩級的填充，第二級調用第三級填充
②要設置下拉列表的自動提交AutoPostBack
(四)修改界面要作三件事：
1.添加民族
2.查出這我的的信息，送到相應的控件中
3.編寫更新代碼，送回數據庫，跳轉頁面

2015.8.12

服務器控件調用JS
1、兩類JS的觸發設計
1.提交以前的JS --- 加js的事件
↓C#處理程序
2.提交以後的JS --- 用C#代碼向頁面上寫<script>...</script>

2、除了Button以外的其它控件如何觸發JS？
1.直接在服務端控件的HTML代碼中加上JS的事件---Button是個例外，它會本身把代碼裏OnClick轉爲OnClientClick實現觸發
2.在C#代碼界面中的PageLoad中，使用「控件名.Attributes.Add("鍵","值");」

※提交以前的JS：

在窗體界面拖拽進一個Button控件

aspx界面：

function test(){

alert("asdfasdf");

return false;

}

</script>

<div>

<asp:Button ID="Button1" runat="server" OnClientClick="return test()" Text="Button"/>

</div>

在窗體界面拖拽進一個Label控件

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

return false改成return true

aspx.cs界面：

Label1.Text=DateTime.Now;

運行起來點Button彈出對話框，點「肯定」Label的位置顯示當前時間

※提交以後的JS：

在上述基礎上，在窗體內拖拽進一個Literal控件

<asp:Literal ID="Literal1" runat="server"></asp:Literal>

aspx.cs界面裏:

Literal.Text="<scirpt language=javascript>alert('"+DateTime.Now.ToString()"+正確嗎?')</script>";---c#代碼先給Label賦值而後又給Literal賦值

運行起來點Button彈出對話框，點「肯定」Label的位置顯示當前時間並彈出另外一對話框詢問當前時間是否正確

※直接在服務端控件的HTML代碼中加上JS事件

在窗體界面拖拽進一個TextBox控件，Text寫上「必填」

aspx界面：

<asp:TextBox ID="TextBox1" onfocus="this.value=";" onblur="document.getElementById('Label1').innerHTML=this.value;" runat="server">必填</asp:TextBox>---Label的內容會隨着TextBox輸入內容的改變而改變

可加JS屬性的其餘控件：

Label：<asp:Label ID="Label2" onclick="alert('asdfasdf')" runat="server">必填</asp:Label>

RadioButton(RadioButton一次可同時添加兩個，使用Input(Radio)可一次添加多個RadioButton)：

<asp:RadioButton ID="RadioButton1" onclick="document.getElementById("Button2").removeAttribute('disabled')" runat="server" GroupName="aaa" Text="贊成"/>

<asp:RadioButton ID="RadioButton2" onclick="document.getElementById("Button2").setAttribute('disabled','disabed')" runat="server" Checked="True" GroupName="aaa" Text="不一樣意"/>

設置GroupName可以使兩個按鈕互斥

<asp:Button ID="Button2" runat="server" Enabled="False" Text="下一步"/>

---點「贊成」可進行下一步，點「不一樣意」則不能進行下一步

※在C#代碼界面中的PageLoad中，使用「控件名.Attributes.Add("鍵","值");」

以Label爲例：

aspx界面內：

<asp:Label ID="Label" runat="server" Text="Label"></asp:Label>

c# Page_Load代碼界面：

Label1.Attribute.Add("onclick","alert('"+DateTime.Now.ToString()+"')");---添加事件

網頁瀏覽狀態下點Label彈出對話框顯示當前時間，且刷新時同步顯示當前時間

若是原語句寫成Label1.Attribute.Add("onclick","show()");

那麼aspx界面需在head裏面寫入：

function show(){

alert('asdfasdf');

}

</script>

---也可實現網頁瀏覽狀態下點擊Label彈出對話框

Label1.Attribute.Add("style","background-color:red;font-size:18px;");---添加樣式

網頁瀏覽狀態下Label字樣被紅色覆蓋

2015.8.15

文件上傳
控件：
FileUpload控件，包括界面、方法和屬性
Button/LinkButton/ImageButton

FileUpload控件：
1.SaveAs("要上傳到服務器的絕對路徑") 方法：上傳文件。
般須要使用Server.MapPath()進行相對路徑與絕對路徑之間的轉換。

2.FileName屬性：要上傳文件的絕文件名，不帶路徑。

3.FileBytes屬性：上傳文件的內容，即二進制數據。

場景：
1、單文件上傳到服務器硬盤
最簡單的上傳：
        string path = Server.MapPath( "uploads/aaa.txt"); //須要路徑映射
        FileUpload1.SaveAs(path);
  問題：全部上傳文件都叫aaa.txt，如何保持文件原有的名字？

優化一：使用FileUpload的FileName屬性，獲取出上傳文件的客戶端的名字
        string fileName = FileUpload1.FileName; //取得文件上傳之間在客戶端的名字
        string path = Server.MapPath("uploads/" + fileName);
        FileUpload1.SaveAs(path);
  問題：若是不一樣用戶上傳同一文件名的文件，如何避免覆蓋？
優化二：不一樣用戶在同一時間傳相同的文件名。
在文件名中使用用戶名加以區分：
        string fileName = DateTime.Now.ToString("yyyyMMddhhmmss") +Session["user"].ToString() + FileUpload1.FileName; //取得文件上傳之間在客戶端的名字
        string path = Server.MapPath("uploads/" + fileName);
        FileUpload1.SaveAs(path);
  問題：上傳文件大於4M就會報錯。//默認上傳文件的最大大小是4096K
優化三：擴容。
在Web.Config中配置上傳請求的最大長度。
    <system.web>
      <httpRuntime maxRequestLength="40960"/>   //默認是4096K
    </system.web>

做業：回去查找資源：C#如何上傳大文件？

2、多文件上傳到服務器硬盤
（一）簡單實現：
思路：遍歷頁面Form中的每一個控件，判斷是不是FileUpload，若是是的話就把它強制轉化爲FileUpload類型，再按單文件上傳逐個上傳便可。
        int i = 1; //上傳文件的流水號
        foreach (Control ctrl in this.form1.Controls)  //遍歷Form中的每一個控件
        {
            if (ctrl is FileUpload) //看一下ctrl 對象是否是FileUpload類型
            {
                FileUpload file = (FileUpload)ctrl;  //強制轉化爲FileUpload類型

    //單文件上傳的代碼
                string fileName = DateTime.Now.ToString("yyyyMMddhhmmssms") +i.ToString("0000") + file.FileName;
                string path = Server.MapPath("uploads/" + fileName);
                file.SaveAs(path);

                i++;
            }
        }
  問題：沒有選擇上傳文件的也會在服務器端生成一個0k的文件。

（二）優化：把沒有選擇上傳文件的給跳過去.
        int i = 1;
        foreach (Control ctrl in this.form1.Controls)
        {
            if (ctrl is FileUpload) //看一下ctrl 對象是否是FileUpload類型
            {
                FileUpload file = (FileUpload)ctrl;

                if (file.HasFile)  //判斷每一個控件中是否選擇了上傳的文件。
                {
                    string fileName = DateTime.Now.ToString("yyyyMMddhhmmssms") + i.ToString("0000") + file.FileName;
                    string path = Server.MapPath("uploads/" + fileName);
                    file.SaveAs(path);

                    i++;
                }
            }
        }
3、上傳文件到數據庫的Image字段
第一步：把文件的二進制數據取出來。FileUpload1.FileBytes (byte[])
第二步：送到數據庫中去。 //ADO.NET或Linq to Sql

4、從數據庫中的Image字段中取出來，顯示在頁面上。
1.選作一個顯示圖片的頁面。例如：ShowPic.aspx
這個頁面根據傳來的主鍵值，查詢出圖片數據，並Response.OutputStream顯示在界面。
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request["id"] != null)
        {
            string index = Request["id"].ToString();
            //主要作是：
            //1.讀取某一條Photo表的數據記錄。
            var query = _Context.Photo.Where(p => p.Ids.ToString() == index);
            Photo data = query.First();
            byte[] pic = data.Content.ToArray();
            //2.把二進制數據直接輸出到界面上。
            Response.OutputStream.Write(pic, 0, pic.Length);    //向輸出流裏輸出二進制數據
            Response.End();
        }
    }
2.在另外一個界面上，放一個Image控件，讓該Image控件的ImageUrl指向上面的那個頁面，並傳指定的值過去。
HTML代碼：
        <asp:DropDownList ID="DropDownList1" runat="server">
        </asp:DropDownList>
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="顯示" />
        <br />
        <asp:Image ID="Image1" runat="server" />
C#代碼：
//「顯示」按鈕上的代碼
    protected void Button1_Click(object sender, EventArgs e)
    {
        Image1.ImageUrl = "ShowPic.aspx?id=" + DropDownList1.SelectedValue;
    }

如何作驗證碼？
思路：
1.須要兩個頁面。一個頁面是用來畫驗證碼的；另一個頁面是用來展示文本框和驗證碼的。
2.使用畫圖技術中的知識點，畫隨機數圖片。隨機數須要事選保存在Session中，檢查驗證碼是否正確就要使用Session中的值進行對比。
3.點擊驗證碼刷新如何實現？
         function dochange(img) {
            var temp = Math.random(); //JS生成隨機數的代碼。
            img.setAttribute("src","yzm.aspx?id="+temp);
   }

做業：找C#生成驗證碼的代碼。

2015.8.16

生成流水號：

string prefix = "p" + DateTime.Now.ToString("yyyyMMdd");//生成當天流水號前綴
//查當天最大的流水號(兩種狀況：1.已有流水號 2.尚無流水號)
int maxFlow = 0;
var query = _Context.Info.Where(p => p.Code.StartWith(prefix));
if (query.Count() > 0)
{
       //已有流水號---找到最大流水號
         query=query.OrderByDescending(p=>p.Code);//按流水號降序排列
         string maxCode=query.First().Code;//獲取最大流水號
         maxFlow=Convert.ToInt32(maxCode.Substring(maxCode.Length-3));//截取並轉換出現有最大流水號
}
else
{
       //尚無流水號
         maxFlow = 1;
}
//組合生成新的流水號
  string flowCode = prefix+(maxFlow + 1).ToString("000");
//顯示在文本框中
  TextBox1.Text = flowCode;

組合查詢(汽車表爲例)：

private MyDBDataContext_Context=new MyDBContext;
private void FillBrand()
{
        var query=_Context.Brand;
        ddlBrand.DataSource=query;
        ddlBrand.DataTextfield="Brand_Name";
        ddlBrand.DataValuefield="Brand_Code";
        ddlBrand.DataBind();
}
protected void Page_Load(object sender, EventArgs e)
{
       if(!isPostBack)
       {
              FillBrand();
         }
}

---核心代碼---private void button1_Click(object sender, EventArgs e){ var query1=_Context.Car.AsQueryable();//根據名稱查---默認狀況下應當是全集 var query2=_Context.Car.AsQueryable();//根據系列查 var query3=_Context.Car.AsQueryable();//根據油耗查 //根據輸入框的填寫狀況來完善上面三個查詢條件 if(txtName.Text.Trim().Length>0) { query1=query1.Where(p=>p.Name.Contains(txtName.Text)); } if(ddlBrand.SelectedValue!="-1") { query2=query2.Where(p=>p.Brand==ddlBrand.SelectedValue); } if(txtOil.Text.Trim().Length>0) { query3=query3.Where(p=>p.Oil==Convert.ToDecimal(txtOil.Text)); }//三個查詢條件是邏輯與的關係，可使用集合操做的交集來實現 var query=query1.Intersect(query2).Intersect(query3);//綁定顯示Repeater1.DataSource=query;Repeater1.DataBind();}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。