初始前端
初始前端
1、奪命三問
- 理論知識
1、什麼是前端？
任何與用戶直接打交道的界面均可以稱之爲是一個前端
好比：
- 電腦顯示界面
- 手機界面
- iPad
2、爲何要學前端？
技多不壓身
軟件開發架構
cs
bs(bs本質就是cs)
web服務的本質
瀏覽器窗口輸入一個網址而後敲回車鍵發生了那些事
一、朝着指定的服務端發送請求
二、服務端接收相應的請求
三、服務端返回相應的響應
四、瀏覽器接收響應 按照特定的規則渲染頁面展現給用戶看
2、HTTP協議
- 四大特性
一、四大特性
一、基於請求響應
一次請求對應一次響應
二、基於TCP/IP做用於應用層之上的協議
三、無狀態
不保留客戶端的狀態
不管你來多少次 我都待你如初見
cookie session token...
四、無鏈接
長鏈接 websocket（相似於http協議的大補丁） 好比：聊天室相關
- 數據格式
請求格式
請求首行（請求方式，協議版本）
請求頭（一大推k,v鍵值對）
請求方式：
一、get請求
朝服務端要資源（獲取數據）
相似於瀏覽器窗口輸入www.baidu.com獲取百度首頁
二、post請求
朝服務端提交數據（提交數據）
相似於登陸註冊功能
請求體（攜帶的數據 並非一直都有 有時候多是空的 取決於你的請求方式）
響應格式
響應首行
響應頭（一大推k,v鍵值對）
響應體（瀏覽器展現給用戶看的數據）
- 響應狀態碼
用數字來表示一大推展現信息
1XX:服務端已經成功接收到客戶端的數據正在處理 你也能夠繼續提交
2xx:200請求成功 服務端已經返回了你想要的數據
3xx:重定向（本來想訪問A, 可是內部自動給你傳到了轉到B上面）
4xx:404請求資源不存在，403資源存在可是當前你不具有請求該資源的條件
5xx:500服務端內部錯誤 可能機房着火了，也可能機房死機了， 或爆炸了
公司內部能夠本身定製本身的響應狀態碼
3、HTML
- 超文本標記語言
在學習HTML的時候 你只須要記住每個標籤是什麼意思就能夠了
若是你想讓你的頁面可以被瀏覽器識別而且展現出好看的樣子 你就必需要寫HTML代碼
瀏覽器可以識別的語言很是少
HTML/XML css js
擴展知識點：XML也能夠書寫前端頁面 主要用於odoo框架中 書寫企業內部管理軟軟件（ERP）
- html註釋
HTML註釋
註釋是代碼之母
單行註釋：<!--單行-->
多行註釋：<!--
多行註釋1
多行註釋2
-->
補充：因爲HTML頁面結構比較複雜 內容比較多 不便於後期的維護 修改
一般在寫頁面的時候 習慣於 用下面的方式來人爲的 劃分代碼區域
<!--頂部導航樣式開始-->
<!--頂部導航樣式結束-->
<!--左側導航樣式開始-->
<!--左側導航樣式開始-->
HTML文檔結構
<html>
<head></head>: head內放的內容不是給用戶看的，是給瀏覽器去識別相應操做的
<body></body>:body內存放的內容就是瀏覽器展現給用戶看到的花裏胡哨的頁面
</html>
HTML文檔打開方式
一、pycharm自動調用瀏覽器打開（推薦）
二、手動查找路徑以後選擇瀏覽器打開
標籤的分類1：
一、雙標籤
二、自閉和標籤
- 第一個HTML代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>亞洲最大的xxx網站</title>
<meta http-equiv="refresh" content="5;URL=https://www.oldboyedu.com">
</head>
<body>
<h1>
hello big big baby~
</h1>
<a href="https://www.mzitu.com">click me</a>
<img src="https://i.meizitu.net/thumbs/2019/12/216914_23b13_236.jpg" alt="">
</body>
</html>
4、head內經常使用的標籤
- 經常使用標籤
title：定義網頁標題
style：內部支持直接寫css代碼
link:引入外部的css文件
script:
一、內部能夠直接編寫js
二、能夠經過src屬性引用外部js代碼
meta：
name屬性
keywords
description
什麼是URL？
URL：統一資源定位符
5、body內經常使用標籤
- 經常使用標籤
你所看到的花裏胡哨的頁面 其實內部都是HTML代碼 很醜很亂
基本標籤
h1~h6:標題標籤
s:刪除線
b:加粗
u:下劃線
i:斜體
p:獨佔一行
br:換行
hr:分隔符
特殊符號
空格
<h1>001</h1> # 1級標題
<h2>002</h2> # 2級標題
<h3>003</h3> # 3級標題
<h4>004</h4> # 4級標題
<h5>005</h5> # 5級標題
<h6>006</h6> # 6級標題
我是普通文本
<s>我是s</s> # s刪除線
<u>我是u</u> # u下劃線
<b>我是b</b> # b 加粗
<i>我是i</i> # i 斜體
<p>天生我才必有用 莫使金樽空對月</p> # 空格符一個表明空一格
<br> # 換行符
<p>天生我才必有用 莫使金樽空對月</p>
<hr> # 分隔符
<p>天生我才必有用 莫使金樽空對月</p>
<p>天生我才必有用 莫使金樽空對月</p>
<p>a 大於 b a > b</p> # a > b
<p>a 小於 b a < b</p> # a < b
<p>a&b a & b</p> # a 交 b
<p>人民幣 ¥ 1000000000</p> # ￥
<p>版權標識 ©</p>
<p>註冊商標 ®</p>
經常使用標籤
div 塊兒級標籤
span 行內標籤
注：這兩個標籤自己沒有任何特殊意義，可是這兩個標籤確實用的最多的 由於這兩個標籤是用來作前期的頁面佈局的
img 圖片標籤
src
一、能夠寫一個網站圖片地址
二、還能夠寫本地的圖片地址
三、url（自動朝該url發送get請求要數據）
alt
當圖片加載不出來的時候 默認展現的提示信息
title
當鼠標懸浮在圖片上的時候 展現的提示信息
width，height
修改一個 另外一個會自動等比例縮放
若兩個都修改圖片就會失真
a 連接標籤
href
一、放一個url
點擊就會跳到該url所對應的資源
target
控制是否在當前頁跳轉
默認是在當前頁跳轉
_self
新建頁跳轉
_blank
錯點功能
href不僅僅是能夠寫url 也能夠寫另一個a標籤的id值
點擊就會跳轉到該id值所對應的a標籤所在的位置
標籤應該具有的屬性
一、id屬性：相似於身份證號 用來惟一標識當前HTML頁面的某一個標籤
在同一個HTML頁面中 id值不能重複
二、class屬性：相似於面向對象的繼承
直接引用別的類的方式
- body類經常使用標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>001</h1> # 1級標題
<h2>002</h2> # 2級標題
<h3>003</h3> # 3級標題
<h4>004</h4> # 4級標題
<h5>005</h5> # 5級標題
<h6>006</h6> # 6級標題
我是普通文本
<s>我是s</s> # s刪除線
<u>我是u</u> # u下劃線
<b>我是b</b> # b 加粗
<i>我是i</i> # i 斜體
<p>天生我才必有用 莫使金樽空對月</p> # 空格符一個表明空一格
<br> # 換行符
<p>天生我才必有用 莫使金樽空對月</p>
<hr> # 分隔符
<p>天生我才必有用 莫使金樽空對月</p>
<p>天生我才必有用 莫使金樽空對月</p>
<p>a 大於 b a > b</p> # a > b
<p>a 小於 b a < b</p> # a < b
<p>a&b a & b</p> # a 交 b
<p>人民幣 ¥ 1000000000</p> # ￥
<p>版權標識 ©</p>
<p>註冊商標 ®</p>
</body>
</html>
- 經常使用標籤1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div>
<div>
<p>
<a href=""></a>
<s></s>
</p>
</div>
</div>
</div>
<p>
我是p
<a href="">alshfkaak</a>
</p>
<a href="">111
<a href=""></a>
</a>
</body>
</html>
- 經常使用標籤2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="https://i.meizitu.net/thumbs/2019/12/201498_05a05_236.jpg" alt="這是一張美女圖片" width="150px">
<img src="download.jpg" alt="這是個葫蘆娃專門收妖精" width="200px">
<a href="https://www.mzitu.com/" target="_self" id="" class="">點我有你好看的哦</a>
<a href="https://www.mzitu.com/" target="_blank">點我有你好看的哦</a>
<a href="" id="d1">頁首</a>
<div style="height: 150px;background-color: red"></div>
<a href="" id="d2">中間</a>
<div style="height: 150px;background-color: green"></div>
<a href="#d1">回到頂部</a> # 點擊能夠回到頁首
<a href="#d2">回到中間</a> # 點擊能夠回到中間
</body>
</html>
6、列表標籤
- 列表標籤
無序列表（較多）
ul
li
只要頁面上出現了比較有規則排列的文本 基本上均可以用無序列表來實現
有序列表
ol
li
標題列表
dl
dt標題
dd內容
- 列表標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>無序列表</p>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<p>有序列表</p>
<ol type="1">
<li>哈哈哈</li>
<li>呵呵呵</li>
<li>嘿嘿嘿</li>
</ol>
<p>標題列表</p>
<dl>
<dt>標題1</dt>
<dd>內容1</dd>
<dd>內容2</dd>
<dt>標題2</dt>
<dd>內容1</dd>
<dd>內容2</dd>
<dt>標題3</dt>
<dd>內容1</dd>
<dd>內容2</dd>
<dd>內容3</dd>
</dl>
</body>
</html>
7、表格標籤
- 演示
展現網站數據的時候 一盤狀況下可使用表格標籤
<table>
<thead>
<tr>
<th></th>
<tr>
</thead>
<tbody>
<tr>
<td></td>
<tr>
</tbody>
</table>
先寫表格標籤 在寫結構 而後寫數據
一個str 就是一行
th和td的區別
一個加粗 一個不加粗
一般狀況下表頭用th 表單內容用td
- 表格標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="5"> # 設置邊框的尺寸
<thead>
<tr> # 一個tr就是一行
<th>用戶名</th> # 表頭用th加粗
<th>年齡</th>
<th>愛好</th>
</tr>
</thead>
<tbody>
<tr>
<td>yafeng</td> # 表內容用td不加粗
<td>18</td>
<td>study</td>
</tr>
<tr>
<td rowspan="2">Jason</td> # rowspan行寬爲2，因此總共就2行
<td>73</td>
<td colspan="2">DBJ</td>
</tr>
<tr>
<td>tank</td>
<td>84</td>
<td>piao</td>
</tr>
</tbody>
</table>
</body>
</html>
8、表單標籤
- 演示
form標籤
獲取用戶輸入（輸入 選擇 上傳文件....）而且將數據打包發送給後端
action參數：
用來控制數據提交的路徑（究竟是哪一個後端服務器提交數據）
三種寫法：
一、不寫 默認就是朝着當前頁面所在的地址提交數據
二、全路徑好比（http://www.baidu.com）
三、只寫路徑後綴（/index/）
獲取用戶輸入的 input標籤 該標籤是一個行內標籤
input相似於前端的變形金剛
type屬性
text 普通文本
password 密文
date 日期
radio 多選一
checkbox 多選多
默認選種 checked="checked"
當標籤的屬性名和屬性值相同的時候 能夠只寫屬性名
女<input type="radio" name="gender" checked="checked">
簡寫
女<input type="radio" name="gender" checked>
reset 重置
button 普通按鈕
submit 觸發form表單提交動做
file 獲取文件
select標籤 下拉框
一個個選項就是一個個option標籤
默認是單選的
能夠加一個multiple該成多選
<select name="" id="" multiple>
<option value="" selected="selected">新恆結衣</option>
<option value="">三上悠亞</option>
<option value="" selected>三上悠亞</option>
<option value="">波老師</option>
<option value="">蒼老師</option>
</select>
如何讓option標籤默認選中
加selected="selected"也可簡寫selected
<select name="" id="" multiple>
<option value="" selected="selected">新恆結衣</option>
<option value="">三上悠亞</option>
<option value="" selected>三上悠亞</option>
<option value="">波老師</option>
<option value="">蒼老師</option>
</select>
textarea標籤 獲取大段文本
label 一般是配合input一塊兒使用的
for用來填寫對應的input標籤id值
點擊label標籤的內容 會自動讓對應的input標籤聚焦
能耐觸發form表單提交數據的按鈕
<input type='submit'>
能夠經過value屬性來指定按鈕文本內容
<input type='submit' value='註冊'>
<button>點我</button>
input獲取到的用戶輸入就相似因而字典中的value
input中的name屬性就相似因而字典中的key
- form表單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>註冊功能</p>
<form action="">
<p>
<label for="d1">用戶名:<input type="text" id="d1" name="username"></label>
</p>
<p>密碼:<input type="password" name="password"></p>
<p>生日:<input type="date"></p>
<p>性別:
男<input type="radio" name="gender" checked>
女<input type="radio" name="gender"> # radio多選一
其餘<input type="radio" name="gender">
</p>
<p>愛好:
籃球<input type="checkbox" name="hobby" checked>
足球<input type="checkbox" name="hobby"> # checkbox多選多
雙色球<input type="checkbox" name="hobby">
肉球<input type="checkbox" name="hobby" checked>
</p>
<p>省份:
<select name="province" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">深圳</option>
</select>
</p>
<p>前女朋友:
<select name="" id="" multiple> # multiple多選
<option value="" selected="selected">新恆結衣</option>
<option value="">三上悠亞</option>
<option value="" selected>三上悠亞</option> #社默認值
<option value="">波老師</option>
<option value="">蒼老師</option>
</select>
</p>
<p>我的簡介:
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<p>我的簡歷:
<input type="file">
</p>
<p>
<input type="submit" value="註冊">
<input type="reset" value="重置">
<input type="button" value="按鈕">
<button>點我</button>
</p>
</form>
</body>
</html>
9、標籤的分類2
- 演示
標籤的分類2
1.塊兒級標籤
獨佔一行 h1~h6 p br hr div
1.塊兒級標籤內部能夠嵌套任意的塊兒級標籤和行內標籤
2.特列:p雖然是塊兒級標籤 可是它的內部只能嵌套行內標籤 不能嵌套塊兒級標籤
若是嵌套了 沒有問題 知識不符合html語法規範
2.行內標籤 u s i b span
自身文本多大 就佔多大
行內標籤內部不能嵌套塊兒級標籤和行內標籤
書寫標籤的時候 你只須要寫標籤的名字 以後tab鍵就能夠自動補全
emmet插件
相關文章
- 1. css前端初始化
- 2. mmall前端項目初始化總結
- 3. VUE -- 前端項目初始化步驟
- 4. 初始化前端vue項目
- 5. WEB前端移動開發初始化
- 6. 搭建初始前端操作環境
- 7. 前端vscode 環境初始化
- 8. 初見前端
- 9. 初識前端
- 10. 前端初探
- 更多相關文章...
- • WSDL 端口 - WSDL 教程
- • XSLT - 在客戶端 - XSLT 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. css前端初始化
- 2. mmall前端項目初始化總結
- 3. VUE -- 前端項目初始化步驟
- 4. 初始化前端vue項目
- 5. WEB前端移動開發初始化
- 6. 搭建初始前端操作環境
- 7. 前端vscode 環境初始化
- 8. 初見前端
- 9. 初識前端
- 10. 前端初探