11月30日內容總結——
- 一、前端與後端的概念
- 二、前端前戲
- 三、HTTP協議
- 四、HTML簡介
- 五、HTML概覽
- 六、預備知識
- 七、head內常見標籤
- 八、body內基本標籤
- 九、常見符號
- 十、body內佈局標籤
- 十一、body內常用標籤
- 十二、列表標籤
- 十三、表格標籤
- 十四、表單標籤
- 十五、作業
一、前端與後端的概念
什麼是前端什麼是後端？前端即網站前臺部分，執行在PC端，移動端等瀏覽器上展現給使用者瀏覽的網頁。多數後端開發人員從事於構建工作應用程式背後的實際邏輯。前後端需要相互配合，共同完成一個專案。
接下來小編帶你一起來了解什麼是前端什麼是後端技術：
一、什麼是前端開發？
- 任何與使用者直接打交道的操作介面，都可以稱之為前端>>>:接待員
1、前端概念：前端即網站前臺部分，執行在PC端，移動端等瀏覽器上展現給使用者瀏覽的網頁。隨著網際網路技術的發展，HTML5，CSS3，前端框架的應用，跨平臺響應式網頁設計能夠適應各種螢幕解析度，完美的動效設計，給使用者帶來極高的使用者體驗。
2、前端特點：前端技術一般分為前端設計和前端開發，前端設計一般可以理解為網站的視覺設計，前端開發則是網站的前臺程式碼實現，包括基本的HTML和CSS以及JavaScript/ajax，最新的高階版本HTML5、CSS3，以及SVG等。
3、前端主要技術：HTML、CSS、JavaScript
這三個是前端開發中最基本也是最必須的三個技能。前端的開發中，在頁面的佈局時， HTML將元素進行定義，CSS對展示的元素進行定位，再通過JavaScript實現相應的效果和互動。雖然表面看起來很簡單，但這裡面需要掌握的東西絕對不會少。在進行開發前，需要對這些概念弄清楚、弄明白，這樣在開發的過程中才會得心應手。
（1）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。
（2）CSS
級聯樣式表（Cascading Style Sheet）簡稱“CSS”，通常又稱為“風格樣式表（Style Sheet）”，它是用來進行網頁風格設計的。比如，如果想讓連結字未點選時是藍色的，當滑鼠移上去後字變成紅色的且有下劃線，這就是一種風格。通過設立樣式表，可以統一地控制HTML中各標誌的顯示屬性。級聯樣式表可以使人更能有效地控制網頁外觀。使用級聯樣式表，可以擴充精確指定網頁元素位置，外觀以及建立特殊效果的能力。
（3）JavaScript
是一種由Netscape的LiveScript發展而來的原型化繼承的面向物件的動態型別的區分大小寫的客戶端指令碼語言，主要目的是為了解決伺服器端語言，比如Perl，遺留的速度問題，為客戶提供更流暢的瀏覽效果。當時服務端需要對資料進行驗證，由於網路速度相當緩慢，只有28.8kbps，驗證步驟浪費的時間太多。於是Netscape的瀏覽器Navigator加入了Javascript，提供了資料驗證的基本功能。
二、什麼是後端？
- 不直接與使用者打交道，主要負責內部真正的業務邏輯的執行>>>:幕後操作者
1、後端概念：多數後端開發人員從事於構建他們正在工作的應用程式背後的實際邏輯。前端開發人員構建使用者介面，而後端開發人員編寫程式碼，使其工作。後端開發人員寫可使得按鈕工作的程式碼，通過指出從資料庫中提取哪些資料並將其傳回到前端。後端開發人員也可能會大量參與系統架構，決定如何組織系統的邏輯，以便能夠正常維護和執行。
可能會參與構建框架或系統架構，以便於更容易編寫程式。後端開發人員比前端開發人員花費更多的時間在實現演算法和解決問題上。通常前端開發工作更多的是關於建立使用者介面和與之相關的內容，而不是實現實際的業務邏輯，使應用程式工作。
2、後端開發主要技術
前端開發人員需要知道一系列用於建立使用者介面的工具，而後端開發人員通常使用的是一套完全不同的工具和技能，以便於高效地完成他們的工作。後端開發人員所需的一個重要技能與SQL和資料庫有關。大多數後端系統需要連線到儲存應用程式資料的資料庫。
後端開發人員通常的工作是從資料庫或其他資料來源寫入、讀取和處理資料，因此擁有SQL等技能會非常重要。後端開發人員——至少對於Web開發——也需要擅長他們正在使用的技術棧的伺服器端語言。
後端開發人員需要更多地瞭解應用程式架構，因為大多數情況下，後端開發人員需要去構建應用程式的體系結構和內部設計。一個好的後端開發人員得知道如何使用各種框架和庫，如何將它們整合到應用程式中，以及如何構建程式碼和業務邏輯，用一種使系統更易於維護的方式。
學習前端的目的
專業的前端也需要培訓至少六個月，而我們作為後端開發工程師，前端只學最基本最核心的一塊，目的不是為了讓你直接可以從事前端 而是給你以後的工作提供方便：
1.防止別人蒙你
2.可以自己編寫簡易的頁面
3.逼急了甚至也可以轉前端
前端三劍客
Web前端開發三劍客就是HTML、CSS、JavaScript。通過三種技術的融合產生了各式各樣的網站。
HTML 網頁的骨架
CSS 網頁的樣式
JavaScript 網頁的動態
"""
蠟筆小新光著身子 HTML
穿裙子 抹口紅 CSS
丟根鋼管 舞起來 JS
"""
二、前端前戲
1.編寫服務端
2.瀏覽器充當客戶端訪問服務端
3.瀏覽器無法正常展示服務端內容(因為服務端的資料沒有遵循標準)
4.HTTP協議>>>:最主要的內容就是規定了瀏覽器與服務端之間資料互動的格式
三、HTTP協議
1.四大特性
1.基於請求響應
客戶端傳送請求 服務端迴應響應
2.基於TCP、IP作用於應用層之上的協議
該協議屬於應用層
3.無狀態
服務端不會儲存客戶端的狀態(記不住人)
縱使見她千百遍 我都當她如初見
4.無\短連線
客戶端與服務端不會長久保持連線
如果想要長連結
2.資料格式
1.請求格式
請求首行(請求方式(有很多種) 協議版本)
請求頭(一大堆K:V鍵值對)
換行
請求體(存放敏感資訊 並不是所有的請求方式都有請求體)
2.響應格式
響應首行(狀態碼 協議版本)
響應頭(一大堆K:V鍵值對)
換行
響應體(存放給瀏覽器展示的資料)
3.響應狀態碼
用數字來表達一些文字意義(類似於暗號)
1XX:服務端已經接收到了你的請求正在處理 客戶端可以繼續傳送或者等待
2XX:200 OK 請求成功 服務端傳送了對應的響應
3XX:302(臨時) 304(永久) 重定向(想訪問網頁A但是自動調到了網頁B)
4XX:403訪問許可權不夠 404請求資源不存在
5XX:服務端內部錯誤
在公司中我們還會自定義更多的響應狀態碼 通常以10000起步
聚合資料
四、HTML簡介
1.直接傳送手寫的資料
2.轉為傳送檔案裡面的資料
3.編寫HTML出現特殊的現象
超文字標記語言:所見即所得(沒有任何邏輯 是什麼就是什麼)
五、HTML概覽
1.HTML註釋語法
<!--註釋內容-->
2.HTML文件結構
<html> 固定格式 html包裹
<head>主要放跟瀏覽器互動的配置</head>
<body>主要放給使用者檢視的花裡胡哨的內容</body>
</html>
3.HTML標籤分類
單標籤(自閉和標籤)
<img/>
雙標籤
<h1></h1>
六、預備知識
1.網頁資訊資料一般也會存放於檔案中
.html
2.pycharm支援前端所有型別的檔案編寫
內建有自動補全的功能 我們只需要專注於標籤名的編寫即可
3.html檔案的開啟
內建有自動呼叫瀏覽器的功能
七、head內常見標籤
1.title網頁小標題
2.meta定義網頁源資訊(很多配置)
<meta name="keywords" content="查詢關鍵字">
<meta name="description" content="網頁簡介">
3.style內部支援編寫css程式碼
<style>
h1 {
color: greenyellow;
}
</style>
4.link引入外部css檔案
<link rel="stylesheet" href="mycss.css">
5.script支援內部編寫js程式碼也可以引入外部js檔案
<script>
prompt('好好活著','不要浪費生命')
</script>
<script src="myjs.js"></script>
ps:瞭解每個標籤大致的作用即可
八、body內基本標籤
1.標題系列標籤
h1~h6
2.段落標籤
p
3.其他標籤
u 下劃線
i 斜體
s 刪除線
b 加粗
ps:相同效果可能是有不同的標籤實現的 不是獨一無二的
4.換行與分割線
br 換行
hr 分割線
"""
標籤的分類二
行內標籤 u i s b
內部文字多大就佔多大
塊兒級標籤 h系列 p
獨佔一行
"""
九、常見符號
1. 空格
2.> 大於
3.< 小於
4.& &符
5.¥ ¥
6.© ©
7.® ®
十、body內佈局標籤
div
塊兒級標籤
span
行內標籤
"""
標籤之間可以相互巢狀 並且理論上可以無線套娃
塊兒級標籤內部可以巢狀塊兒級標籤和行內標籤
p標籤雖然是塊兒級標籤 但是它的內部也不能巢狀塊兒級標籤
行內標籤內部只能巢狀行內標籤
"""
十一、body內常用標籤
"""
標籤括號內填寫的 什麼=什麼 稱之為的標籤的屬性
1.預設屬性
標籤自帶的 編寫的時候有自動提示
2.自定義屬性
使用者自定義 編寫不會有提示甚至會飄顏色
"""
a標籤 連結標籤
href
1.填寫網址 具備跳轉功能
href='url'
2.填寫其他標籤的id值 具備錨點功能
href='#id'
target
預設_self原網頁跳轉
_blank新建網頁跳轉
img標籤 圖片標籤
src
1.填寫圖片地址
2.還有更多特性 目前沒法講
title
滑鼠懸浮在圖片上自動展示的文字
alt
圖片載入失敗提示的資訊
width\height
圖片的尺寸 兩者調整一個即可 等比例縮放
十二、列表標籤
無序列表
<ul>
<li>手機</li>
<li>衣物</li>
<li>電子</li>
</ul>
ps:頁面上所有有規則排列的橫向或者豎向的資料 一般使用的都是無序列表
有序列表
<ol type="I">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
ps:還可以通過type豎向切換數字
標題列表
<dl>
<dt>大標題</dt>
<dd>小標題1</dd>
<dd>小標題2</dd>
<dt>大標題</dt>
<dd>小標題1</dd>
<dd>小標題2</dd>
<dd>小標題3</dd>
</dl>
十三、表格標籤
1.先寫基本骨架
<table>
<thead></thead>
<tbody></tbody>
</table>
2.再寫表頭及表單資料
<tr> 一個tr標籤就表示一行
<th>編號</th> th主要用於表頭欄位中 用來加粗顯示
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>1</td> td主要用於表達資料中
<td>jason</td>
<td>18</td>
</tr>
<table>
<thead>
<tr>
<th>編號</th>
<th>姓名</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jason</td>
<td>18</td>
</tr>
</tbody>
</table>
十四、表單標籤
可以獲取到使用者的資料併發送給服務端
form標籤
action 控制資料的提交地址
method 控制資料的提交方法
input標籤(類似於前端的變形金剛)
type屬性
text 普通文字
password 密文展示
date 日期選項
email 郵箱格式
radio 單選
checkbox 多選
file 檔案
submit 觸發提交動作
reset 重置表單內容
button 暫無任何功能
select標籤 下拉框
option標籤 一個個選項
textarea標籤 獲取大段文字
input標籤應該有name屬性
name屬性相當於字典的鍵 input標籤獲取到的使用者資料相當於字典的值
點擊發送就會組織成字典的形式傳送給服務端 這樣才具有明確意義
十五、作業
1.整理今日內容及部落格
2.熟練所有的html標籤
3.嘗試搜尋form表單內標籤其他特性
4.預習css內容