web001-html,css,js

一、HTML + CSS
1.能看到標籤的結構
* 父子關係

123

• 屬性
  

2.瞭解元素（標籤）的類型
1> block：塊級
* 獨佔一行
* 能隨意修改尺寸

2> inline：行內
* 多個行內元素能顯示在同一行
* 不能修改尺寸，尺寸取決於內容的多少

3> inline-block：行內-塊級
* 多個行內-塊級元素能顯示在同一行
* 能隨意修改尺寸
* 不設置尺寸，默認的尺寸取決於內容的多少

3.瞭解常見的屬性
1> font-size : 字體大小
2> color: 文字顏色
3> background: 背景
4> display: 顯示的類型（block、inline、inline-block、none）
5> padding
6> margin
7> border
8> width
9> height

4.脫離標準流
1> float: left\right
2> 絕對定位
* position : absolute;
* right: 0px;
* bottom: 0px;
// 右下角
// 如果想相對於父節點進行定位，最好設置父節點的position爲relative
// 原則：子絕父相

5.常見的選擇器
1> 標籤選擇器：tagName
2> 類選擇器：.className
3> id選擇器：#id
4> 後代選擇器(多個選擇器之間用空格隔開)：tagName .className .className tagName
5> 羣組選擇器(多個選擇器之間用逗號,隔開)：tagName, .className, tagName, .className
6> 直接後代選擇器(多個選擇器之間用大於號>隔開)：tagName > .className > .className > tagName
7> 屬性選擇器：tagName[arrtName=”attrValue”]
8> 選擇器組合（多個選擇器粘在一起）：tagName.className
9> 僞類
* tagName:hover
* .className:hover
* tagName.className tagName:hover

二、JS
1.節點的基本操作（CRUD）
* C（Create）：
var div = document.createElement(‘div’);
document.body.appendChild(div);

• R（Read）：
  var div = document.getElementById(‘logo’);
  var div = document.getElementsByTagName(‘div’)[0];
  var div = document.getElementsByClassName(‘logo’)[0];

• U（Update）：
  var img = document.getElementById(‘logo’);
  img.src = ‘images/01.png’;

• D（Delete）：
  var img = document.getElementById(‘logo’);
  img.parentNode.removeChild(img);

2.事件綁定
1> 推薦做法
var button = document.getElementById(‘login’);
button.onclick = function() {
// 實現點擊按鈕想做的事情
};

2> 直接寫在標籤內部
登錄

3> 不常用
function login() {
// 實現點擊按鈕想做的事情
}

var button = document.getElementById(‘login’);
button.onclick = login;

三、jQuery
1.通過選擇器查找元素
* $(‘選擇器’)
* jQuery支持絕大部分的CSS選擇器

2.屬性操作
* 獲得屬性：(‘選擇器′).attr(‘屬性名′);∗設置屬性： (‘選擇器’).attr(‘屬性名’, ‘屬性值’);

3.顯示和隱藏
* 顯示：(‘選擇器′).show();∗隱藏： (‘選擇器’).hide();
* 顯示和隱藏來回切換：$(‘選擇器’).toggle();

4.事件綁定
* 點擊事件(常用)
$(‘選擇器’).click(function() {
// 實現點擊按鈕想做的事情
}).hide();
// 先給節點綁定事件，再隱藏

• 點擊事件(不常用)
  function login() {
  // 實現點擊按鈕想做的事情
  }
  $(‘選擇器’).click(login);

四、參考手冊
1.www.w3school.com.cn
2.http://www.w3school.com.cn/jquery/jquery_reference.asp
3.http://www.php100.com/manual/jquery/

五、HTML5框架（大部分都是爲移動設備而寫的）
1.概念
* 有了HTML5框架，編寫簡易的幾行JS代碼，就能實現非常漂亮的手機界面
* HTML5框架封裝了大量的DOM節點操作，封裝了大量的CSS樣式
* 對JS的要求比較高，對CSS的要求並不高

2.常見的HTML5框架
* PhoneGap
* jQuery Mobile
* sencha-touch