HTML:網頁的骨架 沒有任何的樣式
CSS:給骨架添加各種樣式 變得好看
JS:控制網頁的動态效果
前端架構:BOOTSTRAP、JQuery、Vue
提前給你封裝好了很多操作 你隻需要按照固定的文法調用即可 軟體開發架構
cs 用戶端 服務端
bs 浏覽器 服務端
ps:bs本質也是cs 浏覽器視窗輸入網址回車發生了幾件事
"""
1 浏覽器朝服務端發送請求
2 服務端接受請求(eg:請求百度首頁)
3 服務端傳回相應的響應(eg:傳回一個百度首頁)
4 浏覽器接收響應 根據特定的規則渲染頁面展示給使用者看
"""
浏覽器可以充當很多服務端的用戶端
百度 騰訊視訊 優酷視訊....
如何做到浏覽器能夠跟多個不同的用戶端之間進行資料互動？
1.浏覽器很牛逼 能夠自動識别不同服務端做不同處理
2.制定一個統一的标準 如果你想要讓你寫的服務端能夠跟用戶端之間做正常的資料互動
那麼你就必須要遵循一些規則 HTTP協定
"""
超文本傳輸協定 用來規定服務端和浏覽器之間的資料互動的格式...
該協定你可以不遵循 但是你寫的服務端就不能被浏覽器正常通路 你就自己跟自己玩
你就自己寫用戶端 使用者想要使用 就下載下傳你專門的app即可
"""
# 四大特性
1.基于請求響應
2.基于TCP/IP作用于應用層之上的協定
3.無狀态
不儲存使用者的資訊
eg:一個人來了一千次 你都記不住 每次都當他如初見
由于HTTP協定是無狀态的 是以後續出現了一些專門用來記錄使用者狀态的技術
cookie、session、token...
4.無/短連結
請求來一次我響應一次 之後我們兩個就沒有任何連結和關系了
長連結:雙方建立連接配接之後預設不斷開 websocket(後面講項目的時候會講)
# 請求資料格式
請求首行(辨別HTTP協定版本，目前請求方式)
請求頭(一大堆k,v鍵值對)
請求體(并不是所有的請求方式都有get沒有post有 存放的是post請求送出的敏感資料)
# 響應資料格式
響應首行(辨別HTTP協定版本，響應狀态碼)
響應頭(一大堆k,v鍵值對)
響應體(傳回給浏覽器展示給使用者看的資料)
# 響應狀态碼
用一串簡單的數字來表示一些複雜的狀态或者描述性資訊 404:請求資源不存在
1XX:服務端已經成功接收到了你的資料正在處理，你可以繼續送出額外的資料
2XX:服務端成功響應了你想要的資料(200 OK請求成功)
3XX:重定向(當你在通路一個需要登陸之後才能看的頁面 你會發現會自動跳轉到登陸頁面)
4XX:請求錯誤
404:請求資源不存在
403:目前請求不合法或者不符合通路資源的條件
5XX:伺服器内部錯誤(500)
# 請求方式
1.get請求
朝服務端要資料
eg:輸入網址擷取對應的内容
2.post請求
朝服務端送出資料
eg:使用者登陸 輸入使用者名和密碼之後 送出到服務端後端做身份校驗
# url:統一資源定位符(大白話 網址) HTML簡介
超文本标記語言
如果你想要讓浏覽器能夠渲染出你寫的頁面。你就必須遵循HTML文法
我們浏覽器看到的頁面，内部其實都是HTML代碼(所有的網站内部都是HTML代碼)
hello big baby~
<a rel="nofollow" href="https://www.mzitu.com/">click me！give you some color to see see！</a>
<img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2159057472,1466656787&fm=26&gp=0.jpg" /> HTML就是書寫網頁的一套标準
# 注釋:注釋是代碼之母
<!--單行注釋-->
<!--
多行注釋1
多行注釋2
多行注釋3
-->
由于HTML代碼非常的雜亂無章并且很多，是以我們習慣性的用注釋來劃定區域友善後續的查找
<!--導覽列開始-->
導覽列所有的html代碼
<!--導覽列結束-->
<!--左側菜單欄開始-->
左側菜單欄的HTMl代碼
<!--左側菜單欄結束--> HTML文檔結構
<html>
<head></head>:head内的标簽不是給使用者看的 而是定義一些配置主要是給浏覽器看的
<body></body>:body内的标簽 寫什麼浏覽器就渲染什麼 使用者就能看到什麼
</html> PS:檔案的字尾名其實是給使用者看到的，隻不過對應不同的 檔案字尾名有不同的軟體來處理并添加很多功能
注意:HTML代碼是沒有格式的，可以全部寫在一行都沒有問題，隻不過我們習慣了縮進來表示代碼
兩種打開HTML檔案的方式
- 找到檔案所在的位置右鍵選擇浏覽器打開
- 在pycharm内部，內建了自動調用浏覽器的功能，直接點選即可(前提是你的電腦上安裝了對應的浏覽器) 直接全部使用火狐浏覽器
标簽的分類1
<a rel="nofollow" href="https://www.mzitu.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="淘寶,掏寶,網上購物,C2C,線上交易,交易市場,網上交易,交易市場,網上買,網上賣,購物網站,團購,網上貿易,安全購物,電子商務,放心買,供應,買賣資訊,網店,一口價,拍賣,網上開店,網絡購物,打折,免費開店,網購,頻道,店鋪"> 當你在用浏覽器搜尋的時候 隻要輸入了keywords後面指定的關鍵字那麼該網頁都有可能被百度搜尋出來展示給使用者
<meta name="keyword" content="淘寶,掏寶,網上購物,C2C,線上交易,交易市場,網上交易,交易市場,網上買,網上賣,購物網站,團購,網上貿易,安全購物,電子商務,放心買,供應,買賣資訊,網店,一口價,拍賣,網上開店,網絡購物,打折,免費開店,網購,頻道,店鋪">
<meta name="description" content="淘寶網 - 亞洲較大的網上交易平台，提供各類服飾、美容、家居、數位、話費/點卡充值… 數億優質商品，同時提供擔保交易(先收貨後付款)等安全交易保障服務，并由商家提供退貨承諾、破損補寄等消費者保障服務，讓你安心享受網上購物樂趣！"> 網頁的描述性資訊 body内常用标簽
你肉眼能夠在浏覽器上面看到的花裡胡哨的頁面。内部都是HTML代碼
基本标簽
我是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="這是我的前女友"
當圖檔加載不出來的時候 給圖檔的描述性資訊
title="新垣結衣"
當滑鼠懸浮到圖檔上之後 自動展示的提示資訊
height="800px"
width=""
高度和寬度當你隻修改一個的時候 另外一個參數會等比例縮放
如果你修改了兩個參數 并且沒有考慮比例的問題 那麼圖檔就會失真 a标簽
# 連結标簽
<a rel="nofollow" href=""></a>
"""
當a标簽指定的網址從來沒有被點選過 那麼a标簽的字型顔色是藍色
如果點選過了就會是紫色（浏覽器給你記憶了）
"""
href
1.放url，使用者點選就會跳轉到該url頁面
2.放其他标簽的id值 點選即可跳轉到對應的标簽位置
target
預設a标簽是在目前頁面完成跳轉 _self
你也可以修改為建立頁面跳轉 _blank
# a标簽的錨點功能
"""eg:點選一個文本标題 頁面自動跳轉到标題對應的内容區域"""
<a rel="nofollow" href="" id="d1">頂部</a>
hello world
<div style="height: 1000px;background-color: red"></div>
<a rel="nofollow" href="" id="d2">中間</a>
<div style="height: 1000px;background-color: greenyellow"></div>
<a rel="nofollow" href="#d1">底部</a>
<a rel="nofollow" href="#d2">回到中間</a>
<a rel="nofollow" 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> 1 A I a ... 參考部落格了機即可 -
<dl> <dt>标題1</dt> <dd>内容1</dd> <dt>标題2</dt> <dd>内容2</dd> <dt>标題3</dt> <dd>内容3</dd> </dl>
總結
"""
學習前端就是死記硬背 思想關聯一定要改變
學習HTML的時候 它是一門标記語言
你在學的時候 你就記每一個标簽到底表示什麼意思
p
h
""" ![Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)