前端三劍客HTML+CSS+JavaScript

HTML(超文字標記語言)負責網頁的結構
CSS(層疊樣式表)負責網頁的樣式(比如顏色/字型/邊框等屬性設定)
JavaScript(指令碼語言)負責網頁的行為(點選/輸入輸出/滾動等等)

HTML部分:

html文件結構:整個html文件一般都包括header/body兩部分: header頭部標籤主要包含html的描述性內容:
title標籤是網頁在瀏覽器標籤欄上顯示的標題
meta標籤是網頁的原資訊
link標籤用來連結其他內容,引用外部css樣式,就是通過link標籤
script標籤是呼叫js指令碼

body標籤中就是在網頁上展示的內容:
標題標籤: h1~h6 標題大小逐次減小 (標題標籤是為了突出層級關係,所以為了不要只是為了調節文字大小而使用標題標籤)
段落標籤: p
文字修飾標籤:加粗<b> 斜體<i> 下劃線<u> 刪除線<s> 上標<sup> 下標<sub> 強調斜體<em> 強烈強調<strong>
列表標籤:
ol有序列表:type屬性 表示標籤標記型別 A大寫字母 a小寫字母 1數字 I大寫羅馬數字 i小寫羅馬數字
ul無序列表:type屬性 disc實心圓 circle環形 square實心矩形 none不顯示標記
<li>是列表元素
超連結標籤a:
target屬性:預設為_block,在新視窗開啟連結;_self是在當前視窗開啟連結
href屬性:指向的目標可以為檔案,則連結動作為下載檔案;指向目標是連結,跳轉連結;可以指定當前頁面中的元素id(#id),跳轉到指定元素的位置;如果不寫,預設跳轉到當前的頁面;也可以指向一個js指令碼;如果希望點選這個按鈕不觸發任何動作可以用"javascript:;"的js程式碼來阻止標籤動作;
盒子標籤div 圖片標籤img
其他標籤:br 換行 hr分割線 特殊符號 比如空格&nbsp;

表格標籤table

表單標籤form:
action屬性:定義表單提交時傳送到伺服器的地址
method屬性:定義提交方式,get明文提交顯示在位址列中(大小限制為2KB),post密文提交,不顯示在位址列中
enctype屬性:限制表單提交的資料型別只允許普通字元,允許普通字元/特殊字元,允許檔案被上傳;如果上傳檔案method必須為post;

表單控制元件:
textarea文字域:允許使用者輸入多行文字;cols屬性設定列數,rows屬性設行數;
select選擇選單:當size為1顯示為下拉選擇框,當size大於1顯示為選擇框;
input控制元件:
type:
text屬性:明文文字;
password屬性:密文文字;
radio屬性:單選框 checkbox複選框;
file屬性:檔案上傳
submit屬性:提交表單的按鈕
button普通按鈕

value:提交給伺服器的資料;
name:控制元件名;
disabled:不可用屬性;
lable關聯表單元素:點選該文字如同點選關聯元素一樣;

標籤分類:塊級元素/行內元素/行內塊元素
塊級元素:可以設定寬高,不設定預設為父級元素的100%大小,獨佔一行,(後面的元素同樣換行)主要有div p h1~h6 table form ol ul li等
行內元素:在一行內顯示,不能設定寬高,主要有span a 標籤
行內塊元素:也屬於行內元素,可以設定寬高 img input;

css部分:
css的引入方式:
內嵌式:直接在標籤內寫 <p style: "color:red;">
內聯式:在header內寫 <style type: 'text/css'> .box{font-size:14px;}</style>
外聯式:連結外部css <link rel= 'stylesheet' type= 'text/css' href= './css/index.css'>
匯入式: @import url('./css/index.css')

選擇器:
基本選擇器:
* 萬用字元選擇器 選擇所有標籤元素(不建議使用)
#box id選擇器 選擇指定id的標籤元素
div 標籤選擇器 選擇指定標籤的標籤元素
.active 類選擇器 選擇指定類的標籤元素

高階選擇器(組合選擇器):
子代選擇器: ul>li 只選擇兒子元素
後代選擇器: div a 選擇父代元素之後的所有後代
相鄰選擇器: li+a 選擇緊貼li的下一個a
弟弟選擇器: li~a 選擇li之後的所有兄弟元素a
分組選擇器: li,p 選擇多個元素型別
選擇器權重問題:
內聯(1000)>id(100)>類(10)>標籤(1)
屬性選擇器:
選擇有相同屬性的元素
偽類選擇器:
a:link a在未訪問的樣式
偽元素選擇器:
E:before

font相關:
font-style字型風格:
正常字型:normal 斜體:italic 傾斜字型:oblique
font-weight 字重:
normal bold bolder lighter 整百數(100-900)
font-size 字型大小:
font-family 字型集:
指定文字使用一系列的字型,優先順序由高到低

color相關:
顏色表示的四種方式:
顏色名: red green yellow lightgray
十六進位制:#ccc #rr #5c5c5c #f80
rgb: rgb(255,254,253)
rgba: rgb(255,254,253,0.5)

text相關:
text-align文字對齊:
left左對齊
right右對齊
center中間對齊
justify 兩端對齊(只適用於英文)
text-indent文字縮排:
建議用em為單位(字元單位)
text-decoration 文字修飾:
none無修飾
underline下劃線
overline上劃線
line-through 刪除線
line-height 行高:
指定行高,設定行高等於文字盒子高度,可以使文字垂直居中

background相關:
background-image 背景圖
background-position:調整背景圖位置(使用精靈圖)
background-repeat:平鋪設定
repeat 橫縱平鋪
repeat-x 橫向平鋪
repeat-y 縱向平鋪
no-repeat 不平鋪
background-attachment:固定方式 scroll fixed
background-color:背景顏色 預設為透明 transparent

盒模型:
width height border邊框 padding內邊距 margin外邊距

浮動相關:
float:left左浮動 right右浮動 none預設不浮動
浮動特性:
脫離標準流
都可以設定寬高
提升層級
並排顯示,浮動的元素會相互貼靠
貼邊現象
字圍效果

浮動帶來的問題:
一般父盒子不設定寬高,全靠子元素撐起來,但是使用浮動後父盒子就沒有高度了
因此需要清除浮動

消除浮動帶來的問題:
給父盒子設定高度:
不靈活不推薦,一般用於導航欄之類的固定高度的盒子
clear:both:
在浮動元素之後加一個空盒子,並給盒子追加clear:both屬性,使其不浮動,用這個不浮動的空盒子填充父盒子.結構冗餘

偽元素清除法:
給父級元素新增clearfix類
在給父元素設定樣式:
.clearfix:after{
content:'';
clear:both;
display:block;
}
overflow:hidden
給父盒子設定overflow:hidden屬性


定位相關:
分為:不定位static/相對定位relative/絕對定位absolute/固定定位fixed
相對定位relative:
相對於自己原來位置的定位:
特點:不脫離標準流/形影分離/佔據原位置
用途:微調元素

絕對定位absolute:
脫離標準流 ,提高層級, 不區分塊和行內
如果沒有父盒子相對定位,以頁面左上角為基準;如果父元素有相對定位,則以父盒子為基準定位

固定定位fixed:
以頁面為基準固定定位

z-index屬性:
給元素設定優先順序
特點:同級後來居上,有定位的元素z-index才能生效,從父現象(父盒子優先)

javascript部分:
引入方式:
內接式/外接式
ECMA5基礎語法:
資料型別:
數字 字串 布林值 null空物件 undefined未定義變數
引用資料型別:
function函式 object物件 array陣列

流程控制:
if if-else if-else if-else 邏輯與&& 邏輯或|| switch-case while do-while for

內建物件:
陣列array: concat合併分組 join插入分隔字元 pop彈出最後一個元素 shift移除第一個元素 unshift插入一個元素到陣列第一個位置,返回新的長度 slice切片 push壓入最後一元素 sort排序 reverse反轉 length返回陣列長度

DOM:
文件物件模型
獲取文件物件的三種方式:
document.getElementById() 根據id獲取文件物件
document.getElementByClassName() 根據類名獲取文件物件
document.getElementByTagName() 根據標籤名獲取文件物件

事件三要素:
事件源 事件 事件驅動

js的事件:
onclick單擊 ondblclick雙擊 onkeyup/onkeydown 鍵盤彈起/按下 onchange 文字/選單發生改變時 onfocus獲得焦點 onblur失去焦點 onmouseover 滑鼠懸浮 onmouseout滑鼠移除 onload 網頁文件載入 onunload關閉網頁時 onsubmit提交表單時 onreset重置表單時
js入口函式:
window.onload() 在網頁載入完成後(包括圖片和文件) 觸發onload() 函式

js和html文件是同時載入的,設定onload不會報錯

問題 圖片資源載入失敗,js就不會生效

樣式的操作 : Object.style.marginLeft = '30px';

值的操作: innerText 文字內容 innerHTML 文件內容 value (表單控制元件)

屬性操作:
getAttribute()獲取屬性 removeAttribute()移除屬性
setAttribute()/Object.attr = '' 設定屬性

DOM物件的建立/增加/刪除
document.createElement() 建立
Object.appendChild() 加子節點
Object.insertChild(要插入的節點,參考節點) 把要插入的節點插入到參考節點之前
Object.removeChild() 刪除子節點
object.parentNode.removeChild(Object) 刪除自己

client/offset偏移量(與父相子絕有關)/scroll

定時器:
setTimeOut(func,200) 一次性定時器,在延時後執行func
setInterval(func,200) 迴圈定時器,週期執行func

jQuery部分
jQuery是js的一個庫

入口程式:$(document).ready(function(){}) 簡寫$(function(){})
與js的入口程式的區別
js是整個文件資源(包括圖片)載入完成之後才執行 而jQuery的入口程式是在DOM結構繪製完成就執行

js物件與jQuery物件相互轉化:
jQuery物件 = $(js物件)
jQuery物件[0] = js物件

jQuery選擇器:
基本選擇器: id 類 標籤

層級(組合)選擇器: 後代(空格) 子代(>)

基本過濾選擇器:
:eq 獲取指定索引物件
:odd 獲取奇數索引物件
:even 獲取偶數索引物件
:gt(3)/lt(3) 獲取索引大於/(小於) 3的物件
:first/last

屬性選擇器:
含有指定屬性/指定屬性為指定值/正則匹配

篩選選擇器:
find:後代選擇 所有後代
children:子代選擇
siblings:兄弟選擇(不包括自己,用於互斥按鈕)
parent:父級選擇
eq:索引選擇

動畫效果:
顯示隱藏:
show顯示/hide隱藏 開關式顯示隱藏toggle

淡入淡出:
fadeIn/fadeOut fadeToggle

捲簾效果:
slideUp/slideDown slideToggle

停止動畫:
stop

自定義動畫:
animate({最終樣式},速度,回撥函式)

值的操作:
html:操作html文件 獲取/設定
text:操作文字內容 獲取/設定
val:針對有value屬性的物件,比如input

屬性操作:
attr(key)獲取屬性
attr(key,value) 設定單個屬性
attr({key:value,key:value}) 設定多個屬性
removeAttr()刪除屬性

prop()操作元素集的第一個dom物件的屬性
removeProp

addClass removeClass toggleClass

DOM操作:
父子之間:
插入到父級元素最後 父.append(子) 子.appendTo(父)
插入到父級元素第一位 父.prepend(子) ...
兄弟之間:
插入到目標兄弟元素之後 目標物件.after(待插入物件) 待插入物件.insertAfter(目標物件)
之前 before insertBefore

刪除操作:
remove detach(刪除節點事件保留) empty(置空,刪除所有子元素)

位置資訊:
width height innerHeight innerWidth(內部寬高) outerHeight outerWidth(外部寬高) scrollTop scrollLeft(元素相對於滾動條捲起的寬高) position (元素相對於父級元素的偏移量) offset(元素相對於當前視口的偏移量)

jquery事件:
三個階段 :事件捕獲 處於目標階段 事件冒泡階段
冒泡導致邏輯不正確,阻止冒泡的兩種方法:
E.stopPropagation()阻止冒泡 E.preventDefault() 阻止預設行為

滑鼠事件:
單擊 click 雙擊 dbclick mousedown mouseup mousemove mouseover/out進入離開目標元素和目標的子元素時觸發 mouseenter/leave focus/blur keydown/up

表單事件:
change 表單元素髮生變化時 select 文字元素髮生變化 submit表單元素髮生變化


ajax技術:
非同步JavaScript和XML
在不重新整理整個網頁的情況下,重新整理頁面區域性內容