part1:頁面標簽及結構
一.頁面常用標簽
1.塊級元素(block element)
? ?div -最常用的塊級元素
? ?dl - 和dt dd搭配使用的塊級元素
? ?form - 交互表單
? ?h1 - 大標題
? ?hr - 水平分隔線
? ?ol - 排序表單
? ?p - 段落
? ?ul - 非排序列表
2.行級元素又叫內聯元素(inline element)
? ?a - 錨點
? ?b - 粗體(不推薦)
? ?br - 換行
? ?em - 強調
? ?font - 字體設定(不推薦)
? ?i - 斜體
? ?img - 圖片
? ?input - 輸入框
? ?label - 表格標簽
? ?select - 項目選擇
? ?small - 小字體文本
? ?span - 常用內聯容器，定義文本內區塊
? ?strike - 中劃線
? ?strong - 粗體強調
? ?sub - 下標
? ?sup - 上標
? ?textarea - 多行文本輸入框
? ?tt - 電傳文本
? ?u - 下劃線
3.行級元素和塊級元素之間的相互轉換
display：
如果規定了 !DOCTYPE，則 Internet Explorer 8 （以及更高版本）支持屬性值
"inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。
分別代表什么意思呢？
4.盒子模型
這里有布局上看的細節問題：
二.頁面結構
打開我們現在的頁面查看
這個是我們谷雨項目的頁面文件結構，除了index.jsp在外面，其他的都相當于子頁面在文件夾中，但是事實上真的是你看到的這樣么？
layout_sitemesh文件夾打開就可以看到default.jsp
點開之后我們可以看到的頁面的框架
整個頁面框架中我只講標簽這一塊的東西，因為是jsp頁面的關系，會有很多的java代碼所以整個文件的截圖我就不放出來了，主要是頭部的一些問題，我拿出來大家看看，這個目前是我們古語項目的頭文件，有兩部分的內容需要大家注意的：
第一是<!DOCTYPE html>,這里是規定html版本的，只要有心留意這一塊內容的人肯定會發現，現在的代碼減少了很多，在html4時代，這里要寫明
在第五代的html中已經將這些全部省略了，方便了很多，至于上面加的那些內容就是告訴瀏覽器用什么文檔解析規則來解析頁面代碼。所以你不用再去關心這些東西了，而且后面我們的所有的頁面中也是不希望出現這種代碼的。
這一塊是根據瀏覽器的版本來輸出不同的html頭文件，這個是bootstrap中的寫法，當然我們在編寫移動端界面的時候這種寫法根本就是無效的，這也是谷雨項目中遺留下來的問題，這么寫在pc端的界面中，我們還可以根據瀏覽器版本來引用不同的樣式文件，以及js文件，如圖：
這是新浪的寫法，這個頁面上面根據瀏覽器的版本來引用不同的css樣式，為什么這么寫呢？
第一就是為了使頁面通過加載不同的css文件來達到共同的頁面效果一切都是為了兼容性，當然萬惡的ie瀏覽器內核，給我們前端帶來了相當大的工作量。有人會問，為什么不把這些全部放到一個文件里面。
這就是第二個原因：減少頁面的加載量，從而達到對網站的優化效果。
另外要講的就是文件引用順序和位置的問題了，我習慣于將樣式文件放在head里面然后將js按照順序放在頁面結尾的時候引入，也是為了優化頁面的打開速度，從而使用戶體驗得到提升。
part：2
js選擇器分兩塊，一部分是原生態的js，另外一塊是jquery（zepto）
原生的js
從最常用的東西開始講解：
我們想要在頁面加載完成之后執行一些方法，使用原生的js應該怎么寫呢？這里包括兩個部分，一個是方法本身，另外一個是調用。
如圖：
在加載完成之后調用：
選擇器：
document.getElementsByClassName("");
document.getElementById("");
document.getElementsByName("");
document.getElementsByTagName("");
講到這里，大家會發現我們要寫很長的代碼實現選中一個DOM元素，后面很多方法也是如此，它的選擇器很長，方法名也是很長，所以就有了jquery，還有zepto等js的出現價值，
