part1:頁面標(biāo)簽及結(jié)構(gòu)
一.頁面常用標(biāo)簽
1.塊級元素(block element)
? ?div -最常用的塊級元素
? ?dl - 和dt dd搭配使用的塊級元素
? ?form - 交互表單
? ?h1 - 大標(biāo)題
? ?hr - 水平分隔線
? ?ol - 排序表單
? ?p - 段落
? ?ul - 非排序列表
2.行級元素又叫內(nèi)聯(lián)元素(inline element)
? ?a - 錨點(diǎn)
? ?b - 粗體(不推薦)
? ?br - 換行
? ?em - 強(qiáng)調(diào)
? ?font - 字體設(shè)定(不推薦)
? ?i - 斜體
? ?img - 圖片
? ?input - 輸入框
? ?label - 表格標(biāo)簽
? ?select - 項(xiàng)目選擇
? ?small - 小字體文本
? ?span - 常用內(nèi)聯(lián)容器看幼，定義文本內(nèi)區(qū)塊
? ?strike - 中劃線
? ?strong - 粗體強(qiáng)調(diào)
? ?sub - 下標(biāo)
? ?sup - 上標(biāo)
? ?textarea - 多行文本輸入框
? ?tt - 電傳文本
? ?u - 下劃線
3.行級元素和塊級元素之間的相互轉(zhuǎn)換
display：
如果規(guī)定了 !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.盒子模型
這里有布局上看的細(xì)節(jié)問題：
二.頁面結(jié)構(gòu)
打開我們現(xiàn)在的頁面查看
這個(gè)是我們谷雨項(xiàng)目的頁面文件結(jié)構(gòu)键思，除了index.jsp在外面，其他的都相當(dāng)于子頁面在文件夾中甫贯，但是事實(shí)上真的是你看到的這樣么吼鳞？
layout_sitemesh文件夾打開就可以看到default.jsp
點(diǎn)開之后我們可以看到的頁面的框架
整個(gè)頁面框架中我只講標(biāo)簽這一塊的東西，因?yàn)槭莏sp頁面的關(guān)系获搏，會(huì)有很多的java代碼所以整個(gè)文件的截圖我就不放出來了赖条，主要是頭部的一些問題，我拿出來大家看看常熙，這個(gè)目前是我們古語項(xiàng)目的頭文件纬乍，有兩部分的內(nèi)容需要大家注意的：
第一是<!DOCTYPE html>,這里是規(guī)定html版本的，只要有心留意這一塊內(nèi)容的人肯定會(huì)發(fā)現(xiàn)裸卫，現(xiàn)在的代碼減少了很多仿贬，在html4時(shí)代，這里要寫明
在第五代的html中已經(jīng)將這些全部省略了墓贿，方便了很多茧泪，至于上面加的那些內(nèi)容就是告訴瀏覽器用什么文檔解析規(guī)則來解析頁面代碼。所以你不用再去關(guān)心這些東西了聋袋，而且后面我們的所有的頁面中也是不希望出現(xiàn)這種代碼的队伟。
這一塊是根據(jù)瀏覽器的版本來輸出不同的html頭文件，這個(gè)是bootstrap中的寫法幽勒，當(dāng)然我們在編寫移動(dòng)端界面的時(shí)候這種寫法根本就是無效的嗜侮，這也是谷雨項(xiàng)目中遺留下來的問題，這么寫在pc端的界面中啥容，我們還可以根據(jù)瀏覽器版本來引用不同的樣式文件锈颗，以及js文件，如圖：
這是新浪的寫法咪惠，這個(gè)頁面上面根據(jù)瀏覽器的版本來引用不同的css樣式击吱，為什么這么寫呢？
第一就是為了使頁面通過加載不同的css文件來達(dá)到共同的頁面效果一切都是為了兼容性遥昧，當(dāng)然萬惡的ie瀏覽器內(nèi)核覆醇，給我們前端帶來了相當(dāng)大的工作量朵纷。有人會(huì)問，為什么不把這些全部放到一個(gè)文件里面永脓。
這就是第二個(gè)原因：減少頁面的加載量柴罐，從而達(dá)到對網(wǎng)站的優(yōu)化效果。
另外要講的就是文件引用順序和位置的問題了憨奸，我習(xí)慣于將樣式文件放在head里面然后將js按照順序放在頁面結(jié)尾的時(shí)候引入，也是為了優(yōu)化頁面的打開速度凿试，從而使用戶體驗(yàn)得到提升排宰。
part：2
js選擇器分兩塊，一部分是原生態(tài)的js那婉，另外一塊是jquery（zepto）
原生的js
從最常用的東西開始講解：
我們想要在頁面加載完成之后執(zhí)行一些方法板甘，使用原生的js應(yīng)該怎么寫呢？這里包括兩個(gè)部分详炬，一個(gè)是方法本身盐类，另外一個(gè)是調(diào)用。
如圖：
在加載完成之后調(diào)用：
選擇器：
document.getElementsByClassName("");
document.getElementById("");
document.getElementsByName("");
document.getElementsByTagName("");
講到這里呛谜，大家會(huì)發(fā)現(xiàn)我們要寫很長的代碼實(shí)現(xiàn)選中一個(gè)DOM元素在跳，后面很多方法也是如此，它的選擇器很長隐岛，方法名也是很長猫妙，所以就有了jquery，還有zepto等js的出現(xiàn)價(jià)值聚凹，
