前端基礎

Fredette發表於2024-03-10

前端

前端基礎

前端基礎

引言，學習前端之前先要搞清楚前端和後端的區別吧！前端是任何與使用者直接打交道的操作介面都可以稱之為 '接待員'。而後端是不直接與使用者打交道主要負責內部真正的業務邏輯的執行可以理解為 '幕後操作者'

前端三劍客
網頁的骨架HTML
網頁的樣式CSS
網頁的動態JavaScript

先學習HTTP協議相關的必會知識吧

1.HTTP的四大特性

基於請求響應；客戶端傳送請求、服務端回應響應
基於TCP、IP作用於應用層上的協議；該協議屬於應用層
無狀態；服務端不會儲存客戶端的狀態、記不住人
無/短連結；客戶端與服務端不會長久保持連結

2.資料格式

請求格式
請求首行(請求方式及協議版本)
請求頭(一大堆K:V鍵值對)
換行
請求體(存放敏感資訊並不是所有請求體都有請求體)
響應格式
響應首行(狀態碼及協議版本)
響應頭(一大堆K:V鍵值對)
換行
響應體(存放給瀏覽器展示的資料)

3.響應狀態碼

1XX：服務端接收到了你的請求正在處理客戶端可以繼續傳送或等待
2XX：200 OK 請求成功服務端傳送了對應的響應
3XX：302(臨時) 304(永久) 重定向(想訪問A網頁但是自動跳轉到了B網站)
4XX：403訪問許可權不夠 404請求資源不存在
5XX：服務端內部錯誤
自定義響應狀態碼通常以10000起步(聚合資料)

一、網頁骨架HTML

HTML(Hyper Text Markup Language的縮寫，翻譯成中文就是超文字標記語言)html語言是一種標記語言，編寫後透過瀏覽器來識別，不屬於程式語言。只是一種排版網頁中資料顯示位置的標記結構語言。

1.HTML註釋語法

<!--註釋內容-->

2.HTML文件結構

<!DOCTYPE html>
<html lang="en">固定格式HTML包裹
<head>主要放跟瀏覽器互動的配置
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 檔案 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>主要放給使用者檢視的花裡花哨的內容

</body>
</html>

3.HTML標籤分類

單標籤比如
雙標籤比如

4.常見符號

&nbsp ; 空格
&gt ; 大於
&lt ; 小於
&amp ; &符號
&yen ; ¥
&copy ; ©
&reg ; ®

5.body內基本標籤

標題系列標籤h1~h6
段落標籤 p
其他標籤(行內標籤) u下劃線、i 斜體、s 刪除線、b加粗
換行與分割線 br 換行 hr 分割線

6.body內佈局標籤

標籤之間可以相互巢狀並且理論上可以無限套娃；塊級標籤內部可以巢狀塊級標籤和行內標籤，p標籤雖然是塊級標籤但是它的內部不能巢狀塊級標籤；行內標籤內部只能巢狀行內標籤

塊級標籤 div
行內標籤 span

7.body內常用標籤

<a href=""></a>

a標籤 連結標籤
href="url" 具備跳轉功能
href="#id" 具備錨點功能
target預設_self原網頁跳轉
target指定_blank新建網頁跳轉

<img src="" alt="">

img標籤 圖片標籤
src=""填寫圖片地址
alt=""圖片載入失敗提示的資訊
width/height圖片尺寸是等比例縮放兩者調整一個即可

8.列表標籤

<ul>
    <li>手機</li>
    <li>衣物</li>
    <li>電子</li>
</ul>

無序列表：頁面上所有的有規則排列的橫向或者豎著的資料一般使用的都是無序列表

<ol type="I">
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>

有序列表：還可以透過type豎向切換數字

<dl>
	<dt>大標題</dt>
        <dd>小標題1</dd>
        <dd>小標題2</dd>
	<dt>大標題</dt>
        <dd>小標題1</dd>
        <dd>小標題2</dd>
        <dd>小標題3</dd>
</dl>

標題列表

9.表格標籤

<!--先寫基本骨架-->
<table>
    <thead></thead>
    <tbody></tbody>
</table>

<!--再寫表頭及表單資料-->
<tr> 一個tr標籤表示一行
    <th>編號</th> th主要用於表頭欄位中用來加粗顯示
    <td>1</td> td主要用於表達資料中

<table>
    <thead>
    <tr>
        <th>編號</th>
        <th>姓名</th>
        <th>年齡</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>almira</td>
        <td>18</td>
    </tr>
    </tbody>
</table>

10.表單標籤

可以獲取到使用者的資料併傳送給服務端

<form action=""></form>

form表單屬性

action控制資料的提交地址
method控制資料的提交方法
name相當於字典的鍵
value相當於字典的值

<input type="text">

input標籤的type屬性

text普通文字
password密文展示
date日期選項
email郵箱格式
radio單選
checkbox多選
file檔案
submit觸發提交動作
reset重置表單內容
button暫無任何功能

<select name="" id=""></select>  select標籤下拉框
<option value=""></option>   一個個選項

<textarea name="" id="" cols="30" rows="10"></textarea>  獲取大段文字

二、網頁樣式CSS

1.CSS語法結構及其註釋語法另外引入CSS的方式

選擇器{
    樣式名1:樣式值1；
    樣式名2:樣式值2；
}

/*註釋內容*/

head內style標籤內部編寫(學習的時候使用)
head內link標籤引入(標準的方式)
標籤內部透過style屬性直接編寫(不推薦)

2.CSS選擇器前四個及其組合後四個

div {
    color:red;
}
/*標籤選擇器直接按照標籤名查詢標籤*/

.c1 {
    color:green;
}
/*類選擇器按照標籤的class值查詢標籤*/

#d1 {
    color:yellow;
}
/*id選擇器根據標籤的id精準查詢標籤*/

* {
    color:blue;
}
/*通用選擇器直接選擇頁面所有的標籤*/

div span {
    color:black;
}
/*用空格來表示後代選擇器*/

div>span {
    color:orange;
}
/*用大於號表示兒子選擇器*/

div+span {
    color:yellow;
}
/*用加號表示毗鄰選擇器*/

div~span {
    color:green;
}
/*用小波浪號表示弟弟選擇器*/

3.分組與巢狀

div,p,span {
    color:yellow;
}
/*多個選擇器合併查詢*/

#d1,.c1,span {
    color:yellow;
}
/*多個選擇器合併查詢*/

div.c1 {
    color:yellow;
}
/*查詢class含有c1的div*/

div#d1 {
    color:yellow;
}
/*查詢id是d1的div*/

.c1 p.c2 {
    color:yellow;
}
/*查詢含有c1樣式值裡面含有c2樣式值得p標籤*/

[username] {
    color:yellow;
}
/*按照屬性名查詢*/

[username]='almira' {
    color:yellow;
}
/*按照屬性名等於屬性值查詢*/

4.偽類選擇器前兩個以及偽元素選擇器後兩個還有選擇器優先順序

a:hover {
    color:red;
}
/*a標籤補充說明 針對沒有點選過的網址 預設是藍色 點選過的則為紫色*/

input:focus {
    background-color:red;
}
/*input獲取焦點被點選之後採用的樣式*/

p:before {
    content: 'LOL';
    color:red;
}
/*css新增文字無法正常選中*/

p:after {
    content: 'Ahhh';
    color:red;
}
/*css新增文字無法正常選中*/

選擇器相同匯入方式不同那就就近原則
選擇器不同匯入方式相同內聯樣式>id選擇器>類選擇器>標籤選擇器

5.CSS樣式調節

/*字型樣式*/
font-size:14px 24px 28px 36px	字型大小
font-weight: lighter;     	    字型粗細
color有三種表示方式		      字型顏色
color: red;
color: #3d3d3d;
color: rgba(186,11,98,0.5)      a是代表透明度範圍是0~1
text-align: center		        文字居中
text-decoration: none;          主要用於a標籤取消下劃線
text-indent: 32px;		       首行縮排

/*背景屬性*/
div {
    width:800px;
    height:800px;
    background-color:red;
    background:url("圖片地址") blue no-repeat center center;
    
}
/*
多個屬性名有相同的字首那麼可以簡寫一次性完成
background-image
background-color
background-repeat
background-position
*/

6.邊框

border: 10px solid orage;
/*屬性分別為寬度實現顏色*/

diplay:none
/*徹徹底底的隱藏標籤*/
visibility:hidden
/*隱藏的不徹底*/

7.盒子模型

content   內容
padding   內邊距
border    邊框
maigin    外邊距

margin: 0 auto;針對標籤的巢狀 水平方向可以居中
margin與padding用法一致

padding: 20px; 上下左右
padding: 20px 40px;  上下   左右
padding: 10px 20px 30px;上  左右  下
padding: 10px 20px 30px 40px;上 右 下 左
/*padding有以上四種調節方式*/

8.浮動

浮動現象float:left\right
浮動就是用來做頁面佈局的
浮動帶來的影響浮動的元素是脫離正常文件流的會造成父標籤塌陷
如何解決浮動的影響 使用關鍵字clear
提前寫好樣式類
.clearfix:after {
    content: '';
    display:block;
    clear:both;
}
然後誰塌陷了就給誰新增clearfix樣式類即可 瀏覽器會優先展示文字內容

9.溢位

div {
    height: 150px;
    width: 150px;
    border: 5px solid greenyellow;
    border-radius: 50%;
    overflow: hidden;
        }
div img {
    max-width: 100%;
        }

10.定位

標籤在預設情況下都是無法透過定位的引數來移動
針對定位有四種狀態
	1.static靜態(標籤預設的狀態 無法定位移動)
 	2.relative相對定位(基於標籤原來的位置)
 	3.absolute絕對定位(基於某個定位過的父標籤做定位)
	4.fixed固定定位(基於瀏覽器視窗固定不動)
        .c1 {
            background-color: red;
            height: 100px;
            width: 100px;
            position: relative;
        }
        .c2 {
            background-color: greenyellow;
            height: 100px;
            width: 200px;
            position: absolute;
            top: 100px;
            left: 100px;
        }
		.c1 {
            border: 5px solid black;
            height: 100px;
            width: 100px;
            position: fixed;
            right: 100px;
            bottom: 200px;
        }

/*模態框屬性z-index*/
body {
            margin: 0;
        }
.cover {
            background-color: rgba(127,127,127,0.5);
            position: fixed;
            left: 0;
            bottom: 0;
            right: 0;
            top: 0;
            z-index: 100;
        }
.modal {
            height: 200px;
            width: 400px;
            background-color: white;
            z-index: 101;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -100px;
        }

三、網頁的動態JavaScript

1.必備基礎知識註釋語法、結束符號以及變數與常量

//單行註釋
/*多行註釋*/

程式碼寫完標誌結束用分號;

宣告變數需要用關鍵字var或let 比如var name = 'almira';
宣告常量也需要使用關鍵字const 比如const Pi = 3.14;

2.引入JavaScript的多種方式

head內script標籤內編寫
head內script標籤src屬性引入外部JavaScript資源
head內最底部透過script標籤src屬性引入外部JavaScript資源(最長用)

3.基本資料型別以及運算子

'數值型別'(Number)整型和浮點型不分家 NaN也屬於數值型別意思是：不是一個數字(Not A Number)

'字元型別'(String)單引號''雙引號""模板字串``， 字串拼接推薦使用加號

'布林型別'(Boolean)JavaScript裡面要春小寫而Python裡面首字母大寫

'物件(object)' 
陣列(Array)類似於Python中的列表 let l1 = [] 
自定義物件類似於字典 let d1 = {'name': 'almira'}

+ - * / % ++(自增1) --(自減1)

var res1=x++;  加號在後面	先賦值後自增
var res2=++x;  加號在前面	先自增後賦值

!= 弱不相等
!== 強不相等
== 弱值相等
=== 強值相等

&&與
||或
！非

4.流程控制

// 單if分支

if(條件){
    條件成立之後執行的程式碼
}

// if ··· else分支

if(條件){
    條件成立之後執行的程式碼
}else {
    條件不成立之後執行的程式碼
}

// for迴圈

for(起始條件；迴圈條件；條件處理){
    迴圈體程式碼
}

// while迴圈

while(迴圈條件){
    迴圈體程式碼
}

5.函式

function 函式名(形參){
    //函式註釋
    函式體程式碼
    return 返回值
}

// 匿名函式

var s1 = function(a, b){
  return a + b;
}

// 箭頭函式

var f = v => v;
var f = function(v){
  return v;
}

6.內建物件

var d = new Date(); 
getDate()                 獲取日
getDay ()                 獲取星期
getMonth ()               獲取月（0-11）
getFullYear ()            獲取完整年份
getYear ()                獲取年
getHours ()               獲取小時
getMinutes ()             獲取分鐘
getSeconds ()             獲取秒
getMilliseconds ()        獲取毫秒
getTime ()                返回累計毫秒數(從1970/1/1午夜)


let dd = {name: 'almira', age: 24}
JSON.stringify(dd)	序列化
JSON.parse(ss)	   反序列化


定義正則兩種方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
全域性模式的規律 lastIndex
test匹配資料不傳預設傳undefined

7.BOM&DOM操作

BOM（Browser Object Model）是指瀏覽器物件模型，它使 JavaScript 有能力與瀏覽器進行“對話”。DOM （Document Object Model）是指文件物件模型，透過它可以訪問HTML文件的所有元素

# BOM操作
window.open()  // 開啟
window.close()  // 關閉
window.location.href  // 定位到指定的網頁	
window.history.forward()\back()  // 前一頁&後一頁
window.location.reload()  // 重新整理當前頁面
alert()\confirm()\prompt()  // 警告框 確認框 提示框
setTimeOut()\clearTimeOut()  // 設定計時器 取消任務
setInterval()/clearInterval()  // 間隔一段時間執行 取消任務

# DOM操作

DOM （Document Object Model）是指文件物件模型，透過它可以訪問HTML文件的所有元素

document.getElementById('d1')  // 結果就是標籤物件本身
document.getElementsByClassName('c1')  // 結果是陣列裡面含有多個標籤物件
document.getElementsByTagName('span')  // 結果是陣列裡面含有多個標籤物件
    
parentElement           父節點標籤元素
children                 所有子標籤
firstElementChild        第一個子標籤元素
lastElementChild         最後一個子標籤元素
nextElementSibling       下一個兄弟標籤元素
previousElementSibling   上一個兄弟標籤元素

# 操作節點

// js程式碼建立一個標籤
let aEle = document.createElement('a')

// js程式碼操作標籤屬性
aEle.href = 'http://www.lsmpx.com/'  只能新增預設的屬性
setAttribute()相容預設屬性和自定義屬性
getAttribute("age")
removeAttribute("age")

// js程式碼操作標籤文字
aEle.innerText = '這個很攢勁!'

// js程式碼查詢div標籤並將a追加到div內部
let divEle = document.getElementsByTagName('div')[0]
divEle.appendChild(aEle)


.innerText  		 獲取標籤內部所有的文字內容
.innerText = '文字'  替換/設定標籤內部的文字(不識別標籤語法)

.innerHTML			獲取標籤內部所有的標籤包含文字
.innerHTML = '文字'  替換/設定標籤內部的文字(識別標籤語法)

8.事件

事件可以簡單的理解為透過js程式碼給html標籤繫結一些自定義的功能

常見事件
onclick        當使用者點選某個物件時呼叫的事件控制程式碼
onfocus        元素獲得焦點            
onblur         元素失去焦點              
onchange       域的內容被改變    

繫結事件的多種方式
<!--繫結事件的方式1-->
<button onclick="showMsg()">快按我</button>
<!--繫結事件的方式2-->
<input type="button" value="快快快" id="d1">

        <script>
            function showMsg() {
                let msg = prompt('你確定要這樣嗎?');
                console.log(msg)
            }

            let inputEle = document.getElementById('d1');
            inputEle.onclick = function () {
                alert('誰在那裡點我!!!')
            }
        </script>
     
事件函式中的this關鍵字
this指代的就是當前被操作的標籤物件本身	
如果事件函式內有多層巢狀那麼最好在一開始用變數儲存一下防止後續變化
 
onload方法 XXX.onload 等待XXX載入完畢之後再執行後面的程式碼

# 事件相關案例

<input type="text" value="遊戲機" id="d1">

<script>
        let inputEle = document.getElementById('d1')
        inputEle.onfocus = function () {
            this.value = ''
        }
        inputEle.onblur = function () {
            this.value = '下次再來喲!'
        }
</script>


    <p>username:
        <input type="text" id="d1">
        <span style="color: red"></span>
    </p>
    <p>password:
        <input type="text" id="d2">
        <span style="color: red"></span>
    </p>
    <button id="suBtn">提交</button>

    <script>
        // 1.查詢提交按鈕的標籤
        subEle = document.getElementById('suBtn')
        // 2.給按鈕標籤繫結點選事件
        subEle.onclick = function (){
            // 3.查詢獲取使用者輸入的標籤並獲取資料
            let userNameEle = document.getElementById('d1')
            let passWordEle = document.getElementById('d2')
            if(userNameEle.value === 'jason'){
                userNameEle.nextElementSibling.innerText = '使用者名稱不能是Jason'
            }
            if(passWordEle.value === '123'){
                passWordEle.nextElementSibling.innerText = '密碼不能是123'
            }
        }
    </script>
    
    
省:
<select name="" id="d1">

</select>

市:
<select name="" id="d2">

</select>
<script>
    let data = {
        "河北": ["廊坊市", "邯鄲市"],
        "北京": ["朝陽區", "海淀區"],
        "山東": ["威海市", "煙臺市"],
        "安徽": ["蕪湖市", "合肥市"],
        "上海": ["浦東新區", "靜安區"]
    }
    // 提前查詢好省和市的select標籤
    let proSeEle = document.getElementById('d1');
    let citySeEle = document.getElementById('d2');
    // 1.獲取所有的省資訊
    for (let pro in data) {
        // 2.建立option標籤
        let proOpEle = document.createElement('option');
        // 3.新增文字及屬性
        proOpEle.innerText = pro;
        proOpEle.setAttribute('value', pro);
        // 4.將建立好的option標籤新增到省下拉框中
        proSeEle.appendChild(proOpEle)
    }
    // 5.給省標籤繫結文字域變化事件 onchange
    proSeEle.onchange = function () {
        citySeEle.innerHTML = '';  // 每次操作市之前清空市資料
        // 6.獲取使用者選擇的省資訊 根據省獲取市資訊
        let targetProData = this.value;
        let cityDataList = data[targetProData];
        // 7.迴圈獲取每一個市資訊 建立option標籤 新增到市下拉框中
        for (let i = 0; i < cityDataList.length; i++) {
            let cityOpEle = document.createElement('option');
            cityOpEle.innerText = cityDataList[i];
            cityOpEle.setAttribute('value', cityDataList[i]);
            citySeEle.appendChild(cityOpEle)
        }
    }
</script>

9.jQuery類庫

載入快速度快
選擇器更多更好用
一行程式碼走天下
支援Ajax請求
相容更多的瀏覽器

準備工作
	1.下載核心檔案到本地引入(沒有網路也可以使用)
    	<script src="jQuery3.6.js"></script>
 	2.CDN網路資源載入(必須有網路才可以使用)
    	https://www.bootcdn.cn/
    https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js
    https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js
        

jQuery封裝了js程式碼讓程式碼更簡單但是有時候js程式碼速度更快
引入jQuery的方式使用關鍵字jQuery或用符號$都可以

1.基本選擇器
$('#d1')	id選擇器
$('.c1')	class選擇器
$('div')	標籤選擇器

2.組合選擇器
$('div#d1')			查詢id是d1的div標籤
$('span.c1') 		 查詢含有c1樣式類的span標籤
$('div,span,p')		 查詢div或者span或者p標籤
$('#d1,.c1,span')	 查詢id是d1的或者class含有c1的或者span標籤

3.層級選擇器
$('div p')			查詢div裡面所有的後代p標籤
$('div>p')			查詢div裡面的兒子p標籤
$('div+p')			查詢div同級別下面緊挨著的p標籤
$('div~p')			查詢div同級別下面所有的p標籤

4.屬性選擇器
$('[username]')			查詢含有username屬性名的標籤
$('[username="jason"]')	查詢含有username屬性名並且值等於jason的標籤
$('input[username="jason"]')

5.基本篩選器
:first // 第一個
:last // 最後一個
:eq(index)// 索引等於index的那個元素
:even // 匹配所有索引值為偶數的元素，從 0 開始計數
:odd // 匹配所有索引值為奇數的元素，從 0 開始計數
:gt(index)// 匹配所有大於給定索引值的元素
:lt(index)// 匹配所有小於給定索引值的元素
:not(元素選擇器)// 移除所有滿足not條件的標籤
:has(元素選擇器)// 選取所有包含一個或多個標籤在其內的標籤(指的是從後代元素找)
$('li:first')	最佳化   $('li').first()
        
        
6.表單篩選器
$(':text')
$(':password')
$(':checked')		checked與selected都會找到
$(':selected')		selected

7.篩選器方法
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
$("#id").parent()
$("#id").parents()  // 查詢當前元素的所有的父輩元素
$("#id").parentsUntil() // 查詢當前元素的所有的父輩元素，直到遇到匹配的那個元素為止。
$("#id").children();// 兒子們
$("#id").siblings();// 兄弟們

// 操作標籤
1.class操作
addClass()			    classList.add()
removeClass() 			classList.remove()
hasClass() 				classList.contains()
toggleClass()			classList.toggle()

2.位置操作
$(window).scrollTop()

3.文字操作
text()					innerText
html()					innerHTML
val()					value
jQuery物件[0].files	  files[0]

4.建立標籤
document.createElement()  $('<a>')

5.屬性操作
attr()/removeAttr()					 xxxAttribute()
attr針對動態變化的屬性獲取會失真
prop('checked') prop('selected')

6.文件處理
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
    
$(A).after(B)// 把B放到A的後面
$(A).insertAfter(B)// 把A放到B的後面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
    
remove()// 從DOM中刪除所有匹配的元素。
empty()// 刪除匹配的元素集合中所有的子節點。

// jQuery事件

JS繫結事件 標籤物件.on事件名 = function(){}
jQuery事件繫結
方式1:jQuery物件.事件名(function(){})
方式2:jQuery物件.on('事件名稱',function(){})
 	
clone屬性 clone(true)  預設不克隆事件 加true就可以

取消後續事件 事件函式的最後return false即可
阻止事件冒泡 事件函式的最後return false即可
等待頁面載入完畢再執行程式碼
$(function(){})				   縮略寫法
$(document).ready(function(){})  完整寫法
事件委託
主要針對動態建立的標籤也可以使用繫結的事件
$('body').on('click','button',function(){})
將body內所有的單擊事件委託給button標籤執行

10.bootstrap頁面框架

別人已經提前寫好了一大堆css和js 我們只需要引入之後按照人家規定好的操作方式即可使用所有的樣式和功能

檔案結構
bootstrap.css
bootstrap.js
ps:js部分是需要依賴於jQuery
  
CDN
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

# 使用bootstrap其實只需要操作標籤的樣式類即可

佈局容器
	class = "container"				有留白
 	class = "container-fluid"		 沒有留白
柵格系統
	class = "row"					一行均分12份
		class = "col-md-8"			 劃分一行的12份
螢幕引數
	col-md-6 col-xs-2 col-sm-3 col-lg-3
柵格偏移
	col-md-offset-3

表格樣式
<table class="table table-hover table-striped">
顏色<tr class="success">

表單標籤
class = "form-control"

按鈕組
class = "btn btn-primary btn-block"

圖示
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
https://fontawesome.com.cn/
    
導航條
class="navbar navbar-inverse"

前端——基礎
2018-10-26
前端
前端基礎之jQuery基礎
2024-03-23
前端jQuery
【web前端基礎 | JS基礎】物件
2020-12-20
Web前端JS物件
前端基礎_CSS
2019-03-02
前端CSS
【前端基礎】ajax
2019-07-11
前端
【前端基礎】Bootstrap
2019-07-12
前端boot
前端建模基礎
2022-04-11
前端
前端基礎入門四（JavaScript基礎）
2019-05-20
前端JavaScript
前端基礎複習
2018-10-25
前端
前端基礎（十）：promise
2018-08-17
前端Promise
前端基礎——HTML(二)
2020-10-22
前端HTML
前端基礎知識
2024-08-17
前端
前端基礎之前端知識引入
2024-03-18
前端
《大前端基礎元件》系列 CSS基礎架構
2020-04-06
前端元件CSS架構
《前端運維》一、Linux基礎--基礎命令（1）
2021-05-09
前端運維Linux
前端基礎_ES6
2019-01-11
前端
前端效能優化基礎
2019-01-05
前端優化
前端基礎（七）：cookie操作
2018-07-09
前端Cookie
前端基礎（三）：函式
2018-06-21
前端函式
前端模組化基礎
2018-08-03
前端
前端基礎之jQuery引入
2024-03-23
前端jQuery
前端基礎之JavaScript引入
2024-03-19
前端JavaScript
前端佈局基礎概述
2018-04-02
前端
前端-JavaScript基礎知識
2021-10-21
前端JavaScript
前端基礎（四）：前端國際規範收集
2018-06-21
前端
前端之路---入坑篇之基礎中的基礎html
2020-03-30
前端HTML
前端正規表示式基礎
2018-09-15
前端
前端基礎之JavaScriptDOM和BOM
2024-03-21
前端JavaScript
前端基礎之jQuery進階
2024-03-23
前端jQuery
前端基礎入門一（HTML）
2019-05-19
前端HTML
前端基礎之BOM和DOM
2019-02-17
前端
前端工程化 Webpack基礎
2022-03-29
前端Web
Web前端基礎知識整理
2021-09-09
Web前端
前端基礎 — Web事件總結
2021-09-09
前端Web事件
後臺前端基礎框架搭建
2021-09-09
前端框架
挑戰前端基礎120題--HTML5基礎合集一
2024-04-24
前端HTML
前端入門3-CSS基礎
2018-10-30
前端CSS
零基礎如何自學前端？
2019-01-17
前端

前端基礎

前端基礎

先學習HTTP協議相關的必會知識吧

1.HTTP的四大特性

2.資料格式

3.響應狀態碼

一、網頁骨架HTML

1.HTML註釋語法

2.HTML文件結構

3.HTML標籤分類

4.常見符號

5.body內基本標籤

6.body內佈局標籤

7.body內常用標籤

8.列表標籤

9.表格標籤

10.表單標籤

二、網頁樣式CSS

1.CSS語法結構及其註釋語法另外引入CSS的方式

2.CSS選擇器前四個及其組合後四個

3.分組與巢狀

4.偽類選擇器前兩個以及偽元素選擇器後兩個還有選擇器優先順序

5.CSS樣式調節

6.邊框

7.盒子模型

8.浮動

9.溢位

10.定位

三、網頁的動態JavaScript

1.必備基礎知識註釋語法、結束符號以及變數與常量

2.引入JavaScript的多種方式

3.基本資料型別以及運算子

4.流程控制

5.函式

6.內建物件

7.BOM&DOM操作

8.事件

9.jQuery類庫

10.bootstrap頁面框架

相關文章