前端三劍客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
在不刷新整個網頁的情況下,刷新頁面局部內容

前端三劍客HTML+CSS+JavaScript