前端基礎和HTML
前端基礎和HTML
一、什麼是前端
任何與用戶直接打交道的操做界面均可以稱之爲是一個前端css
- 電腦顯示界面
- 手機界面
- Ipad
二、web服務的本質
瀏覽器窗口輸入一個網址回車進入作了哪些事：html
- 朝着指定的服務端發送請求
- 服務端接收請求
- 服務端返回響應
- 瀏覽器接收響應按照特定的規則渲染展現給用戶
三、HTTP協議
超文本傳輸協議（HTTP協議）：規定了瀏覽器與服務端之間數據的傳輸格式前端
HTTP/1.x 有鏈接沒法複用、隊頭阻塞、協議開銷大和安全因素等多個缺陷。web
HTTP/2 經過多路複用、二進制流、Header 壓縮等等技術，極大地提升了性能,http2會慢慢取代HTTP/1.x 而被普遍採用。後端
一、四大特性
- 基於請求響應：一次請求一次響應
- 基於TCP/IP做用域應用層之上的協議
- 無狀態
- 不保留客戶端的狀態
- 不管來多少次都待你如初見
- 能夠用cookie session token ...來保留狀態
- 無鏈接：長連接：websocket（相似於HTTP協議的大補丁）聊天室相關
二、數據格式
-
請求格式瀏覽器
-
請求首行（請求方式，協議版本）安全
-
請求頭（一大堆k, v 鍵值對）服務器
-
空行websocket
-
請求體（攜帶的數據 並非一直都有，有時候多是空的，取決於你的請求方式）cookie
-
-
響應格式
- 響應首行（響應狀態碼）
- 響應頭（一大堆k, v 鍵值對）
- 空行
- 響應體（瀏覽器展現給用戶看的數據）
三、響應狀態碼
用數字來表示一大堆提示信息
- 1XX：服務端已經接收到客戶端的信息，正在處理，你能夠繼續提交
- 2XX：200請求成功，服務端已經返回了數據
- 3XX：重定向（本來想訪問A的內部自動轉到B上面）
- 4XX：404請求資源不存在，403不具有請求該資源的條件
- 5XX：500服務端內部的錯誤， 機房問題
四、請求方式
一、get請求
朝服務端要資源（獲取數據），相似於瀏覽器窗口輸入輸入網址獲取數據
二、post請求
朝服務端提交數據（提交數據），相似於登陸註冊功能
五、HTML
超文本標記語言
讓你的頁面被瀏覽器打開展現的更加好看
瀏覽器能識別的語言：HTML / XML，CSS，JS
XML也能夠書寫前端頁面，主要用於odoo框架，書寫企業內部管理軟件（ERP）
書寫HTML標籤的時候，只須要寫標籤的名字+tab鍵會自動補全，emmet插件
一、HTML註釋
註釋是代碼之母
單行註釋：<!--單行--> 多行註釋:<!-- 多行註釋1 多行註釋2 -->
因爲HTML頁面結構比較複雜，內容比較多，不便於後期維護，一般在寫頁面的時候習慣用下面的方式來劃分代碼區域
<!--頂部導航條樣式開始--> <!--頂部導航條樣式結束--> <!--左側菜單欄樣式開始--> <!--左側菜單欄樣式結束-->
二、HTML文檔結構
<html>
<head>
head裏面放的是給瀏覽器去識別作相應的操做
</head>
<body>
body裏面放的內容是瀏覽器展現給用戶看到的頁面
</body>
</html>
三、HTML文檔打開方式
- pycharm自動調用瀏覽器打開
- 手動找到路徑以後選擇瀏覽器打開
四、標籤的分類
分類1：
- 雙標籤
- 自閉和標籤
分類2：
- 塊級標籤：獨佔一行，h1~h6 p br div
- 塊級標籤內部能夠嵌套任意的塊級標籤和行內標籤
- 特例：p標籤內部只能嵌套行內標籤，不能嵌套塊級標籤，不符合規範
- 行內標籤：u s i b span
- 自身文本多大就佔多大
- 行內標籤內部不能嵌套塊級標籤和行內標籤
五、head內經常使用標籤
title：定義網頁標題
style：內部支持直接寫CSS代碼
link：引入外部的css文件
script：1. 內部能夠直接編寫js代碼
2. 能夠經過src 屬性引用外部js代碼
meta：
meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不一樣的屬性又有不一樣的參數值，這些不一樣的參數值就實現了不一樣的網頁功能。
一、http-equiv屬性：至關於http的文件頭做用，它能夠向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值。
<!--指定文檔的編碼類型(須要知道)--> <meta http-equiv="content-Type" charset=UTF8"> <!--2秒後跳轉到對應的網址，注意引號(瞭解)--> <meta http-equiv="refresh" content="2;URL=https://www.baidu.com"> <!--告訴IE以最高級模式渲染文檔(瞭解)--> <meta http-equiv="x-ua-compatible" content="IE=edge">
二、name屬性: 主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉"> <meta name="description" content="百度搜索，你一切想知道的">
url：統一資源定位符
六、body經常使用標籤
展現給用戶看見的頁面
一、基本標籤
h1~h6：標題標籤
s：刪除線
b：加粗
u：下劃線
i：斜體
br：換行
hr：分割線
p：獨佔一行
<body> <h1>標題1</h1> <h2>標題2</h2> <h3>標題3</h3> <h4>標題4</h4> <h5>標題5</h5> <h6>標題6</h6> <s>文本內容</s> <b>文本內容</b> <u>文本內容</u> <i>文本內容</i> <hr> <p>文本內容1</p> <br> <p>文本內容2</p> </body>
二、特殊符號
4個空格（有幾個空格寫幾個 ) <p>a大於b a> b</p> <p>a小於b a< b</p> <p>a&b a& b</p> <p>人民幣 ¥ 100000000</p> <p>版權註冊 © </p> <p>註冊商標 ® </p>
三、經常使用標籤
一、div 塊級標籤，span行內標籤，自己沒有特殊意義，但常用，用做前期的頁面佈局
二、img 圖片標籤
一、src
能夠寫一個網站的圖片地址
能夠寫本地的圖片地址
url（自動向url發送的get請求要數據）
二、alt：當圖片加載不出來的時候默認展現的提示信息
三、title：當鼠標懸浮在圖片上面的時候，展現的信息
四、width、height 修改一個另外一個也會等比例縮放，保證圖片不失真，若是兩個都修改可能會圖片失真
三、a 連接標籤
一、href ：放一個url會自動跳轉到該url所對應的資源
二、target ：控制是否在當前頁跳轉，默認是在當前頁跳轉（_self）新建頁面跳轉 _ balnk
三、錨點功能 ：href不僅僅能夠寫url也能夠寫另外一個a標籤id值，點擊該id值所對應的a標籤所在的位置
<body> <img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=748160848,4000382317&fm=173&app=49&f=JPEG?w=450&h=338&s=D5832FF5A997D8CEC391E559030040F3" alt="這是一張小區圖片" title="小區" width="500xp"> <a href="https://www.mzitu.com" id="d1" target="_blank">點擊進入</a> <p>111</p> <a href="#d1">回到id是d1的位置</a> </body>
標籤應該具有的屬性：
一、id屬性：相似於身份證號，用來惟一標識HTML中的某一個標籤，在同一個HTML中id值不能相同
二、class屬性：相似於面向對象的繼承，直接引用別的類的樣式
四、列表標籤
無序列表（較多）：
ul li ：只要頁面上出現了比較有規則的排列文本基本上均可以用無序列表來實現
有序列表：
ol li
標題列表：
dl dt 標題 dd內容
<ul>
<li>無序列表1</li>
<li>無序列表2</li>
<li>無序列表3</li>
</ul>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表2</li>
</ol>
<dl>
<dt>標題1</dt>
<dd>內容1</dd>
<dt>標題2</dt>
<dd>內容1</dd>
</dl>
五、表格標籤
展現網站數據的時候，通常狀況下可使用表格標籤
表格標籤，先寫結構，再寫數據
一個tr就是一行
th和td之分：th加粗，td不加粗，表頭通常用th，內容通常用td
- border: 表格邊框.
- cellpadding: 內邊距
- cellspacing: 外邊距.
- width: 像素 百分比.（最好經過css來設置長寬）
- rowspan: 單元格豎跨多少行
- colspan: 單元格橫跨多少列（即合併單元格）
<table border="5"> <!-- border將表格加上線框，外部線寬是5-->
<thead>
<tr>
<th>用戶名</th>
<th>密碼</th>
<th>性別</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mr沈</td>
<td>123</td>
<td>male</td>
</tr>
<tr>
<td>Vicky</td>
<td>123</td>
<td>female</td>
</tr>
</tbody>
</table>
六、表單標籤
form標籤：獲取用戶輸入，而且將數據打包發送給後端
關鍵性的屬性參數：
action參數：用來控制數據提交的路徑（到底朝哪一個後端服務器提交數據）
三種寫法：
一、不寫 ，默認就是朝當前該頁面所在的地址提交數據
二、全路徑（https://www.baidu.com）
三、只寫路徑後綴（/index/)
method參數：用來控制數據的提交（get / post）路徑
form表單默認是get請求 method = 'get'，能夠指定post請求 method = 'post'
get請求可以攜帶參數，但參數的攜帶方式是直接跟在url後面的url?xxx=ooo&yyy=bbb&lll=ccc
特色：一、數據全是明文。二、數據大小有限制。三、get請求不該該攜帶隱私信息
enctype參數：用來控制數據提交時的編碼格式
默認form表單是不能直接發送文件的，將給默認值改成enctype = 'url_encoded' 改成 enctype = 'formdata' 就能夠發送文件
一、input：獲取用戶輸入，該標籤是一個行內標籤
label一般是配合input一塊兒使用的
for用來填寫對應的input標籤id值
點擊label標籤內的內容 會自動讓對應的input標籤 聚焦
<form action="">
<!-- label是格式規範使用，不寫也不要緊-->
<p><label for="d1">用戶名：<input type="text" id="d1" name="username"></label></p>
<p><label for="d2">密碼：<input type="password" id="d2" name="password"></label></p>
<p><label for="d3">生日：<input type="date" id="d3" name="date"></label></p>
<p><label for="">性別：
男：<input type="radio" name="sex">
女：<input type="radio" name="sex" checked>
</label></p>
<p><label for="">愛好：
籃球：<input type="checkbox" name="hobby">
乒乓球：<input type="checkbox" name="hobby">
羽毛球：<input type="checkbox" name="hobby">
高爾夫：<input type="checkbox" name="hobby">
</label></p>
<p>省份：<select name="province" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">廣東</option>
</select></p>
<!-- mutiple 可讓多選-->
<p>老師：<select name="" id="" multiple>
<option value="" selected>tank</option>
<option value="">sean</option>
<!-- 設置默認值 在value後加一個selected-->
<option value="" selected>Jason</option>
</select></p>
<!-- textarea多行文本-->
<p>我的簡介：<label for=""><textarea name="" id="" cols="30" rows="10"></textarea></label></p>
<p>我的簡歷：<input type="file" value="上傳文件"></p>
<!-- 提交數據-->
<input type="submit" value="提交按鈕1">
<button>提交按鈕2</button>
<!-- 普通按鈕，沒有任何效果-->
<p><input type="button" value="普通按鈕"></p>
<!-- 重置按鈕-->
<input type="reset" value="重置">
</form>
屬性說明:
-
name：表單提交時的「鍵」，提交給服務端至關於字典中的key
-
value：獲取用戶輸入的標籤，存放用戶輸入的，至關於字典中的value
-
checked：radio和checkbox默認被選中的項
默認選種 checked="checked"
當標籤的屬性名和屬性值相同的時候 能夠只寫屬性名 女<input type="radio" name="gender" checked="checked"> 簡寫 女<input type="radio" name="gender" checked>
-
給input設置默認：直接在input中value加屬性值
-
placeholder：給input框加提示信息， placeholder='用戶名'
-
readonly：text和password設置只讀
-
disabled：禁用
可以觸發form表單提交數據的按鈕
<input type="submit"> 能夠經過value屬性來指定按鈕文本內容 <input type="submit" value="註冊"> <button>點我</button>
二、select：下拉框
默認是單選的能夠加一個multiple改爲多選
設置在value後selected爲默認選擇
屬性說明：
- name：名稱
- rows：行數
- cols：列數
- disabled：禁用
- 1. 前端html和css基礎
- 2. 前端基礎-HTML
- 3. 前端基礎html
- 4. 前端基礎 - HTML
- 5. 前端-HTML基礎
- 6. 前端基礎-- HTML
- 7. 前端基礎HTML
- 8. 前端基礎——HTML
- 9. 前端--HTML基礎
- 10. 前端基礎-前端面試（HTML-2）
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Kotlin學習（二）基本類型
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 前端html和css基礎
- 2. 前端基礎-HTML
- 3. 前端基礎html
- 4. 前端基礎 - HTML
- 5. 前端-HTML基礎
- 6. 前端基礎-- HTML
- 7. 前端基礎HTML
- 8. 前端基礎——HTML
- 9. 前端--HTML基礎
- 10. 前端基礎-前端面試（HTML-2）