前端 HTML
?
?
前端1 什么是前端？任何直接能夠跟用戶(hù)打交道的交互界面都可以稱(chēng)之為前端2 為什么要學(xué)前端？python全棧開(kāi)發(fā) 軟件開(kāi)發(fā)架構(gòu)c/s架構(gòu)b/s架構(gòu)本質(zhì)上b/s也是c/s架構(gòu)瀏覽器輸入網(wǎng)址發(fā)生了幾件事？1 輸入網(wǎng)址2 向服務(wù)端發(fā)送了請(qǐng)求3 服務(wù)器接收請(qǐng)求并查詢(xún)?yōu)g覽器想要的數(shù)據(jù)返回給瀏覽器4 瀏覽器拿到數(shù)據(jù)展示頁(yè)面HTTP協(xié)議超文本傳輸協(xié)議文件的后面名是給誰(shuí)看？文件的后綴并不是給計(jì)算機(jī)看，只僅僅是給人看的HTML超文本標(biāo)記語(yǔ)言 注釋HTML文檔結(jié)構(gòu)
<!DOCTYPE html> <html lang="en"> <head><!--head存放的內(nèi)容用戶(hù)是看不到的，主要是給瀏覽器和搜索引擎看的--><meta charset="UTF-8"><title>Title</title> </head> <body><!--用戶(hù)能夠看見(jiàn)的內(nèi)容都在body里面--> <!--這是多行注釋--> </body> </html>html文件打開(kāi)方式
方式1： 找到該文件選擇瀏覽器打開(kāi)
方式2：pycharm內(nèi)自動(dòng)打開(kāi) 先啟動(dòng)服務(wù)器
?
head內(nèi)常用標(biāo)簽
title:頁(yè)面標(biāo)題? 就是你新打開(kāi)網(wǎng)頁(yè)的標(biāo)題
style：寫(xiě)css代碼
script:內(nèi)部可以直接寫(xiě)js代碼，也可以通過(guò)src屬性??引入內(nèi)部js代碼文件? ? ?就是你進(jìn)入一個(gè)網(wǎng)頁(yè)的時(shí)候上面會(huì)有一個(gè)提示信息
link：通過(guò)href引入外部css文件? ?可以對(duì)你下面的body里面的內(nèi)容加樣式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="refresh" content="2;URL=https://www.cnblogs.com/lakei/"><!--兩秒后跳轉(zhuǎn)到對(duì)應(yīng)的網(wǎng)址--><title>這是我的第一個(gè)前端頁(yè)面</title><script src="04%20myjs.js"></script><!--script:內(nèi)部可以直接寫(xiě)js代碼，也可以通過(guò)src屬性 就是你進(jìn)入一個(gè)網(wǎng)頁(yè)的時(shí)候上面會(huì)有一個(gè)提示信息--><link rel="stylesheet" href="03%20mycss.css"> </head> <body><h1>來(lái)了 老弟</h1><img src="https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D500/sign=4d1f3cc25966d0167a199e28a72ad498/728da9773912b31bc49572268d18367adbb4e1c0.jpg" alt="王鷗"> </body> </html> head內(nèi)常用標(biāo)簽?
body內(nèi)標(biāo)簽
基本標(biāo)簽
h1~h6:標(biāo)題標(biāo)簽
p: 段落標(biāo)簽? 塊級(jí)標(biāo)簽 自己站一行
<s>199</s> 現(xiàn)價(jià)99 #雙十一砍價(jià)原價(jià)199 現(xiàn)價(jià) 99 <br> #塊級(jí)標(biāo)簽 獨(dú)占一行 <u>下劃線</u> #字體下面帶下劃線 <hr> #塊級(jí)標(biāo)簽 一行的分割線 <i>斜體</i> #斜體 <b>加粗</b> #加粗 View Code
特殊標(biāo)簽
空格是 &本身是&；
大于號(hào) &get; 小于號(hào) < 金錢(qián)￥ ¥； 版權(quán)符號(hào) © 注冊(cè)商標(biāo) ®一個(gè)空格可以用敲一個(gè)空格會(huì)顯示出來(lái) 你再去敲空格 頁(yè)面上只顯示一個(gè) 可以用& 表示一個(gè)空格單位 View Code?
常用標(biāo)簽
div? 塊級(jí)標(biāo)簽 獨(dú)占一行
span? 行內(nèi)標(biāo)簽內(nèi)容有多少占多數(shù)空間
a 標(biāo)簽 href 跟一個(gè)網(wǎng)頁(yè)地址? target 可以設(shè)置參數(shù) 默認(rèn)（_self）是當(dāng)前網(wǎng)頁(yè)跳轉(zhuǎn) 改為_(kāi)blank 后就是在打開(kāi)一個(gè)新網(wǎng)頁(yè)
a 標(biāo)簽 還支持定位?<a href="" id="a1">top</a>
<div style="height: 1000px;background: rgba(122,81,58,0.53)"></div><div style="height: 1000px;background: #3652a5"></div>
<div style="height: 1000px;background: #1b8ea5"></div>
img 圖片標(biāo)簽??<img src="123.jpg" alt="王鷗">? alt 圖片不存在或者損壞的時(shí)候顯示的圖片是什么??title="王鷗" width="400"? title 鼠標(biāo)懸停在上面顯示的內(nèi)容?
width 可以設(shè)置圖片大小 圖片都是等比例縮小 放大的
頁(yè)尾 a 標(biāo)簽?<a href="#a1">返回頂部</a>? ?#在這里點(diǎn)擊可以返回到頂部
?
標(biāo)題列表
無(wú)需列表 ul>li*2
有序列表ol>li*2? ol 后面可以type設(shè)置排序的方式
標(biāo)題列表?<dl>
<dt>標(biāo)題1</dt><dd>內(nèi)容</dd>
<dd>內(nèi)容2</dd>
<dt>標(biāo)題2</dt>
<dd>內(nèi)容1</dd>
<dd>內(nèi)容2</dd>
</dl>
表格標(biāo)簽
table border="1" 表的外邊框?qū)挾? <body> <table border="10"><thead><tr><th>name</th><th>age</th><th>bobby</th></tr></thead><tbody ><tr><td>jason</td><td>19</td><td rowspan="2">學(xué)習(xí)</td> #列合并</tr><tr><td>egon</td><td>18</td><!--<td>吃飯</td>--></tr><tr><td>owen</td><!--<td>18</td>--><td colspan="2">撩妹</td> #橫向合并</tr></tbody></table> </body> </html>
?
? ??寫(xiě)功能的時(shí)候 記得寫(xiě)注釋
<!--導(dǎo)航條開(kāi)始--><!--導(dǎo)航條結(jié)束--> <!--側(cè)邊欄開(kāi)始-->
<!--側(cè)邊欄結(jié)束-->
? ? ?后面維護(hù)的時(shí)候方便查找
? form表單（******）
功能：獲取用戶(hù)輸入（手動(dòng)輸入/選擇輸入/默認(rèn)值），并將獲取到的用戶(hù)信息發(fā)送給后端
form表單中只有input的type類(lèi)型為submit才會(huì)觸發(fā)提交信息的動(dòng)作
如果不想通過(guò)input標(biāo)簽來(lái)觸發(fā)提交動(dòng)作 那么可以直接寫(xiě)一個(gè)<button> button按鈕</tutton>
input
通過(guò)控制type的類(lèi)型從而實(shí)現(xiàn)不同的獲取用戶(hù)輸入的標(biāo)簽樣式
text? ? ? ? ? ? ?普通文本
password? ?密文
date 日歷
? radio ? 單選項(xiàng)(加了之后變成選項(xiàng) 不加用默認(rèn)text)? 默認(rèn)值checked
checkbox 多選框 默認(rèn)值checked
file 獲取文件
submit 觸發(fā)提交數(shù)據(jù)的行為
button 普通的按鈕??<input type="button" value="普通按鈕">
reset 重置form表單內(nèi)容
select?
選擇框 默認(rèn)是單選的 可以通過(guò)multiple參數(shù)將單選變成多選??<select name="" id="" multiple> 下面可以跟多個(gè)option
一個(gè)option就是一個(gè)選項(xiàng)
textarea
獲取用戶(hù)大段文本值
? form表單中幾個(gè)重要的屬性
action:用來(lái)控制數(shù)據(jù)到底提交給誰(shuí)，寫(xiě)url來(lái)指定提交給誰(shuí)
form表單默認(rèn)是get請(qǐng)求，可以通過(guò)methord屬性修改提交方法
form表單中需要給每一個(gè)獲取用戶(hù)輸入的標(biāo)簽加上name屬性用來(lái)標(biāo)識(shí)當(dāng)前數(shù)據(jù)的類(lèi)型
你可以將name屬性當(dāng)做字典的key 用戶(hù)輸入的當(dāng)做字典的value 并且你可以手動(dòng)設(shè)置value值
form表單發(fā)送文件 需要修改enctype屬性的值
默認(rèn)urlencoded不支持傳輸文件
需要將其修改文multipart/form-data
1 獲取用戶(hù)輸入的標(biāo)簽都必須需有一個(gè)name屬性
用戶(hù)輸入的值會(huì)被存放到標(biāo)簽的value屬性中
你可以理解為name屬性對(duì)應(yīng)是字典的key
用戶(hù)輸入的被value屬性獲取得到值是字典的valu
2 label 標(biāo)簽
通常是和input標(biāo)簽組合使用
<form action="">
<label for="i1">username: <input type="text" id= "i1" name="username"></label>
<label for= "i2"> password: <input type="password" name="pwd" id="i2"></label>
<input type="submit">
</form>
GET請(qǐng)求與POST請(qǐng)求
get請(qǐng)求：向服務(wù)端獲取資源（可以攜帶參數(shù)供服務(wù)端校驗(yàn)）
不推薦攜帶敏感性的參數(shù)
get請(qǐng)求攜帶的參數(shù)是有大小限制的? 大概4KB
可以攜帶一些不重要的參數(shù)
post請(qǐng)求：朝服務(wù)端提交數(shù)據(jù)
敏感性的信息 都應(yīng)該采用post提交方式
將form 表單中的method改為post就可以了注冊(cè)的時(shí)候
<form action="" method="post"><label for="i1">username: <input type="text" id="i1" name="username"></label>
<label for="i2">password: <input type="password" id="i2" name="password"></label>
<input type="submit">
</form>
?
總結(jié)：
標(biāo)簽分類(lèi)1：雙標(biāo)簽 h1~h6 p a自閉和標(biāo)簽 img br hr標(biāo)簽分類(lèi)2（*****）塊級(jí)標(biāo)簽 div h1~h6 p hr br獨(dú)占一行塊級(jí)標(biāo)簽?zāi)軌蚯短讐K級(jí)標(biāo)簽和行內(nèi)標(biāo)簽p標(biāo)簽雖然是塊級(jí)標(biāo)簽但是它不能嵌套任何的塊級(jí)標(biāo)簽塊級(jí)標(biāo)簽?zāi)軌蛟O(shè)置長(zhǎng)款行內(nèi)標(biāo)簽 span a img i s b u自身內(nèi)容有多大就占多大行內(nèi)標(biāo)簽不能設(shè)置長(zhǎng)寬url:統(tǒng)一資源定位符 什么是url?url是統(tǒng)一資源定位器（Uniform Resource Locator）的縮寫(xiě)，也被稱(chēng)為網(wǎng)頁(yè)地址，是因特網(wǎng)上標(biāo)準(zhǔn)的資源的地址url舉例： http://www.sohu.com/stu/intro.html http://222.172.123.33/stu/intro.htmlURL地址由4部分組成 第1部分：為協(xié)議：http://、ftp://等 第2部分：為站點(diǎn)地址：可以是域名或IP地址 第3部分：為頁(yè)面在站點(diǎn)中的目錄：stu 第4部分：為頁(yè)面名稱(chēng)，例如 index.html 各部分之間用“/”符號(hào)隔開(kāi)。a標(biāo)簽：連接標(biāo)簽可以通過(guò)href跳轉(zhuǎn)到指定的網(wǎng)址錨點(diǎn)功能：回到頂部<a href="" id="a1">top</a><a href="#a1">bottom</a>ps:target屬性用來(lái)控制是否在當(dāng)前頁(yè)跳轉(zhuǎn)默認(rèn)是_self當(dāng)前頁(yè)也可以指定成_blank新建頁(yè)面跳轉(zhuǎn)所有的html標(biāo)簽都應(yīng)該有一個(gè)id屬性，用來(lái)唯一標(biāo)識(shí)當(dāng)前標(biāo)簽，為后續(xù)的DOM操作提供基礎(chǔ) 也就意味著同一份html中標(biāo)簽的id不嫩重復(fù)，不寫(xiě)id屬性也是可以的img標(biāo)簽src圖片路徑：即可以是網(wǎng)絡(luò)上的圖片地址也可以是本地的圖片地址alt當(dāng)前圖片加載失敗之后自動(dòng)展示的提示信息title 鼠標(biāo)懸停在圖片上時(shí)顯示的文本圖片調(diào)節(jié)長(zhǎng)寬的啥時(shí)候只需要調(diào)節(jié)一個(gè)，另外一個(gè)參數(shù)自動(dòng)等比例縮放列表標(biāo)簽ul:無(wú)需列表ol:有序列表dl：標(biāo)題列表表單標(biāo)簽固定以下面的格式書(shū)寫(xiě)<table><theade></theade><tbody></tbody></table>tr 一個(gè)tr表示一行border調(diào)整列表的邊框cellspacing 調(diào)單元格與外邊框之間的距離cellpadding 調(diào)文本與單元格之間的距離rowspan 垂直反向合并colspan 水平反向合并form表單功能：獲取用戶(hù)輸入（山東輸入/選擇/默認(rèn)值），并將獲取到的用戶(hù)信息發(fā)送給后端form表單中只有input的type類(lèi)型為submit才會(huì)觸發(fā)提交信息的動(dòng)作如果不想通過(guò)input標(biāo)簽來(lái)觸發(fā)提交動(dòng)作，那么可以直接寫(xiě)一個(gè)<button>button按鈕</button>input 通過(guò)控制type的類(lèi)型從而實(shí)現(xiàn)不同的獲取用戶(hù)輸入的標(biāo)簽樣式text 普通文本password 密文date 日歷radio 單選框checkbox 多選框file 獲取文件submit 觸發(fā)提交數(shù)據(jù)的行為button 普通按鈕reset 重置form表單內(nèi)容select 選擇框 默認(rèn)是單選的，可以通過(guò)multiple參數(shù)將單選變?yōu)槎噙x一個(gè)option就是一個(gè)選項(xiàng)textarea獲取用戶(hù)大段文本值?
轉(zhuǎn)載于:https://www.cnblogs.com/lakei/p/10940484.html
與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖總結(jié)
- 上一篇： AssetBundle
- 下一篇： 如何处理HTML5新标签的浏览器兼容问题