【目錄】
一、前端開發工具簡介
二、前端基礎
1、什么是前端
2、前端學習歷程
3、HTTP協議
三、HTML
1、HTML簡介
2、HTML檔案結構
3、HTML標簽分類（一）
4、HTML標簽分類（二）
5、特殊符號
6、其他常用標簽
一、前端開發工具簡介
參考閱讀：
https://www.cnblogs.com/xiaoyuanqujing/articles/11669889.html
https://www.cnblogs.com/xiaoyuanqujing/articles/11669962.html
還推薦微軟的 VScode，也是一款強大且免費的軟體，亦支持前端開發，
二、前端基礎
1、什么是前端——所見即所得
任何與用戶直接打交道的操作界面都可以稱之為前端
比如:電腦界面 手機界面 平板界面什么是后端
后端類似于幕后操作者(一堆讓人頭皮發麻的代碼)
不直接跟用戶打交道
2、前端學習歷程
HTML:網頁的骨架 沒有任何的樣式
CSS:給骨架添加各種樣式 變得好看
Java Script:控制網頁的動態效果前端框架:BOOTSTRAP、JQuery、Vue
提前給你封裝好了很多操作 你只需要按照固定的語法呼叫即可
3、HTTP協議
# 瀏覽器視窗輸入網址回車發生了幾件事:
"""
1 瀏覽器朝服務端發送請求
2 服務端接受請求 (eg:請求百度首頁)
3 服務端回傳相應的回應 (eg:回傳一個百度首頁)
4 瀏覽器接收回應 根據特定的規則渲染頁面展示給用戶看
"""# 瀏覽器可以充當很多服務端的客戶端
百度 騰訊視頻 優酷視頻....
# 如何做到瀏覽器能夠跟多個不同的客戶端之間進行資料互動？
1.瀏覽器很牛逼 能夠自動識別不同服務端做不同處理
2.制定一個統一的標準 如果你想要讓你寫的服務端能夠跟客戶端之間做正常的資料互動
那么你就必須要遵循一些規則——因此誕生了 HTTP協議
"""
HTTP協議，即 超文本傳輸協議 用來規定 服務端和瀏覽器之間的資料互動的格式...
該協議你可以不遵循 但是你寫的服務端就不能被瀏覽器正常訪問 你就自己跟自己玩
你就自己寫客戶端 用戶想要使用 就下載你專門的app即可
"""
# 四大特性
1.基于請求回應
2.基于TCP/IP 作用于應用層之上的協議
3.無狀態——不保存用戶的資訊
eg:一個人來了一千次 你都記不住 每次都當他如初見
由于HTTP協議是無狀態的 所以后續出現了一些專門用來記錄用戶狀態的技術
cookie、session、token...
4.無/短鏈接
請求來一次我回應一次 之后我們兩個就沒有任何鏈接和關系了
長鏈接:雙方建立連接之后默認不斷開 websocket(后面講專案的時候會講)
# 請求資料格式 （請求頭 和 請求體 之間，是有一行空行的）
請求首行 \r\n (標識HTTP協議版本，當前請求方式)
請求頭 \r\n (一大堆k,v鍵值對)
\r\n
請求體 \r\n (并不是所有的請求方式都有get沒有post有 存放的是post請求提交的敏感資料)
# 回應資料格式（回應頭 和 回應體 之間，是有一行空行的）回應首行 \r\n (標識HTTP協議版本，回應狀態碼)
回應頭 \r\n (一大堆k,v鍵值對)
\r\n
回應體 \r\n (回傳給瀏覽器展示給用戶看的資料)
# 回應狀態碼
用一串簡單的數字來表示一些復雜的狀態或者描述性資訊 ：1XX:服務端已經成功接收到了你的資料正在處理，你可以繼續提交額外的資料
2XX:服務端成功回應了你想要的資料(200 OK請求成功)
3XX:重定向(當你在訪問一個需要登陸之后才能看的頁面 你會發現會自動跳轉到登陸頁面)
4XX:請求錯誤
404:請求資源不存在
403:當前請求不合法或者不符合訪問資源的條件
5XX:服務器內部錯誤(500)
# 請求方式
1.get請求
朝服務端要資料
eg:輸入網址獲取對應的內容
2.post請求
朝服務端提交資料
eg:用戶登陸 輸入用戶名和密碼之后 提交到服務端后端做身份校驗# url:統一資源定位符(大白話 網址)
三、HTML
1、HTML簡介
超文本標記語言——HTML （Hypertext Markup Language）
如果你想要讓瀏覽器能夠渲染出你寫的頁面，你就必須遵循HTML語法
我們瀏覽器看到的頁面，內部其實都是HTML代碼(所有的網站內部都是HTML代碼)
HTML就是書寫網頁的一套標準
# 注釋:注釋是代碼之母
<!--單行注釋-->
<!--
多行注釋1
多行注釋2
多行注釋3
-->
由于HTML代碼非常的雜亂無章并且很多，所以我們習慣性的用注釋來劃定區域方便后續的查找：
<!--導航條開始-->
導航條所有的html代碼
<!--導航條結束-->
<!--左側選單欄開始-->
左側選單欄的HTMl代碼
<!--左側選單欄結束-->
2、HTML檔案結構
<html> <head></head>:head內的標簽不是給用戶看的 而是定義一些配置主要是給瀏覽器看的 <body></body>:body內的標簽 寫什么瀏覽器就渲染什么 用戶就能看到什么</html>
PS:檔案的后綴名其實是給用戶看到的，只不過對應不同的 檔案后綴名有不同的軟體來處理并添加很多功能
注意:
HTML代碼是沒有格式的，可以全部寫在一行都沒有問題，只不過我們習慣了縮進來表示代碼
在書寫HTML代碼的時候 你只需要寫標簽名 然后tab就能自動補全
兩種打開HTML檔案的方式
找到檔案所在的位置右鍵選擇瀏覽器打開
在pycharm內部，集成了自動呼叫瀏覽器的功能，直接點擊即可(前提是你的電腦上安裝了對應的瀏覽器) 直接全部使用谷歌瀏覽器
3、HTML標簽分類（一）——單標簽 和 雙標簽
（1）分類
1 雙標簽
<h1></h1>
<a href="https://www.mzitu.com/"></a>2 單標簽(自閉和標簽)
<img />
<br />
4、HTML標簽分類（二）——塊級標簽 & 行內標簽
# 1 塊兒級標簽:獨占一行
h1~h6 p div
1 塊兒級標簽可以修改長寬 行內標簽不可以 修改了也不會變化
2 塊兒級標簽內部可以嵌套任意的塊兒級標簽和行內標簽
但是p標簽雖然是塊兒級標簽 但是它只能嵌套行內標簽 不能嵌套塊兒級標簽
如果你套了 問題也不大 因為瀏覽器會自動幫你解開(瀏覽器是直接面向用戶的 不會輕易的報錯 哪怕有報錯用戶也基本感覺不出來)
總結:
只要是塊兒級標簽都可以嵌套任意的塊兒級標簽和行內標簽
但是p標簽只能嵌套行內標簽（HTML書寫規范）
# 2 行內標簽:自身文本多大就占多大
i u s b span
行內標簽不能嵌套塊兒級標簽 可以嵌套行內標簽
HTML 常用標簽匯總：
https://www.cnblogs.com/bigorangecc/p/12874484.html
參考閱讀：
https://www.cnblogs.com/xiaoyuanqujing/articles/11669913.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/39089.html
標籤：Html/Css