前端筆記
軟件架構的分類：B/S、C/S
web開發中的資源：靜態資源、動態資源
一、html：搭建網頁框架
1.概念：超文本標記語言
2.標簽：
（1）文件標簽
<!DOCTYPE html> <html> <head> --> <title>、<meta charset="utf-8"> <body>
（2）文本標簽
<h1>~<h6> <p> <br /> <hr /> <b> <i> <font> <center>
color:1.寫英文 2.rgb(num,num,num) 3.#XXXXXX
width:1.寫數字 3.寫百分數
（3）圖片標簽
<img src="路徑" width="圖片寬度" height="圖片高度" alt="加載失敗的提示文字"/>
（4）列表標簽
<ul type=""><li></li></ul>
<ol type=""><li></li></ol>
（5）鏈接標簽
<a href="跳轉URL" target="打開鏈接的方式"></a>
（6）塊標簽
<div>:每一個div占一整行。塊級標簽
<span>:在一行內顯示。 內聯標簽 行內標簽
（7）語義化標簽
<header> <footer>
（8）表格標簽
<table>屬性：width，border，cellspacing（表格之間的距離）,cellpadding(內容和單元格的舉例)
bgcolor,align
<tr>屬性：bgcolor,align
<td>屬性：rowspan,colspan
<th> <caption> <thead> <tbody> <tfoot>
（9）表單標簽
<form> action:提交的路徑 method:提交的方式
<input> type=text,password,radio,checkbox,file,hidden,submit,button,image,date,color,num,email
<select><option></option></select>
<textarea></textarea>
二、css：美化網頁
1.概念：層疊樣式表
2.格式：
選擇器{
屬性名:屬性值;
}
3.選擇器：
id選擇器：#id名{}
類選擇器：.類名{}
元素選擇器：標簽名{}
選擇所有元素：*{}
並集選擇器：選擇器1,選擇器2{}
交集選擇器：選擇器1選擇器2{}
子類選擇器：選擇器1 選擇器2{}
父類選擇器：選擇器1>選擇器2{}
屬性選擇器：元素名[屬性名="屬性值"]{}
偽類選擇器：選擇器:狀態{}
link:初始狀態
visited:訪問過
hover:鼠標懸浮
active:正在點擊
4.屬性：
font-size:字體大小
color：顏色
text-align:對其方式
line-height:行高
background:背景
border:邊框
width,height:
5.盒模型：margin：外邊距 padding：內邊距
6.浮動：作用：把塊級元素排在同一排
三、JavaScript：給網頁加特效
1.一門客戶端腳本語言。
2.兩種和HTML結合的方式：內部JS,外部JS
3.註釋： // /* */
4.原始數據類型：number string boolean null undefined
5.變量：JAVA是強類型的，JS是弱類型的。
6.運算符：
（1）一元運算符 ++ -- +
把其他類型轉化為number：
string:按照字面值，如果字面值不是數字，則轉為NaN。
boolean:true為1，false為0
null 和 undefined：NaN
（2）算數運算符 賦值運算符 三元運算符
（3）比較運算符 ==和===的區別:==只比較值，===比較數據類型和值。
（4）邏輯運算符
把其他類型轉化為boolean：
number：非0為true，0或NaN為false
string：非空為true
null undefined：false
對象:true
7.流程控制語句
switch：case可以接收任意的類型。
8.JS特殊語法：
加var定義變量是局部變量，不加是全局變量。
9.對象：
（1）Function
var fun = new Function(參數列表，方法體)
function 方法名(參數){方法體}
var 方法名 = function(參數){方法體}
屬性:length:形參個數
特點：不定義參數類型和返回值，如果方法名一樣，會覆蓋，方法調用只與名稱有關，與參數無關。如果定義
名稱一樣的方法會覆蓋。
方法內部有一個隱藏的arguments對象，代表實參數組。
（2）Array
var arr = new Array(元素列表)
var arr = new Array(默認長度)
var arr = [元素列表]
屬性:length 代表數組長度
方法:join() push()
特點：長度和元素類型都是可變的。
（3）Date Math
（4）RegExp:正則表達式對象
A.正則表達式，定義字符串的組成規則。
[]:單個字符
\d:單個數字
\w:單個字母或數字
?：出現0或1次
+：出現至少一次
*：出現0次或多次
{m,n}表示出現m到n次
^：開始字符
$：結束字符
B.var reg = new RegExp("正則表達式");
var reg = /正則表達式/;
C.reg.test(字符串)
（5）Global：全局對象，不需要對象可以直接使用。
encodeURL:編碼
decodeURL:解碼
encodeURLComponet:編碼(包括特殊符號)
decodeURLComponet:解碼(包括特殊符號)
parseInt()
isNaN()
eval()
BOM:
(1)document.getElementById("id名");
(2)元素.onclick = function對象;
(3)Window:可以直接調用
alert()
confirm()
prompt()
open()：參數可選，打開的URL，返回值是新打開的窗口對象。
close()：誰調用，關誰。
setTimeout(方法對象,毫秒)：返回值是一個定時器對象
clearTimeout(定時器對象)
setInterval(方法對象,毫秒)：返回值是一個定時器對象
clearInterval(定時器對象)
window的屬性:location,history,document
（4）Location:地址欄對象
方法:location.reload()
屬性:location.href
（5）History:歷史記錄對象
屬性:length
方法:forword() back() go()
DOM:文檔對象模型
1.核心DOM
（1）document：文檔對象
getElementById()
getElementsByTagName()
getElementsByClassName()
getElementsByName()
createElement()
createTextNode()
（2）element：元素對象
setAttribute("屬性名","屬性值")
removeAttribute("屬性名")
（3）node：節點對象（其他所有dom對象的父類對象）
appendChild():添加子節點
removeChild():刪除子節點
parentNode:父節點
2.HTML DOM：
A.可以直接通過 元素對象.屬性 修改元素的屬性值
（1）元素對象.innerHTML:修改標簽體內容
（2）元素對象.style.css屬性:修改樣式
（3）元素對象.className:修改類屬性
B.事件
onclick()
ondblClick()
onmouseover()
onmouseout()
onload()
onblur():失去焦點
onfocus()：獲得焦點
onsubmit():
onchange():
四、Bootstrap：一個前端框架
1.使用：
（1）下載bootstrap
（2）將三個文件夾復制到我們的項目中
（3）創建html文件，引入必要的靜態資源。（bootstrap.css/jquery.js/bootstrap.js）
2.功能：
（1）柵格系統：響應式布局。
容器:container/container-fluid
行:row
格:col-設備代號-格子數目
（設備向上兼容，向下占滿12格）
（2）利用他的樣式和組件。
按鈕/圖片/表格/表單/導航條/分頁條/輪播圖
前端筆記