前端學習筆記-07一些總結(一)

前端的概念

前端即網站前臺部分，運行在PC端，移動端等瀏覽器上展現給用戶瀏覽的網頁，隨著互聯網技術的發展，HTML5，CSS3，前端框架的應用，跨平臺回應式網頁設計能夠適應各種螢屏解析度，合適的動效設計，給用戶帶來極高的用戶體驗，

前端的學習思路

HTML、CSS、JavaScript
這三個是前端開發中最基本也是最必須的三個技能，前端的開發中，在頁面的布局時， HTML將元素進行定義，CSS對展示的元素進行定位，再通過JavaScript實作相應的效果和互動，雖然表面看起來很簡單，但這里面需要掌握的東西絕對不會少，在進行開發前，需要對這些概念弄清楚、弄明白，這樣在開發的程序中才會得心應手，

HTML

HTML:網頁的骨架 沒有任何的樣式
指的是超文本標記語言 (Hyper Text Markup Language)，這個也是我們網頁最常用普通的語言了，經歷了多個版本的發展，已經發展到5.0版了，得力于W3C建立的標準和規范，已普遍升級到了XHTML，XHTML 指可擴展超文本標簽語言（EXtensible HyperText Markup Language）， XHTML 于2000年的1月26日成為 W3C 標準，是更嚴格更純凈的 HTML 代碼，XHTML 的目標是取代 HTML，XHTML 與 HTML 4.01 幾乎是相同的，XHTML 是作為一種 XML 應用被重新定義的 HTML，是一個 W3C 標準，W3C 將 XHTML 定義為最新的HTML版本，所有新的瀏覽器都支持 XHTML，

CSS

CSS:給骨架添加各種樣式 變得好看
級聯樣式表（Cascading Style Sheet）簡稱“CSS”，通常又稱為“風格樣式表（Style Sheet）”，它是用來進行網頁風格設計的，比如，如果想讓鏈接字未點擊時是藍色的，當滑鼠移上去后字變成紅色的且有下劃線，這就是一種風格，通過設立樣式表，可以統一地控制HTML中各標志的顯示屬性，級聯樣式表可以使人更能有效地控制網頁外觀，使用級聯樣式表，可以擴充精確指定網頁元素位置，外觀以及創建特殊效果的能力，

JavaScript

JS:控制網頁的動態效果
是一種由Netscape的LiveScript發展而來的原型化繼承的面向物件的動態型別的區分大小寫的客戶端腳本語言，主要目的是為了解決服務器端語言，比如Perl，遺留的速度問題，為客戶提供更流暢的瀏覽效果，當時服務端需要對資料進行驗證，由于網路速度相當緩慢，只有28.8kbps，驗證步驟浪費的時間太多，于是Netscape的瀏覽器Navigator加入了Javascript，提供了資料驗證的基本功能，

還有不少封裝好的框架比如：BOOTSTRAP、JQuery、Vue 只需按固定的語法呼叫即可

軟體開發架構

cs 客戶端-服務端
bs 瀏覽器-服務端

從本質上講，bs也是cs
自然地，瀏覽器可以充當很多服務端的客戶端比如 愛奇藝視頻 搜狐視頻…

瀏覽器訪問網址的流程

瀏覽器朝服務端發送請求→服務端接受請求→ 服務端回傳相應的回應(eg:回傳網頁)→瀏覽器接收回應 →根據特定的規則渲染頁面展示給用戶看

HTTP協議

原理：通過制定統一標準使得瀏覽器能夠與我們構建地服務端互動，達到使用瀏覽器作為客戶端的目的，從而擴大了我們客戶端的潛在使用人數，因為每臺電腦基本都有瀏覽器

超文本傳輸協議 用來規定服務端和瀏覽器之間的資料互動的格式…
超文本傳輸協議（Hyper Text Transfer Protocol，HTTP）是一個簡單的請求-回應協議，它通常運行在TCP之上，它指定了客戶端可能發送給服務器什么樣的訊息以及得到什么樣的回應，請求和回應訊息的頭以ASCII形式給出；而訊息內容則具有一個類似MIME的格式，這個簡單模型是早期Web成功的有功之臣，因為它使開發和部署非常地直截了當，

四大特性

1.基于請求回應

2.基于TCP/IP作用于應用層之上的協議

3.無狀態
不保存用戶的資訊
由于HTTP協議是無狀態的 所以后續出現了一些專門用來記錄用戶狀態的技術cookie、session、token…

4.無/短鏈接
請求來一次我回應一次 之后我們兩個就沒有任何鏈接和關系了
長鏈接:雙方建立連接之后默認不斷開 websocket(后面講專案的時候會講)

請求資料格式

請求首行(標識HTTP協議版本，當前請求方式)

請求頭(一大堆k,v鍵值對)-head

請求體(并不是所有的請求方式都有get沒有post有 存放的是post請求提交的敏感資料)

回應資料格式

回應首行(標識HTTP協議版本，回應狀態碼)

回應頭(一大堆k,v鍵值對)

回應體(回傳給瀏覽器展示給用戶看的資料)

回應狀態碼

200 - 請求成功
301 - 資源（網頁等）被永久轉移到其它URL
404 - 請求的資源（網頁等）不存在
500 - 內部服務器錯誤

請求方式

GET：

GET通常用于獲取服務端資料，

常見發起GET請求的方式有：URL 、src/href、表單（form），

GET方式提交資料的格式:

格式:index.php?userName=jack&password=123 （注意：index.php？key=value&key=value， userName=jack&password=123 叫做查詢字串）

引數名與引數值之間沒有空格

引數值不需要使用單雙引號包括

GET方式提交資料特點：

1、get方式在url后面拼接引數，只能以文本的形式傳遞引數，

2、傳遞的資料量小，4kb左右（不同瀏覽器會有差異），

3、安全性低，會將資訊顯示在地址欄，

4、速度快，通常用于對安全性要求不高的請求，

POST請求：

POST就是發送、提交，可以向指定的資源提交要被處理的資料，

如果使用表單方式進行提交，表單的method必須設定為POST，

post方式提交的特點：

1、post提交資料相對于get的安全性高一些，（注意：抓包軟體也會抓到post的內容，安全性要求高可以進行加密）

2、傳遞資料量大，請求對資料長度沒有要求，

3、請求不會被快取，也不會保留在瀏覽器的歷史記錄中，

4、用于密碼等安全性要求高的場合，提交資料量較大的場合，如上傳檔案，發布文章等，

5、POST方式提交資料上限默認為8M（可以在PHP的組態檔post_max_size選項中修改）

url:統一資源定位符(即網址)

在WWW上，每一資訊資源都有統一的且在網上唯一的地址，該地址就叫URL（Uniform Resource Locator,統一資源定位器），它是WWW的統一資源定位標志，就是指網路地址，

標簽的分類1

<h1></h1>
<a href="https://www.AAAAAAAAAAAAAAAAAAAAAAAAAA.com/"></a>
<img/>

1  雙標簽
2  單標簽(自閉和標簽)

head內常用標簽

在書寫HTML代碼的時候 你只需要寫標簽名 然后tab就能自動補全

<title>Title</title>  網頁標題
<style>
        h1 {
            color: greenyellow;
        }
</style>  內部用來書寫css代碼

<script>
        alert(123)
</script>  內部用來書寫js代碼
<script src="myjs.js"></script>  還可以引入外部js檔案

<link rel="stylesheet" href="mycss.css">  引入外部css檔案



<meta name="keywords" content="用于關鍵字檢索">  當你在用瀏覽器搜索的時候 只要輸入了keywords后面指定的關鍵字那么該網頁都有可能被百度搜索出來展示給用戶

<meta name="description" content="用于網頁描述">  網頁的描述性資訊

body內常用標簽

你肉眼能夠在瀏覽器上面看到的花里胡哨的頁面，內部都是HTML代碼

基本標簽

<h1>我是h1</h1>  標題標簽 1～6級標題
<b>加粗</b>
    <i>斜體</i>
    <u>下劃線</u>
    <s>洗掉線</s>
    <p>段落</p>
     <br>  換行
      <hr>  水平分割線

標簽的分類2

# 1 塊兒級標簽:獨占一行
		h1~h6	p div
  	1 塊兒級標簽可以修改長寬 行內標簽不可以 修改了也不會變化
    2 塊兒級標簽內部可以嵌套任意的塊兒級標簽和行內標簽
    	但是p標簽雖然是塊兒級標簽 但是它只能嵌套行內標簽 不能嵌套塊兒級標簽
      	如果你套了 問題也不大 因為瀏覽器會自動幫你解開(瀏覽器是直接面向用戶的 不會輕易的報錯 哪怕有報錯用戶也基本感覺不出來)
       
    總結:
      	只要是塊兒級標簽都可以嵌套任意的塊兒級標簽和行內標簽
        但是p標簽只能嵌套行內標簽（HTML書寫規范）
# 2 行內標簽:自身文本多大就占多大
		i u s b span
  	行內標簽不能嵌套塊兒級標簽 可以嵌套行內標簽
    

特殊符號

   空格
>   大于號
<   小于號
&  &
¥  ￥
©		?
商標®  ?

常用標簽

div  塊兒級標簽
span  行內標簽
上述的兩個標簽是在構造頁面初期最常使用的 頁面的布局一般先用div和span占位之后再去調整樣式 尤其是div使用非常的頻繁
div你可以把它看成是一塊區域 也就意味著用div來提前規定所有的區域
之后往該區域內部填寫內容即可
而普通的文本先用span標簽 

img標簽

# 圖片標簽
<img src="" alt="">

src	
	1.圖片的路徑	可以是本地的也可以是網上的
  2.url				自動朝該url發送get請求獲取資料

alt="這是我的BOSS"
	當圖片加載不出來的時候 給圖片的描述性資訊

title="資本家"
	當滑鼠懸浮到圖片上之后 自動展示的提示資訊

height="800px" 
		
width=""
	高度和寬度當你只修改一個的時候 另外一個引數會等比例縮放
  如果你修改了兩個引數 并且沒有考慮比例的問題 那么圖片就會失真

a標簽

# 鏈接標簽
<a href=""></a>
"""
當a標簽指定的網址從來沒有被點擊過 那么a標簽的字體顏色是藍色
如果點擊過了就會是紫色（瀏覽器給你記憶了）
"""

href
	1.放url，用戶點擊就會跳轉到該url頁面
  2.放其他標簽的id值 點擊即可跳轉到對應的標簽位置

target
	默認a標簽是在當前頁面完成跳轉  _self
  你也可以修改為新建頁面跳轉			_blank

# a標簽的錨點功能
"""eg:點擊一個文本標題 頁面自動跳轉到標題對應的內容區域"""
<a href="" id="d1">頂部</a>
<h1 id="d111">hello world</h1>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="d2">中間</a>
<div style="height: 1000px;background-color: greenyellow"></div>
<a href="#d1">底部</a>
<a href="#d2">回到中間</a>
<a href="#d111">回到中間</a>

標簽具有的兩個重要書寫

1.id值
	類似于標簽的身份證號 在同一個html頁面上id值不能重復
2.class值
	該值有點類似于面向物件里面的繼承 一個標簽可以繼承多個class值

標簽既可以有默認的書寫也可以有自定義的書寫

<p id="d1" class="c1" username="jason" password="123"></p>

串列標簽

• 無序串列(較多)

  <ul>
          <li>第一項</li>
          <li>第二項</li>
          <li>第二項</li>
          <li>第二項</li>
  </ul>
  雖然ul標簽很丑 但是在頁面布局的時候 只要是排版一致的幾行資料基本上用的都是ul標簽
  

• 有序串列(了解)

  <ol type="1" start="5">
      <li>111</li>
      <li>222</li>
      <li>333</li>
  </ol>
  
  
  

• 標題串列(了解)

  <dl>
      <dt>標題1</dt>
      <dd>內容1</dd>
      <dt>標題2</dt>
      <dd>內容2</dd>
      <dt>標題3</dt>
      <dd>內容3</dd>
  </dl>