HTML：
什么是 HTML？
HTML 是用來描述網頁的一種語言。
- HTML 指的是超文本標記語言 (Hyper Text Markup Language)
- HTML 不是一種編程語言，而是一種標記語言 (markup language)
- 標記語言是一套標記標簽 (markup tag)
- HTML 使用標記標簽來描述網頁
1>:html不區分大小寫，但推薦用小寫。
2>:<style>…</style>定義CSS格式
1 <Script language=“”>…</Script> 2 用於定義腳本，Eg. Javascript
3>：常見標簽：
1 超級鏈接，跳轉到另一文件 2 <a href=“url” target=“TargetWindow”>文字 3 </a> 4 *標題字體大小--<h#> #=1、2、3、4、5、6 5 *分隔線--<hr> 6 * ：空格 7 *<p>…</p>：分段落現實 8 *<div>…</div>(一層) <span>…</span>（行內塊） 9 *分塊顯示： 10 <ul>…</ul>(列表) 11 <li type=“disc circle square”>… 12 *符號列表： 13 <ol>…</ol> 14 <li>… 15 *數字列表 16 *<br> 換行 17 *<nobr>…</nobr> 不換行 18 *<pre></pre>保留原有格式 19 *<marquee></marquee>跑馬燈效果 20 *<blockquote></blockquote> 21 *<dl><dt><dd> 22 *對齊—align 23 <h1 align=“”> 24 <div align=“”> 25 <table align=“”> 26 <hr align=“”> 27 …… 28 取值:left right center top middle bottom 29 *<img src=“” align=“” alt=“” border=“”> 30 Src 圖片路徑，一般使用相對路徑 31 Alt 圖片無法顯示時顯示的文字 32 Border 邊框的厚度 33 Align = left right top middle bottom 圖文混排時用於和圖片的對齊
4>表單：<form>……</form>
1 *<form>的屬性 2 Method: (get post) 3 Get 發送較少數據（256byte），顯示在url中，url/userinfo?username=張三&password=hehe 4 Post 數據長度無限制，不會顯示在url中 5 Action:Form中數據交給服務器端哪個程序進行處理 6 *eg:<form method=“post” action=“user.jsp>……</form> 7 **位於<form>之中，接收用戶輸入: 8 格式：<input type=“” name=“”> 9 type: 10 text radio checkbox password hidden select submit reset button textarea image 11 name: 12 提交到服務器端的變量的名字 13 文本框 text 14 <input type=“text” name=“” value=“” maxlength=“” size=“”> 15 maxlength – 最大字符長度 16 size – 文本框寬度（字符） 17 密碼區域—特殊的單行文本輸入框 password 18 <input type=“password” name=“” value=“” size=“” maxlength=“”> 19 單選按鈕 20 <input type=“radio” name=“” value="" checked> 21 典型用法 : 同一名字，不同的值 22 錯誤的用法 : 不同的名字 23 復選框 24 <input type=“checkbox” name=“” value=“” checked> 25 典型的用法 : 同一name，不同的value 26 隱藏域 27 <input type=“hidden” name=“” value=“”> 28 不顯示在網頁中 29 通常用作向下一個頁面傳輸已知信息或表單的附加信息
*分塊：
1 <frameset cols=“20%,*”> <frame name=“left” src=“a.htm”> <frameset rows=“40%,*”> <frame name=“righttop” src=“b.htm”> <frame name=“rightbottom” 2 3 src=“c.htm”> </frameset> </frameset> 4 5 html中username表單的驗證： 6 <input type=text name="username" size="30" maxlength="10" onblur="checkUserName(this.value.toLowerCase())"> 7 <span id="usernameErr"></span> 8 js代碼： 9 function checkUserName(ssn){ 10 if( ssn.length<3 || ssn.length>18 ) { 11 document.getElementById("usernameErr").innerHTML = "<font color='red'>請輸入正確的用戶名,用戶名長度為3-18位！</font>"; 12 form.username.focus() 13 return false; 14 }
* 始終為屬性值加引號
屬性值應該始終被包括在引號內。雙引號是最常用的，不過使用單引號也沒有問題。
在某些個別的情況下，比如屬性值本身就含有雙引號，那么您必須使用單引號，例如：name='Bill "HelloWorld" Gates'
*HTML顏色值
顏色由一個十六進制符號來定義，這個符號由紅色、綠色和藍色的值組成（RGB）。
每種顏色的最小值是0（十六進制：#00）。最大值是255（十六進制：#FF）
*HTML參考手冊
HTML Basic Document
<html> <head> <title>Document name goes here</title> </head> <body> Visible text goes here </body> </html>
Text Elements
<p>This is a paragraph</p> <br> (line break) <hr> (horizontal rule) <pre>This text is preformatted</pre>
Logical Styles
<em>This text is emphasized</em> <strong>This text is strong</strong> <code>This is some computer code</code>
Physical Styles
<b>This text is bold</b> <i>This text is italic</i>
Links, Anchors, and Image Elements
<a href="http://www.example.com/">This is a Link</a> <a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a> <a href="mailto:webmaster@example.com">Send e-mail</a>A named anchor: <a name="tips">Useful Tips Section</a> <a href="#tips">Jump to the Useful Tips Section</a>
Unordered list
<ul> <li>First item</li> <li>Next item</li> </ul>
Ordered list
<ol> <li>First item</li> <li>Next item</li> </ol>
Definition list
<dl> <dt>First term</dt> <dd>Definition</dd> <dt>Next term</dt> <dd>Definition</dd> </dl>
Tables
<table border="1"> <tr> <th>someheader</th> <th>someheader</th> </tr> <tr> <td>sometext</td> <td>sometext</td> </tr> </table>
Frames
<frameset cols="25%,75%"> <frame src="page1.htm"> <frame src="page2.htm"> </frameset>
Forms
<form action="http://www.example.com/test.asp" method="post/get"> <input type="text" name="lastname" value="Nixon" size="30" maxlength="50"> <input type="password"> <input type="checkbox" checked="checked"> <input type="radio" checked="checked"> <input type="submit"> <input type="reset"> <input type="hidden"> <select> <option>Apples <option selected>Bananas <option>Cherries </select> <textarea name="Comment" rows="60" cols="20"></textarea> </form>
Entities
< is the same as < > is the same as > © is the same as ©
Other Elements
<!-- This is a comment --> <blockquote> Text quoted from some source. </blockquote> <address> Address 1<br> Address 2<br> City<br> </address>
CSS:(不用記憶，會改即可)
CSS 語法
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。
selector {declaration1; declaration2; ... declarationN }
選擇器通常是您需要改變樣式的 HTML 元素。
每條聲明由一個屬性和一個值組成。
屬性（property）是您希望設置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。
selector {property: value}
下面這行代碼的作用是將 h1 元素內的文字顏色定義為紅色，同時將字體大小設置為 14 像素。
在這個例子中，h1 是選擇器，color 和 font-size 是屬性，red 和 14px 是值。
h1 {color:red; font-size:14px;}
下面的示意圖為您展示了上面這段代碼的結構：
1>字體屬性：
1 屬性 含義 屬性值 2 font-family 字體 各種字體 3 font-style 字體樣式 italic、oblique 4 font-variant 小體大寫 small-caps 5 font-weight 字體粗細 bold、bolder、lighter… 6 font-size 字體大小 absolute、relative、% 7 color 字體顏色 顏色值
2>顏色與背景屬性：
1 屬性 含義 屬性值 2 Color 顏色 顏色值 3 Background-color 背景色 顏色值 4 Background-image 背景圖案 圖片路徑 5 Background-repeat 背景圖案重復方式 Repeat-x | repeat-y | no-repeat 6 Background-attachment 背景的滾動 Scroll | fix 7 Background-position 背景圖案初始位置 % | n em | top | left | right | bottom
3>文本屬性:
1 屬性 含義 屬性值 2 word-spacing 單詞間距 n em 3 letter-spacing 字母間距 n em 4 text-decoration 裝飾樣式 underline| overline| line-through| blink 5 vertical-align 垂直方向位置 sub| super |top |text-top| middle| bottom| text-bottom 6 text-transform 轉為其他形式 capitalize| uppercase| lowercase 7 text-align 對齊 left| right| center| justify 8 text-indent 縮進 n em| % 9 line-height 行高 pixels、n em、%
4>邊距屬性:
1 屬性 含義 屬性值 2 margin-top 上邊距 n em | % 3 margin-right 右 n em | % 4 margin-bottom 下 n em | % 5 margin-left 左 n em | %
5>邊框屬性:
1 屬性 含義 屬性值 2 Border-top-width 上邊框寬度 n em | thin | medium | thick 3 Border-right-width 右 同上 4 Border-bottom-width 下 同上 5 Border-left-width 左 同上 6 Border-width 四邊 同上 7 Border-color 邊框顏色 Color 8 Border-style 邊框樣式 Dotted | dash | solid | double | groove | ridge | inset | outset 9 Border-top|right|bottom|left 上(右|底|左)所有屬性 Border-width | border-style | color
6>圖文混排:
1 屬性 含義 屬性值 2 Width 寬度 n em | % 3 Height 高度 n em 4 Float 文字環繞 Left | right 5 clear 去除文字環繞 Left | right | both
7>列表屬性:
1 屬性 含義 屬性值 2 Display 是否顯示 Block | inline | list-item | none 3 White-space 空白部分 Pre | nowrap | normal（是否合並) 4 List-style-type 項目編號 Disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none 5 List-style-image 項目前圖片 Img-url 6 List-style-position 第二行位置 Inside | outside 7 List-style 全部屬性 Keyword | position | url
8>鼠標屬性:
1 屬性值 含義 屬性值 含義 2 Auto 自動 N-resize 上箭頭 3 Crosshair "+" Se-resize 右下 4 Default 默認 Sw-resize 左下 5 Hand 手形 S-resize 下箭頭 6 Move 移動 W-resize 左箭頭 7 E-resize 右箭頭 Text "I" 8 Ne-resize 右上 Wait 沙漏 9 Nw-resize 左上 help 幫助
JavaScript
1>:JavaScript (ECMAScript) ：JavaScript 是腳本語言。瀏覽器會在讀取代碼時，逐行地執行腳本代碼。而對於傳統編程來說，會在執行前對所有代碼進行編譯。
1 基礎語法 2 DOM 3 Document Object Model：用以訪問 HTML 元素的正式 W3C 標准。 4 BOM 5 Brower Object Model
HTML DOM （文檔對象模型）
當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。
HTML DOM 模型被構造為對象的樹。
HTML DOM 樹:
通過可編程的對象模型，JavaScript 獲得了足夠的能力來創建動態的 HTML。
- JavaScript 能夠改變頁面中的所有 HTML 元素
- JavaScript 能夠改變頁面中的所有 HTML 屬性
- JavaScript 能夠改變頁面中的所有 CSS 樣式
- JavaScript 能夠對頁面中的所有事件做出反應
2>:JavaScript:
1 通過在網頁中加入<Script>…</Script>標記JavaScript的開始和結束，將JavaScript代碼放到<Script>…</Script>之間 2 也可以引入一個外部的JavaScript文件，這個JavaScript文件一般以.js作為擴展名 3 原則上，放在<head></head>之間。但視情況可以放在網頁的任何部分 4 一個頁面可以有幾個<Script>…</Script，不同部分的方法和變量，可以共享。
3>JavaScript基本語法：
1 *變量： 2 JavaScript是一門弱類型的語言，所有的變量定義均以var來實現 3 JavaScript的變量建議先定義，再使用 4 JavaScript區分大小寫 5 雖然JavaScript可以不需定義即可直接使用變量，但不建議這么做 6 *數組定義： 7 var arr = new Array(3); 8 通過arr.length取得數組的長度 9 *注釋的寫法－－》和java的一樣
4>Date對象：
1 創建方式： 2 myDate = new Date(); 3 日期起始值:1970年1月1日00:00:00 4 主要方法 5 getYear(): 返回年數 setYear(): 設置年數 6 getMonth(): 返回月數 setMonth():設置月數 7 getDate(): 返回日數 setDate():設置日數 8 getDay(): 返回星期幾 setDay():設置星期數 9 getHours():返回小時數 setHours():設置小時數 10 getMinutes():返回分鍾數 setMintes():設置分鍾數 11 getSeconds():返回秒數 setSeconds():設置秒數 12 getTime() : 返回毫秒數 setTime() :設置毫秒數
5>JavaScript事件處理：
1 *onFocus：在用戶為了輸入而選擇select、text、textarea等時 2 *onBlur：在select、text、password、textarea失去焦點時 3 *onChange：在select、text、textarea的值被改變且失去焦點時 4 *onClick：在一個對象被鼠標點中時（button,checkbox,radio,link,reset,submit,text,textarea等） 5 *onLoad：出現在一個文檔完成對一個窗口的載入時 6 *onUnload：當用戶退出一個文檔時 7 *onMouseOver：鼠標被移動到一個對象上時 8 *onMouseOut：鼠標從一個對象上移開時 9 *onSelect：當form對象中的內容被選中時 10 *onSubmit：出現在用戶通過提交按鈕提交一個表單時
如下為一個javacript的一個重要功能應用，利用onsubmit表單認證
1 <html> 2 <head> 3 <script type="text/javascript"> 4 fuvtion check(){ 5 if(document.text.t.value==""){ 6 alert("字符不能為空"); 7 return false； 8 } 9 return true； 10 } 11 </script> 12 </head> 13 <body> 14 <from name="test" action="test.html" onsubmit ="return check()"> 15 <input type="text" name="t"> 16 <input type="submit" value="OK"> 17 </body> 18 </html>
6>:JavaScript 表單驗證
JavaScript 可用來在數據被送往服務器前對HTML 表單中的這些輸入數據進行驗證
被JavaScript 驗證的這些典型的表單數據有：
- 用戶是否已填寫表單中的必填項目？
- 用戶輸入的郵件地址是否合法？
- 用戶是否已輸入合法的日期？
- 用戶是否在數據域 (numeric field) 中輸入了文本？
***HTML、CSS、JavaScript學習重點掌握表單輸入的判斷***
關於該階段的學習任務需要邊學邊做實驗，個人認為比較不錯的學習網站：http://www.w3school.com.cn