HTML精華筆記
軟件
可執行的桌面應用程序---.exe
web 類型的應用程序---B/S
手持設備
分佈式
等
結構
UI 層----顯示和交互
業務層----JDBC
數據存儲 層----Oracle、IO
Web 類型的應用程序：網站、OA、CRM等
需要的技術：
客戶端技術：瀏覽器發出請求、顯示頁面---Web基礎
服務器端技術：偵聽、解析、返回頁面---JSP+Servlet/PHP/ASP.NET
Web 基礎課程：html + CSS + JavaScript
美工：效果圖（jpg）/切圖/切頁面----修改
索引--目錄--應用
HTML 課程
一：html 概述和基礎語法
1、html 是一種編寫網頁的解釋性的標記語言，結合 CSS 和 JS 實現功能複雜的頁面
2、解釋性：翻譯，非編譯---代碼有錯誤，可能導致效果錯誤
3、標記：用一對 <> 括起來的，顯示時候會有特定的效果
封閉類型：成對出現，也叫雙標記，比如 <h1></h1>
非封閉類型：只有一個標記，也叫單標記，比如 <br />（建議） 或者 <br>
屬性：出現在開始標記裏，用空格隔開，屬性名稱="屬性值"或者一對單引號
<br/>
<img />
比如
<h1 align="center" xx="">sss</h1>
4、術語：元素----標記
4、顯示頁面：用瀏覽器---IE、Google、Firefox、Opera、Safari
二：html 文檔的創建
1、文檔的標準結構
版本信息
<html>
<head></head>
<body></body>
</html>
2、版本：嚴格型、傳統型、框架型
3、head：頁面頭元素---包含和頁面整體信息相關的內容
title：爲頁面定義標題
meta：元數據
style：樣式
script：腳本代碼
4、body：文檔的主體---各種文本以及各種標記
三：文本標記
1、特殊文本----轉義字符
空格
< <
> >
2、標題： h1---h6
h1---一號標題
3、段落：p----段落間距
4、換行：<br />
5、分組元素：
<div></div>：獨佔一行
<span></span>：不會影響原有的佈局
6、塊級(block)元素和行內(inline)元素
塊級元素：獨佔一行的元素，比如 h1/p/div
行內元素：和其他元素在同一行上，比如 span/a
四：圖像和鏈接
1、圖像標記 <img />
相對路徑：<img src="images/a.jpg" />
絕對路徑：<img src="http://ssss/a.jpg" />
2、超級鏈接 <a href="">click me</a>
<a href="users/login.html"></a>
href="http://www.xxx."
target="_blank"
3、不同頁面之間的
4、同一個頁面的不同部分之間的
<a href="#">XXXx</a>---回到頂端
5、錨點的定義和使用
實現選擇性的在頁面的不同位置之間跳轉
<a name="xxx"></a>---錨點
<a href="#xxx">To XXX</a>
五：列表： ul ol li
經常會使用嵌套的列表實現導航菜單
---配合鏈接，實現導航目錄效果
<ul>
<li>
電器
<ul>
<li>小家電</li>
<li>白色家電</li>
</ul>
</li>
<li>
圖書
<ul>
<li>考試用書</li>
<li>兒童讀物</li>
</ul>
</li>
</ul>
六：表格：顯示網格數據、佈局
1、表格的基本結構：自上而下，從左到右
<table>
<tr>---table row
<td>---單元格 table defination
2、常用的屬性
table：border/width/height/cellspacing/cellpadding
td：width/height/align/valign
3、表格的其他
爲表格添加標題： <caption>
行分組：thead/tbody/tfoot
複雜分組的時候，可以有多個 tbody
4、不規則表格：設置 td 的跨行或者跨列
colspan = "3"---橫着
rowspan = "3"---豎着
5、表格的嵌套：實現複雜佈局時
table 寫在 td 裏
七：表單
1、表單：承載表單上元素（如文本框、按鈕等），數據的錄入和交互，提交到服務器端
其他數據
<form action="login.jsp" method="post">
?????
保存
</form>
其他數據
2、表單上的元素：
3、input ：輸入框---type取值的不同，不同類型
<input type="text" />
<input type="password" />
<input type="radio" />--互斥的單選效果
<input type="checkbox" />--多選
<input type="submit" />--提交按鈕
<input type="reset" />--重置，恢復到初始狀態
<input type="button" value="普通按鈕" />
<input type="file" />---選擇本地文件，備於上傳
<input type="hidden" />--隱藏域，不顯示----常用來記載不希望用戶看見的關鍵數據，隱祕數據（加密完畢再存入）
4、input 元素的屬性
name 屬性：提交數據用，名稱
value 屬性：提交的值--文本框（初始值）、單選或者多選框（提交的值）
名值對：提交數據到服務器端，比如：second.html?uu=john&sex=m&role=sa
5、label標記：使用for屬性和某個元素髮生關聯，for的值必須是關聯控件的 id 值
6、select：下拉框或者列表框 size="n"
option元素：選項
7、textarea：多行文本域
8、表單控件的分組元素：fielsetset/legend
八：浮動框架
<iframe src="其他頁面的URL"></iframe>
當前頁面上嵌入其他頁面，常用於廣告頁面
一、CSS 概述
1、CSS 的作用：定義網頁的外觀，統一的方式，實現內容（數據）和表現（樣式）分離
2、CSS 的基礎語法：
樣式屬性名稱1:值1;樣式屬性名稱2:值2
width:100px;height:200px;
提出來定義：
樣式選擇器
{
樣式聲明；
}
3、CSS 的定義方式：
方式一：內聯方式---CSS 樣式定義在 html 元素的 style 屬性裏---重用性和可維護度不好
方式二：內部樣式表---CSS 樣式定義在 head 裏的 style 元素裏
方式三：外部樣式表---CSS 樣式定義在單獨的 .css 文件裏，html 頁面上用 link 引入-----優先推薦使用
a.html----準備多套樣式，類似於皮膚的切換
s1.css---紅色
s2.css---藍色
s3.css--黑白色
4、特徵 css（級聯/層疊 樣式表）
繼承：子元素可以使用父元素的某些樣式---字體相關、背景相關
<body style="color:red" >
111
<p>text</p>
</body>
不重複----並集
重複定義-----優先級
內聯 > 內部或者外部（以最後一次定義的爲準，覆蓋前面的相同部分）
二、選擇器的定義---靈活的決定使用樣式聲明
1、元素選擇器，如 h1/div/p---以html中標記的名稱-----爲同一類元素定義樣式
2、樣式類
css： .name {}
html： <任元素 class="name"
------多種元素相同的樣式
3、分類
CSS： input.txt {}
html: <input class="txt"
同一種元素下的細分
<input type="text" />
<input type="button" />
4、ID選擇器-----對頁面上某個元素的唯一定義
CSS: #idvalue {}
html: <元素 id="idvalue"
5、派生選擇器---利用html元素的層次關係，選中某種結構下的元素
CSS： ul li a{XXX}
html： <ul><li><a>...
6、選擇器分組----爲n多元素定義相同的樣式部分
CSS： input,a.link,#title,.s1 {XXX}
7、僞類----有不同的狀態
:link---未訪問過的
:hover---懸浮，懸停
:active---按下
:visited---訪問過的
CSS： 某種選擇器:link/hover
8、擴展---各種樣式選擇器----不重複的取並集，重複的依靠優先級
選擇器的優先級：範圍越小，優先級越高
<div>
<a id="link1" class="s1"></a>
</div>
div a {}
#link1 {}
a.s1 {}
三：各種樣式屬性
尺寸單位：pt/px/cm/mm/%/..
顏色單位:red/#ff0000
四：尺寸
width
height
overflow:visible/hidden/scroll/auto(建議)---設置內容溢出時如何處理
五：邊框
border:width style color;---4邊框
border-top:1px solid red;
border-left:2px dotted blue;
border-left-width:2px;
border-left-style:dotted;---線型
border-left-color:blue;
六、邊距
盒子模型（框模型）：元素的邊框、內容、外邊距以及內邊距之間的定義
margin：外邊距
margin:20px;---四個方向
margin:10px 20px 30px 40px;
top right bottom left
margin:10px 20px;---值複製
margin-left:10px;---單個方向的邊距
margin-top:20px;
padding：內邊距
padding:1/2/4;
padding-left/right:;
定義邊距，可能導致佔用的總面積的增加
特別的取值：
margin:10px auto;----居中
auto：由瀏覽器自動計算左右的邊距
七：背景
1、背景色： background-color:顏色；---純色
2、背景圖片：
background-image:url(images/a.jpg);
background-repeat:repeat/no-repeat/repeat-x/repeat-y;
background-position:x y;
background-attachment:scroll/fixed;--附着方式---取值爲fixed，背景圖像固定，類似於水印的效果
八：文本
color
font-size
font-family:value1,value2,value3;
font-weight:normal/bold;
text-align:left/center/right;
text-decoration:none/underline;
text-indent:12px;----僅首行縮進
line-height:20px;---行高
九：表格
vertical-align:top/middle/bottom;----td裏
border-collapse:separate/collapse;---邊框合併
border-spacing:10px;---邊框之間的邊距；
十：光標
cursor:default/pointer/help/....;---光標
十一：浮動
1、頁面默認情況下，採用流佈局的模式
2、設置元素浮動，脫離原有的佈局，原有的位置不再保留，後續元素補上
float:none/left/right;
3、清除浮動元素帶來的影響
clear:left/right/both;
十二：顯示----元素的顯示方式
每個 html 元素都有其默認的顯示方式（塊級、行內）
行內元素：高度和寬度---無效
塊級元素：高度和寬度有效
display:
none---不顯示，結合js代碼實現動態顯示效果
block---塊級元素
inline---行內元素
十三：列表的樣式
list-style-type:none/circle/...;
list-style-image:url();----使用圖片作爲列表項的標識
十四：定位
一、javascript 概述---js
1、是一種基於對象和事件驅動的解釋性腳本語言，應用於網頁的編程處理
2、JavaScript、JScript/VbScript----W3C
3、js的書寫方式
直接寫在 onxxx 事件中
<script>塊中，onxxx 事件中調用---當前頁面的重用
js 文件中，頁面上先使用 <script src="">引入，onxxx 事件中調用---建議使用
二、基礎語法
1、變量
聲明變量 var 名稱 = 值；
變量的數據類型以賦值爲準
標識符：不以數字開頭的數字、字母、下劃線和 $ ，不能和保留關鍵字重名
2、數據類型
基本類型：string/number/bool
特殊類型：null/undefined
複雜類型：Array/Date/Math/....
String類型：字符串，一對雙引號或者一對單引號，特殊字符使用轉義符（\x，漢字對應一個 \uxxxx）
3、基本數據類型之間的轉換
隱式轉換：規則
顯式轉換：使用轉換方法
parseInt/parseFloat/toString
NaN----not a number
isNaN("???")---bool，判斷是否可以轉化爲數值：is not a number("??")---true
4、運算符與表達式
if(a == b)-----值
if(a === b)---嚴格相等-----值和類型
三元運算符
5、流程控制
默認情況下，順序執行---改變其執行順序
條件：if/else、switch/case
循環：for、while
三、內置對象的使用
1、js中的對象：基於對象的語言，靈活的使用各種對象
2、常用的內置對象：String、Number、Math等
3、String對象
創建 var s = "mary";
屬性 var n = s.length;
方法 var s1 = s.substring(1,3);
toLowerCase/toUpperCase
split 1,2,3,4
substring
charAt
indexOf/lastIndexOf
replace/search/match---結合正則表達式使用、實現對string的操作
replace(/\d{3}/ ,"*")
正則表達式：js中，放置在 /中間/
結合匹配標識用:g(global)i(ignour)m(multiline)
/gcd/gim
4、Array 對象
創建數組
var a1 = new Array(3);
a1[0] = 12;
a1[1] = "mary";
a1[2] = true;
var s2 = [12,"mary",true];//簡寫方式
var s3= new Array();
a3[0] = [10,20];
a3[1] = [30,40];
屬性
length
方法
XXX.toString()---使用 ， 連接成一個字符串，常用於輸出數組的內容顯示
XXX.join("|")----使用 | 連接
concat----數組的加法
slice-----數組的截取
reverse
sort----默認情況下，按照字符比較
----按照數值比較，先定義一個用於比較規則的方法，將方法作爲參數傳給 sort
5、Math 對象---直接使用不需要new
屬性或者方法： Math.round()
6、Number 對象
toString
toFixed(n)---保留小數點後n位
7、正則表達式對象
正則表達式本身就是一個純文本的表達式，用來表示對文本的匹配，比如 \d{3} [a-z]{2,5} [a-zA-Z0-9]{4}
不同的語言、環境下，有着不同的應用
js中對於正則表達式的應用：
一：結合string 的對象方法：replace/search/match
二：直接使用正則表達式對象的方法
var r = /\d{3}/;--r 是一個正則表達式對象
r.test(string)----bool
常用於驗證界面的錄入
8、Date 對象
創建 var r = new Date();--當前
var r = new Date("2013-12-23");
方法
getXXX()--getDate()/getMonth
setXXX()
toXXX()---得到某種格式的字符串
9、方法
a、定義： function Name(x,y,z)
{
return XXX;
}
b、重載
js不可以實現傳統意義上的重載---js中，只要方法重名，以最後一次定義的爲準
方法中可以使用 arguments 得到傳入的參數的數組。模擬實現方法的重載
c、方法和 Function 對象
d、使用方法時
方式一：方法，與功能相關----function sss(){}
方式二：方法僅爲某個方法裏所使用，創建一個 Function對象即可-----適用於方法體簡單
var f = new Function("參數1","參數2","方法體");
使用匿名函數---適用於方法體複雜
var f = function(){};
10、全局函數：所有js的對象均可使用
parseInt/parseFloat
isNaN
decodeURI/encodeURI
xxxx.html?name=mary&age=17&sex=%45%65 eval：傳入一個字符串，計算或者執行它
四：DHTML 應用 dynamic
1、什麼是 DHTML 應用：動態網頁效果
2、對象模型
window
history
location
navigator
screen
event
document
對象模型分爲兩類：DOM（文檔對象模型） 和 BOM（瀏覽器對象模型）
3、window 對象
對話框
window.alert()
window.confirm()
window.prompt()
打開新窗口
window.open(url,name,配置);
window.close();
定時器相關
週期性
window.setInterval(func,time);
window.clearInterval()
一次性
window.setTimeout(func,time);
window.clearTimeout();
<img style="position:relavtive;left:10px;"
img.src
img.style.left += 10;
4.document對象
html 頁面上的每個內容作爲一個節點對象----整個文檔是一顆節點樹，document 對象代表的整個樹，樹根
DOM：文檔對象模型
a、查詢---找到文檔中的某個節點對象
方法一：document.getElementById("")---通過id找到對象或者null
方式二：根據層次關係來查詢
obj.parentNode
obj.childNodes---節點的數組
obj.firstChild/lastChild
方式三：根據標籤名稱查找
document.getElementsByTagName("input")---節點的數組
obj.getElementsByTagName("input")[1]
b、讀取信息或者修改信息----知道節點的類型
方式一：將 HTML 標籤對象化
<input obj.value/type
<a obj.href
<img obj.src
方式二：元素中間的文本內容-----innerHTML
<a>text</a> obj.innerHTML
方式三：樣式
簡單樣式
<p style="color:red;">p text</p>
obj.style.color = "red";
obj.style.fontSize = "18pt";
obj.style.backgroundColor = "silver";
複雜的樣式：建議在 樣式表 中先定義好
obj.className = "";
c、不知道節點對象的類型時----讀取數據？
obj.nodeName----全大寫方式，返回當前元素的標籤的名稱
d、增加新節點
第一步：創建新的節點對象
document.createElement("a/input/p");
<a></a> <input /> <p></p>
第二步：設置新對象的各信息
第三步：加入
xxx.appendChild(newObj);---追加
xxx.insertBefore(newObj,refNode);
e、刪除
XXX.removeChild(obj);
obj.parentNode.removeChild(obj);
5、HTML DOM：基於標準的DOM操作，進行封裝，以實現代碼的簡化，比如：
var obj = new Option("JDBC","1");
sel.options[1] = obj;
主要講解兩種封裝好的元素
select + option
table+tr+td
DOM方式： createElement(“tr”)
HTML DOM 方式：
table.insertRow(index);
row.insertCell(index);
6、history 對象：當前瀏覽器窗口的歷史訪問記錄---確實有歷史記錄
history.back();
history.forward();
history.length;
7、screen 對象：代表的就是當前屏幕信息--只能讀取，不能修改
var w = screen.width/availWidth;//ok
screen.width = 123; //error
8、location 對象：代表的是 URL 地址欄
實現對 URL的修改，實現從頁面去往另一個頁面
location.href = "url";--保留歷史訪問記錄
location.replace("url");--替換，沒有歷史
頁面間
<a>----靜態
window.open----一定打開新窗口
history.xxx()----受限於歷史記錄
location.href----保留歷史記錄
location.replace()----不保留
9、navigator 對象
js中，可以循環對象的所有的屬性，如下：
for(var p in navigator)//p代表對象的每個屬性
{
}
10、event
a、事件分類
鼠標事件：onclick/onmouseover/onmouseout/ondblclick
鍵盤事件：onkeyup/onkeydown
狀態事件：onblur/onfocus/onchange/onload/onunload
b、如何定義事件
<元素標籤中 onxxx = "function();"----靜態
btnObj.onxxx = Function； ----動態
c、事件可以被取消---常用於頁面的提交時
onxxx = "return true;"---默認值，事件觸發
onxxx = "return false;"---事件被取消
d、事件有冒泡機制---當多層元素定義了相同的事件時，事件從最裏層開始觸發，層層向上
e、event 對象：封裝了和當前事件相關的所有信息
clientX/clientY----事件發生的點
srcElement/target---源元素對象，引發當前事件的元素
使用event對象時，可以直接在 html 頁面或者js代碼中使用 event 關鍵字獲得對象----firefox 除外
firefox：只能在 html 頁面上使用 event ，js 中不可用
瀏覽器兼容問題：標準，特殊問題特殊處理（event）
五：js中的面向對象基礎
封裝、繼承、抽象、多態
封裝：對象相關的數據和行爲組織起來
數據：屬性
行爲：方法
1、使用 Object：使用簡單，重用性差----適用於簡單數據的封裝
var obj = new Object();
obj.name = "mary";
obj.age = 18;
obj.isGra = true;
2、類似於 創建一個類：使用較爲複雜，重用性好---適用於大多數情況下的封裝
創建類
function Student(n,a)
{
this.name = n;
this.age = a;
}
var p1 = new Student("mary",18);
var p2 = new Student("john",20);
3、爲了傳遞到服務器端：JSON
var obj = {
"name":"mary",
"age":18
};
var p1 = {};
var p2 = {};
var array = new Array();
array[0] = p1;
array[1] = p2;