前端需要學什么？
HTML5、CSS3、JavaScript
集成開發環境
IDE（編寫和運行）
前段開發環境
-
編寫環境：
-
高手（記事本）
-
企業（Sublime、Webstorm、DW、Brackets）
-
-
運行環境：
- 瀏覽器（Chrome）
學完后能做什么？
進行頁面開發
互聯網項目流程
-
設計
-
開發（前端開發 后端開發）
-
測試
-
實施
-
運營與維護
一. HTML
Hyper Text Markup Language：超文本標記語言
1.1 標簽
描述意思、屬性、特征
1.2 網頁做好給誰看
瀏覽器、搜索引擎、用戶、W3C
1.3 API
API = 說明書 = 參考手冊 = 應用接口
1.4 聞道有先后，術業有專攻
1.5 HTML的語法
-
<標簽>（單項標簽）
-
<標簽>定義的內容</標簽>
-
<標簽 屬性="屬性值" 屬性="屬性值">
-
<標簽 屬性="屬性值" 屬性="屬性值">定義的內容</標簽>
1.6 我們要掌握哪些標簽？(網頁元素)
-
文本：
h1-h6 p br b i u strong em ul li ol li dl dt:術語 dd:說明 -
圖片/img（image）：
src alt width height... -
鏈接 a：
href target title -
音頻、視頻、動畫、Div、表格、框架（QQ郵箱）、表單、表單元素
1.7 前端學習網站
1.8 前端理解幫助
-
網頁 = 人
-
HTML = 身體結構
-
CSS（層疊 樣式 表） = 表現、衣服（JSP）
-
JavaScript = 行為、思想
1.9 空格 字符實體 對應代碼：  大於號 對應代碼：>
1.10 經典前端個人網站
1.11 顏色值的表示方式
-
關鍵字表示法
-
16進制表示法
-
#RRGGBB
-
RGB(R,G,B) R：0-255 G：0-255 B：0-255(不適用HTML的顏色值，與瀏覽器有關）
-
RGBA表示法：(不適用HTML的顏色值，與瀏覽器有關）R：0-255 G：0-255 B：0-255 A：0-1(表示顏色的不透明度)
1.12 網頁分類
-
靜態網頁：.htm .html
-
動態網頁：.asp .aspx .php .jsp ...(代表服務器)
1.13 表單元素
-
單行文本字段：
input type="text" size="" value="" maxlength="" name="" -
密碼字段：
input type="password" size="" value="" maxlength="" name="" -
單選按鈕：
input="radio" name="" checked="checked" value="" id="" label for="" -
復選按鈕：
input type="checkbox" name="" checked value="" id label for="" -
多行文本字段：
textarea cols="" rows="" name="" id="" -
列表/菜單：
select: name="" id="" size="" option: value:""
1.14 HTML5頭文件標准申明
<!doctype html>
1.15 HTML申明瀏覽器解析網頁的默認編碼
HTML5：<meta charset="UTF-8">
HTML4：<meta http-equiv="Content-Type" content="text/html;charset="UTF-8">
1.16 HTML引入外部樣式
HTML5：<link rel="stylesheet" href="xxx/xxx.css"/>
HTML4：<link rel"stylesheet" type="text/css" href="xxx/xxx.css"/>
1.17 HTML5新增的語義化標簽
語義化標簽：標簽賦予了特定的意義的標簽
-
header頭部 -
footer尾部 -
aside側邊欄 -
main主體 -
nav導航欄 -
article文章 -
section段落 -
figuer圖片或者視頻等 -
figcaption圖片或者視頻的標題
1.18 文本陰影
text-shadow:5px 5px 20px #000000 （參數：水平偏移 垂直偏移 陰影大小 顏色****）
1.19 轉換（transform）
transform:translate(50px,50px); 定義 2D 轉換
二. CSS
Cascading Style Sheets：層疊樣式表
2.1 CSS的語法
-
選擇器/符：{屬性：屬性值；}
-
選擇器：尋找一個容器（標簽 = 容器 = 盒子）
-
盒子的種類
-
長盒子（display:block;）
-
短盒子（display:inline）
-
不長不短盒子（display:inline-block）：並列占一行
-
2.1.1 盒子注意事項
-
短盒子（行元素）不能直接設置寬高
-
盒子類型可以互相轉換
-
長盒子（塊元素）默認寬：自適應父級的寬；默認高：自適應內容的高；
短盒子（行元素）默認寬：自適應內容的寬；默認高：自適應內容的高；
不長不短盒子（行塊元素）默認寬：就是默認值；默認高：就是默認值；
2.1.2 盒子的重要屬性一（margin）
- margin邊界（邊距 外補丁）
- 不是所有的盒子都有四個方向的margin
- 短盒子默認只有左右margin
- 有些盒子是有默認的margin值
2.1.3 margin注意事項
-
margin可能會轉移給父級
-
解決方案1：給父級加一個邊框；
-
解決方案2：給父級加一個overflow：auto；
-
-
margin可以取負值
margin:value; value代表四個值；
margin：上 - 右 - 下 - 左；
margin：上下 - 左右；
margin：上 - 左右 - 下
2.1.3 盒子的重要屬性二（padding）
- padding填充（內邊距 內補丁)
-
短盒子可以添加四個方向的padding
-
有些盒子是有默認的padding值
-
padding不可以取負值
-
2.1.4 選擇器
-
找一個盒子
-
找很多個盒子
-
找同類的很多個或者一個盒子
-
找不同類的很多個盒子
-
找同類的特定多個或者一個盒子
-
找不同類的特定多個盒子
-
找盒子的某個狀態
2.1.5 選擇器的種類
-
標簽名選擇器（類型選擇器）
- 比如：
a｛｝b｛｝找同類的很多個盒子或者一個
- 比如：
-
class選擇器（類選擇器）
- 比如：
.bt｛｝.qq｛｝找同類的很多個盒子或者一個 找不同類的很多個
- 比如：
-
ID選擇器
- 比如：
#box1#box2#box3找一個盒子
- 比如：
-
偽類選擇器
- 比如：狀態｛｝找盒子的某個狀態：
:hover:active:focus:target
- 比如：狀態｛｝找盒子的某個狀態：
-
偽元素
-
偽元素：
::first-line::first-letter::after::before -
專屬a鏈接元素的偽類：
::link::visited -
匹配第N個子元素：
：nth-child(odd奇數 even偶數)：first-child:last-child
-
2.1.6 盒子的重要屬性之三（border）
-
border-weidth:粗細值；border-color：顏色值；border-style：形狀值； -
border-left-width：左邊框粗細值；border-left-color：左邊框顏色值；border-left-style：左邊框形狀值；
2.1.7 下面的選擇器是用上面的選擇器進行組合
-
后代選擇器用
空格組合，比如：.nav a{}div p a{}.nav p a{}#box .nav p a{}.nav a:hover b{}
-
子選擇器用
>組合，比如：.nav>a{}div>p>a{}.nav>p>a{} -
兄弟選擇器
+：相鄰兄弟(從上往下找，只能找到一個)~：不相鄰兄弟
-
通用選擇器
div *{}（星號*）
-
並列選擇器
p,span{}
2.1.8 屬性選擇器（class可以有多個值）
2.1.9 盒子的常用屬性介紹
- display
- margin
- padding
- border
- widh（盒子的內容寬）
- height（盒子的內容高）
- position
- float
- overflow
- border-radius
- background
- text-indent(文字縮進)
- text-align
- line-height
2.2.0 兩種盒模型
-
box-sizing:congtent-box; 默認盒模型
-
box-sizing:border-box; IE盒模型
2.2.1 Position 定位
-
相對定位：
position:relative;-
參照物：自身四個角初始位置
-
會覆蓋下面的元素
-
沒有脫離文檔流
-
-
絕對定位：
position:absolute -
固定定位：
position:fixed -
靜止：
position:static
絕對定位：position:absolute
-
參照物：父級沒有定位時，瀏覽器打開時可視區第一屏四個角；父級有定位時（相對定位），父級的四個角
-
會覆蓋下面的元素（下面的盒子會自動上來）
-
脫離文檔流
-
在沒有設置寬高前和內容一樣寬高
-
父級盒子的高不受絕對定位子級盒子的高影響
float:left/right/none/inherit
-
飄起來了
-
下面的盒子會上來
-
浮動的盒子只遮擋下面上來盒子的格局不遮擋內容
-
父級的高不受浮動子元素的高影響
如何解決？
-
給父級增加一個
overflow:hidden -
浮動的元素在沒設寬高前和內容一樣寬高
-
浮動沒有脫離文檔流
-
浮動后盒子會自動轉換為
display:block
2.2.2 首頁命名
-
index（索引頁）
-
default
-
iisstrat
2.2.3 沖突：！important > 行間樣式 > ID > Class > 標簽（Tag）
2.2.4 CSS動畫
-
變形：tranform
-
過度：transition
- 過度的屬性 過度的時間 過度調速函數 延遲時間 過度的屬性 過度的時間 過度調速函數 延遲時間...
：all（過度的時間調速函數）
- 過度的屬性 過度的時間 過度調速函數 延遲時間 過度的屬性 過度的時間 過度調速函數 延遲時間...
-
動畫：animation
- 創建多個關鍵幀
什么是動畫？
-
物體的屬性在一定的時間內發生變化
-
視覺暫留 - 大腦 - 幀 - frame
動畫產生的要素
-
時間
-
屬性變化
-
指令
text-shadow 取0四個方向都有陰影
box-shadow: inset x-offset y-offset blur-radius spred color,inset x-offset y-offset blur-radius spred color;
布局的實現
-
基於正常文檔流布局
-
基於浮動的布局
-
基於定位的布局
-
改變盒子類型
-
流式布局
-
彈性布局
- 字號：
-
現代瀏覽器默認字號都是16px
-
chrome中最小號字為12px
-
rm和rem是絕對值（r=root）
-
em的參照物是盒子自身定義的字號
-
- 字號：
-
響應式布局
-
媒體查詢（語法）
-
設置比例
-
響應布局
-
圖片響應
-
-
聖杯布局
-
瀑布流布局
-
bootstrap
三. JS
JavaScript（簡稱“JS”） 是一種具有函數優先的輕量級，解釋型或即時編譯型的編程語言。
3.1 JS在WEB開發中的作用？
-
變動結構層
-
修改表層
-
給網頁注入思想
-
解決HTML代碼兼容和CSS代碼兼容
3.2 JS學習提綱
-
ECMAScript：變量（閉包） 數據類型 運算符 語句 數組 函數 對象（事件）
-
DOM編程：document object model(文檔 對象 模型) (對象 = 屬性 + 方法 + 事件) （行為 = 動作 + 事件）
-
BOM編程：browser object model(瀏覽器 對象 模型)
3.3 標簽script（腳本）
寫程序 寫文章 語法
isNaN(oTxt1.value)
3.4 數據類型
-
number
-
string
-
boolean
-
undefined
-
function
-
object
3.5 數據類型的轉換
-
顯示轉換
-
隱示轉換
3.6 取消鏈接的默認行為
-
給鏈接的
href屬性值填寫javascript： -
給鏈接的點擊事件屬性返回false值
3.7 順序結構的語句
分支結構語句
單分支：
if(條件)｛
｝
雙分支：
｝else｛
｝
if (條件) ｛
｝else if() ｛
｝
3.7 函數
-
內置函數
-
自定義函數
-
功能或作用
-
參數個數以及數據類型
-
返回值
-
3.8 JS學習網站
3.9 JavaSrcipt動態效果
DOM（Document Object Model）文檔對象模型
-
document.getElentById("id")
-
document.getElentByName("name")
-
document.getElentByTagName("id")
-
document.getElentByClass("id")
3.10 把HTML頁面看成一棵樹
樹上的每一個元素都是一個節點（node）
獲取節點的樣式：node.style.width
改變節點的樣式：node.style.width=""
3.11 樹上的所有節點（childnNodes）
父節點：parentNode
第一個子節點：firstChild
最后一個子節點：lastChild
3.12 動態創建節點
創建節點：document.createElement("標簽名")；
追加結點：appendChild();
刪除節點：removeChild();
3.13 動態表格
創建一行，返回一個tr：insertRow()
創建一列，返回一個td：insertCell()
刪除行：deleteRow
3.14 行塊轉換
塊級行級轉換：float:left | right
塊級轉換行級：display:inline
行級轉換塊級：display:block
3.15 賦值
=：賦值，比如：var a = 10
==：比較內容
===：完全相等，比較內容與數據類型
四. jQuery
jQuery是一個快速、簡潔的JavaScript框架
宗旨：寫的小，做的多
特點：
-
具有強大的選擇器
-
出色的DOM操作
-
具有良好的兼容性
4.1 jQuery的版本
-
jQuery-1.4.2.js
jQuery-1.10.1.js
最小的代碼做最多的事情，具有良好的兼容性 -
jQuery-2...js
不具有兼容性 需要高版本瀏覽器的支持
4.2 軟件版本的命名
軟件名稱[- _].大版本號.次版本號.小版本號
大版本號：一般是軟件發生了大的改變；比如：系統架構的變更、功能的重大變化
次版本號：新加功能或者原來的功能進行優化
4.3 軟件版本
版本后
@ （內測版本）
B （內部測試通過；修復了大部分的BUG）
R （最終版本；內、外都已經測試通過了的版本）
4.4 怎么使用jQuery？
需要在使用jQuery的頁面引入<script type="text/javascript" src="jQuery/jquery-1.4.2.js"></script>
window.onload：在頁面所有元素加載完成后觸發，只能執行一次$(document).ready(function(){});
4.5 事件
JavaScript事件：onclick ondblclick onmouseover
4.6 出色的DOM操作
$("#id").text();取元素內容過濾HTML標簽$("#id").text("新的內容");改變內容$("#id").html();取元素內容包含HTML標簽$("#id").html("新的html代碼");改變內容$("#id").val();文本輸入框、選擇框獲取值$("#id").val("新的值");改變值$("#id").css({"樣式":"值"，......})；改變樣式append()追加元素jQuery對象.get(0)獲取元素