前端總結

時間 2019-11-09

標籤前端總結简体版

原文原文鏈接

HTMLcss

<!doctype> #規定文檔類型html

java

轉義字符以&；包裹 #在&；中間單詞簡寫，詳情查看8-1數組

<head> 頭標籤瀏覽器

<body> 體標籤架構

<html> 根標籤，全局的屬性寫在這裏，標籤種類等詳情查看8-3函數

<div> 用來搭建頁面結構的標籤佈局

width: 200px # 標籤的寬字體

height: 200px # 標籤的高動畫

border-radius: 50%; #邊框圓角設置

background-color: blue; #標籤的底色設置

border: 1px solid black; # broder邊框，1px就是1像素，solid就是實線，black就是定義邊框的顏色

color: hotpink; #字體顏色

font-size: 30px; # 字體大小

transition: 1s 1s all linear; # 就是動畫效果過渡效果,1s 1s過渡效果展開的時間和延遲時間,延遲時間通常不會寫，用戶體驗度很差,動畫屬性默認all,渡曲線linear（線性）

.box:hover{} # hover給鼠標添加懸停效果

cursor:pointer; # 鼠標樣式

list-style: none; # 清除列表樣式

text-decoration: none; # 清除字體下劃線

margin: 0; # 清除盒模型的margin屬性

padding: 0; # 清除盒模型的padding屬性

margin-top: 100px; # 設置外邊距頂部

margin-left: 100px; # 設置外邊距左邊

border: 1px solid black; # 設置邊框區間，solid就是邊框樣式實線和虛線，

margin: 100px 0 0 200px; # margin四個參數上下左右，用來設置整個標籤在頁面的什麼位置

padding: 10px 20px 30px 40px; # pading四個參數上下左右，用來設置padding區域在色塊區域的位置

float: left; # 設置浮動佈局，左浮動

margin-right: auto; #設置外邊距右邊的屬性爲自動

calc(-155px - 157px) # clac函數是在html頁面中作計算的，括號中必定要用空格分開

background-position-y:-48px; # 用來定位圖像，這句是定位y軸

position: relative; # 就是相對定位

position: absolute; # 絕對定位

z-index: 66; # 定位佈局中，能夠用這個設定顯示的層級，以數字的大小來獲取顯示優先級

position: fixed; # 固定定位，就是窗口上下拖動，這個窗口不會被拖動，通常網頁的懸浮廣告原理

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

css

選擇器：head標籤的後面寫一個style，在style標籤下，將須要控制的標籤的類名或者id名寫在這個標籤下，後的{}就是做用域，做用域內寫的參數就是樣式塊，這樣一個組合能夠達到控制html的樣式，這就是選擇器

css樣式引入的方式

行間式：直接將css的樣式寫在標籤的style屬性中

內聯式：在head標籤下寫style標籤，在style標籤內寫樣式塊

外聯式：在html文件內寫好選擇器和樣式塊，經過link標籤導入

PS：<link rel="stylesheet" href="./css/index.css">

普通選擇器

一、標籤選擇器 | 語法：div{}

二、通配選擇器 | 語法： *{}

三、class選擇器(類選擇器) | 語法： .class{]

四、id選擇器 | 語法： #box

五、！import選擇器 | 語法： div{">!important;}

PS：這個語法比較特殊，在語句的值和結束符中間寫

優先級！import > 行間式 > id > class> 標籤 > 通配

高級選擇器

羣組選擇器

div,p,h1{ } # 同時選中div標籤下的幾個類名的標籤作控制

後代選擇器（使用率最高），有兩種寫法空格和 >

空格寫法 .sup .sub{}

PS：.sup能夠爲.sub的父親，也能夠爲父輩

>號寫法

.sup > .sub{}

PS：.sup只能爲.sub的父親

兄弟選擇器，有兩種寫法 ~ 和 +

~ 寫法 .div1 ~　.div2{}

PS：.div2在.div1下的兄弟，.div1是修飾詞，.div1與.div2之間能夠有其餘兄弟，能夠直接定位到其餘兄弟

+寫法 .div1 + .div2{}

PS:.div2在.div1下的兄弟，.div1是修飾詞，.div1與.div2之間不能夠有其餘兄弟，能夠直接定位到其餘兄弟

交叉選擇器

h2.hd{}

PS：是h2標籤且有一個class名爲hd

多類名選擇器

.h.h61{}

PS：有一個標籤有多個類名

僞類選擇器的語法：選擇器類型：語法（數字） #詳情見8-8

class-name:nth-child(number){}

PS：僞類選擇器是從頁面結構開始查找，number表明結構層，填寫數字便可

僞類選擇器優先級：高於標籤低於id等於class

盒模型

盒模型解析：盒模型就是標籤，標籤顯示存在四個部分

一、最外面是margin ：位置區間（外邊距），就是控制在頁面的位置

二、而後是border ：邊框區間

三、而後是padding ：留白區間（內邊距，就是內容和border之間留白）

四、而後是寬 X 高（content）：內容區間

PS：每個區間不會重疊，都有本身獨立的區域

字體操做

text-align: center; # 改變文本的水平居中方式

line-height: 100px; # 行高

font-weight: 900; # 字重:字越粗越重，越細越輕，範圍100~900的整數

font-size: 30px; # 字體大小

font-family: SimSun-ExtB,Shruti; # 字族 = 字體，能夠寫備用字體，就是字體後面以逗號分隔，再寫一個字體，備用字體通常選用系統默認字體

font: 900 30px/100px "SimSun-ExtB","Shruti" # 以上全部功能的簡寫方式，總體寫法：font: 字重字體大小/行高字族

精靈圖操做

background-image: url("img/bg.png"); # 加載背景圖片

background-repeat: no repeat; # 處理平鋪:repeat-x就是x軸平鋪 | repeate-y就是y軸平鋪 | no repeate就是沒有平鋪

background-size: 100px 200px; # 背景尺寸(這個不經常使用)，會縮放背景圖

background-position: 10px 20px; # 背景定位，往右移10（x軸左右偏移）、往下移20（y軸上下偏移）（-十、20往左移10，往下移20）

background: url("img/bg.png") red no-repeat 10px 20px; # 以上全部功能的簡寫方法:這叫總體賦值

清浮動

這個就是清浮動的寫法，用父類僞類來寫，子浮動,父級開啓清浮動,父級的兄弟顯示區域正常

.sup:after{content: "";display: block;clear: both;}

javaScript

什麼是javaScript

HTML用來作頁面的架構，CSS用來作頁面樣式的佈局

javaScript就是用來完成頁面用戶交互的，JS寫的就是叫腳本

js就是弱語言類型，不一樣類型的時候能夠相互轉換

js寫在script標籤內，script標籤能夠出如今html的任意位置

script標籤通常書寫在body標籤的最底部，但寫在body標籤和html標籤之間，會被解析在body的最底部，全部代碼書寫在該位置也是合理的

PS：html的解析是由上而下的，因此腳本的執行也是根據html標籤的順序執行的

經常使用語句

alert('彈出警告') # alert 會在網頁的上部彈出一個窗口

var 變量名 = 變量值； # var是定義變量的關鍵詞

var m = new Number(100) # new是建立新的對象的關鍵詞

print # 這個功能就是經過瀏覽器調用打印機打印頁面

console.log （xxx） # 在終端打印

// # 這個是js的註釋

! # 是取反的意思

isNaN # 檢查是否是NaN

var n=10; # 定義一個數字類型的變量

var s = 'str' ; # 定義一個字符串類型的變量

var b = true; # 定義一個布爾值類型的變量

console.log(m,typeof (m)) #在終端查看值的類型，查看類型m時候能夠不加括號

var x = Number('123'); # 值類型的轉換,這裏是將字符串123轉換成數字123

var s = '字符串'; # 定義字符串，'' "" 單雙引號均可，js中沒有 ''' '''三引號

var abc; # 定義一個未定義類型

== # 這個是用來判斷值是否相等，這個是作值比較

=== # 判斷本質上是否相等，就是作值與類型比較

var num = 666 + ''; # 數字轉換成字符串

var res1 = '10' + 5; # js中字符串的拼接優先級高於數字運算的加法，因此這裏識別成字符串的拼接

var res2 = '10' - 5; # 這裏有減法，字符串不能作減法，因此字符串10識別成數字作了減法

var res = '888' - 0; #字符串轉換成數字,-0就是表示值不變，字符串不能作減法，因此自動識別成數字作計算，類型也改變了

var ress = +'888'; #字符串轉換成數字的另一種方式，字符串必須是純數字的字符串，不能是數字加字幕的字符串

isNaN（結果） # 判斷轉換的結果是不是非數字類型

res = parseInt('3.1.4abc'); # 將非純數字的字符串轉換成數字類型，這個方法就會從前日後找，找到的第一個數字就是返回值

res = parseFloat('3.1.4abc'); # 將非純數字的字符串轉換成數字類型，這個方法就會從前日後找，找到的第一個小數點後的第一個數字就是返回值

var arr = [1,2,5,3,4]; # 定義數組，js中數組就是列表

console.log(arr[2]); # 數組的查詢 => 索引便可

delete arr[4]; # 數組的索引刪除

delete arr[arr.length - 1]; # 刪除數組中最後一個,arr.length - 1就是最後一個，以此類推-2就就是刪除最後第二個

arr[4] = 100; # 修改數組中索引的值

arr.unshift(123); # 在數組的頭位置增長值

arr.shift(); # 刪除數組頭位置的值

arr.push(888); # 在數組的尾部增長一個值

arr.pop(); # 將數組的尾部的值刪除

arr.splice(1,1,999); # splice能夠完成除了查的全部功能，包含插入。spilce（從什麼索引開始，操做多少位，操做成什麼(這個能夠用逗號添加多個值，若是是空不寫值就是刪除)）（省略第三個參數就是從第幾位開始索引，操做幾個位進行刪除）

newarr = arr.splice(1,2); # slice 切片操做,切片以後數組內的值就沒有了，被切掉了。slice (n,m) 從索引位置n開始截取到索引位置m以前。這裏將切片後的值放入一個新的變量中

var str =arr.join('-'); # 將數組中的值以指定的符號拼接成字符串

narr = str.split('-'); # 字符串對應有一個逆運算,將字符串以指定的符號拆分紅數組，拆分後數組內的值是以字符串形式存在，能夠經過索引修改類型

narr[2] = narr[2] - 0; # 索引數組內指定位置的值改變類型

var dic = {name:'liuxx',age:'100'}; # js沒有字典類型，但能夠經過對象徹底表現字典類型，對象能夠當成字典來使用

console.log(dic.name); # 查找字典中指定的值，對象的調用就是對象加.來調用

console.log(dic['age']); # 查找字典中指定的值，對象中對象中全部的key都是字符串形式，和42的指令是同樣的效果，知識寫法不一樣

dic.sex = 'male'; # 字典的增長

dic.age = 99; # 修改字典內的指定key的值

delete dic.age; # 字典內的值刪除

函數的定義 function fn1() {console.log('我是函數fn1');}

fn1(); # js中函數的調用方法

var fn2 = function () {console.log('我是函數fn2');}; # 定義函數的另外一種方式

匿名函數的定義（匿名函數只能在定義階段被調用一次）（第一個()，是將定義的代碼做爲總體拿到內存地址，後面的()就是調用的意思，這就是匿名函數的定義方式和原理(function () {console.log('我是匿名函數')})();

onmouseout \ onmouseover # 添加鼠標懸浮事件out是離開，over是懸浮（就是鼠標懸停）

s的基本數據類型（值類型、引用類型、特殊類型）

值類型：

一、number：數字類型 # js裏面沒有整型和浮點型，負數小數的區別，只有一個類型就是數字類型

二、string：字符串類型

3：boolean ：布爾類型

四、underfined ：未定義類型

--------------------------------------------------------------------------------------------------------------------------------------------------------

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。