day44-前端知识之HTML内容
什么是前端?什么是后端?
# 任何與用戶直接打交道的操作界面都可以稱之為前端,前端跟python沒有任何關(guān)系 比如:電腦界面,手機界面,平板界面# 暫時先理解成 幕后操作者(不直接與用戶打交道) 為什么要學(xué)前端? 因為全棧開發(fā)工程師就是同時懂前端和后端 1.信心滿滿 老子一定能學(xué)會 憑啥學(xué)不會 2.哎呦臥槽 好像有點難 可能學(xué)不會 3.我靠 怎么還不畢業(yè) 老子要出去掙大錢 4.臥槽 怎么畢業(yè)了 我啥都不會 來老男孩學(xué)習(xí)的心路歷程?
軟件開發(fā)架構(gòu)(c/s, b/s)
Web服務(wù)的本質(zhì):
# 瀏覽器中敲入網(wǎng)址回車發(fā)送了幾件事? 1.瀏覽器朝服務(wù)端發(fā)送請求; 2.服務(wù)端接收請求 3.服務(wù)端返回相應(yīng)的響應(yīng) 4.瀏覽器接收響應(yīng) 根據(jù)特定的規(guī)則渲染頁面展示給用戶看?HTTP協(xié)議(*****)
超文本傳輸協(xié)議
規(guī)定了瀏覽器與服務(wù)端之間消息傳輸?shù)臄?shù)據(jù)格式
四大特性:
請求與響應(yīng)
# 請求數(shù)據(jù)格式 請求首行(標識HTTP協(xié)議版本,當前請求方式) 請求頭(一大堆k,v鍵值對) /r/n 請求體(攜帶的是一些敏感信息比如 密碼,身份證號...)# 響應(yīng)數(shù)據(jù)格式 響應(yīng)首行(標識HTTP協(xié)議版本,響應(yīng)狀態(tài)碼) 響應(yīng)頭(一大堆k,v鍵值對) /r/n 響應(yīng)體(返回給瀏覽器頁面的數(shù)據(jù) 通常響應(yīng)體都是html頁面)# 響應(yīng)狀態(tài)碼 用一串簡單的數(shù)字來表示一些復(fù)雜的狀態(tài)或者提示信息 1XX:服務(wù)端已經(jīng)成功接收了你的數(shù)據(jù)正在處理 你可以繼續(xù)提交額外的數(shù)據(jù) 2XX:服務(wù)端成功響應(yīng) 你想要的數(shù)據(jù)(請求成功200) 3XX:重定向(當你在訪問一個需要登錄之后才能訪問的頁面 你會發(fā)現(xiàn)窗口會自動調(diào)到登錄頁面 301 302) 4XX:請求錯誤(請求資源不存在404,請求不合法不符合內(nèi)部規(guī)定會權(quán)限不夠403) 5XX:服務(wù)器內(nèi)部錯誤(500)請求方式
1.get請求
朝服務(wù)端要資源(比如瀏覽器窗口輸入www.baidu.com)
2.post請求
朝服務(wù)端提交數(shù)據(jù)(比如用戶登錄 提交用戶名和密碼)
URL:統(tǒng)一資源定位符(大白話 就是網(wǎng)址)
HTML
超文本標記語言
要想讓你的頁面能夠正常被瀏覽器顯示出來 你所寫的頁面 就必須遵循h(huán)tml標記語法
也就意味著所有能夠被瀏覽器顯示出來的頁面 內(nèi)部都是html代碼
瀏覽器只認識html css js
web本質(zhì)(瀏覽器 / 服務(wù)器)
文件(后綴名是.html結(jié)尾的文件,也就意味著 只要看到.html結(jié)尾文件 那么它就是一個前端頁面文件)
文件的后綴名僅僅是給人看的 計算機無所謂 因為都是二進制數(shù)據(jù)
HTML注釋
HTML文檔結(jié)構(gòu)
<html> <head></head>:head內(nèi)的標簽 不是用來展示給用戶看的 而是定義一些配置 主要是給瀏覽器看的 <body></body>:body內(nèi)的標簽 就是瀏覽器展示給用戶看的內(nèi)容 </html> 打開html頁面的兩種方式
1.找到文件路徑 選擇瀏覽器打開
2.pycharm快捷方式直接打開
標簽的分類1:
?
標簽的分類2
1.塊兒級標簽(獨占瀏覽器一行)
div p h
1.塊兒級標簽可以修改長寬
2.塊兒級標簽內(nèi)部可以嵌套任意的塊級標簽
但是p標簽雖然是塊兒級標簽 但是他不能夠嵌套其他塊兒級標簽 包括自身
可以嵌套行內(nèi)標簽
總結(jié):
只要是塊兒級標簽 都可以嵌套行內(nèi)標簽
p標簽只能嵌套行內(nèi) 其他塊兒級可以嵌套任意的塊兒級標簽
2.行內(nèi)標簽(自身文本多大就占多大)
span b s i u
div和span通常都是用來構(gòu)建網(wǎng)頁布局的
body內(nèi)常用標簽
基本標簽
h標簽:標題標簽
p標簽:段落標簽
符號
常用標簽
div
span
p
img
src存放的是圖片的路徑(該路徑可以是本地的也可以是網(wǎng)上的)
1.也可以放url(會自動請求該url獲取相應(yīng)數(shù)據(jù))
2.也可以直接放圖片的二進制數(shù)據(jù) 會自動轉(zhuǎn)換成圖片
alt當圖片加載不出來的時候 顯示的提示信息
title當鼠標懸浮在圖片上 提示的信息
height,width 當你只指定一個參數(shù)的時候 另外一個會等比例縮放
a
href后面存放url的時候 點擊跳轉(zhuǎn)到該url
如果該鏈接沒有被點過 那么默認是藍色,只要點過依次 之后都是紫色
target 默認是_self當前頁面跳轉(zhuǎn)
_blank新建頁面跳轉(zhuǎn)
錨點功能(回到頂部)
href還可以寫另一個a標簽的id值,點擊就會跳到id值所對應(yīng)的a標簽
每一個標簽都應(yīng)該有三個比較重要的屬性
1.id值 該值就類似于人的身份證號 在用一個html文檔id應(yīng)該保證唯一不重復(fù)
2.class值 該值就類似于面向?qū)ο罄锩娴睦^承 可以寫多個
3.style(不是必備) 支持在標簽內(nèi)直接寫css代碼 屬于行內(nèi)樣式 優(yōu)先級最高
補充 任何標簽都支持自定義屬性!!!
列表標簽
表格標簽(*****)
?
表單標簽(******)
# 能夠接收用戶輸入(輸入 選擇 上傳)并將其發(fā)送給后端 以注冊實例位例講解form表單# action控制數(shù)據(jù)提交的目的地 1.不寫的情況下 默認提交到當前頁面所在的路徑 2.寫全路徑(https://www.baidu.com) 3.路徑后綴(/index/)# input標簽就類似于是前端變形金剛 type text:普通文本 password:密文 不展示明文 date:日期 submit:觸發(fā)提交動作 button:普通按鈕 沒有實際意義 但是可以通過js綁定事件實現(xiàn)自定義動作 reset:重置表單內(nèi)容 radio:單選 可以通過checked控制默認選擇(當屬性值和屬性名相同的情況下 可以簡寫 checked) checked="checked" checkbox:多選 同上 可以設(shè)置默認值 file:獲取用戶上傳的文件# select標簽 默認是單選 可以通過multiple變成多選 如果想默認選擇 用selected (selected="selected")# textarea標簽 獲取用戶輸入的大段文本# form表單默認是get請求 你需要通過method參數(shù) 換成post提交 form表單中 要想觸發(fā)提交動作 只有兩種情況可以 1.input標簽type指定成submit 2.直接寫button標簽獲取用戶輸入(輸入 選擇 上傳...)的標簽 都必須有一個name屬性 這個name屬性就類似于字典的key,而標簽獲取到的用戶寫入的值就類似于字典的value<input type="text" id="d1" name="username" value="默認值"> name就相當于是字典的key value就是字典的值 獲取都的用戶輸入都會被放入value屬性中form表單傳文件的時候 需要指定enctype參數(shù)emmet插件防呆措施?
?
轉(zhuǎn)載于:https://www.cnblogs.com/Ryan-Yuan/p/11455555.html
總結(jié)
以上是生活随笔為你收集整理的day44-前端知识之HTML内容的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一种基于伪标签半监督学习的小样本调制识别
- 下一篇： HTML5崛起之时，Java桌面时代就已